:root { color-scheme: dark; --bg:#1b1a20; --card:#25242b; --fg:#f2f1f5; --muted:#a3a1ad; --line:#3a3943; --accent:#e8c24a; --bad:#ff8080; --good:#7fd69a; }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,-apple-system,sans-serif; }
  main { max-width:560px; margin:0 auto; padding:40px 16px; }
  h1 { font-size:20px; margin:0 0 4px; }
  p.sub { color:var(--muted); margin:0 0 24px; }
  label.f { display:block; margin-bottom:18px; font-weight:600; font-size:14px; }
  /* 16px text in form fields stops iPhone Safari from zooming the page when a field is tapped */
  input[type=text], input[type=password], input[type=file], input[type=datetime-local], textarea, select {
    display:block; width:100%; margin-top:6px; padding:9px 11px; border:1px solid var(--line); border-radius:8px;
    background:#2d2c34; color:var(--fg); font:inherit; font-size:16px; font-weight:400; -webkit-appearance:none; appearance:none; }
  select { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23a3a1ad' stroke-width='2'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
  input[type=datetime-local] { min-height:42px; }
  textarea { resize:vertical; }
  .hint { font-weight:400; color:var(--muted); font-size:12px; }
  .row { display:flex; gap:16px; align-items:flex-end; }
  .row > * { flex:1; }
  .check { display:flex; align-items:center; gap:8px; margin:6px 0; font-weight:400; }
  fieldset { border:0; padding:0; margin:0 0 18px; }
  legend { font-weight:600; font-size:14px; padding:0; margin-bottom:6px; }
  button { background:var(--accent); color:#222; border:0; border-radius:8px; padding:10px 18px; font:inherit; font-weight:600; cursor:pointer; }
  button:active { transform:scale(.98); }
  button:disabled { opacity:.5; cursor:default; }
  .status { margin-top:24px; display:grid; gap:10px; }
  .box { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; word-break:break-word; }
  .box b { display:block; }
  .bad { color:var(--bad); } .good { color:var(--good); }
  .bar { height:6px; background:var(--line); border-radius:3px; overflow:hidden; margin-top:6px; }
  .bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .2s; }
  a { color:var(--accent); }
  .top { display:flex; justify-content:space-between; align-items:center; }
  .top button { background:transparent; color:var(--muted); border:1px solid var(--line); font-weight:400; padding:5px 10px; }
  .nav { display:flex; gap:6px; margin-bottom:20px; }
  .nav a { color:var(--muted); text-decoration:none; padding:5px 12px; border-radius:8px; border:1px solid var(--line); }
  .nav a.on { color:var(--fg); background:var(--card); }
  main.wide { max-width:780px; }
  .toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 16px; }
  .toolbar select, .toolbar button { margin:0; width:auto; }
  .toolbar .check { margin:0; }
  button.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); font-weight:500; }
  button.sm { padding:5px 11px; font-size:13px; }
  button.ghost.on { background:var(--accent); color:#222; border-color:var(--accent); font-weight:600; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; display:flex; gap:12px; }
  .cbody { flex:1; min-width:0; }
  .meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:13px; margin-bottom:8px; }
  .meta .big { color:var(--fg); font-weight:700; }
  .badge { font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; background:#3a3943; color:var(--fg); }
  .badge.yt { background:#6b2323; } .badge.ig { background:#5b2a6b; } .badge.tt { background:#1f4d5c; }
  .badge.done { background:#245c3a; } .badge.warn { background:#8a4b12; color:#fff; }
  .orig { white-space:pre-wrap; word-break:break-word; margin:0 0 8px; }
  .eng { border-left:3px solid var(--accent); padding:2px 0 2px 10px; color:#d9d7e0; white-space:pre-wrap; word-break:break-word; margin:0 0 10px; }
  .eng small { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
  .prev { color:var(--muted); font-size:13px; margin:0 0 10px; white-space:pre-wrap; word-break:break-word; }
  .actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .actions select { margin:0; width:auto; padding:5px 8px; font-size:16px; }
  .quick { margin-top:8px; }
  .reply { margin-top:10px; display:none; }
  .reply textarea { margin:0 0 8px; }
  .preview { margin:0 0 8px; padding:8px 10px; background:#2d2c34; border-radius:8px; font-size:14px; white-space:pre-wrap; display:none; }
  .preview small { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
  .msg { font-size:13px; }
  .empty { color:var(--muted); text-align:center; padding:32px 0; }
  a.thumb { flex:none; }
  a.thumb img { width:80px; height:80px; max-width:80px; max-height:80px; object-fit:cover; border-radius:8px; display:block; background:#2d2c34; }
  .sline { margin:6px 0; font-size:14px; }
  .sline.good { color:var(--good); } .sline.bad { color:var(--bad); }
  code { background:#2d2c34; padding:2px 6px; border-radius:6px; word-break:break-all; font-size:13px; }
  #timer .box { margin-bottom:16px; }
  h2.vh { font-size:17px; margin:28px 0 10px; }
  .rank { flex:none; width:28px; font-size:22px; font-weight:700; color:var(--accent); text-align:center; align-self:center; }
  a.vtitle { color:var(--fg); font-weight:600; text-decoration:none; word-break:break-word; }
  a.vtitle:hover { text-decoration:underline; }

  /* ---------- Phones (iPhone 13 is 390 px wide) ---------- */
  @media (max-width:600px) {
    main, main.wide { padding:max(16px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
    h1 { font-size:22px; }
    p.sub { margin-bottom:16px; }

    /* navigation becomes a tab bar at the bottom, within thumb reach */
    .nav { position:fixed; left:0; right:0; bottom:0; z-index:20; margin:0; gap:0; background:rgba(37,36,43,.97);
           -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line);
           padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
    .nav a { flex:1; text-align:center; border:0; border-radius:0; padding:14px 2px; font-size:13px; }
    .nav a.on { background:transparent; color:var(--accent); font-weight:700; box-shadow:inset 0 2px 0 var(--accent); }

    button, .toolbar select, .actions select { min-height:44px; }
    button { padding:10px 16px; }
    button.sm { padding:10px 14px; font-size:14px; }
    .top button { min-height:40px; padding:6px 12px; }
    input[type=text], input[type=password], input[type=datetime-local], select { min-height:44px; }
    input[type=checkbox] { width:22px; height:22px; flex:none; }
    .check { min-height:36px; }
    #go, #login button { width:100%; }

    .toolbar { gap:10px; }
    .toolbar select { flex:1 1 140px; }
    .row { flex-direction:column; align-items:stretch; gap:0; }

    .card { padding:12px; gap:10px; }
    .rank { width:20px; font-size:18px; }
    a.thumb img { width:56px; height:56px; }
    .meta { gap:6px; }

    /* comment cards: full-width, easy-to-tap buttons */
    .cbody > .actions { flex-direction:column; align-items:stretch; }
    .cbody > .actions select { width:100%; }
    .cbody > .actions.quick { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .cbody > .actions.quick button { padding:10px 6px; font-size:13px; }
    .reply .actions { flex-wrap:wrap; }
    .reply .actions button { flex:1 1 40%; }
    .reply .actions .msg { flex:1 1 100%; }
    textarea { min-height:96px; }

    .box code { display:block; margin-top:6px; }
  }
  .clip { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
  .clip .cname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .clip .ctools { display:flex; gap:6px; }
  .clip .ctools button { padding:4px 10px; }
  .libcard { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px; }
  .libcard video { width:100%; max-height:70vh; background:#000; border-radius:8px; margin:8px 0; display:block; }
  a.btnlink { display:inline-block; padding:5px 11px; font-size:13px; font-weight:500; border:1px solid var(--line); border-radius:8px; color:var(--fg); text-decoration:none; }
  @media (max-width:600px) { .clip .ctools button { min-height:36px; } a.btnlink { padding:10px 14px; font-size:14px; } }

  /* ---------- Video editor: a full-screen phone-style editor ---------- */
  [hidden] { display:none !important; }
  .filebtn { cursor:pointer; background:var(--accent); color:#222; border-color:var(--accent); font-weight:700; }
  .emptybox { border:2px dashed var(--line); border-radius:14px; padding:28px 16px; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:10px; }
  .emptybox .big { font-size:17px; color:var(--fg); font-weight:600; }
  .emptybox .or { font-size:12px; }
  .emptybox p { margin:0; min-height:1em; }
  #dropmask { display:none; position:fixed; inset:0; z-index:300; align-items:center; justify-content:center; background:rgba(0,0,0,.7); color:#fff; font-size:20px; font-weight:600; border:4px dashed var(--accent); pointer-events:none; }
  body.dropping #dropmask { display:flex; }
  body.editing { overflow:hidden; }
  body.editing main { display:none; }

  #ed { position:fixed; top:0; bottom:0; left:0; right:0; max-width:620px; margin:0 auto; z-index:100; background:#000; color:#fff;
        display:flex; flex-direction:column; height:100vh; height:100dvh; padding-top:env(safe-area-inset-top); user-select:none; -webkit-user-select:none; }
  #ed button, #ed .tool { background:none; color:#fff; border:0; padding:0; min-height:0; font:inherit; font-weight:400; cursor:pointer; }
  #ed button:disabled { opacity:.35; cursor:default; }
  .etop { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; }
  #ed .rbtn { width:48px; height:48px; border-radius:50%; background:#2c2c2e; font-size:28px; line-height:1; display:flex; align-items:center; justify-content:center; }
  #ed .rbtn.red { background:#fe2c55; }
  .pstate { flex:1; min-width:0; text-align:center; font-size:12px; color:#8e8e93; }
  .epre { position:relative; flex:1; min-height:0; }
  #frame { position:absolute; top:4px; left:50%; transform:translateX(-50%); height:calc(100% - 8px); aspect-ratio:9/16; max-width:100%; background:#000; border-radius:18px; overflow:hidden; }
  #frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
  #vb { opacity:0; }
  #tcanvas { position:absolute; transform:translate(-50%,-50%); cursor:move; touch-action:none; display:none; }
  #frameMsg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; text-align:center; color:#bbb; font-size:13px; pointer-events:none; }
  .ectl { flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:6px 14px; }
  #tclock { font-size:15px; color:#8e8e93; font-variant-numeric:tabular-nums; }
  #tclock b { color:#fff; font-weight:500; }
  #ed #play { width:48px; height:48px; font-size:24px; }
  .ectl-r { justify-self:end; display:flex; gap:2px; }
  #ed .ibtn { width:44px; height:44px; font-size:24px; }

  #tlwrap { position:relative; flex:none; height:152px; }
  #tl { height:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  #tl::-webkit-scrollbar { display:none; }
  #inner { position:relative; display:block; width:max-content; min-width:100%; }
  #ruler { position:relative; height:24px; }
  #ruler span { position:absolute; top:4px; transform:translateX(-50%); font-size:11px; color:#8e8e93; white-space:nowrap; font-variant-numeric:tabular-nums; }
  #ruler i { position:absolute; top:11px; width:3px; height:3px; margin-left:-1px; border-radius:50%; background:#555; }
  #track { position:relative; display:flex; align-items:flex-start; height:64px; }
  .blk { position:relative; flex:none; height:64px; background:#222; border-radius:8px; touch-action:pan-x; -webkit-touch-callout:none; cursor:grab; }
  .bthumb { height:64px; background-color:#111; background-repeat:no-repeat; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px #000; }
  .blk.sel { z-index:2; }
  .blk.sel .bthumb { box-shadow:0 0 0 2px #fff; }
  .blk.nopreview .bthumb { background-image:none; }
  .blk.dragging { z-index:5; opacity:.92; transform:scale(1.04); box-shadow:0 8px 24px rgba(0,0,0,.8); cursor:grabbing; }
  .blk.trimming { z-index:4; }
  .blen { position:absolute; left:4px; bottom:3px; font-size:10px; line-height:1.4; background:rgba(0,0,0,.6); padding:0 4px; border-radius:4px; pointer-events:none; }
  .bdot { position:absolute; right:4px; top:4px; width:9px; height:9px; border-radius:50%; background:#8e8e93; box-shadow:0 0 0 1px rgba(0,0,0,.6); }
  .bdot.work { background:#6cb4ff; animation:pulse 1.2s infinite; } .bdot.good { background:var(--good); } .bdot.warn { background:var(--accent); } .bdot.bad { background:var(--bad); width:14px; height:14px; right:2px; top:2px; }
  @keyframes pulse { 50% { opacity:.35; } }
  .hdl { display:none; position:absolute; top:0; bottom:0; width:16px; background:#fff; z-index:3; touch-action:none; cursor:ew-resize; }
  .blk.sel .hdl { display:block; }
  .hdl.l { left:0; border-radius:8px 0 0 8px; }
  .hdl.r { right:0; border-radius:0 8px 8px 0; }
  .hdl::before { content:''; position:absolute; top:50%; left:50%; width:2px; height:18px; margin:-9px 0 0 -1px; background:#777; border-radius:1px; }
  .hdl::after { content:''; position:absolute; top:-6px; bottom:-6px; left:-12px; right:-12px; }
  .addbtn { flex:none; align-self:center; width:44px; height:44px; margin-left:8px; border-radius:10px; background:#fff; color:#000; font-size:30px; line-height:44px; text-align:center; cursor:pointer; font-weight:500; }
  #textrow { display:flex; align-items:center; gap:8px; height:28px; margin-top:8px; padding:0 10px; border-radius:8px; background:#3d3d9e; font-size:12px; overflow:hidden; white-space:nowrap; cursor:pointer; }
  #playhead { position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; background:#fff; border-radius:1px; pointer-events:none; z-index:6; }

  .etools { flex:none; display:flex; gap:8px; overflow-x:auto; padding:8px 12px calc(10px + env(safe-area-inset-bottom)); scrollbar-width:none; }
  .etools::-webkit-scrollbar { display:none; }
  #ed .tool { flex:none; width:80px; height:66px; border-radius:12px; background:#1c1c1e; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:12px; text-align:center; }
  #ed .tool b { font-size:22px; line-height:1; font-weight:400; }
  #ed .tool:active { background:#2c2c2e; }

  .sheet { position:absolute; inset:0; z-index:20; display:flex; align-items:flex-end; background:rgba(0,0,0,.55); user-select:text; -webkit-user-select:text; }
  .sheet .pane { width:100%; max-height:88%; overflow:auto; background:#1c1c1e; border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .phead { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:17px; }
  #ed .primary { display:block; width:100%; min-height:46px; padding:12px; border-radius:10px; background:var(--accent); color:#222; font-weight:700; text-align:center; }
  #ed .primary.sm { width:auto; min-height:0; padding:8px 18px; }
  #ed .ghostbtn { border:1px solid #444; border-radius:8px; padding:8px 14px; font-size:14px; }
  #ed .sheet .status { margin-top:14px; }
  #ed .sheet .libcard { margin:12px 0 0; background:#111; }
  #ed .sheet .libcard video { max-height:50vh; }

  /* ---------- Saved page ---------- */
  details.howto { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:14px; }
  details.howto summary { cursor:pointer; font-weight:600; }
  details.howto h3 { font-size:15px; margin:14px 0 4px; }
  details.howto ol { margin:4px 0 0; padding-left:20px; }
  details.howto li { margin:3px 0; }
  .importbox { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:18px; }
  .importbox textarea { min-height:0; }
  .sgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
  .scard { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
  .sthumb { position:relative; display:block; aspect-ratio:9/12; background:#111; color:var(--muted); text-decoration:none; }
  .sthumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .sthumb .noimg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; background:linear-gradient(135deg,#2a2833,#1b1a20); }
  .plat { position:absolute; left:6px; top:6px; font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px; background:rgba(0,0,0,.65); color:#fff; }
  .plat.tiktok { box-shadow:inset 0 -2px 0 #25f4ee; } .plat.instagram { box-shadow:inset 0 -2px 0 #e1306c; }
  .sbody { padding:8px 10px 10px; display:flex; flex-direction:column; gap:4px; flex:1; }
  .stitle { font-weight:600; font-size:13px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
  .smeta { font-size:12px; color:var(--muted); }
  .sact { display:flex; gap:6px; margin-top:auto; padding-top:6px; }
  @media (max-width:600px) { .nav a { font-size:12px; } .sgrid { grid-template-columns:1fr 1fr; gap:10px; } }
  .soundbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 10px; }
  .soundbar button { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  a.ssound { font-size:12px; color:var(--accent); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
  .plat.youtube { box-shadow:inset 0 -2px 0 #ff3b30; }
  #player { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .pbox { position:relative; width:100%; max-width:480px; display:flex; flex-direction:column; align-items:center; gap:10px; max-height:100%; }
  #pclose { position:absolute; right:0; top:-4px; z-index:2; width:40px; height:40px; border-radius:50%; background:#2c2c2e; color:#fff; padding:0; font-size:18px; }
  .pframe { width:min(340px, 88vw); height:min(600px, 68vh); background:#000; border-radius:14px; overflow:hidden; margin-top:36px; }
  .pframe[data-p="wide"] { width:min(480px, 94vw); height:auto; aspect-ratio:16/9; }
  .pframe[data-p="instagram"] { width:min(400px, 94vw); height:min(640px, 72vh); background:#fff; overflow:auto; }
  .pframe[data-p="tiktok"] { width:min(340px, 92vw); height:min(640px, 72vh); }
  .pframe iframe { width:100%; height:100%; border:0; display:block; }
  .pinfo { width:100%; text-align:center; font-size:13px; color:#ddd; min-height:1.2em; }
  .pinfo #ptitle { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #psound { display:block; color:var(--accent); text-decoration:none; font-size:12px; margin-top:2px; }
  .pnav { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; }
  .pnav button { background:#2c2c2e; color:#fff; border:0; padding:10px 16px; }
  .sact { flex-wrap:wrap; }
  .sact > * { flex:1 1 auto; text-align:center; }
  .sact button, .sact a.btnlink { padding:8px 6px; font-size:13px; min-height:38px; line-height:1.2; }
  #musicrow { display:flex; align-items:center; gap:8px; height:28px; margin-top:6px; padding:0 10px; border-radius:8px; background:#3a67d9; font-size:12px; overflow:hidden; white-space:nowrap; cursor:pointer; }
  .mh { font-size:15px; margin:18px 0 8px; }
  .mrow { background:#111; border:1px solid #333; border-radius:10px; padding:10px; margin-bottom:8px; display:flex; flex-direction:column; gap:6px; }
  .mrow.on { border-color:var(--accent); }
  .minfo { display:flex; flex-direction:column; gap:2px; word-break:break-word; }
  .mrow audio { width:100%; height:36px; }
  .mbtns { display:flex; gap:8px; }
  .musicuse { background:#111; border:1px solid var(--accent); border-radius:10px; padding:12px; margin:12px 0; }
  .musicname { font-weight:600; margin-bottom:8px; word-break:break-word; }
  .musicuse label.f b { float:right; font-weight:500; color:var(--muted); }
  #ed .sheet input[type=range] { padding:0; border:0; background:transparent; accent-color:var(--accent); min-height:30px; }
  .thaibox { border:1px solid #333; border-radius:10px; padding:12px; margin-bottom:12px; background:#111; }
  .thaibox label.f { margin-bottom:10px; }
  .tresult { margin-top:10px; }
  #tThai { font-size:18px; font-weight:600; white-space:pre-line; margin:2px 0 8px; }
  #tEnglish { white-space:pre-line; color:#cfcfd4; margin:2px 0 10px; }
  .tbtns { display:flex; gap:8px; flex-wrap:wrap; }
  .infobar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px; }
  #ed .ghostbtn.on { background:var(--accent); color:#222; border-color:var(--accent); font-weight:600; }
  @media (max-width:600px) { .nav a { font-size:11px; white-space:nowrap; padding-left:0; padding-right:0; } }
  .mcard { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
  .mcard video { width:100%; max-height:60vh; background:#000; border-radius:8px; display:block; }
  .mcard audio { width:100%; }
  .mcard .mname { margin:0; font-weight:600; }
  .mcard .actions { display:flex; flex-wrap:wrap; gap:8px; }
  #scanvas { position:absolute; pointer-events:none; display:none; }
  .fontrow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px; }
  .tcv { position:absolute; transform:translate(-50%,-50%); cursor:move; touch-action:none; display:none; }
  .texttabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
  .trowbar { display:flex; align-items:center; gap:8px; height:26px; margin-top:6px; padding:0 8px; border-radius:8px; background:#3d3d9e; font-size:12px; overflow:hidden; white-space:nowrap; cursor:pointer; }
  #textrows { position:relative; }
  .timing label.f b { float:right; font-weight:500; color:var(--muted); }
  #tlwrap { height:auto; min-height:152px; }
  #tl { height:auto; max-height:30vh; overflow-y:auto; }
  .checkrow { margin:8px 0 10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .cresult { margin:0 0 12px; background:#111; border:1px solid #333; border-radius:10px; padding:12px; }
  .cverdict { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
  .badge { padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; color:#222; }
  .badge.good { background:var(--good); } .badge.warn { background:var(--accent); } .badge.bad { background:var(--bad); }
  .cissues { margin:0 0 10px; padding-left:18px; font-size:13px; color:#cfcfd4; }
  .csug { border-top:1px solid #333; padding-top:10px; margin-top:10px; }
  .cthai { font-size:18px; font-weight:600; white-space:pre-line; margin:2px 0 6px; }
  .ceng { white-space:pre-line; color:#cfcfd4; margin:2px 0 10px; }
  #ed .tool.on { background:var(--accent); color:#222; }
  .copybox { border:1px solid #333; border-radius:10px; padding:12px; margin:0 0 14px; background:#111; }
  .copybox > b { display:block; margin-bottom:8px; }
  .capbox { margin:8px 0; }
  .capbox summary { cursor:pointer; color:var(--muted); font-size:13px; }
  .capbox input, .capbox textarea { margin:6px 0; }
  .pubbox { margin:8px 0; border-top:1px solid var(--line); padding-top:8px; }
  .pubbox summary { cursor:pointer; font-weight:600; }
  .pubbox .primary { margin-top:8px; }
  #ed .ghostbtn[data-color].on { box-shadow:0 0 0 3px var(--accent); }

  /* ---------- sign in ---------- */
  body.auth { min-height:100vh; min-height:100dvh; background:radial-gradient(ellipse at 50% -10%, #3b3a2a 0%, var(--bg) 55%); }
  body.auth main { display:flex; flex-direction:column; justify-content:center; min-height:100vh; min-height:100dvh; padding-bottom:40px; }
  .authcard { text-align:center; }
  .authcard form { text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 18px 18px; margin-top:6px; box-shadow:0 12px 40px rgba(0,0,0,.35); }
  .authcard form label.f { margin-bottom:14px; }
  .authlogo { width:96px; height:96px; margin:0 auto 14px; background:#fff; border-radius:50%; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.4); }
  .authlogo img { width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
  .authcard h1 { font-size:24px; }
  .authcard p.sub { margin-bottom:22px; }
  .pwrap { position:relative; display:block; }
  .pwrap input { padding-right:68px; }
  #login .pwrap .eye, .pwrap .eye { position:absolute; right:4px; bottom:4px; left:auto; width:auto; height:34px; min-height:0; margin:0; padding:0 12px; background:transparent; color:var(--muted); font-weight:500; font-size:13px; }
  button.block { display:block; width:100%; padding:12px 16px; font-size:16px; margin-top:6px; }
  .autherr { min-height:20px; margin:10px 0 0; text-align:center; font-size:14px; }
  .authfoot { color:var(--muted); font-size:13px; margin:18px 0 0; }

  /* ---------- users ---------- */
  a.btnlink { display:inline-block; text-decoration:none; background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:7px 14px; font-weight:500; }
  .ucard { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:12px; }
  .ucard.off { opacity:.65; }
  .uhead { display:flex; gap:12px; align-items:center; margin-bottom:2px; }
  .ucard .actions { margin-top:10px; }
  .avatar { flex:none; width:42px; height:42px; border-radius:50%; background:var(--accent); color:#222; font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; }
  .uinfo { min-width:0; }
  .uname { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .resetbox { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
  .resetbox input[type=text] { margin:0 0 8px; }
  .credbox { background:#233a2b; border:1px solid #2f6b44; border-radius:10px; padding:12px 14px; margin-bottom:16px; }
  .credtext { background:#1b1a20; border-radius:8px; padding:10px 12px; margin:8px 0; white-space:pre-wrap; word-break:break-all; font:13px/1.5 ui-monospace,Menlo,Consolas,monospace; user-select:all; -webkit-user-select:all; }
  @media (max-width:600px) { .nav a { font-size:11px; padding:14px 0; letter-spacing:-.1px; min-width:0; } }