:root{
    --paper:#F3F5F9;
    --grid:rgba(28,40,72,.04);
    --dot:rgba(40,52,90,.10);
    --ink:#14161D;
    --ink-soft:#565D70;
    --ink-faint:#656B79;
    --line:#E4E8F0;
    --line-soft:#EDF0F6;
    --surface:#FFFFFF;
    --primary:#3D34D6;
    --primary-deep:#2A22A8;
    --primary-tint:#ECEBFB;
    --ready:#1FA463;
    --soon:#D9962B;
    --shadow:0 1px 2px rgba(20,24,40,.05),0 6px 18px rgba(20,24,40,.05);
    --shadow-lift:0 4px 8px rgba(20,24,40,.07),0 18px 44px rgba(20,24,40,.12);
    --radius:15px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    background-color:var(--paper);
    background-image:
      radial-gradient(1100px 460px at 50% -160px, rgba(61,52,214,.07), transparent 72%),
      radial-gradient(var(--dot) 1.5px, transparent 1.6px);
    background-size:auto, 22px 22px;
    background-position:center top, center top;
    background-attachment:fixed, fixed;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
  .wrap{max-width:1140px;margin:0 auto;padding:0 22px}
  a{color:inherit}
  button{font-family:inherit;cursor:pointer}
  input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--line);cursor:pointer;outline:none}
  input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;background:var(--primary);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(20,24,40,.25);cursor:pointer;transition:transform .12s}
  input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
  input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);border:3px solid var(--surface);box-shadow:0 1px 4px rgba(20,24,40,.25);cursor:pointer}
  input[type="range"]::-moz-range-track{height:6px;border-radius:999px;background:var(--line)}
  ::selection{background:var(--primary);color:#fff}

  /* ---------- Header ---------- */
  .masthead{padding:14px 0;position:sticky;top:0;z-index:40;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg, color-mix(in srgb,var(--paper) 94%, transparent), color-mix(in srgb,var(--paper) 74%, transparent));backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px)}
  .masthead .brandrow{max-width:1140px;margin:0 auto;padding:0 22px;width:100%;box-sizing:border-box;justify-content:flex-start}
  .masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 13%,transparent) 18%,color-mix(in srgb,var(--ink) 13%,transparent) 82%,transparent)}
  .brandrow{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:13px;cursor:pointer;user-select:none}
  .mark{
    width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  }
  .mark svg{width:46px;height:46px;filter:drop-shadow(0 5px 12px rgba(91,52,210,.32))}
  .brand h1{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;
    letter-spacing:-.03em;margin:0;line-height:1
  }
  .brand .sub{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:var(--ink-faint);letter-spacing:.05em;margin-top:5px}

  /* ---------- Hero / search ---------- */
  .hero{padding:44px 0 30px}
  #hub{position:relative}
  #hub::before{
    content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);
    width:min(1180px,94vw);height:600px;z-index:0;pointer-events:none;
    background:
      radial-gradient(440px 320px at 20% 26%, rgba(99,102,241,.24), transparent 66%),
      radial-gradient(420px 300px at 80% 18%, rgba(124,58,237,.20), transparent 63%),
      radial-gradient(400px 320px at 64% 62%, rgba(20,184,166,.15), transparent 66%),
      radial-gradient(380px 300px at 33% 70%, rgba(236,72,153,.13), transparent 66%);
    filter:blur(14px);
  }
  #hub > *{position:relative;z-index:1}
  html[data-theme="dark"] #hub::before{
    background:
      radial-gradient(440px 320px at 20% 26%, rgba(129,132,255,.30), transparent 66%),
      radial-gradient(420px 300px at 80% 18%, rgba(155,90,255,.26), transparent 63%),
      radial-gradient(400px 320px at 64% 62%, rgba(28,214,196,.20), transparent 66%),
      radial-gradient(380px 300px at 33% 70%, rgba(255,92,175,.18), transparent 66%);
  }
  .kicker{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:10px}
  .kicker::before{content:"";width:22px;height:2px;background:var(--ready);border-radius:2px;flex:none}
  .hero h2{
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(26px,5.4vw,46px);
    letter-spacing:-.03em;margin:0 0 12px;line-height:1.05;white-space:nowrap
  }
  .hero h2 em{
    font-style:normal;display:inline-block;
    background:linear-gradient(100deg,#6366F1,#8B5CF6 46%,#EC4899);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    transition:opacity .28s ease,transform .28s ease
  }
  .hero h2 em.swap{opacity:0;transform:translateY(-8px)}
  @media (max-width:520px){.hero h2{white-space:normal}}
  .hero p{color:var(--ink-soft);font-size:16.5px;margin:0 0 26px;max-width:52ch;line-height:1.6}
  .trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .trust span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:6px 13px}
  .trust span::before{content:"✓";color:var(--ready);font-weight:800;font-size:11px}
  @keyframes tjwUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes tjwIn{from{opacity:0}to{opacity:1}}
  .hero .kicker,.hero h2,.hero p,.hero .searchbox,.hero .trust{animation:tjwUp .55s cubic-bezier(.2,.7,.2,1) both}
  .hero h2{animation-delay:.04s}
  .hero p{animation-delay:.1s}
  .hero .searchbox{animation-delay:.16s}
  .hero .trust{animation-delay:.22s}
  .grid{animation:tjwIn .45s ease both}
  .searchbox{position:relative;max-width:560px;display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:0 14px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
  .searchbox:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint)}
  .searchbox svg{width:18px;height:18px;color:var(--ink-faint);flex:none}
  .searchbox input{
    flex:1;min-width:0;border:none;background:transparent;
    padding:15px 0;font-size:15px;font-family:inherit;color:var(--ink);
  }
  .searchbox input:focus{outline:none}
  .searchbox kbd{
    flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--ink-faint);
    border:1px solid var(--line);border-radius:6px;padding:3px 7px;background:var(--paper)
  }

  /* ---------- Category chips ---------- */
  .chips{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 26px}
  .chip{
    display:inline-flex;align-items:center;gap:8px;
    border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);
    font-size:13px;font-weight:500;padding:8px 15px 8px 12px;border-radius:999px;transition:all .14s;
  }
  .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cc,var(--ink-faint));flex:none;transition:transform .14s,box-shadow .14s}
  .chip:hover{border-color:var(--cc,var(--ink-faint));color:var(--ink)}
  .chip:hover::before{transform:scale(1.25);box-shadow:0 0 0 4px color-mix(in srgb, var(--cc, var(--ink-faint)) 18%, transparent)}
  .chip.on{background:var(--cc,var(--ink));border-color:var(--cc,var(--ink));color:#fff;box-shadow:0 3px 12px color-mix(in srgb, var(--cc, var(--ink)) 32%, transparent)}
  .chip.on::before{background:#fff;box-shadow:none}
  .chip .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;opacity:.75;margin-left:1px}
  .chip.on .n{opacity:.85}

  /* ---------- Tool grid ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:15px;padding-bottom:64px}
  .card{
    background:radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--cc,var(--primary)) 8%, transparent), transparent 58%), var(--surface);
    border:1.5px solid var(--line);border-radius:var(--radius);
    padding:18px 18px 18px 21px;box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
    text-align:left;display:flex;flex-direction:column;gap:11px;min-height:150px;position:relative;overflow:hidden;
    color:inherit;text-decoration:none;
  }
  .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cc,transparent);opacity:.55;transition:opacity .16s ease,width .16s ease}
  .card.ready{cursor:pointer}
  .card.ready:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb, var(--cc,var(--primary)) 55%, transparent)}
  .card.ready:hover::before{opacity:1;width:5px}
  .card.soon{opacity:.74;cursor:default}
  .card-top{display:flex;align-items:center;justify-content:space-between}
  .code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--cc,var(--ink-faint));letter-spacing:.05em;font-weight:600;opacity:.9}
  .led{display:flex;align-items:center;gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
  .led .dot{width:8px;height:8px;border-radius:50%}
  .led.ready{color:#0E7A43} .led.ready .dot{background:var(--ready);box-shadow:0 0 0 3px rgba(31,164,99,.14)}
  .led.soon{color:#9A6B14} .led.soon .dot{background:var(--soon);box-shadow:0 0 0 3px rgba(217,150,43,.14)}
  .card h3{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;margin:0;letter-spacing:-.012em}
  .card p{color:var(--ink-soft);font-size:13.5px;margin:0;flex:1;line-height:1.5}
  .card-tag{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600;display:inline-flex;align-items:center;gap:6px}
  .card-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cc,var(--ink-faint))}
  .live-badge{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9px;font-weight:700;letter-spacing:.09em;color:#fff;background:linear-gradient(135deg,#2563EB,#0891B2);padding:2px 8px 2px 6px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;flex:none}
  .live-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:livePulse 1.6s ease-in-out infinite}
  @keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}
  .live-banner{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--ink-soft);background:linear-gradient(135deg,rgba(37,99,235,.08),rgba(8,145,178,.08));border:1.5px solid rgba(37,99,235,.28);border-radius:13px;padding:14px 17px;margin-bottom:4px}
  .live-banner b{color:var(--ink)}
  .empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--ink-faint);font-size:15px}

  /* ---------- Tool view ---------- */
  .toolview{display:none;padding:30px 0 70px;animation:rise .25s ease}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .back{
    display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);
    color:var(--ink-soft);font-size:13px;font-weight:500;padding:9px 15px;border-radius:10px;margin-bottom:22px;transition:all .14s
  }
  .back:hover{border-color:var(--ink);color:var(--ink)}
  .toolhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:26px}
  .toolhead .code{margin-top:7px}
  .toolhead h2{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
  .toolhead p{color:var(--ink-soft);margin:0;font-size:15px}
  .panel{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
  .panel + .panel{margin-top:18px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:720px){.two{grid-template-columns:1fr}}

  label.fld{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 7px;letter-spacing:.01em}
  .hint{font-size:12.5px;color:var(--ink-faint);font-weight:400;margin-left:6px}
  textarea,input[type=text],input[type=url],input[type=number],input[type=date],input[type=time],input[type=datetime-local],select{
    width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-size:14px;
    font-family:inherit;color:var(--ink);background:var(--surface);
    box-shadow:inset 0 1px 2px rgba(20,24,40,.03);
    transition:border-color .16s,box-shadow .16s,background .16s
  }
  textarea::placeholder,input::placeholder{color:var(--ink-faint);opacity:.7}
  textarea:hover,input[type=text]:hover,input[type=url]:hover,input[type=number]:hover,input[type=date]:hover,input[type=time]:hover,input[type=datetime-local]:hover,select:hover{border-color:#c9cfdd}
  select{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
    padding-right:38px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565D70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center;background-size:14px
  }
  textarea{resize:vertical;min-height:120px;line-height:1.55}
  textarea.mono,input.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
  textarea:focus,input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint);background-color:var(--surface)}
  .field{margin-bottom:18px}
  .field:last-child{margin-bottom:0}

  .btn{
    display:inline-flex;align-items:center;gap:8px;border:none;background:var(--primary);color:#fff;text-decoration:none;
    font-size:14px;font-weight:600;padding:11px 20px;border-radius:10px;transition:background .14s,transform .1s
  }
  .btn:hover{background:var(--primary-deep)} .btn:active{transform:scale(.98)}
  .btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
  .btn.ghost:hover{background:var(--paper);border-color:var(--ink)}
  .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;background:var(--line);border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
  .stat{background:var(--surface);padding:16px 14px;text-align:center}
  .stat .v{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:var(--ink);line-height:1}
  .stat .k{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;margin-top:7px}

  .checks{display:flex;flex-direction:column;gap:11px}
  .check{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;user-select:none}
  .check input{width:17px;height:17px;accent-color:var(--primary);cursor:pointer}
  .range{display:flex;align-items:center;gap:14px}
  .range input[type=range]{flex:1;accent-color:var(--primary)}
  .range .val{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:600;min-width:54px;text-align:right}

  .output{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;background:var(--ink);color:#E8EAF0;border-radius:10px;padding:16px;white-space:pre-wrap;word-break:break-word;line-height:1.6;max-height:340px;overflow:auto}
  .strength{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:10px}
  .strength i{display:block;height:100%;width:0;border-radius:999px;transition:width .25s,background .25s}
  .pill{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;padding:3px 9px;border-radius:999px;background:var(--primary-tint);color:var(--primary-deep);font-weight:600}

  .drop{border:2px dashed var(--line);border-radius:14px;padding:34px 20px;text-align:center;color:var(--ink-soft);transition:all .15s;background:var(--paper);cursor:pointer}
  .drop::before{content:"";display:block;width:44px;height:44px;margin:0 auto 14px;background-color:currentColor;opacity:.4;transition:opacity .15s,transform .15s;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V4%22/%3E%3Cpath%20d%3D%22M7%209l5-5%205%205%22/%3E%3Cpath%20d%3D%22M5%2016v2a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-2%22/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V4%22/%3E%3Cpath%20d%3D%22M7%209l5-5%205%205%22/%3E%3Cpath%20d%3D%22M5%2016v2a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-2%22/%3E%3C/svg%3E") no-repeat center/contain}
  .drop:has(.drop-ico)::before,.drop:has(img)::before{display:none}
  .drop:hover{border-color:var(--primary);background:var(--primary-tint);color:var(--primary)}
  .drop:hover::before{opacity:.85;transform:translateY(-2px)}
  .drop:hover strong{color:var(--primary)}
  .drop.over{border-color:var(--primary);background:var(--primary-tint);color:var(--primary);border-style:solid}
  .drop.over::before{opacity:.9}
  .drop strong{display:block;color:var(--ink);font-size:15px;margin-bottom:5px}
  .drop input{display:none}
  .preview{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:18px}
  .preview img{max-width:100%;max-height:380px;width:auto;height:auto;border-radius:12px;border:1.5px solid var(--line);object-fit:contain;background:var(--paper)}
  .preview .cmp{margin:0}
  .preview .btn{margin-top:2px}
  .cmp{display:flex;gap:22px;flex-wrap:wrap}
  .cmp .b{font-size:13px}.cmp .b b{font-family:'Space Grotesk',sans-serif;font-size:20px;display:block}
  .save{color:var(--ready);font-weight:600;font-size:13px}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;transition:all .25s;z-index:50}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  footer{border-top:1.5px solid var(--line);padding:26px 0;color:var(--ink-faint);font-size:13px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
  footer code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
  footer a:hover{color:var(--primary);border-bottom-color:var(--primary)}

  /* segmented toggle */
  .seg{display:inline-flex;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:3px;gap:3px;margin-bottom:18px}
  .seg button{border:none;background:transparent;color:var(--ink-soft);font-size:13px;font-weight:600;padding:8px 16px;border-radius:7px;transition:all .14s}
  .seg button.on{background:var(--ink);color:#fff}

  /* cropper */
  .cropstage{position:relative;display:inline-block;max-width:100%;line-height:0;user-select:none;touch-action:none;overflow:hidden;border-radius:10px}
  .cropstage img{max-width:100%;display:block}
  .cropbox{position:absolute;border:1.5px solid #fff;box-shadow:0 0 0 9999px rgba(21,23,30,.5),0 0 0 1px rgba(0,0,0,.35);cursor:move}
  .cropbox .h{position:absolute;width:12px;height:12px;background:#fff;border:1.5px solid var(--primary);border-radius:50%}
  .cropbox .h.nw{left:-7px;top:-7px;cursor:nwse-resize}
  .cropbox .h.ne{right:-7px;top:-7px;cursor:nesw-resize}
  .cropbox .h.sw{left:-7px;bottom:-7px;cursor:nesw-resize}
  .cropbox .h.se{right:-7px;bottom:-7px;cursor:nwse-resize}

  /* favicon previews */
  .favgrid{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-top:6px}
  .favtile{text-align:center}
  .favtile img{border:1.5px solid var(--line);border-radius:6px;background:var(--paper);image-rendering:auto}
  .favtile .k{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;color:var(--ink-faint);margin-top:6px}

  /* counter under a field */
  .count{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--ink-faint);margin-top:6px;text-align:right}
  .count.over{color:#D9962B;font-weight:600}

  /* SERP preview card */
  .serp{font-family:Arial,sans-serif;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:20px 22px;max-width:600px}
  .serp.mobile{max-width:380px}
  .serp .crumb{display:flex;align-items:center;gap:8px;margin-bottom:3px}
  .serp .fav{width:26px;height:26px;border-radius:50%;background:var(--paper);border:1px solid var(--line);flex:none;display:grid;place-items:center;font-size:13px;color:var(--ink-soft)}
  .serp .site{font-size:14px;color:#202124;line-height:1.2}
  .serp .path{font-size:12px;color:#4d5156}
  .serp .ttl{color:#1a0dab;font-size:20px;line-height:1.3;margin:2px 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .serp.mobile .ttl{white-space:normal}
  .serp .dsc{color:#4d5156;font-size:14px;line-height:1.58}

  /* developer tools */
  mark{background:#FCE38A;color:var(--ink);border-radius:2px;padding:0 1px}
  .hashrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
  .hashrow:last-child{border:none}
  .hashrow .nm{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-soft);width:72px;flex:none;font-weight:600}
  .hashrow .hx{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all;flex:1;color:var(--ink)}
  .iconbtn{border:1.5px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--ink-soft);font-weight:600;flex:none}
  .iconbtn:hover{border-color:var(--ink);color:var(--ink)}
  .matchbox{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:14px;white-space:pre-wrap;word-break:break-word;line-height:1.7;min-height:80px}
  .bignum{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:23px;font-weight:600;color:var(--ink)}
  .qrwrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:14px 0 4px}
  .qrwrap canvas,.qrwrap img{border-radius:8px;background:#fff}

  /* diff viewer */
  .diff{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;border:1.5px solid var(--line);border-radius:10px;overflow:auto;max-height:440px;background:var(--surface)}
  .diff .ln{display:flex;gap:8px;padding:2px 12px;white-space:pre-wrap;word-break:break-word;line-height:1.55}
  .diff .ln .sign{width:12px;flex:none;user-select:none;color:var(--ink-faint)}
  .diff .ln.add{background:rgba(31,164,99,.12)} .diff .ln.add .sign{color:#1FA463}
  .diff .ln.del{background:rgba(220,73,79,.11)} .diff .ln.del .sign{color:#D9494F}
  .diff .ln .tx{flex:1}

  /* color converter */
  .swatch{width:100%;height:96px;border-radius:12px;border:1.5px solid var(--line);margin-bottom:18px}
  input[type=color]{width:46px;height:38px;padding:2px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;vertical-align:middle}

  /* file lists (PDF tools) */
  .filerow{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;margin-bottom:8px;font-size:13px;background:var(--surface)}
  .filerow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filerow .sz{color:var(--ink-faint);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;flex:none}
  .filerow button:not(.iconbtn){border:1.5px solid var(--line);background:var(--paper);border-radius:7px;width:28px;height:28px;flex:none;color:var(--ink-soft);font-size:12px;line-height:1;padding:0}
  .filerow button:not(.iconbtn):hover{border-color:var(--ink);color:var(--ink)}

  /* ===== SEO tool landing pages ===== */
  .toolpage{max-width:760px;margin:0 auto;padding:8px 22px 60px}
  .crumb{font-size:12.5px;color:var(--ink-faint);margin:14px 0 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .crumb a{color:var(--ink-soft);text-decoration:none}.crumb a:hover{color:var(--primary)}
  .toolpage>h1{font-family:'Space Grotesk',sans-serif;font-size:30px;line-height:1.15;margin:0 0 12px;letter-spacing:-.01em}
  .toolpage .lede{font-size:16px;color:var(--ink-soft);line-height:1.6;margin:0 0 24px;max-width:62ch}
  .seo-section{margin-top:40px}
  .seo-section h2{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0 0 12px}
  .seo-section p{color:var(--ink-soft);line-height:1.65;margin:0 0 12px}
  .feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:6px}
  .feat .f{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:16px}
  .feat .f b{display:block;font-family:'Space Grotesk',sans-serif;font-size:14px;margin-bottom:4px}
  .feat .f span{font-size:13px;color:var(--ink-soft);line-height:1.5}
  .faq dt{font-weight:600;margin-top:16px;font-size:15px}
  .faq dd{margin:6px 0 0;color:var(--ink-soft);line-height:1.6;font-size:14.5px}
  .related-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  .related-list a{font-size:13.5px;text-decoration:none;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;transition:border-color .12s}
  .related-list a:hover{border-color:var(--primary);color:var(--primary)}
  .richtable-wrap{overflow-x:auto;margin:14px 0}
  .richtable{border-collapse:collapse;width:100%;font-size:14.5px}
  .richtable th,.richtable td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
  .richtable thead th{background:var(--surface);font-weight:600;color:var(--ink)}
  .richtable tbody tr:nth-child(even){background:var(--surface)}
  .formula-box{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:14px 16px;margin:14px 0;display:flex;flex-direction:column;gap:8px}
  .formula-box code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px;color:var(--primary);white-space:pre-wrap}
  .worked-eg{background:var(--surface);border-left:3px solid var(--primary);border-radius:0 8px 8px 0;padding:12px 16px;margin:12px 0;display:flex;flex-direction:column;gap:5px}
  .worked-eg b{color:var(--ink);font-size:14.5px;margin-bottom:2px}
  .worked-eg span{font-size:14px;color:var(--ink-soft);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .related-rich{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:6px}
  .related-rich a{display:flex;flex-direction:column;gap:3px;text-decoration:none;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .12s}
  .related-rich a:hover{border-color:var(--primary)}
  .related-rich a b{color:var(--primary);font-size:14.5px;font-weight:600}
  .related-rich a span{color:var(--ink-soft);font-size:13px;line-height:1.4}

  /* ===== Crypto donate ===== */
  .donate-fab{position:fixed;right:20px;bottom:20px;z-index:45;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow-lift);display:inline-flex;align-items:center;gap:7px;transition:transform .14s,border-color .14s}
  .donate-fab .hh{color:#E11D6B;font-size:14px}
  .donate-fab:hover{transform:translateY(-2px);border-color:var(--primary)}
  .donate-overlay{position:fixed;inset:0;background:rgba(20,24,40,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
  .donate-overlay.show{display:flex;animation:rise .2s ease}
  .donate-card{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:28px 26px;max-width:380px;width:100%;position:relative;box-shadow:var(--shadow-lift);text-align:center}
  .donate-x{position:absolute;top:14px;right:14px;border:none;background:transparent;font-size:15px;color:var(--ink-faint);cursor:pointer;line-height:1}
  .donate-card h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin:0 0 8px;letter-spacing:-.01em}
  .donate-card p{color:var(--ink-soft);font-size:13.5px;line-height:1.55;margin:0 0 18px}
  .donate-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
  .donate-tabs button{border:1.5px solid var(--line);background:var(--paper);color:var(--ink-soft);font-size:12px;font-weight:600;padding:5px 12px 5px 7px;border-radius:999px;transition:all .12s;display:inline-flex;align-items:center;gap:6px}
  .donate-tabs button svg{width:19px;height:19px;display:block;flex:none}
  .donate-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .donate-qr{display:flex;justify-content:center;align-items:center;min-height:166px;margin-bottom:14px}
  .donate-qr img,.donate-qr canvas{border-radius:10px;border:1.5px solid var(--line);padding:8px;background:#fff}
  .donate-qr .qhint{font-size:12px;color:var(--ink-faint)}
  .donate-addr{display:flex;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:8px 10px}
  .donate-addr code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;word-break:break-all;flex:1;text-align:left;color:var(--ink)}
  .donate-net{font-size:12px;color:var(--ink-faint);margin-top:11px}
  .donate-warn{font-size:12px;color:#B5791F;background:rgba(217,150,43,.13);border-radius:9px;padding:9px 11px;margin-top:13px;line-height:1.45}

  /* ===== Pro tier ===== */
  .theme-toggle{margin-left:auto;flex:none;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;transition:border-color .18s,color .18s,background .18s}
  .theme-toggle:hover{border-color:var(--primary);color:var(--primary)}
  .theme-toggle svg{width:20px;height:20px;position:absolute;transition:opacity .28s ease,transform .4s cubic-bezier(.5,1.6,.5,1)}
  .theme-toggle .ic-sun{opacity:0;transform:rotate(-70deg) scale(.4)}
  .theme-toggle .ic-moon{opacity:1;transform:rotate(0) scale(1)}
  html[data-theme="dark"] .theme-toggle .ic-sun{opacity:1;transform:rotate(0) scale(1)}
  html[data-theme="dark"] .theme-toggle .ic-moon{opacity:0;transform:rotate(70deg) scale(.4)}
  html[data-theme="dark"] .theme-toggle{color:#F5C451}
  html[data-theme="dark"] .theme-toggle:hover{color:#FFD873;border-color:#F5C451}
  .pro-btn{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;padding:8px 15px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;transition:all .14s;white-space:nowrap}
  .pro-btn:hover{border-color:var(--primary);color:var(--primary)}
  .pro-btn .spark{color:#E0A100;font-size:13px}
  .pro-btn.is-pro{background:linear-gradient(135deg,var(--primary),#7C3AED);border:none;color:#fff}
  .pro-btn.is-pro .spark{color:#fff}
  .pro-card{max-height:90vh;overflow:auto}
  .pro-badge-lg{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--primary);border:1.5px solid var(--primary);border-radius:999px;padding:4px 12px;margin-bottom:14px}
  .pro-badge-lg.on{background:linear-gradient(135deg,var(--primary),#7C3AED);color:#fff;border-color:transparent}
  .pro-benefits{list-style:none;padding:0;margin:2px 0 18px;text-align:left;display:flex;flex-direction:column;gap:10px}
  .pro-benefits li{position:relative;padding-left:27px;font-size:14px;color:var(--ink);line-height:1.4}
  .pro-benefits li::before{content:"\2713";position:absolute;left:2px;top:0;color:var(--ready);font-weight:800}
  .pro-price{font-family:'Space Grotesk',sans-serif;font-size:27px;font-weight:700;margin:2px 0 14px;letter-spacing:-.01em}
  .pro-buy{width:100%;justify-content:center;background:linear-gradient(135deg,var(--primary),#7C3AED);text-decoration:none;font-size:15px;padding:13px}
  .pro-buy:hover{filter:brightness(1.05)}
  .pro-sep{font-size:11px;color:var(--ink-faint);margin:20px 0 11px;text-transform:uppercase;letter-spacing:.06em}
  .pro-key{display:flex;gap:8px}
  .pro-key input{flex:1}
  .pro-msg{font-size:13px;margin-top:11px;min-height:18px;font-weight:500}
  .pro-msg.ok{color:var(--ready)} .pro-msg.err{color:#D9494F}
  .pro-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);text-align:left;font-size:14px;font-weight:600}
  .pro-row.col{flex-direction:column;align-items:flex-start;gap:12px}
  .switch{width:44px;height:25px;border-radius:999px;background:var(--line);border:none;position:relative;transition:background .15s;flex:none;cursor:pointer}
  .switch i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
  .switch.on{background:var(--primary)} .switch.on i{left:22px}
  .accents{display:flex;gap:9px;flex-wrap:wrap}
  .accents button{width:28px;height:28px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0}
  .accents button.on{box-shadow:0 0 0 2.5px var(--primary)}

  /* ===== Dark theme (Pro) ===== */
  html[data-theme="dark"]{
    --paper:#0E0F15;--grid:rgba(255,255,255,.035);--dot:rgba(150,160,210,.07);--ink:#E9EBF2;--ink-soft:#A4ABBE;--ink-faint:#6C7488;
    --line:#272B38;--line-soft:#1C2029;--surface:#161922;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.34);
    --shadow-lift:0 4px 8px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.55);
  }
  html[data-theme="dark"] .masthead{background:linear-gradient(180deg, color-mix(in srgb,var(--paper) 90%, transparent), color-mix(in srgb,var(--paper) 66%, transparent))}
  html[data-theme="dark"] .seg button.on,
  html[data-theme="dark"] .donate-tabs button.on{background:var(--primary);border-color:var(--primary);color:#fff}
  html[data-theme="dark"] .chip.on{background:var(--cc,var(--primary));border-color:var(--cc,var(--primary));color:#fff}
  html[data-theme="dark"] .toast{background:#20242F;color:#fff}
  html[data-theme="dark"] .output{background:#08090D;color:#E8EAF0}
  html[data-theme="dark"] .searchbox kbd,
  html[data-theme="dark"] textarea,html[data-theme="dark"] input[type=text],
  html[data-theme="dark"] input[type=url],html[data-theme="dark"] input[type=number],
  html[data-theme="dark"] input[type=date],html[data-theme="dark"] input[type=time],html[data-theme="dark"] input[type=datetime-local],
  html[data-theme="dark"] select{background-color:#0F121A}
  html[data-theme="dark"] select{background-color:#0F121A;background-repeat:no-repeat;background-position:right 13px center;background-size:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AEB6C8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
  html[data-theme="dark"] textarea:hover,html[data-theme="dark"] input:hover,html[data-theme="dark"] select:hover{border-color:#3a4152}
  html[data-theme="dark"] .pro-btn:not(.is-pro){background:var(--surface)}
  html[data-theme="dark"] .led.ready{color:#34D399}
  html[data-theme="dark"] .led.soon{color:#E8B057}

  /* Pro tool markers */
  .pro-pill{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;font-weight:700;letter-spacing:.07em;color:#fff;background:linear-gradient(135deg,var(--primary),#7C3AED);padding:3px 9px;border-radius:999px;white-space:nowrap}
  .pro-lock{text-align:center;padding:46px 26px}
  .pro-lock .pro-lock-ico{font-size:38px;margin-bottom:4px}
  .pro-lock h3{font-family:'Space Grotesk',sans-serif;font-size:22px;margin:6px 0 8px;letter-spacing:-.01em}
  .pro-lock p{color:var(--ink-soft);font-size:14px;max-width:46ch;margin:0 auto 18px;line-height:1.6}
  .pro-lock .pro-badge-lg{margin-bottom:4px}

  /* Pro one-time-use trial banner */
  .trial-banner{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5;color:var(--ink-soft);background:linear-gradient(135deg,rgba(99,102,241,.10),rgba(124,58,237,.10));border:1.5px solid rgba(124,58,237,.28);border-radius:11px;padding:11px 15px;margin-bottom:18px}
  .trial-banner b{color:var(--primary)}
  .trial-banner a{color:var(--primary);font-weight:600;text-decoration:none}
  .trial-banner a:hover{text-decoration:underline}

  .pro-soon{font-size:13.5px;color:var(--ink-soft);background:var(--paper);border:1.5px dashed var(--line);border-radius:10px;padding:12px 14px;margin:4px 0 4px;text-align:center}

  .seo-section h3{font-family:var(--font-head,'Space Grotesk',sans-serif);font-size:15px;font-weight:600;margin:18px 0 8px;color:var(--ink)}
  .ttips{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
  .ttips li{font-size:14.5px;line-height:1.55;color:var(--ink-soft,#444)}

  /* ===== new utility tools ===== */
  .md-prev{border:1.5px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--surface);font-size:15px;line-height:1.6;overflow:auto;max-height:360px}
  .md-prev h1,.md-prev h2,.md-prev h3{font-family:'Space Grotesk',sans-serif;margin:.6em 0 .3em;line-height:1.25}
  .md-prev code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--paper);padding:1px 5px;border-radius:5px;font-size:.9em}
  .md-prev blockquote{border-left:3px solid var(--line);margin:.5em 0;padding-left:12px;color:var(--ink-soft)}
  .md-prev ul,.md-prev ol{padding-left:22px;margin:.4em 0}
  .md-prev img{max-width:100%}
  .caselist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
  .caserow{display:flex;align-items:center;gap:12px;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:9px 12px}
  .caserow .k{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--ink-soft);min-width:120px}
  .caserow code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:var(--ink);flex:1;word-break:break-all}
  .caserow .btn{padding:6px 12px;font-size:12.5px}
  .shadegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
  .shade{height:62px;border:none;border-radius:9px;display:flex;align-items:flex-end;justify-content:center;padding:6px;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.06)}
  .shade span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;background:rgba(255,255,255,.85);color:#14161D;padding:1px 5px;border-radius:5px}
  .timerface{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:72px;font-weight:600;letter-spacing:.02em;color:var(--ink);line-height:1}
  .timerface.done{color:var(--ready)}
  .tallynum{font-family:'Space Grotesk',sans-serif;font-size:84px;font-weight:700;color:var(--primary);line-height:1}

/* ===== Math tools: graph-paper "notebook" theme ===== */
#tvBody[data-cat="Math"] .panel{
  position:relative;
  background-color:#fbfcff;
  background-image:
    linear-gradient(rgba(61,52,214,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,52,214,.07) 1px, transparent 1px);
  background-size:24px 24px;
  background-position:-1px -1px;
  border:1.5px solid rgba(61,52,214,.20);
  border-radius:14px;
  overflow:hidden;
}
#tvBody[data-cat="Math"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:30px; height:30px; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%2861%2C52%2C214%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020V5a1%201%200%200%201%201-1h2%27%2F%3E%3Cline%20x1%3D%273%27%20y1%3D%2711%27%20x2%3D%278.5%27%20y2%3D%2711%27%2F%3E%3Cpath%20d%3D%27M20%2019c-4.5%200-4.5-11-9-11%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Math"] .panel > *{ position:relative; z-index:1; }
/* nested result panels: clean white "answer card", no double grid */
#tvBody[data-cat="Math"] .panel .panel,
#tvBody[data-cat="Math"] .stat{
  background:#fff;
  background-image:none;
  border:1.5px solid rgba(61,52,214,.18);
}
#tvBody[data-cat="Math"] .panel .panel::before{ content:none; }
/* numbers read like a calculator / formula */
#tvBody[data-cat="Math"] .stat .v,
#tvBody[data-cat="Math"] .output{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}
#tvBody[data-cat="Math"] .stat .v{ color:var(--primary); }
#tvBody[data-cat="Math"] input[type="number"],
#tvBody[data-cat="Math"] input[type="text"]{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(255,255,255,.85);
}
#tvBody[data-cat="Math"] .fld{ letter-spacing:.01em; }

/* ===== Sound tools — audio console theme ===== */
#tvBody[data-cat="Sound"] .panel{
  position:relative; overflow:hidden;
  color:#e9ebf7;
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(124,58,237,.28), transparent 60%),
    linear-gradient(165deg,#191634 0%,#161327 55%,#120f22 100%);
  border:1.5px solid rgba(124,58,237,.30);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(10,8,24,.4),0 14px 40px rgba(10,8,30,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
/* soundwave motif, top-right */
#tvBody[data-cat="Sound"] .panel::before{
  content:""; position:absolute; top:16px; right:18px; width:66px; height:26px; opacity:.5; pointer-events:none; z-index:0;
  background:
    linear-gradient(#8b7bff,#8b7bff) 0    9px/4px 8px  no-repeat,
    linear-gradient(#8b7bff,#8b7bff) 9px  4px/4px 18px no-repeat,
    linear-gradient(#8b7bff,#8b7bff) 18px 0px/4px 26px no-repeat,
    linear-gradient(#8b7bff,#8b7bff) 27px 6px/4px 14px no-repeat,
    linear-gradient(#8b7bff,#8b7bff) 36px 2px/4px 22px no-repeat,
    linear-gradient(#8b7bff,#8b7bff) 45px 9px/4px 8px  no-repeat,
    linear-gradient(#8b7bff,#8b7bff) 54px 4px/4px 18px no-repeat,
    linear-gradient(#8b7bff,#8b7bff) 63px 8px/4px 10px no-repeat;
}
#tvBody[data-cat="Sound"] .panel > *{ position:relative; z-index:1; }

/* text + labels */
#tvBody[data-cat="Sound"] .panel p{ color:#b7bcda; }
#tvBody[data-cat="Sound"] .fld,
#tvBody[data-cat="Sound"] label.fld{ color:#d6d9ee; }
#tvBody[data-cat="Sound"] .hint{ color:#8b90b6; }

/* inputs on dark */
#tvBody[data-cat="Sound"] input[type=text],
#tvBody[data-cat="Sound"] input[type=number],
#tvBody[data-cat="Sound"] select,
#tvBody[data-cat="Sound"] textarea{
  background-color:rgba(8,7,20,.55); color:#eef0fb;
  border:1.5px solid rgba(139,123,255,.28);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
#tvBody[data-cat="Sound"] input:hover,
#tvBody[data-cat="Sound"] select:hover,
#tvBody[data-cat="Sound"] textarea:hover{ border-color:rgba(139,123,255,.5); }
#tvBody[data-cat="Sound"] input:focus,
#tvBody[data-cat="Sound"] select:focus,
#tvBody[data-cat="Sound"] textarea:focus{
  border-color:#8b7bff; background-color:rgba(8,7,20,.8);
  box-shadow:0 0 0 4px rgba(124,58,237,.22);
}
#tvBody[data-cat="Sound"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23AEA6E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* play / primary buttons glow */
#tvBody[data-cat="Sound"] .btn{
  background:linear-gradient(135deg,#7C3AED,#5b21d6);
  box-shadow:0 4px 16px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.18);
  border:none;
}
#tvBody[data-cat="Sound"] .btn:hover{ background:linear-gradient(135deg,#8b47ff,#6a2ee0); box-shadow:0 6px 22px rgba(124,58,237,.6); }
#tvBody[data-cat="Sound"] .btn.ghost{
  background:rgba(255,255,255,.06); color:#e9ebf7;
  border:1.5px solid rgba(139,123,255,.35); box-shadow:none;
}
#tvBody[data-cat="Sound"] .btn.ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(139,123,255,.6); }

/* faders */
#tvBody[data-cat="Sound"] input[type=range]{ background:rgba(255,255,255,.12); height:7px; }
#tvBody[data-cat="Sound"] input[type=range]::-webkit-slider-thumb{
  background:radial-gradient(circle at 35% 30%,#c7b9ff,#7C3AED);
  border:3px solid #171430; box-shadow:0 0 10px rgba(139,123,255,.8);
  width:20px;height:20px;
}
#tvBody[data-cat="Sound"] input[type=range]::-moz-range-thumb{
  background:#8b7bff; border:3px solid #171430; box-shadow:0 0 10px rgba(139,123,255,.8);
}
#tvBody[data-cat="Sound"] input[type=range]::-moz-range-track{ background:rgba(255,255,255,.12); }

/* stat cards + pills + output on dark */
#tvBody[data-cat="Sound"] .stats{ background:rgba(139,123,255,.18); border-color:rgba(139,123,255,.25); }
#tvBody[data-cat="Sound"] .stat{ background:#181530; }
#tvBody[data-cat="Sound"] .stat .v{ color:#eae7ff; }
#tvBody[data-cat="Sound"] .stat .k{ color:#8b90b6; }
#tvBody[data-cat="Sound"] .pill{ background:rgba(139,123,255,.22); color:#cfc6ff; }
#tvBody[data-cat="Sound"] .output{ background:#0a0817; color:#dfe1f2; border:1px solid rgba(139,123,255,.2); }
/* keyboard/interval buttons inside sound tools */
#tvBody[data-cat="Sound"] [data-s]{ color:#e9ebf7; }

/* ===== Category themes — clean accent (no busy pattern), motif & controls ===== */
#tvBody[data-cat="Developer"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(22,163,74,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(22,163,74,.26); border-radius:15px;
}
#tvBody[data-cat="Developer"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%2822%2C163%2C74%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%278%207%203%2012%208%2017%27%2F%3E%3Cpolyline%20points%3D%2716%207%2021%2012%2016%2017%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Developer"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Developer"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(22,163,74,.20); }
#tvBody[data-cat="Developer"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Developer"] .stats{ border-color:rgba(22,163,74,.22); }
#tvBody[data-cat="Developer"] .stat{ background:var(--surface); }
#tvBody[data-cat="Developer"] .stat .v{ color:rgb(22,163,74); }
#tvBody[data-cat="Developer"] .pill{ background:rgba(22,163,74,.13); color:rgb(22,163,74); }
#tvBody[data-cat="Developer"] .btn{ background:linear-gradient(135deg, rgb(22,163,74), rgb(16,123,56)); box-shadow:0 3px 12px rgba(22,163,74,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Developer"] .btn:hover{ background:linear-gradient(135deg, rgb(59,177,102), rgb(22,163,74)); box-shadow:0 5px 18px rgba(22,163,74,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Developer"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Developer"] .btn.ghost:hover{ border-color:rgba(22,163,74,.6); color:rgb(22,163,74); background:rgba(22,163,74,.06); }
#tvBody[data-cat="Developer"] input:focus,#tvBody[data-cat="Developer"] select:focus,#tvBody[data-cat="Developer"] textarea:focus{ border-color:rgb(22,163,74); box-shadow:0 0 0 4px rgba(22,163,74,.16); }
#tvBody[data-cat="Developer"] input[type=range]{ accent-color:rgb(22,163,74); }
#tvBody[data-cat="Developer"] input[type=range]::-webkit-slider-thumb{ background:rgb(22,163,74); }
#tvBody[data-cat="Developer"] input[type=range]::-moz-range-thumb{ background:rgb(22,163,74); }
#tvBody[data-cat="Text"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(202,110,6,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(202,110,6,.26); border-radius:15px;
}
#tvBody[data-cat="Text"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28202%2C110%2C6%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%206h16M4%2011h16M4%2016h10%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Text"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Text"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(202,110,6,.20); }
#tvBody[data-cat="Text"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Text"] .stats{ border-color:rgba(202,110,6,.22); }
#tvBody[data-cat="Text"] .stat{ background:var(--surface); }
#tvBody[data-cat="Text"] .stat .v{ color:rgb(202,110,6); }
#tvBody[data-cat="Text"] .pill{ background:rgba(202,110,6,.13); color:rgb(202,110,6); }
#tvBody[data-cat="Text"] .btn{ background:linear-gradient(135deg, rgb(202,110,6), rgb(153,83,4)); box-shadow:0 3px 12px rgba(202,110,6,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Text"] .btn:hover{ background:linear-gradient(135deg, rgb(210,133,45), rgb(202,110,6)); box-shadow:0 5px 18px rgba(202,110,6,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Text"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Text"] .btn.ghost:hover{ border-color:rgba(202,110,6,.6); color:rgb(202,110,6); background:rgba(202,110,6,.06); }
#tvBody[data-cat="Text"] input:focus,#tvBody[data-cat="Text"] select:focus,#tvBody[data-cat="Text"] textarea:focus{ border-color:rgb(202,110,6); box-shadow:0 0 0 4px rgba(202,110,6,.16); }
#tvBody[data-cat="Text"] input[type=range]{ accent-color:rgb(202,110,6); }
#tvBody[data-cat="Text"] input[type=range]::-webkit-slider-thumb{ background:rgb(202,110,6); }
#tvBody[data-cat="Text"] input[type=range]::-moz-range-thumb{ background:rgb(202,110,6); }
#tvBody[data-cat="Calculate"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(2,132,199,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(2,132,199,.26); border-radius:15px;
}
#tvBody[data-cat="Calculate"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%282%2C132%2C199%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%273%27%20width%3D%2714%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%277%27%20x2%3D%2716%27%20y2%3D%277%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%2712%27%20x2%3D%278.01%27%20y2%3D%2712%27%2F%3E%3Cline%20x1%3D%2712%27%20y1%3D%2712%27%20x2%3D%2712.01%27%20y2%3D%2712%27%2F%3E%3Cline%20x1%3D%2716%27%20y1%3D%2712%27%20x2%3D%2716.01%27%20y2%3D%2712%27%2F%3E%3Cline%20x1%3D%278%27%20y1%3D%2716%27%20x2%3D%278.01%27%20y2%3D%2716%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Calculate"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Calculate"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(2,132,199,.20); }
#tvBody[data-cat="Calculate"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Calculate"] .stats{ border-color:rgba(2,132,199,.22); }
#tvBody[data-cat="Calculate"] .stat{ background:var(--surface); }
#tvBody[data-cat="Calculate"] .stat .v{ color:rgb(2,132,199); }
#tvBody[data-cat="Calculate"] .pill{ background:rgba(2,132,199,.13); color:rgb(2,132,199); }
#tvBody[data-cat="Calculate"] .btn{ background:linear-gradient(135deg, rgb(2,132,199), rgb(1,100,151)); box-shadow:0 3px 12px rgba(2,132,199,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Calculate"] .btn:hover{ background:linear-gradient(135deg, rgb(42,151,207), rgb(2,132,199)); box-shadow:0 5px 18px rgba(2,132,199,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Calculate"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Calculate"] .btn.ghost:hover{ border-color:rgba(2,132,199,.6); color:rgb(2,132,199); background:rgba(2,132,199,.06); }
#tvBody[data-cat="Calculate"] input:focus,#tvBody[data-cat="Calculate"] select:focus,#tvBody[data-cat="Calculate"] textarea:focus{ border-color:rgb(2,132,199); box-shadow:0 0 0 4px rgba(2,132,199,.16); }
#tvBody[data-cat="Calculate"] input[type=range]{ accent-color:rgb(2,132,199); }
#tvBody[data-cat="Calculate"] input[type=range]::-webkit-slider-thumb{ background:rgb(2,132,199); }
#tvBody[data-cat="Calculate"] input[type=range]::-moz-range-thumb{ background:rgb(2,132,199); }
#tvBody[data-cat="Games & Misc"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(219,39,119,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(219,39,119,.26); border-radius:15px;
}
#tvBody[data-cat="Games & Misc"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28219%2C39%2C119%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%273%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%278.5%27%20r%3D%271.1%27%20fill%3D%27rgb%28219%2C39%2C119%29%27%2F%3E%3Ccircle%20cx%3D%2715.5%27%20cy%3D%2715.5%27%20r%3D%271.1%27%20fill%3D%27rgb%28219%2C39%2C119%29%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.1%27%20fill%3D%27rgb%28219%2C39%2C119%29%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Games & Misc"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Games & Misc"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(219,39,119,.20); }
#tvBody[data-cat="Games & Misc"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Games & Misc"] .stats{ border-color:rgba(219,39,119,.22); }
#tvBody[data-cat="Games & Misc"] .stat{ background:var(--surface); }
#tvBody[data-cat="Games & Misc"] .stat .v{ color:rgb(219,39,119); }
#tvBody[data-cat="Games & Misc"] .pill{ background:rgba(219,39,119,.13); color:rgb(219,39,119); }
#tvBody[data-cat="Games & Misc"] .btn{ background:linear-gradient(135deg, rgb(219,39,119), rgb(166,29,90)); box-shadow:0 3px 12px rgba(219,39,119,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Games & Misc"] .btn:hover{ background:linear-gradient(135deg, rgb(224,73,140), rgb(219,39,119)); box-shadow:0 5px 18px rgba(219,39,119,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Games & Misc"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Games & Misc"] .btn.ghost:hover{ border-color:rgba(219,39,119,.6); color:rgb(219,39,119); background:rgba(219,39,119,.06); }
#tvBody[data-cat="Games & Misc"] input:focus,#tvBody[data-cat="Games & Misc"] select:focus,#tvBody[data-cat="Games & Misc"] textarea:focus{ border-color:rgb(219,39,119); box-shadow:0 0 0 4px rgba(219,39,119,.16); }
#tvBody[data-cat="Games & Misc"] input[type=range]{ accent-color:rgb(219,39,119); }
#tvBody[data-cat="Games & Misc"] input[type=range]::-webkit-slider-thumb{ background:rgb(219,39,119); }
#tvBody[data-cat="Games & Misc"] input[type=range]::-moz-range-thumb{ background:rgb(219,39,119); }
#tvBody[data-cat="Accounting"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(21,128,61,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(21,128,61,.26); border-radius:15px;
}
#tvBody[data-cat="Accounting"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%2821%2C128%2C61%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%2712%27%20y1%3D%272.5%27%20x2%3D%2712%27%20y2%3D%2721.5%27%2F%3E%3Cpath%20d%3D%27M16.5%206H9.8a3.2%203.2%200%200%200%200%206.4h4.4a3.2%203.2%200%200%201%200%206.4H7%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Accounting"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Accounting"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(21,128,61,.20); }
#tvBody[data-cat="Accounting"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Accounting"] .stats{ border-color:rgba(21,128,61,.22); }
#tvBody[data-cat="Accounting"] .stat{ background:var(--surface); }
#tvBody[data-cat="Accounting"] .stat .v{ color:rgb(21,128,61); }
#tvBody[data-cat="Accounting"] .pill{ background:rgba(21,128,61,.13); color:rgb(21,128,61); }
#tvBody[data-cat="Accounting"] .btn{ background:linear-gradient(135deg, rgb(21,128,61), rgb(15,97,46)); box-shadow:0 3px 12px rgba(21,128,61,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Accounting"] .btn:hover{ background:linear-gradient(135deg, rgb(58,148,92), rgb(21,128,61)); box-shadow:0 5px 18px rgba(21,128,61,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Accounting"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Accounting"] .btn.ghost:hover{ border-color:rgba(21,128,61,.6); color:rgb(21,128,61); background:rgba(21,128,61,.06); }
#tvBody[data-cat="Accounting"] input:focus,#tvBody[data-cat="Accounting"] select:focus,#tvBody[data-cat="Accounting"] textarea:focus{ border-color:rgb(21,128,61); box-shadow:0 0 0 4px rgba(21,128,61,.16); }
#tvBody[data-cat="Accounting"] input[type=range]{ accent-color:rgb(21,128,61); }
#tvBody[data-cat="Accounting"] input[type=range]::-webkit-slider-thumb{ background:rgb(21,128,61); }
#tvBody[data-cat="Accounting"] input[type=range]::-moz-range-thumb{ background:rgb(21,128,61); }
#tvBody[data-cat="Image"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(124,58,237,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(124,58,237,.26); border-radius:15px;
}
#tvBody[data-cat="Image"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28124%2C58%2C237%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274.5%27%20width%3D%2718%27%20height%3D%2715%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%2710%27%20r%3D%271.6%27%2F%3E%3Cpath%20d%3D%27M4%2017l4.5-4.5%203.5%203.5%203-3%205%205%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Image"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Image"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(124,58,237,.20); }
#tvBody[data-cat="Image"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Image"] .stats{ border-color:rgba(124,58,237,.22); }
#tvBody[data-cat="Image"] .stat{ background:var(--surface); }
#tvBody[data-cat="Image"] .stat .v{ color:rgb(124,58,237); }
#tvBody[data-cat="Image"] .pill{ background:rgba(124,58,237,.13); color:rgb(124,58,237); }
#tvBody[data-cat="Image"] .btn{ background:linear-gradient(135deg, rgb(124,58,237), rgb(94,44,180)); box-shadow:0 3px 12px rgba(124,58,237,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Image"] .btn:hover{ background:linear-gradient(135deg, rgb(144,89,239), rgb(124,58,237)); box-shadow:0 5px 18px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Image"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Image"] .btn.ghost:hover{ border-color:rgba(124,58,237,.6); color:rgb(124,58,237); background:rgba(124,58,237,.06); }
#tvBody[data-cat="Image"] input:focus,#tvBody[data-cat="Image"] select:focus,#tvBody[data-cat="Image"] textarea:focus{ border-color:rgb(124,58,237); box-shadow:0 0 0 4px rgba(124,58,237,.16); }
#tvBody[data-cat="Image"] input[type=range]{ accent-color:rgb(124,58,237); }
#tvBody[data-cat="Image"] input[type=range]::-webkit-slider-thumb{ background:rgb(124,58,237); }
#tvBody[data-cat="Image"] input[type=range]::-moz-range-thumb{ background:rgb(124,58,237); }
#tvBody[data-cat="Convert"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(14,116,144,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(14,116,144,.26); border-radius:15px;
}
#tvBody[data-cat="Convert"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%2814%2C116%2C144%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%277%204%203%208%207%2012%27%2F%3E%3Cline%20x1%3D%273%27%20y1%3D%278%27%20x2%3D%2717%27%20y2%3D%278%27%2F%3E%3Cpolyline%20points%3D%2717%2012%2021%2016%2017%2020%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2716%27%20x2%3D%277%27%20y2%3D%2716%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Convert"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Convert"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(14,116,144,.20); }
#tvBody[data-cat="Convert"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Convert"] .stats{ border-color:rgba(14,116,144,.22); }
#tvBody[data-cat="Convert"] .stat{ background:var(--surface); }
#tvBody[data-cat="Convert"] .stat .v{ color:rgb(14,116,144); }
#tvBody[data-cat="Convert"] .pill{ background:rgba(14,116,144,.13); color:rgb(14,116,144); }
#tvBody[data-cat="Convert"] .btn{ background:linear-gradient(135deg, rgb(14,116,144), rgb(10,88,109)); box-shadow:0 3px 12px rgba(14,116,144,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Convert"] .btn:hover{ background:linear-gradient(135deg, rgb(52,138,161), rgb(14,116,144)); box-shadow:0 5px 18px rgba(14,116,144,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Convert"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Convert"] .btn.ghost:hover{ border-color:rgba(14,116,144,.6); color:rgb(14,116,144); background:rgba(14,116,144,.06); }
#tvBody[data-cat="Convert"] input:focus,#tvBody[data-cat="Convert"] select:focus,#tvBody[data-cat="Convert"] textarea:focus{ border-color:rgb(14,116,144); box-shadow:0 0 0 4px rgba(14,116,144,.16); }
#tvBody[data-cat="Convert"] input[type=range]{ accent-color:rgb(14,116,144); }
#tvBody[data-cat="Convert"] input[type=range]::-webkit-slider-thumb{ background:rgb(14,116,144); }
#tvBody[data-cat="Convert"] input[type=range]::-moz-range-thumb{ background:rgb(14,116,144); }
#tvBody[data-cat="Color & Design"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(225,29,72,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(225,29,72,.26); border-radius:15px;
}
#tvBody[data-cat="Color & Design"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28225%2C29%2C72%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203a9%209%200%201%200%200%2018c.9%200%201.4-.7%201.4-1.5%200-1%20.7-1.5%201.6-1.5H18a3%203%200%200%200%203-3c0-5-4-9-9-9z%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2711%27%20r%3D%271.1%27%20fill%3D%27rgb%28225%2C29%2C72%29%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%271.1%27%20fill%3D%27rgb%28225%2C29%2C72%29%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2711%27%20r%3D%271.1%27%20fill%3D%27rgb%28225%2C29%2C72%29%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Color & Design"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Color & Design"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(225,29,72,.20); }
#tvBody[data-cat="Color & Design"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Color & Design"] .stats{ border-color:rgba(225,29,72,.22); }
#tvBody[data-cat="Color & Design"] .stat{ background:var(--surface); }
#tvBody[data-cat="Color & Design"] .stat .v{ color:rgb(225,29,72); }
#tvBody[data-cat="Color & Design"] .pill{ background:rgba(225,29,72,.13); color:rgb(225,29,72); }
#tvBody[data-cat="Color & Design"] .btn{ background:linear-gradient(135deg, rgb(225,29,72), rgb(171,22,54)); box-shadow:0 3px 12px rgba(225,29,72,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Color & Design"] .btn:hover{ background:linear-gradient(135deg, rgb(229,65,101), rgb(225,29,72)); box-shadow:0 5px 18px rgba(225,29,72,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Color & Design"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Color & Design"] .btn.ghost:hover{ border-color:rgba(225,29,72,.6); color:rgb(225,29,72); background:rgba(225,29,72,.06); }
#tvBody[data-cat="Color & Design"] input:focus,#tvBody[data-cat="Color & Design"] select:focus,#tvBody[data-cat="Color & Design"] textarea:focus{ border-color:rgb(225,29,72); box-shadow:0 0 0 4px rgba(225,29,72,.16); }
#tvBody[data-cat="Color & Design"] input[type=range]{ accent-color:rgb(225,29,72); }
#tvBody[data-cat="Color & Design"] input[type=range]::-webkit-slider-thumb{ background:rgb(225,29,72); }
#tvBody[data-cat="Color & Design"] input[type=range]::-moz-range-thumb{ background:rgb(225,29,72); }
#tvBody[data-cat="Time & Date"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(79,70,229,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(79,70,229,.26); border-radius:15px;
}
#tvBody[data-cat="Time & Date"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%2879%2C70%2C229%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpolyline%20points%3D%2712%207%2012%2012%2015.5%2014%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Time & Date"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Time & Date"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(79,70,229,.20); }
#tvBody[data-cat="Time & Date"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Time & Date"] .stats{ border-color:rgba(79,70,229,.22); }
#tvBody[data-cat="Time & Date"] .stat{ background:var(--surface); }
#tvBody[data-cat="Time & Date"] .stat .v{ color:rgb(79,70,229); }
#tvBody[data-cat="Time & Date"] .pill{ background:rgba(79,70,229,.13); color:rgb(79,70,229); }
#tvBody[data-cat="Time & Date"] .btn{ background:linear-gradient(135deg, rgb(79,70,229), rgb(60,53,174)); box-shadow:0 3px 12px rgba(79,70,229,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Time & Date"] .btn:hover{ background:linear-gradient(135deg, rgb(107,99,233), rgb(79,70,229)); box-shadow:0 5px 18px rgba(79,70,229,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Time & Date"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Time & Date"] .btn.ghost:hover{ border-color:rgba(79,70,229,.6); color:rgb(79,70,229); background:rgba(79,70,229,.06); }
#tvBody[data-cat="Time & Date"] input:focus,#tvBody[data-cat="Time & Date"] select:focus,#tvBody[data-cat="Time & Date"] textarea:focus{ border-color:rgb(79,70,229); box-shadow:0 0 0 4px rgba(79,70,229,.16); }
#tvBody[data-cat="Time & Date"] input[type=range]{ accent-color:rgb(79,70,229); }
#tvBody[data-cat="Time & Date"] input[type=range]::-webkit-slider-thumb{ background:rgb(79,70,229); }
#tvBody[data-cat="Time & Date"] input[type=range]::-moz-range-thumb{ background:rgb(79,70,229); }
#tvBody[data-cat="Health & Fitness"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(220,38,38,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(220,38,38,.26); border-radius:15px;
}
#tvBody[data-cat="Health & Fitness"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28220%2C38%2C38%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.8%206.9a5%205%200%200%200-8.8-2.2A5%205%200%200%200%203.2%206.9c0%204.4%208.8%2010.1%208.8%2010.1s8.8-5.7%208.8-10.1z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Health & Fitness"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Health & Fitness"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(220,38,38,.20); }
#tvBody[data-cat="Health & Fitness"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Health & Fitness"] .stats{ border-color:rgba(220,38,38,.22); }
#tvBody[data-cat="Health & Fitness"] .stat{ background:var(--surface); }
#tvBody[data-cat="Health & Fitness"] .stat .v{ color:rgb(220,38,38); }
#tvBody[data-cat="Health & Fitness"] .pill{ background:rgba(220,38,38,.13); color:rgb(220,38,38); }
#tvBody[data-cat="Health & Fitness"] .btn{ background:linear-gradient(135deg, rgb(220,38,38), rgb(167,28,28)); box-shadow:0 3px 12px rgba(220,38,38,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Health & Fitness"] .btn:hover{ background:linear-gradient(135deg, rgb(225,72,72), rgb(220,38,38)); box-shadow:0 5px 18px rgba(220,38,38,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Health & Fitness"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Health & Fitness"] .btn.ghost:hover{ border-color:rgba(220,38,38,.6); color:rgb(220,38,38); background:rgba(220,38,38,.06); }
#tvBody[data-cat="Health & Fitness"] input:focus,#tvBody[data-cat="Health & Fitness"] select:focus,#tvBody[data-cat="Health & Fitness"] textarea:focus{ border-color:rgb(220,38,38); box-shadow:0 0 0 4px rgba(220,38,38,.16); }
#tvBody[data-cat="Health & Fitness"] input[type=range]{ accent-color:rgb(220,38,38); }
#tvBody[data-cat="Health & Fitness"] input[type=range]::-webkit-slider-thumb{ background:rgb(220,38,38); }
#tvBody[data-cat="Health & Fitness"] input[type=range]::-moz-range-thumb{ background:rgb(220,38,38); }
#tvBody[data-cat="Generate"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(147,51,234,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(147,51,234,.26); border-radius:15px;
}
#tvBody[data-cat="Generate"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28147%2C51%2C234%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l1.9%205.4L19%2010l-5.1%201.6L12%2017l-1.9-5.4L5%2010l5.1-1.6z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Generate"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Generate"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(147,51,234,.20); }
#tvBody[data-cat="Generate"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Generate"] .stats{ border-color:rgba(147,51,234,.22); }
#tvBody[data-cat="Generate"] .stat{ background:var(--surface); }
#tvBody[data-cat="Generate"] .stat .v{ color:rgb(147,51,234); }
#tvBody[data-cat="Generate"] .pill{ background:rgba(147,51,234,.13); color:rgb(147,51,234); }
#tvBody[data-cat="Generate"] .btn{ background:linear-gradient(135deg, rgb(147,51,234), rgb(111,38,177)); box-shadow:0 3px 12px rgba(147,51,234,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Generate"] .btn:hover{ background:linear-gradient(135deg, rgb(164,83,237), rgb(147,51,234)); box-shadow:0 5px 18px rgba(147,51,234,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Generate"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Generate"] .btn.ghost:hover{ border-color:rgba(147,51,234,.6); color:rgb(147,51,234); background:rgba(147,51,234,.06); }
#tvBody[data-cat="Generate"] input:focus,#tvBody[data-cat="Generate"] select:focus,#tvBody[data-cat="Generate"] textarea:focus{ border-color:rgb(147,51,234); box-shadow:0 0 0 4px rgba(147,51,234,.16); }
#tvBody[data-cat="Generate"] input[type=range]{ accent-color:rgb(147,51,234); }
#tvBody[data-cat="Generate"] input[type=range]::-webkit-slider-thumb{ background:rgb(147,51,234); }
#tvBody[data-cat="Generate"] input[type=range]::-moz-range-thumb{ background:rgb(147,51,234); }
#tvBody[data-cat="Content Creator"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(234,88,12,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(234,88,12,.26); border-radius:15px;
}
#tvBody[data-cat="Content Creator"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28234%2C88%2C12%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020l1-4L16%205l3%203L8%2019z%27%2F%3E%3Cline%20x1%3D%2713.5%27%20y1%3D%277.5%27%20x2%3D%2716.5%27%20y2%3D%2710.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Content Creator"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Content Creator"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(234,88,12,.20); }
#tvBody[data-cat="Content Creator"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Content Creator"] .stats{ border-color:rgba(234,88,12,.22); }
#tvBody[data-cat="Content Creator"] .stat{ background:var(--surface); }
#tvBody[data-cat="Content Creator"] .stat .v{ color:rgb(234,88,12); }
#tvBody[data-cat="Content Creator"] .pill{ background:rgba(234,88,12,.13); color:rgb(234,88,12); }
#tvBody[data-cat="Content Creator"] .btn{ background:linear-gradient(135deg, rgb(234,88,12), rgb(177,66,9)); box-shadow:0 3px 12px rgba(234,88,12,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Content Creator"] .btn:hover{ background:linear-gradient(135deg, rgb(237,114,50), rgb(234,88,12)); box-shadow:0 5px 18px rgba(234,88,12,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Content Creator"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Content Creator"] .btn.ghost:hover{ border-color:rgba(234,88,12,.6); color:rgb(234,88,12); background:rgba(234,88,12,.06); }
#tvBody[data-cat="Content Creator"] input:focus,#tvBody[data-cat="Content Creator"] select:focus,#tvBody[data-cat="Content Creator"] textarea:focus{ border-color:rgb(234,88,12); box-shadow:0 0 0 4px rgba(234,88,12,.16); }
#tvBody[data-cat="Content Creator"] input[type=range]{ accent-color:rgb(234,88,12); }
#tvBody[data-cat="Content Creator"] input[type=range]::-webkit-slider-thumb{ background:rgb(234,88,12); }
#tvBody[data-cat="Content Creator"] input[type=range]::-moz-range-thumb{ background:rgb(234,88,12); }
#tvBody[data-cat="SEO & Web"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(13,148,136,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(13,148,136,.26); border-radius:15px;
}
#tvBody[data-cat="SEO & Web"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%2813%2C148%2C136%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2710.5%27%20cy%3D%2710.5%27%20r%3D%276%27%2F%3E%3Cline%20x1%3D%2715%27%20y1%3D%2715%27%20x2%3D%2720.5%27%20y2%3D%2720.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="SEO & Web"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="SEO & Web"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(13,148,136,.20); }
#tvBody[data-cat="SEO & Web"] .panel .panel::before{ content:none; }
#tvBody[data-cat="SEO & Web"] .stats{ border-color:rgba(13,148,136,.22); }
#tvBody[data-cat="SEO & Web"] .stat{ background:var(--surface); }
#tvBody[data-cat="SEO & Web"] .stat .v{ color:rgb(13,148,136); }
#tvBody[data-cat="SEO & Web"] .pill{ background:rgba(13,148,136,.13); color:rgb(13,148,136); }
#tvBody[data-cat="SEO & Web"] .btn{ background:linear-gradient(135deg, rgb(13,148,136), rgb(9,112,103)); box-shadow:0 3px 12px rgba(13,148,136,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="SEO & Web"] .btn:hover{ background:linear-gradient(135deg, rgb(51,165,155), rgb(13,148,136)); box-shadow:0 5px 18px rgba(13,148,136,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="SEO & Web"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="SEO & Web"] .btn.ghost:hover{ border-color:rgba(13,148,136,.6); color:rgb(13,148,136); background:rgba(13,148,136,.06); }
#tvBody[data-cat="SEO & Web"] input:focus,#tvBody[data-cat="SEO & Web"] select:focus,#tvBody[data-cat="SEO & Web"] textarea:focus{ border-color:rgb(13,148,136); box-shadow:0 0 0 4px rgba(13,148,136,.16); }
#tvBody[data-cat="SEO & Web"] input[type=range]{ accent-color:rgb(13,148,136); }
#tvBody[data-cat="SEO & Web"] input[type=range]::-webkit-slider-thumb{ background:rgb(13,148,136); }
#tvBody[data-cat="SEO & Web"] input[type=range]::-moz-range-thumb{ background:rgb(13,148,136); }
#tvBody[data-cat="Files"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(71,85,105,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(71,85,105,.26); border-radius:15px;
}
#tvBody[data-cat="Files"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%2871%2C85%2C105%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%203H6.5A2.5%202.5%200%200%200%204%205.5v13A2.5%202.5%200%200%200%206.5%2021h11a2.5%202.5%200%200%200%202.5-2.5V8z%27%2F%3E%3Cpolyline%20points%3D%2713%203%2013%208%2020%208%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Files"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Files"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(71,85,105,.20); }
#tvBody[data-cat="Files"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Files"] .stats{ border-color:rgba(71,85,105,.22); }
#tvBody[data-cat="Files"] .stat{ background:var(--surface); }
#tvBody[data-cat="Files"] .stat .v{ color:rgb(71,85,105); }
#tvBody[data-cat="Files"] .pill{ background:rgba(71,85,105,.13); color:rgb(71,85,105); }
#tvBody[data-cat="Files"] .btn{ background:linear-gradient(135deg, rgb(71,85,105), rgb(53,64,79)); box-shadow:0 3px 12px rgba(71,85,105,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Files"] .btn:hover{ background:linear-gradient(135deg, rgb(100,112,129), rgb(71,85,105)); box-shadow:0 5px 18px rgba(71,85,105,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Files"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Files"] .btn.ghost:hover{ border-color:rgba(71,85,105,.6); color:rgb(71,85,105); background:rgba(71,85,105,.06); }
#tvBody[data-cat="Files"] input:focus,#tvBody[data-cat="Files"] select:focus,#tvBody[data-cat="Files"] textarea:focus{ border-color:rgb(71,85,105); box-shadow:0 0 0 4px rgba(71,85,105,.16); }
#tvBody[data-cat="Files"] input[type=range]{ accent-color:rgb(71,85,105); }
#tvBody[data-cat="Files"] input[type=range]::-webkit-slider-thumb{ background:rgb(71,85,105); }
#tvBody[data-cat="Files"] input[type=range]::-moz-range-thumb{ background:rgb(71,85,105); }
#tvBody[data-cat="PDF"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(185,28,28,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(185,28,28,.26); border-radius:15px;
}
#tvBody[data-cat="PDF"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28185%2C28%2C28%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203H6.5A2.5%202.5%200%200%200%204%205.5v13A2.5%202.5%200%200%200%206.5%2021h11a2.5%202.5%200%200%200%202.5-2.5V8z%27%2F%3E%3Cpolyline%20points%3D%2714%203%2014%208%2020%208%27%2F%3E%3Cline%20x1%3D%278.5%27%20y1%3D%2713%27%20x2%3D%2715%27%20y2%3D%2713%27%2F%3E%3Cline%20x1%3D%278.5%27%20y1%3D%2716.5%27%20x2%3D%2713%27%20y2%3D%2716.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="PDF"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="PDF"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(185,28,28,.20); }
#tvBody[data-cat="PDF"] .panel .panel::before{ content:none; }
#tvBody[data-cat="PDF"] .stats{ border-color:rgba(185,28,28,.22); }
#tvBody[data-cat="PDF"] .stat{ background:var(--surface); }
#tvBody[data-cat="PDF"] .stat .v{ color:rgb(185,28,28); }
#tvBody[data-cat="PDF"] .pill{ background:rgba(185,28,28,.13); color:rgb(185,28,28); }
#tvBody[data-cat="PDF"] .btn{ background:linear-gradient(135deg, rgb(185,28,28), rgb(140,21,21)); box-shadow:0 3px 12px rgba(185,28,28,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="PDF"] .btn:hover{ background:linear-gradient(135deg, rgb(196,64,64), rgb(185,28,28)); box-shadow:0 5px 18px rgba(185,28,28,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="PDF"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="PDF"] .btn.ghost:hover{ border-color:rgba(185,28,28,.6); color:rgb(185,28,28); background:rgba(185,28,28,.06); }
#tvBody[data-cat="PDF"] input:focus,#tvBody[data-cat="PDF"] select:focus,#tvBody[data-cat="PDF"] textarea:focus{ border-color:rgb(185,28,28); box-shadow:0 0 0 4px rgba(185,28,28,.16); }
#tvBody[data-cat="PDF"] input[type=range]{ accent-color:rgb(185,28,28); }
#tvBody[data-cat="PDF"] input[type=range]::-webkit-slider-thumb{ background:rgb(185,28,28); }
#tvBody[data-cat="PDF"] input[type=range]::-moz-range-thumb{ background:rgb(185,28,28); }
#tvBody[data-cat="Live Data"] .panel{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 80% at 100% 0%, rgba(37,99,235,.05), transparent 42%), var(--surface);
  border:1.5px solid rgba(37,99,235,.26); border-radius:15px;
}
#tvBody[data-cat="Live Data"] .panel::before{
  content:""; position:absolute; top:14px; right:16px; z-index:0; pointer-events:none;
  width:28px; height:28px; opacity:.5; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%2837%2C99%2C235%29%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012a8%208%200%200%201%208-8%27%2F%3E%3Cpath%20d%3D%27M4%2012a8%208%200%200%200%208%208%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.4%27%20fill%3D%27rgb%2837%2C99%2C235%29%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M12%204a8%208%200%200%201%200%2016%27%20opacity%3D%27.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
#tvBody[data-cat="Live Data"] .panel > *{ position:relative; z-index:1; }
#tvBody[data-cat="Live Data"] .panel .panel{ background:var(--surface); border:1.5px solid rgba(37,99,235,.20); }
#tvBody[data-cat="Live Data"] .panel .panel::before{ content:none; }
#tvBody[data-cat="Live Data"] .stats{ border-color:rgba(37,99,235,.22); }
#tvBody[data-cat="Live Data"] .stat{ background:var(--surface); }
#tvBody[data-cat="Live Data"] .stat .v{ color:rgb(37,99,235); }
#tvBody[data-cat="Live Data"] .pill{ background:rgba(37,99,235,.13); color:rgb(37,99,235); }
#tvBody[data-cat="Live Data"] .btn{ background:linear-gradient(135deg, rgb(37,99,235), rgb(28,75,178)); box-shadow:0 3px 12px rgba(37,99,235,.34), inset 0 1px 0 rgba(255,255,255,.16); border:none; }
#tvBody[data-cat="Live Data"] .btn:hover{ background:linear-gradient(135deg, rgb(71,123,238), rgb(37,99,235)); box-shadow:0 5px 18px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.2); }
#tvBody[data-cat="Live Data"] .btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:none; border:1.5px solid var(--line); }
#tvBody[data-cat="Live Data"] .btn.ghost:hover{ border-color:rgba(37,99,235,.6); color:rgb(37,99,235); background:rgba(37,99,235,.06); }
#tvBody[data-cat="Live Data"] input:focus,#tvBody[data-cat="Live Data"] select:focus,#tvBody[data-cat="Live Data"] textarea:focus{ border-color:rgb(37,99,235); box-shadow:0 0 0 4px rgba(37,99,235,.16); }
#tvBody[data-cat="Live Data"] input[type=range]{ accent-color:rgb(37,99,235); }
#tvBody[data-cat="Live Data"] input[type=range]::-webkit-slider-thumb{ background:rgb(37,99,235); }
#tvBody[data-cat="Live Data"] input[type=range]::-moz-range-thumb{ background:rgb(37,99,235); }

/* ============================================================
   VIEWER KIT — shared layout system for the file/data viewers
   ============================================================ */
.vw-drop{border:1.5px dashed var(--line);border-radius:13px;padding:30px 22px;text-align:center;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s;display:flex;flex-direction:column;align-items:center;gap:10px}
.vw-drop:hover,.vw-drop.over{border-color:var(--primary);background:var(--primary-tint)}
.vw-drop .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--primary-tint);color:var(--primary)}
.vw-drop .ic svg{width:22px;height:22px}
.vw-drop b{font-weight:600;color:var(--ink);font-size:14.5px}
.vw-drop small{font-size:12.5px;color:var(--ink-faint);max-width:340px}

.vw-read{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:1.5px;background:var(--line);border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.vw-cell{background:var(--surface);padding:12px 15px;min-width:0}
.vw-cell .n{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;font-size:15px;color:var(--ink);line-height:1.15;word-break:break-word}
.vw-cell .l{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}

.vw-tblwrap{border:1.5px solid var(--line);border-radius:12px;overflow:auto;max-height:540px;background:var(--surface)}
.vw-tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
.vw-tbl thead th{position:sticky;top:0;background:var(--surface);z-index:1;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);padding:11px 13px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.vw-tbl tbody td{padding:9px 13px;border-bottom:1px solid var(--line-soft);color:var(--ink-soft);vertical-align:top}
.vw-tbl tbody tr:last-child td{border-bottom:none}
.vw-tbl tbody tr:hover td{background:var(--primary-tint)}
.vw-tbl td.mono,.vw-tbl th.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.vw-tbl td.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:nowrap}

.vw-chip{display:inline-flex;align-items:center;gap:5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;letter-spacing:.02em;white-space:nowrap}
.vw-chip.ok{background:rgba(31,164,99,.14);color:#1FA463}
.vw-chip.err{background:rgba(220,38,38,.14);color:#dc2626}
.vw-chip.warn{background:rgba(217,150,43,.16);color:#B5791F}
.vw-chip.info{background:rgba(61,52,214,.12);color:var(--primary)}
.vw-chip.mut{background:var(--line-soft);color:var(--ink-faint)}

.vw-kv{border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.vw-kv .row{display:flex;gap:16px;padding:11px 16px;border-bottom:1px solid var(--line-soft)}
.vw-kv .row:last-child{border-bottom:none}
.vw-kv .k{flex:none;width:132px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);font-weight:600;padding-top:3px}
.vw-kv .v{flex:1;min-width:0;color:var(--ink);word-break:break-word;font-size:14px}
.vw-kv .v.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink)}

.vw-search{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:0 12px;transition:border-color .15s,box-shadow .15s;flex:1;min-width:150px}
.vw-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint)}
.vw-search svg{width:15px;height:15px;color:var(--ink-faint);flex:none}
.vw-search input{border:none;background:transparent;padding:10px 0;font:inherit;font-size:13.5px;color:var(--ink);flex:1;min-width:0}
.vw-search input:focus{outline:none}

.vw-seg{display:inline-flex;background:var(--line-soft);border:1.5px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.vw-seg button{border:none;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:6px 12px;border-radius:6px;cursor:pointer;transition:.12s}
.vw-seg button.on{background:var(--surface);color:var(--primary);box-shadow:var(--shadow)}

.vw-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}

.vw-term{background:#0b0d16;border:1.5px solid var(--line);border-radius:13px;overflow:hidden}
.vw-term-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.08);color:#c7cce0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.vw-term-head .dots{display:flex;gap:6px}.vw-term-head .dots i{width:10px;height:10px;border-radius:50%;display:block}
.vw-term-body{padding:12px 15px;overflow:auto;max-height:520px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;color:#cbd0e8}

.vw-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:720px){.vw-split{grid-template-columns:1fr}}
.vw-pane{display:flex;flex-direction:column;gap:8px;min-width:0}
.vw-pane>label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);font-weight:600}
.vw-code{width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.55;border:1.5px solid var(--line);border-radius:11px;padding:13px;background:var(--surface);color:var(--ink);resize:vertical;min-height:230px}
.vw-code:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint)}
.vw-render{border:1.5px solid var(--line);border-radius:11px;padding:18px;background:var(--surface);min-height:230px;overflow:auto;display:flex;align-items:center;justify-content:center}

.vw-tree{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;overflow:auto;max-height:540px}
.vw-tree .nest{border-left:1px solid var(--line);margin-left:6px;padding-left:14px}
.vw-tree .kk{color:#9333EA}

.vw-card{border:1.5px solid var(--line);border-radius:14px;background:var(--surface);padding:18px;box-shadow:var(--shadow)}
.vw-avatar{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;color:#fff;background:linear-gradient(135deg,#514BE6,#8B5CF6);flex:none}

.vw-stage{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(130% 100% at 50% 6%,#232a52,#141834 42%,#0a0c17);border:1.5px solid var(--line);box-shadow:var(--shadow)}
.vw-stage.over{outline:2px dashed #8b8cff;outline-offset:-10px}
.vw-toolbar{position:absolute;top:12px;right:12px;display:flex;gap:3px;padding:5px;z-index:3;background:rgba(14,17,34,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px}
.vw-tb{width:34px;height:34px;display:grid;place-items:center;border:none;background:transparent;color:#c6cbe6;border-radius:8px;cursor:pointer;transition:.14s}
.vw-tb:hover{background:rgba(255,255,255,.12);color:#fff}.vw-tb.on{background:#3d34d6;color:#fff}
.vw-tb svg{width:17px;height:17px;stroke-width:1.8}
.vw-stagechip{position:absolute;top:14px;left:14px;z-index:3;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#dde1f5;background:rgba(10,12,24,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.09);border-radius:8px;padding:6px 11px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-transport{display:flex;align-items:center;gap:13px;padding:12px 14px;position:relative;z-index:3}
.vw-play{width:42px;height:42px;border-radius:50%;border:none;background:#3d34d6;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:.14s}
.vw-play:hover{background:#514be6;transform:scale(1.05)}

/* ===== top navigation (full-width navbar) ===== */
.topnav{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-left:auto}
.topnav a{position:relative;color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:14px;font-family:'Space Grotesk',sans-serif;letter-spacing:.01em;padding:7px 13px;border-radius:9px;transition:color .15s,background .15s}
.topnav a:hover{color:var(--primary);background:var(--primary-tint)}
.topnav a.active{color:var(--primary);background:var(--primary-tint)}
html[data-theme="dark"] .topnav a:hover,html[data-theme="dark"] .topnav a.active{color:#fff;background:rgba(124,110,255,.18)}
@media(max-width:640px){.topnav{gap:2px;order:3;width:100%;justify-content:center;padding-top:8px;border-top:1px solid var(--line-soft);margin-top:6px}.topnav a{padding:6px 11px}}
/* harden select chevron: never tile, always leave room */
select{background-repeat:no-repeat!important}

/* ===== enriched tool-page sections ===== */
.howto{margin:6px 0 4px;padding-left:22px;line-height:1.7}
.howto li{margin:7px 0;color:var(--ink-soft)}
.faqs{margin-top:8px}
.faqs details{border-bottom:1px solid var(--line-soft);padding:13px 0}
.faqs summary{cursor:pointer;font-weight:600;font-size:15.5px;font-family:'Space Grotesk',sans-serif;color:var(--ink)}
.faqs details p{margin:9px 0 0;color:var(--ink-soft);line-height:1.7}
.guidebox{margin:20px 0 0;padding:14px 18px;border:1.5px solid var(--line);border-radius:11px;background:var(--surface);font-size:14.5px}
.guidebox a{color:var(--primary);text-decoration:none;font-weight:600}

/* ---- Archive tools: ZIP creator + universal opener ---- */
.archive-drop{position:relative;padding:34px 20px}
.archive-drop .drop-ico{font-size:34px;line-height:1;margin-bottom:10px}
.archive-drop .fmt-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}
.archive-drop .fmt-badges span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:6px;background:var(--primary-tint);color:var(--primary-deep)}
.arc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px;padding-bottom:10px;border-bottom:1.5px solid var(--line)}
.arc-count{font-weight:600;font-size:14px;color:var(--ink)}
.arc-list{display:flex;flex-direction:column;gap:8px}
.arc-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);font-size:13px}
.arc-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.arc-row .sz{color:var(--ink-faint);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;flex:none}
.arc-badge{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;font-weight:700;letter-spacing:.02em;min-width:42px;text-align:center;padding:4px 6px;border-radius:6px;background:var(--paper);border:1.5px solid var(--line);color:var(--ink-soft)}
.arc-msg{margin-top:12px;font-size:13px;color:var(--ink-soft);line-height:1.6}
.btn-sm{padding:8px 14px;font-size:13px}

/* ---- Barcode generator ---- */
.bc-tabs{display:flex;gap:6px;margin-bottom:16px;background:var(--paper);padding:5px;border-radius:11px;border:1.5px solid var(--line)}
.bc-tab{flex:1;padding:9px 12px;border:none;background:transparent;border-radius:8px;font-weight:600;font-size:14px;color:var(--ink-soft);cursor:pointer;font-family:inherit}
.bc-tab.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.bc-colors{display:flex;gap:14px 18px;align-items:center;flex-wrap:wrap}
.bc-colors label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);font-weight:500}
.bc-colors input[type=color]{width:34px;height:30px;border:1.5px solid var(--line);border-radius:7px;background:none;cursor:pointer;padding:2px}
.bc-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;color:var(--primary-deep)}
.bc-hint{font-size:12.5px;color:var(--ink-soft);margin:9px 0 0;line-height:1.55}
.bc-preview{display:flex;justify-content:center;align-items:center;min-height:120px;padding:22px;background:#fff;border:1.5px solid var(--line);border-radius:12px;margin-bottom:14px}
.bc-preview svg{max-width:100%;height:auto}
.bc-msg{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.6}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.bc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px}
.bc-cell{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:12px;text-align:center;overflow:hidden}
.bc-cell img,.bc-cell svg{max-width:100%;height:auto;max-height:80px}
.bc-cell span{display:block;margin-top:8px;font-size:11px;color:var(--ink-soft);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* archive opener: action buttons row (Download all / Clear) */
.arc-actions{display:flex;gap:8px;flex:none}

/* barcode: aligned download buttons + bulk range controls */
.bc-single .btnrow{margin-top:16px;gap:10px}
.bc-single .btnrow .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.bc-seg{display:inline-flex;gap:4px;background:var(--paper);padding:4px;border-radius:9px;border:1.5px solid var(--line);margin-bottom:16px}
.bc-segbtn{padding:7px 15px;border:none;background:transparent;border-radius:7px;font-weight:600;font-size:13px;color:var(--ink-soft);cursor:pointer;font-family:inherit}
.bc-segbtn.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.bc-barrow{display:flex;gap:12px;align-items:flex-end;margin-top:6px}
.bc-barrow .field{flex:0 0 190px}
.bc-barrow .btn{flex:1;min-height:44px}
@media(max-width:520px){.bc-barrow{flex-direction:column;align-items:stretch}.bc-barrow .field{flex:auto}}

/* Ensure the hidden attribute always wins over component display rules */
[hidden]{display:none!important}

/* barcode: validation line, GS1 sub-panel, extras */
.bc-valid{font-size:13px;margin:-4px 0 12px;line-height:1.5;min-height:1px}
.bc-valid.ok{color:var(--ready)}
.bc-valid.warn{color:var(--soon)}
.bc-valid.err{color:#D64545}
.bc-sub{border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;margin:4px 0 16px;background:var(--paper)}
.bc-sub-title{font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:12px}
.bc-sub-hint{font-weight:400;font-size:12px;color:var(--ink-faint)}
.bc-tcheck{display:inline-flex!important;align-items:center;gap:5px;font-size:12px;color:var(--ink-soft);font-weight:500}
.bc-tcheck input{width:15px;height:15px}

/* --- fix phantom horizontal scroll (full-bleed masthead vs. scrollbar width) --- */
html{overflow-x:clip}
body{overflow-x:clip}
img,canvas,video{max-width:100%}
.two>*{min-width:0}
@media(max-width:560px){.two{grid-template-columns:1fr}}

/* ===== Invoice generator ===== */
.inv-wrap{display:grid;grid-template-columns:1fr;gap:24px}
.inv-form>*{min-width:0}
.inv-row{border:1.5px solid var(--line);border-radius:11px;background:var(--paper);padding:11px 12px;margin-bottom:10px}
.inv-desc{width:100%;margin:0 0 9px}
.inv-sub{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.inv-mini{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint)}
.inv-mini input{margin:0}
.inv-sub .inv-mini:nth-child(1) input{width:72px}
.inv-sub .inv-mini:nth-child(2) input{width:116px}
.inv-amt{margin-left:auto;align-self:center;font-size:14px;font-weight:700;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-rm{flex:none;width:32px;height:38px}
.inv-preview-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px}
.inv-paper{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lift);overflow:hidden}

/* wide: form on the left, preview pinned on the right and scrollable if the invoice is tall */
@media(min-width:900px){
  .inv-wrap{grid-template-columns:minmax(0,1fr) minmax(0,410px)}
  .inv-preview-wrap{position:sticky;top:78px;align-self:start}
  .inv-preview-wrap .inv-paper{max-height:calc(100vh - 118px);overflow:auto}
}
/* narrow: pin a compact preview to the top so it stays visible while filling the form */
@media(max-width:899.98px){
  .inv-preview-wrap{order:-1;position:sticky;top:60px;z-index:6;background:var(--surface);margin:-6px -6px 0;padding:10px 6px;border-bottom:1.5px solid var(--line);box-shadow:0 8px 14px -12px rgba(0,0,0,.4)}
  .inv-preview-wrap .inv-paper{max-height:42vh;overflow:auto}
  .inv-preview-label{margin-bottom:6px}
}
.ip{padding:26px 26px 30px;color:#23262e;font-size:12px;line-height:1.5}
.ip-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.ip-logo{max-height:46px;max-width:150px;margin-bottom:8px;display:block}
.ip-biz{font-weight:700;font-size:15px;color:#14161d}
.ip-bd{color:#5b6473;font-size:11px;margin-top:3px;line-height:1.45}
.ip-meta{text-align:right;flex:none}
.ip-title{font-weight:800;font-size:24px;letter-spacing:.02em;color:var(--ac,#3D34D6);line-height:1}
.ip-num{font-weight:600;color:#5b6473;font-size:12px;margin-top:4px}
.ip-dates{margin-top:9px;font-size:11px;color:#14161d;line-height:1.7}
.ip-dates span{color:#9aa1ac;display:inline-block;width:42px;text-align:left}
.ip-billto{margin-top:20px}
.ip-lbl{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--ac,#3D34D6);margin-bottom:3px}
.ip-to{font-weight:700;font-size:13px;color:#14161d}
.ip-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:11px}
.ip-table th{text-align:left;background:var(--ac,#3D34D6);color:#fff;padding:6px 9px;font-size:9px;letter-spacing:.04em;font-weight:700}
.ip-table th.r,.ip-table td.r{text-align:right}
.ip-table td{padding:7px 9px;border-bottom:1px solid #eef0f4;color:#2a2d36;vertical-align:top}
.ip-tot{margin:14px 0 0 auto;width:62%;max-width:250px}
.ip-tl{display:flex;justify-content:space-between;padding:3px 0;color:#5b6473;font-size:11.5px}
.ip-tl.ip-grand{margin-top:7px;padding-top:9px;border-top:2px solid var(--ac,#3D34D6);color:var(--ac,#3D34D6);font-weight:800;font-size:15px}
.ip-foot{margin-top:22px;display:grid;gap:12px;font-size:10.5px;color:#5b6473;border-top:1px solid #eef0f4;padding-top:15px;line-height:1.55}

/* ===== Barcode polish ===== */
.bc-common{border-bottom:1.5px solid var(--line);padding-bottom:4px;margin-bottom:18px}
.bc-adv{margin:2px 0 14px;border:1.5px solid var(--line);border-radius:11px;background:var(--paper);overflow:hidden}
.bc-adv>summary{cursor:pointer;list-style:none;padding:11px 15px;font-size:13.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:8px;user-select:none}
.bc-adv>summary::-webkit-details-marker{display:none}
.bc-adv>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);transform:rotate(-45deg);transition:transform .18s;margin-left:2px}
.bc-adv[open]>summary::before{transform:rotate(45deg)}
.bc-adv[open]>summary{border-bottom:1.5px solid var(--line)}
.bc-adv>summary+*,.bc-adv .two,.bc-adv .field{margin-top:0}
.bc-adv .two,.bc-adv>.field{padding:0 15px}
.bc-adv .two{padding-top:14px}
.bc-adv>.field:last-child{padding-bottom:15px;padding-top:14px}
.bc-preview.is-transparent{background:repeating-conic-gradient(#eef0f4 0% 25%, #ffffff 0% 50%) 50%/20px 20px}
.bc-preview svg,.bc-preview img,.bc-preview canvas{max-width:100%;height:auto;max-height:360px;background:transparent}

/* invoice form: grouped sections with room to breathe */
.invf-sec{margin-bottom:26px}
.invf-sec:last-of-type{margin-bottom:14px}
.invf-h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:9px;border-bottom:1.5px solid var(--line)}
.invf-sec>*:not(:first-child){margin-top:15px}
.invf-sec>#items{margin-top:8px}
.invf-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px 18px}
.invf-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:15px 18px}
.invf-2>.invf-field,.invf-3>.invf-field{margin-top:0}
.invf-field{min-width:0}
.invf-field textarea{min-height:66px}
.invf-field input[type=color]{width:100%;height:44px;padding:3px;cursor:pointer}
.invf-colf{max-width:130px}
.invf-inline{display:flex;gap:8px;align-items:center}
.invf-inline>input{min-width:0}
.invf-inline>input:first-child{flex:1;min-width:64px}
.invf-unit{width:70px;flex:none}
.invf-pct{width:58px;flex:none}
.inv-add{margin-top:12px}
.inv-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

/* ===== QR generator (new look) ===== */
.qr-tool{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:900px){.qr-tool{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.qr-main{margin:0}
.qr-head{margin-bottom:18px}
.qr-kicker{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--primary);background:var(--primary-tint);padding:4px 11px;border-radius:999px}
.qr-title{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;color:var(--ink);margin-top:12px;line-height:1.2}
.qr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.qr-chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.qr-chip:hover{border-color:var(--primary);color:var(--primary)}
.qr-chip.on{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 5px 14px -5px var(--primary)}
.qr-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 16px}
.qr-fields>*{min-width:0;margin:0}
.qr-fields .qr-wide{grid-column:1/-1}
.qr-style{margin-top:20px}
.qr-side{display:flex;flex-direction:column;gap:14px}
@media(min-width:900px){.qr-side{position:sticky;top:78px}}
.qr-card{background:linear-gradient(155deg,var(--primary-tint),var(--surface) 72%);border:1.5px solid var(--line);border-radius:20px;padding:20px;display:flex;align-items:center;justify-content:center}
.qr-stage{background:#fff;border-radius:15px;padding:22px;min-height:212px;width:100%;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px -14px rgba(20,22,29,.30)}
.qr-stage.is-transparent{background:repeating-conic-gradient(#eef0f4 0% 25%,#fff 0% 50%) 50%/18px 18px}
.qr-img{max-width:228px;width:100%;height:auto;image-rendering:pixelated;display:block}
.qr-empty{color:var(--ink-faint);font-size:13px;text-align:center;max-width:210px;line-height:1.5}
.qr-dl{gap:8px;flex-wrap:wrap}
.qr-dl .btn{flex:1;min-width:0;justify-content:center;padding-left:10px;padding-right:10px}

/* ============================================================
   Barcode Studio — two-pane layout with a scanner-viewfinder preview
   ============================================================ */
.bcs{--bacc:var(--primary);--bacc-deep:var(--primary-deep);--bmono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace}
.bcs-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 22px;flex-wrap:wrap;margin-bottom:22px}
.bcs-brand{display:flex;flex-direction:column;gap:6px;min-width:0}
.bcs-kicker{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1}
.bcs-sub{font-size:12.5px;color:var(--ink-faint)}
.bcs-tabs{display:inline-flex;background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:4px;gap:4px;flex:none}
.bcs-tab{flex:0 0 auto;border:0;background:transparent;color:var(--ink-soft);font-weight:600;font-size:13.5px;padding:8px 22px;border-radius:9px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,box-shadow .15s;box-shadow:none}
.bcs-tab:hover{color:var(--ink)}
.bcs-tab.on{background:var(--bacc);color:#fff;box-shadow:0 5px 14px -5px var(--bacc)}

.bcs-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:920px){.bcs-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.bcs-controls{display:flex;flex-direction:column;gap:20px;min-width:0}
.bcs-panel{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.bcs-sec{padding:20px 22px}
.bcs-sec:not(:first-child){border-top:1.5px solid var(--line)}
.bcs-legend{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:15px}
.bcs-step{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:var(--bacc);color:#fff;font-size:12px;font-weight:700;flex:none}
.bcs-select{width:100%}
.bcs-data{width:100%;font-family:var(--bmono);font-size:16px;letter-spacing:.02em;padding:13px 14px}
.bcs-inline-check{align-self:end;margin:0 0 12px}

/* type info card */
.bcs-typecard{margin-top:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);padding:13px 15px}
.bcs-tc-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.bcs-badge{font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:6px;color:#fff}
.bcs-badge.d1{background:var(--bacc)}
.bcs-badge.d2{background:#0E9488}
.bcs-tc-name{font-weight:700;font-size:14.5px;color:var(--ink)}
.bcs-tc-row{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-top:5px;display:flex;gap:8px}
.bcs-tc-row>span{flex:none;width:60px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;font-size:9.5px;letter-spacing:.05em;padding-top:2px}

/* preview showcase */
.bcs-preview{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(min-width:920px){.bcs-preview{position:sticky;top:78px}}
.bcs-out{display:flex;flex-direction:column;gap:14px}
.bcs-scanner{position:relative;background:linear-gradient(158deg,var(--primary-tint),var(--surface) 72%);border:1.5px solid var(--line);border-radius:20px;padding:26px;overflow:hidden}
.bcs-stage{background:#fff;border:0;border-radius:14px;padding:26px 22px;min-height:196px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -16px rgba(20,22,29,.34)}
.bcs-stage.is-transparent{background:repeating-conic-gradient(#eef0f4 0% 25%,#fff 0% 50%) 50%/18px 18px}
.bcs-corner{position:absolute;width:16px;height:16px;border:2.5px solid var(--bacc);z-index:3;pointer-events:none}
.bcs-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.bcs-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.bcs-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.bcs-corner.br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 5px 0}
.bcs-scanline{position:absolute;left:22px;right:22px;top:22px;height:2px;border-radius:2px;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bacc),transparent);opacity:0;animation:bcsScan 1.05s cubic-bezier(.4,0,.2,1) .3s both}
@keyframes bcsScan{0%{opacity:0;top:22px}12%{opacity:.85}82%{opacity:.85}100%{opacity:0;top:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.bcs-scanline{display:none}}

/* actions + bulk output */
.bcs-dl-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px}
.bcs-actions{gap:8px}
.bcs-actions .btn{flex:1;min-width:0;justify-content:center;padding-left:10px;padding-right:10px}
.bcs-bulk-head{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--ink)}
.bcs-bulkmsg{margin:0}
.bcs-out .bc-gallery{margin-top:2px}

@media(max-width:919px){.bcs-preview{position:static}.bcs-stage{min-height:168px}}

/* barcode: status message pill + section polish */
.bc-msg:empty{display:none}
.bc-msg.ok,.bc-msg.err{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;font-weight:600;font-size:12.5px;margin-top:12px;line-height:1.3;animation:bcMsgIn .2s ease}
.bc-msg.ok{background:rgba(31,164,99,.13);color:#188049}
.bc-msg.ok::before{content:"\2713";font-weight:800}
.bc-msg.err{background:rgba(214,69,69,.13);color:#c33}
.bc-msg.err::before{content:"\0021";font-weight:800;width:15px;height:15px;border-radius:50%;background:#c33;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
@keyframes bcMsgIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.bcs-controls{display:block}
.bcs-sec .field:last-child{margin-bottom:0}

/* ===== Barcode: steps, type card, scanner preview (single-column) ===== */
.bc-step{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--ink);margin:24px 0 13px}
.bc-tabs+.bc-step{margin-top:6px}
.bc-stepn{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:7px;background:var(--primary);color:#fff;font-size:12px;font-weight:700;flex:none}

.bc-typecard{margin:12px 0 4px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);padding:12px 15px}
.bc-tc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bc-badge{font-size:10px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:6px;color:#fff}
.bc-badge.d1{background:var(--primary)}
.bc-badge.d2{background:#0E9488}
.bc-tc-name{font-weight:700;font-size:14px;color:var(--ink)}
.bc-tc-row{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:5px;display:flex;gap:8px}
.bc-tc-row>span{flex:none;width:58px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;font-size:9.5px;letter-spacing:.05em;padding-top:2px}

.bc-prevlabel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:24px 0 10px}
.bc-scanner{position:relative;background:linear-gradient(158deg,var(--primary-tint),var(--surface) 72%);border:1.5px solid var(--line);border-radius:16px;padding:24px;overflow:hidden}
.bc-scanner .bc-preview{background:#fff;border:0;border-radius:12px;padding:24px 20px;min-height:180px;margin:0;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -16px rgba(20,22,29,.30)}
.bc-scanner .bc-preview.is-transparent{background:repeating-conic-gradient(#eef0f4 0 25%,#fff 0 50%) 50%/18px 18px}
.bc-corner{position:absolute;width:15px;height:15px;border:2.5px solid var(--primary);z-index:3;pointer-events:none}
.bc-corner.tl{top:13px;left:13px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.bc-corner.tr{top:13px;right:13px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.bc-corner.bl{bottom:13px;left:13px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.bc-corner.br{bottom:13px;right:13px;border-left:0;border-top:0;border-radius:0 0 5px 0}
.bc-scanline{position:absolute;left:20px;right:20px;top:20px;height:2px;border-radius:2px;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:0;animation:bcScan 1.05s cubic-bezier(.4,0,.2,1) .3s both}
@keyframes bcScan{0%{opacity:0;top:20px}12%{opacity:.85}82%{opacity:.85}100%{opacity:0;top:calc(100% - 22px)}}
@media(prefers-reduced-motion:reduce){.bc-scanline{display:none}}
.bc-actions{margin-top:14px;gap:8px;flex-wrap:wrap}
.bc-empty{color:var(--ink-faint);font-size:13px;text-align:center;max-width:260px;line-height:1.5}
.bc-bulk-result{margin-top:18px}

/* styled info note beneath tools */
.toolnote{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin-top:14px;padding:11px 14px 11px 40px;background:var(--paper);border:1.5px solid var(--line);border-radius:11px;position:relative}
.toolnote::before{content:"i";position:absolute;left:13px;top:10px;width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:700;font-style:italic;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif}

/* accent vs reset button differentiation (image rotator etc.) */
.btn.ghost.btn-accent{border-color:var(--primary);color:var(--primary)}
.btn.ghost.btn-accent:hover{background:var(--primary-tint);border-color:var(--primary)}
.btn.ghost.btn-reset{color:var(--ink-faint)}
.btn.ghost.btn-reset:hover{color:#c33;border-color:#c33;background:rgba(214,69,69,.07)}

/* canvas outputs are block-level so download buttons sit below, not beside them */
#out canvas,.preview canvas,#result canvas{display:block;max-width:100%}
#out>.btn,#out>a.btn{margin-top:12px}

/* circular crop selection */
.cropbox.circle{border-radius:50%}

/* image info viewer: preview + ordered detail rows */
.ii-layout{display:grid;grid-template-columns:1fr;gap:18px;margin-top:16px}
@media(min-width:640px){.ii-layout{grid-template-columns:minmax(0,240px) 1fr;align-items:start}}
.ii-prev img{width:100%;max-height:280px;object-fit:contain;border-radius:12px;border:1.5px solid var(--line);background:var(--paper)}
.ii-details{display:flex;flex-direction:column}
.ii-row{display:flex;justify-content:space-between;gap:14px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.ii-row:last-child{border-bottom:0}
.ii-k{color:var(--ink-soft)}
.ii-v{color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums;min-width:0;word-break:break-word}

/* favicon cards (each icon with its own download) */
.favgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:14px;margin-top:20px}
.fav-card{border:1.5px solid var(--line);border-radius:13px;padding:16px 12px;text-align:center;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:5px}
.fav-thumb{height:78px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.fav-thumb img{border-radius:4px;box-shadow:0 2px 8px -3px rgba(20,22,29,.3)}
.fav-name{font-size:12px;font-weight:600;color:var(--ink);word-break:break-all;line-height:1.3}
.fav-size{font-size:11px;color:var(--ink-faint);margin-bottom:7px}
.fav-card .btn-sm{width:100%;justify-content:center}

/* bulk image compressor: labelled operation groups */
.bimg-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:12px}
.bimg-op{border:1.5px solid var(--line);border-radius:12px;padding:14px;background:var(--paper)}
.bimg-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:11px}
.bimg-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--primary);color:#fff;font-size:11px;font-weight:700}

/* bulk watermark preview label */
.wm-prevlabel{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}

/* quadratic equation live preview */
.qe-preview{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:600;color:var(--ink);text-align:center;padding:24px 16px;background:linear-gradient(150deg,var(--primary-tint),var(--surface) 76%);border:1.5px solid var(--line);border-radius:14px;letter-spacing:.01em;word-break:break-word;line-height:1.2}
.qe-preview.placeholder{color:var(--ink-faint);font-weight:500}
.qe-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.qe-inputs>*{min-width:0}

/* teleprompter fullscreen (projector mode) */
#tp_view:fullscreen{height:100vh;width:100vw;border-radius:0;cursor:pointer}
#tp_view:-webkit-full-screen{height:100vh;width:100vw;border-radius:0;cursor:pointer}
#tp_view:fullscreen #tp_txt{padding:45vh 8vw 60vh}
#tp_view:-webkit-full-screen #tp_txt{padding:45vh 8vw 60vh}

/* ===== Advanced mortgage calculator ===== */
.mort-legend{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--ink);margin:0 0 14px}
.mort-step{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--primary);color:#fff;font-size:12px;font-weight:700;flex:none}
.mort-terms{display:flex;gap:4px;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:4px}
.mort-terms button{border:0;background:transparent;color:var(--ink-soft);font-weight:600;font-size:13px;padding:7px 10px;border-radius:7px;cursor:pointer;font-family:inherit;flex:1}
.mort-terms button.on{background:var(--primary);color:#fff}
.mort-headline{text-align:center;padding:18px 0 14px}
.mort-big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:44px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.mort-big span{font-size:18px;color:var(--ink-faint);font-weight:600;margin-left:2px}
.mort-sub{font-size:13px;color:var(--ink-soft);margin-top:6px}
.mort-bar{display:flex;height:22px;border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.mort-bar>div{height:100%}
.mort-legends{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:12px}
.mort-leg{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft)}
.mort-leg span{width:12px;height:12px;border-radius:3px;display:inline-block}
.mort-leg b{color:var(--ink);font-weight:600}
.mort-save{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.mort-save>div{background:rgba(31,164,99,.10);border:1.5px solid rgba(31,164,99,.28);border-radius:12px;padding:14px;text-align:center}
.mort-save-v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:#188049}
.mort-save-k{font-size:12px;color:var(--ink-soft);margin-top:3px}
.mort-charttitle{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink);margin:22px 0 8px}
.mort-chart{width:100%;height:auto;display:block;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:8px}
.mort-tablewrap{margin-top:16px;border:1.5px solid var(--line);border-radius:12px;padding:6px 16px}
.mort-tablewrap summary{cursor:pointer;font-weight:600;font-size:14px;padding:8px 0;font-family:'Space Grotesk',sans-serif}
.mort-table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.mort-table th{text-align:right;color:var(--ink-faint);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:6px 10px;border-bottom:1.5px solid var(--line)}
.mort-table th:first-child,.mort-table td:first-child{text-align:left}
.mort-table td{text-align:right;padding:7px 10px;border-bottom:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:520px){.mort-big{font-size:36px}.mort-save{grid-template-columns:1fr}}

/* homepage content section (unique prose for quality/SEO) */
.home-about{max-width:820px;margin:54px auto 0;padding:0 4px;line-height:1.75}
.home-about h2{font-family:'Space Grotesk',sans-serif;font-size:26px;margin:0 0 12px;color:var(--ink)}
.home-about h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin:26px 0 8px;color:var(--ink)}
.home-about p{margin:0 0 14px;color:var(--ink-soft)}
.home-about ul{margin:0 0 14px;padding-left:22px;color:var(--ink-soft)}
.home-about li{margin:7px 0}
.home-about a{color:var(--primary);text-decoration:none}
.home-about a:hover{text-decoration:underline}
.home-about details{border-bottom:1px solid var(--line);padding:14px 0}
.home-about summary{cursor:pointer;font-weight:600;font-family:'Space Grotesk',sans-serif;color:var(--ink)}
.home-about details p{margin:10px 0 0}

/* ===== JSON Toolkit (editor layout) ===== */
.jtk{--jtk-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 14px 34px -22px rgba(20,22,29,.32)}
.jtk-toolbar{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:9px 11px;background:var(--paper);border-bottom:1.5px solid var(--line)}
.jtk-tabs{display:flex;flex-wrap:wrap;gap:3px;flex:1;min-width:0}
.jtk-tab{border:0;background:transparent;color:var(--ink-soft);font-weight:600;font-size:12.5px;padding:6px 11px;border-radius:8px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .12s,color .12s,box-shadow .12s}
.jtk-tab:hover{background:var(--surface);color:var(--ink)}
.jtk-tab.on{background:var(--primary);color:#fff;box-shadow:0 4px 10px -4px var(--primary)}
.jtk-opts:not(:empty){display:flex;align-items:center}
.jtk-opt{font-size:12.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.jtk-opt select{padding:5px 8px;font-size:12.5px}
.jtk-io{display:grid;grid-template-columns:1fr}
@media(min-width:820px){.jtk-io{grid-template-columns:1fr 1fr}}
.jtk-panel{display:flex;flex-direction:column;min-width:0;border-bottom:1.5px solid var(--line)}
@media(min-width:820px){.jtk-panel:first-child{border-right:1.5px solid var(--line)}}
.jtk-phead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--paper);border-bottom:1px solid var(--line)}
.jtk-ptitle{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.jtk-pacts{display:flex;gap:5px}
.jtk-ibtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:7px;cursor:pointer;font-family:inherit;transition:border-color .12s,color .12s,background .12s}
.jtk-ibtn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-tint)}
.jtk textarea{width:100%;min-height:320px;resize:vertical;border:0;border-radius:0;font-family:var(--jtk-mono);font-size:13px;line-height:1.65;padding:14px 16px;color:var(--ink);background:var(--surface);white-space:pre;overflow:auto;display:block}
.jtk textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--primary-tint)}
.jtk #jtk_outtext{background:var(--paper)}
.jtk-tree{min-height:320px;max-height:560px;overflow:auto;background:var(--paper);font-family:var(--jtk-mono);font-size:13px;line-height:1.7;padding:14px 16px}
.jtk-node{margin:0}
.jtk-node>summary{cursor:pointer;list-style:none}
.jtk-node>summary::-webkit-details-marker{display:none}
.jtk-node>summary::before{content:"\25be";display:inline-block;width:13px;color:var(--ink-faint)}
.jtk-node:not([open])>summary::before{content:"\25b8"}
.jtk-children{padding-left:16px;border-left:1px solid var(--line);margin-left:6px}
.jtk-close{color:var(--ink-faint)}
.jtk-row{white-space:nowrap}
.jtk-key{color:var(--primary-deep)}
.jtk-str{color:#0E8A5F}
.jtk-num{color:#B45309}
.jtk-null{color:var(--ink-faint);font-style:italic}
.jtk-punct,.jtk-count{color:var(--ink-faint)}
.jtk-count{font-size:11px}
.jtk-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;background:var(--paper);font-size:12px}
.jtk-valid{font-weight:600;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px}
.jtk-valid::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none}
.jtk-valid.ok{color:#188049}
.jtk-valid.ok::before{background:#22a866}
.jtk-valid.err{color:#c33}
.jtk-valid.err::before{background:#c33}
.jtk-stat{color:var(--ink-faint);font-variant-numeric:tabular-nums;font-family:var(--jtk-mono);font-size:11.5px}

/* ===== Image compressor (unified card) ===== */
.ic-work{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 14px 34px -22px rgba(20,22,29,.30)}
.ic-panes{display:grid;grid-template-columns:1fr}
@media(min-width:700px){.ic-panes{grid-template-columns:1fr 1fr}}
.ic-pane{min-width:0;display:flex;flex-direction:column;border-bottom:1.5px solid var(--line)}
@media(min-width:700px){.ic-pane:first-child{border-right:1.5px solid var(--line)}}
.ic-phead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.ic-tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.ic-pane-out .ic-tag{color:var(--primary)}
.ic-meta{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ic-stage{flex:1;min-height:210px;max-height:360px;display:flex;align-items:center;justify-content:center;padding:16px;background:repeating-conic-gradient(#eef0f4 0 25%,#fff 0 50%) 50%/20px 20px}
.ic-stage img{max-width:100%;max-height:328px;border-radius:6px;box-shadow:0 6px 18px -9px rgba(20,22,29,.4)}
.ic-ph{color:var(--ink-faint);font-size:13.5px;text-align:center;max-width:220px;line-height:1.55}
.ic-foot{padding:18px}
.ic-savings{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px;padding:14px 18px;border-radius:12px;border:1.5px solid}
.ic-savings.good{background:rgba(31,164,99,.09);border-color:rgba(31,164,99,.28)}
.ic-savings.warn{background:rgba(232,163,61,.10);border-color:rgba(232,163,61,.36)}
.ic-sav-left{flex:none}
.ic-sav-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;line-height:1;color:var(--ink)}
.ic-savings.good .ic-sav-num{color:#188049}
.ic-sav-detail{font-size:13px;color:var(--ink-soft);margin-top:5px;font-variant-numeric:tabular-nums}
.ic-sav-bar{flex:1;min-width:130px;height:12px;border-radius:7px;background:var(--line);overflow:hidden;position:relative}
.ic-sav-bar span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#22a866,#1f9e5f);border-radius:7px;transition:width .3s ease}
.ic-savings.warn .ic-sav-bar span{background:#E8A33D}
.ic-ctrls{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:580px){.ic-ctrls{grid-template-columns:1fr 1fr 1fr}}
.ic-ctrl{display:flex;flex-direction:column;gap:8px;min-width:0}
.ic-ctrl input[type=range]{width:100%}
.ic-actions{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* ================= Image tools — professional pass ================= */
/* Scoped to the Image category so other tools are untouched. */
#tvBody[data-cat="Image"]{--img-stage:repeating-conic-gradient(#eef0f4 0 25%,#fff 0 50%) 50%/18px 18px}

/* --- upload zone --- */
#tvBody[data-cat="Image"] .drop{
  border:1.5px dashed var(--line);border-radius:16px;padding:44px 24px;
  background:linear-gradient(180deg,var(--surface),var(--paper));
  box-shadow:inset 0 -1px 0 rgba(20,22,29,.02);
  transition:border-color .16s,background .16s,transform .06s,box-shadow .16s}
#tvBody[data-cat="Image"] .drop:hover{
  border-color:var(--primary);background:linear-gradient(180deg,var(--surface),var(--primary-tint));
  box-shadow:0 12px 28px -20px var(--primary)}
#tvBody[data-cat="Image"] .drop.over{border-style:solid;border-color:var(--primary);background:var(--primary-tint);transform:scale(.995)}
#tvBody[data-cat="Image"] .drop strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:16.5px;color:var(--ink);margin-bottom:3px}
#tvBody[data-cat="Image"] .drop::before{opacity:.55;transition:opacity .16s,background-color .16s}
#tvBody[data-cat="Image"] .drop:hover::before{opacity:1;background-color:var(--primary)}

/* --- result / preview card --- */
#tvBody[data-cat="Image"] .preview{
  margin-top:20px;padding:16px;gap:14px;
  border:1.5px solid var(--line);border-radius:16px;background:var(--surface);
  box-shadow:0 14px 34px -26px rgba(20,22,29,.34)}
#tvBody[data-cat="Image"] .preview:empty{display:none}
#tvBody[data-cat="Image"] .preview img,
#tvBody[data-cat="Image"] .preview canvas{
  border:1px solid var(--line);border-radius:11px;
  background:var(--img-stage);
  box-shadow:0 8px 22px -14px rgba(20,22,29,.45);max-height:400px}

/* --- stat chips under a result --- */
#tvBody[data-cat="Image"] .cmp{gap:10px;width:100%}
#tvBody[data-cat="Image"] .cmp .b{
  display:flex;flex-direction:column;gap:3px;
  background:var(--paper);border:1px solid var(--line);border-radius:11px;
  padding:9px 14px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint)}
#tvBody[data-cat="Image"] .cmp .b b{
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}

/* --- controls --- */
#tvBody[data-cat="Image"] .fld{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px}
#tvBody[data-cat="Image"] .fld .hint{
  font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-left:5px}
#tvBody[data-cat="Image"] input[type=number],
#tvBody[data-cat="Image"] input[type=text],
#tvBody[data-cat="Image"] select{
  border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;
  background:var(--surface);transition:border-color .14s,box-shadow .14s}
#tvBody[data-cat="Image"] input[type=number]:focus,
#tvBody[data-cat="Image"] input[type=text]:focus,
#tvBody[data-cat="Image"] select:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
#tvBody[data-cat="Image"] input[type=range]{accent-color:var(--primary)}
#tvBody[data-cat="Image"] input[type=color]{
  border:1.5px solid var(--line);border-radius:10px;padding:3px;background:var(--surface);cursor:pointer;height:40px}

/* --- action row --- */
#tvBody[data-cat="Image"] .btnrow:not(.ic-actions){margin-top:20px;padding-top:16px;border-top:1px solid var(--line);gap:10px}
#tvBody[data-cat="Image"] .preview .btnrow{margin-top:4px;padding-top:0;border-top:0}
#tvBody[data-cat="Image"] #out canvas,#tvBody[data-cat="Image"] #result canvas{
  border:1px solid var(--line);border-radius:11px;background:var(--img-stage);
  box-shadow:0 8px 22px -14px rgba(20,22,29,.45);max-width:100%}
#tvBody[data-cat="Image"] .drop input[type=file]{display:none}
/* Overlay stages must stay pixel-aligned: never pad/border their images */
#tvBody[data-cat="Image"] .cropstage img,
#tvBody[data-cat="Image"] .cropstage canvas{
  padding:0;border:0;border-radius:0;box-shadow:none;background:none;max-height:none}
#tvBody[data-cat="Image"] .cropstage{
  border:1px solid var(--line);border-radius:11px;box-shadow:0 8px 22px -14px rgba(20,22,29,.45);background:var(--img-stage)}