@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');

:root{
  color-scheme:light;
  --bg:#f1efe8;--bg-soft:#e9e6dd;--surface:#f8f6ef;--surface-2:#dedbd1;
  --surface-glass:rgba(241,239,232,.88);--line:rgba(7,7,7,.18);--line-strong:rgba(7,7,7,.58);
  --text:#070707;--muted:#53534f;--dim:#76766e;--green:#164dff;--green-strong:#164dff;
  --red:#ef4234;--amber:#d97706;--blue:#164dff;--violet:#6842d9;--sidebar:252px;
  --radius:0;--shadow:none;--acid:#c8ff16;--paper:#f1efe8;--ink:#070707;
  --font-sans:Manrope,Arial,sans-serif;--font-mono:'DM Mono',monospace;--font-serif:'Playfair Display',serif;
}

body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:14px}
body:before{background:none}
body:after{z-index:50;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");background-size:180px 180px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.app-shell{background:var(--paper)}
.sidebar{padding:28px 18px 20px;border-color:rgba(255,255,255,.2);background:#070707;color:#fff;backdrop-filter:none}
.brand{padding:0 8px 30px;gap:13px;border-bottom:1px solid rgba(255,255,255,.2)}
.brand-mark{width:44px;height:44px;border-radius:50%;background:var(--acid);color:#070707;box-shadow:none;font:500 20px var(--font-mono)}
.brand-copy strong{font:500 15px var(--font-sans);letter-spacing:-.03em}.brand-copy span{color:#8f8f89;font:9px var(--font-mono);letter-spacing:.13em}
.side-nav{gap:0;margin-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.nav-link{min-height:52px;padding:12px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.2);border-radius:0;color:#aaa;font:400 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;transition:.2s}
.nav-link:hover{color:#fff;background:transparent;padding-left:10px}
.nav-link.active{color:#fff;border-color:rgba(255,255,255,.2);background:transparent;box-shadow:none}
.nav-link.active:after{content:"↗";margin-left:auto;color:var(--acid)}
.nav-icon{font-size:15px;width:22px;height:22px}
.profile-card{padding:16px 5px 0;border-color:rgba(255,255,255,.2)}
.profile-avatar{border-radius:50%;border-color:rgba(255,255,255,.25);background:#fff;color:#070707}
.profile-meta strong{font-weight:500}.profile-meta span{color:#777;font:9px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}
.logout-button{border-radius:0;color:#888;font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.logout-button:hover{color:#fff;background:transparent}
.mobile-bar{height:68px;border-color:rgba(255,255,255,.2);background:#070707;color:#fff;backdrop-filter:none}.mobile-brand{font:500 12px var(--font-mono);letter-spacing:.08em}.mobile-brand .brand-mark{border-radius:50%}.menu-button{border-radius:50%;border-color:rgba(255,255,255,.5);background:transparent}

.app-main{padding:clamp(34px,5vw,74px) clamp(24px,4vw,64px) 80px;background:var(--paper)}
.content{width:min(1380px,100%)}
.page-head{align-items:flex-end;margin-bottom:46px;padding-bottom:28px;border-bottom:1px solid #111}
.eyebrow{color:#555;font:400 10px var(--font-mono);letter-spacing:.15em;margin-bottom:13px}
.page-title{font-size:clamp(48px,7vw,104px);font-weight:500;line-height:.82;letter-spacing:-.072em;text-transform:uppercase}
.page-title:after{content:"*";color:var(--blue);font-family:var(--font-serif);font-style:italic;margin-left:.05em}
.page-subtitle{max-width:660px;color:#454541;font-size:17px;line-height:1.42;margin-top:20px}
.page-actions{gap:8px}

.button{min-height:43px;padding:10px 16px;border:1px solid #111;border-radius:999px;background:transparent;color:#111;font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;transition:.2s}
.button:hover{background:#111;color:#fff;transform:none}
.button.primary{background:#164dff;color:#fff;border-color:#164dff}.button.primary:hover{background:#070707;border-color:#070707}
.button.danger{border-color:#ef4234;color:#c22f25;background:transparent}.button.danger:hover{background:#ef4234;color:#fff}
.button.sm{min-height:36px;font-size:9px}
.status-pill{border:1px solid #111;background:transparent;color:#111;border-radius:999px;padding:9px 13px;font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.status-dot{background:#49be6b;box-shadow:none}.status-pill.warn,.status-pill.bad{background:transparent;color:#111;border-color:#111}

.section{margin-top:50px}.section-head{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #111}
.section-title{font-size:clamp(22px,2.4vw,36px);font-weight:500;letter-spacing:-.045em}.section-kicker{color:#555;font:400 9px var(--font-mono);letter-spacing:.14em}
.panel{border:1px solid #111;background:transparent;border-radius:0;padding:clamp(20px,2.5vw,34px)}
.panel+.panel{margin-top:-1px}.panel-head{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #111}
.panel-title{font-size:clamp(21px,2vw,30px);font-weight:500;letter-spacing:-.04em}.panel-subtitle{color:#555;font-size:13px}
.alert{border-radius:0;background:transparent}.alert.success{color:#176b33;background:rgba(73,190,107,.08)}.alert.error{color:#b5221b;background:rgba(239,66,52,.08)}.alert.warning{color:#805000;background:rgba(217,119,6,.08)}

.input,.select,.textarea,input[type="text"],input[type="password"],input[type="file"],select,textarea{border:0;border-bottom:1px solid #111;background:transparent;color:#111;border-radius:0;padding:13px 2px}
.input:focus,.select:focus,.textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:0}
.field label,.field-label{color:#333;font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.field-hint{color:#777;font:10px var(--font-mono)}
.password-toggle{color:#555;border-radius:50%}.password-toggle:hover{color:#111;background:#dedbd1}
.search-wrap:before{color:#555}.search-input{height:46px;border:1px solid #111;border-radius:999px;background:transparent;color:#111}.search-input::placeholder{color:#777}
.check-label{border-color:#777;border-radius:0;color:#333;background:transparent}.check-label:hover{border-color:#111;color:#111}.check-label input{accent-color:var(--blue)}

.metric-grid{gap:0;border-top:1px solid #111;border-left:1px solid #111}
.metric-card{border:0;border-right:1px solid #111;border-bottom:1px solid #111;background:transparent;border-radius:0;padding:22px;min-height:150px}
.metric-label{color:#555;font:400 9px var(--font-mono);letter-spacing:.13em}.metric-value{font-size:clamp(32px,4vw,62px);font-weight:400;letter-spacing:-.06em}.metric-note{color:#555}
.progress{height:4px;border-radius:0;background:#cbc8bf}.progress i{border-radius:0;background:var(--blue)}
.progress.warn i{background:#d97706}.progress.bad i{background:#ef4234}

.finops-grid{gap:0;border-top:1px solid #111;border-left:1px solid #111}.finops-source{border:0;border-right:1px solid #111;border-bottom:1px solid #111;border-radius:0;background:transparent;padding:24px}.source-title{padding-bottom:14px;border-bottom:1px solid #111}.source-title h2{font-size:22px;font-weight:500;letter-spacing:-.04em}.source-line{color:#555}.source-line b{color:#111}.token-list{gap:0;border-top:1px solid #111;border-left:1px solid #111}.token-item{border:0;border-right:1px solid #111;border-bottom:1px solid #111;border-radius:0;background:transparent;padding:16px}.usage-row-head,.token-meta{color:#555}

.user-list{gap:0;border-top:1px solid #111}.user-card{border:0;border-bottom:1px solid #111;background:transparent;border-radius:0}.user-card[open]{background:#e7e4da;border-color:#111}.user-summary{padding:19px 12px}.user-summary:hover{background:#e7e4da}.user-identity span,.user-chevron{color:#666}.role-tag,.state-tag{border-color:#777;border-radius:999px;color:#333;font:9px var(--font-mono);text-transform:uppercase}.state-tag.active{color:#176b33;border-color:#176b33;background:transparent}.user-body{border-color:#111;padding:24px 12px}
.details{border-color:#111;border-radius:0;background:transparent}.details+.details{margin-top:-1px}.details summary{font-weight:500}.details-content{border-color:#111}
.data-table-wrap{border-color:#111;border-radius:0}.data-table th,.data-table td{border-color:#aaa}.data-table th{color:#555;font:400 9px var(--font-mono)}.data-table td{color:#333}.data-table tbody tr:hover{background:#e7e4da}
.code-box,pre{background:#070707;border:0;border-radius:0;color:#eee;font-family:var(--font-mono)}

.agent-hero{border:1px solid #111;border-radius:0;padding:clamp(24px,4vw,54px);background:transparent;position:relative;isolation:isolate}
.agent-hero:after{content:"";position:absolute;right:0;top:0;width:36%;height:100%;z-index:-1;background:url('/static/agent-still-life.png') center/cover no-repeat;filter:grayscale(1);opacity:.18}
.agent-hero h1{max-width:850px;font-size:clamp(48px,7vw,102px);font-weight:500;line-height:.84;letter-spacing:-.07em;text-transform:uppercase}.agent-hero p{color:#444;font-size:16px}
.agent-meta-grid{gap:0;border-top:1px solid #111;border-left:1px solid #111}.agent-meta{border:0;border-right:1px solid #111;border-bottom:1px solid #111;border-radius:0;background:transparent;padding:18px}.agent-meta span{color:#666;font:9px var(--font-mono)}
.processing-box{border-color:#176b33;background:rgba(73,190,107,.08);border-radius:0;color:#124d27}.processing-steps{color:#176b33}

.auth-page{grid-template-columns:minmax(0,1.28fr) minmax(420px,.72fr);background:#070707;color:#fff}
.auth-visual{padding:clamp(34px,5vw,78px);isolation:isolate}
.auth-visual:before{background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.72) 48%,rgba(5,5,5,.12)),url('/static/agent-constellation.png') center right/cover no-repeat}
.auth-brand{font-weight:500}.auth-brand .brand-mark{background:var(--acid);color:#070707;border-radius:50%}
.auth-copy h1{font-size:clamp(56px,8.5vw,136px);line-height:.8;font-weight:500;letter-spacing:-.08em;text-transform:uppercase}.auth-copy h1:after{content:"*";color:var(--acid);font-family:var(--font-serif);font-style:italic}
.auth-copy p{color:#c4c4be;max-width:530px}.auth-chip{border-color:rgba(255,255,255,.55);background:transparent;border-radius:999px;color:#ddd;font:9px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.auth-panel{border-color:rgba(255,255,255,.2);background:#f1efe8;color:#070707}
.auth-card h2{font-size:clamp(38px,4vw,58px);font-weight:500;line-height:.9;letter-spacing:-.06em;text-transform:uppercase}.auth-card>p{color:#555}.auth-panel .eyebrow{color:#666}.auth-panel .field label{color:#333}.auth-panel .input{color:#111;border-color:#111}.auth-panel .field-hint{color:#666}

@media(max-width:900px){
  .sidebar{box-shadow:30px 0 80px rgba(0,0,0,.4)}.sidebar-overlay{background:rgba(0,0,0,.68)}
  .app-main{padding:36px 20px 60px}.page-head{align-items:flex-start}.page-actions{width:auto}
  .auth-page{grid-template-columns:1fr}.auth-visual{min-height:58vh}.auth-panel{border-left:0;border-top:1px solid #111}
}
@media(max-width:620px){
  .page-title{font-size:48px}.page-head{margin-bottom:30px}.page-actions{width:100%}.page-actions .button{flex:1}
  .metric-card{min-height:125px}.metric-grid{grid-template-columns:1fr 1fr}.agent-hero h1{font-size:48px}.agent-hero:after{width:55%}
  .auth-visual{min-height:52vh}.auth-copy h1{font-size:54px}.auth-panel{padding:38px 22px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}