[data-theme="light"] { --text3:#706957; --border:rgba(136,112,62,.19); --surface:rgba(255,255,255,.9); }
[data-theme="dark"] { --text3:#92a1b9; --surface2:#192332; --surface:rgba(20,29,43,.9); }
body { margin:0; isolation:isolate; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:500; padding:12px 18px; background:var(--surface2); border-radius:8px; }
.skip-link:focus { top:16px; }
.hub-atmosphere { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.hub-atmosphere::before,.hub-atmosphere::after { content:''; position:absolute; width:480px; height:480px; border-radius:50%; opacity:.075; filter:blur(80px); animation:ambient-drift 24s ease-in-out infinite alternate; }
.hub-atmosphere::before { background:var(--gold); right:-100px; top:-200px; }
.hub-atmosphere::after { background:var(--accent); bottom:-200px; left:20%; animation-delay:-10s; }
.hub-atmosphere svg { position:absolute; width:80%; height:100%; right:-25%; color:var(--gold); opacity:.14; animation:contour-drift 32s ease-in-out infinite alternate; }
.btn { border-radius:10px; min-height:44px; white-space:normal; }
.btn-primary { background:linear-gradient(120deg,#1a6fd4,#1153a5); box-shadow:0 8px 22px -12px #1a6fd4; }
.btn-gold { color:#211707; background:linear-gradient(120deg,#e8bf69,#d4a030); }
.text-gradient { background:none; color:var(--accent); animation:none; }
[data-theme="dark"] .text-gradient { color:#76b3ff; }
.eyebrow { padding:0; border:0; background:none; border-radius:0; font-size:10px; }
.eyebrow::before { content:''; width:18px; height:1px; background:var(--gold); }
.ocard { border-radius:16px; }
.field { border-radius:9px; background:var(--bg); min-height:46px; }
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select { font-family:inherit; color:var(--text); }
input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.nav-shell { z-index:100; }
.nav-shell > div:first-child { max-width:none; padding-inline:28px; }
.hub-sidebar { display:none; }
.hub-workspace { min-width:0; }
.workspace-heading { margin-bottom:30px; }
.workspace-heading h1 { font-size:clamp(28px,3vw,40px); letter-spacing:-.045em; line-height:1.15; font-weight:600; margin:12px 0; }
.workspace-heading p { font-size:14px; line-height:1.7; color:var(--text2); }
.workspace-heading .eyebrow { color:var(--gold2); }
.workspace-hero { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:center; padding:30px 34px; border-radius:18px; border:1px solid var(--border); background:var(--surface); position:relative; overflow:hidden; }
.workspace-hero h1 { font-size:clamp(27px,3.2vw,42px); font-weight:600; letter-spacing:-.045em; line-height:1.12; margin:16px 0; }
.workspace-hero p { max-width:430px; font-size:13px; line-height:1.8; color:var(--text2); }
.workspace-art { position:relative; min-width:0; }
.workspace-art svg { width:100%; max-height:220px; overflow:visible; }
.workspace-art .orbit { transform-origin:160px 110px; animation:orbit-turn 40s linear infinite; }
.workspace-art .float-node { animation:node-float 7s ease-in-out infinite alternate; }
.workspace-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:22px 0 36px; }
.workspace-stat { padding:22px; border:1px solid var(--border); border-radius:13px; background:var(--surface); }
.workspace-stat > span { display:block; font-size:10px; color:var(--text2); text-transform:uppercase; letter-spacing:.08em; }
.workspace-stat strong { display:block; font-weight:500; font-size:30px; line-height:1.3; margin-top:9px; letter-spacing:-.04em; }
.workspace-stat small { display:block; margin-top:5px; font-size:11px; color:var(--text2); }
.section-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:20px; }
.section-heading h2 { font-size:20px; font-weight:600; letter-spacing:-.025em; }
.section-heading p { font-size:12px; color:var(--text2); margin-top:4px; }
.app-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.application-card { display:flex; flex-direction:column; padding:20px; border:1px solid var(--border); border-radius:16px; background:var(--surface); min-width:0; transition:transform .3s,border-color .3s,box-shadow .3s; }
.application-card:hover { transform:translateY(-4px); border-color:var(--border-a); box-shadow:var(--shadow); }
.app-illustration { position:relative; height:146px; background:var(--bg2); border-radius:10px; overflow:hidden; margin-bottom:20px; border:1px solid var(--border); }
.app-illustration svg { width:100%; height:100%; color:var(--accent); }
.app-illustration img { width:100%; height:100%; object-fit:cover; }
.application-card h3 { font-size:18px; font-weight:600; letter-spacing:-.025em; }
.application-card .description { color:var(--text2); font-size:12px; line-height:1.7; margin:12px 0 18px; flex:1; }
.app-status { margin-top:7px; display:inline-flex; align-items:center; gap:6px; font-size:10px; color:var(--text2); }
.app-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.app-status.active { color:#168363; }
.app-status.paused { color:var(--gold2); }
.app-status.expired,.app-status.canceled { color:#d65454; }
.app-plan { padding-top:14px; margin-top:auto; border-top:1px solid var(--border); font-size:11px; color:var(--text2); line-height:1.8; }
.app-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
.app-actions .btn { flex:1; padding:10px; font-size:11px; }
.workspace-guide { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
.guide-card { display:flex; align-items:flex-start; gap:15px; padding:23px; border:1px solid var(--border); border-radius:13px; background:var(--surface); }
.guide-icon { flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; border-radius:10px; color:var(--accent); background:var(--blob-light); }
.guide-card h3 { font-size:13px; font-weight:600; }
.guide-card p { font-size:12px; line-height:1.7; color:var(--text2); margin-top:6px; }
.guide-card a { display:inline-block; color:var(--accent); font-size:12px; font-weight:500; margin-top:13px; }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px; }
.plan-card { padding:28px; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:16px; position:relative; scroll-margin-top:100px; }
.plan-card.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 18px 50px #1a6fd410; }
.plan-card .plan-label { font-size:10px; color:var(--accent); letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
.plan-card h2 { font-size:20px; font-weight:600; }
.plan-description { font-size:13px; line-height:1.7; color:var(--text2); margin-top:12px; min-height:66px; }
.plan-price { font-size:32px; font-weight:500; letter-spacing:-.05em; margin-top:28px; }
.plan-period { font-size:12px; color:var(--text2); }
.plan-includes { padding-top:22px; margin-top:22px; border-top:1px solid var(--border); font-size:12px; color:var(--text2); line-height:2.3; }
.plan-card form { margin-top:auto; padding-top:24px; }
.checkout-note { display:flex; gap:14px; margin:30px auto 0; max-width:620px; color:var(--text2); font-size:12px; line-height:1.8; padding:20px; border:1px solid var(--border); border-radius:12px; }
.auth-showcase { isolation:isolate; border-right:1px solid var(--border); }
.auth-showcase .showcase-portrait { border-radius:44% 44% 14px 14px; border:1px solid var(--border-a); overflow:hidden; max-width:350px; margin:auto; background:#f3f4f6; }
.showcase-portrait img { display:block; width:100%; max-height:380px; object-fit:cover; object-position:center 22%; }
.auth-showcase .grid-bg { animation:contour-drift 30s ease-in-out infinite alternate; }
.auth-form-shell { width:100%; max-width:510px; }
.auth-form-shell h1 { font-size:36px; line-height:1.1; letter-spacing:-.045em; font-weight:600; }
.auth-progress { display:flex; align-items:center; gap:8px; margin-bottom:25px; color:var(--text2); font-size:10px; }
.auth-progress span { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--bg2); border:1px solid var(--border); }
.auth-progress span:first-child { background:var(--accent); color:white; border-color:var(--accent); }
.auth-progress i { flex:1; max-width:24px; height:1px; background:var(--border); }
.public-theme { position:absolute; top:18px; right:20px; z-index:101; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:78px; }
.password-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text2); font-size:10px; padding:8px; }
.table-scroll { overflow-x:auto; border-radius:16px; border:1px solid var(--border); background:var(--surface); }
.table-scroll table { min-width:700px; }
thead { font-size:10px; letter-spacing:.08em; }
th { font-weight:500; }
tbody tr { transition:background .2s; }
tbody tr:hover { background:var(--bg2); }
.empty-state { text-align:center; padding:55px 24px; }
.empty-state svg { display:block; margin:0 auto 20px; color:var(--gold); }
.empty-state h2 { font-size:20px; font-weight:500; margin-bottom:8px; }
.empty-state p { max-width:380px; margin:auto; font-size:13px; line-height:1.8; color:var(--text2); }
.empty-state a { margin-top:22px; }
.profile-banner { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:14px; margin-bottom:24px; }
.profile-avatar { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,#173759,#1a6fd4); color:#fff; font-size:22px; }
.profile-banner h2 { font-size:16px; font-weight:600; }
.profile-banner p { font-size:12px; color:var(--text2); margin-top:5px; overflow-wrap:anywhere; }
.profile-banner .badge { margin-left:auto; }
[data-theme="light"] .text-emerald-300 { color:#087654; }
[data-theme="light"] .text-amber-300 { color:#8c610c; }
[data-theme="light"] .text-red-300 { color:#b72b38; }
.bg-ocyan.text-obg { background:var(--accent); color:white; }
.bg-ocyan.text-obg:hover { background:#1153a5; }
.reveal { opacity:1; transform:none; }
.app-status.blocked { color:#d65454; }
.app-status.scheduled { color:#6d5bd0; }
.mobile-label { margin:14px 0 4px; font-size:9px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text3); }
.apps-link { display:flex; align-items:center; gap:14px; margin-top:22px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); transition:border-color .25s, transform .25s, box-shadow .25s; }
.apps-link:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 14px 34px -22px var(--gold); }
.apps-link > span:nth-child(2) { flex:1; min-width:0; }
.apps-link strong { display:block; font-size:14px; font-weight:600; }
.apps-link small { display:block; font-size:12px; color:var(--text2); margin-top:2px; }
.apps-link > svg { color:var(--gold); flex-shrink:0; transition:transform .25s; }
.apps-link:hover > svg { transform:translateX(3px); }
.apps-link-icons { display:flex; flex-shrink:0; }
.apps-link-icons i { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; font-style:normal; font-size:9px; font-weight:700; color:#fff; border:2px solid var(--surface2); }
.apps-link-icons i + i { margin-left:-8px; }
.apps-link-icons i:nth-child(1) { background:#1a6fd4; }
.apps-link-icons i:nth-child(2) { background:#f58220; }
.apps-link-icons i:nth-child(3) { background:#d4a030; }
@media (min-width:1280px) {
  .hub-sidebar { display:flex; flex-direction:column; position:fixed; left:0; top:69px; bottom:0; width:218px; padding:28px 18px; background:var(--nav-bg); border-right:1px solid var(--border); z-index:90; overflow-y:auto; }
  .hub-sidebar.is-staff { padding-top:22px; }
  .hub-sidebar.is-staff .sidebar-link { padding:10px 14px; margin-bottom:3px; }
  .hub-sidebar.is-staff .sidebar-footer { display:none; }
  .sidebar-label { font-size:9px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--text3); margin:0 14px 14px; }
  .sidebar-link { display:flex; align-items:center; gap:12px; padding:13px 14px; font-size:12px; color:var(--text2); border-radius:9px; margin-bottom:5px; }
  .sidebar-link:hover { background:var(--bg2); color:var(--text); }
  .sidebar-link.active { background:var(--blob-light); color:var(--text); font-weight:500; }
  .sidebar-link svg { width:17px; height:17px; color:var(--accent); }
  .sidebar-footer { margin-top:auto; padding:18px 12px 0; border-top:1px solid var(--border); font-size:11px; color:var(--text2); }
  .sidebar-footer strong { display:block; font-size:12px; color:var(--text); margin-bottom:7px; }
  .hub-authenticated .hub-workspace { padding:34px 38px 50px; width:calc(100% - 218px); max-width:1440px; margin-left:218px; margin-right:0; }
  .hub-authenticated > footer { margin-left:218px; }
  .hub-authenticated .nav-shell > div > div:nth-child(2) { display:none; }
}
@media (max-width:900px) { .app-grid { grid-template-columns:1fr; } .application-card { display:grid; grid-template-columns:180px 1fr; gap:0 22px; } .app-illustration { grid-row:1 / 5; margin:0; height:100%; min-height:175px; } .application-card .description { margin-bottom:12px; } .workspace-hero { padding:25px; } }
@media (max-width:640px) { .workspace-hero { grid-template-columns:1fr; } .workspace-art { display:none; } .workspace-stats { gap:8px; } .workspace-stat { padding:14px 10px; } .workspace-stat > span { font-size:8px; } .workspace-stat strong { font-size:23px; } .workspace-stat small { font-size:10px; } .workspace-guide { grid-template-columns:1fr; } .application-card { display:flex; } .app-illustration { height:170px; margin-bottom:18px; } .nav-shell > div:first-child { padding-inline:18px; } .plan-card { padding:24px; } .section-heading { flex-wrap:wrap; } .profile-banner .badge { margin-left:0; } }
@keyframes ambient-drift { to { transform:translate(80px,60px) scale(1.2); } }
@keyframes contour-drift { to { transform:translate(-20px,20px) rotate(4deg); } }
@keyframes orbit-turn { to { transform:rotate(360deg); } }
@keyframes node-float { to { transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }