/* Dashboard, library, dialogs. All colours come from the design tokens at the top of styles.css, so light and dark follow the same switch. */
body:not(.in-editor) .app{display:none!important}
body.in-editor #dash{display:none!important}
#dash{position:fixed;inset:0;background:var(--bg);color:var(--ink);z-index:5}
.dsh{display:flex;height:100%;min-height:0}
.dsb{width:256px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;gap:14px;overflow:auto}
.dbrand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:.01em;color:var(--navy);padding:2px 8px}
.dbrand b{color:var(--accent-tx);font-weight:700}
.dlogo{width:34px;height:34px;border-radius:10px;background:var(--accent);display:grid;place-items:center;color:#fff}
.dlogo svg{width:20px;height:20px}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.i.big{width:34px;height:34px}.i.huge{width:44px;height:44px;opacity:.55}.i.xs{width:13px;height:13px}
.dnew{display:flex;align-items:center;gap:10px;margin:4px 4px 2px;padding:13px 20px;border:0;border-radius:16px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.18),0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent);transition:transform .12s,filter .12s}
.dnew:hover{filter:brightness(1.07)}.dnew:active{transform:scale(.98)}
.dnav{display:flex;flex-direction:column;gap:2px}
.dnav button{display:flex;align-items:center;gap:14px;padding:10px 14px;border:0;background:none;border-radius:999px;color:var(--ink);cursor:pointer;font-size:14.5px;text-align:left}
.dnav button:hover{background:var(--hov)}
.dnav button[aria-current=page]{background:var(--tint2);color:var(--accent-tx);font-weight:600}
.dnav em{margin-left:auto;font-style:normal;font-size:12px;background:var(--hov);border-radius:999px;padding:1px 8px;color:var(--ink2)}
.dfoot{margin-top:auto;padding:10px 8px 2px;border-top:1px solid var(--line)}
.dmode{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink2)}.dmode b{color:var(--ink);font-size:13px}
.dmain{flex:1;min-width:0;display:flex;flex-direction:column}
.dtop{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.dsearch{display:flex;align-items:center;gap:10px;flex:1;max-width:640px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:0 16px;height:44px;color:var(--ink2)}
.dsearch:focus-within{background:var(--panel);border-color:var(--accent);box-shadow:var(--ring)}
.dsearch input{flex:1;border:0;background:none;outline:none;font-size:15px;min-width:0;height:100%;color:var(--ink)}
.dsearch input::-webkit-search-cancel-button{cursor:pointer}
.dico{width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.dico:hover{background:var(--hov)}.dico.sm{width:32px;height:32px}
.dburger{display:none}
.davatar{width:36px;height:36px;border-radius:50%;border:0;background:var(--navy);color:var(--panel);font-weight:700;font-size:13px;cursor:pointer}
.dcontent{flex:1;overflow:auto;padding:24px 32px 56px;outline:none}
.dhdr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.dhdr h1{font-size:22px;font-weight:600;margin:0;color:var(--ink)}
.dsub{color:var(--ink2);font-size:12.5px}
.dlead{color:var(--ink2);max-width:720px;margin:-6px 0 20px;line-height:1.5}
.dsec{font-size:13px;font-weight:600;color:var(--ink2);margin:22px 0 10px;text-transform:uppercase;letter-spacing:.06em}
.dtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dsort{display:flex;align-items:center;gap:8px;color:var(--ink2);font-size:13px}
.dsort select,.df input,.df select{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--ink);min-height:40px}
.dseg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.dseg button{border:0;background:none;color:var(--ink2);padding:8px 12px;cursor:pointer;display:grid;place-items:center}
.dseg button[aria-pressed=true]{background:var(--tint2);color:var(--accent-tx)}
.dseg.wide button{padding:10px 18px;font-size:14px}
.dcrumb{display:flex;align-items:center;gap:8px;font-size:20px}.dcrumb button{border:0;background:none;color:var(--accent-tx);cursor:pointer;font-size:20px;padding:0}.dcrumb span{color:var(--ink2)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:18px}
.dcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s;text-align:left;padding:0;color:inherit;font:inherit}
.dcard:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 6px 22px rgba(16,24,40,.12)}
.dcard.menuopen{z-index:6}
.dthumb{display:grid;place-items:center;aspect-ratio:16/10;border:0;padding:0;background:var(--panel2);border-radius:13px 13px 0 0;overflow:hidden;cursor:pointer;color:var(--ink2);width:100%}
.dthumb:disabled{cursor:default}.dthumb img{width:100%;height:100%;object-fit:cover;display:block}
.dph{display:grid;place-items:center;width:100%;height:100%;background:var(--panel2);color:var(--ink3)}
.dmeta{padding:11px 44px 13px 14px;display:flex;flex-direction:column;gap:5px;min-width:0}
.dnm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px;min-width:0}.dsubrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.dtype{font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--tint);color:var(--accent-tx);white-space:nowrap;flex:none}
.dtype.commercial{background:color-mix(in srgb,var(--navy) 12%,transparent);color:var(--navy)}
.dkeb{position:absolute;right:6px;bottom:8px}
.dpop{position:absolute;right:0;bottom:calc(100% + 2px);min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(16,24,40,.22);padding:6px;z-index:20;display:flex;flex-direction:column}
.dpop button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--ink);font-size:14px}
.dpop button:hover,.dpop button:focus-visible{background:var(--hov);outline:none}.dpop .warn{color:var(--warnc)}
.dnewcard{cursor:pointer;border-style:dashed}.dnewcard .dthumb{background:var(--tint);color:var(--accent-tx)}.dnewcard .dthumb .i{opacity:.9}
.dlist{background:var(--panel);border:1px solid var(--line);border-radius:14px}
.drow{display:flex;align-items:center;gap:14px;padding:8px 12px;border-top:1px solid var(--line);position:relative}
.drow:first-child{border-top:0}.drow.dhead{color:var(--ink2);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px 10px 90px;gap:14px}
.drow.dhead .grow{flex:1}.drow.dhead span:nth-child(2){flex:1}
.drow.menuopen{z-index:6}
.drthumb{width:64px;height:42px;border:0;border-radius:8px;overflow:hidden;background:var(--panel2);padding:0;cursor:pointer;flex:none}.drthumb img{width:100%;height:100%;object-fit:cover}.drthumb .dph .i{width:20px;height:20px}
.drname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;border:0;background:none;text-align:left;padding:0;cursor:pointer;color:var(--ink)}.drname b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drname:disabled{cursor:default}
.dcol{width:120px;color:var(--ink2);font-size:13px;flex:none}.drow .dtype{width:88px;text-align:center;flex:none}
.drow .dkeb{position:static}.drow.dhead .dtype,.drow.dhead span{background:none}
.dfolders{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.dfolder{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px}.dfolder.menuopen{z-index:6}
.dfo{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:14px 48px 14px 14px;cursor:pointer;text-align:left;color:var(--ink)}
.dfo .i{color:var(--accent-tx)}.dfo span{display:flex;flex-direction:column;min-width:0}.dfo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dfo em{font-style:normal;color:var(--ink2);font-size:12px}
.dfolder:hover{border-color:var(--accent)}.dfolder .dkeb{bottom:50%;transform:translateY(50%)}
.dtpl .dt .dthumb{cursor:default}.dtact{display:flex;gap:8px;padding:0 14px 14px}
.dempty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:56px 20px;color:var(--ink2);max-width:520px;margin:20px auto}
.dempty h3{margin:6px 0 0;color:var(--ink);font-size:18px}.dempty p{margin:0 0 8px;line-height:1.5}.dempty .btn{margin:0 4px}
.dmore{text-align:center;margin-top:24px}
.dskel{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:18px}.dskel div{height:210px;border-radius:14px;background:linear-gradient(90deg,var(--panel2),var(--panel),var(--panel2));background-size:200% 100%;animation:dsk 1.2s infinite linear}
@keyframes dsk{to{background-position:-200% 0}}
.dset{display:flex;flex-direction:column;gap:16px;max-width:720px}
.dpanel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}.dpanel h2{margin:0 0 12px;font-size:16px}
.dpanel p{line-height:1.55;margin:.4em 0}.dhelp{color:var(--ink2);font-size:13px}
.dbtns{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.dol{margin:0;padding-left:20px;line-height:1.8}
.dkeys{line-height:2.2}kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font:12px ui-monospace,Menlo,monospace;margin-right:2px}
.df{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:13.5px;margin:0 0 14px}.df input,.df select{font-weight:400;font-size:15px;width:100%}
.df input:focus,.df select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}.df input[aria-invalid=true]{border-color:var(--warnc)}
.derr{color:var(--warnc);font-size:12.5px;font-weight:400}
.btn.danger.solid{background:var(--warnc);color:#fff;border-color:var(--warnc)}
.btn.big svg{width:18px;height:18px}
/* dialogs */
#dmodals .dm-back{position:fixed;inset:0;background:rgba(10,18,32,.55);display:grid;place-items:center;z-index:200;padding:16px;backdrop-filter:blur(2px)}
.dm-card{background:var(--panel);color:var(--ink);border-radius:18px;padding:24px;width:min(460px,100%);max-height:92dvh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.dm-card h2{margin:0 0 16px;font-size:20px}.dm-p{line-height:1.55;color:var(--ink2);margin:0 0 6px}.dm-p b{color:var(--ink)}
.dm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.dkind{border:0;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.dkind legend{font-weight:500;font-size:13.5px;margin-bottom:6px;padding:0}
.dkind label{cursor:pointer}.dkind input{position:absolute;opacity:0}.dkind span{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px}
.dkind input:checked+span{border-color:var(--accent);background:var(--tint);color:var(--accent-tx)}.dkind input:focus-visible+span{box-shadow:var(--ring)}
.dpick{display:flex;flex-direction:column;gap:4px;max-height:50dvh;overflow:auto}.dpick button{display:flex;align-items:center;gap:12px;border:0;background:none;padding:11px 12px;border-radius:10px;cursor:pointer;color:var(--ink);text-align:left;font-size:14.5px}
.dpick button:hover{background:var(--hov)}.dpick button[aria-current]{background:var(--tint);color:var(--accent-tx);font-weight:600}
.dm-choices{display:flex;flex-direction:column;gap:10px;margin-top:12px}.dm-choice{display:flex;flex-direction:column;gap:3px;text-align:left;border:1.5px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:12px;padding:13px 15px;cursor:pointer}
.dm-choice:hover{border-color:var(--accent)}.dm-choice span{color:var(--ink2);font-size:13px}
#dtoast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,24px);background:var(--navy);color:var(--panel);padding:11px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:300;max-width:90vw}
#dtoast.show{opacity:1;transform:translate(-50%,0)}#dtoast[data-kind=err]{background:var(--warnc);color:#fff}
.savestate[data-state=error]{color:var(--warnc);cursor:pointer;font-weight:600}.savestate[data-state=saving]{opacity:.8}
#bHome{display:inline-flex;align-items:center;gap:4px;padding-left:8px}#bHome svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* tablet and phone */
@media (max-width:900px){.dcontent{padding:18px 18px 48px}.dtop{padding:10px 14px}.dhide{display:none}.dcol{width:96px}}
@media (max-width:760px){
  .dsb{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-102%);transition:transform .22s;width:min(290px,84vw);box-shadow:0 0 50px rgba(0,0,0,.4)}
  .navopen .dsb{transform:none}.dscrim{display:none}.navopen .dscrim{display:block;position:fixed;inset:0;background:rgba(10,18,32,.5);z-index:30}
  .dburger{display:grid}.dgrid,.dskel{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .drow .dtype,.dcol,.drow.dhead{display:none}.dhdr h1{font-size:19px}.dcontent{padding:14px 12px 48px}
  #bHome span{display:none}
}
@media (prefers-reduced-motion:reduce){.dnew,.dsb,#dtoast,.dskel div{transition:none;animation:none}}
@media (max-width:1560px){body.in-editor .top .brand{display:none}}
/* sign-in */
#auth{position:fixed;inset:0;z-index:150;background:var(--bg);display:grid;place-items:center;padding:16px;overflow:auto;color:var(--ink)}
.au-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:30px 28px;box-shadow:0 20px 60px rgba(16,24,40,.18)}
.au-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:var(--navy);margin-bottom:18px}.au-brand b{color:var(--accent-tx)}
.au-card h1{margin:0 0 6px;font-size:24px}.au-sub{margin:0 0 20px;color:var(--ink2);line-height:1.5}
.au-pw{display:flex;align-items:center}.au-pw input{flex:1}.au-pw>button:not(.btn){margin-left:-42px;width:40px;height:40px;border:0;background:none;color:var(--ink2);cursor:pointer;display:grid;place-items:center}
.au-msg{border-radius:10px;padding:10px 12px;font-size:13.5px;margin:0 0 14px;line-height:1.45}.au-msg.err{background:color-mix(in srgb,var(--warnc) 12%,transparent);color:var(--warnc)}.au-msg.ok{background:color-mix(in srgb,var(--okc) 14%,transparent);color:var(--okc)}
.au-go{width:100%;justify-content:center}.au-links{display:flex;justify-content:space-between;gap:10px;margin-top:16px}.au-links button{border:0;background:none;color:var(--accent-tx);cursor:pointer;font-size:14px;padding:4px 0}
body.in-auth .app,body.in-auth #dash{display:none!important}
.dbanner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--tint);border:1px solid var(--tint2);border-radius:12px;padding:12px 16px;margin:0 0 18px}.dbanner span{flex:1;min-width:220px}
.thumbw{position:relative;flex:none;display:flex}
.thx{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(10,18,32,.72);color:#fff;font-size:16px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;opacity:0;transition:opacity .12s}
.thumbw:hover .thx,.thx:focus-visible,.thumbw:focus-within .thx{opacity:1}.thx:hover{background:var(--warnc)}
@media (hover:none){.thx{opacity:.9}}
/* update bar */
#updbar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:320;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:min(680px,94vw);background:var(--navy);color:var(--panel);padding:12px 16px;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);font-size:14px}
#updbar span{flex:1;min-width:200px}#updbar .btn{background:var(--panel);color:var(--navy)}#updbar .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}

.au-choices{display:grid;gap:10px}.au-choices .au-go{justify-content:center}
@media (max-width:480px){.au-card{padding:24px 18px;border-radius:16px}}

/* ===== Design system: library shell, dialogs, sign-in (tokens from styles.css) ===== */
/* sidebar */
.dsb{width:248px;padding:18px 14px;gap:18px;background:var(--panel)}
.dbrand{font-size:var(--fs-lg);font-weight:650;letter-spacing:0;color:var(--navy);padding:0 6px}
.dbrand b{color:var(--accent-tx)}
.dlogo{width:32px;height:32px;border-radius:9px;background:#0a66d6}
.dlogo svg{width:19px;height:19px}
.dnew{justify-content:center;margin:0;min-height:44px;padding:0 18px;border-radius:10px;font-size:var(--fs-md);background:var(--accent);color:var(--accent-ink);box-shadow:none;transition:background-color .12s}
.dnew:hover{background:var(--accent2);filter:none}.dnew:active{transform:none}
.dnew:focus-visible{outline:2px solid var(--accent-tx);outline-offset:2px}
.dnav{gap:2px}
.dnav button{gap:12px;min-height:40px;padding:0 12px;border-radius:var(--r);color:var(--ink2);font-size:var(--fs)}
.dnav button .i{width:19px;height:19px}
.dnav button:hover{background:var(--panel2);color:var(--ink)}
.dnav button[aria-current=page]{background:var(--tint);color:var(--accent-tx);font-weight:600}
.dnav em{background:var(--panel3);color:var(--ink2)}
.dfoot{padding:14px 6px 0}
.dmode{gap:3px;font-size:var(--fs-xs);color:var(--ink3)}
.dmode b{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.dmode b i{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none}
.dmode b[data-sync=synced]{color:var(--ok)}.dmode b[data-sync=synced] i{background:var(--ok)}
.dmode b[data-sync=syncing] i{background:var(--accent-tx)}
.dmode b[data-sync=offline]{color:var(--warn)}.dmode b[data-sync=offline] i{background:var(--warn)}
.dmode b[data-sync=error]{color:var(--danger)}.dmode b[data-sync=error] i{background:var(--danger)}
/* top bar */
.dtop{min-height:64px;padding:0 28px;gap:12px;background:var(--panel)}
.dsearch{height:40px;max-width:560px;border-radius:10px;padding:0 14px;background:var(--panel2);border-color:transparent;color:var(--ink3)}
.dsearch:hover{border-color:var(--line)}
.dsearch:focus-within{background:var(--panel);border-color:var(--accent);box-shadow:var(--ring)}
.dsearch input{font-size:var(--fs);border:0;box-shadow:none;min-height:0;padding:0;background:none}
.dsearch input:focus{box-shadow:none}
.dico{width:38px;height:38px;border-radius:var(--r);color:var(--ink2)}
.dico:hover{background:var(--panel2);color:var(--ink)}
.dico.sm{width:30px;height:30px;border-radius:var(--r-sm)}
.davatar{background:#0f2747;color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* page text */
.dcontent{padding:28px 40px 56px}
.dhdr h1{font-size:var(--fs-xl);font-weight:650;color:var(--navy);letter-spacing:-.005em}
.dsub{color:var(--ink3);font-size:var(--fs-sm)}
.dlead{color:var(--ink2)}
.dsec{color:var(--ink3);font-size:var(--fs-xs);letter-spacing:.07em}
.dhelp{color:var(--ink2);font-size:var(--fs-sm)}
/* segmented control, sort, form fields */
.dseg{border-color:var(--line);border-radius:var(--r);background:var(--panel)}
.dseg button{color:var(--ink3);min-height:34px}
.dseg button:hover{color:var(--ink);background:var(--panel2)}
.dseg button[aria-pressed=true]{background:var(--tint);color:var(--accent-tx)}
.dsort{color:var(--ink3)}
.dsort select,.df input,.df select{min-height:38px;border-radius:var(--r);padding:0 12px}
.df{color:var(--ink2);font-size:var(--fs-sm)}
.df input,.df select{color:var(--ink);font-size:var(--fs)}
/* menus inside cards keep their position rules; only the look is shared */
.dpop{border-radius:var(--r-lg);min-width:220px}
.dpop .warn{color:var(--danger)}
/* dialogs */
#dmodals .dm-back{background:rgba(6,12,24,.55);backdrop-filter:none}
.dm-card{border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 24px;box-shadow:var(--shadow);max-height:calc(100dvh - 32px)}
.dm-card h2{font-size:var(--fs-lg);font-weight:650;margin:0 0 14px}
.dm-p{color:var(--ink2)}
.dm-actions{margin-top:20px}
.dkind span{border-radius:var(--r-lg);border-width:1px}
.dm-choice{border-radius:var(--r-lg);border-width:1px;background:var(--panel)}
.dm-choice:hover{background:var(--panel2)}
.dpick button{border-radius:var(--r);font-size:var(--fs)}
.dpick button:hover{background:var(--panel2)}
/* toast, banner, update bar */
#dtoast{background:var(--tip);color:var(--tip-ink);border-radius:var(--r);padding:10px 16px;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--pill)}
#dtoast[data-kind=err]{background:var(--danger);color:#fff}
:root[data-theme=dark] #dtoast[data-kind=err]{color:#0b1424}
.dbanner{background:var(--tint);border-color:var(--tint2);border-radius:var(--r-lg)}
#updbar{background:var(--tip);color:var(--tip-ink);border-radius:var(--r-lg);box-shadow:var(--shadow)}
#updbar .btn{background:var(--panel);color:var(--ink);border-color:var(--line)}
#updbar .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* empty and loading states */
.dempty{color:var(--ink2)}
.dempty .i.huge{color:var(--ink3);opacity:.8}
.dempty h3{font-size:var(--fs-lg);font-weight:650}
.dskel div{border-radius:var(--r-lg);background:linear-gradient(90deg,var(--panel2),var(--panel3),var(--panel2));background-size:200% 100%}
/* settings and help panels */
.dpanel{border-radius:var(--r-lg);box-shadow:var(--soft)}
.dpanel h2{font-size:var(--fs-md);font-weight:650}
/* sign-in */
.au-card{border-radius:var(--r-xl);padding:30px 28px;box-shadow:var(--shadow)}
.au-brand{color:var(--navy)}.au-brand b{color:var(--accent-tx)}
.au-card h1{font-size:var(--fs-xl);font-weight:650;color:var(--navy)}
.au-sub{color:var(--ink2)}
.au-links button{color:var(--accent-tx)}
.au-msg.err{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.au-msg.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
@media (max-width:900px){.dcontent{padding:20px 20px 48px}.dtop{padding:0 16px}}
@media (max-width:760px){.dcontent{padding:16px 12px 48px}}

/* ===== Phase 2: Home and My Designs ===== */
.dcontent>*{max-width:1320px;margin-left:auto;margin-right:auto}
.dhdr{gap:12px 16px;margin-bottom:16px}
.dtitle{display:flex;flex-direction:column;gap:2px;min-width:0}
.dcrumb{font-size:var(--fs-sm);gap:6px;color:var(--ink3)}
.dcrumb button{font-size:var(--fs-sm);color:var(--accent-tx)}
.dcrumb button:hover{text-decoration:underline}
.dcrumb span{color:var(--ink3)}.dcrumb [aria-current]{color:var(--ink2)}
.dtools{gap:8px}
.dvsep{width:1px;height:24px;background:var(--line);margin:0 4px}
.dh2{margin:0;font-size:var(--fs-md);font-weight:650;color:var(--ink)}
.dsect{margin-top:28px}
.dsect>.dh2{margin-bottom:12px}
.dsect .dhdr{margin-bottom:12px}
/* welcome + counts */
.dwelcome{align-items:flex-end;margin-bottom:4px}
.dwelcome>div:first-child{flex:1 1 280px;min-width:0}
.dwelcome h1{font-size:var(--fs-2xl)}
.dwelcome .dlead{margin:4px 0 0;font-size:var(--fs-md)}
.dstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;flex:0 1 560px}
.dstats div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 16px;min-width:0}
.dstats dt{color:var(--ink3);font-size:var(--fs-sm);line-height:1.3}
.dstats dd{margin:2px 0 0;font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}
/* continue working */
.dresume{display:flex;gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--soft);flex-wrap:wrap}
.drsthumb{width:min(320px,100%);aspect-ratio:16/10;border:0;padding:0;border-radius:var(--r-lg);overflow:hidden;background:var(--panel2);cursor:pointer;flex:none;display:grid;place-items:center;color:var(--ink3)}
.drsthumb img{width:100%;height:100%;object-fit:cover;display:block}
.drsthumb:hover img{filter:brightness(1.04)}
.drsinfo{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.drsinfo h3{margin:0;font-size:var(--fs-xl);font-weight:650;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drsinfo .dsub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;font-size:var(--fs)}
.drsinfo .dbtns{margin:6px 0 0}
/* design cards */
.dgrid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.dcard{border-radius:var(--r-lg);transition:border-color .12s,box-shadow .12s}
.dcard:hover{border-color:color-mix(in srgb,var(--accent-tx) 40%,var(--line));box-shadow:var(--soft)}
.dcard:focus-within{border-color:var(--accent-tx)}
.dthumb{border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;background:var(--panel2)}
.dmeta{padding:12px 44px 12px 14px;gap:6px}
.dnm{font-size:var(--fs);font-weight:600}
.dtype{font-size:11.5px;padding:2px 8px}
.dtype.commercial{background:color-mix(in srgb,#7c5cd6 14%,transparent);color:#6a4bc4}
:root[data-theme=dark] .dtype.commercial{color:#b9a6ff}
.dkeb{right:6px;bottom:9px}
.dico.sm{color:var(--ink3)}
.dnewcard{border-style:dashed;background:transparent;box-shadow:none}
.dnewcard .dthumb{background:var(--tint);color:var(--accent-tx)}
.dnewcard:hover{background:var(--panel)}
/* menus */
.dpop button .i{width:17px;height:17px;color:var(--ink3)}
.dpop .warn .i{color:var(--danger)}
.dpsep{display:block;height:1px;background:var(--line);margin:5px 4px}
/* folders */
.dfolders{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.dfolder{border-radius:var(--r-lg);transition:border-color .12s,box-shadow .12s}
.dfolder:hover{border-color:color-mix(in srgb,var(--accent-tx) 40%,var(--line));box-shadow:var(--soft)}
.dfo{padding:12px 48px 12px 12px;gap:12px}
.dfo span.dfi{width:36px;height:36px;border-radius:9px;background:var(--tint);color:var(--accent-tx);display:grid;place-items:center;flex:none}
.dfo span.dfi .i{width:19px;height:19px;color:var(--accent-tx)}
.dfo em{color:var(--ink3)}
/* list view */
.dlist{border-radius:var(--r-lg);overflow:visible}
.drow{gap:14px;padding:8px 12px;transition:background-color .1s}
.drow:not(.dhead):hover{background:var(--panel2)}
.drow:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.drow.dhead{color:var(--ink3);font-size:var(--fs-xs);background:var(--panel2)}
.drthumb{width:72px;height:45px;border-radius:var(--r-sm)}
.drname b{font-size:var(--fs)}
.dcol{color:var(--ink3);font-variant-numeric:tabular-nums}
/* empty states */
.dempty{background:var(--panel);border:1px dashed var(--line);border-radius:14px;padding:48px 24px;max-width:640px}
.dempty .i.huge{width:56px;height:56px;padding:12px;border-radius:50%;background:var(--tint);color:var(--accent-tx);opacity:1}
@media (max-width:1100px){.dstats{flex-basis:100%}}
@media (max-width:760px){.dstats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dstats div{padding:10px 12px}.dstats dd{font-size:20px}.dresume{padding:12px;gap:14px}.dwelcome h1{font-size:var(--fs-xl)}.dvsep{display:none}}
.drow.dhead{padding-left:12px}
.drow.dhead span:first-child{width:72px;flex:none}
.drow.dhead span:nth-child(3){width:88px;flex:none;text-align:center}

/* ===== Phase 3: Settings ===== */
.dsetw{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap;max-width:1080px}
.dsnav{flex:0 0 220px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.dsnav button{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border:0;border-radius:var(--r);background:none;color:var(--ink2);font-size:var(--fs);text-align:left;cursor:pointer}
.dsnav button .i{width:18px;height:18px}
.dsnav button:hover{background:var(--panel2);color:var(--ink)}
.dsnav button[aria-current=page]{background:var(--tint);color:var(--accent-tx);font-weight:600}
.dsetw .dset{flex:999 1 520px;min-width:0;max-width:760px;gap:16px}
.dsets,#acct{display:flex;flex-direction:column;gap:16px}
.dpanel{padding:0;overflow:hidden}
.dpanel>*:not(.dphd){margin-left:20px;margin-right:20px}
.dpanel>:last-child{margin-bottom:18px}
.dphd{padding:16px 20px;border-bottom:1px solid var(--line);margin-bottom:16px}
.dphd h2{margin:0;font-size:var(--fs-md);font-weight:650}
.dphd .dhelp{margin:2px 0 0}
.drow2{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px 16px;align-items:center;margin-bottom:14px}
.drow2 input{width:100%;min-height:38px}
.dlab{color:var(--ink2);font-weight:500;font-size:var(--fs-sm)}
#acn.drow2 .au-pw{display:flex}
#acp .derr{display:block;margin-bottom:8px}
.drowpanel{display:flex;align-items:center;gap:16px;padding:16px 20px;flex-wrap:wrap}
.drowpanel>*{margin:0!important}
.drowpanel>div{flex:1;min-width:220px}
.drowpanel h2{margin:0;font-size:var(--fs-md);font-weight:650}
.dsyncrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dsyncrow .dhelp{flex:1;min-width:200px;margin:0}
.dbadge{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 10px;border-radius:999px;font-size:var(--fs-sm);font-weight:600;background:var(--panel2);color:var(--ink2)}
.dbadge i{width:8px;height:8px;border-radius:50%;background:currentColor}
.dbadge[data-sync=synced]{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.dbadge[data-sync=syncing]{background:var(--tint);color:var(--accent-tx)}
.dbadge[data-sync=offline]{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.dbadge[data-sync=error]{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.dpanel .dbtns{margin:0 20px 12px}
/* theme picker */
.dthemes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dthemes button{display:flex;flex-direction:column;gap:10px;padding:10px 10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);color:var(--ink);font-weight:600;text-align:left;cursor:pointer}
.dthemes button:hover{border-color:color-mix(in srgb,var(--accent-tx) 50%,var(--line))}
.dthemes button[aria-pressed=true]{border-color:var(--accent-tx);box-shadow:inset 0 0 0 1px var(--accent-tx)}
.dthp{height:84px;border-radius:var(--r);border:1px solid #dce2ea;background:#f3f5f8;display:grid;grid-template-columns:30% 1fr;overflow:hidden}
.dthp i:first-child{background:#ffffff;border-right:1px solid #dce2ea}
.dthp i:last-child{margin:12px;border-radius:5px;background:#ffffff;border:1px solid #dce2ea;box-shadow:inset 0 9px 0 -1px #0f2747}
.dthp.dark{background:#0b1424;border-color:#26384f}
.dthp.dark i:first-child{background:#101b2d;border-color:#26384f}
.dthp.dark i:last-child{background:#16233a;border-color:#26384f;box-shadow:inset 0 9px 0 -1px #e8eef6}
.dthp.system{background:linear-gradient(90deg,#f3f5f8 50%,#0b1424 50%)}
.dthp.system i:first-child{background:#ffffff}
.dthp.system i:last-child{background:#16233a;border-color:#26384f;box-shadow:inset 0 9px 0 -1px #e8eef6}
@media (max-width:760px){.dsnav{flex-basis:100%;flex-direction:row;overflow-x:auto;position:static}.dsnav button{flex:none}.drow2{grid-template-columns:minmax(0,1fr)}.dthemes{grid-template-columns:minmax(0,1fr)}}
.dpanel>:first-child:not(.dphd){margin-top:18px}

/* ===== Phase 6 design mock: Approvals ===== */
.dnav em.hot{background:var(--accent);color:var(--accent-ink)}
.amock{margin:0 0 14px;padding:8px 12px;border:1px dashed var(--line);border-radius:var(--r);color:var(--ink3);font-size:var(--fs-sm);background:var(--panel2)}
.astats{grid-template-columns:repeat(4,minmax(0,1fr));flex:none;width:100%;margin:0 0 18px}
.atools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}.asearch{flex:1 1 260px;max-width:420px}
.achips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.achips button{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink2);font-size:var(--fs-sm);cursor:pointer}
.achips button:hover{background:var(--panel2);color:var(--ink)}.achips button[aria-pressed=true]{background:var(--tint2);border-color:transparent;color:var(--accent-tx);font-weight:600}
.achips em{font-style:normal;font-size:11.5px;color:var(--ink3)}
.apill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px 3px 8px;white-space:nowrap;background:color-mix(in srgb,var(--ink3) 14%,transparent);color:var(--ink2)}
.apill i{width:8px;height:8px;border-radius:50%;background:currentColor}
.apill.pending{background:var(--tint2);color:var(--accent-tx)}
.apill.approved{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.apill.changes{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.apill.expired{background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}
.apill.draft i{background:transparent;box-shadow:inset 0 0 0 2px currentColor}.apill.superseded{text-decoration:line-through;text-decoration-color:color-mix(in srgb,currentColor 50%,transparent)}
.atable{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--soft)}
.arow{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(150px,1.3fr) 112px 160px minmax(170px,1.4fr);gap:14px;align-items:center;width:100%;padding:12px 16px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.arow:first-child{border-top:0}.arow:hover:not(.ahead){background:var(--panel2)}.arow:focus-visible{outline:none;box-shadow:inset var(--ring)}
.ahead{cursor:default;color:var(--ink3);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:10px 16px;background:var(--panel2)}
.arow small{display:block;color:var(--ink3);font-size:var(--fs-xs);margin-top:1px}.arow b{font-weight:600}.acust b,.aproj b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acust small{overflow:hidden;text-overflow:ellipsis}
.adate,.aact{color:var(--ink2);font-size:var(--fs-sm)}
.adet .adh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.adet h2{margin:0 0 2px}
.afb{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 9%,transparent);border-radius:var(--r);padding:10px 14px;margin:0 0 14px}.afb p{margin:4px 0 0}
.atl{list-style:none;margin:0 0 16px;padding:0}.atl li{display:flex;gap:12px;position:relative;padding:0 0 14px}
.atl li::before{content:"";position:absolute;left:5px;top:14px;bottom:-2px;width:2px;background:var(--line)}.atl li:last-child::before{display:none}
.atl i{flex:none;width:12px;height:12px;margin-top:4px;border-radius:50%;background:var(--panel);border:2px solid var(--ink3)}
.atl li:first-child i{background:var(--accent);border-color:var(--accent)}.atl li.approved i{background:var(--ok);border-color:var(--ok)}.atl li.changes i{background:var(--warn);border-color:var(--warn)}
.atl b{font-weight:600;font-size:var(--fs)}.atl p{margin:2px 0;color:var(--ink2);font-size:var(--fs-sm)}.atl small{color:var(--ink3);font-size:var(--fs-xs)}
.alink{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--line);background:var(--panel2);border-radius:var(--r);padding:8px 8px 8px 12px;margin:6px 0 8px}
.alink span{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink2)}.alink code{font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.dm-card.apr-wide{width:min(920px,100%)}
.apr-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:26px}
.apr-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.apr-form textarea{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--ink);font:inherit;font-size:var(--fs);resize:vertical;width:100%}
.apr-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}.apr-form .df input[readonly]{background:var(--panel2)}
.apr-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:var(--r);background:var(--tint);color:var(--ink2);font-size:var(--fs-sm);line-height:1.45}.apr-note .i{flex:none;width:18px;height:18px;color:var(--accent-tx)}
.apr-prev{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}.apr-pt{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:var(--fs-sm)}.apr-pt span{color:var(--ink3);font-size:var(--fs-xs)}
.apdf{background:#fff;color:#0f1b2d;border-radius:6px;box-shadow:var(--soft);aspect-ratio:8.5/11;display:flex;flex-direction:column;padding:14px;gap:10px;overflow:hidden}
.apdf-hd{display:flex;flex-direction:column;border-bottom:2px solid #0f2747;padding-bottom:8px}.apdf-logo{font-weight:700;letter-spacing:.02em;font-size:15px;color:#0f2747}.apdf-hd small{color:#6b7a90;font-size:10px}
.apdf-img{flex:1;min-height:0;background:#e9eef5;border-radius:4px;display:grid;place-items:center;overflow:hidden;color:#6b7a90}.apdf-img img{width:100%;height:100%;object-fit:cover}
.apdf-t b{display:block;font-size:15px}.apdf-t small{color:#4a5a70;font-size:10.5px}.apdf-ft{display:flex;justify-content:space-between;color:#8b97a8;font-size:9.5px;border-top:1px solid #dde3ea;padding-top:6px}
.adone{text-align:center;padding:6px 4px}.adone .alink{text-align:left}.adone-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);margin-bottom:8px}.adone-ic .i{width:28px;height:28px}
.adone .dm-actions{justify-content:center}
@media (max-width:900px){.apr-grid{grid-template-columns:1fr}.apr-prev{display:none}.astats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ahead{display:none}.arow{grid-template-columns:1fr auto;gap:6px 12px}.arow .adate,.arow .aact{grid-column:1/-1}.arow .adate::before,.arow .aact::before{content:attr(data-l) ": ";color:var(--ink3)}.arow .aproj{grid-column:1}.arow>span:nth-child(4){grid-column:2;grid-row:1}}
@media (max-width:520px){.apr-two{grid-template-columns:1fr}}

@media (max-width:1620px){#bUpload span{display:none}}
@media (max-width:1500px){#bApprove span{display:none}#bApprove{padding:0 10px}}
@media (max-width:1100px){#bHome span{display:none}#bHome{padding:0 8px}}

/* HVAC Design Pro logo */
.blogo{display:inline-flex;align-items:center}.blogo img{display:block;height:auto;width:100%}.blogo .bl-d{display:none}
:root[data-theme="dark"] .blogo .bl-l{display:none}:root[data-theme="dark"] .blogo .bl-d{display:block}
.dbrand .blogo{width:172px;margin:2px 0 0 4px}.au-brand .blogo{width:210px}.au-brand:has(.blogo){margin-bottom:22px}

/* Administrator page: built from the same pieces as Approvals (stat tiles, chips, list rows, status pills) */
.adm-mode{margin:0 0 18px}.adm-mode h2{margin:0 0 4px}.adm-mode p{margin:0}
.adm-create{margin:0 0 14px}.adm-create .dphd h2{margin:0 0 2px}.adm-create .dphd{margin-bottom:12px}
.adm-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.adm-form .df{flex:0 1 190px;min-width:150px;margin:0}.adm-form .adm-note-f{flex:1 1 240px}
.adm-new{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 14px;border:1px solid var(--tint2);border-radius:var(--r-lg);background:var(--tint)}
.adm-new>span{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-tx)}
.adm-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;letter-spacing:.03em;user-select:all;color:var(--ink)}
.adm-list{overflow:hidden}.adm-empty{padding:34px 16px}
.adr{cursor:default}.adr:hover:not(.ahead){background:var(--panel2)}
.adr-inv{grid-template-columns:minmax(200px,1.4fr) 110px 100px 110px minmax(100px,1fr) 150px}
.adr-usr{grid-template-columns:minmax(200px,1.5fr) 150px 140px 110px 150px}
.adm-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.adm-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-by{overflow-wrap:anywhere}.adm-act{display:flex;gap:8px;justify-content:flex-end}
@media (max-width:1240px){.adr.ahead{display:none}.adr-inv,.adr-usr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}.adr .adm-main{flex:1 1 100%}.adr .adm-by{flex:0 1 auto}.adr .adm-act{flex:1 1 auto;justify-content:flex-end}}