/* © 2026 IG Tools — All rights reserved. */
/* Sync Audio & Video — page styles (design/sync-audio-video boards S1–S8). Shell bar: shell.css + ../shared/convshell.css. */
:root{--logo:#FF6A00;--sav-tlb:#FFE9DA;--sav-ok:#1E7B34;--sav-okb:#E3F5E8;--sav-wn:#9A4600;--sav-wnb:#FFF1E0;--sav-er:#B3261E;--sav-erb:#FCE8E6;--sav-at:#DCE9FF;--sav-ac:#0071E3}
:root[data-theme="dark"]{--sav-tlb:#3A2412;--sav-ok:#30D158;--sav-okb:#16301D;--sav-wn:#FFB340;--sav-wnb:#3A2A12;--sav-er:#FF8A80;--sav-erb:#3A1714;--sav-at:#1B2B4A;--sav-ac:#4C8DFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sav-tlb:#3A2412;--sav-ok:#30D158;--sav-okb:#16301D;--sav-wn:#FFB340;--sav-wnb:#3A2A12;--sav-er:#FF8A80;--sav-erb:#3A1714;--sav-at:#1B2B4A;--sav-ac:#4C8DFF}}
svg.igi.fill{fill:currentColor}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:0;border-radius:var(--r-control,12px);background:var(--sav-ac);color:#fff;font:700 15px/1 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease-out,opacity .15s}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.big{min-height:56px;width:100%;font-size:16.5px;border-radius:16px}
.btn.ghost{background:var(--panel);color:var(--sav-ac);border:1px solid var(--line)}
.btn.done{background:var(--sav-ok)}

/* S1 entry */
.drop{margin:14px 0 0;border:2px dashed var(--line);border-radius:22px;background:var(--panel);padding:26px 18px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.drop .icons{display:flex;gap:10px}
.drop .icons span{width:52px;height:52px;border-radius:16px;background:var(--sav-tlb);color:var(--logo);display:flex;align-items:center;justify-content:center}
.drop h2{margin:6px 0 0;font:800 21px/1.2 var(--sans);letter-spacing:-.01em;color:var(--text)}
.drop p{margin:0;font:500 13.5px/1.45 var(--sans);color:var(--muted);max-width:440px}
.drop .btn{margin-top:6px;max-width:420px}
.mainhint{display:flex;align-items:center;gap:6px;font:600 12.5px var(--sans);color:var(--text)}
.mainhint svg{color:#C98A00}
.priv{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font:500 12.5px var(--sans);color:var(--muted)}
.priv svg{color:var(--sav-ok)}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.ft{background:var(--panel);border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;font:600 12px var(--sans);color:var(--text)}
.ft .fic{width:40px;height:40px;border-radius:12px;background:var(--sav-at);color:var(--sav-ac);display:flex;align-items:center;justify-content:center}
.ft small{font:500 11px var(--sans);color:var(--muted)}
.tip{margin-top:12px;background:var(--panel);border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;font:500 12.5px/1.45 var(--sans);color:var(--text)}
.tip svg{color:var(--logo);flex:none}

/* S2 files */
.lab{display:flex;align-items:center;justify-content:space-between;padding:16px 2px 8px;font:700 12.5px var(--sans);color:var(--muted);letter-spacing:.03em}
.labacts{display:flex;gap:4px}
.labacts button{border:0;background:transparent;color:var(--sav-ac);font:600 13px var(--sans);display:flex;align-items:center;gap:4px;min-height:40px;padding:0 6px;cursor:pointer}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.row{background:var(--panel);border-radius:16px;padding:10px;display:flex;gap:11px;align-items:center}
.row.main{box-shadow:inset 0 0 0 2px #E8A500}
.th{width:58px;height:58px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.th.v1{background:linear-gradient(160deg,#5B6B78,#22303A 60%,#0F171D)}
.th.v2{background:linear-gradient(160deg,#7A6A55,#3A3127 60%,#16120E)}
.th.v3{background:linear-gradient(160deg,#4F6E5C,#22362B 60%,#0E1812)}
.th.au{background:var(--sav-tlb);color:var(--logo)}
.th .n{position:absolute;left:4px;top:4px;width:18px;height:18px;border-radius:9px;background:rgba(0,0,0,.55);font:700 10.5px var(--sans);display:flex;align-items:center;justify-content:center;color:#fff}
.bd{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.nm{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nmi{font:700 15px var(--sans);color:var(--text);background:transparent;border:0;border-bottom:1px dashed transparent;padding:2px 0;width:9.5em;max-width:100%;outline:0}
.nmi:focus,.nmi:hover{border-bottom-color:var(--line)}
.star{height:20px;border-radius:10px;padding:0 7px;background:#FFF3CC;color:#7A5200;font:700 10.5px var(--sans);display:flex;align-items:center;gap:3px}
:root[data-theme="dark"] .star{background:#3D3110;color:#FFD466}
.au-tag{height:20px;border-radius:10px;padding:0 7px;background:var(--sav-tlb);color:var(--sav-wn);font:700 10.5px var(--sans);display:flex;align-items:center;gap:3px}
.fl{font:500 12px var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:22px;border-radius:7px;padding:0 7px;background:var(--fill);font:600 11px var(--sans);color:var(--text);display:inline-flex;align-items:center;gap:4px}
.chip svg{color:var(--muted)}
.del{width:44px;height:44px;border:0;background:transparent;color:var(--muted);border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.note2{margin:10px 2px 0;font:500 12.5px var(--sans);color:var(--muted)}
.go{margin:16px 0 4px}
.go small{display:block;text-align:center;margin-top:8px;font:500 12px var(--sans);color:var(--muted)}

/* S4 results */
.sum{margin:14px 0 0;display:flex;align-items:center;gap:8px;background:var(--sav-at);color:var(--text);border-radius:12px;padding:9px 12px;font:600 12.5px var(--sans)}
.sum svg{color:var(--sav-ac);flex:none}
.mainc{margin:10px 2px 0;display:flex;align-items:center;gap:8px;font:600 13px var(--sans);color:var(--muted)}
.mainc svg{color:#C98A00}
.mainc b{color:var(--text)}
.cards{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.rc{background:var(--panel);border-radius:16px;padding:12px 12px 12px 14px}
.rc .hd{display:flex;align-items:center;gap:8px;font:700 14px var(--sans);color:var(--text)}
.rc .hd svg{color:var(--muted)}
.cf{margin-left:auto;height:22px;border-radius:11px;padding:0 8px;font:700 11px var(--sans);display:flex;align-items:center;gap:3px}
.cf.ok{background:var(--sav-okb);color:var(--sav-ok)}.cf.w{background:var(--sav-wnb);color:var(--sav-wn)}.cf.e{background:var(--sav-erb);color:var(--sav-er)}
.cf svg{color:inherit!important}
.big{display:flex;align-items:center;gap:10px;margin-top:6px}
.tc{font:800 32px/1.1 var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text)}
.tc.neg{color:var(--sav-wn)}
.cp{margin-left:auto;min-height:44px;padding:0 13px;border:0;border-radius:12px;background:var(--sav-at);color:var(--sav-ac);font:700 13px var(--sans);display:flex;align-items:center;gap:6px;cursor:pointer}
.cp.done{background:var(--sav-okb);color:var(--sav-ok)}
.say{margin:4px 0 0;font:500 13px/1.45 var(--sans);color:var(--text)}
.fr{margin-top:5px;font:500 11.5px var(--sans);color:var(--muted)}
.drift{margin-top:8px;display:flex;gap:7px;align-items:flex-start;background:var(--sav-wnb);color:var(--sav-wn);border-radius:10px;padding:8px 10px;font:600 11.5px/1.35 var(--sans)}
.drift svg{flex:none}
.acts{display:flex;gap:8px;margin-top:12px}
.acts .btn{flex:1}

/* S5 check */
.pnl{margin-top:10px;background:var(--panel);border-radius:18px;padding:12px}
.pnl .ph{display:flex;align-items:center;gap:8px;font:700 14px var(--sans);color:var(--text)}
.pnl .ph svg{color:var(--sav-ac)}
.pnl .x{margin-left:auto;width:40px;height:40px;border:0;border-radius:10px;background:var(--fill);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
#tl{display:block;width:100%;margin-top:10px}
.lis{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.pairs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.pairs button{min-height:36px;border-radius:18px;padding:0 12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 12px var(--sans);cursor:pointer}
.pairs button.on{background:var(--sav-ac);border-color:var(--sav-ac);color:#fff}
.ear{display:flex;gap:8px;margin-top:10px}
.ear div{flex:1;background:var(--fill);border-radius:12px;padding:8px 10px;font:600 12px var(--sans);color:var(--text)}
.ear small{display:block;font:600 10px var(--sans);color:var(--muted);margin-bottom:2px}
.pl{display:flex;align-items:center;gap:10px;margin-top:10px;background:#1C1C1E;border-radius:14px;padding:6px 12px 6px 6px;color:#fff}
.pl button{width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pl input{flex:1;accent-color:#fff}
.pl span{font:600 11.5px var(--sans);font-variant-numeric:tabular-nums}
.hint{margin:8px 0 0;font:500 11.5px/1.45 var(--sans);color:var(--muted)}
/* "Sesli video" download (1 video + 1 recorder) — mockup S6 */
.out{margin-top:10px;border-radius:20px;background:var(--panel);padding:16px;box-shadow:inset 0 0 0 2px var(--sav-ac)}
.oh{display:flex;align-items:center;gap:12px}
.oi{width:48px;height:48px;border-radius:14px;background:var(--sav-at);color:var(--sav-ac);display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.oi em{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;border-radius:12px;background:var(--logo);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--panel)}
.oh h3{margin:0;font:800 17px var(--sans);color:var(--text)}
.oh p{margin:2px 0 0;font:500 12.5px var(--sans);color:var(--muted)}
.ochips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.ochips span{min-height:26px;border-radius:8px;padding:0 9px;background:var(--fill);font:600 11.5px var(--sans);color:var(--text);display:inline-flex;align-items:center;gap:5px}
.ochips svg{color:var(--sav-ok)}
.obtns{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ogap{margin-top:10px;display:flex;gap:7px;align-items:flex-start;font:500 12px/1.4 var(--sans);color:var(--muted)}
.ogap svg{flex:none;margin-top:1px}
.pvbox{margin-top:10px;border-radius:12px;overflow:hidden;background:#000}
.pv video{display:block;width:100%;max-height:62vh;background:#000;cursor:pointer}
.msg{margin:10px 2px 0;padding:11px 13px;border-radius:12px;background:var(--sav-erb);color:var(--text);font-size:14px;line-height:1.45}

@media (min-width:900px){
  .drop{padding:40px 30px}
  .feat{grid-template-columns:repeat(3,minmax(0,1fr))}
}