@font-face{font-family:Manrope;src:url('../studio/sans.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'DM Serif';src:url('../studio/serif.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root{color-scheme:dark;--sp-bg:#0b0b0b;--sp-panel:#151515;--sp-line:#303030;--sp-muted:#a3a3a3;--sp-text:#f5f5f5}
html{scroll-padding-top:140px}
body.sp-page{background:var(--sp-bg);color:var(--sp-text);font-family:Manrope,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
.sp-page *, .sp-page *:before,.sp-page *:after{font-family:inherit;box-sizing:border-box}
.sp-page code,.sp-page pre,.sp-page .font-mono,.sp-page .font-mono *{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.sp-page h1,.sp-page h2,.sp-page h3{line-height:1.25;letter-spacing:-.035em}
.sp-page h1{font-weight:600!important;letter-spacing:-.05em}
.sp-page h2{font-weight:600}
.sp-page h3{font-weight:600}
.sp-page .text-gray-400{color:#ababab}
.sp-page .text-gray-500{color:#989898}
.sp-page .text-gray-600{color:#8d8d8d}
.sp-page a,.sp-page button{touch-action:manipulation}
.sp-page button,.sp-page a[onclick]{cursor:pointer}
.sp-page button:disabled{cursor:not-allowed;opacity:.55}
.sp-page a:focus-visible,.sp-page button:focus-visible,.sp-page input:focus-visible,.sp-page select:focus-visible,.sp-page textarea:focus-visible,.sp-page summary:focus-visible{outline:2px solid #e5e5e5;outline-offset:4px}
.sp-page input:not([type=checkbox]):not([type=radio]):not([type=range]),.sp-page select,.sp-page textarea{background:#111;border-color:#3c3c3c;border-radius:7px;color:#eee;min-height:44px;font-size:14px;max-width:100%}
.sp-page input::placeholder,.sp-page textarea::placeholder{color:#888}
.sp-page input:not([type=checkbox]):not([type=radio]):focus,.sp-page textarea:focus,.sp-page select:focus{border-color:#ccc;outline-offset:2px}
.sp-page input[type=checkbox]{accent-color:#eee;width:16px;height:16px;flex-shrink:0}
.sp-page option{background:#171717;color:#eee}
.sp-page .bg-white\/5{background-color:#151515}
.sp-page .border-white\/10{border-color:#2c2c2c}
.sp-page .border-white\/20{border-color:#424242}
.sp-page .rounded-xl,.sp-page .rounded-2xl{border-radius:10px}
.sp-page .bg-white{background:#eee;color:#111}
.sp-page button.bg-white:hover,.sp-page a.bg-white:hover{background:#fff}
.sp-page button.rounded-lg,.sp-page a.rounded-lg{border-radius:6px;transition:background .16s,border-color .16s}
.sp-page .sp-topbar{background:rgba(11,11,11,.96)!important;backdrop-filter:blur(18px);border-color:#2b2b2b!important}
.sp-page .sp-topbar>div{min-height:82px;gap:20px;max-width:1280px;padding-inline:30px}
.sp-page .sp-topbar .sp-brand{white-space:nowrap}
.sp-page .sp-topbar a,.sp-page .sp-topbar button{font-size:12px;font-weight:600}
.sp-brand{display:inline-flex;align-items:center;gap:10px;color:#f5f5f5;font-family:Manrope,Arial,sans-serif;letter-spacing:-1.4px;font-size:25px;font-weight:800;line-height:1}
.sp-brand-icon{width:39px;height:37px;border:1px solid #393939;border-radius:10px;background:#171717;display:grid;place-items:center;flex-shrink:0}
.sp-brand-icon img{width:29px;height:19px;display:block;object-fit:contain}
.sp-brand-period{color:#888}
.sp-kicker{font-size:9px!important;font-weight:700;letter-spacing:2px!important;color:#999;margin:0 0 12px}
.sp-account main,.sp-admin main{padding-top:45px;padding-bottom:70px}
.sp-account main{max-width:1160px}
.sp-account main>div,.sp-admin main>div{min-width:0}
.sp-account #mainContent>div:first-of-type:has(h1){margin-bottom:30px}
.sp-account h1{font-size:38px}
.sp-account .grid>.rounded-xl{padding:25px}
.sp-account #upgradeSection{background:#1c1c1c;border-color:#555}
.sp-account #upgradeSection:before{content:'MAKE ROOM FOR MORE';display:block;font-size:9px;letter-spacing:1.8px;font-weight:700;color:#aaa;margin-bottom:12px}
.sp-account #licenseKey{overflow-wrap:anywhere;white-space:normal;min-width:0;font-size:17px;letter-spacing:1.5px;border:1px solid #333;background:#0b0b0b}
.sp-account #copyBtn{border:1px solid #414141;flex-shrink:0}
.sp-account #devicesList>div{border-radius:7px;background:#1b1b1b;border:1px solid #303030}
.sp-account #historyList>div{border-color:#2d2d2d}
.sp-account #userEmail{max-width:32ch;overflow:hidden;text-overflow:ellipsis}
.sp-account #verificationBanner{border-radius:8px}
.sp-account main>div:has(>h2){padding:28px}
.sp-account #deleteModal>div{background:#171717;border:1px solid #4a4a4a;max-height:calc(100dvh - 40px);overflow-y:auto}
.sp-account .toggle-track{background:#444}
.sp-account .email-pref-toggle:checked~.toggle-track{background:#e0e0e0}
.sp-account .email-pref-toggle:checked~.toggle-handle{background:#1c1c1c}
.sp-auth{min-height:100dvh;padding:48px 20px;background:radial-gradient(ellipse at 50% 0,#242424 0,transparent 58%),#0b0b0b!important}
.sp-auth>div{margin-inline:auto!important;width:100%;max-width:470px;padding:0!important}
.sp-auth>div>div:has(h1){margin-bottom:30px}
.sp-auth h1{font-size:35px!important;letter-spacing:-1.5px!important}
.sp-auth .sp-brand{font-size:29px}
.sp-auth .sp-brand-icon{width:43px;height:41px}
.sp-auth form{line-height:1.65}
.sp-auth form>div{min-width:0}
.sp-auth form button[type=submit]{min-height:48px;font-size:14px;font-weight:700;border-radius:7px}
.sp-auth form label{font-size:12px;font-weight:600}
.sp-auth .sp-auth-brand{display:inline-flex;margin-bottom:28px}
.sp-auth .sp-kicker{margin:0 0 12px}
.sp-auth.sp-admin form{padding:28px;border-radius:10px}
.sp-auth #errorMessage,.sp-auth #errorMsg,.sp-auth #successMessage{line-height:1.7}
.sp-admin #admin-nav{background:rgba(11,11,11,.97)!important;backdrop-filter:blur(16px);border-bottom:1px solid #2b2b2b}
.sp-admin-header{max-width:1280px;margin:0 auto;padding:0 30px;min-width:0}
.sp-admin-brandrow{display:flex;align-items:center;gap:18px;min-height:78px;border-bottom:1px solid #252525}
.sp-portal-label{font-size:9px;letter-spacing:1.7px;font-weight:700;color:#aaa;border-left:1px solid #424242;padding-left:18px}
.sp-admin-brandrow>button{margin-left:auto;border:1px solid #3b3b3b;padding:8px 13px;border-radius:6px;font-size:11px;color:#bbb;background:#161616;min-height:36px}
.sp-admin-tabs{display:flex;gap:5px;overflow-x:auto;overscroll-behavior-inline:contain;padding:11px 0;scrollbar-width:thin;scrollbar-color:#4c4c4c transparent;min-width:0}
.sp-admin-link{color:#a8a8a8;white-space:nowrap;padding:8px 14px;border:1px solid transparent;border-radius:5px;font-size:12px;font-weight:500;flex-shrink:0}
.sp-admin-link:hover{background:#1d1d1d;color:#eee}
.sp-admin-link.is-active{background:#eee;color:#111;border-color:#eee;font-weight:700}
.sp-admin main{max-width:1280px;padding-inline:30px}
.sp-admin h1{font-size:32px}
.sp-admin main>div:first-child{gap:18px}
.sp-admin #statsGrid>div{border-radius:8px;background:#171717;border-color:#303030;padding:20px;min-width:0}
.sp-admin #statsGrid>div>div:first-child{letter-spacing:-.04em}
.sp-admin th{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:#aaa;background:#161616;white-space:nowrap}
.sp-admin td{font-size:12px;vertical-align:middle}
.sp-admin table{width:100%;border-collapse:collapse}
.sp-admin .overflow-x-auto{max-width:100%;scrollbar-width:thin;scrollbar-color:#555 #191919}
.sp-admin .overflow-hidden:has(>table){overflow-x:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:#555 #191919}
.sp-account main.max-w-2xl{max-width:850px}
.sp-admin tbody tr:hover{background:#202020}
.sp-admin code,.sp-admin td.font-mono{font-size:11px}
.sp-admin #pagination{gap:15px;flex-wrap:wrap}
.sp-admin canvas{max-width:100%}
.sp-admin #licenseHeader h1{overflow-wrap:anywhere}
.sp-admin #userHeader>div{flex-wrap:wrap;gap:12px}
.sp-admin #userHeader h1{overflow-wrap:anywhere;max-width:100%;min-width:0}
.sp-admin #userInfo .grid>div{min-width:0;overflow-wrap:anywhere}
.sp-admin #admin-toast{max-width:min(450px,calc(100% - 32px));right:16px;overflow-wrap:anywhere}
.sp-public{background:#0b0b0b!important}
.sp-public .download-card{background:#151515;border-color:#303030;border-radius:10px}
.sp-public .feature-card{background:#151515;border-color:#303030;border-radius:8px}
.sp-public h1{letter-spacing:-.05em}
.sp-public .bg-black\/50{background:#121212}
.sp-public footer{border-color:#2a2a2a}
@media(min-width:1000px){.sp-account #mainContent{display:grid;grid-template-columns:1.35fr 1fr;gap:24px 28px;align-items:start}.sp-account #mainContent.hidden{display:none}.sp-account #mainContent>*{margin-bottom:0!important}.sp-account #mainContent>div:has(h1),.sp-account #mainContent>div.grid,.sp-account #upgradeSection,.sp-account #verificationBanner{grid-column:1/-1}.sp-account #historySection{grid-column:1/-1}.sp-account #supportSection{grid-column:1/-1}}
@media(max-width:800px){.sp-page .sp-topbar>div{padding-inline:20px;gap:16px}.sp-account #mainContent{padding-inline:20px}.sp-admin-header,.sp-admin main{padding-inline:20px}.sp-admin main>div.flex:first-child{flex-wrap:wrap}.sp-admin main>div.flex:first-child>div{flex-wrap:wrap}.sp-admin main>div:first-child>input{width:100%;max-width:100%}.sp-admin #licenseHeader>div{flex-wrap:wrap}.sp-admin #pagination>div{flex-wrap:wrap}.sp-account .sp-topbar>div{flex-wrap:wrap;padding-block:15px}.sp-account .sp-topbar>div>div{gap:10px;flex-wrap:wrap}.sp-account #userEmail{max-width:22ch;font-size:11px}.sp-account h1{font-size:32px}.sp-account main>div:has(>h2){padding:23px}}
@media(max-width:520px){.sp-page .sp-topbar>div{min-height:75px;padding-inline:17px;gap:14px}.sp-page .sp-topbar>div>div{gap:10px}.sp-page .sp-topbar a,.sp-page .sp-topbar button{font-size:10px}.sp-page .sp-topbar .sp-brand{font-size:22px}.sp-brand-icon{width:34px;height:33px}.sp-brand-icon img{width:25px;height:17px}.sp-account #userEmail{max-width:20ch;font-size:10px}.sp-account .sp-topbar #userEmail{flex-basis:100%;max-width:none;text-align:right}.sp-account .sp-topbar>div>div:has(#userEmail){justify-content:flex-end;flex:1;max-width:55%;gap:8px}.sp-account .sp-topbar button,.sp-account .sp-topbar a.rounded-lg{padding:7px 10px}.sp-account main{padding-top:30px}.sp-account #mainContent{padding-inline:16px}.sp-account main>div:has(>h2){padding:20px}.sp-account #upgradeSection>div>div:last-child{flex-wrap:wrap}.sp-account #licenseKey{font-size:13px;letter-spacing:.5px;padding:13px 10px}.sp-account #licenseSection>div{gap:9px}.sp-account #copyBtn{padding:12px}.sp-account #devicesList>div{gap:12px;flex-wrap:wrap}.sp-account #devicesList>div>div{min-width:0}.sp-account #devicesList p,.sp-account #devicesList .font-medium{overflow-wrap:anywhere}.sp-account #verificationBanner{gap:12px;align-items:flex-start}.sp-account .email-pref-toggle+span{flex-shrink:0}.sp-auth{padding:35px 20px}.sp-auth>div>.rounded-2xl{padding:25px 21px}.sp-auth h1{font-size:30px!important}.sp-auth .sp-brand{font-size:26px}.sp-auth form input{font-size:16px!important}.sp-admin-header{padding-inline:16px}.sp-admin-brandrow{gap:12px;min-height:70px}.sp-admin-brandrow .sp-brand{font-size:22px;gap:8px}.sp-portal-label{font-size:7px;letter-spacing:1px;padding-left:12px}.sp-admin-brandrow>button{font-size:10px;padding:7px 10px}.sp-admin-tabs{padding-block:9px;gap:3px}.sp-admin-link{font-size:11px;padding:8px 11px}.sp-admin main{padding:28px 16px 50px}.sp-admin h1{font-size:28px}.sp-admin #statsGrid{gap:11px}.sp-admin #statsGrid>div{padding:17px}.sp-admin main>.grid{gap:18px}.sp-admin main>div>div.rounded-xl{padding:19px}.sp-admin main>div.flex{flex-wrap:wrap}.sp-admin #actionsCard>div{flex-wrap:wrap}.sp-public .sp-topbar>div{flex-wrap:wrap;min-height:75px}.sp-public .sp-topbar>div>div{gap:15px}.sp-public .sp-topbar .sp-brand{font-size:21px}.sp-public .sp-topbar .sp-brand-icon{width:32px;height:31px}.sp-public .sp-topbar .sp-brand-icon>img{width:24px}.sp-public .sp-topbar .sp-brand{gap:7px}}
@media(prefers-reduced-motion:reduce){.sp-page *,.sp-page *:before,.sp-page *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.sp-public .fade-up,.sp-public .fade-in{opacity:1!important;transform:none!important}}

/* Shared readability improvements for public pages and account/admin portals. */
.sp-page .sp-topbar a, .sp-page .sp-topbar button { font-size: 14px; }
.sp-page .sp-topbar .sp-brand { font-size: 25px; }
.sp-page .sp-kicker { font-size: 12px !important; letter-spacing: 1.3px !important; }
.sp-page .text-xs { font-size: 13px; line-height: 1.6; }
.sp-page input:not([type=checkbox]):not([type=radio]):not([type=range]),
.sp-page select, .sp-page textarea { font-size: 16px; }
.sp-auth form label { font-size: 14px; }
.sp-account #upgradeSection:before { font-size: 12px; }
.sp-account #userEmail { font-size: 13px; }
.sp-portal-label { font-size: 12px; letter-spacing: 1px; }
.sp-admin-brandrow > button, .sp-admin-link { font-size: 14px; }
.sp-admin th { font-size: 12px; }
.sp-admin td { font-size: 14px; }
.sp-admin code, .sp-admin td.font-mono { font-size: 13px; }
@media (max-width: 520px) {
  .sp-page .sp-topbar a, .sp-page .sp-topbar button { font-size: 13px; }
  .sp-page .sp-topbar .sp-brand { font-size: 22px; }
  .sp-portal-label { font-size: 11px; letter-spacing: .5px; }
  .sp-admin-link { font-size: 13px; }
  .sp-account #userEmail { font-size: 12px; }
}