:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none;--bg:#0c121b;--panel:#131e2b;--panel2:#192739;--line:#2c3c4e;--muted:#9bacbc;--text:#edf4fa;--blue:#70b8d7;--accent:#cba574}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--text);background:var(--bg);font-size:13px}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}[hidden]{display:none!important} .app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;flex:0 0 61px;padding:10px 17px;background:#101b27;border-bottom:1px solid var(--line)}.branding{display:flex;align-items:center;gap:11px}.brandicon{display:grid;place-items:center;width:39px;height:39px;background:#243a4b;border:1px solid #597688;border-radius:10px;color:#b9e3f3;font-size:24px}.branding strong{display:block;font-size:15px;letter-spacing:1.1px}.branding span{color:var(--muted);display:block;font-size:9px;letter-spacing:1.65px;margin-top:2px}.top-actions{display:flex;gap:11px;align-items:center}.connection{font-size:11px;color:#a5c3d3}.connection:before{content:'●';font-size:9px;margin-right:6px;color:#e1ad70}.connection.connected:before{color:#8bdaa4}.top-settings{font-size:20px;border:0;background:transparent;color:#bccfde;padding:4px 8px}.workspace{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:0;flex:1}.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.sidebar-head{padding:13px 12px 8px}.nav-tabs{display:grid;grid-template-columns:1fr 1fr;background:#0b1521;border-radius:8px;border:1px solid #2a3d51;padding:3px}.nav-tab{border:0;border-radius:6px;background:none;color:#a8bcca;padding:9px 6px;font-weight:600}.nav-tab.active{color:#f2f9ff;background:#314a60}.sidebar-section{display:flex;flex-direction:column;padding:5px 12px 10px;gap:10px;flex:1;min-height:0}.sidebar-tools{display:flex;gap:6px}.btn{padding:8px 11px;border:1px solid #3e5469;color:#e7f1fa;border-radius:7px;background:#1c2d3f;font-weight:600;min-height:35px;white-space:nowrap}.btn:hover{background:#30465b}.btn.main{background:#245b78;border-color:#4d9bbf;color:white}.btn.main:hover{background:#337b9c}.btn.subtle{background:#1b2c3e}.btn.danger{background:#472731;border-color:#7c4850;color:#ffdfe3}.btn.icon-btn{width:39px;font-size:18px}.btn.full{width:100%}.sidebar-tools .main{flex:1}.searchwrap{display:flex;align-items:center;background:#0a1622;border:1px solid #31485c;border-radius:7px;color:#92afc4;padding-left:9px;font-size:20px}.searchwrap input{color:var(--text);border:0;outline:0;background:none;padding:10px 8px;width:100%;min-width:0}.filters{display:grid;grid-template-columns:1fr 1fr;gap:7px}.filters select:last-child{grid-column:1/-1}.filters select{border:1px solid #34495d;border-radius:6px;color:#ddeaf4;background:#1d3042;padding:8px;width:100%;min-width:0}.filter-line{display:flex;justify-content:space-between;align-items:center;color:#b5c4ce;font-size:11px;gap:7px}.filter-line input{accent-color:#72b9db;vertical-align:middle}.minor{color:var(--muted)}.sidebar-list{flex:1;overflow:auto;min-height:80px;border:1px solid #293d4e;border-radius:8px;background:#0d1825}.monster-row{display:flex;gap:7px;align-items:center;border-bottom:1px solid #233243;padding:9px 8px;min-height:58px}.monster-row:hover{background:#1d3346}.monster-row .row-main{flex:1;min-width:0;cursor:pointer}.row-name{font-weight:650;font-size:12.5px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.row-sub{display:block;color:#9eb5c6;font-size:10.5px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.small-icon{border:0;background:transparent;color:#9eb3c1;padding:5px;font-size:16px}.small-icon:hover{color:white}.small-icon.starred{color:#ffd58a}.add-icon{border:1px solid #46677c;color:#bae4f4;background:#23435a;width:27px;height:27px;border-radius:6px;font-size:18px}.empty-list{color:#8da5b8;text-align:center;padding:25px 13px;line-height:1.5}.side-foot{font-size:10.5px;line-height:1.55;color:#8da1b3;margin:0 2px}.section-divider{display:flex;justify-content:space-between;align-items:center;margin-top:5px;padding:6px 2px;color:#bed0dd}.board{min-width:0;min-height:0;display:flex;flex-direction:column;background:#0b141e}.boardtop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 18px 12px;border-bottom:1px solid #213041}.eyebrow{font-size:10px;color:#98adc0;letter-spacing:1.5px;font-weight:bold}.titleline{display:flex;align-items:center;gap:9px;margin-top:5px;min-width:0}.titleline h1{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:350px;margin:0}.pill{display:inline-block;white-space:nowrap;color:#aec7d7;background:#26394b;border-radius:12px;padding:3px 8px;font-size:11px}.board-actions{display:flex;gap:6px}.viewbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 17px;border-bottom:1px solid #213041;color:#91aabc;font-size:11px}.segmented{display:flex;border:1px solid #374d61;border-radius:7px;overflow:hidden}.segmented button{font-size:16px;background:#1b2c3e;color:#a5c0cf;border:0;padding:5px 10px}.segmented button.active{background:#365771;color:white}.cardboard{overflow:auto;flex:1;min-height:0;padding:13px 15px 25px;display:grid;align-content:start;gap:14px}.cardboard.grid-layout{grid-template-columns:repeat(2,minmax(0,1fr))}.cardboard.stack-layout{grid-template-columns:minmax(0,1fr)}.empty-board{grid-column:1/-1;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;margin:auto;max-width:310px;min-height:370px;color:#b4c7d6}.empty-board h2{color:#e7f5ff;font-size:19px;margin:0}.empty-board p{line-height:1.5;margin:0 0 9px}.empty-symbol{font-size:42px;color:#537991;opacity:.7}.viewer{min-width:0;border:1px solid #384d5d;border-radius:10px;background:#142231;overflow:hidden;align-self:start}.viewer-header{background:#1e3143;border-bottom:1px solid #364b5b;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 9px}.viewer-heading{min-width:0;overflow:hidden}.viewer-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.viewer-meta{color:#92b4c8;font-size:10px;margin-top:3px}.viewer-actions{white-space:nowrap;display:flex;gap:1px}.viewer-actions button{color:#bad1dd;border:0;background:transparent;font-size:15px;padding:4px 5px}.viewer-actions button:hover{background:#345168;color:white;border-radius:5px}.viewer-image-window{height:350px;overflow:auto;background:#f0eae1;position:relative}.viewer-image-window img{display:block;width:100%;max-width:none;height:auto;min-height:1px}.viewer-image-window img.error{display:none}.image-error{font-size:12px;color:#75392e;padding:15px;line-height:1.5}.viewer-footer{display:flex;align-items:center;gap:7px;padding:6px 9px;border-top:1px solid #344656;background:#192b3b;color:#a4bdcd;font-size:11px}.viewer-footer .spacer{flex:1}.viewer-footer button{border:1px solid #466073;background:#22394c;color:#d6eaf6;border-radius:5px;min-width:25px;min-height:24px}.viewer-footer .zoom-label{min-width:36px;text-align:center}.notes{padding:8px 9px 11px;font-size:11px;white-space:pre-wrap;line-height:1.45;color:#c7d8e4;word-break:break-word}.encounter-row{padding:11px 8px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #27394a}.encounter-row .row-main{flex:1;min-width:0;cursor:pointer}.encounter-row:hover{background:#1d3447}.toast{position:fixed;z-index:15;bottom:16px;right:15px;max-width:min(420px,90vw);border:1px solid #4d829e;background:#193b51;border-radius:9px;padding:11px 14px;box-shadow:0 9px 28px #0008;line-height:1.4}.toast.bad{background:#482934;border-color:#b55d6b}.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#050b11d9;padding:15px}.modal{background:#172535;width:min(485px,100%);max-height:95vh;overflow:auto;border:1px solid #496276;border-radius:12px;padding:17px;box-shadow:0 15px 45px #0008}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.modal-header h2{font-size:18px;margin:0}.close-btn{border:0;background:none;color:#a9c2d4;font-size:27px}.modal form{display:flex;flex-direction:column;gap:13px}.modal label{display:flex;flex-direction:column;gap:5px;color:#dbe8f0;font-size:12px;font-weight:600}.modal input:not([type=file]),.modal textarea{padding:9px 10px;color:#fff;background:#0d1b29;border:1px solid #395267;border-radius:6px;width:100%}.modal small{font-size:10px;color:#92aabe;font-weight:normal}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:11px}.modal-actions{display:flex;gap:8px;justify-content:space-between;margin-top:6px}.muted{color:#aec0cf;line-height:1.6}.smalltext{font-size:11px}.backup-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.import-label{display:inline-flex;align-items:center;cursor:pointer}.storage-stats{background:#101d2a;border:1px solid #344b60;padding:11px;border-radius:7px;line-height:1.8;color:#d3e2ec}.modal hr{border:0;border-top:1px solid #385066;margin:15px 0}.upload-submit{margin-top:15px}.permission-screen{padding:25px;text-align:center}
@media(max-width:760px){.workspace{grid-template-columns:230px minmax(0,1fr)}.cardboard.grid-layout{grid-template-columns:1fr}.boardtop{padding:12px}.board-actions{flex-direction:column}.board-actions button{padding:5px}.viewbar-left{max-width:200px}.branding strong{font-size:12px}}
@media(max-width:490px){.workspace{grid-template-columns:185px minmax(0,1fr)}.sidebar-section{padding-left:6px;padding-right:6px}.sidebar-head{padding-left:6px;padding-right:6px}.boardtop{flex-wrap:wrap}.board-actions{flex-direction:row}.viewbar-left{display:none}.titleline h1{font-size:15px}.filters{grid-template-columns:1fr}.viewer-image-window{height:270px}}