/* app-in.css: makes the inside of every tool look like the Toolbox app home (iOS style). Draft 1, 1 Nov 2026. */
:root{--ai-bg:#070a12;--ai-text:#F5F7FF;--ai-sub:rgba(235,240,255,.62);--ai-faint:rgba(235,240,255,.38);
--ai-glass:rgba(28,30,44,.46);--ai-hair:rgba(255,255,255,.10);--ai-fill:rgba(255,255,255,.07);--ai-fill2:rgba(255,255,255,.12);
--ai-font:'Heebo','Geist',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;--c:#8fb4ff}
html.ai-on[data-theme=light],html.ai-on:not([data-theme=dark]) body.ai-light{--ai-bg:#f1f6ff;--ai-text:#0B0D18;--ai-sub:rgba(20,24,40,.6);--ai-faint:rgba(20,24,40,.38);--ai-glass:rgba(255,255,255,.62);--ai-hair:rgba(10,20,40,.10);--ai-fill:rgba(10,20,40,.05);--ai-fill2:rgba(10,20,40,.09)}
html.ai-on body{background:var(--ai-bg)!important;color:var(--ai-text)!important;font-family:var(--ai-font)!important;padding-bottom:110px}
/* glow wall, same as the home */
.ai-wall{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ai-wall i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(70px);opacity:.55}
.ai-wall i:nth-child(1){background:color-mix(in srgb,var(--c) 70%,transparent);top:-26vmax;inset-inline-end:-20vmax}
.ai-wall i:nth-child(2){background:rgba(45,212,191,.30);bottom:-30vmax;inset-inline-start:-22vmax}
/* top nav bar: back + compact title */
html.ai-on .tb-home{display:none!important}
.ai-nav{position:sticky;top:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:52px;padding:0 12px;
  background:color-mix(in srgb,var(--ai-bg) 72%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .2s}
.ai-nav.sc{border-bottom-color:var(--ai-hair)}
.ai-back{justify-self:start;display:inline-flex;align-items:center;gap:2px;color:var(--c);text-decoration:none;font-weight:600;font-size:16px;min-height:44px;padding:0 4px}
.ai-back svg{width:22px;height:22px}
[dir=rtl] .ai-back svg{transform:scaleX(-1)}
.ai-ttl{font-weight:700;font-size:16px;opacity:0;transform:translateY(6px);transition:.2s;text-align:center;max-width:56vw;line-height:1.2}
.ai-nav.sc .ai-ttl{opacity:1;transform:none}
.ai-lang{justify-self:end;min-height:36px;padding:0 12px;border-radius:999px;border:0;background:var(--ai-fill2);color:var(--ai-text);font:600 13px var(--ai-font)}
/* hero: app icon tile + large title */
html.ai-on header{background:none!important;border:0!important;padding:8px 0 4px!important;text-align:start!important}
html.ai-on header .ctr{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;max-width:640px;margin:0 auto;padding:0 18px}
.ai-ico{grid-row:span 2;width:62px;height:62px;border-radius:23%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 75%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 70%,#000) 100%);
  box-shadow:0 8px 18px color-mix(in srgb,var(--c) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}
.ai-ico svg{width:34px;height:34px;fill:currentColor}
html.ai-on header h1{font:800 30px/1.1 var(--ai-font)!important;letter-spacing:-.02em;margin:0!important;text-align:start!important;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--ai-text)!important}
html.ai-on header p{grid-column:1/-1;margin:10px 0 0!important;color:var(--ai-sub)!important;font-size:15px!important;text-align:start!important;max-width:none!important}
html.ai-on header .ai-sub1{grid-column:2;margin:0!important;font-size:14px!important;color:var(--ai-sub)!important}
html.ai-on .badges{grid-column:1/-1;justify-content:flex-start!important;gap:6px!important;margin-top:10px!important}
html.ai-on .badges span{text-transform:none!important;letter-spacing:0!important;font:500 12px var(--ai-font)!important;background:var(--ai-fill)!important;border:0!important;color:var(--ai-sub)!important;border-radius:999px!important;padding:5px 10px!important}
/* cards = iOS inset grouped sections */
html.ai-on main.ctr{max-width:640px!important;padding:0 14px!important}
html.ai-on section.card{background:var(--ai-glass)!important;border:1px solid var(--ai-hair)!important;border-radius:22px!important;box-shadow:0 10px 30px rgba(0,0,0,.18)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);padding:16px!important;margin:14px 0!important;text-align:start!important}
html.ai-on section.card h2{font:700 19px/1.25 var(--ai-font)!important;text-align:start!important;margin:0 0 10px!important;color:var(--ai-text)!important}
html.ai-on section.card .row.sp{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px;flex-wrap:wrap}
html.ai-on.ai-hasbar #sample,html.ai-on.ai-hasbar #example{display:none!important}
html.ai-on section.card .row.sp h2{margin:0!important}
html.ai-on label{display:block;text-align:start!important;font:500 14px var(--ai-font)!important;color:var(--ai-sub)!important;margin:12px 2px 6px!important}
html.ai-on input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),html.ai-on select,html.ai-on textarea{
  width:100%!important;box-sizing:border-box;min-height:48px;border-radius:14px!important;border:1px solid var(--ai-hair)!important;background:var(--ai-fill)!important;
  color:var(--ai-text)!important;font:500 17px var(--ai-font)!important;padding:10px 14px!important;text-align:start!important;text-align-last:auto!important;outline:none}
html.ai-on input:focus,html.ai-on select:focus,html.ai-on textarea:focus{border-color:var(--c)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent)!important}
html.ai-on .note,html.ai-on .lead{color:var(--ai-faint)!important;font-size:13.5px!important;text-align:start!important}
/* checkbox rows -> iOS switches */
html.ai-on label.ck{display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-direction:row-reverse;min-height:48px;margin:6px 0!important;
  padding:0 14px;border-radius:14px;background:var(--ai-fill);color:var(--ai-text)!important;font-size:16px!important}
html.ai-on label.ck input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:51px!important;height:31px!important;border-radius:999px!important;background:rgba(120,120,128,.36)!important;border:0!important;position:relative;cursor:pointer;transition:background .2s;margin:0!important;box-shadow:none!important}
html.ai-on label.ck input[type=checkbox]::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:inset-inline-start .2s}
html.ai-on label.ck input[type=checkbox]:checked{background:#34c759!important}
html.ai-on label.ck input[type=checkbox]:checked::after{inset-inline-start:22px}
/* buttons */
html.ai-on .btn{border-radius:999px!important;border:0!important;background:color-mix(in srgb,var(--c) 22%,transparent)!important;color:var(--c)!important;font:600 15px var(--ai-font)!important;min-height:40px;padding:0 16px!important;box-shadow:none!important}
html.ai-on .btn.primary,html.ai-on button[type=submit].btn{background:var(--c)!important;color:#06101f!important}
/* results: tiles like widgets */
html.ai-on .stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
html.ai-on .stat{border-radius:18px!important;background:var(--ai-fill)!important;border:0!important;padding:14px!important;text-align:start!important}
html.ai-on .stat .num,html.ai-on .stat b{font:800 22px/1.15 var(--ai-font)!important;display:block;color:var(--ai-text)!important;overflow-wrap:anywhere}
html.ai-on .stat span{color:var(--ai-sub)!important;font-size:13px!important}
html.ai-on .stat.hl{grid-column:1/-1;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 65%,#000))!important}
html.ai-on .stat.hl .num,html.ai-on .stat.hl b,html.ai-on .stat.hl span{color:#06101f!important}
html.ai-on .stat.hl .num{font-size:34px!important}
html.ai-on table.res{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
html.ai-on table.res td,html.ai-on table.res th{padding:11px 4px!important;border:0!important;border-bottom:1px solid var(--ai-hair)!important;text-align:start}
html.ai-on table.res tr:last-child td{border-bottom:0!important}
html.ai-on table.res td:last-child{text-align:end;font-weight:600}
/* bottom action bar (like the home tab bar) */
.ai-bar{position:fixed;z-index:70;bottom:calc(12px + env(safe-area-inset-bottom,0px));inset-inline:0;margin:0 auto;width:min(420px,calc(100% - 28px));
  display:flex;gap:6px;padding:6px;border-radius:30px;background:color-mix(in srgb,var(--ai-bg) 60%,transparent);border:1px solid var(--ai-hair);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 14px 40px rgba(0,0,0,.4)}
.ai-bar button{flex:1;min-height:50px;border:0;border-radius:24px;background:transparent;color:var(--ai-text);font:600 13px var(--ai-font);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;line-height:1.15}
.ai-bar button svg{width:22px;height:22px}
.ai-bar button.main{background:var(--c);color:#06101f}
@media (prefers-reduced-motion:reduce){.ai-ttl,.ai-nav,label.ck input::after{transition:none!important}}
@media print{.ai-nav,.ai-bar,.ai-wall{display:none!important}}
html.ai-on .sub{display:block!important}
html.ai-on .sub>div{margin-top:6px}
html.ai-on label.ck{text-align:start!important;justify-content:space-between!important}
/* fully free (copied from ft-look.css, which is switched off on app-style pages) */
html.ai-on section.card:has(#prolock),html.ai-on .nl,html.ai-on .v2-more,html.ai-on section:has(> h2 .tag-pro),html.ai-on .tier-row,html.ai-on .tag-pro,html.ai-on .lock,html.ai-on .v2-pro,html.ai-on a[data-v2wait],html.ai-on [data-v2-pro],html.ai-on nav.xpbar,html.ai-on #xp,html.ai-on .xpbar,html.ai-on .stat:has(#remaining),html.ai-on .limit-bar,html.ai-on #left{display:none!important}
html.ai-on,html.ai-on body{scrollbar-width:none}
html.ai-on label:has(> input[type=file]),html.ai-on .drop{position:relative;overflow:hidden}
/* inside the home viewer: the viewer already has back + title */
html.ai-frame .ai-nav{display:none!important}