:root{--surface-background: #0E0E0E;--surface-container: #191919;--surface-emphasized: #000000;--surface-inverse: #FFFFFF;--on-surface-background: #FFFFFF;--on-surface-container: #FFFFFF;--on-surface-emphasized: #FFFFFF;--on-surface-inverse: #000000;--primary: #E3C07C;--on-primary: #000000;--status-red: #FF0000;--on-status-red: #FFFFFF;--status-green: #00D659;--on-status-green: #000000;--alpha-high: .8;--alpha-muted: .6;--alpha-disabled: .4;--space-xxxs: 2px;--space-xxs: 4px;--space-xs: 8px;--space-s: 12px;--space-m: 16px;--space-l: 24px;--space-xl: 32px;--space-xxl: 48px;--space-xxxl: 64px;--radius-zero: 0px;--radius-xs: 2px;--radius-s: 4px;--radius-m: 6px;--radius-l: 8px;--radius-circle: 700px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;--title-screen-size: 26px;--title-screen-weight: 700;--title-screen-line: 32px;--title-large-size: 20px;--title-large-weight: 700;--title-large-line: 24px;--title-size: 16px;--title-weight: 700;--title-line: 18px;--body-large-size: 16px;--body-large-weight: 400;--body-large-line: 20px;--body-size: 14px;--body-weight: 400;--body-line: 18px;--label-size: 10px;--label-weight: 400;--label-line: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);font-size:var(--body-size);font-weight:var(--body-weight);line-height:var(--body-line);background-color:var(--surface-background);color:var(--on-surface-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}.page{min-height:100vh;display:flex;flex-direction:column}.hero{text-align:center;padding:var(--space-xxxl) var(--space-m) var(--space-xl)}.hero h1{font-size:var(--title-screen-size);font-weight:var(--title-screen-weight);line-height:var(--title-screen-line);color:var(--on-surface-background)}.hero .accent{color:var(--primary)}.tagline{font-size:var(--body-large-size);line-height:var(--body-large-line);color:var(--on-surface-background);opacity:var(--alpha-muted);margin-top:var(--space-s);max-width:480px;margin-left:auto;margin-right:auto}footer{margin-top:auto;padding:var(--space-l) var(--space-m);text-align:center;font-size:var(--label-size);color:var(--on-surface-background);opacity:var(--alpha-disabled)}.auth-container{display:flex;justify-content:center;padding:0 var(--space-m)}.auth-card{width:100%;max-width:400px;background:var(--surface-container);border-radius:var(--radius-l);padding:var(--space-xl)}.auth-description{font-size:var(--body-size);line-height:var(--body-line);color:var(--on-surface-container);opacity:var(--alpha-muted);margin-bottom:var(--space-l)}.auth-description strong{color:var(--primary);opacity:1}.form-group{margin-bottom:var(--space-m)}.form-group label{display:block;font-size:var(--body-size);font-weight:var(--title-weight);color:var(--on-surface-container);opacity:var(--alpha-high);margin-bottom:var(--space-xxs)}.form-group input{width:100%;padding:var(--space-s) var(--space-m);background:var(--surface-background);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-m);color:var(--on-surface-background);font-family:var(--font-family);font-size:var(--body-size);outline:none;transition:border-color .15s}.form-group input:focus{border-color:var(--primary)}.form-group input::placeholder{color:var(--on-surface-background);opacity:var(--alpha-disabled)}.auth-message{margin-top:var(--space-m);padding:var(--space-s) var(--space-m);border-radius:var(--radius-m);font-size:var(--body-size)}.auth-message.error{background:#ff00001a;color:var(--status-red)}.auth-message.success{background:#00d6591a;color:var(--status-green)}.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:var(--space-s) var(--space-l);border:none;border-radius:var(--radius-m);font-family:var(--font-family);font-size:var(--body-size);font-weight:var(--title-weight);cursor:pointer;transition:opacity .15s}.btn:hover{opacity:var(--alpha-high)}.btn:disabled{opacity:var(--alpha-disabled);cursor:not-allowed}.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-secondary{background:transparent;color:var(--on-surface-container);opacity:var(--alpha-muted);border:1px solid rgba(255,255,255,.1);margin-top:var(--space-xs)}.btn-secondary:hover{opacity:var(--alpha-high)}.btn-danger{background:transparent;color:var(--status-red);border:1px solid rgba(255,0,0,.2)}.btn-danger:hover{background:#ff00001a;opacity:1}.btn-small{width:auto;padding:var(--space-xxs) var(--space-s);font-size:var(--label-size)}.dashboard{max-width:800px;margin:0 auto;padding:var(--space-l) var(--space-m)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xl)}.dashboard-header h1{font-size:var(--title-large-size);font-weight:var(--title-large-weight);line-height:var(--title-large-line)}.dashboard-header .user-email{font-size:var(--body-size);color:var(--on-surface-background);opacity:var(--alpha-muted)}.section{margin-bottom:var(--space-xl)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-m)}.section-header h2{font-size:var(--title-size);font-weight:var(--title-weight);line-height:var(--title-line)}.keys-list{display:flex;flex-direction:column;gap:var(--space-xs)}.key-item{display:flex;align-items:center;justify-content:space-between;background:var(--surface-container);padding:var(--space-m);border-radius:var(--radius-l)}.key-info{display:flex;flex-direction:column;gap:var(--space-xxxs)}.key-prefix{font-family:var(--font-mono);font-size:var(--body-size);color:var(--on-surface-container)}.key-meta{display:flex;gap:var(--space-s);font-size:var(--label-size);color:var(--on-surface-container);opacity:var(--alpha-muted)}.plan-badge{display:inline-flex;padding:var(--space-xxxs) var(--space-xs);border-radius:var(--radius-s);font-size:var(--label-size);font-weight:var(--title-weight);text-transform:uppercase;letter-spacing:.5px}.plan-badge.basic{background:#e3c07c26;color:var(--primary)}.plan-badge.pro{background:#00d65926;color:var(--status-green)}.plan-badge.enterprise{background:#ffffff1a;color:var(--on-surface-container)}.plan-badge.inactive{background:#ff00001a;color:var(--status-red)}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-m)}@media(max-width:640px){.plans-grid{grid-template-columns:1fr}}.plan-card{background:var(--surface-container);border-radius:var(--radius-l);padding:var(--space-l);display:flex;flex-direction:column;border:1px solid transparent;transition:border-color .15s}.plan-card.current{border-color:var(--primary)}.plan-card h3{font-size:var(--title-size);font-weight:var(--title-weight);margin-bottom:var(--space-xxs)}.plan-price{font-size:var(--title-large-size);font-weight:var(--title-large-weight);color:var(--primary);margin-bottom:var(--space-xs)}.plan-price span{font-size:var(--body-size);font-weight:var(--body-weight);opacity:var(--alpha-muted)}.plan-limit{font-size:var(--body-size);color:var(--on-surface-container);opacity:var(--alpha-muted);margin-bottom:var(--space-m)}.plan-card .btn{margin-top:auto}.usage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-m)}@media(max-width:640px){.usage-stats{grid-template-columns:1fr}}.stat-card{background:var(--surface-container);border-radius:var(--radius-l);padding:var(--space-l)}.stat-label{font-size:var(--label-size);color:var(--on-surface-container);opacity:var(--alpha-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--space-xxs)}.stat-value{font-size:var(--title-large-size);font-weight:var(--title-large-weight);color:var(--on-surface-container)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-m)}.modal{background:var(--surface-container);border-radius:var(--radius-l);padding:var(--space-xl);width:100%;max-width:480px}.modal h3{font-size:var(--title-size);font-weight:var(--title-weight);margin-bottom:var(--space-m)}.modal-key{font-family:var(--font-mono);font-size:var(--body-size);background:var(--surface-background);padding:var(--space-s) var(--space-m);border-radius:var(--radius-m);word-break:break-all;margin-bottom:var(--space-s);color:var(--primary)}.modal-warning{font-size:var(--body-size);color:var(--status-red);opacity:var(--alpha-high);margin-bottom:var(--space-m)}.modal-actions{display:flex;gap:var(--space-xs)}.modal-actions .btn{width:auto;flex:1}.empty-state{text-align:center;padding:var(--space-xl);color:var(--on-surface-background);opacity:var(--alpha-muted);font-size:var(--body-size)}.loading{text-align:center;padding:var(--space-l);color:var(--on-surface-background);opacity:var(--alpha-muted)}.hidden{display:none!important}