:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html,body{height:100%}body{margin:0;font:14px system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}

/* Layout: Notion-style workspace — fixed 248px sidebar, scrolling page canvas (720px docs, full width for databases), one overlay layer for side peek, menus and dialogs */
:root{
  --bg:#ffffff; --fg:#37352f; --fg2:#787774; --fg3:#a5a29c;
  --side:#f7f7f5; --side-fg:#5f5e5b; --card:#ffffff; --card-h:#fbfbfa; --pop:#ffffff;
  --hover:rgba(55,53,47,.06); --hover2:rgba(55,53,47,.1); --line:rgba(55,53,47,.09); --line2:rgba(55,53,47,.18);
  --accent:#2383e2; --accent-h:#0b6bcb; --on-accent:#ffffff; --sel:rgba(35,131,226,.14); --link:#2383e2;
  --red:#eb5757; --brand:#5b7f3a; --toast-bg:#2f2e2b; --toast-fg:#f5f5f4; --scrim:rgba(15,15,15,.28);
  --shadow-card:0 0 0 1px rgba(15,15,15,.07),0 2px 4px rgba(15,15,15,.06);
  --shadow-pop:0 0 0 1px rgba(15,15,15,.05),0 3px 6px rgba(15,15,15,.1),0 9px 24px rgba(15,15,15,.2);
  --tag-fg:#32302c;
  --t-default:#e9e9e7; --t-gray:#e3e2e0; --t-brown:#eee0da; --t-orange:#fadec9; --t-yellow:#fdecc8;
  --t-green:#dbeddb; --t-blue:#d3e5ef; --t-purple:#e8deee; --t-pink:#f5e0e9; --t-red:#ffe2dd;
  --c-gray:#7b7a76; --c-brown:#9f6b53; --c-orange:#c96a12; --c-yellow:#b5821f; --c-green:#448361;
  --c-blue:#337ea9; --c-purple:#9065b0; --c-pink:#c14c8a; --c-red:#d44c47;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,"Apple Color Emoji",Arial,"Noto Sans Thai","Leelawadee UI",Thonburi,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#191919; --fg:#d6d6d4; --fg2:#9b9b98; --fg3:#6b6b68;
  --side:#202020; --side-fg:#a3a3a0; --card:#252525; --card-h:#2c2c2c; --pop:#252525;
  --hover:rgba(255,255,255,.055); --hover2:rgba(255,255,255,.09); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --accent:#2383e2; --accent-h:#3b92ea; --on-accent:#ffffff; --sel:rgba(35,131,226,.28); --link:#529cca;
  --red:#eb5757; --brand:#6f9a4a; --toast-bg:#e9e9e7; --toast-fg:#1f1f1e; --scrim:rgba(0,0,0,.45);
  --shadow-card:0 0 0 1px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.3);
  --shadow-pop:0 0 0 1px rgba(255,255,255,.08),0 3px 6px rgba(0,0,0,.3),0 9px 24px rgba(0,0,0,.45);
  --tag-fg:rgba(255,255,255,.88);
  --t-default:#373737; --t-gray:#5a5a5a; --t-brown:#603b2c; --t-orange:#854c1d; --t-yellow:#89632a;
  --t-green:#2b593f; --t-blue:#28456c; --t-purple:#492f64; --t-pink:#69314c; --t-red:#6e3630;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#191919; --fg:#d6d6d4; --fg2:#9b9b98; --fg3:#6b6b68;
  --side:#202020; --side-fg:#a3a3a0; --card:#252525; --card-h:#2c2c2c; --pop:#252525;
  --hover:rgba(255,255,255,.055); --hover2:rgba(255,255,255,.09); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --accent:#2383e2; --accent-h:#3b92ea; --on-accent:#ffffff; --sel:rgba(35,131,226,.28); --link:#529cca;
  --red:#eb5757; --brand:#6f9a4a; --toast-bg:#e9e9e7; --toast-fg:#1f1f1e; --scrim:rgba(0,0,0,.45);
  --shadow-card:0 0 0 1px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.3);
  --shadow-pop:0 0 0 1px rgba(255,255,255,.08),0 3px 6px rgba(0,0,0,.3),0 9px 24px rgba(0,0,0,.45);
  --tag-fg:rgba(255,255,255,.88);
  --t-default:#373737; --t-gray:#5a5a5a; --t-brown:#603b2c; --t-orange:#854c1d; --t-yellow:#89632a;
  --t-green:#2b593f; --t-blue:#28456c; --t-purple:#492f64; --t-pink:#69314c; --t-red:#6e3630;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--font);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
*,*::before,*::after{box-sizing:border-box}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:4px}
[contenteditable]:focus-visible{outline:none}
.ic{display:inline-flex;width:18px;height:18px;flex:none;align-items:center;justify-content:center}
.ic svg{width:100%;height:100%}
.ic.sm{width:15px;height:15px}
.ic.xs{width:13px;height:13px}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.muted{color:var(--fg2)}
.ph{color:var(--fg3)}
.emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--font);line-height:1}

/* ---------- shell ---------- */
.gc{display:flex;height:100%;position:relative;overflow:hidden}
#side{width:248px;flex:none;background:var(--side);color:var(--side-fg);display:flex;flex-direction:column;border-right:1px solid var(--line);transition:margin-left .2s ease,transform .2s ease;font-size:14px;z-index:30;min-height:0}
.gc.side-closed #side{margin-left:-248px}
#scrim{display:none}
#main{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;position:relative;background:var(--bg)}
@media (max-width:767px){
  #side{position:absolute;top:0;bottom:0;left:0;width:min(290px,86vw);transform:translateX(-102%);box-shadow:none;visibility:hidden;transition:transform .2s ease,visibility .2s}
  .gc.side-closed #side{margin-left:0}
  .gc.m-side #side{transform:none;box-shadow:var(--shadow-pop);visibility:visible}
  .gc.m-side #scrim{display:block;position:absolute;inset:0;background:var(--scrim);z-index:25}
}

/* ---------- sidebar ---------- */
.ws{display:flex;align-items:center;gap:8px;padding:0 8px 0 14px;height:46px;flex:none}
.ws-logo{width:22px;height:22px;border-radius:5px;background:var(--brand);color:#fff;font-weight:700;font-size:12px;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;flex:none}
.ws-name{font-weight:600;color:var(--fg);flex:1;min-width:0;font-size:14px}
.si{display:flex;align-items:center;gap:8px;height:30px;margin:1px 6px;padding:0 6px 0 calc(8px + var(--depth,0) * 14px);border-radius:6px;color:var(--side-fg);cursor:pointer;position:relative;font-size:14px;min-width:0;width:calc(100% - 12px)}
.si:hover{background:var(--hover)}
.si.on{background:var(--hover2);color:var(--fg);font-weight:500}
.si .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si .kbd{font-size:11px;color:var(--fg3)}
.si .tw{width:20px;height:20px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--fg3)}
.si .tw:hover{background:var(--hover2)}
.si .tw .ic{transition:transform .15s}
.si .tw.open .ic{transform:rotate(90deg)}
.si .pi{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:15px}
.si .acts{display:none;gap:2px;margin-left:auto}
.si:hover .acts,.si:focus-within .acts{display:flex}
.si .acts button{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg2)}
.si .acts button:hover{background:var(--hover2)}
@media (hover:none){.si .acts{display:flex}}
.side-sec{font-size:12px;font-weight:600;color:var(--fg3);padding:16px 14px 4px;letter-spacing:.01em}
.side-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:12px;min-height:0}
.side-foot{border-top:1px solid var(--line);padding:6px 0;flex:none}
.side-note{font-size:12px;color:var(--fg3);padding:4px 16px 6px;line-height:1.4}
.side-empty{font-size:13px;color:var(--fg3);padding:6px 16px}
.skel{background:linear-gradient(90deg,var(--hover) 25%,var(--hover2) 50%,var(--hover) 75%);background-size:200% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:4px;height:12px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;height:45px;padding:0 12px;background:var(--bg)}
.crumbs{display:flex;align-items:center;gap:1px;min-width:0;flex:1;font-size:14px}
.crumb{display:flex;align-items:center;gap:6px;padding:2px 6px;border-radius:4px;min-width:0;max-width:260px}
.crumb:hover{background:var(--hover)}
.crumb .emoji{font-size:15px}
.sep{color:var(--fg3);padding:0 2px}
.top-r{display:flex;align-items:center;gap:4px;color:var(--fg3);font-size:13px;flex:none}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:5px;color:var(--fg2);flex:none}
.ibtn:hover{background:var(--hover)}
.ibtn.on{color:var(--accent)}
.ibtn.sm{width:24px;height:24px}

/* ---------- page ---------- */
.pg{padding:0 96px 40vh;max-width:912px;margin:0 auto}
.pg.full{max-width:none}
.pg-head{padding-top:48px;position:relative}
.pg-head.has-icon{padding-top:40px}
.pg-icon{font-size:66px;line-height:1;width:78px;height:78px;display:flex;align-items:center;justify-content:center;border-radius:8px;margin-left:-4px}
button.pg-icon:hover{background:var(--hover)}
.pg-tools{display:flex;gap:4px;height:28px;margin-bottom:4px;opacity:0;transition:opacity .15s}
.pg-head:hover .pg-tools,.pg-tools:focus-within{opacity:1}
@media (hover:none){.pg-tools{opacity:1}}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:5px;color:var(--fg3);font-size:14px}
.tbtn:hover{background:var(--hover);color:var(--fg2)}
.pg-title{font-size:40px;font-weight:700;line-height:1.2;margin:6px 0 8px;outline:none;word-break:break-word;letter-spacing:-.01em;text-wrap:balance}
.pg-title:empty::before{content:"Untitled";color:var(--fg3)}
@media (max-width:767px){.pg{padding:0 20px 40vh}.pg-title{font-size:30px}.pg-head{padding-top:28px}}

/* ---------- blocks ---------- */
.blocks{position:relative;padding:2px 0}
.blk{position:relative;display:flex;align-items:flex-start;gap:2px;margin:1px 0;padding:3px 2px;border-radius:4px}
.blk-h{position:absolute;left:-26px;top:4px;width:22px;height:24px;opacity:0;color:var(--fg3);cursor:grab;display:flex;align-items:center;justify-content:center;border-radius:4px}
.blk:hover>.blk-h,.blk-h:focus-visible{opacity:1}
.blk-h:hover{background:var(--hover)}
@media (max-width:767px){.blk-h{display:none}}
.blk-t{flex:1;min-width:0;outline:none;white-space:pre-wrap;word-break:break-word;min-height:1.5em}
.blk-t:empty:focus::before,.blk.lone .blk-t:empty::before{content:attr(data-ph);color:var(--fg3);pointer-events:none}
.blk[data-type="h1"]{margin-top:1.4em}
.blk[data-type="h1"] .blk-t{font-size:1.875em;font-weight:700;line-height:1.3}
.blk[data-type="h2"]{margin-top:1.1em}
.blk[data-type="h2"] .blk-t{font-size:1.5em;font-weight:600;line-height:1.3}
.blk[data-type="h3"]{margin-top:.8em}
.blk[data-type="h3"] .blk-t{font-size:1.25em;font-weight:600;line-height:1.3}
.blk[data-type="quote"] .blk-t{border-left:3px solid currentColor;padding:0 0 0 14px}
.blk[data-type="callout"]{background:var(--hover);padding:14px 16px 14px 12px;margin:4px 0;gap:8px}
.mk{flex:none;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;user-select:none}
.mk.bul{font-size:1.4em;line-height:1}
.mk.num{min-width:24px;padding-right:2px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.mk input{width:16px;height:16px;margin:0 4px 0 0;accent-color:var(--accent);cursor:pointer}
.blk[data-done] .blk-t{text-decoration:line-through;color:var(--fg3)}
.blk[data-type="divider"]{padding:8px 2px}
.hr{border:0;border-top:1px solid var(--line2);margin:0;flex:1}
.blk-db{display:block;padding:0}
.blk-db>.blk-h{top:12px}
.plink{display:inline-flex;align-items:center;gap:6px;padding:2px 4px;border-radius:4px;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;font-weight:500}
.plink:hover{background:var(--hover)}
.blk-tail{height:90px;cursor:text}
.blk.drop-before::before,.blk.drop-after::after{content:"";position:absolute;left:0;right:0;height:3px;background:rgba(35,131,226,.5);border-radius:2px}
.blk.drop-before::before{top:-2px}
.blk.drop-after::after{bottom:-2px}
.qs{margin-top:28px;color:var(--fg3);font-size:14px}
.qs-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qs-b{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:6px;border:1px solid var(--line2);color:var(--fg2)}
.qs-b:hover{background:var(--hover);color:var(--fg)}

/* ---------- database ---------- */
.dbw{margin:6px 0 20px;min-width:0}
.db-title{font-size:20px;font-weight:700;line-height:1.3;margin:10px 0 2px;outline:none;word-break:break-word}
.db-title:empty::before{content:"Untitled database";color:var(--fg3)}
.db-bar{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);min-height:42px;flex-wrap:wrap}
.tabs{display:flex;align-items:center;gap:1px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;padding:6px 0}
.tabs::-webkit-scrollbar{display:none}
.tab{display:flex;align-items:center;gap:6px;padding:0 8px;height:28px;border-radius:5px;color:var(--fg2);font-size:14px;white-space:nowrap;position:relative;flex:none}
.tab:hover{background:var(--hover)}
.tab.on{color:var(--fg);font-weight:500}
.tab.more{color:var(--fg2)}
.tab.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-7px;height:2px;background:var(--fg);border-radius:1px}
.tools{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto;padding:6px 0}
.qsearch{display:flex;align-items:center}
.qsearch input{width:150px;border:0;background:transparent;outline:none;font-size:14px;padding:4px 6px;color:var(--fg)}
.btn-new{display:inline-flex;align-items:center;gap:4px;background:var(--accent);color:var(--on-accent);border-radius:5px;height:28px;padding:0 10px;font-size:14px;font-weight:500;margin-left:6px}
.btn-new:hover{background:var(--accent-h)}
.pills{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 2px}
.pill{font-size:13px;color:var(--accent);background:var(--sel);border-radius:14px;height:24px;padding:0 10px;display:inline-flex;gap:4px;align-items:center}
.pill:hover{filter:brightness(.97)}
.pg.full .board,.pg.full .tw{margin-right:-96px;padding-right:96px}
@media (max-width:767px){
  .pg.full .board,.pg.full .tw{margin-right:-20px;padding-right:20px}
  .db-bar{gap:0}
  .tabs{flex-basis:100%}
  .tools{width:100%;justify-content:flex-end;padding:0 0 6px}
  .qsearch input{width:120px}
}
.empty-v{color:var(--fg3);font-size:14px;padding:18px 4px}

/* tags, people, files */
.tag{display:inline-flex;align-items:center;gap:2px;height:20px;padding:0 6px;border-radius:3px;font-size:13px;line-height:1;white-space:nowrap;background:var(--t-default);color:var(--tag-fg);max-width:100%;overflow:hidden;text-overflow:ellipsis;flex:none}
.tag[data-c="gray"]{background:var(--t-gray)} .tag[data-c="brown"]{background:var(--t-brown)} .tag[data-c="orange"]{background:var(--t-orange)}
.tag[data-c="yellow"]{background:var(--t-yellow)} .tag[data-c="green"]{background:var(--t-green)} .tag[data-c="blue"]{background:var(--t-blue)}
.tag[data-c="purple"]{background:var(--t-purple)} .tag[data-c="pink"]{background:var(--t-pink)} .tag[data-c="red"]{background:var(--t-red)}
.tag .x{display:inline-flex;margin-left:2px;opacity:.55;border-radius:2px}
.tag .x:hover{opacity:1}
.av{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;color:#fff;flex:none;background:var(--c-gray)}
.av[data-c="brown"]{background:var(--c-brown)} .av[data-c="orange"]{background:var(--c-orange)} .av[data-c="yellow"]{background:var(--c-yellow)}
.av[data-c="green"]{background:var(--c-green)} .av[data-c="blue"]{background:var(--c-blue)} .av[data-c="purple"]{background:var(--c-purple)}
.av[data-c="pink"]{background:var(--c-pink)} .av[data-c="red"]{background:var(--c-red)}
.person{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:0;max-width:100%}
.fchip{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:13px;color:var(--fg2);min-width:0}
.fthumb{width:26px;height:26px;border-radius:3px;object-fit:cover;background:var(--hover);flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--fg3)}
.link{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
.link:hover{text-decoration-color:currentColor}
.cbx{width:16px;height:16px;border-radius:3px;border:1.5px solid var(--fg3);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cbx.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* table */
.tw{overflow-x:auto;position:relative;margin-top:0}
.tbl{display:grid;min-width:max-content;font-size:14px}
.th{display:flex;align-items:center;gap:6px;height:34px;padding:0 8px;color:var(--fg2);border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;overflow:hidden;cursor:pointer;position:relative;min-width:0}
.th:hover{background:var(--hover)}
.th-add{justify-content:center;border-right:0}
.td{min-height:34px;padding:6px 8px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);overflow:hidden;cursor:pointer;position:relative;display:flex;align-items:flex-start;gap:4px;flex-wrap:wrap;min-width:0;line-height:1.45}
.td:hover{background:var(--hover)}
.td.pad{border-right:0;cursor:default}
.td.pad:hover{background:none}
.td.title{font-weight:500}
.cell-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;min-width:0}
.tbl.wrap .cell-txt{white-space:pre-wrap;word-break:break-word}
.td.num{justify-content:flex-end;font-variant-numeric:tabular-nums}
.open-btn{position:absolute;right:6px;top:5px;display:none;align-items:center;gap:4px;height:24px;padding:0 6px;border-radius:4px;background:var(--bg);box-shadow:var(--shadow-card);font-size:12px;font-weight:500;color:var(--fg2);letter-spacing:.03em}
.td.title:hover .open-btn,.open-btn:focus-visible{display:inline-flex}
@media (hover:none){.open-btn{display:inline-flex}}
.t-add{grid-column:1/-1;color:var(--fg3);padding:0 8px;height:34px;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)}
.t-add:hover{background:var(--hover)}
.grp-h{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:16px 4px 6px;font-size:14px}
.grp-n{color:var(--fg3);font-size:13px}
.t-foot{font-size:12px;color:var(--fg3);padding:6px 8px}
.rsz{position:absolute;right:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:2}
.rsz:hover,.rsz.on{background:var(--accent);opacity:.6}

/* board */
.board{display:flex;gap:12px;overflow-x:auto;padding:12px 0 18px;align-items:flex-start}
.col{flex:0 0 262px;border-radius:8px;padding:6px 6px 4px;min-width:0}
.col[data-c="gray"]{background:color-mix(in srgb,var(--t-gray) 32%,transparent)}
.col[data-c="brown"]{background:color-mix(in srgb,var(--t-brown) 38%,transparent)}
.col[data-c="orange"]{background:color-mix(in srgb,var(--t-orange) 38%,transparent)}
.col[data-c="yellow"]{background:color-mix(in srgb,var(--t-yellow) 38%,transparent)}
.col[data-c="green"]{background:color-mix(in srgb,var(--t-green) 38%,transparent)}
.col[data-c="blue"]{background:color-mix(in srgb,var(--t-blue) 38%,transparent)}
.col[data-c="purple"]{background:color-mix(in srgb,var(--t-purple) 38%,transparent)}
.col[data-c="pink"]{background:color-mix(in srgb,var(--t-pink) 38%,transparent)}
.col[data-c="red"]{background:color-mix(in srgb,var(--t-red) 38%,transparent)}
.col[data-c="default"]{background:color-mix(in srgb,var(--t-default) 38%,transparent)}
.col.drop{outline:2px solid var(--accent);outline-offset:-2px}
.col-h{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;font-size:14px;min-width:0}
.col-none{color:var(--fg2);display:inline-flex;align-items:center;gap:6px}
.col-n{color:var(--fg3);font-size:13px}
.col-h .ibtn{margin-left:auto}
.cards{display:flex;flex-direction:column;gap:8px;min-height:6px}
.card{background:var(--card);border-radius:7px;box-shadow:var(--shadow-card);overflow:hidden;cursor:pointer;font-size:14px;min-width:0;display:flex;flex-direction:column}
.card:hover{background:var(--card-h)}
.card.dragging{opacity:.4}
.cover{display:block;width:100%;height:150px;object-fit:cover;background:var(--hover);flex:none;position:relative}
.cover.vid{display:flex;align-items:center;justify-content:center;color:#fff}
.cover.vid video{width:100%;height:100%;object-fit:cover;display:block}
.cover .play{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff}
.cover.none{display:flex;align-items:center;justify-content:center;color:var(--fg3)}
.board .cover{height:140px}
.cover.none{background:var(--side)}
.cover.none .ic{opacity:.5}
.cover.txt{align-items:flex-start;justify-content:flex-start;padding:12px 14px;color:var(--fg2);font-size:12.5px;line-height:1.5;overflow:hidden}
.cv-txt{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;word-break:break-word}
.card-b{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card-t{font-weight:500;word-break:break-word;line-height:1.35}
.card-p{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12.5px;color:var(--fg2);min-width:0;line-height:1.4}
.card-p .cell-txt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col-add{color:var(--fg3);padding:6px 8px;margin-top:4px;border-radius:5px;font-size:14px;display:flex;gap:6px;align-items:center;width:100%}
.col-add:hover{background:var(--hover);color:var(--fg2)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--gw,240px),1fr));gap:14px;padding:14px 0}
.gal.s{--gw:180px} .gal.l{--gw:320px}
.gal.s .cover{height:110px} .gal.l .cover{height:210px}
.gal-add{border:1px dashed var(--line2);border-radius:7px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--fg3);min-height:120px;font-size:14px}
.gal-add:hover{background:var(--hover);color:var(--fg2)}

/* calendar */
.cal-h{display:flex;align-items:center;gap:6px;padding:12px 0 10px;flex-wrap:wrap}
.cal-m{font-size:16px;font-weight:600;flex:1;min-width:140px}
.cal-nd{font-size:13px;color:var(--fg3);margin-right:6px}
.pbtn{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:5px;font-size:14px;color:var(--fg2);border:1px solid var(--line2)}
.pbtn:hover{background:var(--hover)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cal-wd{font-size:12px;color:var(--fg2);padding:4px 8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.cal-d{min-height:120px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.cal-d.out{background:var(--side)}
.cal-d.out .cal-n{color:var(--fg3)}
.cal-d.drop{background:var(--sel)}
.cal-n{align-self:flex-end;font-size:13px;color:var(--fg2);min-width:24px;height:24px;padding:0 4px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-d.today .cal-n{background:var(--red);color:#fff}
.cal-add{position:absolute;left:4px;top:4px;opacity:0}
.cal-d:hover .cal-add{opacity:1}
@media (hover:none){.cal-add{display:none}}
.cal-item{background:var(--card);box-shadow:var(--shadow-card);border-radius:5px;padding:4px 6px;font-size:12.5px;cursor:pointer;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.35}
.cal-item:hover{background:var(--card-h)}
.cal-item .t{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-item .p{display:flex;flex-wrap:wrap;gap:3px}
.cal-item .p .tag{height:18px;font-size:11.5px}
.cal-item.dragging{opacity:.4}
.cal-more{font-size:12px;color:var(--fg2);padding:0 4px;text-align:left}
@media (max-width:767px){
  .cal-d{min-height:78px;padding:2px}
  .cal-item{padding:2px 4px;font-size:11px;box-shadow:none;background:var(--hover2)}
  .cal-item .p{display:none}
  .cal-n{font-size:12px;min-width:20px;height:20px}
  .cal-wd{padding:4px 2px}
}

/* list */
.lst{padding:6px 0}
.lst-row{display:flex;align-items:center;gap:10px;padding:7px 6px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;min-width:0}
.lst-row:hover{background:var(--hover)}
.lst-t{font-weight:500;flex:1;min-width:0}
.lst-p{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;color:var(--fg2);font-size:13px;min-width:0;max-width:60%}

/* ---------- side peek ---------- */
#peek{position:absolute;inset:0;z-index:40;pointer-events:none}
.pk-scrim{position:absolute;inset:0;background:var(--scrim);pointer-events:auto;animation:fade .15s ease-out}
.pk{position:absolute;top:0;right:0;bottom:0;width:min(880px,94%);background:var(--bg);box-shadow:var(--shadow-pop);pointer-events:auto;display:flex;flex-direction:column;animation:pkIn .2s ease-out;min-width:0}
@keyframes pkIn{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (max-width:767px){.pk{width:100%}}
.pk-top{display:flex;align-items:center;gap:4px;height:44px;padding:0 10px;flex:none}
.pk-top .sp{flex:1}
.pk-body{overflow-y:auto;overflow-x:hidden;flex:1;padding:0 64px 30vh;min-width:0}
@media (max-width:767px){.pk-body{padding:0 20px 30vh}}
.pk-cover{height:210px;margin:0 -64px;position:relative;background:var(--hover)}
.pk-cover img{width:100%;height:100%;object-fit:cover;display:block}
.pk-cover .cv-acts{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;opacity:0;transition:opacity .15s}
.pk-cover:hover .cv-acts{opacity:1}
@media (max-width:767px){.pk-cover{margin:0 -20px;height:160px}.pk-cover .cv-acts{opacity:1}}
.cv-btn{background:var(--pop);color:var(--fg2);box-shadow:var(--shadow-card);border-radius:5px;height:26px;padding:0 10px;font-size:13px}
.pk-title{font-size:32px;font-weight:700;line-height:1.2;outline:none;margin:6px 0 14px;word-break:break-word;letter-spacing:-.01em}
.pk-title:empty::before{content:"Untitled";color:var(--fg3)}
@media (max-width:767px){.pk-title{font-size:26px}}
.pk-head{padding-top:36px}
.props{display:flex;flex-direction:column;gap:1px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.prop{display:flex;align-items:flex-start;min-height:34px;gap:4px}
.prop-l{flex:0 0 168px;display:flex;align-items:center;gap:7px;color:var(--fg2);font-size:14px;padding:0 6px;height:34px;border-radius:5px;min-width:0}
button.prop-l:hover{background:var(--hover)}
.prop-v{flex:1;min-width:0;padding:6px 8px;border-radius:5px;font-size:14px;cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;min-height:34px;line-height:1.45}
.prop-v:hover{background:var(--hover)}
.prop-v.ro{cursor:default}
.prop-v.ro:hover{background:none}
.prop-v .cell-txt{white-space:pre-wrap;word-break:break-word}
.prop-v .fthumb{width:56px;height:56px;border-radius:4px}
@media (max-width:767px){.prop-l{flex-basis:118px}}

/* ---------- overlay layer ---------- */
#layer{position:absolute;inset:0;pointer-events:none;z-index:60}
.pop{position:absolute;background:var(--pop);box-shadow:var(--shadow-pop);border-radius:7px;pointer-events:auto;min-width:230px;max-width:min(380px,calc(100vw - 16px));max-height:min(500px,calc(100% - 16px));overflow-y:auto;overflow-x:hidden;font-size:14px;padding:6px 0;animation:popIn .12s ease-out}
.pop.wide{width:min(340px,calc(100vw - 16px))}
@keyframes popIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.pop-sec{padding:4px 0}
.pop-sec+.pop-sec{border-top:1px solid var(--line)}
.pop-lbl{font-size:12px;color:var(--fg2);padding:6px 14px 4px;font-weight:500}
.pop-back{display:flex;align-items:center;gap:6px;padding:4px 10px 6px;font-weight:600;font-size:14px}
.mi{display:flex;align-items:center;gap:9px;width:calc(100% - 8px);margin:0 4px;padding:0 10px;min-height:30px;text-align:left;border-radius:5px;color:var(--fg)}
.mi:hover,.mi.act{background:var(--hover)}
.mi .ic{color:var(--fg2)}
.mi .r{margin-left:auto;color:var(--fg3);font-size:13px;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.mi.danger,.mi.danger .ic{color:var(--red)}
.mi:disabled{opacity:.45;cursor:default}
.tag-chk{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;padding:4px 9px;border:1px solid var(--line2);border-radius:14px;cursor:pointer;user-select:none}
.tag-chk:has(input:checked){background:var(--sel);border-color:var(--accent)}
.tag-chk input{margin:0}
.mi.on .chk{color:var(--accent)}
.mi .glyph{width:20px;height:20px;border:1px solid var(--line2);border-radius:4px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;color:var(--fg2);flex:none}
.pop-row{display:flex;align-items:center;gap:6px;padding:4px 10px}
.inp{font:inherit;font-size:14px;color:var(--fg);background:var(--hover);border:1px solid var(--line2);border-radius:5px;padding:5px 8px;outline:none;width:100%;min-width:0}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--sel)}
textarea.inp{resize:vertical;min-height:90px;line-height:1.5}
select.inp{padding:4px 6px;cursor:pointer}
.pop .inp-wrap{padding:6px 10px}
.edit-box{width:100%;border:0;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--fg);padding:8px 10px;resize:none;line-height:1.5;display:block}
.chips{display:flex;flex-wrap:wrap;gap:4px;padding:7px 10px;background:var(--hover);border-bottom:1px solid var(--line);align-items:center;margin-top:-6px}
.chips input{flex:1;min-width:90px;border:0;background:transparent;outline:none;color:var(--fg);font:inherit;font-size:14px;padding:2px}
.opt{display:flex;align-items:center;gap:6px;padding:0 6px 0 10px;min-height:30px;margin:0 4px;border-radius:5px;cursor:pointer}
.opt:hover,.opt.act{background:var(--hover)}
.opt .grip{color:var(--fg3)}
.opt .more{margin-left:auto;opacity:0;width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg2)}
.opt:hover .more,.opt.act .more{opacity:1}
.opt .more:hover{background:var(--hover2)}
@media (hover:none){.opt .more{opacity:1}}
.swatch{width:18px;height:18px;border-radius:4px;border:1px solid var(--line);flex:none;background:var(--t-default)}
.swatch[data-c="gray"]{background:var(--t-gray)} .swatch[data-c="brown"]{background:var(--t-brown)} .swatch[data-c="orange"]{background:var(--t-orange)}
.swatch[data-c="yellow"]{background:var(--t-yellow)} .swatch[data-c="green"]{background:var(--t-green)} .swatch[data-c="blue"]{background:var(--t-blue)}
.swatch[data-c="purple"]{background:var(--t-purple)} .swatch[data-c="pink"]{background:var(--t-pink)} .swatch[data-c="red"]{background:var(--t-red)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:5px;overflow:hidden;margin-left:auto}
.seg button{padding:2px 9px;font-size:13px;color:var(--fg2)}
.seg button.on{background:var(--hover2);color:var(--fg)}
.toggle{width:28px;height:16px;border-radius:8px;background:var(--line2);position:relative;flex:none;margin-left:auto;transition:background .15s}
.toggle::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s}
.toggle.on{background:var(--accent)}
.toggle.on::after{transform:translateX(12px)}
.rule{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line);position:relative}
.rule .inp{font-size:13px}
.rule .full{grid-column:1/-1}
.rule .rm{position:absolute;right:6px;top:-2px}
.confirm{padding:8px 14px 10px;font-size:13px;color:var(--fg2);line-height:1.45}
.confirm .row{display:flex;gap:8px;margin-top:10px}
.dbtn{height:28px;padding:0 12px;border-radius:5px;font-size:13px;font-weight:500;border:1px solid var(--line2);text-align:center}
.dbtn.red{background:var(--red);color:#fff;border-color:var(--red)}
.dbtn.blue{background:var(--accent);color:#fff;border-color:var(--accent)}
.dbtn:hover{filter:brightness(.96)}
.emo{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:6px 8px}
.emo button{font-size:21px;height:34px;border-radius:5px;line-height:1}
.emo button:hover{background:var(--hover)}
.dp{padding:6px 12px 8px}
.dp-h{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.dp-h strong{flex:1;font-size:14px;font-weight:600}
.dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center;font-size:12.5px}
.dp-g .wd{color:var(--fg3);font-size:11.5px;padding:4px 0}
.dp-g button{height:30px;border-radius:5px;font-variant-numeric:tabular-nums}
.dp-g button:hover{background:var(--hover)}
.dp-g .out{color:var(--fg3)}
.dp-g .tod{color:var(--red);font-weight:600}
.dp-g .sel,.dp-g .sel:hover{background:var(--accent);color:#fff}
.frow{display:flex;align-items:center;gap:8px;padding:4px 10px;min-height:40px}
.frow .grow{flex:1;min-width:0;font-size:13.5px}
.frow img,.frow .fthumb{width:36px;height:36px;border-radius:4px;object-fit:cover}

/* dialogs, toasts */
.modal-scrim{position:absolute;inset:0;background:var(--scrim);pointer-events:auto;display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px;animation:fade .12s ease-out}
.modal{background:var(--pop);border-radius:10px;box-shadow:var(--shadow-pop);width:min(620px,100%);max-height:72vh;display:flex;flex-direction:column;overflow:hidden}
.srch-in{font-size:17px;padding:16px 18px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--fg);outline:none;width:100%}
.srch-r{overflow-y:auto;padding:6px 0 8px}
.srch-sec{font-size:12px;color:var(--fg3);font-weight:600;padding:10px 18px 4px}
.srch-i{display:flex;align-items:center;gap:10px;width:calc(100% - 12px);margin:0 6px;padding:6px 12px;border-radius:6px;min-height:38px;text-align:left}
.srch-i.act,.srch-i:hover{background:var(--hover)}
.srch-i .sub{margin-left:auto;font-size:12px;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.srch-empty{padding:18px;color:var(--fg3);font-size:14px}
.mhead{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:600}
.mhead .sp{flex:1}
.mbody{overflow-y:auto;padding:8px 6px 12px}
.prow{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:6px}
.prow:hover{background:var(--hover)}
.prow .inp{flex:1}
.toast{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-fg);pointer-events:auto;padding:9px 14px;border-radius:7px;font-size:14px;box-shadow:var(--shadow-pop);max-width:calc(100% - 32px);animation:popIn .15s ease-out}

/* states */
.state{max-width:440px;margin:16vh auto 0;text-align:center;padding:0 20px;color:var(--fg2);font-size:15px;line-height:1.55}
.state h2{color:var(--fg);font-size:22px;margin:14px 0 8px;font-weight:700}
.state .ws-logo{width:44px;height:44px;border-radius:10px;font-size:20px;margin:0 auto}
.state .dbtn{margin-top:18px;height:34px;padding:0 16px;font-size:14px}
.load{padding:48px 96px}
.load .skel{margin-bottom:14px}
@media (max-width:767px){.load{padding:32px 20px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.gc.ro [data-w]{display:none!important}
/* ---------- sidebar: departments, badges, me ---------- */
.badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;flex:none}
.badge.blue{background:var(--accent)}
.sec-h{display:flex;align-items:center;gap:7px;height:30px;margin:1px 6px;padding:0 6px 0 8px;border-radius:6px;cursor:pointer;color:var(--side-fg);font-size:14px;width:calc(100% - 12px);position:relative;min-width:0}
.sec-h:hover{background:var(--hover)}
.sec-h:first-child{margin-top:10px}
.di{width:20px;height:20px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none;background:var(--t-default);color:var(--fg2)}
.di[data-c="gray"]{background:var(--t-gray)} .di[data-c="brown"]{background:var(--t-brown)} .di[data-c="orange"]{background:var(--t-orange)}
.di[data-c="yellow"]{background:var(--t-yellow)} .di[data-c="green"]{background:var(--t-green)} .di[data-c="blue"]{background:var(--t-blue)}
.di[data-c="purple"]{background:var(--t-purple)} .di[data-c="pink"]{background:var(--t-pink)} .di[data-c="red"]{background:var(--t-red)}
.sec-h .lbl{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:13px;color:var(--fg2)}
.sec-h .chev{color:var(--fg3);display:inline-flex;transition:transform .15s;opacity:0}
.sec-h:hover .chev,.sec-h.shut .chev,.sec-h:focus-visible .chev{opacity:1}
.sec-h.shut .chev{transform:rotate(-90deg)}
.sec-h .acts{display:none;gap:2px;margin-left:auto}
.sec-h:hover .acts,.sec-h:focus-within .acts{display:flex}
.sec-h .acts button{width:22px;height:22px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg2)}
.sec-h .acts button:hover{background:var(--hover2)}
@media (hover:none){.sec-h .acts{display:flex}.sec-h .chev{opacity:1}}
.sec-empty{font-size:13px;color:var(--fg3);padding:2px 14px 4px 42px}
.sec-ic{width:18px;text-align:center;font-size:15px;flex:none}
.me{display:flex;align-items:center;gap:9px;padding:6px 14px 4px;min-width:0}
.me-av{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;font-size:11px}
.me-t{min-width:0;flex:1;line-height:1.25}
.me .nm{font-size:13px;color:var(--fg);font-weight:500}
.me .rl{font-size:12px;color:var(--fg3)}
.me .linkbtn{flex:none}
.crumb.cur,.crumb.dept{pointer-events:none}
.crumb.dept{color:var(--fg2)}
@media (max-width:767px){.crumb.dept,.crumb.dept+.sep{display:none}}
.tag .ti{font-size:11px;margin-right:3px}
.rel{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--fg2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px;white-space:nowrap;max-width:100%;min-width:0}
.prog{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--fg2);min-width:0;width:100%;max-width:220px}
.prog .bar{flex:1;height:6px;border-radius:3px;background:var(--hover2);overflow:hidden;min-width:40px}
.prog .bar i{display:block;height:100%;background:var(--c-green);border-radius:3px}
.prog .pn{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- sign-in gate ---------- */
.gc.gated #side{display:none}
.gate{min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:var(--side)}
.gate-card{width:min(420px,100%);background:var(--bg);border-radius:14px;box-shadow:var(--shadow-pop);padding:32px 28px 22px;text-align:center}
.gate-logo{width:52px;height:52px;border-radius:13px;background:var(--brand);color:#fff;font-weight:800;font-size:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.gate h1{font-size:22px;line-height:1.25;margin:0 0 8px;text-wrap:balance}
.gate p{color:var(--fg2);font-size:14.5px;line-height:1.55;margin:0 0 18px;text-wrap:pretty}
.who{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;text-align:left;margin:0 0 14px}
.who img,.who .av{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover;font-size:13px}
.who-t{min-width:0;flex:1;line-height:1.3}
.who .nm,.req .nm{font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px}
.who .sub,.req .sub{font-size:12.5px;color:var(--fg3)}
.gate .fld{margin-bottom:12px;text-align:left}
.dbtn.big{width:100%;height:40px;font-size:15px;border-radius:8px}
.gate .fine{font-size:12.5px;color:var(--fg3);margin:16px 0 0;line-height:1.5}
.gate form{margin:0}
.gate .inp{height:40px;font-size:15px;padding:8px 10px}
.gate .fl{font-size:13px}
.gate-msg{font-size:13.5px;line-height:1.45;border-radius:8px;padding:9px 11px;margin:0 0 12px;text-align:left}
.gate-msg.err{background:var(--t-red);color:var(--fg)}
.gate-msg.ok{background:var(--t-green);color:var(--fg)}
.gate .linkbtn{margin-top:10px}
.pick{display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto;text-align:left;margin:0 0 12px}
.pick-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);min-height:42px}
.pick-i:hover{background:var(--hover)}
.pick-i.sug{border-color:var(--accent);background:var(--sel)}
.pick-i .r{margin-left:auto;font-size:12px;color:var(--accent);font-weight:500}
.sent{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--fg2);background:var(--hover);border-radius:8px;padding:10px;margin-bottom:10px}
.linkbtn{color:var(--accent);font-size:13px;padding:3px 6px;border-radius:4px;white-space:nowrap}
.linkbtn:hover{background:var(--sel)}
.push{margin-left:auto}

/* ---------- My Tasks ---------- */
.mt-top{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.mt-tt{flex:1;min-width:0}
.mt .pg-title,.adm .pg-title{margin-bottom:4px}
.mt-sub{color:var(--fg2);font-size:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mt-top .btn-new{height:32px;padding:0 12px;margin:0 0 4px}
.mt-tabs{display:flex;gap:4px;margin:18px 0 0;border-bottom:1px solid var(--line)}
.mt-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 12px 9px;font-size:14px;color:var(--fg2);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:4px 4px 0 0}
.mt-tab:hover{background:var(--hover);color:var(--fg)}
.mt-tab.on{color:var(--fg);font-weight:600;border-bottom-color:var(--fg)}
.mt-tab .n{font-size:12px;color:var(--fg3);font-weight:500}
.mt-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:20px 0 4px}
.sum{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:14px;font-size:13px;background:var(--hover);color:var(--fg2)}
.sum b{font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums}
.sum:disabled{cursor:default;opacity:.7}
.sum[data-c="blue"]{background:var(--t-blue)} .sum[data-c="red"]{background:var(--t-red)} .sum[data-c="orange"]{background:var(--t-orange)} .sum[data-c="gray"]{background:var(--t-gray)}
.sum:not(:disabled):hover{filter:brightness(.97)}
.tsec{margin-top:28px;scroll-margin-top:56px}
.tsec-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:0 2px 8px;border-bottom:1px solid var(--line);width:100%;min-width:0}
.tsec-h .n{color:var(--fg3);font-weight:500;font-size:13px}
.tsec-h .hint{color:var(--fg3);font-weight:400;font-size:12.5px;margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tsec-h.tog{cursor:pointer;text-align:left}
.tsec-h .chev{display:inline-flex;color:var(--fg3);transition:transform .15s}
.tsec-h .chev.shut{transform:rotate(-90deg)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--c-gray)}
.dot[data-c="blue"]{background:var(--c-blue)} .dot[data-c="red"]{background:var(--c-red)} .dot[data-c="orange"]{background:var(--c-orange)}
.dot[data-c="yellow"]{background:var(--c-yellow)} .dot[data-c="green"]{background:var(--c-green)}
.trow{display:flex;align-items:flex-start;gap:11px;padding:10px 4px;border-bottom:1px solid var(--line);cursor:pointer;min-width:0}
.trow:hover{background:var(--hover)}
.tcheck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--fg3);flex:none;display:inline-flex;align-items:center;justify-content:center;margin-top:2px;color:#fff}
.tcheck:hover:not(:disabled){border-color:var(--c-green);background:color-mix(in srgb,var(--c-green) 14%,transparent)}
.tcheck.on{background:var(--c-green);border-color:var(--c-green)}
.tcheck:disabled{cursor:default}
.tmain{flex:1;min-width:0}
.tt{font-size:14.5px;font-weight:500;line-height:1.4;word-break:break-word}
.trow.done .tt{text-decoration:line-through;color:var(--fg3)}
.tmeta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px;font-size:12.5px;color:var(--fg2);min-width:0}
.tmeta .tag{height:19px;font-size:12px}
.tmeta .person{font-size:12.5px}
.tside{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;font-size:12.5px;padding-top:1px}
.due{color:var(--fg2);white-space:nowrap;display:inline-flex;align-items:center;gap:2px}
.due.late{color:var(--red);font-weight:600}
.due.soon{color:var(--c-orange);font-weight:600}
.acc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;margin-top:10px;background:var(--card);min-width:0}
.acc-main{flex:1;min-width:0;cursor:pointer}
.acc-btns{display:flex;gap:6px;flex:none}
.acc-btns .dbtn{height:30px;padding:0 14px}
.acc-wait{font-size:12.5px;flex:none}
.prj{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.prj-c{border:1px solid var(--line2);border-radius:10px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:8px;background:var(--card);min-width:0}
.prj-c:hover{background:var(--card-h)}
.prj-t{font-weight:600;font-size:14.5px;line-height:1.35}
.prj-c .tmeta{margin-top:0}
.mt-empty{padding:48px 10px;text-align:center;color:var(--fg2);font-size:14.5px}
.mt-empty h3{color:var(--fg);font-size:18px;margin:10px 0 6px}
.mt-empty p{margin:0 auto 16px;max-width:380px;line-height:1.55}
.mt-empty .dbtn{height:34px;padding:0 16px;font-size:14px}
.big-ic{display:inline-flex;color:var(--c-green)}
.big-ic .ic{width:40px;height:40px}
@media (max-width:767px){
  .acc{flex-direction:column;align-items:stretch}
  .acc-btns .dbtn{flex:1;height:36px}
  .mt-top .btn-new{margin-bottom:6px}
  .tsec-h .hint{display:none}
}

/* ---------- side peek extras ---------- */
.pk-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:8px;background:var(--t-yellow);margin:18px 0 0;font-size:14px;line-height:1.4}
.pk-banner .sp{flex:1}
.pk-banner.red{background:var(--t-red)}
.pk-banner.gray{background:var(--hover)}
.pk-banner .dbtn{background:var(--bg)}
.pk-banner .dbtn.blue{background:var(--accent)}
.pk-tasks{margin:0 0 18px}
.pk-tasks .tsec-h{font-size:14px}
.pk-none{font-size:13.5px;padding:10px 2px}

/* ---------- dialogs: forms ---------- */
.form{padding:16px 18px 4px}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:13px;min-width:0}
.fl{font-size:12.5px;color:var(--fg2);font-weight:500}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.inp.big{font-size:16px;padding:8px 10px}
.inp.err{border-color:var(--red);box-shadow:0 0 0 2px rgba(235,87,87,.22)}
.mfoot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex:none}
.mfoot .hint{flex:1;font-size:12.5px;color:var(--fg3);line-height:1.4;min-width:0}
.mfoot .dbtn{height:32px;padding:0 14px}
.seg.wide{display:flex;margin-left:0;width:100%}
.seg.wide button{flex:1;padding:0;height:34px;font-size:13.5px;text-align:center}
.form .inp:not(textarea){height:36px}
.form textarea.inp{min-height:76px}
.seg.wide button+button{border-left:1px solid var(--line2)}
.seg.wide button[data-p="Urgent"].on{background:var(--t-red);color:var(--fg)}
.seg.wide button[data-p="High"].on{background:var(--t-orange);color:var(--fg)}

/* ---------- Admin ---------- */
.pg.adm{max-width:1180px}
@media (min-width:768px){.pg.adm{padding-left:56px;padding-right:56px}}
.mtab-w{overflow-x:auto}
.asec{margin-top:34px}
.asec-h{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;margin-bottom:10px;min-height:32px}
.asec-h .n{color:var(--fg3);font-weight:500;font-size:13.5px}
.callout{display:flex;gap:10px;padding:12px 14px;border-radius:8px;background:var(--hover);font-size:14px;line-height:1.55;color:var(--fg);margin:14px 0}
.callout.warn{background:var(--t-yellow)}
.callout>.ic{margin-top:3px;color:var(--fg2)}
.callout ul{margin:0;padding-left:18px}
.callout li+li{margin-top:5px}
.mtab{display:grid;grid-template-columns:minmax(170px,1.3fr) minmax(140px,1fr) minmax(140px,1fr) 112px 158px minmax(120px,1fr) 40px;border-top:1px solid var(--line);font-size:14px;min-width:890px}
.mrow{display:contents}
.mh{font-size:12.5px;color:var(--fg2);padding:8px;border-bottom:1px solid var(--line);font-weight:500;white-space:nowrap}
.mc{padding:6px 8px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;min-width:0}
.mc.end{justify-content:flex-end}
.mc .av{width:24px;height:24px;font-size:10.5px}
.cell-in{width:100%;min-width:0;border:1px solid transparent;background:transparent;border-radius:5px;padding:4px 6px;font-size:14px;color:var(--fg);outline:none;font-family:inherit}
.cell-in:hover:not(:disabled){background:var(--hover)}
.cell-in:focus{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 2px var(--sel)}
.cell-in:disabled{color:var(--fg2);cursor:default}
select.cell-in{cursor:pointer}
.you{font-size:11px;color:var(--fg3);border:1px solid var(--line2);border-radius:8px;padding:0 6px;flex:none}
.acct{display:flex;align-items:center;gap:6px;min-width:0;font-size:13.5px;flex:1}
.acct .ok{color:var(--c-green);display:inline-flex}
.acct .lt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.acct .lt .sub{font-size:12px;color:var(--fg3)}
.rav{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;font-size:11px}
.rav.sm{width:20px;height:20px;font-size:9.5px}
.xd{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0}
.gst{font-size:11px;font-weight:500;color:var(--c-orange);border:1px solid currentColor;border-radius:8px;padding:0 6px}
.req{border:1px solid var(--line2);border-radius:10px;padding:12px 14px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--card)}
.req .who2{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0}
.req .ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.req .ctl .inp{width:auto;max-width:210px;font-size:13.5px}
.req .ctl .dbtn{height:30px}
.dlist{border-top:1px solid var(--line)}
.drow{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--line);min-width:0}
.di.big{width:30px;height:30px;border-radius:7px;font-size:16px}
button.di.big:hover:not(:disabled){filter:brightness(.95)}
.drow .dn{flex:1;max-width:280px;font-weight:500}
.swatch-b{width:28px;height:28px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.swatch-b:hover:not(:disabled){background:var(--hover)}
.drow .cnt{font-size:12.5px;color:var(--fg3);white-space:nowrap;margin-left:auto}
.dacts{display:flex;gap:2px;flex:none}
.dadd{display:flex;gap:8px;padding:10px 4px;max-width:420px}
.dadd .dbtn{height:32px;white-space:nowrap}
@media (max-width:900px){
  .mtab{display:block;border-top:0;min-width:0}
  .mrow.mhead-r{display:none}
  .mrow{display:block;border:1px solid var(--line2);border-radius:10px;padding:6px 8px;margin-bottom:10px;position:relative}
  .mc{border:0;padding:3px 0}
  .mc.name{padding-right:40px}
  .mc[data-l]::before{content:attr(data-l);font-size:12px;color:var(--fg3);width:92px;flex:none}
  .mc.end{position:absolute;top:8px;right:6px;padding:0}
  .drow{flex-wrap:wrap}
  .drow .cnt{margin-left:0;width:100%;padding-left:46px}
}