:root {
    --bg:#f5f5fc; --card:#ffffff; --fg:#1d1b2e; --muted:#6e6c85; --line:#e8e7f3;
    --accent:#5b5bf0; --accent2:#a35bf0; --soft:#efeefe;
    --grad:linear-gradient(135deg,#5b5bf0 0%,#a35bf0 62%,#f05bb0 100%);
    --ok:#139a6b; --okbg:#e2f6ee; --warn:#c98300; --warnbg:#fff3d6; --danger:#d93f5a; --mark:#ffe58a; --pinkbg:#fde6f1;
    --shadow:0 1px 2px rgba(40,30,90,.06),0 10px 28px rgba(40,30,90,.08);
    --head:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#12111c; --card:#1b1a29; --fg:#efeef7; --muted:#a3a2bb; --line:#2c2b3f; --accent:#8f8fff; --accent2:#c08bff; --soft:#262445;
      --grad:linear-gradient(135deg,#4a4ad8 0%,#8a4ad8 62%,#d84a9a 100%);
      --ok:#4fd8a0; --okbg:#173a2e; --warn:#f0bd4a; --warnbg:#3d3213; --danger:#ff7a93; --mark:#6b5a10; --pinkbg:#3d1d30;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"] {
    --bg:#12111c; --card:#1b1a29; --fg:#efeef7; --muted:#a3a2bb; --line:#2c2b3f; --accent:#8f8fff; --accent2:#c08bff; --soft:#262445;
    --grad:linear-gradient(135deg,#4a4ad8 0%,#8a4ad8 62%,#d84a9a 100%);
    --ok:#4fd8a0; --okbg:#173a2e; --warn:#f0bd4a; --warnbg:#3d3213; --danger:#ff7a93; --mark:#6b5a10; --pinkbg:#3d1d30;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
  }
  html { height:100%; scroll-padding-top:env(safe-area-inset-top,0px); }
  * { box-sizing:border-box; }
  [hidden] { display:none !important; }
  body { height:100%; margin:0; font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--fg); }
  h1,h2,h3,.brand { font-family:var(--head); }
  h1 { font-size:26px; margin:0; letter-spacing:-.01em; }
  button { font:inherit; cursor:pointer; border:0; border-radius:10px; padding:9px 16px; background:var(--grad); color:#fff; font-weight:600; transition:transform .12s, box-shadow .12s, opacity .12s; }
  button:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(91,91,240,.28); }
  button.sec { background:var(--card); color:var(--accent); border:1px solid var(--line); box-shadow:none; }
  button.sec:hover { background:var(--soft); }
  button.ghost { background:transparent; color:var(--muted); padding:6px 10px; box-shadow:none; font-weight:500; }
  button.ghost:hover { color:var(--fg); background:var(--soft); transform:none; }
  button.danger { background:transparent; color:var(--danger); border:1px solid var(--line); box-shadow:none; }
  button.danger:hover { background:var(--pinkbg); }
  button:disabled { opacity:.55; cursor:default; transform:none; box-shadow:none; }
  input, select { font:inherit; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); }
  input[type=checkbox] { width:auto; }
  input:focus, select:focus, button:focus-visible, .wave:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
  label.fld { display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:4px; }
  .muted { color:var(--muted); } .small { font-size:12.5px; }
  .row { display:flex; gap:8px; align-items:center; } .between { justify-content:space-between; } .wrap-row { flex-wrap:wrap; }
  .stack > * + * { margin-top:10px; }
  .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; }
  .brand i { font-style:normal; background:var(--grad); color:#fff; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:18px; box-shadow:0 6px 16px rgba(91,91,240,.35); }
  mark { background:var(--mark); color:inherit; border-radius:4px; padding:0 2px; }
  @keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .rise { animation:rise .35s ease both; }
  @media (prefers-reduced-motion: reduce) { .rise { animation:none; } button:hover { transform:none; } }

  /* ---------- вхід ---------- */
  #login { position:fixed; inset:0; z-index:20; background:var(--bg); display:grid; grid-template-columns:1.1fr 1fr; }
  .login-art { position:relative; overflow:hidden; background:var(--grad); color:#fff; padding:56px 52px; display:flex; flex-direction:column; justify-content:center; }
  .login-art::before, .login-art::after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); }
  .login-art::before { width:420px; height:420px; right:-120px; top:-120px; } .login-art::after { width:300px; height:300px; left:-90px; bottom:-90px; }
  .login-art > * { position:relative; z-index:1; }
  .login-art h2 { font-size:36px; line-height:1.15; margin:26px 0 14px; letter-spacing:-.02em; }
  .login-art p { opacity:.9; max-width:420px; margin:0 0 24px; }
  .feat { display:flex; gap:12px; align-items:center; margin:12px 0; font-weight:600; }
  .feat span { width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:18px; }
  .login-side { display:flex; align-items:center; justify-content:center; padding:28px; }
  .login-card { width:100%; max-width:360px; } .login-card h1 { font-size:28px; margin-bottom:4px; }
  .hint { background:var(--soft); border-radius:12px; padding:12px 14px; font-size:13px; }
  .err { color:var(--danger); min-height:1.3em; font-size:13px; }

  /* ---------- каркас ---------- */
  .app { height:100%; display:grid; grid-template-columns:350px 1fr; }
  aside { background:var(--card); border-right:1px solid var(--line); padding:18px 16px; overflow:auto; }
  main { overflow:auto; padding:26px 32px 70px; }
  .inner { max-width:1000px; margin:0 auto; }
  .who { display:flex; align-items:center; gap:10px; margin:16px 0 4px; padding:10px 12px; background:var(--soft); border-radius:14px; }
  .who b { display:block; font-size:14px; line-height:1.2; }
  .newbtn { width:100%; margin-top:14px; padding:12px; font-size:15px; }
  .newbox { background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px; margin-top:12px; }
  .tabs2 { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--soft); border-radius:12px; padding:4px; }
  .tabs2 button { background:transparent; color:var(--muted); box-shadow:none; padding:8px 6px; font-size:13px; transform:none; }
  .tabs2 button.on { background:var(--card); color:var(--accent); box-shadow:var(--shadow); }
  .navlist { margin:14px 0 12px; display:grid; gap:2px; }
  .navb { width:100%; text-align:left; background:transparent; color:var(--fg); box-shadow:none; padding:10px 12px; display:flex; align-items:center; gap:10px; font-weight:600; transform:none; }
  .navb:hover { background:var(--soft); box-shadow:none; transform:none; } .navb.on { background:var(--soft); color:var(--accent); }
  .badge { margin-left:auto; background:var(--accent); color:#fff; border-radius:99px; font-size:11.5px; padding:0 8px; min-width:22px; text-align:center; }
  .search { position:relative; } .search input { padding-left:38px; } .search span { position:absolute; left:12px; top:9px; opacity:.6; }
  .item { padding:11px 12px; border-radius:14px; cursor:pointer; border:1px solid transparent; display:grid; grid-template-columns:10px 1fr; gap:10px; transition:background .12s; }
  .item:hover { background:var(--bg); } .item.active { background:var(--soft); border-color:var(--line); }
  .dot { width:10px; height:10px; border-radius:50%; background:var(--ok); margin-top:7px; } .dot.p { background:var(--warn); }
  .item .t { font-weight:700; line-height:1.3; }

  /* ---------- пілюлі, аватари ---------- */
  .pill { display:inline-block; font-size:11.5px; padding:2px 9px; border-radius:99px; background:var(--soft); color:var(--accent); font-weight:600; white-space:nowrap; }
  .pill.warn { background:var(--warnbg); color:var(--warn); } .pill.ok { background:var(--okbg); color:var(--ok); } .pill.off { background:var(--line); color:var(--muted); }
  .av { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; font-size:12px; font-weight:800; flex:none; border:2px solid var(--card); }
  .av.sm { width:24px; height:24px; font-size:10px; } .av.lg { width:64px; height:64px; font-size:22px; border-color:rgba(255,255,255,.25); } .av.un { background:var(--line); color:var(--muted); }
  .avs { display:inline-flex; } .avs .av + .av { margin-left:-8px; }
  .tint0 { background:var(--soft); } .tint1 { background:var(--okbg); } .tint2 { background:var(--warnbg); } .tint3 { background:var(--pinkbg); }

  /* ---------- головна ---------- */
  .welcome { background:var(--grad); color:#fff; border-radius:22px; padding:30px 32px; position:relative; overflow:hidden; box-shadow:var(--shadow); }
  .welcome::after { content:"🎬"; position:absolute; right:26px; top:10px; font-size:110px; opacity:.16; }
  .welcome h1 { font-size:30px; } .welcome p { margin:8px 0 0; opacity:.92; max-width:540px; }
  .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 6px; }
  .stat { background:var(--card); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow); display:flex; gap:14px; align-items:center; }
  .stat .ic { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px; }
  .stat b { font-family:var(--head); font-size:24px; display:block; line-height:1.1; }
  .sect { font-family:var(--head); font-size:16px; font-weight:800; margin:32px 0 12px; display:flex; align-items:center; gap:10px; }
  .sect .si { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; }
  .sect .more { margin-left:auto; }
  .mgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
  .mcard { background:var(--card); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; cursor:pointer; transition:transform .15s; } .mcard:hover { transform:translateY(-3px); }
  .mcard .mt { font-weight:800; font-family:var(--head); padding:12px 14px 0; line-height:1.3; } .mcard .md { padding:2px 14px 14px; }
  .thumb { aspect-ratio:16/9; display:grid; place-items:center; position:relative; }
  .thumb .dur { position:absolute; right:10px; bottom:8px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; padding:1px 8px; border-radius:99px; }
  .thumb .vi { position:absolute; left:10px; top:8px; font-size:14px; }
  .thumb .avs .av { border-color:rgba(255,255,255,.35); }

  /* ---------- картка зустрічі ---------- */
  .hero { background:radial-gradient(circle at 92% -25%,rgba(255,255,255,.2) 0 170px,transparent 171px), var(--grad); color:#fff; border-radius:22px; padding:22px 26px; box-shadow:var(--shadow); position:relative; }
  .title-input { font:800 26px var(--head); letter-spacing:-.01em; border:1px dashed transparent; background:transparent; color:#fff; padding:4px 8px; margin-left:-8px; border-radius:10px; }
  .title-input:hover, .title-input:focus { border-color:rgba(255,255,255,.5); outline:none; }
  .chip { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.18); padding:4px 12px; border-radius:99px; font-size:13px; font-weight:600; }
  .hero .avs .av { border-color:rgba(255,255,255,.55); }
  .glass { background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.3); box-shadow:none; padding:7px 13px; font-size:13.5px; }
  .glass:hover { background:rgba(255,255,255,.3); box-shadow:none; }
  .menuwrap { position:relative; }
  .menu { position:absolute; left:0; top:calc(100% + 8px); background:var(--card); color:var(--fg); border-radius:14px; box-shadow:0 12px 40px rgba(20,10,60,.3); padding:6px; min-width:270px; z-index:15; }
  .menu button { width:100%; text-align:left; background:transparent; color:var(--fg); box-shadow:none; padding:10px 12px; display:flex; gap:10px; align-items:center; transform:none; font-weight:600; }
  .menu button:hover { background:var(--soft); box-shadow:none; } .menu small { display:block; font-weight:400; color:var(--muted); font-size:12px; }
  .panel { background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:16px 18px; }
  .summary { background:linear-gradient(135deg,var(--soft),var(--card) 70%); border:1px solid var(--line); border-left:6px solid var(--accent); border-radius:20px; padding:28px 32px; box-shadow:var(--shadow); }
  .summary .lead { font-size:18px; line-height:1.78; margin:0 0 14px; }
  .summary h3 { font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--accent); margin:24px 0 12px; }
  .keys { list-style:none; margin:0; padding:0; display:grid; gap:9px; } .keys li { display:flex; gap:12px; font-size:16.5px; line-height:1.5; }
  .keys li::before { content:"◆"; color:var(--accent2); font-size:11px; margin-top:6px; flex:none; }
  .vidwrap { padding:14px; }
  .vid { aspect-ratio:16/9; border-radius:14px; background:linear-gradient(135deg,#1c1b33,#2d2a5a 60%,#3b2a5a); position:relative; padding:44px 14px 14px; overflow:hidden; }
  #vcontent { height:100%; display:grid; gap:12px; align-content:center; } #vcontent.sharing { display:block; }
  .tile { background:rgba(255,255,255,.07); border:2px solid transparent; border-radius:14px; display:grid; place-items:center; position:relative; min-height:0; aspect-ratio:4/3; transition:border-color .2s, box-shadow .2s; }
  .tile.speaking { border-color:var(--accent2); box-shadow:0 0 0 4px rgba(163,91,240,.25); }
  .tile .tn { z-index:2; position:absolute; left:10px; bottom:8px; background:rgba(0,0,0,.5); color:#fff; font-size:12px; padding:1px 9px; border-radius:99px; }
  .eq { z-index:2; position:absolute; right:10px; bottom:10px; display:flex; gap:2px; align-items:flex-end; height:14px; opacity:0; } .tile.speaking .eq { opacity:1; }
  .eq i { width:3px; background:#fff; border-radius:2px; height:100%; animation:eq .7s ease-in-out infinite; } .eq i:nth-child(2){animation-delay:.15s} .eq i:nth-child(3){animation-delay:.3s}
  @keyframes eq { 50% { height:30%; } }
  .rec, .q { position:absolute; top:12px; font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,.45); padding:2px 10px; border-radius:99px; z-index:2; } .rec { left:14px; } .rec::first-letter { color:#ff4d5e; } .q { right:14px; }
  .bigplay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; font-size:26px; padding:0 0 0 5px; z-index:3; box-shadow:0 10px 30px rgba(0,0,0,.4); } .bigplay:hover { transform:translate(-50%,-50%) scale(1.06); }
  .player { display:flex; align-items:center; gap:14px; margin-top:14px; }
  .player > button#play { width:44px; height:44px; border-radius:50%; padding:0; font-size:15px; flex:none; }
  .wave { flex:1; display:flex; align-items:center; gap:2px; height:52px; cursor:pointer; border-radius:8px; }
  .wave i { flex:1; background:var(--line); border-radius:3px; min-width:2px; transition:background .1s; } .wave i.on { background:var(--accent); }
  .time { font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted); min-width:96px; text-align:right; }
  .spd { padding:5px 10px; font-size:12.5px; min-width:46px; }
  .tags { display:flex; flex-wrap:wrap; gap:8px; } .tag { padding:6px 14px; border-radius:99px; font-weight:600; font-size:13.5px; }
  .li { display:flex; gap:12px; align-items:flex-start; background:var(--card); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow); } .li + .li { margin-top:8px; }
  .li .ic { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; flex:none; margin-top:1px; }
  .li.ok .ic { background:var(--okbg); color:var(--ok); } .li.warn .ic { background:var(--warnbg); color:var(--warn); }
  .task { display:flex; gap:12px; align-items:center; background:var(--card); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow); cursor:pointer; transition:opacity .15s; } .task + .task { margin-top:8px; }
  .task input { width:20px; height:20px; padding:0; accent-color:var(--accent); flex:none; }
  .task .txt { flex:1; } .task.done .txt { text-decoration:line-through; opacity:.55; }
  .lnk { background:transparent; color:var(--accent); padding:0; box-shadow:none; font-weight:500; font-size:12.5px; transform:none; text-align:left; } .lnk:hover { text-decoration:underline; box-shadow:none; transform:none; }
  .who-chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; white-space:nowrap; }
  .msg { display:grid; grid-template-columns:36px 1fr; gap:12px; padding:10px 12px; border-radius:14px; transition:background .15s; } .msg.now { background:var(--soft); }
  .msg .head { display:flex; gap:10px; align-items:center; margin-bottom:1px; }
  .msg .nm { background:transparent; color:var(--fg); font-weight:800; padding:0; border-radius:6px; box-shadow:none; font-family:var(--head); border-bottom:1px dashed transparent; transform:none; }
  .msg .nm:hover { color:var(--accent); border-bottom-color:var(--accent); box-shadow:none; transform:none; } .msg .nm.unnamed { color:var(--muted); }
  .msg .ts { color:var(--accent); font-size:12.5px; cursor:pointer; font-variant-numeric:tabular-nums; background:var(--soft); padding:1px 8px; border-radius:99px; }
  .msg input { width:180px; padding:3px 8px; border-radius:8px; }
  .steps { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 6px; }
  .step { padding:8px 16px; border-radius:99px; border:1px solid var(--line); background:var(--card); color:var(--muted); font-size:13.5px; font-weight:600; }
  .step.on { background:var(--soft); color:var(--accent); border-color:var(--accent); animation:pulse 1.4s ease-in-out infinite; } .step.done { color:var(--ok); background:var(--okbg); border-color:transparent; }
  @keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(91,91,240,.14); } }

  /* ---------- задачі ---------- */
  .seg2 { display:inline-grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--soft); border-radius:14px; padding:5px; margin:14px 0 6px; }
  .seg2 button { background:transparent; color:var(--muted); box-shadow:none; transform:none; padding:10px 22px; } .seg2 button.on { background:var(--card); color:var(--accent); box-shadow:var(--shadow); }
  .fchips { display:flex; gap:8px; margin:12px 0 4px; flex-wrap:wrap; } .fchips button { padding:6px 14px; font-size:13px; }
  .fchips button.on { background:var(--accent); color:#fff; border-color:transparent; }
  .grp { display:flex; align-items:center; gap:10px; margin:24px 0 10px; font-family:var(--head); font-weight:800; }
  .empty { text-align:center; padding:36px 10px; color:var(--muted); }

  /* ---------- адмін-панель ---------- */
  .twocol { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
  table { width:100%; border-collapse:collapse; font-size:14px; } td, th { text-align:left; padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
  th { color:var(--muted); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; } tr:last-child td { border-bottom:0; }
  select.mini { width:auto; padding:5px 8px; font-size:13px; } .acts { display:flex; gap:6px; flex-wrap:wrap; } .acts button { padding:4px 10px; font-size:12.5px; }
  .sw { position:relative; display:inline-block; width:44px; height:25px; flex:none; } .sw input { opacity:0; width:0; height:0; }
  .sw span { position:absolute; inset:0; background:var(--line); border-radius:99px; transition:.15s; cursor:pointer; }
  .sw span::before { content:""; position:absolute; width:19px; height:19px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
  .sw input:checked + span { background:var(--accent); } .sw input:checked + span::before { transform:translateX(19px); }
  .setrow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); } .setrow:last-of-type { border-bottom:0; }

  /* ---------- чат ---------- */
  .chips { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
  .bub { display:flex; gap:12px; margin:14px 0; align-items:flex-start; } .bub.me { justify-content:flex-end; }
  .bub .body { background:var(--card); box-shadow:var(--shadow); border-radius:18px; padding:12px 16px; max-width:80%; white-space:pre-wrap; }
  .bub.me .body { background:var(--grad); color:#fff; box-shadow:none; }
  .bot { width:34px; height:34px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; flex:none; }
  .typing span { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--muted); margin-right:4px; animation:blink 1s infinite; } .typing span:nth-child(2){animation-delay:.15s} .typing span:nth-child(3){animation-delay:.3s}
  @keyframes blink { 50% { opacity:.25; } }
  #toast { position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(10px); background:var(--fg); color:var(--bg); padding:11px 18px; border-radius:12px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:40; max-width:90vw; box-shadow:var(--shadow); }
  #toast.show { opacity:1; transform:translateX(-50%); }


  .wavecol { flex:1; min-width:0; } .marks { position:relative; height:8px; margin-bottom:4px; pointer-events:none; }
  .mk { position:absolute; top:0; bottom:0; border-radius:4px; background:var(--accent2); opacity:.85; }
  .shr { padding:5px 12px; font-size:12.5px; }
  /* вхід через Google */
  .gbtn { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#1f1f1f; border:1px solid #dadce0; padding:12px; font-weight:600; box-shadow:none; }
  .gbtn:hover { background:#f6f8fb; box-shadow:0 1px 4px rgba(0,0,0,.18); transform:none; }
  .or { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12.5px; } .or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
  /* календар */
  .ev { display:flex; gap:14px; align-items:center; background:var(--card); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow); flex-wrap:wrap; } .ev + .ev { margin-top:10px; }
  .evt { min-width:92px; text-align:center; background:var(--soft); border-radius:12px; padding:6px 8px; } .evt b { font-family:var(--head); font-size:18px; display:block; line-height:1.2; }
  .evm { flex:1; min-width:210px; } .evm .t { font-weight:800; font-family:var(--head); line-height:1.3; }
  .plat { display:inline-block; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:6px; background:var(--soft); color:var(--accent); }
  .connect { text-align:center; padding:44px 24px; margin-top:16px; }

  @media (max-width:900px) {
    #login { grid-template-columns:1fr; } .login-art { display:none; }
    html, body { height:auto; } .app { height:auto; grid-template-columns:1fr; }
    aside { border-right:0; border-bottom:1px solid var(--line); } main { padding:18px 16px 70px; }
    .stats { grid-template-columns:1fr; } .welcome::after { font-size:70px; } .welcome h1 { font-size:24px; }
    .title-input { font-size:21px; width:100%; } .time { display:none; } .bub .body { max-width:90%; }
    .twocol { grid-template-columns:1fr; } .summary { padding:20px 20px; } .summary .lead { font-size:16.5px; }
    .av.lg { width:46px; height:46px; font-size:16px; } .vid { padding-top:40px; gap:8px; } .menu { min-width:240px; }
    .tbl { overflow-x:auto; } .share { grid-template-columns:1fr; grid-template-rows:1fr auto; } .strip { grid-auto-flow:column; grid-auto-columns:96px; } .twocol { grid-template-columns:1fr; }
  }

  /* ---------- робочий відеоплеєр ---------- */
  .vp video, .vp audio { width:100%; border-radius:14px; background:#000; max-height:540px; display:block; }
  .vp audio { background:transparent; }
  .vbar { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }
  .vbar select { width:auto; padding:5px 8px; font-size:13px; }
  .tl { position:relative; height:10px; background:var(--line); border-radius:99px; margin-top:12px; cursor:pointer; }
  .tl .mk { top:0; bottom:0; opacity:.9; }
  .tl .ph { position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--accent); border-radius:2px; left:0; pointer-events:none; }
  .upbar { height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:8px; } .upbar i { display:block; height:100%; width:0; background:var(--grad); }
  .errbox { background:var(--pinkbg); color:var(--danger); border-radius:10px; padding:8px 12px; font-size:13px; margin-bottom:6px; }
  .tmp { background:var(--okbg); color:var(--ok); border-radius:10px; padding:10px 14px; margin:10px 0; font-family:ui-monospace,monospace; }
  .warnbox { background:var(--warnbg); color:var(--warn); border-radius:12px; padding:10px 14px; margin:12px 0; font-size:13.5px; }
  .usage td, .usage th { font-size:12.5px; }
  .menu a { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:10px; color:var(--fg); text-decoration:none; font-weight:600; }
  .menu a:hover { background:var(--soft); } .menu a small { display:block; font-weight:400; color:var(--muted); font-size:12px; }
  a.more { margin-left:auto; text-decoration:none; } code { background:var(--soft); padding:1px 6px; border-radius:6px; font-size:12.5px; }
  .gbtn.off { opacity:.7; }
  #modal { position:fixed; inset:0; background:rgba(15,10,40,.5); backdrop-filter:blur(3px); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
  .modal-card { background:var(--card); border-radius:20px; padding:24px; width:100%; max-width:440px; box-shadow:var(--shadow); }
  .modal-card h2 { margin:0 0 8px; font-size:18px; } .modal-card p { margin:0 0 18px; color:var(--muted); line-height:1.55; }