:root{--bg:#12161A;--accent:#BD00FF;--text:#E2E8F0;--light:#1E252C;--dark:#090B0D;--border:rgba(226,232,240,.15);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 34%),radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 30%);pointer-events:none}.ambient{position:fixed;width:340px;height:340px;border-radius:50%;filter:blur(90px);opacity:.18;background:var(--accent);pointer-events:none}.ambient-a{top:-100px;left:-90px}.ambient-b{right:-120px;bottom:-100px}.glass{background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.015));backdrop-filter:blur(22px);border:1px solid var(--border);box-shadow:14px 14px 28px var(--dark),-10px -10px 22px var(--light)} .topbar{position:sticky;top:18px;z-index:5;max-width:1180px;margin:18px auto;padding:14px 18px;border-radius:22px;display:flex;justify-content:space-between;align-items:center}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:750}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 45%,transparent);font-size:12px}.topbar nav{display:flex;gap:18px}.topbar nav a,footer a{color:var(--text);text-decoration:none;opacity:.8}.topbar nav a:hover,footer a:hover{opacity:1} main{max-width:1180px;margin:auto;padding:40px 20px 70px}.hero{padding:55px 5px 45px}.eyebrow,.kicker,.code-label{font-size:11px;letter-spacing:.16em;font-weight:800;opacity:.68}.hero h1{font-size:clamp(40px,7vw,78px);line-height:.98;max-width:950px;margin:14px 0 20px}.hero h1 span{color:var(--accent);text-shadow:0 0 35px color-mix(in srgb,var(--accent) 35%,transparent)}.hero-copy{max-width:720px;opacity:.76;font-size:18px} .tool-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px}.panel{border-radius:28px;padding:25px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.panel h2{margin:4px 0 0;font-size:25px}.main-tool{min-height:590px}.status-dot{font-size:10px;border:1px solid var(--border);border-radius:999px;padding:7px 10px;color:var(--accent)}label{display:block;font-size:12px;font-weight:700;opacity:.85;margin:12px 0 7px}input,select{width:100%;border:1px solid var(--border);background:rgba(0,0,0,.22);color:var(--text);border-radius:14px;padding:13px 14px;outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}.input-wrap{position:relative}.input-wrap input{padding-right:45px}.icon-btn{position:absolute;right:7px;top:6px;border:0;background:transparent;color:var(--text);font-size:24px;opacity:.6}.settings-row{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px}.primary-btn,.secondary-btn,.copy-btn{border:0;border-radius:14px;padding:13px 16px;font-weight:800;cursor:pointer}.primary-btn{margin-top:15px;width:100%;background:var(--accent);color:white;box-shadow:0 0 30px color-mix(in srgb,var(--accent) 30%,transparent)}.secondary-btn,.copy-btn{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border)}.code-card{margin-top:22px;text-align:center;border-radius:24px;padding:25px}.inset{box-shadow:inset 9px 9px 18px var(--dark),inset -7px -7px 14px var(--light)}.otp{font-variant-numeric:tabular-nums;font-size:clamp(46px,8vw,72px);font-weight:900;letter-spacing:.08em;margin:5px 0 10px}.timer-line{display:flex;gap:10px;align-items:center}.progress{height:5px;flex:1;background:rgba(255,255,255,.07);border-radius:10px;overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);width:100%;transition:width .2s linear}.copy-btn{margin-top:15px}.meta,.result{margin-top:12px;min-height:20px;font-size:12px;opacity:.7}.side-stack{display:grid;gap:22px}.camera-box{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#050607;border:1px solid var(--border);display:grid;place-items:center}.camera-box video{width:100%;height:100%;object-fit:cover}.scan-frame{position:absolute;width:55%;aspect-ratio:1;border:2px solid var(--accent);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 35%,transparent)}.camera-message{position:absolute;bottom:12px;background:rgba(0,0,0,.55);padding:5px 9px;border-radius:9px;font-size:11px}.button-row{display:flex;gap:9px;margin-top:10px}.button-row button{flex:1}.dropzone{margin-top:12px;padding:18px;border:1px dashed var(--border);border-radius:18px;text-align:center;cursor:pointer;display:grid;gap:4px}.dropzone span{font-size:11px;opacity:.6}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.qr-output{margin-top:15px;min-height:15px;display:grid;place-items:center}.qr-output img{max-width:230px;border-radius:14px;background:white;padding:10px}.qr-actions{display:flex;gap:8px;margin-top:10px}.info-grid{margin-top:25px}.faq{margin-top:25px}.faq details{border-top:1px solid var(--border);padding:16px 0}.faq summary{cursor:pointer;font-weight:750}.faq details div{padding-top:10px;opacity:.75}.prose{margin-top:30px}.prose h1{font-size:42px}.prose p{opacity:.8}.narrow{max-width:900px}.center,.install{min-height:100vh;display:grid;place-items:center;padding:25px}.install .panel{width:min(760px,100%)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.error{padding:12px;border-radius:12px;background:rgba(255,0,0,.12);margin:10px 0}footer{max-width:1180px;margin:auto;padding:22px 20px 35px;display:flex;justify-content:space-between;opacity:.7;font-size:12px}@media(max-width:850px){.tool-grid{grid-template-columns:1fr}.topbar nav{display:none}.hero{padding-top:35px}.settings-row,.mini-grid,.form-grid{grid-template-columns:1fr}} /* Responsive admin experience */ .admin-body{min-height:100vh} .admin-main{width:min(1180px,100%);padding:22px clamp(14px,3vw,28px) 56px;position:relative} .admin-topbar{position:relative;top:auto;max-width:none;margin:0 0 14px;padding:13px 16px;border-radius:18px} .admin-user{display:flex;align-items:center;gap:14px;min-width:0;font-size:13px} .admin-user span{max-width:30vw;overflow-wrap:anywhere;opacity:.85} .admin-user a{color:var(--text);text-decoration:none} .admin-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:8px;border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,.14)} .admin-nav a{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:10px;color:var(--text);text-decoration:none;font-size:13px;font-weight:700;opacity:.82} .admin-nav a:hover,.admin-nav a[aria-current="page"]{opacity:1;background:rgba(189,0,255,.15);color:#fff} .profile-panel{max-width:820px;margin:0 auto;padding:clamp(18px,4vw,34px)} .profile-panel h1{font-size:clamp(28px,4vw,42px);margin:8px 0} .profile-intro,.muted{opacity:.72;font-size:14px} .profile-divider{height:1px;background:var(--border);margin:26px 0} .profile-panel h2{font-size:21px;margin:0} .success{padding:12px;border-radius:12px;background:rgba(20,180,110,.14);border:1px solid rgba(20,180,110,.3);margin:12px 0} .admin-main .hero{padding:32px 0 28px} .admin-main .panel{min-width:0;overflow-wrap:anywhere} .admin-main .secondary-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin:3px 4px 3px 0} .admin-main table{width:100%;border-collapse:collapse} .admin-main img,.admin-main input,.admin-main select,.admin-main textarea{max-width:100%} @media(max-width:700px){ .admin-main{padding:12px 12px 32px} .admin-topbar{align-items:flex-start;gap:12px;flex-wrap:wrap} .admin-user{gap:10px;flex-wrap:wrap} .admin-user span{max-width:100%} .admin-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:7px;margin-bottom:18px} .admin-nav a{font-size:12px;padding:10px 5px;text-align:center} .admin-main .hero{padding:22px 0} .admin-main .hero h1{font-size:clamp(32px,10vw,52px)} .admin-main .tool-grid{grid-template-columns:minmax(0,1fr)} .admin-main .panel{padding:18px;border-radius:20px} .admin-main .panel-head{align-items:flex-start;gap:10px;flex-wrap:wrap} .admin-main .secondary-btn{margin:4px 3px 4px 0} .profile-panel{padding:20px 16px} .profile-panel .form-grid{grid-template-columns:minmax(0,1fr)} footer{flex-direction:column;gap:8px} } @media(max-width:380px){ .admin-nav{grid-template-columns:minmax(0,1fr)} .admin-topbar .brand{font-size:14px} .admin-user{font-size:12px} } /* Mobile-first admin navigation and accessible theme modes */ html{color-scheme:dark;scrollbar-gutter:stable}html[data-theme="light"]{color-scheme:light;--bg:#f4f6fb;--accent:#8b19c9;--text:#18202b;--light:#ffffff;--dark:#dce2ec;--border:rgba(24,32,43,.16)} html[data-theme="light"] body:before{opacity:.28}html[data-theme="light"] .glass{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,248,252,.93));box-shadow:8px 8px 24px rgba(35,45,60,.08),-5px -5px 16px rgba(255,255,255,.8)} html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#fff;color:var(--text)}html[data-theme="light"] .secondary-btn,html[data-theme="light"] .copy-btn{background:#eef1f7;color:var(--text)}html[data-theme="light"] .admin-nav{background:rgba(255,255,255,.8)}html[data-theme="light"] .admin-nav a:hover,html[data-theme="light"] .admin-nav a[aria-current="page"]{color:#5d087f;background:rgba(139,25,201,.12)}html[data-theme="light"] .progress{background:#dce2ec}html[data-theme="light"] .camera-box{background:#e9edf4} .theme-toggle{appearance:none;cursor:pointer;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text);font-family:inherit;font-size:13px;font-weight:700;line-height:1.2;padding:10px 13px;box-shadow:0 4px 14px rgba(0,0,0,.12);white-space:nowrap;min-height:40px}.theme-toggle-inline{margin-left:auto;flex-shrink:0}.admin-main{max-width:1180px;margin:0 auto}.admin-main>.topbar{width:100%}.admin-main .admin-nav{display:flex;flex-wrap:wrap;gap:7px}.admin-nav a{min-width:0;overflow-wrap:anywhere}.admin-body main:not(.center){width:min(1180px,100%)} @media(max-width:700px){.topbar{top:6px;margin:8px 10px;padding:12px;border-radius:16px;gap:8px;flex-wrap:wrap}.topbar .brand{min-width:0;flex:1}.theme-toggle{font-size:12px;padding:9px 10px}.theme-toggle-inline{margin-left:0}.admin-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}.admin-nav a{display:flex;white-space:normal;text-align:center;line-height:1.3;padding:10px 6px;border:1px solid var(--border);border-radius:10px;overflow-wrap:anywhere}.admin-main{padding:10px 12px 30px!important}.admin-main .admin-topbar{display:flex;align-items:center;flex-wrap:wrap}.admin-user{max-width:100%;overflow-wrap:anywhere}.admin-main .hero{padding:22px 0}.admin-main .tool-grid{grid-template-columns:minmax(0,1fr)}.admin-main .panel{padding:17px;border-radius:18px}.admin-main table{display:block;overflow-x:auto;max-width:100%}body>main.narrow{padding:18px 12px 32px}.narrow .admin-nav{margin-top:14px}.narrow .panel{padding:16px;overflow-wrap:anywhere}.profile-panel{margin-top:12px}footer{padding:20px 14px;gap:10px;flex-wrap:wrap}} @media(max-width:390px){.admin-nav{grid-template-columns:minmax(0,1fr)!important}.theme-toggle{width:100%}.admin-topbar .brand{font-size:13px}.topbar nav{display:none}} .theme-toggle:not(.theme-toggle-inline){position:fixed;right:14px;top:14px;z-index:1000} /* Final mobile/admin corrections */ .admin-body{overflow-x:hidden} .admin-body .admin-main{width:min(1180px,100%);margin:0 auto;padding:22px clamp(12px,3vw,28px) 48px} .admin-body .topbar,.admin-body .admin-topbar{width:100%;max-width:none;margin:0 0 14px;position:relative;top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .admin-body .admin-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(135px,100%),1fr));gap:8px;margin:0 0 24px;padding:8px;border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,.14)} .admin-body .admin-nav a{display:flex;align-items:center;justify-content:center;min-width:0;min-height:42px;padding:9px 8px;border-radius:10px;color:var(--text);text-decoration:none;font-size:13px;font-weight:700;line-height:1.3;overflow-wrap:anywhere;text-align:center} .admin-body .admin-user{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;max-width:100%} .admin-body .admin-user a{color:var(--text);text-decoration:none;overflow-wrap:anywhere} .admin-body .panel,.admin-body section,.admin-body form{min-width:0;max-width:100%;overflow-wrap:anywhere} .admin-body table{display:block;max-width:100%;overflow-x:auto} .theme-toggle{font-family:inherit!important;font-size:13px!important;font-weight:700!important;line-height:1.2!important;min-height:42px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--light)!important;color:var(--text)!important;padding:10px 12px!important;box-shadow:none!important;cursor:pointer!important} .theme-toggle-inline{position:static!important;margin-left:auto!important;flex:0 0 auto!important} html[data-theme="light"] .admin-body .admin-nav{background:rgba(255,255,255,.92)} html[data-theme="light"] .admin-body .admin-nav a{color:var(--text)} html[data-theme="light"] .admin-body .admin-nav a[aria-current="page"]{background:rgba(139,25,201,.12);color:#5d087f} @media(max-width:600px){.admin-body .admin-main{padding:12px 12px 28px!important}.admin-body .topbar,.admin-body .admin-topbar{align-items:flex-start;padding:12px!important}.admin-body .admin-user{width:100%;font-size:12px}.admin-body .admin-user span{max-width:100%;overflow-wrap:anywhere}.admin-body .admin-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px}.admin-body .admin-nav a{font-size:12px;padding:10px 5px}.admin-body .hero{padding:22px 0!important}.admin-body .hero h1{font-size:clamp(32px,9vw,48px)!important}.admin-body .panel{padding:16px!important;border-radius:18px!important}.theme-toggle-inline{margin-left:0!important}} @media(max-width:360px){.admin-body .admin-nav{grid-template-columns:minmax(0,1fr)}} /* Separate tool pages and touch-friendly navigation */ .topbar .tool-nav{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;margin-left:auto} .topbar .tool-nav a{display:inline-flex;align-items:center;min-height:40px;padding:9px 12px;border-radius:11px;border:1px solid transparent;color:var(--text);text-decoration:none;font-size:13px;font-weight:750;opacity:.88;white-space:nowrap} .topbar .tool-nav a:hover,.topbar .tool-nav a[aria-current="page"]{opacity:1;border-color:var(--border);background:rgba(189,0,255,.13)} .app-page{padding-top:8px}.single-tool{max-width:780px;margin:0 auto}.single-tool .main-tool{min-height:0}.compact-hero{padding-top:36px;padding-bottom:28px}.scanner-panel,.create-panel{max-width:780px;margin:0 auto}.scanner-panel .camera-box{max-height:460px}.scanner-panel .primary-btn{width:auto;flex:1;margin-top:0}.scanner-panel .button-row{display:flex}.scanner-panel .dropzone{color:var(--text)}.create-panel .mini-grid label{margin:0}.create-panel .mini-grid{margin-top:12px}.create-panel .settings-row{margin-top:6px} .mobile-page-controls{display:none} .admin-body .admin-nav{justify-content:flex-end;overflow-x:auto;scrollbar-width:thin;white-space:nowrap} .admin-body .admin-nav a{flex:0 0 auto} @media(max-width:850px){.topbar .tool-nav{display:flex;gap:5px;max-width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;scrollbar-width:none}.topbar .tool-nav::-webkit-scrollbar{display:none}.topbar .tool-nav a{font-size:12px;padding:8px 10px}.mobile-page-controls{display:flex;gap:8px;overflow-x:auto;padding:4px 1px 14px;margin:0 0 14px;scroll-snap-type:x mandatory;scrollbar-width:none}.mobile-page-controls::-webkit-scrollbar{display:none}.tool-step{display:flex;align-items:center;gap:7px;flex:0 0 auto;scroll-snap-align:start;padding:11px 13px;border:1px solid var(--border);border-radius:14px;color:var(--text);text-decoration:none;background:rgba(255,255,255,.035);font-size:12px;font-weight:750;white-space:nowrap}.tool-step span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:7px;background:rgba(189,0,255,.15);color:var(--accent);font-size:10px}.tool-step.active{background:rgba(189,0,255,.15);border-color:color-mix(in srgb,var(--accent) 55%,var(--border))}.tool-step b{font-size:15px}.app-page{padding-top:0}.compact-hero{padding-top:22px;padding-bottom:18px}.single-tool .panel{padding:20px}.topbar{position:relative}.admin-body .admin-nav{display:flex!important;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity}.admin-body .admin-nav a{flex:0 0 auto;scroll-snap-align:start}.admin-body .admin-nav{max-width:100%}} @media(max-width:500px){.topbar .brand{font-size:14px}.topbar .tool-nav{width:100%;order:3}.topbar .tool-nav a{flex:0 0 auto}.topbar .theme-toggle-inline{margin-left:auto!important}.hero h1{font-size:clamp(34px,10vw,52px)}.hero-copy{font-size:15px}.scanner-panel .button-row{flex-wrap:wrap}.scanner-panel .button-row button{min-width:42%;padding:12px 8px}.single-tool .panel{padding:16px;border-radius:20px}.create-panel .mini-grid{grid-template-columns:1fr}.create-panel .settings-row{grid-template-columns:1fr 1fr}.create-panel .settings-row label:last-child{grid-column:1/-1}.otp{font-size:clamp(40px,12vw,60px)}} html[data-theme="light"] .tool-step{background:rgba(255,255,255,.88)}html[data-theme="light"] .tool-step.active{background:rgba(139,25,201,.1)} /* Targeted fix: keep admin theme toggle centered in document flow, never over content */ .admin-body .theme-toggle-admin{display:block!important;position:relative!important;inset:auto!important;z-index:1!important;width:min(240px,100%)!important;max-width:calc(100% - 8px)!important;margin:0 auto 14px!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important;transform:none!important} .admin-body .theme-toggle-inline{position:relative!important;inset:auto!important;flex:0 1 240px!important;width:min(240px,100%)!important;max-width:100%!important;margin:0 auto 12px!important;text-align:center!important;white-space:normal!important} .admin-body.center{display:block!important;min-height:100vh!important;padding:18px 12px 28px!important} .admin-body.center>.theme-toggle-admin{margin-bottom:14px!important} .admin-body.center>main{width:100%} /* Screenshot-matched public interface */ :root{--accent:#2446b5;--bg:#09132f;--text:#f4f7ff;--light:#13234a;--dark:#07102a;--border:rgba(124,157,232,.23)} html[data-theme="light"]{--bg:#edf3ff;--text:#102047;--light:#fff;--dark:#dbe5f8;--border:#d0daed} body{background:var(--bg);color:var(--text)}body:before{background:none}.ambient{display:none}.topbar{max-width:1180px;margin:24px auto 12px;padding:12px 0;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;border-radius:0;gap:18px}.brand{font-size:clamp(20px,3vw,28px);font-weight:850;letter-spacing:-.04em}.brand-mark{display:none}.topbar .tool-nav{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:22px;padding:7px;gap:5px;justify-content:space-between}.topbar .tool-nav a{min-height:46px;border-radius:17px;padding:10px 22px;font-size:clamp(12px,1.6vw,16px);font-weight:650}.topbar .tool-nav a[aria-current="page"]{background:var(--light);border-color:transparent;box-shadow:0 2px 9px rgba(0,0,0,.08)}.app-page{max-width:1180px;padding:12px 20px 60px}.single-tool{max-width:780px}.single-tool .panel{padding:28px 30px;border-radius:30px;background:var(--light);border:1px solid var(--border);box-shadow:0 18px 40px rgba(0,0,0,.06)}.panel h2{font-size:clamp(22px,4vw,30px);letter-spacing:-.035em}.panel-head{margin-bottom:20px}.panel-head .status-dot{color:#294b9c;background:rgba(79,124,226,.08);font-size:12px;letter-spacing:0}.single-tool label{font-size:15px;opacity:1;font-weight:650;margin:15px 0 8px}.single-tool input,.single-tool select,.single-tool textarea{background:rgba(124,157,232,.09);border:1px solid var(--border);border-radius:18px;min-height:54px;padding:15px 17px;font:inherit;font-size:16px;color:var(--text)}.single-tool input::placeholder,.single-tool textarea::placeholder{color:color-mix(in srgb,var(--text) 47%,transparent)}.input-wrap input{padding-right:45px}.icon-btn{top:9px}.advanced-settings{margin-top:18px}.advanced-settings summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:650;padding:0 3px 3px}.advanced-settings summary::-webkit-details-marker{display:none}.advanced-settings summary:after{content:'⌄';font-size:25px;line-height:1;transition:transform .2s}.advanced-settings[open] summary:after{transform:rotate(180deg)}.advanced-settings .settings-row{margin-top:14px;grid-template-columns:1fr 1fr}.advanced-settings .settings-row label{margin:0;font-size:14px}.advanced-settings .settings-row label:last-child{grid-column:1/-1}.save-browser{display:flex!important;align-items:center;gap:13px;margin:24px 0 15px!important;font-size:15px!important}.save-browser input{width:23px!important;height:23px!important;min-height:23px!important;accent-color:#6ca7ff;margin:0;padding:0;flex:0 0 23px}.primary-btn,.secondary-btn,.copy-btn{font:inherit;font-size:16px;font-weight:750;border-radius:18px;min-height:54px;padding:14px 18px;box-shadow:none}.primary-btn{background:#2446b5;color:#fff;margin-top:20px}.primary-btn:hover{filter:brightness(1.08)}.code-card{background:var(--light);border:1px solid var(--border);box-shadow:none}.meta{font-size:13px}.faq-page{max-width:850px;margin:25px auto 60px}.faq-page h1{font-size:clamp(30px,6vw,48px);margin:20px 0 8px}.faq-page .intro{font-size:17px;opacity:.72;margin-bottom:30px}.faq-page details{border:1px solid var(--border);border-radius:18px;padding:18px 20px;margin:12px 0;background:var(--light)}.faq-page summary{cursor:pointer;font-size:16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:15px}.faq-page summary::-webkit-details-marker{display:none}.faq-page summary:after{content:'⌄';font-size:22px}.faq-page details[open] summary:after{transform:rotate(180deg)}.faq-page details p{line-height:1.65;opacity:.75;margin:14px 0 0}.social-panel{max-width:900px}.social-panel .platform-choices{display:grid;grid-template-columns:1fr 1fr;background:rgba(124,157,232,.10);border:1px solid var(--border);border-radius:16px;padding:4px;margin-bottom:20px}.platform-choice{font:inherit;font-size:16px;font-weight:700;border:0;border-radius:13px;padding:12px;background:transparent;color:var(--text);min-width:0}.platform-choice[aria-pressed="true"]{background:var(--light);box-shadow:0 2px 8px rgba(0,0,0,.08)}.social-panel textarea{width:100%;min-height:260px;resize:vertical;line-height:1.5}.social-actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-top:16px}.social-actions .primary-btn{margin:0}.social-note{font-size:13px;line-height:1.6;opacity:.65}.floating-tools{position:fixed;right:22px;bottom:24px;z-index:30}.floating-tools>button{width:76px;height:76px;border:0;border-radius:25px;background:#6ca7ff;color:#061538;font-size:42px;font-weight:400;box-shadow:0 10px 24px rgba(32,72,170,.24);cursor:pointer}.floating-tools-menu{position:absolute;right:0;bottom:88px;width:min(330px,calc(100vw - 32px));border:1px solid var(--border);border-radius:22px;background:var(--light);box-shadow:0 20px 50px rgba(0,0,0,.2);overflow:hidden}.floating-tools-menu[hidden]{display:none}.floating-tools-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;color:var(--text);text-decoration:none;font-weight:650;border-bottom:1px solid var(--border)}.floating-tools-menu a:last-child{border-bottom:0}.floating-tools-menu a span{font-size:22px}.theme-toggle{width:58px!important;height:58px!important;min-height:58px!important;border-radius:50%!important;padding:0!important;font-size:0!important;background:var(--light)!important;border:1px solid var(--border)!important;position:static!important;box-shadow:none!important;flex:0 0 58px!important}.theme-toggle:before{content:'☾';font-size:28px}.theme-toggle[data-current-theme="light"]:before{content:'☀';font-size:27px}.topbar{display:flex}.topbar .theme-toggle-inline{margin-left:0!important}.topbar .tool-nav{margin-left:auto} html[data-theme="light"] body{background:#edf3ff}html[data-theme="light"] .topbar .tool-nav{background:rgba(255,255,255,.22)}html[data-theme="light"] .single-tool .panel{background:rgba(255,255,255,.86)}html[data-theme="light"] .floating-tools-menu{background:#fff}html[data-theme="light"] .primary-btn{background:#2446b5} @media(max-width:850px){.topbar{margin:18px 20px 12px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px}.topbar .tool-nav{grid-column:1/-1;grid-row:2;width:100%;overflow:visible;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex-wrap:initial;max-width:none}.topbar .tool-nav a{white-space:normal;text-align:center;justify-content:center;padding:10px 7px;min-height:48px;font-size:clamp(11px,2.7vw,15px)}.app-page{padding:8px 20px 45px}.single-tool .panel{padding:25px 22px}.theme-toggle-inline{grid-column:2;grid-row:1}.floating-tools{right:16px;bottom:16px}.floating-tools>button{width:64px;height:64px;border-radius:22px;font-size:38px}.floating-tools-menu{bottom:74px}} @media(max-width:520px){.topbar{margin:16px 18px 12px;gap:15px}.brand{font-size:21px}.theme-toggle{width:48px!important;height:48px!important;min-height:48px!important;flex-basis:48px!important}.theme-toggle:before{font-size:24px}.topbar .tool-nav{padding:5px;border-radius:20px;gap:2px}.topbar .tool-nav a{font-size:12px;padding:8px 4px;min-height:44px;border-radius:15px}.app-page{padding:6px 18px 35px}.single-tool .panel{padding:23px 18px;border-radius:24px}.panel-head{margin-bottom:18px}.single-tool input,.single-tool select,.single-tool textarea{font-size:15px;min-height:52px}.advanced-settings .settings-row{grid-template-columns:1fr 1fr;gap:8px}.advanced-settings .settings-row label:last-child{grid-column:1/-1}.social-actions{grid-template-columns:1fr 1fr}.social-actions .primary-btn{grid-column:1/-1}.social-panel textarea{min-height:230px}.faq-page{padding:0 18px}.faq-page details{padding:16px;border-radius:16px}footer{padding:18px;display:grid;gap:10px}.floating-tools>button{width:60px;height:60px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}} /* Screenshot-matched responsive theme overrides */ :root{color-scheme:dark;--bg:#0b1430;--text:#e8eeff;--light:#101d3c;--dark:#08112a;--accent:#6ca7ff;--border:rgba(139,169,235,.22)} :root[data-theme="light"]{color-scheme:light;--bg:#eaf1ff;--text:#10234f;--light:#fff;--dark:#dbe6fb;--accent:#2446b5;--border:#d0d9eb} html,body{min-height:100%;background:var(--bg);color:var(--text)} body{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 94%,#6ca7ff 6%),var(--bg) 42%);} .topbar{max-width:1180px;display:flex;align-items:center;gap:16px;margin:20px auto 12px;padding:12px 20px} .brand{color:var(--text);text-decoration:none;font-weight:850;white-space:nowrap} .tool-nav{flex:1;min-width:0} .single-tool .panel,.faq-page details{background:var(--light);border-color:var(--border)} .single-tool input,.single-tool select,.single-tool textarea{background:color-mix(in srgb,var(--bg) 65%,var(--light));color:var(--text);border-color:var(--border)} .primary-btn{background:#6ca7ff;color:#071638} :root[data-theme="light"] .primary-btn{background:#2446b5;color:#fff} .theme-toggle{margin-left:auto!important} [hidden]{display:none!important} @media(max-width:850px){.topbar{margin:14px 18px 10px;padding:8px 0;flex-wrap:wrap}.topbar .tool-nav{display:flex;order:3;flex-basis:100%;margin:0;gap:3px}.topbar .tool-nav a{flex:1;text-align:center;padding:9px 5px;min-width:0}.theme-toggle{margin-left:auto!important}.app-page{padding-top:8px}} @media(max-width:380px){.topbar .tool-nav a{font-size:11px;padding-inline:2px}.floating-tools{right:14px;bottom:16px}.floating-tools>button{width:56px;height:56px;border-radius:19px;font-size:34px}.single-tool .panel{padding:19px 15px}} /* Mockup-aligned admin/public tokens and reliable checkbox visibility */ :root{--bg:#f4f7fd;--light:#fff;--dark:#eef2fa;--text:#0b1b45;--border:#d2dbee;--accent:#1e40af;color-scheme:light} html[data-theme="dark"]{--bg:#080f24;--light:#0e1a3a;--dark:#091330;--text:#eaf0ff;--border:#223564;--accent:#6aa8ff;color-scheme:dark} body.admin-body{background:radial-gradient(800px 400px at 50% -10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),var(--bg);color:var(--text)} .admin-body .topbar,.admin-body .admin-nav,.admin-body .panel,.admin-body .hero{color:var(--text)} .admin-body .panel,.admin-body .admin-nav{background:var(--light);border:1px solid var(--border);border-radius:20px;box-shadow:0 12px 32px -24px rgba(11,27,69,.35)} .admin-body .admin-nav{padding:8px;gap:5px;flex-wrap:wrap} .admin-body .admin-nav a{border-radius:12px;padding:10px 13px;color:var(--text);text-decoration:none} .admin-body .admin-nav a[aria-current="page"]{background:var(--dark);color:var(--accent)} .admin-body input,.admin-body textarea,.admin-body select{background:var(--dark);color:var(--text);border:1px solid var(--border);border-radius:12px;max-width:100%} .admin-body .theme-toggle-admin{border:1px solid var(--border)!important;background:var(--light)!important;color:var(--text)!important;border-radius:14px!important;height:44px!important;min-height:44px!important;width:120px!important;max-width:120px!important;font-size:14px!important;box-shadow:none!important} .admin-body .theme-toggle-admin:before{content:none!important} #accountNameWrap[hidden]{display:none!important} #accountNameWrap:not([hidden]){display:block} @media(max-width:700px){.admin-body .admin-main{padding:12px}.admin-body .admin-nav{display:flex;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start}.admin-body .admin-nav a{flex:0 0 auto}.admin-body .tool-grid{grid-template-columns:minmax(0,1fr)}.admin-body .topbar{flex-wrap:wrap}.admin-body .panel{padding:16px}.admin-body .admin-user{display:flex;gap:8px;flex-wrap:wrap}} /* the2fa.com admin UI — aligned to the supplied admin mockup */ html[data-theme="light"]{--admin-bg:#f4f7fd;--admin-bg2:#d9e5fb;--admin-surface:#fff;--admin-sunken:#eef2fa;--admin-line:#d2dbee;--admin-ink:#0b1b45;--admin-muted:#586a94;--admin-accent:#1e40af;--admin-shadow:0 1px 0 #fff inset,0 18px 36px -22px rgba(11,27,69,.18)} html[data-theme="dark"]{--admin-bg:#080f24;--admin-bg2:#14265a;--admin-surface:#0e1a3a;--admin-sunken:#091330;--admin-line:#223564;--admin-ink:#eaf0ff;--admin-muted:#93a3d0;--admin-accent:#6aa8ff;--admin-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 48px -24px rgba(0,0,0,.45)} .admin-body{--admin-bg:var(--bg);--admin-surface:var(--light);--admin-line:var(--border);--admin-ink:var(--text);--admin-muted:color-mix(in srgb,var(--text) 62%,transparent);--admin-accent:var(--accent);font-family:"Instrument Sans",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(850px 400px at 50% -10%,var(--admin-bg2,#14265a),transparent 72%),var(--admin-bg);color:var(--admin-ink)} .admin-body:before{display:none}.admin-body .admin-main{width:min(1120px,100%);padding:22px clamp(14px,3vw,28px) 36px;margin:0 auto}.admin-body .admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 24px;padding:0;background:transparent;border:0;box-shadow:none}.admin-body .brand{display:flex;gap:10px;align-items:center;color:var(--admin-ink);font-size:21px;letter-spacing:-.04em}.brand-word b{color:var(--admin-accent)}.admin-label{font-size:12px;font-weight:700;color:var(--admin-muted);letter-spacing:0;border-left:1px solid var(--admin-line);padding-left:10px}.admin-body .admin-user{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--admin-muted)}.admin-body .admin-user span{max-width:35vw;overflow-wrap:anywhere}.admin-body .admin-user a{color:var(--admin-ink);text-decoration:none}.admin-body .avatar-link{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--admin-accent);color:var(--admin-bg)!important;font-weight:800}.admin-body .logout-link{border:1px solid var(--admin-line);padding:9px 13px;border-radius:11px;background:var(--admin-surface)}.admin-body .admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 30px;padding:7px;border:1px solid var(--admin-line);border-radius:16px;background:color-mix(in srgb,var(--admin-surface) 82%,transparent);box-shadow:var(--admin-shadow)}.admin-body .admin-nav a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:39px;padding:9px 12px;border-radius:10px;color:var(--admin-muted);text-decoration:none;font-size:13px;font-weight:650;opacity:1}.admin-body .admin-nav a span{font-size:15px}.admin-body .admin-nav a:hover,.admin-body .admin-nav a[aria-current="page"]{background:var(--admin-accent);color:var(--admin-bg)}.admin-body .theme-toggle-admin{margin:0 0 18px auto!important;width:58px!important;height:42px!important;min-height:42px!important;max-width:58px!important;border-radius:12px!important;font-size:0!important;background:var(--admin-surface)!important;border:1px solid var(--admin-line)!important;box-shadow:none!important}.admin-body .theme-toggle-admin:before{content:'☾';font-size:22px}.admin-body .theme-toggle-admin[data-current-theme="light"]:before{content:'☀';font-size:22px}.admin-welcome{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:4px 0 22px}.admin-eyebrow{font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--admin-accent)}.admin-welcome h1{font-size:clamp(30px,5vw,42px);letter-spacing:-.045em;line-height:1.1;margin:7px 0}.admin-subtitle{margin:0;color:var(--admin-muted);font-size:15px}.admin-subtitle strong{color:var(--admin-ink)}.admin-live{white-space:nowrap;border:1px solid var(--admin-line);background:var(--admin-surface);border-radius:99px;padding:8px 12px;font-size:12px;font-weight:650;color:var(--admin-muted)}.admin-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:6px}.admin-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.admin-stat,.admin-card{min-width:0;background:var(--admin-surface);border:1px solid var(--admin-line);border-radius:19px;padding:18px;box-shadow:var(--admin-shadow)}.admin-stat .stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--admin-muted);font-size:13px;font-weight:650}.stat-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--admin-sunken);color:var(--admin-accent);font-size:17px}.admin-stat>strong{display:block;font-size:clamp(25px,3vw,33px);letter-spacing:-.04em;line-height:1.25;margin:10px 0 4px}.admin-stat>strong.stat-word{font-size:24px}.admin-stat small{display:block;font-size:12px;color:var(--admin-muted);line-height:1.4}.admin-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;margin-bottom:14px}.admin-card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.admin-card-heading h2{font-size:17px;letter-spacing:-.025em;margin:0}.admin-card-heading p{margin:3px 0 0;color:var(--admin-muted);font-size:12px}.admin-tag{border:1px solid var(--admin-line);border-radius:99px;padding:5px 8px;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--admin-accent)}.usage-line{margin:15px 0}.usage-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;font-size:13px}.usage-label span{color:var(--admin-muted);overflow-wrap:anywhere}.usage-track{height:7px;background:var(--admin-sunken);border-radius:99px;overflow:hidden}.usage-track i{display:block;height:100%;background:var(--admin-accent);border-radius:99px;min-width:3px}.admin-action{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--admin-line);color:var(--admin-ink);text-decoration:none}.admin-action:last-child{border-bottom:0;padding-bottom:0}.action-symbol{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:12px;background:var(--admin-sunken);color:var(--admin-accent);font-size:18px}.admin-action>span:nth-child(2){min-width:0;flex:1}.admin-action b,.admin-action small{display:block}.admin-action b{font-size:13px}.admin-action small{font-size:11px;color:var(--admin-muted);margin-top:2px}.admin-action>i{font-style:normal;color:var(--admin-muted)}.admin-content-card{margin-bottom:14px}.admin-text-link,.row-link{font-size:12px;font-weight:700;color:var(--admin-accent);text-decoration:none;white-space:nowrap}.admin-table-wrap{max-width:100%;overflow-x:auto}.admin-body .admin-data-table{width:100%;border-collapse:collapse;min-width:500px}.admin-data-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--admin-muted);font-weight:750;padding:10px;border-bottom:1px solid var(--admin-line)}.admin-data-table td{padding:12px 10px;border-bottom:1px solid var(--admin-line);font-size:12px}.admin-data-table tr:last-child td{border-bottom:0}.admin-data-table td:first-child strong{font-size:13px}.admin-data-table code{font-size:11px;color:var(--admin-muted)}.status-chip{display:inline-block;border-radius:99px;padding:4px 8px;background:var(--admin-sunken);font-size:10px;font-weight:750;color:var(--admin-muted)}.status-chip.published,.status-chip.active{color:#15803d;background:rgba(21,128,61,.1)}.admin-activity{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--admin-line)}.admin-activity:last-child{border:0;padding-bottom:0}.activity-dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--admin-accent);margin-top:6px}.admin-activity>div{min-width:0;flex:1}.admin-activity b{font-size:12px}.admin-activity p{margin:3px 0 0;color:var(--admin-muted);font-size:12px;overflow-wrap:anywhere}.admin-activity time{font-size:10px;color:var(--admin-muted);white-space:nowrap}.admin-empty{font-size:13px;color:var(--admin-muted);padding:8px 0}.admin-footer{display:flex;justify-content:space-between;gap:12px;padding:12px 2px 0;color:var(--admin-muted);font-size:11px}.admin-body .panel,.admin-body .profile-panel{background:var(--admin-surface);border:1px solid var(--admin-line);box-shadow:var(--admin-shadow);border-radius:19px;color:var(--admin-ink)}.admin-body .panel h1,.admin-body .panel h2,.admin-body .panel h3{color:var(--admin-ink);letter-spacing:-.03em}.admin-body label{color:var(--admin-ink);opacity:1;font-size:13px}.admin-body input,.admin-body select,.admin-body textarea{background:var(--admin-sunken);border-color:var(--admin-line);color:var(--admin-ink);border-radius:12px;min-height:44px}.admin-body .primary-btn{background:var(--admin-accent);color:var(--admin-bg);box-shadow:none;border-radius:12px}.admin-body .secondary-btn{background:var(--admin-sunken);border:1px solid var(--admin-line);color:var(--admin-ink);border-radius:12px}.admin-body .profile-intro,.admin-body .muted{color:var(--admin-muted);opacity:1}.admin-body .admin-main> .brand{margin-bottom:16px}.admin-body .error{border:1px solid rgba(194,65,12,.25);color:var(--admin-ink)} @media(max-width:820px){.admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-dashboard-grid{grid-template-columns:minmax(0,1fr)}.admin-welcome{align-items:flex-start;flex-direction:column}.admin-body .admin-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:20px}.admin-body .admin-nav a{justify-content:flex-start}.admin-body .admin-main{padding-top:16px}} @media(max-width:480px){.admin-body .admin-main{padding:12px 12px 28px}.admin-body .admin-topbar{align-items:flex-start}.admin-body .admin-user{gap:7px}.admin-body .admin-user span{max-width:42vw;font-size:11px}.admin-body .brand{font-size:19px}.admin-stat-grid{gap:8px}.admin-stat,.admin-card{padding:14px;border-radius:16px}.admin-stat>strong{font-size:27px}.admin-stat>strong.stat-word{font-size:19px}.admin-stat small{font-size:11px}.admin-card-heading{align-items:flex-start}.admin-activity{flex-wrap:wrap}.admin-activity time{margin-left:18px}.admin-footer{flex-direction:column;gap:3px}.admin-body .theme-toggle-admin{margin-bottom:10px!important}} /* Responsive admin mockup alignment: mobile-first navigation and theme surfaces */ .admin-body{--admin-bg:#f4f7fd;--admin-bg2:#d9e5fb;--admin-surface:#fff;--admin-sunken:#eef2fa;--admin-line:#d2dbee;--admin-ink:#0b1b45;--admin-muted:#586a94;--admin-accent:#1e40af;--admin-shadow:0 1px 0 #fff inset,0 18px 36px -22px rgba(11,27,69,.22);background:radial-gradient(800px 400px at 50% -10%,var(--admin-bg2),transparent 70%),var(--admin-bg);color:var(--admin-ink);padding-bottom:env(safe-area-inset-bottom,0px)} :root[data-theme="dark"] .admin-body{--admin-bg:#080f24;--admin-bg2:#14265a;--admin-surface:#0e1a3a;--admin-sunken:#091330;--admin-line:#223564;--admin-ink:#eaf0ff;--admin-muted:#93a3d0;--admin-accent:#6aa8ff;--admin-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 48px -24px rgba(0,0,0,.75)} .admin-body .admin-main{width:min(1120px,100%);padding:clamp(14px,3vw,30px) clamp(14px,3vw,28px) 40px} .admin-body .admin-nav{background:var(--admin-surface);border:1px solid var(--admin-line);border-radius:18px;box-shadow:var(--admin-shadow)} .admin-body .admin-nav a{color:var(--admin-muted);min-height:42px;border-radius:12px} .admin-body .admin-nav a[aria-current="page"]{background:color-mix(in srgb,var(--admin-accent) 12%,var(--admin-surface));color:var(--admin-accent)} .admin-body .admin-stat,.admin-body .admin-card,.admin-body .panel,.admin-body .profile-panel{background:var(--admin-surface);border:1px solid var(--admin-line);border-radius:24px;box-shadow:var(--admin-shadow)} .admin-body input,.admin-body select,.admin-body textarea{background:var(--admin-sunken);color:var(--admin-ink);border-color:var(--admin-line);border-radius:14px;min-height:48px;font:inherit} .admin-body .primary-btn{min-height:50px;border-radius:14px;background:var(--admin-accent);color:#fff;font-weight:750} .admin-body .theme-toggle-admin{position:absolute!important;top:18px;right:max(14px,calc((100vw - 1064px)/2))!important;margin:0!important;width:44px!important;height:44px!important;max-width:44px!important;border-radius:50%!important;font-size:0!important;background:var(--admin-surface)!important;border:1px solid var(--admin-line)!important;color:var(--admin-ink)!important;z-index:4} .admin-body .theme-toggle-admin:before{content:'☀';font-size:21px}.admin-body .theme-toggle-admin[data-current-theme="dark"]:before{content:'☾'} .admin-body .admin-topbar{padding-right:58px} @media(max-width:700px){ .admin-body{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))} .admin-body .admin-main{padding:14px 14px calc(92px + env(safe-area-inset-bottom,0px));} .admin-body .admin-topbar{align-items:center;gap:10px;margin-bottom:20px;padding-right:52px} .admin-body .brand{font-size:20px;gap:6px} .admin-body .admin-user>span,.admin-body .logout-link{display:none} .admin-body .avatar-link{width:42px!important;height:42px!important;flex:0 0 42px} .admin-body .admin-nav{position:fixed;z-index:50;left:0;right:0;bottom:0;margin:0!important;padding:7px 5px calc(7px + env(safe-area-inset-bottom,0px))!important;border-radius:0!important;border:0!important;border-top:1px solid var(--admin-line)!important;background:var(--admin-surface)!important;box-shadow:0 -8px 28px rgba(11,27,69,.08)!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;overflow:visible!important;backdrop-filter:blur(16px)} .admin-body .admin-nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:0;min-height:54px;padding:5px 2px!important;border-radius:13px;font-size:10px!important;line-height:1.1;text-align:center;white-space:normal} .admin-body .admin-nav a span{font-size:20px;line-height:1} .admin-body .admin-nav a[aria-current="page"]{background:color-mix(in srgb,var(--admin-accent) 10%,var(--admin-surface));color:var(--admin-accent)} .admin-body .admin-welcome{gap:8px;margin:6px 0 18px}.admin-body .admin-live{font-size:11px;padding:6px 9px} .admin-body .admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .admin-body .admin-stat,.admin-body .admin-card,.admin-body .panel,.admin-body .profile-panel{padding:16px;border-radius:22px} .admin-body .admin-dashboard-grid{grid-template-columns:minmax(0,1fr)} .admin-body .theme-toggle-admin{top:13px;right:14px!important;width:40px!important;height:40px!important;max-width:40px!important} .admin-body .admin-footer{padding-bottom:0} } @media(max-width:360px){.admin-body .admin-nav a{font-size:9px!important}.admin-body .admin-stat,.admin-body .admin-card{padding:13px}.admin-body .brand{font-size:18px}} /* Screenshot-matched the2fa admin panel */ .admin-body{--admin-bg:#f3f6fd;--admin-bg2:#e4edff;--admin-surface:#fff;--admin-sunken:#eef2fb;--admin-line:#dbe2f0;--admin-ink:#101f48;--admin-muted:#7785a4;--admin-accent:#2344b2;--admin-shadow:0 10px 30px rgba(20,38,80,.055);background:radial-gradient(900px 460px at 50% -8%,var(--admin-bg2),transparent 72%),var(--admin-bg);color:var(--admin-ink);font-size:16px} html[data-theme="dark"] .admin-body{--admin-bg:#070e23;--admin-bg2:#101c42;--admin-surface:#0e1b3c;--admin-sunken:#101d40;--admin-line:#22335e;--admin-ink:#edf2ff;--admin-muted:#96a6d1;--admin-accent:#6aa8ff;--admin-shadow:0 10px 30px rgba(0,0,0,.16)} .admin-body:before{display:none}.admin-body .admin-main{width:min(1180px,100%);padding:24px clamp(14px,4vw,30px) 46px}.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 24px;padding:0;background:transparent;border:0;box-shadow:none;min-height:54px}.admin-body .brand{font-size:24px;gap:5px;color:var(--admin-ink);white-space:nowrap}.brand-word{font-weight:800;letter-spacing:-.8px}.brand-word span{color:#5592ff}.admin-label{font-size:24px;font-weight:750}.admin-top-actions{display:flex;align-items:center;gap:12px}.mockup-badge{font-size:12px;letter-spacing:.04em;font-weight:800;color:var(--admin-accent);border:1px solid var(--admin-line);border-radius:999px;padding:8px 14px}.avatar-link{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--admin-surface);border:1px solid var(--admin-line);color:var(--admin-accent)!important;text-decoration:none;font-weight:800;font-size:17px;box-shadow:var(--admin-shadow)}.admin-body .theme-toggle-admin{position:static!important;display:grid;place-items:center;width:48px!important;height:48px!important;max-width:48px!important;padding:0!important;border-radius:50%!important;margin:0!important;font-size:23px!important;background:var(--admin-surface)!important;color:var(--admin-ink)!important;border:1px solid var(--admin-line)!important;box-shadow:var(--admin-shadow)!important;flex:0 0 48px}.admin-body .admin-nav{position:static;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:0;margin:0 0 24px;background:transparent;border:0;box-shadow:none;border-radius:0}.admin-body .admin-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px;padding:8px 4px;border-radius:15px;color:var(--admin-muted);font-size:14px;text-align:center;text-decoration:none;font-weight:600}.admin-body .admin-nav a span{font-size:23px;line-height:1.1}.admin-body .admin-nav a[aria-current="page"]{color:var(--admin-accent);background:color-mix(in srgb,var(--admin-accent) 9%,var(--admin-surface))}.admin-welcome{display:flex;align-items:center;justify-content:space-between;margin:12px 0 26px}.admin-welcome h1{font-size:clamp(34px,5vw,54px);line-height:1.08;letter-spacing:-1.7px;margin:0 0 10px;font-weight:800;color:var(--admin-ink)}.admin-subtitle{font-size:clamp(17px,2.4vw,22px);color:var(--admin-muted);margin:0}.period-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px}.period-tabs button{min-height:54px;border:1px solid var(--admin-line);border-radius:20px;background:var(--admin-surface);color:var(--admin-muted);font:inherit;font-weight:700;cursor:pointer}.period-tabs button.active{background:#6da7ff;color:#071a41;border-color:#6da7ff}.admin-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:22px}.admin-body .admin-stat,.admin-body .admin-card{min-width:0;background:var(--admin-surface);border:1px solid var(--admin-line);border-radius:30px;padding:25px 28px;box-shadow:var(--admin-shadow);margin:0 0 20px}.admin-stat{display:flex;flex-direction:column;gap:12px}.admin-stat>span{font-size:17px;color:var(--admin-muted);font-weight:600}.admin-stat>strong{font-size:clamp(32px,5vw,48px);line-height:1.1;letter-spacing:-1.5px}.admin-stat small{font-size:16px;font-weight:750}.positive{color:#27a86b}.warning-text{color:#d99451}.admin-card h2{font-size:24px;letter-spacing:-.5px;margin:0 0 25px;color:var(--admin-ink)}.usage-line{margin:0 0 23px}.usage-line:last-child{margin-bottom:0}.usage-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:18px;margin-bottom:10px}.usage-label strong{color:var(--admin-muted);font-variant-numeric:tabular-nums}.usage-track,.success-track{height:16px;border-radius:999px;background:#d5deef;overflow:hidden}.usage-track i{display:block;height:100%;border-radius:999px;background:var(--admin-accent)}.visits-chart{height:210px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:8px 0 0}.visits-chart>div{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;min-width:0}.visits-chart i{display:block;width:100%;max-width:76px;height:calc(100% - 27px);background:#4564bd;border-radius:10px 10px 2px 2px}.visits-chart>div:last-child i{background:var(--admin-accent)}.visits-chart span{font-size:14px;color:var(--admin-muted);font-weight:600}.health-row,.attention-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--admin-line)}.health-row:last-child,.attention-row:last-child{border-bottom:0;padding-bottom:0}.health-row b{font-size:18px}.health-row>span,.attention-row span{color:var(--admin-muted)}.health-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:12px}.health-dot.good{background:#18834c}.health-dot.warn{background:#bd4518}.attention-row b{white-space:nowrap}.attention-row a,.admin-card-heading a{color:var(--admin-accent);text-decoration:none;margin-left:8px}.admin-card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.admin-card-heading h2{margin-bottom:0}.activity-row{padding:14px 0;border-bottom:1px solid var(--admin-line)}.activity-row:last-child{border:0}.activity-row>span{float:right;color:var(--admin-muted);font-size:13px}.activity-row p{margin:5px 0 0;color:var(--admin-muted)}.admin-empty,.muted{color:var(--admin-muted)}.success-number{display:block;font-size:48px;margin:8px 0 18px}.success-track{height:16px;margin-bottom:12px}.success-track i{display:block;height:100%;width:82%;background:#bd4518}.admin-setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;border-bottom:1px solid var(--admin-line)}.admin-setting-row:first-of-type{padding-top:0}.admin-setting-row b{display:block;font-size:18px}.admin-setting-row small{display:block;color:var(--admin-muted);font-size:15px;margin-top:3px}.switch{display:inline-flex;flex:0 0 70px;align-items:center;cursor:pointer;margin:0}.switch input{position:absolute;opacity:0;width:1px;height:1px}.switch span{display:block;position:relative;width:70px;height:38px;border-radius:30px;background:#d0d9ec;transition:.18s}.switch span:after{content:"";position:absolute;left:4px;top:4px;width:30px;height:30px;border-radius:50%;background:white;box-shadow:0 1px 4px #0002;transition:.18s}.switch input:checked+span{background:var(--admin-accent)}.switch input:checked+span:after{transform:translateX(32px)}.subhead{margin-top:30px!important;padding-top:20px;border-top:1px solid var(--admin-line)}.field-label{display:block;margin:16px 0;font-size:16px;font-weight:700;color:var(--admin-ink)}.admin-body input:not([type=checkbox]),.admin-body select,.admin-body textarea{background:var(--admin-sunken);color:var(--admin-ink);border:1px solid var(--admin-line);border-radius:15px;min-height:52px;padding:12px 15px;font:inherit;margin-top:8px}.admin-body .primary-btn{display:block;width:100%;min-height:64px;margin-top:22px;background:var(--admin-accent);color:#fff;border:0;border-radius:18px;font-size:19px;font-weight:800;box-shadow:none}.admin-footer{display:flex;justify-content:space-between;gap:10px;color:var(--admin-muted);font-size:12px;padding:12px 2px 0}.success{padding:12px 15px;background:#e1f6eb;color:#176b42;border-radius:12px;margin:0 0 15px} @media(min-width:760px){.admin-body .admin-nav{display:none}.admin-body .admin-main{padding-top:30px}.admin-welcome{margin-top:28px}.admin-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-stat-grid .admin-stat{padding:24px}.admin-stat>span{font-size:15px}.admin-stat small{font-size:14px}.admin-body .admin-card{padding:30px 32px}.admin-body .admin-main{max-width:1120px}} @media(max-width:759px){.admin-body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}.admin-body .admin-main{padding:16px 14px calc(94px + env(safe-area-inset-bottom,0px))!important}.admin-topbar{margin-bottom:22px}.admin-body .brand,.admin-label{font-size:20px}.admin-top-actions{gap:8px}.mockup-badge{font-size:10px;padding:7px 9px}.avatar-link,.admin-body .theme-toggle-admin{width:44px!important;height:44px!important;flex-basis:44px;max-width:44px!important}.admin-body .admin-nav{position:fixed;z-index:100;left:0;right:0;bottom:0;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;padding:7px 5px calc(7px + env(safe-area-inset-bottom,0px));background:var(--admin-surface);border:0;border-top:1px solid var(--admin-line);box-shadow:0 -8px 24px #15275012;border-radius:0}.admin-body .admin-nav a{min-height:56px;padding:4px 1px;font-size:11px;gap:5px;border-radius:12px;white-space:nowrap}.admin-body .admin-nav a span{font-size:22px}.admin-welcome{margin:10px 0 24px}.admin-stat-grid{gap:12px;margin-bottom:20px}.admin-body .admin-stat{padding:22px 18px;border-radius:30px;gap:12px;margin:0}.admin-stat>span{font-size:15px}.admin-stat>strong{font-size:34px}.admin-stat small{font-size:14px}.admin-body .admin-card{padding:24px 22px;border-radius:30px;margin-bottom:18px}.admin-card h2{font-size:22px;margin-bottom:24px}.usage-label{font-size:16px}.usage-track{height:15px}.visits-chart{height:180px;gap:8px}.visits-chart span{font-size:12px}.health-row b{font-size:16px}.health-row>span{font-size:14px;text-align:right}.admin-footer{display:none}.form-grid{grid-template-columns:1fr 1fr}} @media(max-width:390px){.admin-body .brand,.admin-label{font-size:17px}.mockup-badge{display:none}.admin-stat>strong{font-size:29px}.admin-body .admin-stat{padding:17px 14px}.admin-body .admin-card{padding:20px 17px}.admin-body .admin-nav a{font-size:10px}.form-grid{grid-template-columns:1fr}} @media(min-width:760px){.admin-body .admin-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 24px}.admin-body .admin-nav a{flex-direction:row;min-height:50px;gap:9px;font-size:14px}.admin-body .admin-nav a span{font-size:20px}.admin-body .admin-welcome{margin-top:20px}} .profile-identity{display:flex;align-items:center;gap:18px;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--admin-line)}.profile-avatar{width:84px;height:84px;flex:0 0 84px;display:grid;place-items:center;background:var(--admin-accent);color:white;border-radius:50%;font-size:30px;font-weight:800}.profile-identity h2{margin:0 0 4px!important}.profile-identity p{margin:0;color:var(--admin-muted)}.status-chip{display:inline-flex;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--admin-accent) 12%,var(--admin-surface));color:var(--admin-accent);font-size:12px;font-weight:800} /* Compact screenshot-matched admin sizing: restrained typography and cards. */ .admin-body{font-size:14px;line-height:1.45} .admin-body .admin-main{width:min(100%,1120px);padding:22px 24px 36px;margin:0 auto} .admin-body .admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px;padding:0} .admin-body .brand{font-size:20px;gap:5px;white-space:nowrap} .admin-body .admin-label{font-size:20px} .admin-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto} .mockup-badge{font-size:11px;line-height:1;padding:7px 11px;border:1px solid var(--admin-line);border-radius:999px;color:var(--admin-accent);font-weight:800;white-space:nowrap} .admin-body .avatar-link,.admin-body .theme-toggle-admin{width:42px!important;height:42px!important;max-width:42px!important;flex:0 0 42px;padding:0!important;font-size:18px!important} .admin-body .admin-welcome{margin:14px 0 20px} .admin-body .admin-welcome h1{font-size:clamp(27px,3.5vw,36px);line-height:1.12;letter-spacing:-.8px;margin:0 0 7px} .admin-body .admin-subtitle{font-size:16px;line-height:1.4} .admin-body .admin-card,.admin-body .admin-stat{border-radius:24px;padding:20px 22px;margin:0 0 16px;box-shadow:var(--admin-shadow)} .admin-body .admin-card h2{font-size:19px;line-height:1.3;letter-spacing:-.25px;margin:0 0 16px} .admin-body .admin-stat-grid{gap:12px;margin-bottom:16px} .admin-body .admin-stat{gap:8px} .admin-body .admin-stat>span{font-size:14px} .admin-body .admin-stat>strong{font-size:clamp(27px,3vw,36px);letter-spacing:-.7px} .admin-body .admin-stat small{font-size:13px} .admin-body .period-tabs{gap:8px;margin-bottom:16px} .admin-body .period-tabs button{min-height:44px;border-radius:15px;font-size:14px} .admin-body .usage-line{margin-bottom:17px} .admin-body .usage-label{font-size:14px;margin-bottom:7px} .admin-body .usage-track,.admin-body .success-track{height:9px} .admin-body .visits-chart{height:150px;gap:9px} .admin-body .visits-chart span{font-size:12px} .admin-body .health-row,.admin-body .attention-row{padding:12px 0;gap:10px} .admin-body .health-row b{font-size:14px} .admin-body .health-row>span,.admin-body .attention-row span{font-size:13px} .admin-body .admin-setting-row{padding:14px 0;gap:12px} .admin-body .admin-setting-row b{font-size:15px;line-height:1.45} .admin-body .admin-setting-row small{font-size:13px} .admin-body .field-label,.admin-body label{font-size:14px} .admin-body input:not([type=checkbox]),.admin-body select,.admin-body textarea{min-height:44px;border-radius:13px;padding:10px 13px;font-size:14px;margin-top:7px} .admin-body .primary-btn{min-height:50px;border-radius:14px;font-size:16px;margin-top:16px} .admin-body .secondary-btn{min-height:38px;padding:8px 14px;border-radius:13px;font-size:14px} .admin-body .switch{flex-basis:54px} .admin-body .switch span{width:54px;height:30px} .admin-body .switch span:after{width:22px;height:22px;left:4px;top:4px} .admin-body .switch input:checked+span:after{transform:translateX(24px)} .admin-body .success-number{font-size:36px;margin:6px 0 12px} .admin-body .profile-avatar{width:64px;height:64px;flex-basis:64px;font-size:24px} .admin-body .profile-identity{gap:13px;margin-bottom:20px;padding-bottom:18px} .admin-body .content-card{margin-bottom:14px} .admin-body .content-card h2{margin-bottom:12px} .admin-body .content-faq-row{min-height:56px;padding:13px 0} .admin-body .content-faq-row .content-row-label{min-width:0;flex:1} .admin-body .content-faq-row b{font-size:14px;line-height:1.45;font-weight:650} .admin-body .compact-btn{min-height:34px;padding:6px 13px;flex:0 0 auto} .admin-body .content-add-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:43px;margin-top:12px;text-align:center;text-decoration:none;font-weight:650} .admin-body .content-page-text .field-label{display:block;margin:0 0 7px} .admin-body .content-prompt-form input{width:100%;box-sizing:border-box} .admin-body .content-save-wrap{margin-top:0} .admin-body .content-save-wrap .primary-btn{margin-top:14px} .admin-body .content-legal-row{min-height:54px;padding:12px 0} .admin-body .content-legal-row:last-child{border-bottom:0;padding-bottom:0} .admin-body .content-editor-card{scroll-margin-top:16px} .admin-body .admin-notice{margin:0 0 14px} .admin-body .admin-nav a{font-size:12px} @media(min-width:760px){ .admin-body .admin-main{padding:26px 28px 38px} .admin-body .admin-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0 0 22px;padding:5px;background:var(--admin-surface);border:1px solid var(--admin-line);border-radius:18px} .admin-body .admin-nav a{min-height:42px;padding:7px 8px;font-size:13px;gap:7px;border-radius:12px} .admin-body .admin-nav a span{font-size:18px} .admin-body .admin-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .admin-body .admin-stat-grid .admin-stat{padding:18px} .admin-body .admin-card{padding:22px 24px} } @media(max-width:759px){ .admin-body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))} .admin-body .admin-main{padding:16px 14px calc(82px + env(safe-area-inset-bottom,0px))!important} .admin-body .admin-topbar{margin-bottom:18px;gap:7px} .admin-body .brand,.admin-body .admin-label{font-size:17px} .admin-top-actions{gap:7px} .mockup-badge{font-size:9px;padding:6px 8px} .admin-body .avatar-link,.admin-body .theme-toggle-admin{width:39px!important;height:39px!important;max-width:39px!important;flex-basis:39px;font-size:17px!important} .admin-body .admin-welcome{margin:8px 0 18px} .admin-body .admin-welcome h1{font-size:28px;letter-spacing:-.7px} .admin-body .admin-subtitle{font-size:15px} .admin-body .admin-nav{position:fixed;z-index:1000;left:0;right:0;bottom:0;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;padding:6px 5px calc(6px + env(safe-area-inset-bottom,0px));background:var(--admin-surface);border:0;border-top:1px solid var(--admin-line);box-shadow:0 -5px 18px #15275012;border-radius:0} .admin-body .admin-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:54px;padding:4px 1px;border-radius:12px;font-size:10px;white-space:nowrap} .admin-body .admin-nav a span{font-size:20px;line-height:1.05} .admin-body .admin-card,.admin-body .admin-stat{padding:17px 17px;border-radius:23px;margin-bottom:13px} .admin-body .admin-card h2{font-size:18px;margin-bottom:13px} .admin-body .admin-stat-grid{gap:10px;margin-bottom:13px} .admin-body .admin-stat>span{font-size:12px} .admin-body .admin-stat>strong{font-size:29px} .admin-body .admin-stat small{font-size:12px} .admin-body .period-tabs{gap:7px;margin-bottom:13px} .admin-body .period-tabs button{min-height:40px;border-radius:13px;font-size:13px} .admin-body .usage-label{font-size:13px} .admin-body .visits-chart{height:125px;gap:7px} .admin-body .health-row b{font-size:13px} .admin-body .health-row>span,.admin-body .attention-row span{font-size:12px} .admin-body .content-faq-row{min-height:54px;padding:12px 0} .admin-body .content-faq-row b{font-size:13.5px} .admin-body .content-add-btn{min-height:42px} .admin-body .primary-btn{min-height:48px;font-size:15px} .admin-body .admin-footer{display:none} } @media(max-width:390px){ .admin-body .admin-main{padding-left:12px!important;padding-right:12px!important} .admin-body .brand,.admin-body .admin-label{font-size:15px} .mockup-badge{display:none} .admin-body .admin-card,.admin-body .admin-stat{padding:15px 14px} .admin-body .admin-stat>strong{font-size:26px} .admin-body .admin-nav a{font-size:9px} } .admin-body .content-prompt-form{display:block;width:100%;margin:0} .admin-body .content-final-save{margin:16px 0 0} .admin-body .panel.glass{padding:22px 24px;border-radius:24px} .admin-body .panel.glass h1{font-size:clamp(25px,3.2vw,34px);letter-spacing:-.7px} .admin-body .panel.glass h2{font-size:19px} @media(max-width:759px){.admin-body .panel.glass{padding:17px 16px;border-radius:22px}.admin-body .panel.glass h1{font-size:27px}.admin-body .panel.glass h2{font-size:18px}} /* Compact, screenshot-aligned refinement: keep page headings left aligned and reduce oversized UI. */ .admin-body .admin-welcome, .admin-body .admin-welcome > div, .admin-body .admin-welcome h1, .admin-body .admin-welcome .admin-subtitle { text-align:left!important; } .admin-body .admin-welcome { justify-content:flex-start!important; align-items:flex-start!important; } .admin-body .admin-main { max-width:1120px; } .admin-body .admin-welcome { margin:8px 0 16px!important; } .admin-body .admin-welcome h1 { font-size:clamp(25px,3vw,34px)!important; margin:0 0 6px!important; letter-spacing:-.7px!important; } .admin-body .admin-subtitle { font-size:clamp(13px,1.7vw,16px)!important; line-height:1.45; } .admin-body .admin-card, .admin-body .admin-stat, .admin-body .panel, .admin-body .profile-panel { padding:16px 18px!important; border-radius:18px!important; margin-bottom:12px!important; } .admin-body .admin-card h2 { font-size:17px!important; margin:0 0 12px!important; line-height:1.35; } .admin-body .admin-stat-grid { gap:10px!important; margin-bottom:12px!important; } .admin-body .admin-stat>span { font-size:12px!important; } .admin-body .admin-stat>strong { font-size:clamp(23px,2.8vw,30px)!important; margin:6px 0 2px!important; } .admin-body .admin-stat small { font-size:11px!important; } .admin-body .usage-line { margin:0 0 14px!important; } .admin-body .usage-label { font-size:13px!important; margin-bottom:6px!important; } .admin-body .usage-track, .admin-body .success-track { height:8px!important; } .admin-body .visits-chart { height:135px!important; gap:7px!important; } .admin-body .visits-chart span { font-size:11px!important; } .admin-body .health-row, .admin-body .attention-row { padding:10px 0!important; } .admin-body .health-row b { font-size:13px!important; } .admin-body .health-row>span, .admin-body .attention-row span { font-size:12px!important; } .admin-body .admin-setting-row { padding:11px 0!important; gap:10px!important; } .admin-body .admin-setting-row b { font-size:13px!important; line-height:1.4!important; } .admin-body .admin-setting-row small { font-size:11px!important; } .admin-body .field-label, .admin-body label { font-size:12px!important; } .admin-body input:not([type=checkbox]), .admin-body select, .admin-body textarea { min-height:38px!important; border-radius:10px!important; padding:8px 10px!important; font-size:13px!important; margin-top:5px!important; } .admin-body .primary-btn { min-height:43px!important; border-radius:11px!important; font-size:14px!important; margin-top:12px!important; } .admin-body .secondary-btn { min-height:32px!important; padding:6px 11px!important; border-radius:10px!important; font-size:12px!important; } .admin-body .period-tabs { gap:7px!important; margin-bottom:12px!important; } .admin-body .period-tabs button { min-height:38px!important; border-radius:12px!important; font-size:12px!important; } .admin-body .content-faq-row { min-height:48px!important; padding:10px 0!important; } .admin-body .content-faq-row b { font-size:12px!important; line-height:1.4!important; } .admin-body .content-add-btn { min-height:38px!important; margin-top:10px!important; font-size:12px!important; } .admin-body .content-legal-row { min-height:46px!important; padding:9px 0!important; } .admin-body .admin-topbar { align-items:center!important; } .admin-body .admin-top-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; } .admin-body .mockup-badge { font-size:10px; padding:6px 9px; } .admin-body .avatar-link { width:42px!important; height:42px!important; flex:0 0 42px!important; } .admin-body .theme-toggle-admin { width:42px!important; height:42px!important; min-height:42px!important; flex:0 0 42px!important; max-width:42px!important; margin:0!important; padding:0!important; font-size:0!important; border-radius:50%!important; } .admin-body .admin-nav a { text-align:center!important; } /* Compact public site typography and cards without affecting usability. */ body:not(.admin-body) .topbar { gap:10px; } body:not(.admin-body) .topbar .tool-nav a { min-height:38px; padding:8px 13px; font-size:13px; } body:not(.admin-body) .app-page { padding-top:8px; } body:not(.admin-body) .single-tool .panel, body:not(.admin-body) .panel.glass { padding:19px 20px; border-radius:20px; } body:not(.admin-body) .panel h2 { font-size:clamp(18px,2.5vw,23px); } body:not(.admin-body) label { font-size:13px; } body:not(.admin-body) input:not([type=checkbox]), body:not(.admin-body) select, body:not(.admin-body) textarea { min-height:42px; padding:10px 12px; font-size:14px; border-radius:12px; } body:not(.admin-body) .primary-btn { min-height:46px; padding:11px 14px; font-size:15px; border-radius:12px; } .faq-page { max-width:820px!important; padding:16px 16px 36px!important; } .faq-page h1 { text-align:left!important; font-size:clamp(25px,3vw,34px)!important; margin:0 0 6px!important; } .faq-page .intro { font-size:14px!important; margin:0 0 16px!important; } .faq-page details { padding:13px 15px!important; margin:0 0 9px!important; border-radius:13px!important; } .faq-page summary { font-size:14px!important; line-height:1.4; } .faq-page details p { font-size:13px!important; line-height:1.55; margin:9px 0 0!important; } @media(max-width:759px){ .admin-body .admin-main { padding:12px 12px calc(84px + env(safe-area-inset-bottom,0px))!important; } .admin-body .admin-topbar { flex-wrap:nowrap!important; gap:6px!important; margin-bottom:14px!important; } .admin-body .brand, .admin-body .admin-label { font-size:15px!important; } .admin-top-actions { gap:6px!important; } .admin-body .avatar-link, .admin-body .theme-toggle-admin { width:38px!important; height:38px!important; min-height:38px!important; max-width:38px!important; flex-basis:38px!important; } .admin-body .admin-card, .admin-body .admin-stat { padding:13px 13px!important; border-radius:16px!important; margin-bottom:10px!important; } .admin-body .admin-card h2 { font-size:15px!important; margin-bottom:10px!important; } .admin-body .admin-welcome { margin:7px 0 14px!important; } .admin-body .admin-welcome h1 { font-size:25px!important; } .admin-body .admin-subtitle { font-size:13px!important; } .admin-body .admin-stat>strong { font-size:24px!important; } .admin-body .admin-stat-grid { gap:8px!important; } .admin-body .admin-nav a { min-height:50px!important; font-size:10px!important; } .admin-body .admin-nav a span { font-size:19px!important; } .admin-body .content-faq-row { min-height:44px!important; padding:9px 0!important; } .admin-body .content-faq-row b { font-size:12px!important; } body:not(.admin-body) .app-page { padding-left:14px; padding-right:14px; } body:not(.admin-body) .single-tool .panel, body:not(.admin-body) .panel.glass { padding:15px 14px; border-radius:16px; } } .admin-body .period-tabs a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:7px 10px;border:1px solid var(--admin-line);border-radius:12px;background:var(--admin-surface);color:var(--admin-muted);font-size:12px;font-weight:700;text-decoration:none} .admin-body .period-tabs a.active{background:#6da7ff;color:#071a41;border-color:#6da7ff} /* Dashboard layout matched to the supplied mobile reference. */ .admin-body .admin-welcome { text-align:left!important; justify-content:flex-start!important; } .admin-body .admin-welcome > div { width:100%; text-align:left!important; } .admin-body .period-tabs { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px!important; width:100%; margin:0 0 14px!important; } .admin-body .period-tabs a { min-width:0; min-height:40px!important; padding:8px 6px!important; border-radius:13px!important; font-size:13px!important; } .admin-body .admin-stat-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .admin-body .admin-stat { min-width:0; min-height:112px; padding:17px 15px!important; border-radius:20px!important; } .admin-body .admin-stat>span { display:block; font-size:13px!important; line-height:1.35; } .admin-body .admin-stat>strong { display:block; font-size:clamp(25px,5vw,34px)!important; line-height:1.15; margin:9px 0 7px!important; letter-spacing:-.8px; } .admin-body .admin-stat small { font-size:12px!important; line-height:1.35; } .admin-body .admin-card { padding:18px 17px!important; border-radius:20px!important; } .admin-body .admin-card h2 { font-size:17px!important; margin-bottom:15px!important; } .admin-body .usage-line { margin-bottom:16px!important; } .admin-body .usage-label { display:flex; gap:10px; justify-content:space-between; font-size:14px!important; } .admin-body .usage-label span { min-width:0; } .admin-body .usage-label strong { white-space:nowrap; } .admin-body .usage-track { height:8px!important; } .admin-body .admin-nav a { text-align:center!important; } @media(min-width:760px){ .admin-body .admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; } .admin-body .admin-stat { min-height:120px; } } @media(max-width:390px){ .admin-body .admin-stat { padding:14px 12px!important; min-height:104px; } .admin-body .admin-stat>strong { font-size:23px!important; } .admin-body .admin-stat>span { font-size:12px!important; } .admin-body .period-tabs a { font-size:12px!important; } } /* Functional admin and public-site polish */ .site-announcement{width:min(100% - 28px,1000px);margin:10px auto 0;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--light);color:var(--text);font-size:13px;line-height:1.45} .admin-body .admin-welcome,.admin-body .admin-welcome>div,.admin-body .admin-welcome h1,.admin-body .admin-welcome .admin-subtitle{text-align:left!important} .admin-body .admin-welcome{justify-content:flex-start!important;align-items:flex-start!important} .admin-body .period-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%} .admin-body .period-tabs a{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;background:var(--admin-surface);border:1px solid var(--admin-line);border-radius:13px;min-height:42px;padding:8px 6px;font-weight:700} .admin-body .period-tabs a.active{background:#6da7ff;color:#071a41;border-color:#6da7ff} body:not(.admin-body) #secret{width:100%;min-width:0} body:not(.admin-body) .input-wrap{width:100%} body:not(.admin-body) .input-wrap input{flex:1;min-width:0;width:100%} body:not(.admin-body) .app-page .single-tool{width:100%;max-width:860px;margin-inline:auto} body:not(.admin-body) .main-tool{width:100%;max-width:860px;margin-inline:auto} body:not(.admin-body) .main-tool .panel-head{margin-bottom:14px} @media(max-width:600px){.site-announcement{width:calc(100% - 24px);font-size:12px;padding:9px 11px}.admin-body .admin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* Admin theme matches the supplied mobile dashboard reference */ .admin-body{--admin-surface:#101d3d;--admin-line:#263968;--admin-blue:#6da7ff;--admin-muted:#9aaad0;background:#070f26;color:#f0f4ff} html[data-theme="dark"] .admin-body{--bg:#070f26;--text:#f0f4ff;--light:#101d3d;--dark:#050a19;--border:#263968;--admin-surface:#101d3d;--admin-line:#263968;--admin-blue:#6da7ff;--admin-muted:#9aaad0} html[data-theme="dark"] .admin-body:before{opacity:.12;background:radial-gradient(circle at 20% 0%,rgba(52,100,210,.15),transparent 42%)} .admin-body .admin-topbar{background:transparent;border:0;padding:8px 0 18px!important} .admin-body .brand{font-size:clamp(18px,4vw,26px);font-weight:800;white-space:nowrap} .admin-body .brand-word span{color:var(--admin-blue)} .admin-body .admin-label{color:var(--text)} .admin-body .mockup-badge{border:1px solid var(--admin-line);border-radius:999px;padding:8px 12px;color:var(--admin-blue);font-size:11px;font-weight:800} .admin-body .avatar-link{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--admin-line);border-radius:50%;color:var(--admin-blue);text-decoration:none;font-weight:800} .admin-body .admin-top-actions{display:flex;align-items:center;gap:9px} .admin-body .theme-toggle{width:48px;height:48px;min-height:48px!important;padding:0!important;border-radius:50%!important;border:1px solid var(--admin-line)!important;background:var(--admin-surface)!important;color:var(--text)!important;font-size:0!important;display:grid;place-items:center} .admin-body .theme-toggle:before{content:'☀';font-size:24px;line-height:1} html[data-theme="dark"] .admin-body .theme-toggle:before{content:'🌙';font-size:23px} .admin-body .admin-welcome h1{font-size:clamp(34px,6vw,54px);letter-spacing:-.04em;margin:10px 0 2px} .admin-body .admin-subtitle,.admin-body .muted{color:var(--admin-muted)} .admin-body .panel,.admin-body .admin-card,.admin-body .admin-stat,.admin-body .glass{background:var(--admin-surface);border:1px solid var(--admin-line);box-shadow:none;color:var(--text)} .admin-body .admin-nav{background:#0d1834;border:1px solid var(--admin-line);border-radius:18px} .admin-body .admin-nav a{color:#aebcdd} .admin-body .admin-nav a[aria-current="page"]{background:var(--admin-blue);color:#061632} .admin-body .period-tabs a{background:#101d3d;border-color:var(--admin-line);color:#b5c2df} .admin-body .period-tabs a.active{background:var(--admin-blue);color:#071632;border-color:var(--admin-blue)} html[data-theme="light"] .admin-body{--bg:#f3f6fc;--text:#17233a;--light:#fff;--dark:#e2e8f2;--border:#d8e0ee;--admin-surface:#fff;--admin-line:#d8e0ee;--admin-blue:#6da7ff;--admin-muted:#64748b;background:#f3f6fc;color:#17233a} html[data-theme="light"] .admin-body:before{opacity:.05} html[data-theme="light"] .admin-body .admin-nav{background:#fff;border-color:#d8e0ee} html[data-theme="light"] .admin-body .admin-nav a{color:#50617d} html[data-theme="light"] .admin-body .admin-nav a[aria-current="page"]{background:#6da7ff;color:#071632} html[data-theme="light"] .admin-body .panel,html[data-theme="light"] .admin-body .admin-card,html[data-theme="light"] .admin-body .admin-stat,html[data-theme="light"] .admin-body .glass{background:#fff;border-color:#d8e0ee;color:#17233a} html[data-theme="light"] .admin-body .admin-topbar{background:transparent} @media(max-width:600px){ .admin-body .admin-main{padding:14px 14px 104px!important} .admin-body .admin-topbar{align-items:center!important;flex-wrap:nowrap!important;gap:8px!important} .admin-body .admin-top-actions{gap:6px} .admin-body .mockup-badge{font-size:9px;padding:6px 8px} .admin-body .avatar-link{width:40px;height:40px} .admin-body .theme-toggle{width:44px;height:44px;min-height:44px!important} .admin-body .admin-nav{position:fixed;z-index:1000;left:10px;right:10px;bottom:0;margin:0!important;padding:7px 4px calc(7px + env(safe-area-inset-bottom))!important;border-radius:18px 18px 0 0;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:2px!important;background:#0d1834!important;box-shadow:0 -6px 24px rgba(0,0,0,.18);overflow:visible!important;white-space:normal!important} .admin-body .admin-nav a{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px!important;padding:5px 2px!important;border:0!important;border-radius:12px!important;font-size:10px!important;line-height:1.15!important;white-space:normal;text-align:center;flex:initial!important} .admin-body .admin-nav a span{font-size:19px;line-height:1.1} .admin-body .admin-nav a[aria-current="page"]{background:#07132d!important;color:#83b4ff!important} html[data-theme="light"] .admin-body .admin-nav{background:#fff!important;box-shadow:0 -6px 24px rgba(20,35,60,.12)} html[data-theme="light"] .admin-body .admin-nav a[aria-current="page"]{background:#edf4ff!important;color:#2463c5!important} } /* Shared public navigation: keep every label, especially "Social Accounts Check", on one line across all pages. */ .topbar .tool-nav { display: flex !important; flex-wrap: nowrap !important; align-items: center; white-space: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .topbar .tool-nav::-webkit-scrollbar { display: none; } .topbar .tool-nav a { flex: 0 0 auto !important; white-space: nowrap !important; overflow-wrap: normal !important; word-break: keep-all !important; line-height: 1.2; } @media (max-width: 500px) { .topbar .tool-nav { width: 100%; order: 3; justify-content: flex-start; gap: 5px; } .topbar .tool-nav a { font-size: 12px; padding: 8px 10px; } } /* Responsive refinement layer — appended without changing theme variables or component logic. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; } body { overflow-wrap: anywhere; } img, video, canvas, svg, iframe { max-width: 100%; } button, input, select, textarea { font: inherit; max-width: 100%; } button, a { touch-action: manipulation; } main, .app-page, .narrow, .panel, .glass, .topbar, footer { min-width: 0; } .topbar { width: min(1180px, calc(100% - 32px)); gap: 14px; } .topbar .brand { flex: 0 0 auto; min-width: 0; } .topbar .tool-nav { flex: 1 1 auto; min-width: 0; } main { width: 100%; } .panel, .card, .tool-card, .social-panel { max-width: 100%; } input, textarea, select { min-width: 0; } pre, code, .result-box, .results-box { max-width: 100%; } footer { width: 100%; } /* Tablet and compact laptop */ @media (min-width: 761px) and (max-width: 1100px) { .topbar { width: calc(100% - 40px); padding: 12px 16px; } main { padding: 32px 24px 60px; } .hero { padding-top: 42px; } } /* Phones and narrow tablets */ @media (max-width: 760px) { .topbar { position: relative; top: auto; width: calc(100% - 24px); margin: 12px auto; padding: 12px; border-radius: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .topbar .brand { font-size: clamp(17px, 4.5vw, 22px); } .topbar .tool-nav { flex: 1 0 100%; width: 100%; order: 3; gap: 6px; padding: 2px 0 4px; overscroll-behavior-x: contain; } .topbar .tool-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 12px; border-radius: 12px; font-size: clamp(12px, 3.2vw, 14px); line-height: 1.15; } main { padding: 24px 14px 48px; } .hero { padding: 30px 0 24px; } .hero h1, h1 { font-size: clamp(27px, 7vw, 40px); line-height: 1.15; overflow-wrap: anywhere; } h2 { font-size: clamp(21px, 5.5vw, 30px); line-height: 1.2; } .hero-copy { font-size: clamp(14px, 3.8vw, 17px); } .panel, .glass { border-radius: 18px; } .panel { padding: clamp(14px, 4vw, 22px); } .grid, .tool-grid, .feature-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .input-wrap { width: 100%; min-width: 0; } .input-wrap input, input, select, textarea { max-width: 100%; } button, .button, .btn { min-height: 44px; } .social-panel { width: 100%; } .social-panel .platform-choices { gap: 8px; } .social-bulk-input { max-width: 100%; } footer { padding-inline: 14px; } } /* Small phones */ @media (max-width: 420px) { .topbar { width: calc(100% - 16px); padding: 10px; gap: 8px; } .topbar .tool-nav { gap: 4px; } .topbar .tool-nav a { padding: 8px 9px; font-size: 12px; } main { padding: 18px 10px 38px; } .hero { padding-top: 24px; } .panel { padding: 13px; } .grid, .tool-grid, .feature-grid, .stats-grid { grid-template-columns: minmax(0, 1fr); } .social-panel .platform-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .social-panel .platform-choice { padding: 11px 7px; gap: 6px; font-size: 14px; } .social-list-head { gap: 8px; font-size: 14px; } .social-bulk-input { min-height: 220px; padding: 14px; font-size: 14px; } .social-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .social-actions .check-button, .social-actions .primary { grid-column: 1 / -1; width: 100%; } .social-actions button { min-width: 0; width: 100%; } } /* Large desktop: keep content readable instead of stretching controls edge to edge. */ @media (min-width: 1400px) { main { padding-inline: 28px; } .topbar { margin-top: 22px; } } /* Honor user theme preference; responsive rules do not force light or dark colors. */