/* MY DAY GLASS(tm) - styles - (c) 2026 BG Latitude LLC - bglatitude.net */
/* ============ tone-on-tone color fields ============ */
:root{
  --field-a:#F07F1A; --field-b:#C95E04; --field-c:#A34A03;   /* rich puffer orange */
  --deep:#8A3D06;                                            /* nav / dark pill tone */
  --deep-soft:rgba(90,42,5,0.35);
  --accent:#E8611C;                                          /* used inside white popups */
  --glass:rgba(255,255,255,0.07);
  --glass-strong:rgba(255,255,255,0.12);
  --glass-border:rgba(255,255,255,0.32);
  --hairline:rgba(255,255,255,0.22);
  --ink:#FFFFFF;
  --ink-soft:rgba(255,255,255,0.72);
  --card:#FFFFFF; --card-ink:#20160C; --card-soft:#8A7A6B; --card-line:#EDE4DA;
  --shadow:0 18px 50px rgba(60,25,0,0.28), 0 2px 10px rgba(60,25,0,0.15);
  --radius:22px;
}
body[data-theme="green"]{
  --field-a:#2F9457; --field-b:#1E6E3D; --field-c:#155530;
  --deep:#0F4526; --deep-soft:rgba(8,48,25,0.35);
  --accent:#2E7D4F;
  --card-ink:#0E1F15; --card-soft:#6E8377; --card-line:#DFEAE2;
  --shadow:0 18px 50px rgba(0,40,18,0.3), 0 2px 10px rgba(0,40,18,0.16);
}
body[data-theme="pink"]{
  --field-a:#F06AA8; --field-b:#C6437E; --field-c:#9C2F60;
  --deep:#7E2450; --deep-soft:rgba(96,20,55,0.38);
  --accent:#E05590;
  --shadow:0 18px 50px rgba(90,15,50,0.3), 0 2px 10px rgba(90,15,50,0.16);
}
body[data-theme="black"]{
  --field-a:#4A4A52; --field-b:#2A2A30; --field-c:#161619;
  --deep:#0D0D10; --deep-soft:rgba(0,0,0,0.5);
  --accent:#3A3A42;
  --shadow:0 18px 50px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.3);
}
body[data-theme="red"]{
  --field-a:#E04848; --field-b:#B22B2B; --field-c:#8C1E1E;
  --deep:#701616; --deep-soft:rgba(90,10,10,0.4);
  --accent:#D63A3A;
  --shadow:0 18px 50px rgba(80,8,8,0.32), 0 2px 10px rgba(80,8,8,0.18);
}
body[data-theme="blue"]{
  --field-a:#3568E0; --field-b:#2247AC; --field-c:#183683;
  --deep:#122C6B; --deep-soft:rgba(10,26,66,0.38);
  --accent:#2456D6;
  --card-ink:#0D1530; --card-soft:#6F7A99; --card-line:#E0E5F2;
  --shadow:0 18px 50px rgba(5,20,70,0.3), 0 2px 10px rgba(5,20,70,0.16);
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Poppins',system-ui,sans-serif; font-weight:400;
  color:var(--ink); overflow:hidden;
  background:radial-gradient(120% 130% at 50% 8%, var(--field-a) 0%, var(--field-b) 58%, var(--field-c) 100%);
  transition:background .6s;
}
#wave3d{position:fixed; inset:0; z-index:0; pointer-events:none;}
.eyebrow{
  font-weight:600; font-size:0.76rem; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ico{width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* ============ GATE — glass card over the field ============ */
#gate{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; gap:48px; padding:0 5vw; z-index:50;}
@keyframes gate-dock{from{transform:translateX(24vw);}to{transform:translateX(0);}}
#gate .gate-card{animation:gate-dock 1s cubic-bezier(.4,.1,.25,1) .5s both;}
#gate-demo{
  flex:1; max-width:640px; display:flex; flex-direction:column; gap:14px; position:relative; z-index:2;
  opacity:0; animation:gd-in 1s ease 1.2s forwards;
}
@keyframes gd-in{to{opacity:1;}}
#gd-line{
  font-size:clamp(1.6rem,3vw,2.6rem); font-weight:800; text-transform:uppercase;
  line-height:1.14; letter-spacing:0.045em;
  background:linear-gradient(180deg,#FFFFFF 30%, rgba(255,255,255,0.72));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 14px rgba(40,15,0,0.35));
}
#gd-stage{position:relative; height:220px; perspective:1100px;}
#gd-stage.flipping{animation:face-turn .6s cubic-bezier(.4,.1,.3,1);}
@keyframes film-turn{
  0%{transform:rotateX(0) scale(1);}
  45%{transform:rotateX(86deg) scale(0.965) translateY(-6px); filter:brightness(1.35);}
  100%{transform:rotateX(0) scale(1); filter:brightness(1);}
}
#gd-stage.cine{animation:film-turn 1.7s cubic-bezier(.45,.05,.3,1);}
.gd-face{
  position:absolute; inset:0; display:none; border-radius:20px; overflow:hidden;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); box-shadow:var(--shadow);
}
.gd-face.gd-on{display:block;}
#gd-hours{position:absolute; top:10px; left:0; right:0; height:16px;}
#gd-hours span{position:absolute; font-size:0.58rem; letter-spacing:0.12em; color:var(--ink-soft); transform:translateX(-50%);}
#gd-track{position:absolute; inset:34px 0 10px 0;}
.gd-tick{position:absolute; top:0; bottom:0; width:1px; background:var(--hairline);}
.gd-mod{
  position:absolute; height:56px; border-radius:12px; padding:7px 11px; overflow:hidden;
  background:linear-gradient(155deg, color-mix(in srgb, var(--hc,#fff) 50%, rgba(255,255,255,0.12)), color-mix(in srgb, var(--hc,#fff) 24%, rgba(255,255,255,0.04)));
  border:1px solid var(--glass-border); border-top:3px solid var(--hc,#fff);
  box-shadow:0 8px 22px var(--deep-soft);
}
.gd-mod b{font-size:0.78rem; font-weight:600; display:block;}
.gd-mod small{font-size:0.6rem; color:var(--ink-soft);}
.gd-mod.landing{animation:gd-land .45s ease;}
@keyframes gd-land{0%{transform:translateY(-26px); opacity:0;}100%{transform:none; opacity:1;}}
#gd-fsvg{position:absolute; inset:0; width:100%; height:100%;}
#gd-fsvg path{stroke:rgba(255,255,255,0.85); stroke-width:2; fill:none; filter:drop-shadow(0 0 5px rgba(255,255,255,0.4));}
#gd-fnodes{position:absolute; inset:0;}
.gd-fnode{
  position:absolute; width:130px; border-radius:11px; padding:8px 11px;
  background:linear-gradient(155deg, color-mix(in srgb, var(--hc,#fff) 50%, rgba(255,255,255,0.12)), color-mix(in srgb, var(--hc,#fff) 24%, rgba(255,255,255,0.04)));
  border:1px solid var(--glass-border); border-left:4px solid var(--hc,#fff);
  box-shadow:0 8px 22px var(--deep-soft); font-size:0.74rem; font-weight:600;
}
.gd-fnode small{display:block; font-weight:400; font-size:0.6rem; color:var(--ink-soft);}
#gd-cursor{
  position:absolute; z-index:9; font-size:1.15rem; color:#fff; text-shadow:0 0 12px rgba(255,255,255,0.9);
  transition:transform .85s cubic-bezier(.45,.1,.25,1), opacity .4s; pointer-events:none; opacity:0; top:0; left:0;
}
#gd-bank{display:flex; gap:10px;}
.gd-bmod{
  flex:0 0 auto; padding:9px 16px; border-radius:12px; cursor:grab; user-select:none; touch-action:none;
  background:var(--glass); border:1px solid var(--glass-border); border-left:5px solid var(--hc,#fff);
  backdrop-filter:blur(10px); box-shadow:0 6px 16px var(--deep-soft); font-size:0.78rem; font-weight:600;
}
.gd-bmod small{display:block; font-weight:400; font-size:0.6rem; color:var(--ink-soft);}
.gd-bmod.lift{transform:translateY(-5px) scale(1.05); box-shadow:0 12px 26px var(--deep-soft);}
#gd-hint{font-size:0.72rem; color:var(--ink-soft); letter-spacing:0.04em;}
.gd-drag-clone{position:fixed; z-index:60; pointer-events:none; opacity:0.92;}
@media(max-width:900px){
  #gate{flex-direction:column; gap:18px; overflow-y:auto; padding:20px 5vw;}
  #gate .gate-card{animation:none;}
  #gd-stage{height:180px;}
}

.gate-card{
  width:min(460px,92vw); padding:56px 48px; text-align:center; position:relative; z-index:2;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:30px; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:var(--shadow);
}
.gate-card h1{font-size:2.5rem; font-weight:600; letter-spacing:0.1em;}
.gate-card .tag{margin:16px 0 34px; color:var(--ink-soft); font-size:0.88rem; line-height:1.75; font-weight:300;}
.gate-card input{
  width:100%; padding:15px 20px; border-radius:999px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.14); color:var(--ink); font-size:0.92rem; outline:none;
  font-family:inherit; font-weight:300; transition:border-color .2s;
}
.gate-card input:focus{border-color:rgba(255,255,255,0.8);}
.gate-card input::placeholder{color:rgba(255,255,255,0.55);}
.gate-card button{
  margin-top:14px; width:100%; padding:15px; border:none; border-radius:999px;
  background:#fff; color:var(--deep); font-weight:600; font-size:0.82rem;
  letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; font-family:inherit;
  transition:transform .15s, box-shadow .2s;
}
.gate-card button:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(255,255,255,0.25);}
.beta-pill{
  display:inline-block; font-size:0.55rem; letter-spacing:0.28em; font-weight:600;
  padding:6px 13px 5px; border-radius:999px; border:1px solid rgba(255,255,255,0.55);
  background:rgba(255,255,255,0.12); vertical-align:middle; margin-left:12px; transform:translateY(-6px);
}
.gate-foot{margin-top:38px; font-size:0.6rem; letter-spacing:0.18em; color:var(--ink-soft); font-weight:600; text-transform:uppercase;}

/* ============ APP ============ */
#app{display:none; height:100vh; padding:16px; flex-direction:column; gap:14px; position:relative; z-index:1;}
#app.on{display:flex;}
/* header = deep-tone rounded nav like the reference */
header.bar{
  display:flex; align-items:center; gap:14px; padding:10px 16px 10px 12px;
  border-radius:999px; box-shadow:var(--shadow);
  background:linear-gradient(110deg, var(--deep) 0%, var(--field-b) 30%, var(--deep) 55%, var(--field-c) 80%, var(--deep) 100%);
  background-size:240% 100%;
  animation:bar-drift 16s ease-in-out infinite alternate;
  position:relative; overflow:hidden; cursor:pointer;
  max-width:2200px; transition:max-width .55s cubic-bezier(.4,0,.2,1);
}
header.bar::after{ /* iridescent sheen pass */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.14) 42%, rgba(190,220,255,0.1) 50%, transparent 68%);
  background-size:260% 100%;
  animation:bar-sheen 9s linear infinite;
}
@keyframes bar-drift{from{background-position:0% 0;}to{background-position:100% 0;}}
@keyframes bar-sheen{from{background-position:200% 0;}to{background-position:-60% 0;}}
header.bar.compact{max-width:560px;}
header.bar.compact .collapsible{display:none;}
@media (prefers-reduced-motion: reduce){header.bar,header.bar::after{animation:none;}}
.logo-mark{
  min-width:36px; padding:0 8px; height:36px; border-radius:10px; background:#fff; color:var(--deep);
  font-weight:700; font-size:0.82rem; display:flex; align-items:center; justify-content:center;
  letter-spacing:0.02em;
}
header.bar h1{font-size:1rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;}
#clock{font-weight:600; font-size:1.35rem; cursor:pointer; border-bottom:1px dashed rgba(255,255,255,0.4); margin-left:auto; letter-spacing:0.04em; padding-right:10px;}
.icon-btn{
  border:none; background:transparent; color:rgba(255,255,255,0.85);
  padding:10px 18px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:500; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px; transition:all .2s;
}
.icon-btn:hover{background:rgba(255,255,255,0.12); color:#fff;}
.icon-btn.active{background:#fff; color:var(--deep);}
.theme-dots{display:flex; gap:8px; align-items:center; padding:0 8px;}
#vol{-webkit-appearance:none; appearance:none; width:96px; height:4px; border-radius:99px; background:rgba(255,255,255,0.35); outline:none; cursor:pointer;}
#vol::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:#fff; border:none; box-shadow:0 1px 4px rgba(0,0,0,0.3);}
#vol::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:#fff; border:none;}
.theme-dot{width:19px; height:19px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,0.35); transition:transform .15s, border-color .2s;}
.theme-dot:hover{transform:scale(1.15);}
.theme-dot.sel{border-color:#fff;}
.theme-dot.t-orange{background:linear-gradient(135deg,#F07F1A,#C95E04);}
.theme-dot.t-green{background:linear-gradient(135deg,#2F9457,#1E6E3D);}
.theme-dot.t-blue{background:linear-gradient(135deg,#3568E0,#2247AC);}
.theme-dot.t-pink{background:linear-gradient(135deg,#F06AA8,#C6437E);}
.theme-dot.t-black{background:linear-gradient(135deg,#4A4A52,#161619);}
.theme-dot.t-red{background:linear-gradient(135deg,#E04848,#B22B2B);}

#ticker{
  align-self:center; display:flex; align-items:center; gap:10px;
  padding:9px 22px; border-radius:999px; cursor:pointer; max-width:92%;
  background:linear-gradient(160deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  font-size:0.92rem; font-weight:500; white-space:nowrap;
}
#ticker span{overflow:hidden; text-overflow:ellipsis;}
.tk-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.tk-live{background:#7BF2A8; box-shadow:0 0 10px #7BF2A8; animation:tk-pulse 2.4s ease-in-out infinite;}
.tk-up{background:rgba(255,255,255,0.7);}
.tk-sep{opacity:0.5; padding:0 4px;}
@keyframes tk-pulse{0%,100%{opacity:1;}50%{opacity:0.45;}}
main{flex:1; display:grid; grid-template-columns:1fr 290px 300px; grid-template-rows:1fr 258px; gap:14px; min-height:0; align-content:start;}
.pane.collapsed{min-height:52px; max-height:52px; align-self:start;}
.pane.collapsed > *:not(.pane-head){display:none !important;}
.pane.collapsed .pane-head{padding-bottom:14px;}
.collapse-btn svg{transition:transform .3s;}
.pane.collapsed .collapse-btn svg{transform:rotate(180deg);}
/* glass windows over the field */
.pane{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:0; overflow:hidden;
  position:relative;
}
.pane-head{display:flex; align-items:center; padding:14px 22px 10px; gap:12px; cursor:default;}
.pane-head .eyebrow{flex:1;}
.win-btn{
  width:26px; height:26px; border-radius:9px; border:1px solid var(--hairline); background:rgba(255,255,255,0.08);
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  transition:all .2s; flex-shrink:0;
}
.win-btn:hover{border-color:#fff; color:#fff;}
.win-btn svg{width:12px; height:12px; stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round;}
.pane.float{
  position:fixed; z-index:40; resize:both; overflow:hidden;
  min-width:320px; min-height:220px;
  box-shadow:0 34px 90px var(--deep-soft), 0 6px 20px rgba(0,0,0,0.18);
}
.pane.float .pane-head{cursor:grab; background:rgba(255,255,255,0.1); border-bottom:1px solid var(--hairline);}
#closeup{grid-column:1; grid-row:1;}
#queue{grid-column:2; grid-row:1;}
#bank{grid-column:3; grid-row:1;}
#dayline{grid-column:1/4; grid-row:2;}
/* --- action-based task queue --- */
#q-list{flex:1; overflow-y:auto; padding:2px 14px 16px; display:flex; flex-direction:column; gap:9px;}
#q-list::-webkit-scrollbar{width:5px;}
#q-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3); border-radius:3px;}
.q-card{
  border-radius:15px; padding:12px 14px; position:relative;
  background:linear-gradient(155deg, color-mix(in srgb, var(--hc,#fff) 45%, rgba(255,255,255,0.08)), color-mix(in srgb, var(--hc,#fff) 20%, rgba(255,255,255,0.03)));
  border:1px solid var(--glass-border); border-left:6px solid var(--hc,#fff);
}
.q-card .q-title{font-weight:600; font-size:0.95rem;}
.q-card .q-time{font-size:0.74rem; color:var(--ink-soft); margin-top:2px;}
.q-card.q-current{box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 10px 30px rgba(255,255,255,0.25);}
.q-card.q-current .q-title{font-size:1.05rem;}
.q-tag{position:absolute; right:12px; top:10px; font-weight:700; font-size:0.56rem; letter-spacing:0.2em; color:var(--ink-soft); text-transform:uppercase;}
/* --- state-flip: the card turns over to reveal its next face --- */
.q-card{perspective:700px;}
.q-card .q-flip{transform-style:preserve-3d; transition:none;}
.q-card.flipping .q-flip{animation:q-turn .5s cubic-bezier(.4,.1,.3,1);}
@keyframes q-turn{
  0%{transform:rotateX(0deg);}
  50%{transform:rotateX(90deg); filter:brightness(1.35);}
  100%{transform:rotateX(0deg);}
}
.q-batt{height:5px; border-radius:99px; background:rgba(255,255,255,0.25); margin-top:8px; overflow:hidden;}
.q-batt i{display:block; height:100%; border-radius:99px; transition:width 1s linear, background 1s;}
#tk-batt{width:60px; height:5px; border-radius:99px; background:rgba(255,255,255,0.3); overflow:hidden; display:inline-block; vertical-align:middle; margin:0 4px;}
#tk-batt i{display:block; height:100%; border-radius:99px; transition:width 1s linear, background 1s;}
.q-status-btn{
  border:none; border-radius:999px; cursor:pointer; font-family:inherit; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:#1a1f26;
  transition:filter .15s, transform .12s;
}
.q-status-btn:hover{filter:brightness(1.1);}
.q-status-btn:active{transform:scale(0.97);}
.q-status-btn.big{width:100%; margin-top:10px; padding:11px; font-size:0.62rem;}
.q-status-btn.small{position:absolute; right:10px; bottom:10px; padding:5px 12px; font-size:0.5rem;}
.q-card.q-st-working{outline:2px solid #F5B840; outline-offset:2px; box-shadow:0 0 18px rgba(245,184,64,0.3);}
.q-card.q-st-paused{outline:2px solid #9AA7B8; outline-offset:2px; box-shadow:0 0 14px rgba(154,167,184,0.28);}
.q-done-btn{
  margin-top:10px; width:100%; padding:10px; border:none; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--deep); font-family:inherit; font-weight:700;
  font-size:0.64rem; letter-spacing:0.18em; text-transform:uppercase;
}
.q-done-btn:hover{box-shadow:0 4px 14px rgba(255,255,255,0.4);}
.q-card.q-upcoming{opacity:0.65;}
.q-card.q-done{opacity:0.35;}
.q-card.q-done .q-title{text-decoration:line-through;}
.q-count{font-size:0.72rem; color:var(--ink-soft); padding:0 20px 8px; letter-spacing:0.06em;}

/* ============ close-up ============ */
/* ============ THE THREE FACES ============ */
#cu-faces{flex:1; position:relative; min-height:0;}
@keyframes face-turn{0%{transform:rotateX(0);}50%{transform:rotateX(90deg); filter:brightness(1.3);}100%{transform:rotateX(0);}}
.cu-face{position:absolute; inset:0; display:none;}
.cu-face.face-on{display:block;}
#cu-viewport.cu-face{position:absolute; inset:0;}   /* restores the height the flex layout used to give it */
main{perspective:1600px;}
#closeup{transform-style:preserve-3d; will-change:transform;}
#closeup.flipping{animation:face-turn .6s cubic-bezier(.4,.1,.3,1);}
/* ---- face 2 · sequence ---- */
#cu-seq{overflow:hidden;}
#seq-svg,#flow-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
#seq-svg path,#flow-svg path{pointer-events:stroke;}
#seq-nodes,#flow-nodes{position:absolute; inset:0;}
.seq-card{
  position:absolute; border-radius:12px; padding:7px 11px; overflow:hidden; cursor:pointer;
  background:linear-gradient(155deg, color-mix(in srgb, var(--hc,#fff) 50%, rgba(255,255,255,0.1)), color-mix(in srgb, var(--hc,#fff) 24%, rgba(255,255,255,0.03)));
  border:1px solid var(--glass-border); border-top:3px solid var(--hc,#fff);
  box-shadow:0 8px 22px var(--deep-soft);
}
.seq-card .m-title{font-size:0.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.seq-card .m-time{font-size:0.66rem; color:var(--ink-soft); white-space:nowrap;}
.seq-card.done{opacity:0.4;}
.seq-card.live{box-shadow:0 0 0 2px rgba(255,255,255,0.9), 0 8px 26px rgba(255,255,255,0.3);}
.seq-card.clash{border-color:#FF4D4D; box-shadow:0 0 0 2px #FF4D4D, 0 0 22px rgba(255,77,77,0.5);}
.seq-anchor{
  position:absolute; top:26px; bottom:8px; width:0; border-left:2.5px solid rgba(255,255,255,0.75);
  box-shadow:0 0 12px rgba(255,255,255,0.4); pointer-events:none;
}
.seq-anchor .a-flag{
  position:absolute; top:-22px; left:-4px; transform:translateX(-50%);
  background:rgba(255,255,255,0.92); color:var(--deep); font-weight:700; font-size:0.56rem;
  letter-spacing:0.1em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap;
}
#seq-hint{position:absolute; left:0; right:0; bottom:12px; text-align:center; font-size:0.7rem; color:var(--ink-soft); pointer-events:none;}
#seq-nowline{position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 14px rgba(255,255,255,0.8); z-index:5;}
/* ---- face 3 · flow ---- */
#cu-flow{overflow:hidden; cursor:grab;}
#cu-flow:active{cursor:grabbing;}
#flow-hint{position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:0.68rem; color:var(--ink-soft); pointer-events:none;}
.flow-node{
  position:absolute; width:172px; border-radius:13px; padding:9px 12px; cursor:grab; user-select:none;
  background:linear-gradient(155deg, color-mix(in srgb, var(--hc,#fff) 50%, rgba(255,255,255,0.1)), color-mix(in srgb, var(--hc,#fff) 24%, rgba(255,255,255,0.03)));
  border:1px solid var(--glass-border); border-left:5px solid var(--hc,#fff);
  box-shadow:0 8px 22px var(--deep-soft);
}
.flow-node .m-title{font-size:0.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.flow-node .m-time{font-size:0.64rem; color:var(--ink-soft);}
.flow-node.done{opacity:0.45;}
.flow-node .fdot{
  position:absolute; top:50%; width:14px; height:14px; border-radius:50%; transform:translateY(-50%);
  background:#fff; border:2px solid var(--hc,#fff); cursor:crosshair; z-index:4;
}
.flow-node .fdot.out{right:-8px;}
.flow-node .fdot.in{left:-8px; background:color-mix(in srgb, var(--hc,#fff) 60%, #fff);}
#flow-svg path.thread{stroke:rgba(255,255,255,0.85); stroke-width:2.5; fill:none; filter:drop-shadow(0 0 6px rgba(255,255,255,0.4)); cursor:pointer;}
#flow-svg path.temp{stroke:rgba(255,255,255,0.6); stroke-dasharray:6 5; stroke-width:2; fill:none;}
/* ---- print panel ---- */
#arch-door{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:rgba(10,5,2,0.6); backdrop-filter:blur(12px);}
#arch-door .ad-card{display:flex; flex-direction:column; gap:10px; width:250px;}
#arch-door input{
  padding:12px 14px; border-radius:12px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.12); color:var(--ink); font-family:inherit; font-size:0.9rem; outline:none;
}
#arch-door button{
  padding:10px; border:none; border-radius:999px; background:rgba(255,255,255,0.9); color:var(--deep);
  font-family:inherit; font-weight:700; cursor:pointer;
}
#exit-veil{position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; background:rgba(20,10,4,0.55); backdrop-filter:blur(10px);}
#exit-veil .pp-card{width:380px;}
#reboot-veil{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(20,10,4,0.55); backdrop-filter:blur(10px);}
#reboot-veil .pp-card{width:380px;}
#acct-panel{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px);}
#acct-panel .pp-card{width:360px;}
#print-panel{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px);}
.pp-card{
  width:400px; max-height:80vh; overflow-y:auto; padding:24px; border-radius:22px;
  background:linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
  border:1px solid var(--glass-border); backdrop-filter:blur(22px); box-shadow:var(--shadow);
}
.pp-brand{display:flex; flex-direction:column; gap:7px; margin-bottom:12px;}
.pp-brand input{
  border:1px solid var(--glass-border); background:rgba(255,255,255,0.14); border-radius:10px;
  color:var(--ink); padding:9px 12px; font-family:inherit; font-size:0.84rem; outline:none;
}
.pp-brand input::placeholder{color:rgba(255,255,255,0.55);}
#pp-list{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.pp-row{display:flex; align-items:center; gap:10px; font-size:0.85rem; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,0.1);}
.pp-row i{width:12px; height:12px; border-radius:4px; display:inline-block; flex-shrink:0;}
.pp-row .t{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pp-row .tm{font-size:0.7rem; color:var(--ink-soft);}
.pp-opts{display:flex; flex-wrap:wrap; gap:10px 16px; font-size:0.8rem;}
.pp-opts input[type=number]{border:1px solid var(--glass-border); background:rgba(255,255,255,0.14); border-radius:8px; color:var(--ink); padding:4px 6px; font-family:inherit;}
.pp-btn{
  flex:1; padding:11px; border:1px solid var(--glass-border); border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,0.12); color:var(--ink); font-family:inherit; font-weight:700;
  font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase;
}
.pp-btn.pp-primary{background:#fff; color:var(--deep); border:none;}
#cu-viewport{flex:1; position:relative; overflow:hidden;}
#cu-track{position:absolute; top:0; bottom:0; left:0; will-change:transform;}
.cu-hour{position:absolute; top:0; bottom:0; border-left:1px solid rgba(255,255,255,0.18);}
.cu-hour label{
  position:absolute; top:10px; left:12px; font-weight:600;
  font-size:0.78rem; letter-spacing:0.16em; color:var(--ink-soft); text-transform:uppercase;
}
.cu-quarter{position:absolute; top:38px; bottom:0; border-left:1px dashed rgba(255,255,255,0.07);}
#playhead{
  position:absolute; top:0; bottom:0; width:2px; background:#fff; z-index:8;
  box-shadow:0 0 16px rgba(255,255,255,0.7);
}
#playhead::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#fff;
}
.mod{
  position:absolute; height:72px; border-radius:15px; padding:10px 14px 9px 20px;
  background:linear-gradient(155deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
  border:1px solid var(--glass-border); border-top:4px solid var(--hc,#fff);
  backdrop-filter:blur(8px);
  box-shadow:0 10px 26px var(--deep-soft); cursor:grab; user-select:none;
}
.mod.now{border-color:#fff; border-top-color:var(--hc,#fff); box-shadow:0 0 0 1.5px rgba(255,255,255,0.85), 0 10px 32px rgba(255,255,255,0.28);}
.mod{ /* full-body tint at ~50% of the task color; older browsers keep the glass gradient above */
  background:linear-gradient(155deg,
    color-mix(in srgb, var(--hc,#fff) 52%, rgba(255,255,255,0.10)),
    color-mix(in srgb, var(--hc,#fff) 26%, rgba(255,255,255,0.03)));
}
.mod .m-tag{position:absolute; top:-24px; left:-2px; z-index:6; pointer-events:none;
  background:var(--hc,#fff); color:rgba(20,20,26,0.9); font-weight:700; font-size:0.68rem;
  padding:2px 9px; border-radius:999px; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,0.3);}
.mod.tiny .m-info,.mod.tiny .m-title-r,.mod.tiny .m-title-c,.mod.tiny .st-chip{display:none;}
.mod.sel{outline:2.5px solid rgba(255,255,255,0.95); outline-offset:2px; box-shadow:0 0 26px rgba(255,255,255,0.45) !important;}
#selbox{position:absolute; display:none; z-index:9; pointer-events:none; border-radius:8px;
  border:1.5px dashed rgba(255,255,255,0.85); background:rgba(255,255,255,0.12);}
.mod .hbar{position:absolute; left:0; top:-4px; bottom:0; width:7px; border-radius:15px 0 0 15px; background:var(--hc,#fff); z-index:2; box-shadow:1px 0 6px rgba(0,0,0,0.15);}
.mod .hbar-r{position:absolute; right:0; top:-4px; bottom:0; width:7px; border-radius:0 15px 15px 0; background:var(--hc,#fff); z-index:2; box-shadow:-1px 0 6px rgba(0,0,0,0.15);}
.mod .m-title-c{display:none; position:absolute; top:10px; left:0; font-weight:600; font-size:0.95rem;
  opacity:0.92; pointer-events:none; white-space:nowrap; text-align:center;
  text-shadow:0 1px 8px var(--deep-soft); will-change:transform;}
.mod .m-title-c .m-time{text-align:center;}
.mod .m-title-r{position:absolute; right:68px; top:11px; font-size:0.85rem; font-weight:600; opacity:0.9; max-width:38%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;}
.mod .m-info{display:inline-block; will-change:transform; max-width:calc(100% - 60px);}
.mod .m-title{font-size:0.98rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mod .m-time{font-size:0.8rem; color:var(--ink-soft); margin-top:3px; letter-spacing:0.05em; white-space:nowrap;}
.mod .m-ico{position:absolute; right:14px; top:12px; color:#fff; opacity:.95;}
.mod .st-chip{
  position:absolute; right:44px; top:14px; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.9); cursor:pointer; z-index:4;
  box-shadow:0 1px 5px rgba(0,0,0,0.25); transition:transform .15s;
}
.mod .st-chip:hover{transform:scale(1.25);}
.mod.done{opacity:0.42; filter:saturate(0.55);}
.mod.done .m-title,.mod.done .m-title-r{text-decoration:line-through; text-decoration-thickness:1.5px;}
.dl-mod.done{opacity:0.38; filter:saturate(0.5);}
.mod .grip{position:absolute; top:0; bottom:0; width:11px; cursor:ew-resize; z-index:3;}
.mod .grip.l{left:0; border-radius:15px 0 0 15px;}
.mod .grip.r{right:0; border-radius:0 15px 15px 0;}
.mod .grip::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%); width:3px; height:18px;
  border-radius:2px; background:rgba(255,255,255,0.55); opacity:0; transition:opacity .15s;
}
.mod .grip.l::after{left:4px;} .mod .grip.r::after{right:4px;}
.mod:hover .grip::after{opacity:1;}

/* ============ bank ============ */
#bank-list{flex:1; overflow-y:auto; padding:2px 16px 18px; display:flex; flex-direction:column; gap:8px;}
#bank-list::-webkit-scrollbar{width:5px;}
#bank-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3); border-radius:3px;}
.bank-mod{
  position:relative; border-radius:13px; padding:8px 12px 8px 14px;
  background:rgba(255,255,255,0.07); border:1px solid var(--hairline);
  border-left:5px solid var(--hc,#fff);
  cursor:grab; display:flex; align-items:center; gap:12px;
  transition:transform .15s, background .2s;
}
.bank-mod:hover{transform:translateX(-4px); background:rgba(255,255,255,0.16);}
.bank-mod .b-ring{
  width:33px; height:33px; border-radius:50%; background:#fff; color:var(--deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.bank-mod .b-ring .ico{width:16px;height:16px;}
.bank-mod .b-name{font-size:0.95rem; font-weight:600;}
.bank-mod .b-dur{font-size:0.74rem; color:var(--ink-soft); letter-spacing:0.14em; margin-top:1px; font-weight:600;}
.bank-hint{font-size:0.8rem; color:var(--ink-soft); padding:0 22px 12px; line-height:1.65; font-weight:300;}

/* ============ full day 3D ============ */
#dl-stage{flex:1; position:relative; margin:14px 20px 14px; perspective:1000px; perspective-origin:50% 0%;}
#dl-plane{position:absolute; inset:0; transform-style:preserve-3d; transform-origin:50% 60%; will-change:transform;}
#dl-base{
  position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  border:1px solid var(--glass-border);
  box-shadow:0 36px 70px var(--deep-soft);
}
.dl-hour{position:absolute; top:0; bottom:0; border-left:1px solid rgba(255,255,255,0.12);}
.dl-hour label{position:absolute; bottom:6px; left:7px; font-size:0.8rem; color:var(--ink-soft); font-weight:600; letter-spacing:0.14em;}
#dl-lanes{position:absolute; inset:0; transform-style:preserve-3d;}
#dl-ruler{position:absolute; left:0; right:0; bottom:0; height:24px; pointer-events:none; z-index:12;}
#dl-ruler .rl{
  position:absolute; bottom:0; transform:translateX(-50%);
  font-weight:600; font-size:0.78rem; letter-spacing:0.1em; color:var(--ink);
  text-shadow:0 1px 6px var(--deep-soft); white-space:nowrap;
}
#dl-ruler .rl::before{content:""; position:absolute; left:50%; bottom:100%; width:1px; height:7px; background:rgba(255,255,255,0.6);}
/* --- iridescent crystal block: a solid glass volume on the plane --- */
.dl-mod{
  position:absolute; height:28px; cursor:grab; transform-style:preserve-3d;
  user-select:none;
}
.dl-mod .f{position:absolute; pointer-events:none;}
.dl-mod .f-top{               /* crystal lid — carries the label */
  inset:0; transform:translateZ(16px);
  background:linear-gradient(120deg, rgba(216,230,255,0.62) 0%, rgba(236,216,255,0.5) 38%, rgba(198,246,255,0.58) 70%, rgba(244,222,255,0.52) 100%);
  border:1.5px solid rgba(255,255,255,0.9); border-top:3px solid var(--hc,#fff); border-radius:5px;
  border-left:6px solid var(--hc,#fff);
  font-weight:600; font-size:0.74rem; letter-spacing:0.03em;
  line-height:25px; padding:0 8px; white-space:nowrap; overflow:hidden;
  color:var(--deep);
  box-shadow:inset 0 0 12px rgba(255,255,255,0.55);
}
.dl-mod .f-front{             /* facing wall */
  left:0; right:0; top:100%; height:16px;
  transform-origin:top; transform:rotateX(-90deg);
  background:linear-gradient(90deg, rgba(224,214,255,0.5), rgba(200,236,255,0.42) 50%, rgba(240,214,250,0.48));
  border:1px solid rgba(255,255,255,0.75); border-top:none; border-radius:0 0 4px 4px;
  box-shadow:0 20px 30px var(--deep-soft), inset 0 -4px 10px rgba(150,130,255,0.28);
}
.dl-mod .f-end{               /* crystal end caps, tinted by task color */
  top:0; width:16px; height:28px;
  background:linear-gradient(160deg, var(--hc,#fff), rgba(255,255,255,0.55));
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:inset 0 0 8px rgba(255,255,255,0.6);
}
.dl-mod .f-end.l{left:0; transform-origin:left; transform:rotateY(-90deg);}
.dl-mod .f-end.r{right:0; transform-origin:right; transform:rotateY(90deg); opacity:0.75;}
.dl-mod:hover .f-top{background:linear-gradient(120deg, rgba(226,238,255,0.75), rgba(244,226,255,0.62) 45%, rgba(212,250,255,0.7));}
#dl-marker{
  position:absolute; top:-8px; bottom:0; width:2px; background:#fff;
  z-index:9; transform:translateZ(58px); box-shadow:0 0 14px rgba(255,255,255,0.8);
}
#dl-marker::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,0.25);
}

/* ============ popups — kept as white cards (v3) ============ */
#editor{
  position:fixed; z-index:60; width:348px; padding:24px; display:none;
  background:linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09));
  border:1px solid var(--glass-border); border-radius:20px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px var(--deep-soft); color:var(--ink);
}
#editor label{font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; display:block; margin:13px 0 6px;}
#editor label:first-child{margin-top:0;}
#editor input{
  width:100%; padding:12px 12px; border-radius:11px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.14); color:var(--ink); font-size:0.92rem; font-family:inherit; outline:none;
  min-height:46px; color-scheme:dark;
}
#editor input::placeholder{color:rgba(255,255,255,0.5);}
#editor input[type="time"]{min-width:132px; padding-right:8px;}
#editor input:focus{border-color:rgba(255,255,255,0.85);}
.ed-times{display:flex; gap:12px;}
.ed-times > div{flex:1; min-width:0;}
#editor .ed-row{display:flex; gap:8px; margin-top:20px;}
#editor button{
  flex:1; padding:11px; border:none; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
}
#ed-save{background:#fff; color:var(--deep);}
#ed-save:hover{box-shadow:0 6px 18px rgba(255,255,255,0.3);}
#ed-del{background:rgba(255,255,255,0.1); color:var(--ink); border:1px solid var(--glass-border) !important;}
#ed-del:hover{border-color:#FFB3B3 !important; color:#FFD6D6;}

#ai-panel{
  position:fixed; right:16px; top:84px; width:340px; max-height:60vh; z-index:55; display:none;
  flex-direction:column;
  background:linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09));
  border:1px solid var(--glass-border); border-radius:22px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px var(--deep-soft); color:var(--ink);
}
#ai-panel.on{display:flex;}
#ai-panel .pane-head{padding:18px 22px 8px;}
#ai-panel .eyebrow{color:var(--ink-soft);}
#ai-body{padding:4px 22px 16px; overflow-y:auto; font-size:0.95rem; line-height:1.75; white-space:pre-wrap;}
#ai-ask{
  margin:0 22px 20px; padding:13px; border:none; border-radius:999px; background:#fff; color:var(--deep);
  font-family:inherit; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; font-size:0.64rem; cursor:pointer;
}
#ai-ask:hover{filter:brightness(1.08);}

:root{
  --cc-slp:#A78BFA; --cc-fcs:#4ED8C7; --cc-adm:#FF8E8E; --cc-exr:#7BE495; --cc-lsr:#FFD166; 
}
#compare{display:none; flex:1; min-height:0; flex-direction:column; gap:12px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); box-shadow:var(--shadow);
  padding:16px 22px 14px;
}
body.comparing main, body.comparing #ticker{display:none;}
body.comparing #compare{display:flex;}
.cmp-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.cmp-head .eyebrow{flex:1; min-width:260px;}
.cmp-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:0.8rem; font-weight:500;}
.cmp-legend span{display:flex; align-items:center; gap:7px;}
.cmp-legend i{width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(255,255,255,0.5);}
.cmp-row.health .cmp-label .nm{color:#B9FFD4;}
.cmp-row.health .cmp-track{border-color:rgba(150,255,190,0.55); box-shadow:0 0 0 1px rgba(150,255,190,0.2);}
.cmp-cite{flex-basis:100%; font-size:0.66rem; color:var(--ink-soft); line-height:1.5;}
.cmp-chart{flex:1; position:relative; min-height:0; cursor:crosshair; padding-bottom:26px;}
#cmp-rows{position:absolute; inset:0 0 26px 0; display:flex; flex-direction:column; justify-content:space-evenly; gap:6px; z-index:2;}
.cmp-row{display:flex; align-items:center; gap:14px; flex:1; min-height:0; max-height:56px;}
.cmp-label{width:190px; flex-shrink:0; text-align:right;}
.cmp-label .nm{font-weight:600; font-size:0.95rem;}
.cmp-label .ph{font-size:0.68rem; color:var(--ink-soft); line-height:1.3; margin-top:1px;}
.cmp-track{flex:1; position:relative; height:70%; min-height:26px; border-radius:9px;
  background:rgba(255,255,255,0.07); border:1px solid var(--hairline); overflow:hidden;}
.cmp-seg{position:absolute; top:0; bottom:0; opacity:0.88;}
.cmp-seg.you{border-radius:5px; border:1px solid rgba(255,255,255,0.55);}
.cmp-row.me .cmp-track{border-color:rgba(255,255,255,0.55); box-shadow:0 0 0 1px rgba(255,255,255,0.25), 0 8px 22px var(--deep-soft);}
.cmp-row.me .nm{letter-spacing:0.04em;}
#cmp-grid{position:absolute; inset:0 0 26px 190px; margin-left:14px; z-index:1; pointer-events:none;}
#cmp-grid i{position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,0.12);}
#cmp-hours{position:absolute; left:204px; right:0; bottom:0; height:22px; pointer-events:none;}
#cmp-hours span{position:absolute; transform:translateX(-50%); font-weight:600; font-size:0.76rem; letter-spacing:0.08em; color:var(--ink-soft);}
#cmp-now{position:absolute; top:0; bottom:26px; width:2px; z-index:4; pointer-events:none; display:none;
  background:repeating-linear-gradient(180deg,#fff 0 7px,transparent 7px 13px); opacity:0.85;}
#cmp-now::before{content:"NOW"; position:absolute; bottom:-2px; left:50%; transform:translate(-50%,100%);
  font-weight:700; font-size:0.6rem; letter-spacing:0.18em; color:var(--ink);}
#cmp-scrub{position:absolute; top:0; bottom:26px; width:2px; background:#fff; z-index:5; pointer-events:none;
  box-shadow:0 0 12px rgba(255,255,255,0.8); display:none;}
#cmp-scrub span{position:absolute; top:-4px; left:50%; transform:translate(-50%,-100%);
  background:#fff; color:var(--deep); font-weight:700; font-size:0.74rem; letter-spacing:0.06em;
  padding:3px 10px; border-radius:999px; white-space:nowrap;}
.cmp-inspect{display:flex; gap:10px; overflow-x:auto; padding:4px 2px 6px; min-height:76px;}
.cmp-inspect::-webkit-scrollbar{height:5px;}
.cmp-inspect::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3); border-radius:3px;}
.cmp-hint{font-size:0.85rem; color:var(--ink-soft); align-self:center;}
.cmp-card{flex:0 0 200px; border-radius:13px; padding:10px 13px;
  background:linear-gradient(160deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
  border:1px solid var(--glass-border); border-left:5px solid var(--cc,#fff);}
.cmp-card .cn{font-weight:700; font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase;}
.cmp-card .ct{font-size:0.82rem; margin-top:3px; line-height:1.35;}
#dlmode{display:none; flex:1; min-height:0; gap:14px; position:relative;}
body.deadlining main, body.deadlining #ticker{display:none;}
body.deadlining #dlmode{display:flex;}
#vz-status{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:20;
  display:flex; align-items:center; gap:10px; padding:9px 22px; border-radius:999px;
  background:linear-gradient(160deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
  border:1px solid var(--glass-border); backdrop-filter:blur(12px);
  box-shadow:var(--shadow); font-size:0.9rem; font-weight:500; white-space:nowrap; max-width:70%;
}
#vz-status{cursor:grab;}
#vz-status span{overflow:hidden; text-overflow:ellipsis;}
#vz-tempo{-webkit-appearance:none; appearance:none; width:86px; height:4px; border-radius:99px; background:rgba(255,255,255,0.35); outline:none; cursor:pointer; flex-shrink:0;}
#vz-tempo::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; border:none; box-shadow:0 1px 4px rgba(0,0,0,0.3);}
#vz-tempo::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:#fff; border:none;}
.vz-pane{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
#vz-close{width:520px;}
#vz-day{width:310px;}
#vz-phys{width:170px;}
#phys-cv{flex:1; width:100%;}
#phys-legend{display:flex; justify-content:space-around; padding:6px 4px 12px;
  font-weight:600; font-size:0.56rem; letter-spacing:0.16em; color:var(--ink-soft);}
#vz-spacer{flex:1;}
/* chronos cards: burst / rest / burst bands drawn into the vessel */
.vzmod.chronos{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hc) 55%, rgba(255,255,255,0.1)) 0 45%,
    rgba(255,255,255,0.55) 45% 55%,
    color-mix(in srgb, var(--hc) 55%, rgba(255,255,255,0.1)) 55% 100%);
}
.vzmod.chronos .cx-desc{
  width:100%; border:none; outline:none; background:rgba(255,255,255,0.25);
  border-radius:8px; padding:5px 9px; font-family:inherit; font-weight:600; font-size:0.85rem;
  color:var(--ink);
}
.vzmod.chronos .cx-desc::placeholder{color:rgba(255,255,255,0.75); font-weight:500;}
.vzmod.cx-active{
  box-shadow:0 0 0 2.5px #fff, 0 0 34px rgba(255,255,255,0.5) !important;
  z-index:50 !important;
}
.vzmod.cx-need .cx-desc{animation:cx-nag 1.6s ease-in-out infinite;}
@keyframes cx-nag{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}50%{box-shadow:0 0 0 3px rgba(255,255,255,0.7);}}
.cx-done-btn{
  margin-top:6px; width:100%; padding:8px; border:none; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--deep); font-family:inherit; font-weight:700;
  font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase;
}
.cx-done-btn:hover{box-shadow:0 4px 14px rgba(255,255,255,0.4);}
.cx-phase{font-size:0.66rem; font-weight:700; letter-spacing:0.14em; margin-top:4px; text-transform:uppercase;}
#vz-bank{width:74px; transition:width .35s cubic-bezier(.4,0,.2,1); flex-shrink:0;}
#vz-bank.open{width:256px;}
#vz-bank .pane-head{justify-content:center;}
#vz-bank-list{flex:1; overflow-y:auto; overflow-x:hidden; padding:2px 10px 14px; display:flex; flex-direction:column; gap:8px;}
#vz-bank-list::-webkit-scrollbar{width:4px;}
#vz-bank-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3); border-radius:3px;}
.vzb-mod{
  border-radius:13px; padding:8px; background:rgba(255,255,255,0.09);
  border:1px solid var(--hairline); border-left:5px solid var(--hc,#fff);
  cursor:grab; display:flex; align-items:center; gap:11px; white-space:nowrap;
}
.vzb-mod .b-ring{width:33px;height:33px;border-radius:50%;background:#fff;color:var(--deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.vzb-mod .b-ring .ico{width:16px;height:16px;}
.vzb-mod .b-name{font-size:0.85rem;font-weight:600; opacity:0; transition:opacity .25s;}
#vz-bank.open .vzb-mod .b-name{opacity:1;}
/* vertical close-up */
#vzc-vp{flex:1; position:relative; overflow:hidden;}
#vzc-track{position:absolute; left:0; right:0; top:0; will-change:transform;}
.vzc-hour{position:absolute; left:0; right:0; border-top:1px solid rgba(255,255,255,0.16);}
.vzc-hour label{position:absolute; top:4px; left:10px; font-weight:600; font-size:0.72rem; letter-spacing:0.14em; color:var(--ink-soft); text-transform:uppercase;}
#vz-playhead{position:absolute; left:0; right:0; height:2px; background:#fff; z-index:8; box-shadow:0 0 14px rgba(255,255,255,0.8);}
#vz-playhead::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:#fff;}
.vzmod{
  position:absolute; left:12px; right:12px; border-radius:13px; padding:8px 12px;
  background:linear-gradient(155deg, color-mix(in srgb, var(--hc,#fff) 52%, rgba(255,255,255,0.1)), color-mix(in srgb, var(--hc,#fff) 26%, rgba(255,255,255,0.03)));
  border:1px solid var(--glass-border); border-left:5px solid var(--hc,#fff);
  box-shadow:0 8px 22px var(--deep-soft); cursor:grab; user-select:none; overflow:hidden;
}
.vzmod .m-title{font-size:0.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vzmod .m-time{font-size:0.72rem; color:var(--ink-soft); margin-top:2px; white-space:nowrap;}
.vzmod.now{box-shadow:0 0 0 1.5px rgba(255,255,255,0.85), 0 8px 26px rgba(255,255,255,0.25);}
.vzmod.done{opacity:0.42; filter:saturate(0.55);}
.vzmod .vgrip{position:absolute; left:0; right:0; height:10px; cursor:ns-resize; z-index:3;}
.vzmod .vgrip.t{top:0;} .vzmod .vgrip.b{bottom:0;}
.vz-deadline{
  position:absolute; left:4px; right:4px; height:0; z-index:6; pointer-events:auto; cursor:pointer;
  border-top:3px solid #FF4D4D; box-shadow:0 0 14px rgba(255,77,77,0.7);
}
.vz-deadline{cursor:grab;}
.vz-deadline .dl-flag{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); background:rgba(255,77,77,0.92); color:#fff;
  font-weight:700; font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap; pointer-events:none;
}
/* vertical full day */
#vzd-strip{flex:1; position:relative; margin:4px 14px 14px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid var(--hairline);}
.vzd-hour{position:absolute; left:0; right:0; border-top:1px solid rgba(255,255,255,0.1);}
.vzd-hour label{position:absolute; top:2px; left:6px; font-size:0.62rem; font-weight:600; color:var(--ink-soft); letter-spacing:0.1em;}
.vzd-mod{position:absolute; left:30px; right:8px; border-radius:7px; min-height:18px;
  background:color-mix(in srgb, var(--hc,#fff) 60%, rgba(255,255,255,0.08));
  border:1px solid rgba(255,255,255,0.45); border-left:4px solid var(--hc,#fff); cursor:pointer;
  padding:2px 8px; overflow:hidden;
  font-weight:600; font-size:0.7rem; color:#fff; line-height:1.5; white-space:nowrap; text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,0.25);}
.vzd-mod.done{opacity:0.35;}
#vzd-now{position:absolute; left:0; right:0; height:2px; background:#fff; z-index:5; box-shadow:0 0 10px rgba(255,255,255,0.8);}
.vzd-deadline{position:absolute; left:2px; right:2px; border-top:2.5px solid #FF4D4D; z-index:6; box-shadow:0 0 10px rgba(255,77,77,0.7); cursor:pointer;}
/* ============ GOALS — TEMPORAL TOTEMS ============ */
#goalmode{display:none; flex:1; min-height:0; gap:14px;}
body.goaling main, body.goaling #ticker{display:none;}
body.goaling #goalmode{display:flex;}
#gl-main{flex:1; min-width:0;}
#gl-field2d{flex:1; position:relative; overflow:hidden; cursor:grab;}
#gl-field2d:active{cursor:grabbing;}
#gl-field3d{flex:1; position:relative; overflow:hidden;}
#gl-totems{position:absolute; left:0; top:0; display:flex; align-items:flex-start; gap:30px; padding:34px 40px; transform-origin:0 0; will-change:transform;}
.totem{width:216px; flex-shrink:0; display:flex; flex-direction:column; gap:0; position:relative;}
.totem .t-spine{position:absolute; left:-7px; top:8px; bottom:8px; width:4px; border-radius:99px; background:var(--gc,#fff); opacity:0.85; box-shadow:0 0 12px var(--gc,#fff);}
.t-crown{
  border-radius:18px 18px 8px 8px; overflow:hidden; cursor:pointer; position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  border:1px solid var(--glass-border); box-shadow:var(--shadow);
}
.t-crown img{display:block; width:100%; height:130px; object-fit:cover;}
.t-crown .t-noimg{height:96px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:var(--ink-soft); letter-spacing:0.1em; text-transform:uppercase;}
.t-crown .t-title{padding:9px 12px; font-weight:600; font-size:0.95rem; background:rgba(0,0,0,0.12);}
.t-gen{
  margin:6px 0 4px; padding:8px; border:1px solid var(--glass-border); border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,0.12); color:var(--ink); font-family:inherit; font-weight:700;
  font-size:0.54rem; letter-spacing:0.14em; text-transform:uppercase;
}
.t-gen:hover{background:rgba(255,255,255,0.22);}
.t-step{
  margin-top:5px; border-radius:11px; padding:8px 11px; cursor:pointer; position:relative; overflow:hidden;
  background:rgba(255,255,255,0.1); border:1px solid var(--hairline);
  font-size:0.82rem; font-weight:500;
}
.t-step .t-fill{position:absolute; inset:0; background:color-mix(in srgb, var(--gc,#fff) 45%, rgba(255,255,255,0.15)); width:0%; transition:width .6s;}
.t-step span{position:relative;}
.t-step.lit{border-color:var(--gc,#fff); box-shadow:0 0 14px color-mix(in srgb, var(--gc,#fff) 50%, transparent);}
.t-step.lit .t-fill{width:100%;}
.t-addstep{margin-top:6px; padding:7px; border:1px dashed var(--glass-border); border-radius:11px; cursor:pointer; text-align:center; font-size:0.7rem; color:var(--ink-soft); background:transparent;}
.t-addstep:hover{background:rgba(255,255,255,0.08);}
/* desires rail */
#gl-desires{width:250px; flex-shrink:0;}
#gl-des-list{flex:1; overflow-y:auto; padding:4px 12px; display:flex; flex-direction:column; gap:7px;}
.des-slip{
  padding:9px 11px; border-radius:11px; background:rgba(255,255,255,0.1);
  border:1px solid var(--hairline); font-size:0.82rem; cursor:grab; display:flex; gap:8px; align-items:center;
}
.des-slip .dx{margin-left:auto; cursor:pointer; opacity:0.6; font-weight:700;}
.des-slip .dx:hover{opacity:1;}
#gl-des-add{display:flex; gap:7px; padding:10px 12px 14px;}
#gl-des-input{flex:1; border:1px solid var(--glass-border); background:rgba(255,255,255,0.12); border-radius:10px; color:var(--ink); padding:9px 11px; font-family:inherit; font-size:0.82rem; outline:none;}
#gl-des-btn{padding:9px 14px; border:none; border-radius:999px; background:#fff; color:var(--deep); font-family:inherit; font-weight:700; font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;}
/* ghost lane on the close-up */
.ghost-mod{
  position:absolute; top:6px; height:36px; border-radius:10px; padding:3px 10px; z-index:4; pointer-events:none;
  background:color-mix(in srgb, var(--gc,#fff) 30%, transparent);
  border:1.5px dashed color-mix(in srgb, var(--gc,#fff) 75%, #fff);
  font-size:0.7rem; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  opacity:0.85;
}
.ghost-mod small{display:block; font-size:0.58rem; opacity:0.8; font-weight:500;}
footer{
  text-align:center; font-weight:600; font-size:0.58rem;
  color:var(--ink-soft); letter-spacing:0.2em; text-transform:uppercase; padding:2px 0 0;
}
footer a{color:var(--ink-soft);}

#toast{
  position:fixed; bottom:240px; left:50%; transform:translateX(-50%) translateY(20px); z-index:70;
  background:var(--deep); color:#fff; border-radius:999px;
  padding:12px 28px; font-size:0.76rem; letter-spacing:0.03em;
  opacity:0; transition:all .4s; pointer-events:none; font-weight:500;
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:880px){
  body{overflow:auto;}
  #app{height:auto; min-height:100vh;}
  main{grid-template-columns:1fr; grid-template-rows:330px 300px 290px 230px;}
  #closeup{grid-column:1; grid-row:1;}
  #queue{grid-column:1; grid-row:2;}
  #bank{grid-column:1; grid-row:3;}
  #dayline{grid-column:1; grid-row:4;}
  #ai-panel{width:calc(100vw - 32px);}
}
@media (prefers-reduced-motion: reduce){ #wave3d{display:none;} }
select option{color:#20160C; background:#fff;}


/* ============ GOALS AS THE LEFT SLIVER + DRAWER ============ */
#goal-toggle{
  position:fixed; left:0; top:0; bottom:0; width:36px; z-index:96;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  border-right:1px solid var(--glass-border); backdrop-filter:blur(12px);
  box-shadow:4px 0 18px var(--deep-soft);
  transition:width .25s, background .25s;
}
#goal-toggle span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:0.62rem; font-weight:700; letter-spacing:0.42em; color:var(--ink);
  text-transform:uppercase; user-select:none;
}
#goal-toggle:hover{width:44px; background:linear-gradient(90deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12));}
#goal-toggle.active{background:linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2));}
body{--sliver:36px;}
main, #ticker{margin-left:var(--sliver);}
#goalmode{
  display:flex !important; position:fixed; top:0; bottom:0; left:0;
  width:min(1240px,94vw); z-index:90; padding:16px 22px 16px 60px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--deep) 26%, transparent), rgba(255,255,255,0.14));
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  border-right:1px solid var(--glass-border);
  box-shadow:30px 0 80px rgba(0,0,0,0.35);
  transform:translateX(-103%); visibility:hidden;
  transition:transform .5s cubic-bezier(.4,.1,.25,1), visibility .5s;
}
body.goaling #goalmode{transform:none; visibility:visible;}
body.goaling main{display:grid !important;}
body.goaling #ticker{display:flex !important;}

/* the three mode buttons fold into one */
#cmp-toggle, #collapse-all, #dl-toggle{display:none !important;}

/* deadline bank breathes again: slim rail, opens as you come to it */
body.deadlining #bank{transition:width .35s ease;}
body.deadlining #bank:hover{width:312px !important;}

/* desires — organized bullets */
.des-slip{position:relative; padding-left:26px !important;}
.des-slip::before{
  content:'\2022'; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:#fff; font-size:1.05rem; text-shadow:0 0 8px rgba(255,255,255,0.7);
}


/* ============ THE MENU FLIPS AT THE LOGO ============ */
header.bar{position:relative; z-index:97; transform-style:preserve-3d;}
header.bar.flipping{animation:face-turn .6s cubic-bezier(.4,.1,.3,1);}
#logo-flip{cursor:pointer;}
#hdr-back{
  position:absolute; inset:0; z-index:5; display:none; align-items:center; gap:8px;
  padding:0 16px 0 12px; border-radius:999px;
}
header.bar.flipped{max-width:820px !important;}
header.bar.flipped > *:not(#hdr-back){opacity:0; pointer-events:none;}
header.bar.flipped #hdr-back{display:flex;}
.hb-btn{
  padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.25); cursor:pointer;
  background:rgba(255,255,255,0.1); color:#fff; font-family:inherit; font-weight:600;
  font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap;
}
.hb-btn:hover{background:rgba(255,255,255,0.22);}
.hb-btn.active{background:#fff; color:var(--deep);}
.hb-sep{width:1px; height:22px; background:rgba(255,255,255,0.25);}
#mode-cycle{display:none !important;}

/* drawer stops beneath the menu line */
#goalmode{top:86px !important; border-top-right-radius:24px;}

/* ============ CALENDAR — MONTH · 4 WEEKS · GANTT ============ */
#calmode{display:none; flex:1; min-height:0; flex-direction:column; gap:12px; margin-left:var(--sliver);}
body.caling main, body.caling #ticker{display:none !important;}
body.caling #calmode{display:flex;}
#cal-head{display:flex; align-items:center; gap:8px; padding:6px 4px;}
.cal-nav{width:38px; font-size:1rem; color:var(--ink); font-family:inherit;}
.cal-sub{width:auto; padding:0 14px; font-weight:700; font-size:0.6rem; letter-spacing:0.14em; color:var(--ink); font-family:inherit;}
.cal-sub.active{background:#fff; color:var(--deep);}
#cal-body{flex:1; min-height:0; overflow:auto; padding-bottom:8px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; height:100%;}
.cal-dow{font-size:0.56rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-soft); text-align:center; padding:4px 0;}
.cal-cell{
  position:relative; border-radius:14px; padding:8px 10px 22px; min-height:86px;
  background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(8px);
  box-shadow:0 6px 16px var(--deep-soft); overflow:hidden;
}
.cal-cell.dim{opacity:0.35;}
.cal-cell.today{border:2px solid #fff; box-shadow:0 0 20px rgba(255,255,255,0.4);}
.cal-cell .d{font-size:0.78rem; font-weight:700;}
.cal-strip{position:absolute; left:8px; right:8px; bottom:8px; height:9px; border-radius:99px; background:rgba(255,255,255,0.14); overflow:hidden;}
.cal-strip i{position:absolute; top:0; bottom:0; border-radius:2px;}
.cal-week{margin-bottom:14px;}
.cal-week .wk-label{font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px 2px;}
.cal-wrow{display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.cal-wday{
  position:relative; border-radius:14px; height:84px; padding:6px 10px;
  background:var(--glass); border:1px solid var(--glass-border); box-shadow:0 6px 16px var(--deep-soft); overflow:hidden;
}
.cal-wday.today{border:2px solid #fff;}
.cal-wday .d{font-size:0.66rem; font-weight:700;}
.cal-wday .cal-strip{height:14px;}
.gantt{padding:6px 2px;}
.gantt-head{display:grid; grid-template-columns:180px 1fr; gap:10px; margin-bottom:6px;}
.gantt-days{position:relative; height:20px;}
.gantt-days span{position:absolute; font-size:0.54rem; color:var(--ink-soft); transform:translateX(-50%);}
.gantt-row{display:grid; grid-template-columns:180px 1fr; gap:10px; align-items:center; margin-bottom:10px;}
.gantt-name{font-size:0.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gantt-lane{position:relative; height:30px; border-radius:10px; background:rgba(255,255,255,0.1); border:1px solid var(--hairline); overflow:hidden;}
.gantt-bar{
  position:absolute; top:4px; bottom:4px; border-radius:8px;
  background:color-mix(in srgb, var(--gc,#fff) 38%, transparent);
  border:1.5px solid var(--gc,#fff); overflow:hidden;
}
.gantt-bar i{position:absolute; inset:0; width:0%; background:color-mix(in srgb, var(--gc,#fff) 65%, rgba(255,255,255,0.2));}
.gantt-bar span{position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:0.6rem; font-weight:700; z-index:2; white-space:nowrap;}
.gantt-today{position:absolute; top:0; bottom:0; width:2px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,0.8);}
.cal-empty{padding:40px; text-align:center; color:var(--ink-soft); font-size:0.85rem;}

/* ============ RIGHT-CLICK MENU ============ */
#ctx-menu{
  position:fixed; z-index:150; min-width:150px; padding:6px; border-radius:14px;
  background:linear-gradient(160deg, rgba(255,255,255,0.3), rgba(255,255,255,0.14));
  border:1px solid var(--glass-border); backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(0,0,0,0.3);
  display:flex; flex-direction:column; gap:2px;
}
#ctx-menu button{
  text-align:left; padding:9px 13px; border:none; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--ink); font-family:inherit; font-size:0.8rem; font-weight:500;
}
#ctx-menu button:hover{background:rgba(255,255,255,0.25);}
#ctx-menu .ctx-danger:hover{background:rgba(255,80,80,0.3);}


/* ============================================================
   THE SLITHER — window dragged short = the bar instrument
   Only the long horizontal timeline, the mark, and the clock.
   ============================================================ */
body.strip #ticker, body.strip #queue, body.strip #dayline, body.strip #bank,
body.strip #body-pane, body.strip #bodywin, body.strip #goal-toggle,
body.strip footer, body.strip .foot, body.strip header.bar .collapsible,
body.strip header.bar h1, body.strip header.bar .beta-pill{display:none !important;}
body.strip{overflow:hidden;}
body.strip header.bar{padding:4px 12px; gap:10px; border-radius:12px; max-width:none !important; margin:4px 8px 0;}
body.strip .logo-mark{transform:scale(0.8);}
body.strip main{display:block !important; position:relative; height:calc(100vh - 56px); min-height:0; margin:2px 8px 4px; }
body.strip #closeup{position:absolute; inset:0; height:auto !important; border-radius:12px;}
body.strip #closeup .pane-head{display:none !important;}
body.strip #cu-viewport{border-radius:12px;}

/* ============ THE UPGRADE BANNER (desktop app only) ============ */
#frame-upgrade{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:260;
  display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,0.32), rgba(255,255,255,0.16));
  border:1px solid var(--glass-border); backdrop-filter:blur(18px);
  box-shadow:0 16px 44px rgba(0,0,0,0.35); font-size:0.82rem;
}
#frame-upgrade button{
  padding:8px 15px; border:none; border-radius:999px; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
}
#fu-get{background:#fff; color:var(--deep);}
#fu-x{background:rgba(255,255,255,0.16); color:var(--ink); border:1px solid var(--glass-border) !important;}
body.strip #frame-upgrade{display:none;}


/* ============================================================
   THE FILM IN THE STAGE — restored after the v33 trim ate it
   ============================================================ */
#gd-stage{height:300px;}
#gate-film{
  position:absolute; inset:0; z-index:20; border-radius:20px; overflow:hidden;
  background:rgba(20,10,4,0.6); opacity:1; transition:opacity 1.9s ease;
  border:1px solid rgba(255,255,255,0.85); box-shadow:0 18px 50px rgba(0,0,0,0.35), var(--shadow);
}
#gate-film.fade{opacity:0; pointer-events:none;}
#gate-film video{width:100%; height:100%; object-fit:cover; opacity:0.9;}
#gv-skip,#gv-sound{
  position:absolute; z-index:22; border:1px solid rgba(255,255,255,0.45); cursor:pointer;
  background:rgba(0,0,0,0.45); color:#fff; font-family:inherit; backdrop-filter:blur(8px);
  border-radius:999px; padding:8px 16px; font-weight:700; font-size:0.6rem; letter-spacing:0.16em;
}
#gv-skip{bottom:14px; right:14px;}
#gv-sound{bottom:14px; left:14px; font-size:0.9rem; padding:7px 12px;}
#gv-skip:hover,#gv-sound:hover{background:rgba(0,0,0,0.7);}
#gd-bank,#gd-hint{opacity:0; transition:opacity 1.1s ease .45s;}
body.postfilm #gd-bank, body.postfilm #gd-hint{opacity:1;}
body.postfilm #gate-film{display:none;}


/* the phone's flip-view buttons never board the desktop (v33-trim casualty, restored) */
@media (min-width: 761px){
  .mv-flip{display:none !important;}
}


/* ============ THE HONEST GATE: accounts get challenged, guests get told ============ */
.gate-note{font-size:0.62rem; color:var(--ink-soft); margin-top:10px; letter-spacing:0.03em;}
#gate-auth input{width:100%;}
.ga-btn{
  flex:1; padding:11px; border-radius:999px; border:1px solid var(--glass-border); cursor:pointer;
  background:rgba(255,255,255,0.2); color:var(--ink); font-family:inherit; font-weight:700;
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
}
.ga-btn:hover{background:rgba(255,255,255,0.35);}


/* ============ THE INSTALL MENU — one button, a glass roll-down ============ */
#app-menu{
  position:fixed; z-index:160; min-width:230px; padding:8px; border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,0.32), rgba(255,255,255,0.15));
  border:1px solid var(--glass-border); backdrop-filter:blur(20px);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
  display:flex; flex-direction:column; gap:4px;
  transform-origin:top center; animation:am-roll .28s cubic-bezier(.3,.1,.25,1);
}
@keyframes am-roll{from{opacity:0; transform:translateY(-10px) scaleY(0.9);}to{opacity:1; transform:none;}}
#app-menu button{
  text-align:left; padding:11px 14px; border:none; border-radius:12px; cursor:pointer;
  background:transparent; color:var(--ink); font-family:inherit;
  display:flex; flex-direction:column; gap:2px;
}
#app-menu button b{font-size:0.85rem; font-weight:600;}
#app-menu button small{font-size:0.62rem; color:var(--ink-soft); letter-spacing:0.04em;}
#app-menu button:hover{background:rgba(255,255,255,0.28);}
#app-menu .am-note{
  padding:8px 14px 6px; font-size:0.58rem; color:var(--ink-soft);
  border-top:1px solid var(--hairline); margin-top:2px; letter-spacing:0.03em;
}


/* ============================================================
   THE MODULE FLIP — the back side control room (all screens)
   ============================================================ */
  .mod.sel{outline:2px solid rgba(255,255,255,0.9); outline-offset:2px;}
  .mod.backing{visibility:hidden;}
  .m-subchip{
    position:absolute; right:26px; bottom:4px; z-index:4;
    font-size:0.55rem; font-weight:800; letter-spacing:0.04em;
    background:rgba(255,255,255,0.9); color:var(--deep);
    border-radius:99px; padding:1px 8px; pointer-events:none;
  }
  .m-sublane{
    position:absolute; left:13px; right:30px; bottom:3px; height:15px; z-index:3;
    display:flex; gap:2px; overflow:hidden; pointer-events:none;
  }
  .m-subblock{
    height:100%; border-radius:4px; min-width:8px;
    background:rgba(255,255,255,0.26); border:1px solid rgba(255,255,255,0.4);
    font-size:0.48rem; font-weight:700; letter-spacing:0.02em; line-height:13px;
    padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    opacity:0.75;                              /* faint sub-modules on the module's own timeline */
  }
  .m-subblock.done{opacity:0.4; text-decoration:line-through;}
  .mod.tiny .m-sublane{display:none;}
  .mfb-sub .mfb-sub-min{
    width:56px; padding:5px 7px; border-radius:8px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.7); font-family:inherit; font-size:0.72rem; color:var(--deep); outline:none;
  }
  #mfb-newsub-min{
    width:64px; padding:8px 9px; border-radius:11px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.65); font-family:inherit; font-size:0.74rem; color:var(--deep); outline:none;
  }
  .m-assign{
    position:absolute; right:4px; bottom:4px; z-index:5;
    width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.5rem; font-weight:800; letter-spacing:0.02em;
    background:var(--hc, var(--acc)); color:#fff;
    border:1.5px solid rgba(255,255,255,0.9); box-shadow:0 2px 6px rgba(0,0,0,0.3);
    pointer-events:none;
  }
  .mod.tiny .m-assign{display:none;}
  #mfb-assign{
    width:100%; padding:8px 12px; border-radius:12px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.65); font-family:inherit; font-size:0.82rem; color:var(--deep); outline:none;
  }
  #mflip-veil{
    position:fixed; inset:0; z-index:150;
    background:transparent;                      /* no dimming — this is not a window, it is the module */
    perspective:1500px;
  }
  #mflip-card{
    position:fixed; transform-style:preserve-3d;
    transition:left .62s cubic-bezier(.3,.1,.25,1), top .62s cubic-bezier(.3,.1,.25,1),
               width .62s cubic-bezier(.3,.1,.25,1), height .62s cubic-bezier(.3,.1,.25,1),
               transform .62s cubic-bezier(.3,.1,.25,1);
  }
  #mflip-card .mflip-front{
    position:absolute; inset:0; backface-visibility:hidden; pointer-events:none;
  }
  #mflip-card .mflip-front .mod{position:absolute !important; left:0 !important; top:0 !important;
    width:100% !important; height:100% !important; margin:0 !important;}
  #mflip-back{
    position:absolute; inset:0; transform:rotateX(180deg); backface-visibility:hidden;
    border-radius:13px; padding:20px 16px 13px; overflow:hidden;
    background:linear-gradient(160deg, rgba(255,255,255,0.36), rgba(255,255,255,0.18));
    border:1px solid rgba(255,255,255,0.75); backdrop-filter:blur(16px);
    box-shadow:0 16px 44px rgba(0,0,0,0.3);            /* the module's own material — grown, not a window */
    color:var(--deep);
  }
  #mflip-back::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:7px;
    background:var(--hc, var(--acc)); border-radius:13px 0 0 13px;   /* its color band — same object */
  }
  #mflip-back::after{
    content:''; position:absolute; left:0; right:0; top:0; height:7px;
    background:var(--hc, var(--acc)); border-radius:13px 13px 0 0;   /* the crown band — the color rides the top too */
  }

  #mflip-back h3{
    font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--ink-soft); margin:14px 0 6px;
  }
  #mflip-back h3:first-child{margin-top:0;}
  #mfb-title{
    width:100%; padding:9px 12px; border-radius:12px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.65); font-family:inherit; font-size:0.95rem; font-weight:600;
    color:var(--deep); outline:none;
  }
  .mfb-times{display:flex; gap:8px; margin-top:2px;}
  .mfb-times input{
    flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.65); font-family:inherit; font-size:0.82rem; color:var(--deep); outline:none;
  }
  #mfb-swatches{display:flex; gap:8px; flex-wrap:wrap;}
  .mfb-sw{
    width:30px; height:30px; border-radius:50%; cursor:pointer;
    border:2px solid rgba(255,255,255,0.7); box-shadow:0 2px 8px rgba(0,0,0,0.25);
  }
  .mfb-sw.on{border-color:#fff; outline:2px solid var(--deep); outline-offset:1px;}
  .mfb-sw.auto{
    background:conic-gradient(#E8752C,#2E8F5E,#2684A6,#7A54C4,#E8752C);
    display:flex; align-items:center; justify-content:center;
    font-size:0.5rem; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5);
  }
  #mfb-notes-btn{
    width:100%; text-align:left; padding:9px 12px; border-radius:12px; cursor:pointer;
    border:1px solid var(--glass-border); background:rgba(255,255,255,0.5);
    font-family:inherit; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; color:var(--deep);
  }
  #mfb-notes-panel{max-height:0; overflow:hidden; transition:max-height .35s ease;}
  #mflip-back.notes-open #mfb-notes-panel{max-height:200px;}
  #mfb-notes{
    width:100%; height:120px; margin-top:8px; padding:10px 12px; resize:vertical;
    border-radius:12px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.7);
    font-family:inherit; font-size:0.8rem; color:var(--deep); outline:none;
  }
  #mfb-subs{display:flex; flex-direction:column; gap:6px;}
  .mfb-sub{
    display:flex; align-items:center; gap:9px; padding:7px 10px;
    border-radius:11px; background:rgba(255,255,255,0.5); border:1px solid var(--hairline);
  }
  .mfb-sub input[type=checkbox]{width:16px; height:16px; accent-color:var(--deep); cursor:pointer;}
  .mfb-sub span{flex:1; font-size:0.8rem;}
  .mfb-sub.done span{text-decoration:line-through; opacity:0.55;}
  .mfb-sub button{
    border:none; background:transparent; cursor:pointer; color:var(--ink-soft);
    font-size:0.85rem; padding:2px 4px;
  }
  .mfb-addrow{display:flex; gap:6px; margin-top:6px;}
  .mfb-addrow input{
    flex:1; padding:8px 11px; border-radius:11px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.65); font-family:inherit; font-size:0.78rem; color:var(--deep); outline:none;
  }
  .mfb-addrow button{
    padding:8px 14px; border-radius:11px; border:none; cursor:pointer;
    background:var(--deep); color:#fff; font-family:inherit; font-size:0.66rem; font-weight:700; letter-spacing:0.1em;
  }
  #mfb-foot{display:flex; gap:8px; margin-top:16px;}
  #mfb-foot button{
    flex:1; padding:10px; border-radius:999px; cursor:pointer; font-family:inherit;
    font-weight:700; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; border:none;
  }
  #mfb-close{background:var(--deep); color:#fff;}
  #mfb-del{background:rgba(176,58,84,0.15); color:#B03A54; border:1px solid rgba(176,58,84,0.4) !important;}


/* one name per module — the duplicate center/right titles stand down everywhere */
.mod .m-title-c, .mod .m-title-r{display:none !important;}