/* Film 555 Studio — design tokens */
:root{
  --bg:#090b0f; --bg-2:#0e1117; --surface:#141820; --surface-2:#1a1f29; --surface-3:#222834;
  --line:#262d3a; --line-2:#323a4a;
  --text:#eceff4; --text-2:#b4bccb; --muted:#7f8899;
  --accent:#ff8a3d; --accent-2:#ffb27a; --accent-ink:#1b0e04; --accent-soft:rgba(255,138,61,.14);
  --ice:#7cc7ff; --ice-soft:rgba(124,199,255,.14);
  --ok:#5fd68a; --ok-soft:rgba(95,214,138,.15);
  --work:#ffc65c; --work-soft:rgba(255,198,92,.15);
  --bad:#ff6b6b; --bad-soft:rgba(255,107,107,.14);
  --neutral:#9aa3b5; --neutral-soft:rgba(154,163,181,.14);
  --focus:#7cc7ff;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --top:56px; --reels:248px; --panel:400px;
  font-size:15px;
}
:root.large{font-size:19px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.4;-webkit-font-smoothing:antialiased;overflow:hidden}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:.05em .35em;border-radius:4px}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
.muted{color:var(--muted)}
.error{color:var(--bad);min-height:1.2em;margin:.4rem 0 0;font-size:.9rem}
.spacer{flex:1}
.scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.num{font-variant-numeric:tabular-nums}

/* Brand */
.brand{font-weight:800;letter-spacing:.14em;font-size:.95rem;color:var(--text-2);white-space:nowrap}
.brand b{color:var(--accent);font-weight:800;letter-spacing:.04em}
.brand span{font-weight:600;font-size:.68rem;letter-spacing:.28em;color:var(--muted);margin-left:.35rem;vertical-align:.1em}
.brand-lg{font-size:1.3rem}
.brand-sm{letter-spacing:.04em;font-size:1rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:0 1rem;border-radius:var(--r);font-weight:600;font-size:.92rem;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;text-decoration:none;color:var(--text)}
.btn svg{width:1.1rem;height:1.1rem}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border:1px solid var(--line-2);color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-quiet{color:var(--text-2)}
.btn-quiet:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{border:1px solid rgba(255,107,107,.4);color:#ffb0b0}
.btn-danger:hover{background:var(--bad-soft)}
.btn-lg{min-height:3rem;font-size:1rem;padding:0 1.4rem}
.btn-sm{min-height:2rem;padding:0 .7rem;font-size:.82rem;border-radius:var(--r-sm)}
.icon-btn{display:inline-grid;place-items:center;min-width:2.5rem;height:2.5rem;border-radius:var(--r);color:var(--text-2)}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.aa{font-weight:700;font-size:.95rem}
.avatar-btn{display:inline-flex;align-items:center;gap:.5rem;height:2.5rem;padding:0 .35rem 0 .35rem;border-radius:999px;color:var(--text-2);font-size:.85rem}
.avatar-btn:hover{background:var(--surface-2)}
.avatar{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;font-size:.72rem;font-weight:700;color:#0b0e13;flex:none}
.chip{display:inline-flex;align-items:center;gap:.35rem;min-height:2rem;padding:0 .7rem;border-radius:999px;border:1px solid var(--line-2);color:var(--text-2);font-size:.82rem;white-space:nowrap}
.chip:hover{border-color:var(--muted);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:rgba(255,138,61,.5);color:var(--accent-2)}
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.work{background:var(--work-soft);color:var(--work)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.ice{background:var(--ice-soft);color:var(--ice)}
.pill.accent{background:var(--accent-soft);color:var(--accent-2)}
.kbd{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;border-radius:4px;border:1px solid var(--line-2);font:600 .68rem var(--mono);color:var(--muted);background:var(--bg-2)}

/* Forms */
label{display:grid;gap:.35rem;font-size:.82rem;color:var(--text-2);font-weight:550}
input,select,textarea{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);padding:.6rem .75rem;color:var(--text);font-size:.95rem}
textarea{resize:vertical;min-height:5.5rem;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(124,199,255,.18)}
input[type=checkbox],input[type=radio]{width:1.1rem;height:1.1rem;accent-color:var(--accent);padding:0}
.check{display:flex;align-items:center;gap:.55rem;font-weight:500;color:var(--text-2);font-size:.88rem}

/* Login */
.login{display:grid;grid-template-columns:minmax(320px,460px) 1fr;height:100%}
.login-panel{display:flex;flex-direction:column;justify-content:center;gap:1.1rem;padding:3rem;background:var(--bg-2);border-right:1px solid var(--line)}
.login-panel h1{font-size:2rem;line-height:1.15}
.login-panel form{display:grid;gap:.9rem;margin-top:.5rem}
.hint{font-size:.8rem;color:var(--muted)}
.login-art{display:grid;place-content:center;gap:1.5rem;justify-items:center;background:radial-gradient(1200px 500px at 60% 40%,rgba(124,199,255,.08),transparent 60%),var(--bg)}
.login-art p{letter-spacing:.3em;font-size:.72rem;color:var(--muted);font-weight:600}
.rink-art{width:min(560px,60vw);height:auto;stroke:rgba(180,200,230,.28);stroke-width:2}
.rink-art .red{stroke:rgba(255,107,107,.45)} .rink-art .blue{stroke:rgba(124,199,255,.45)} .rink-art .thin{stroke-width:1.2}

/* Top bar */
.topbar{display:flex;align-items:center;gap:.6rem;height:var(--top);padding:0 .75rem;border-bottom:1px solid var(--line);background:var(--bg-2)}
.match-head{display:grid;min-width:0;line-height:1.2;margin-left:.25rem}
.match-head strong{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-head span{font-size:.72rem;color:var(--muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock{display:flex;gap:1.1rem;margin-left:1.25rem;padding-left:1.25rem;border-left:1px solid var(--line)}
.clock div{display:grid;line-height:1.1}
.clock small{font-size:.6rem;letter-spacing:.18em;color:var(--muted);font-weight:700}
.clock span{font:600 .98rem var(--mono);font-variant-numeric:tabular-nums}
.sync-state{font-size:.75rem;color:var(--muted);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.sync-state::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ok)}
.sync-state.off::before{background:var(--bad)} .sync-state.wait::before{background:var(--work)}

/* Home */
.home{display:flex;flex-direction:column;height:100%}
.home-main{padding:2.5rem clamp(1rem,5vw,4rem);overflow:auto;display:grid;align-content:start;gap:.6rem}
.home-main h1{font-size:1.8rem}
.match-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:1.2rem}
.match-card{display:grid;gap:.9rem;text-align:left;padding:1.2rem;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.match-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.match-card h2{font-size:1.15rem}
.match-card .meta{display:flex;gap:.5rem;flex-wrap:wrap}
.match-card .bars{display:flex;gap:2px;height:6px}
.match-card .bars i{background:var(--line-2);border-radius:2px}

/* Studio layout */
.studio{display:flex;flex-direction:column;height:100%}
.workspace{flex:1;min-height:0;display:grid;grid-template-columns:var(--reels) minmax(0,1fr) var(--panel)}
.workspace.reels-closed{grid-template-columns:3.5rem minmax(0,1fr) var(--panel)}
.studio.present .workspace{grid-template-columns:minmax(0,1fr)!important}
.studio.present .reels,.studio.present .panel,.studio.present .palette,.studio.present .topbar,.studio.present .transport,.studio.present .queue-bar,.studio.present .tl-detail,.studio.present .tl-foot{display:none!important}
.studio.present .timeline{padding:.35rem .75rem}
.studio.present .tl-overview{margin:0}

/* Reels */
.reels{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--bg-2)}
.reels-head{display:flex;align-items:center;gap:.4rem;padding:.5rem .5rem .5rem .5rem;border-bottom:1px solid var(--line)}
.reels-title{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:var(--muted);text-transform:uppercase}
.reel-list{flex:1;padding:.4rem;display:grid;align-content:start;gap:2px}
.reel{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.5rem;padding:.45rem .5rem;border-radius:var(--r-sm);text-align:left;color:var(--text-2)}
.reel:hover{background:var(--surface)}
.reel[aria-current="true"]{background:var(--surface-2);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.reel .idx{font:600 .72rem var(--mono);color:var(--muted)}
.reel .name{font-size:.86rem;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel .sub{display:block;font-size:.72rem;color:var(--muted);font-weight:400}
.reel .dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end;max-width:3.5rem}
.reel .dots i{width:6px;height:6px;border-radius:50%}
.reel.missing .name{text-decoration:line-through;color:var(--muted)}
.reel-progress{grid-column:1/-1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.reel-progress i{display:block;height:100%;background:var(--accent)}
.reels-foot{margin:0;padding:.6rem .8rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--muted)}
.workspace.reels-closed .reels-title,.workspace.reels-closed #reels-count,.workspace.reels-closed .reels-foot,.workspace.reels-closed .reel .name,.workspace.reels-closed .reel .dots,.workspace.reels-closed .reel-progress{display:none}
.workspace.reels-closed .reel{grid-template-columns:1fr;justify-items:center;padding:.5rem 0}
.workspace.reels-closed .reels-head{justify-content:center}

/* Stage */
.stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.viewer{position:relative;flex:1;min-height:180px;background:#000;overflow:hidden;user-select:none;touch-action:none}
.frame{position:absolute;overflow:hidden;background:#000}
.frame video{width:100%;height:100%;display:block;transform-origin:50% 50%;will-change:transform}
.viewer.zoomed{cursor:grab}.viewer.panning{cursor:grabbing}
.hud{position:absolute;z-index:2;display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-radius:var(--r-sm);background:rgba(9,11,15,.72);backdrop-filter:blur(8px);font-size:.78rem;color:var(--text-2);pointer-events:none}
.hud-tl{top:.75rem;left:.75rem}
.hud-tl b{color:var(--text);font-weight:650}
.hud-tr{top:.75rem;right:.75rem;pointer-events:auto}
.hud-tr span{font:600 .8rem var(--mono)}
.hud-tr button{padding:.2rem .5rem;border-radius:4px;background:var(--surface-3);font-size:.75rem;font-weight:600}
.hud-center{inset:50% auto auto 50%;transform:translate(-50%,-50%);padding:.9rem 1.2rem;font-size:1.05rem;font-weight:650;color:var(--text);opacity:0;transition:opacity .25s}
.hud-center.show{opacity:1}
.viewer-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.5rem;color:var(--text-2);padding:2rem}
.present-bar{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--r-lg);background:rgba(9,11,15,.82);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.present-bar .title{padding:0 .6rem;font-weight:600;max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Transport */
.transport{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-top:1px solid var(--line);background:var(--bg-2);flex-wrap:wrap}
.t-group{display:flex;gap:2px;background:var(--surface);border-radius:var(--r);padding:2px}
.t-btn{display:inline-grid;place-items:center;min-width:2.6rem;height:2.5rem;padding:0 .5rem;border-radius:8px;font:650 .85rem var(--mono);color:var(--text-2)}
.t-btn:hover{background:var(--surface-3);color:var(--text)}
.t-sm{min-width:2.2rem}
.t-play{min-width:3rem;background:var(--text);color:var(--bg)}
.t-play:hover{background:#fff;color:var(--bg)}
.t-play svg{fill:currentColor;stroke:none}
.timecode{display:flex;align-items:baseline;gap:.35rem;height:2.5rem;padding:0 .7rem;border-radius:var(--r);font:600 1.05rem var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.timecode:hover{background:var(--surface)}
.tc-dur{font-size:.8rem;color:var(--muted)}
.seg{display:inline-flex;align-items:center;background:var(--surface);border-radius:var(--r);padding:2px;gap:2px}
.seg button{min-width:2.2rem;height:2.3rem;padding:0 .45rem;border-radius:8px;font-weight:650;font-size:.82rem;color:var(--text-2)}
.seg button:hover{background:var(--surface-3);color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.seg-sm button{min-width:1.9rem;height:1.9rem}
.seg-sm span{font:600 .75rem var(--mono);min-width:2.4rem;text-align:center;color:var(--muted)}
#mute-btn.off #mute-wave{opacity:0}

/* Palette */
.palette{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;padding:.5rem .75rem;background:var(--bg-2);border-top:1px solid var(--line)}
.mk{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;gap:.2rem .35rem;min-height:3.4rem;padding:.4rem .5rem .45rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-align:left;font-size:.76rem;line-height:1.15;color:var(--text);transition:transform .06s,background .12s}
.mk:hover{background:var(--surface-2);border-color:var(--line-2)}
.mk:active,.mk.hit{transform:scale(.97);background:var(--surface-3)}
.mk .glyph{width:1.15rem;height:1.15rem}
.mk .n{font:600 .7rem var(--mono);color:var(--muted)}
.mk .kbd{justify-self:end;height:1rem;min-width:1rem;font-size:.6rem}
.mk .lbl{grid-column:1/-1;font-weight:550;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere;hyphens:auto}
.mk.hidden-type{opacity:.4}
.palette.readonly .mk{pointer-events:none;opacity:.5}
.glyph{width:1rem;height:1rem;stroke-width:1.5}

/* Queue */
.queue-bar{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;background:linear-gradient(90deg,var(--accent-soft),transparent 70%);border-top:1px solid rgba(255,138,61,.35);flex-wrap:wrap}
.queue-bar .q-title{font-weight:650;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}
.queue-bar .q-pos{font:600 .8rem var(--mono);color:var(--accent-2)}
.queue-bar select{width:auto;padding:.25rem .5rem;font-size:.8rem;min-height:2rem}

/* Timeline */
.timeline{padding:.4rem .75rem .5rem;background:var(--bg-2);border-top:1px solid var(--line);user-select:none}
.tl-overview{position:relative;height:1.6rem;display:flex;gap:2px;margin-bottom:.35rem}
.tl-seg{position:relative;height:100%;border-radius:3px;background:var(--surface-2);overflow:hidden;cursor:pointer;min-width:2px}
.tl-seg:hover{background:var(--surface-3)}
.tl-seg.current{background:#2b3240;box-shadow:inset 0 0 0 1px var(--accent)}
.tl-seg.missing{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 3px,var(--bg) 3px,var(--bg) 6px)}
.tl-seg .tick{position:absolute;top:3px;bottom:3px;width:2px;border-radius:1px;transform:translateX(-1px)}
.tl-seg .dot{position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--text-2);transform:translateX(-2px)}
.tl-seg .prog{position:absolute;left:0;top:0;bottom:0;background:rgba(255,138,61,.18);pointer-events:none}
.tl-seg .per{position:absolute;left:4px;top:50%;transform:translateY(-50%);font-size:.6rem;font-weight:700;color:var(--muted);letter-spacing:.06em;pointer-events:none;white-space:nowrap}
.tl-detail{position:relative;height:7.2rem;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);overflow:hidden;cursor:text;touch-action:none}
.tl-ruler{position:absolute;left:0;right:0;top:0;height:1.4rem;border-bottom:1px solid var(--line)}
.tl-ruler i{position:absolute;top:0;width:1px;background:var(--line-2)}
.tl-ruler i.major{height:100%} .tl-ruler i.minor{height:35%}
.tl-ruler span{position:absolute;top:.2rem;font:500 .62rem var(--mono);color:var(--muted);transform:translateX(4px);white-space:nowrap}
.tl-lane{position:absolute;left:0;right:0}
.tl-lane-markers{top:1.6rem;height:2.6rem}
.tl-lane-threads{top:4.3rem;height:2.6rem;border-top:1px dashed var(--line)}
.tl-lane::before{position:absolute;left:.45rem;top:.15rem;font-size:.56rem;letter-spacing:.14em;color:#4d5566;font-weight:700}
.tl-lane-markers::before{content:"MARQUEURS"} .tl-lane-threads::before{content:"DISCUSSIONS"}
.tl-item{position:absolute;top:50%;transform:translate(-50%,-40%);display:grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .2rem;border-radius:6px;background:var(--surface);border:1px solid var(--line-2);cursor:pointer;z-index:1}
.tl-item:hover{border-color:var(--text-2);z-index:3}
.tl-item.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);z-index:2}
.tl-item .glyph{width:1rem;height:1rem}
.tl-item .badge{position:absolute;top:-.45rem;right:-.45rem;min-width:1rem;height:1rem;padding:0 .2rem;border-radius:999px;background:var(--text);color:var(--bg);font:700 .6rem var(--mono);display:grid;place-items:center}
.tl-item.pending{border-style:dashed;opacity:.75}
.tl-item.projected{background:transparent;border-style:dotted}
.tl-bubble{border-radius:999px;min-width:1.7rem;font:700 .66rem var(--mono);color:var(--text-2)}
.tl-bubble.unread::after{content:"";position:absolute;top:-2px;right:-2px;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.tl-bubble.st-open{border-color:var(--ice)} .tl-bubble.st-done{border-color:var(--ok);color:var(--ok)}
.tl-span{position:absolute;top:50%;height:.3rem;transform:translateY(-50%);border-radius:2px;background:var(--ice-soft);pointer-events:none}
.tl-selection{position:absolute;top:1.4rem;bottom:0;background:rgba(124,199,255,.12);border-left:1px solid var(--ice);border-right:1px solid var(--ice);pointer-events:none}
.tl-playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent);pointer-events:none;z-index:4}
.tl-playhead::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--accent)}
.tl-foot{display:flex;align-items:center;gap:.5rem;margin-top:.35rem;min-height:2rem;font-size:.78rem}
.tl-sel-actions{display:flex;gap:.35rem}

/* Panel */
.panel{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--bg-2)}
.tabs{display:flex;gap:.25rem;padding:.4rem .5rem 0;border-bottom:1px solid var(--line)}
.tabs button{flex:1;padding:.7rem .4rem .75rem;font-weight:600;font-size:.88rem;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.tabs .count{font:600 .7rem var(--mono);color:var(--muted);margin-left:.2rem}
.panel-body{flex:1;min-height:0;padding:.75rem}
.panel-foot{border-top:1px solid var(--line);padding:.6rem .75rem;background:var(--bg-2)}
.panel-foot:empty{display:none}
.section-title{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0 .5rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.section-title:first-child{margin-top:.1rem}
.section-title .spacer{flex:1}

/* Filters */
.filters{display:grid;gap:.5rem;margin-bottom:.6rem}
.search{position:relative}
.search input{padding-left:2.1rem;min-height:2.4rem}
.search svg{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--muted);width:1rem;height:1rem}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.evidence{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:var(--r);background:var(--ice-soft);color:var(--ice);font-size:.82rem;margin-bottom:.6rem}

/* Thread list */
.list{display:grid;gap:4px}
.item{display:grid;grid-template-columns:1.9rem 1fr auto;gap:.6rem;align-items:start;padding:.6rem .6rem;border-radius:var(--r);text-align:left;border:1px solid transparent}
.item:hover{background:var(--surface)}
.item[aria-current="true"]{background:var(--surface-2);border-color:var(--line-2)}
.item .ico{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:8px;background:var(--surface-2)}
.item .ico .glyph{width:1.05rem;height:1.05rem}
.item .t{font-weight:600;font-size:.9rem;line-height:1.25}
.item .m{display:flex;flex-wrap:wrap;gap:.3rem .5rem;margin-top:.25rem;font-size:.75rem;color:var(--muted);align-items:center}
.item .m .at{font-family:var(--mono);color:var(--text-2)}
.item .side{display:grid;justify-items:end;gap:.3rem}
.item .side .rep{font:600 .72rem var(--mono);color:var(--muted)}
.unread-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}
.item.deleted{opacity:.55}
.empty{padding:1.5rem 1rem;text-align:center;color:var(--muted);font-size:.88rem;border:1px dashed var(--line-2);border-radius:var(--r)}

/* Thread detail */
.back{display:inline-flex;align-items:center;gap:.3rem;color:var(--text-2);font-size:.85rem;padding:.3rem .4rem;margin-left:-.4rem;border-radius:var(--r-sm)}
.back:hover{color:var(--text);background:var(--surface)}
.back svg{width:1rem;height:1rem}
.th-head{display:grid;gap:.5rem;margin:.4rem 0 .8rem}
.th-head h2{font-size:1.15rem;line-height:1.25}
.th-kicker{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--muted)}
.stepper{display:flex;gap:3px;margin:.2rem 0}
.stepper span{flex:1;padding:.3rem .2rem;text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.04em;border-radius:4px;background:var(--surface);color:var(--muted)}
.stepper span.on{background:var(--accent-soft);color:var(--accent-2)}
.stepper span.done{background:var(--ok-soft);color:var(--ok)}
.anchors{display:flex;flex-wrap:wrap;gap:.35rem}
.anchor{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border-radius:var(--r-sm);background:var(--surface-2);font:600 .78rem var(--mono);color:var(--ice)}
.anchor:hover{background:var(--surface-3)}
.anchor svg{width:.85rem;height:.85rem;fill:currentColor;stroke:none}
.th-actions{display:flex;flex-wrap:wrap;gap:.35rem}
.tagcard{border:1px solid var(--line);border-radius:var(--r);padding:.6rem .7rem;display:grid;gap:.5rem;background:var(--surface)}
.tagcard + .tagcard{margin-top:.4rem}
.tagcard .row{display:flex;align-items:center;gap:.5rem}
.tagcard .name{font-weight:600;font-size:.88rem;flex:1}
.tagcard .fam{font-size:.72rem;color:var(--muted)}
.tagcard .crit{font-size:.76rem;color:var(--muted);line-height:1.35}
.tagcard .opinions{display:flex;flex-wrap:wrap;gap:.3rem;font-size:.72rem}
.vote{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.vote button{padding:.45rem .3rem;border-radius:6px;background:var(--bg-2);border:1px solid var(--line-2);font-size:.76rem;font-weight:600;color:var(--text-2)}
.vote button:hover{color:var(--text);border-color:var(--muted)}
.vote button[data-v="reussi"][aria-pressed="true"]{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.vote button[data-v="travail"][aria-pressed="true"]{background:var(--work-soft);border-color:var(--work);color:var(--work)}
.vote button[data-v="non-evaluable"][aria-pressed="true"]{background:var(--neutral-soft);border-color:var(--neutral);color:var(--text)}
.msgs{display:grid;gap:.9rem;margin-top:.3rem}
.msg{display:grid;grid-template-columns:1.9rem 1fr;gap:.6rem}
.msg .who{display:flex;gap:.5rem;align-items:baseline;font-size:.78rem}
.msg .who b{font-weight:650;color:var(--text)}
.msg .who time{color:var(--muted);font-size:.72rem}
.msg .body{margin-top:.15rem;font-size:.92rem;line-height:1.5;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.msg .body.deleted{color:var(--muted);font-style:italic}
.msg .tagref{display:inline-block;margin-top:.3rem}
.msg .ops{margin-top:.25rem}
.msg .ops button{font-size:.72rem;color:var(--muted)}
.msg .ops button:hover{color:var(--bad)}
.conclusion{border-left:3px solid var(--ok);background:var(--ok-soft);padding:.6rem .75rem;border-radius:0 var(--r) var(--r) 0;font-size:.9rem}
.conclusion small{display:block;color:var(--muted);font-size:.72rem;margin-top:.3rem}
.notice{padding:.55rem .7rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font-size:.8rem;color:var(--text-2)}
.notice.warn{border-color:rgba(255,198,92,.4);background:var(--work-soft);color:var(--work)}

/* Composer */
.composer{display:grid;gap:.5rem}
.composer textarea{min-height:3.2rem;max-height:12rem}
.composer .row{display:flex;gap:.5rem;align-items:center}
.composer .row select{flex:1;min-width:0;padding:.45rem .6rem;font-size:.82rem}
.composer .draft{font-size:.72rem;color:var(--muted)}
.capture{display:grid;gap:.25rem;padding:.6rem .75rem;border-radius:var(--r);background:var(--ice-soft);border:1px solid rgba(124,199,255,.3)}
.capture small{font-size:.65rem;letter-spacing:.16em;color:var(--ice);font-weight:700}
.capture b{font:650 .95rem var(--mono);color:var(--text)}
.quicktags{display:flex;flex-wrap:wrap;gap:.3rem}

/* Bilan */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.stat{display:grid;gap:.2rem;padding:.55rem .6rem;border-radius:var(--r);background:var(--surface);text-align:left;border:1px solid transparent}
.stat:hover{border-color:var(--line-2)}
.stat .v{font:700 1.3rem var(--mono);line-height:1}
.stat .l{display:flex;gap:.35rem;align-items:center;font-size:.7rem;color:var(--muted);line-height:1.15}
.stat.wide{grid-column:1/-1;grid-template-columns:auto 1fr;align-items:center;gap:.6rem}
.rate{display:grid;gap:.4rem;padding:.65rem .7rem;border-radius:var(--r);background:var(--surface)}
.rate + .rate{margin-top:4px}
.rate .row{display:flex;align-items:baseline;gap:.5rem}
.rate .name{flex:1;font-weight:600;font-size:.86rem}
.rate .pct{font:700 1rem var(--mono)}
.bar{display:flex;height:.45rem;border-radius:999px;overflow:hidden;background:var(--surface-3)}
.bar i{display:block;height:100%}
.bar .b-ok{background:var(--ok)} .bar .b-work{background:var(--work)}
.rate .nums{display:flex;flex-wrap:wrap;gap:.25rem}
.rate .nums button{font-size:.72rem;padding:.12rem .45rem;border-radius:999px;background:var(--bg-2);color:var(--text-2)}
.rate .nums button:hover{color:var(--text);background:var(--surface-3)}
.report{display:grid;gap:.5rem;padding:.8rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.report h4{margin:0;font-size:.68rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.report p{margin:0;font-size:.9rem;white-space:pre-wrap}

/* Groups */
.group{display:grid;grid-template-columns:1fr auto;gap:.25rem .5rem;align-items:center;padding:.6rem .7rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.group + .group{margin-top:4px}
.group .t{font-weight:600;font-size:.9rem}
.group .m{grid-column:1;font-size:.74rem;color:var(--muted)}
.group .acts{grid-row:1/3;grid-column:2;display:flex;gap:.3rem}

/* Popover, dialog, toasts */
.popover{position:fixed;z-index:50;min-width:220px;max-width:340px;max-height:60vh;overflow:auto;padding:.4rem;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.popover .pop-item{display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .55rem;border-radius:var(--r-sm);text-align:left;font-size:.86rem}
.popover .pop-item:hover{background:var(--surface-3)}
.popover .pop-item small{margin-left:auto;font:500 .74rem var(--mono);color:var(--muted)}
.popover hr{border:0;border-top:1px solid var(--line-2);margin:.3rem 0}
.popover .pop-head{padding:.35rem .55rem;font-size:.68rem;letter-spacing:.14em;color:var(--muted);font-weight:700;text-transform:uppercase}
.dialog{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);color:var(--text);padding:0;width:min(560px,calc(100vw - 2rem));max-height:calc(100vh - 3rem);box-shadow:var(--shadow)}
.dialog.wide{width:min(920px,calc(100vw - 2rem))}
.dialog::backdrop{background:rgba(3,5,8,.7);backdrop-filter:blur(3px)}
.dialog form{display:flex;flex-direction:column;max-height:calc(100vh - 3rem)}
.dialog header{display:flex;align-items:center;gap:.5rem;padding:.9rem 1rem .6rem 1.2rem}
.dialog header h2{flex:1;font-size:1.1rem}
.dialog-body{padding:.2rem 1.2rem 1rem;overflow:auto;display:grid;gap:.85rem}
.dialog .error{padding:0 1.2rem}
.dialog footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.8rem 1.2rem 1rem;border-top:1px solid var(--line)}
.dialog footer:empty{display:none}
.keys{display:grid;grid-template-columns:repeat(2,1fr);gap:.3rem 1.5rem;font-size:.86rem}
.keys div{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;border-bottom:1px solid var(--line)}
.keys .kbd{font-size:.72rem;height:1.4rem;min-width:1.4rem}
.toast-stack{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:60;display:grid;gap:.5rem;justify-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:.75rem;padding:.6rem .6rem .6rem 1rem;border-radius:var(--r);background:var(--text);color:var(--bg);font-size:.88rem;font-weight:550;box-shadow:var(--shadow);pointer-events:auto;max-width:min(560px,90vw)}
.toast.bad{background:#ffd5d5;color:#3b0a0a}
.toast button{padding:.3rem .65rem;border-radius:6px;background:rgba(0,0,0,.1);font-weight:700;font-size:.82rem}
.toast button:hover{background:rgba(0,0,0,.18)}
.tagpick{display:grid;gap:.6rem;max-height:52vh;overflow:auto}
.tagpick .fam h3{font-size:.72rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:.3rem}
.tagpick .fam div{display:flex;flex-wrap:wrap;gap:.3rem}
.sheet-view{display:grid;grid-template-columns:200px 1fr;gap:1rem;min-height:60vh}
.sheet-view img{width:100%;border-radius:var(--r-sm);background:#fff}
.sheet-list{display:grid;align-content:start;gap:4px}

/* Responsive : iPad paysage et portrait */
@media (max-width:1366px){:root{--panel:360px;--reels:220px}}
@media (max-width:1180px){
  :root{--panel:340px}
  .workspace{grid-template-columns:3.5rem minmax(0,1fr) var(--panel)}
  .workspace .reels-title,.workspace #reels-count,.workspace .reels-foot,.workspace .reel .name,.workspace .reel .dots,.workspace .reel-progress{display:none}
  .workspace .reel{grid-template-columns:1fr;justify-items:center;padding:.5rem 0}
  .workspace .reels-head{justify-content:center}
  .workspace.reels-open{grid-template-columns:var(--reels) minmax(0,1fr) var(--panel)}
  .workspace.reels-open .reels-title,.workspace.reels-open #reels-count,.workspace.reels-open .reels-foot,.workspace.reels-open .reel .name,.workspace.reels-open .reel .dots,.workspace.reels-open .reel-progress{display:revert}
  .workspace.reels-open .reel{grid-template-columns:2rem 1fr auto;justify-items:stretch;padding:.45rem .5rem}
  .palette{grid-template-columns:repeat(5,minmax(0,1fr))}
  .clock div:last-child{display:none}
  .sync-state span{display:none}
}
@media (max-width:900px){
  .workspace,.workspace.reels-closed,.workspace.reels-open{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)}
  .reels{position:fixed;z-index:30;top:var(--top);bottom:0;left:0;width:min(300px,85vw);transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
  .workspace.reels-open .reels{transform:none}
  .reels .reels-title,.reels #reels-count,.reels .reels-foot,.reels .reel .name,.reels .reel .dots,.reels .reel-progress{display:revert!important}
  .reels .reel{grid-template-columns:2rem 1fr auto!important;justify-items:stretch!important;padding:.45rem .5rem!important}
  .viewer{flex:none;aspect-ratio:16/9;min-height:0}
  .panel{border-left:0;border-top:1px solid var(--line);min-height:0}
  .palette{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tl-detail{height:6rem}.tl-lane-markers{height:2.2rem}.tl-lane-threads{top:3.8rem;height:2.2rem}
  .clock{display:none}
  .login{grid-template-columns:1fr}.login-art{display:none}
}
@media (pointer:coarse){
  .t-btn,.icon-btn{height:2.9rem;min-width:2.9rem}
  .mk{min-height:3.2rem}
  .tl-item{min-width:2.2rem;height:2.2rem}
  .tl-detail{height:8.4rem}
  .tl-lane-markers{height:3rem}.tl-lane-threads{top:4.8rem;height:3rem}
}
.kbd-on{color:inherit;border-color:rgba(0,0,0,.25);background:transparent}
.transport{flex-wrap:nowrap}
@media (max-width:1180px){.transport{flex-wrap:wrap}}
.timecode{white-space:nowrap}
.tl-item .stack{display:flex;gap:1px}
.tl-item .stack .glyph{width:.8rem;height:.8rem}
.portrait-only{display:none}
@media (max-width:900px){.portrait-only{display:inline-grid}}
@media (max-width:900px){
  .transport{flex-wrap:nowrap;gap:.4rem;padding:.45rem .6rem}
  .transport [data-action="frame-back"],.transport [data-action="frame-fwd"]{display:none}
  .timecode{padding:0 .3rem;font-size:.95rem}
  .tl-foot{margin-top:.2rem}
}
:root.large .palette{grid-template-columns:repeat(5,minmax(0,1fr))}
:root.large .clock div:last-child{display:none}
:root.large .transport{flex-wrap:wrap}
/* Palette 0.9 : favoris (touches 1–8) ou familles complètes avec résultat en un geste */
.palette{display:flex!important;gap:6px;align-items:stretch}
.pal-row{flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(5.6rem,1fr));gap:4px}
.pal-mode{flex-direction:column;align-self:center}
.pal-mode button{min-width:3.8rem}
.palette.full{flex-wrap:wrap}
.pal-fams{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;flex:1 1 100%}
.palette.full .pal-row.singles{flex:1}
.fam{display:grid;align-content:start;gap:4px;padding:.35rem;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.fam-head{display:flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;color:var(--text-2);padding:0 .15rem}
.fam-head span:nth-child(2){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam-head .n{font:600 .68rem var(--mono);color:var(--muted)}
.fam-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.2rem,1fr));gap:3px}
.mk.opt{min-height:2.6rem;padding:.3rem .4rem;font-size:.72rem}
.mk.opt.none{opacity:.75}
.mk.opt .glyph{width:1rem;height:1rem}
.vote.outcome{margin-top:.2rem}
@media (max-width:1180px){.pal-fams{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.pal-fams{grid-template-columns:repeat(2,minmax(0,1fr))}.pal-mode{flex-direction:row}}
@media (max-width:1366px){.pal-row{grid-template-columns:repeat(auto-fit,minmax(4.3rem,1fr))}.pal-row .mk .lbl{font-size:.7rem}}
.viewer{min-height:140px}