:root{color-scheme:dark;--bg:#0e1115;--panel:#171c22;--edge:#2b323b;--red:#ed594b;--text:#e9eef3}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px Inter,'Segoe UI',Arial,sans-serif}
header{padding:25px clamp(18px,3vw,46px);background:linear-gradient(115deg,#20262e,#11161c 55%,#242127);border-bottom:1px solid #363c44;position:relative;overflow:hidden}
header:before{content:"";position:absolute;inset:-100%;background:linear-gradient(110deg,transparent 44%,#ffffff09 50%,transparent 56%);animation:sweep 13s linear infinite;pointer-events:none}
header:after{content:"";position:absolute;right:5%;top:12%;width:160px;height:160px;border:1px solid #ed594b33;transform:rotate(45deg);animation:float 9s ease-in-out infinite alternate;pointer-events:none}
small{letter-spacing:2.6px;color:#b0b8c1;font-size:10px}h1{font-size:clamp(27px,3vw,44px);letter-spacing:-1.5px;margin:9px 0 3px;font-weight:800}h1 span{color:var(--red)}header p{color:#aeb7c1;letter-spacing:1.4px;font-size:10px}
main{max-width:1700px;margin:auto;padding:20px clamp(12px,2vw,30px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.stat{padding:14px 17px;background:linear-gradient(125deg,#1b2229,#151a20);border:1px solid #313941;border-radius:7px;transition:transform .2s,border-color .2s}.stat:hover{transform:translateY(-2px);border-color:#6c7079}.stat b{font-size:26px;display:block;font-variant-numeric:tabular-nums}.stat label{font-size:10px;letter-spacing:1.3px;color:#9ca7b2}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}input,select,button{border:1px solid var(--edge);background:#1b2229;color:white;padding:9px 12px;font:inherit;border-radius:5px;transition:background .18s,border-color .18s,transform .18s}input{flex:1;min-width:190px}input:focus,select:focus{outline:none;border-color:#e26b60}button{cursor:pointer;font-weight:650;letter-spacing:.3px}button.primary{background:#b94a40;border-color:#c95d53}button:hover{background:#303943;transform:translateY(-1px)}button.primary:hover{background:#d45b4e}
.tablewrap{overflow:auto;border:1px solid var(--edge);border-radius:7px;background:#13181e;max-height:69vh}table{border-collapse:separate;border-spacing:0;min-width:1120px;width:100%;table-layout:fixed}th{border-right:1px solid #46505a;cursor:pointer;user-select:none;position:sticky;top:0;background:#252c34;text-align:left;padding:10px 9px;color:#cdd6df;z-index:1;font-size:11px;font-weight:700;letter-spacing:.2px;border-bottom:1px solid #48515c}th:nth-child(1){width:8%}th:nth-child(2){width:12%}th:nth-child(3){width:11%}th:nth-child(4){width:11%}th:nth-child(5){width:12%}th:nth-child(6),th:nth-child(7),th:nth-child(8){width:6%}th:nth-child(9){width:28%}
td{height:27px;max-height:27px;line-height:17px;padding:4px 8px;border-right:1px solid #39424d;border-bottom:1px solid #29313a;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;font-size:12px}td.note{min-width:0}tr{transition:background .16s}tr:nth-child(even){background:#192027}tr:hover{background:#303943}td[style]{font-weight:inherit}td:not(.selected):hover{outline:1px solid #778ca0;outline-offset:-1px}td.selected{background-image:linear-gradient(#ffb86b28,#ffb86b28);outline:2px solid #ffb86b;outline-offset:-2px}#sidepanel{background:#1b2229;border:1px solid #46515f;border-radius:8px;padding:16px;margin-bottom:12px;max-height:380px;overflow:auto}#sidepanel p{border-bottom:1px solid #3a414a;padding:8px 0}#sidepanel button{margin:4px}td[contenteditable="true"]{outline:1px solid transparent}td[contenteditable="true"]:focus{outline:2px solid #e7685b;background:#28313b;color:white}html{scroll-behavior:smooth} .tablewrap{scroll-behavior:smooth}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 85% 10%,#d84b3211,transparent 48%),radial-gradient(ellipse at 10% 90%,#5c789c12,transparent 45%);animation:ambient 18s ease-in-out infinite alternate}@keyframes ambient{to{transform:translate(3%,-2%) scale(1.06)}}
.pager{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin:12px 0}.muted{color:#9ca4ae}
@media(max-width:650px){.stats{grid-template-columns:repeat(3,1fr)}.stat{padding:10px}.stat b{font-size:20px}header{padding:20px 15px}h1{letter-spacing:-1px}.toolbar>*{flex:1}}
@keyframes sweep{from{transform:translateX(-35%)}to{transform:translateX(35%)}}@keyframes float{to{transform:translateY(15px) rotate(58deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Interface revision: resizable columns/rows and theme controls */
body.light-mode{--bg:#f3f6fa;--panel:#fff;--edge:#cbd5e1;--text:#172334;color-scheme:light;background:var(--bg);color:var(--text)}
body.light-mode header{background:linear-gradient(110deg,#f8fafc,#e8eef5);border-color:#cbd5e1}
body.light-mode header p,body.light-mode small{color:#516074}
body.light-mode .stat{background:#fff;border-color:#d6dfe8}
body.light-mode .stat label,body.light-mode .muted{color:#536175}
body.light-mode input,body.light-mode select,body.light-mode button{background:#fff;color:#182333;border-color:#b8c5d3}
body.light-mode button.primary{background:#ad453c;color:white}
body.light-mode .tablewrap{background:#fff}
body.light-mode th{background:#e8edf4;color:#253347;border-color:#b8c4d2}
body.light-mode tr:nth-child(even){background:#f1f5f9}
body.light-mode #sidepanel{background:#fff;color:#1c293b}
body.light-mode td:not([style]){color:#172334}
body.light-mode td[contenteditable=true]:focus{background:#dbeafe;color:#172334}
.tablewrap td{border-right:1px solid #64748b88;border-bottom:1px solid #64748b77;transition:box-shadow .13s ease,filter .13s ease}
.tablewrap td:hover{box-shadow:inset 0 0 0 2px #60a5fa,inset 0 0 0 9999px #ffffff0a;position:relative;z-index:1}
.tablewrap th{position:sticky;min-width:48px}
.column-grip{position:absolute;right:0;top:0;height:100%;width:8px;cursor:col-resize;z-index:3;touch-action:none}
.column-grip:hover{background:#60a5fa88}
.row-grip{position:absolute;bottom:0;left:0;width:100%;height:5px;cursor:row-resize;z-index:2;touch-action:none}
.tablewrap td:first-child{position:relative}
#themeToggle{min-width:118px}

[hidden]{display:none!important}button:disabled{opacity:.45;cursor:not-allowed;transform:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.topline,.sessionbar,.dialogtop,.editorfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}.stage{font-size:10px;letter-spacing:1px;color:#f2c494;border:1px solid #69513d;border-radius:4px;padding:5px 8px}.sessionbar{margin-bottom:14px}.sessionbar button{padding:5px 10px}.sessionbar #who{margin-right:auto}.stage-note{padding:12px 15px;border-left:3px solid #bf8c56;color:var(--text);background:#bf8c5610;line-height:1.6}.toolbar button{font-size:12px}.toolbar.actions{gap:6px}.secondary{padding-top:4px;border-top:1px solid var(--edge)}input[type=color]{min-width:0;max-width:34px;width:34px;height:33px;flex:none;padding:2px}#activity{margin:9px 0;min-height:16px;font-size:11px}#loginPanel{max-width:460px;margin:30px auto;padding:26px;background:var(--panel);border:1px solid var(--edge);border-radius:9px}form label{display:block;margin:14px 0;color:var(--text)}form label input,form label select{display:block;width:100%;margin-top:6px}#loginError{color:#ef8d82}#journal{width:max-content;min-width:100%;table-layout:fixed}#journal th{width:auto;white-space:nowrap;padding-right:18px}#journal td{height:31px;max-height:none}#journal td .cell-text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#journal td:first-child{padding-left:13px}#journal td.selected{outline:2px solid #ffb86b;background-image:linear-gradient(#ffb86b22,#ffb86b22)}#selectedLabel{margin-right:auto}#panel{position:fixed;top:0;bottom:0;right:0;width:min(560px,95vw);padding:28px;background:var(--panel);border-left:1px solid var(--edge);box-shadow:-10px 0 50px #0007;z-index:100;overflow:auto}#panelGrip{position:absolute;top:0;bottom:0;left:0;width:7px;cursor:col-resize}#closePanel{float:right;padding:2px 10px;font-size:25px}#panelContent{padding-top:15px}.entry{padding:14px;margin:12px 0;border:1px solid var(--edge);border-radius:7px;white-space:pre-wrap;overflow-wrap:anywhere}.entry p{line-height:1.55;margin:8px 0}.entry button{font-size:11px;margin:5px 5px 0 0}.entry small{letter-spacing:.2px}.entry pre{white-space:pre-wrap;font:11px monospace;max-height:180px;overflow:auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.checklist{display:grid;grid-template-columns:1fr 1fr;gap:6px}.checklist label{display:flex;align-items:center;gap:8px;margin:0;font-size:12px}.checklist input{min-width:0;width:16px}.footer{font-size:11px;line-height:1.6}#warning{padding:12px;margin:8px 0;background:#8b441d;color:white;border:1px solid #e69a57;border-radius:5px}dialog{width:min(780px,95vw);background:var(--panel);color:var(--text);border:1px solid var(--edge);border-radius:10px;padding:22px}dialog::backdrop{background:#080c12b3;backdrop-filter:blur(3px)}dialog h2{margin:9px 0 18px}#cellEditor{min-height:160px;max-height:45vh;overflow:auto;border:1px solid #64748b;padding:16px;background:var(--bg);white-space:pre-wrap;line-height:1.65;border-radius:5px;outline:none}#cellEditor:focus{border-color:#ed594b}#dateEditor{width:100%;margin-bottom:18px}#richToolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}#richToolbar label{display:flex;align-items:center;gap:10px;margin:0;font-size:12px}#richToolbar input{margin:0}.editorfoot{margin-top:15px}#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#263444;color:#fff;padding:12px 20px;border-radius:7px;max-width:90vw;z-index:500;box-shadow:0 6px 40px #0007;white-space:pre-wrap}.error{color:#ef8d82!important}.ok{color:#65bb91}.sun,.moon{width:16px;height:16px;vertical-align:middle;margin-right:7px}body.light-mode #cellEditor{background:#fff}body.light-mode .stage{color:#735030}body.light-mode #panel{background:#fff}body.light-mode .error{color:#a32b21!important}@media(max-width:700px){.topline{align-items:flex-start;flex-direction:column}header{padding:16px}main{padding:12px}.actions{gap:4px}.toolbar>*{flex:initial}.toolbar input#search{flex:1}.sessionbar{flex-wrap:wrap}.checklist,.form-grid{grid-template-columns:1fr}#panel{padding:20px}.stats .stat label{font-size:9px}.stage-note{font-size:11px}.tablewrap{max-height:58vh}dialog{padding:16px}}


#newRecordFields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#newRecordFields label{display:grid;gap:5px;min-width:0}
#newRecordFields label:last-child{grid-column:1/-1}
#newRecordFields input,#newRecordFields textarea{width:100%;min-width:0}
#newRecordFields textarea{resize:vertical;padding:9px 12px;border:1px solid var(--edge);border-radius:5px;background:var(--bg);color:var(--text);font:inherit}
#newRecordStatus{color:var(--red)}
.cell-menu{position:fixed;z-index:20;display:grid;gap:4px;padding:6px;border:1px solid var(--edge);border-radius:6px;background:var(--panel);box-shadow:0 5px 25px #0006}
.cell-menu button{text-align:left}
#cellColorDialog{max-width:500px}
.color-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px}
.color-presets button{display:flex;align-items:center;gap:8px;min-height:40px;text-align:left;letter-spacing:0}
.color-sample{width:18px;height:18px;flex:none;border:1px solid #778593;border-radius:4px}
#latestRows[aria-pressed=true]{border-color:#e26b60}
@media(max-width:560px){#newRecordFields{grid-template-columns:minmax(0,1fr)}}

.super-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:8px 12px;margin:0 0 10px;border:1px solid #45658a;border-radius:7px;background:#19283a;color:#c4defa}
.super-tools button,#panel.account-admin button,#accountDialog button,.super-action{background:#263c56;color:#d8eaff;border-color:#5278a1}
.super-tools button:hover,#panel.account-admin button:hover,#accountDialog button:hover,.super-action:hover{background:#35577b}
body.light-mode .super-tools{background:#eaf3ff;color:#294b73;border-color:#a9c4e4}
body.light-mode .super-tools button,body.light-mode #panel.account-admin button,body.light-mode #accountDialog button,body.light-mode .super-action{background:#deecff;color:#193d68;border-color:#94b6dd}
#accountFields{display:grid;gap:12px}
#accountFields label{display:grid;gap:5px}
#accountStatus{color:var(--red)}

.session-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#presence{position:relative}
#presence summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;border:1px solid var(--edge);border-radius:6px;padding:6px 10px;white-space:nowrap;background:var(--panel)}
#presence summary::-webkit-details-marker{display:none}
.presence-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#38c990}
.presence-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:8;width:min(310px,70vw);max-height:50vh;overflow:auto;padding:12px;background:var(--panel);border:1px solid var(--edge);border-radius:7px;box-shadow:0 8px 28px #0005}
.presence-panel p{margin:0 0 6px}
.presence-panel ul{margin:0;padding:0;list-style:none}
.presence-panel li{display:grid;gap:3px;padding:8px 0;border-top:1px solid var(--edge)}
.presence-panel li strong{overflow-wrap:anywhere}
.presence-setting{display:flex;align-items:center;gap:8px;margin:10px 0 16px}
.presence-setting input{min-width:0;flex:none}

#journal tbody td{
 position:relative;
 box-shadow:inset 0 1px #e6f1ff12,inset 0 -1px #080d1538;
}
#journal tbody td.cell-filled{
 box-shadow:inset 0 1px #f4faff55,inset 0 -2px #12172232;
}
#journal tbody td::before{
 content:"";
 position:absolute;inset:1px;pointer-events:none;
 background:linear-gradient(105deg,transparent 39%,#edf6ff38 50%,transparent 61%);
 transform:translateX(-100%);
}
#journal tbody td.cell-filled::before{animation:cell-sheen 10s linear infinite}
#journal tbody td:not(.cell-filled):hover::before{animation:cell-sheen-hover 650ms ease-out}
#journal tbody .cell-text,#journal tbody .row-lock-label{position:relative}
@keyframes cell-sheen{
 0%,76%{transform:translateX(-100%)}
 92%,100%{transform:translateX(100%)}
}
@keyframes cell-sheen-hover{
 from{transform:translateX(-100%)}
 to{transform:translateX(100%)}
}
.row-locked{
 --lock-edge:#73bfff90;
 --lock-highlight:#67b8ffe0;
 --lock-tint:#67b8ff14;
 --lock-badge-bg:#1a3a56;
 --lock-badge-text:#dbf0ff;
}
.row-locked-admin{
 --lock-edge:#ef5d6990;
 --lock-highlight:#ff5461e0;
 --lock-tint:#ff546118;
 --lock-badge-bg:#51262c;
 --lock-badge-text:#ffe3e5;
}
body.light-mode .row-locked{--lock-badge-bg:#ddebfc;--lock-badge-text:#164a72}
body.light-mode .row-locked-admin{--lock-badge-bg:#ffe4e8;--lock-badge-text:#811b2b}
#journal tbody .row-locked td{
 animation:row-lock-glow 2.9s ease-in-out infinite;
 box-shadow:inset 0 2px var(--lock-edge),inset 0 -2px var(--lock-edge);
}
.row-lock-label{
 display:block;max-width:100%;margin-top:2px;padding:1px 5px;border-radius:4px;
 background:var(--lock-badge-bg);color:var(--lock-badge-text);font-size:10px;line-height:13px;
 overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.row-lock-label::before{content:"✎";margin-right:4px}
@keyframes row-lock-glow{
 0%,100%{box-shadow:inset 0 1px var(--lock-edge),inset 0 -1px var(--lock-edge),inset 0 0 0 999px transparent}
 50%{box-shadow:inset 0 5px 8px -4px var(--lock-highlight),inset 0 -5px 8px -4px var(--lock-highlight),inset 0 0 0 999px var(--lock-tint)}
}
#toast.lock-toast{
 background:#4c2028;border:1px solid #f16d79;color:#fff0f1;
 animation:lock-toast-in 440ms ease-out both;
}
@keyframes lock-toast-in{
 from{opacity:0;transform:translate(-50%,9px);box-shadow:0 0 0 #f16d7900}
 55%{opacity:1;transform:translate(-50%,0);box-shadow:0 0 26px #f16d798a}
 to{opacity:1;transform:translate(-50%,0);box-shadow:0 6px 30px #5417219c}
}
@media(prefers-reduced-motion:reduce){
 #journal tbody .row-locked td,#toast.lock-toast,
 #journal tbody td.cell-filled::before,#journal tbody td:not(.cell-filled):hover::before{animation:none}
}