/* Howard workspace. Shares the landing palette without changing marketing styles. */
:root{--bg:#0c1511;--card:#14231a;--card2:#14231a;--line:#2c3d30;--text:#f1f4eb;--muted:#a9b3a7;--green:#c4f28b;--green2:#a6d871}
body{background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
[hidden]{display:none!important}
#app,#auth,#account-security-dialog{font-size:15px;line-height:1.6}
#app *,#auth *{min-width:0}
#app button,#app .button,#auth button,#account-security-dialog button{min-height:44px;border-radius:7px;font:600 14px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;padding:12px 18px;touch-action:manipulation}
#app button:disabled,#auth button:disabled{opacity:.55;cursor:wait}
#app button:hover:not(:disabled),#auth button:hover:not(:disabled){filter:brightness(1.08)}
#app :focus-visible,#auth :focus-visible,#account-security-dialog :focus-visible{outline:3px solid #c4f28b;outline-offset:4px}
#app a,#auth a{color:var(--green);text-underline-offset:4px}
#app input,#auth input{font:inherit;font-size:16px;min-height:48px;border-radius:7px;background:#0e1b13;border:1px solid #50624e;padding:12px 14px;color:var(--text)}
#app h1,#auth h2{font-weight:550;letter-spacing:-.045em;line-height:1.15}
#app h2{font-size:23px;font-weight:550;letter-spacing:-.035em;line-height:1.3;margin:7px 0 12px}
#app h3{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px}
#app p{margin:8px 0 16px}
#app .eyebrow,#auth .eyebrow{font:11px/1.7 ui-monospace,monospace;letter-spacing:.12em;font-weight:400}
#app .brand,#auth .brand{text-transform:lowercase;letter-spacing:-1.2px;font-size:26px;font-weight:750}
#app .brand i,#auth .brand i{background:var(--green);width:10px;height:10px}
#app.app{grid-template-columns:224px minmax(0,1fr);align-items:start}
#app .sidebar{height:100dvh;position:sticky;top:0;padding:32px 20px 20px;background:#0e1912;display:flex;flex-direction:column;border-color:var(--line)}
#app .sidebar .brand{padding:0 10px;margin:0 0 38px}
.workspace-label{display:block;font:10px ui-monospace,monospace;letter-spacing:.13em;color:#859580;margin:0 12px 14px;text-transform:uppercase}
#app .menu{display:grid;gap:7px}
#app .menu button{padding:13px 14px;border:1px solid transparent;font-weight:500;color:#abbba4;white-space:normal}
#app .menu button.active{background:#263923;border-color:#445b35;color:#d8fbb4}
.workspace-account{margin-top:auto;border-top:1px solid var(--line);padding-top:16px}
.workspace-account summary{cursor:pointer;min-height:44px;padding:9px 12px;color:#c8d1c2;font-size:13px}
.workspace-account button{width:100%;background:transparent;color:var(--muted);justify-content:flex-start;font-weight:400!important}
.workspace-help{font-size:12px;padding:12px;display:block;color:var(--muted)!important}
#app .content{padding:36px 42px 48px;max-width:1370px;margin:0 auto}
#app .content>.top{padding-bottom:24px;min-height:88px;margin-bottom:28px;align-items:center}
#app .top h1{font-size:29px;margin:6px 0 0}
#app .user{max-width:320px;line-height:1.5;border:0;background:#17251a;padding:8px 14px;font-size:12px}
#app .panel,#app .cost{border:1px solid var(--line);border-radius:12px;box-shadow:none;background:#14231a}
#app .panel{padding:26px}
#app .grid{gap:16px;margin:24px 0}
#app .stat{min-height:180px;display:flex;flex-direction:column;align-items:flex-start}
#app .stat:before{display:none}
#app .stat label{font-size:12px;font-weight:500;color:#b5c1ad}
#app .stat p{font-size:12px;margin:0;color:var(--muted)}
#app .metric{font-size:32px;font-weight:550;letter-spacing:-.045em;margin:14px 0 8px;line-height:1.3}
#app #plan{font-size:22px}
#app .stat button{margin-top:16px;font-size:12px;min-height:40px;padding:8px 12px}
#app .progress{width:100%;height:5px;margin:4px 0 12px;background:#31442b}
#app .progress i{background:var(--green)}
#app .badge{font-size:11px;font-weight:500;padding:5px 10px;border:1px solid #496344;background:#263c25;color:#d0f6ac;line-height:1.5;margin:12px 0}
#app .badge.warn{color:#f3d79b;border-color:#716140;background:#342d20}
#app .badge.error{color:#ffd0c5;border-color:#86524b;background:#3c2422}
.workspace-hero{border-bottom:1px solid var(--line);padding:4px 0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
#app .workspace-hero h2{font-size:clamp(28px,3vw,38px);line-height:1.12;max-width:570px;letter-spacing:-.045em;margin:12px 0}
.workspace-hero h2 em{font-style:normal;color:var(--green)}
.workspace-hero p{max-width:560px;color:var(--muted);font-size:14px}
.workspace-hero>.button{flex-shrink:0}
.workspace-home-lower{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;margin-top:20px}
.workspace-home-lower .panel{margin:0}
.workspace-quick{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 0;border-top:1px solid var(--line)}
.workspace-quick:first-of-type{margin-top:20px}
.workspace-quick strong{display:block;font-size:14px;font-weight:500}
.workspace-quick small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.workspace-quick button{font-size:12px!important}
.workspace-prompt{padding:14px 16px;margin:12px 0;background:#0f1b13;border-left:2px solid #66894b;color:#d1dfc6;font-size:13px;line-height:1.7}
.workspace-fineprint{font-size:12px;color:var(--muted);line-height:1.7}
#activation-card{background:#c4f28b!important;color:#253520;border-color:#c4f28b!important}
#activation-card .eyebrow,#activation-card .muted{color:#3c552e}
#activation-card button{background:#18291b;color:#f1f4eb}
.connection-intro{max-width:670px;margin-bottom:24px;color:var(--muted);font-size:14px}
.connection-tabs{display:flex;border-bottom:1px solid var(--line);gap:8px;margin-bottom:24px}
#app .connection-tabs button{background:transparent;color:var(--muted);border-radius:0;border-bottom:2px solid transparent;padding:14px 22px;font-weight:500}
#app .connection-tabs button[aria-selected=true]{color:var(--green);border-bottom-color:var(--green)}
.connection-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start}
.connection-side{padding:22px;border:1px solid var(--line);border-radius:12px;background:#101d15}
.connection-side h3{font-size:14px!important}
.connection-side p,.connection-side li{font-size:12px;color:var(--muted);line-height:1.8}
.connection-side ul{padding-left:17px;margin-bottom:0}
.connection-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.connection-heading .badge{margin:0!important;white-space:nowrap}
.connection-steps{list-style:none;counter-reset:setup;padding:0;margin:24px 0 0}
.connection-steps>li{counter-increment:setup;position:relative;padding:0 0 24px 43px;border-bottom:1px solid var(--line);margin-bottom:24px}
.connection-steps>li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.connection-steps>li::before{content:counter(setup,decimal-leading-zero);position:absolute;left:0;top:1px;color:#c4f28b;font:12px/1.7 ui-monospace,monospace}
.connection-steps p,.connection-steps li{font-size:13px;color:var(--muted)}
.connection-steps b,.connection-steps strong{color:#e6eddf;font-weight:550}
.connection-steps ul{padding-left:18px;margin:12px 0}
.connection-steps li li{margin:8px 0}
.connection-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0}
#app code{background:#253725;border:1px solid #3c5035;border-radius:4px;color:#d8f8b9;padding:2px 6px;font-size:12px;overflow-wrap:anywhere}
#app .field{margin:18px 0}
#app .field label{font-size:13px;font-weight:500}
.token-field{display:flex;gap:8px;align-items:stretch}
.token-field button{font-size:12px!important;min-width:76px}
.field-help{font-size:12px!important;margin:8px 0!important;color:var(--muted)}
.connection-status{font-size:13px;padding:14px 16px;border:1px solid #476138;border-radius:8px;background:#1e301e;margin-top:16px;overflow-wrap:anywhere}
.connection-status:empty{display:none}
.connection-status[data-error=true]{background:#34221f;border-color:#82514a;color:#ffd2c9}
.connection-disabled{padding:16px;background:#2f2a1b;border:1px solid #645537;border-radius:8px;color:#efd9a9;font-size:13px;margin:0 0 24px}
.connection-help{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}
.connection-help summary{font-size:13px;cursor:pointer;min-height:44px;display:flex;align-items:center}
.connection-help p{font-size:13px;color:var(--muted);line-height:1.75}
.connection-help details{margin:4px 0}
.qr-frame{margin:20px 0;padding:20px;background:#fff;color:#172318;border-radius:10px;text-align:center}
.qr-frame canvas{display:block;width:min(100%,300px);height:auto;margin:auto;image-rendering:pixelated}
.qr-frame p{font-size:12px;color:#485b41!important;margin:12px 0 0!important}
.qr-explanation{font-size:12px;color:#d6dcb5;padding:14px;border-left:2px solid #80954b;background:#242c1b;margin-top:18px}
#auth .wrap{max-width:1200px}
#auth .nav{height:92px;border-bottom:1px solid var(--line)}
#auth .auth{max-width:900px;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:72px;margin:72px auto}
.auth-story{padding-top:20px}
.auth-story h1{font-size:43px;line-height:1.12;letter-spacing:-.05em;font-weight:550;margin:20px 0}
.auth-story h1 span{color:var(--green)}
.auth-story p{font-size:14px;color:var(--muted);line-height:1.85}
.auth-story .workspace-prompt{margin-top:28px}
#auth .auth-card{background:#14231a;border:1px solid var(--line);border-radius:12px;box-shadow:none;padding:30px}
#auth h2{font-size:28px;margin:12px 0 24px}
#auth form>button{width:100%;margin-top:8px}
#auth .auth-card>button{width:100%}
#auth .auth-card>p{font-size:13px}
#signup-form .purchase-summary{background:#0f1c13;border-color:#3c5035;padding:16px}
#signup-form .purchase-summary strong{font-size:18px}
#signup-form .purchase-summary p{font-size:12px}
#account-security-dialog{max-height:90dvh;overflow:auto}
#account-security-dialog button:focus-visible{outline-color:#365627}
.notice{max-width:min(430px,calc(100vw - 32px));font-weight:500;line-height:1.6;z-index:50;box-shadow:0 8px 24px #0004;visibility:hidden}
.notice.show{visibility:visible}
#app .costs{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#app .cost{padding:22px}
#app .cost span{font-size:11px;font-weight:500;letter-spacing:.05em}
#app .cost strong{font-size:25px;overflow-wrap:anywhere;font-weight:550}
#app table{font-size:13px}
#app th{font-weight:500}
#app .table{border-radius:8px;max-width:100%;overscroll-behavior-x:contain}
#app .finance-toolbar{margin-bottom:20px}
#app .finance-filter input{color-scheme:dark}
@media(max-width:1100px){#app .content{padding:28px}.connection-layout{grid-template-columns:minmax(0,1fr)}.connection-side{display:grid;grid-template-columns:1fr 1fr;gap:20px}.workspace-hero{display:block}.workspace-hero>.button{margin-top:10px}#app .grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app .stat:last-child{grid-column:1/-1}.workspace-home-lower{grid-template-columns:1fr}.auth-story h1{font-size:37px}}
@media(max-width:760px){
 #app.app{display:block}#app .sidebar{height:auto;position:sticky;top:0;z-index:10;padding:14px 18px 0;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;background:#0e1912}
 #app .sidebar .brand{padding:0;margin:0;font-size:24px}.workspace-label{display:none}
 #app .menu{grid-column:1/-1;grid-row:2;display:flex;max-width:none;overflow:visible;gap:4px;order:2}
 #app .menu button{flex:1;justify-content:center;font-size:13px;padding:12px 6px;border:0;border-radius:0;border-bottom:2px solid transparent}
 #app .menu button.active{background:transparent;border-color:var(--green);color:var(--green)}
 .workspace-account{grid-column:2;grid-row:1;margin:0;padding:0;border:0;position:relative}.workspace-account summary{padding:7px 12px;min-height:40px;border:1px solid var(--line);border-radius:7px}
 .workspace-account[open] .account-options{position:absolute;right:0;top:48px;width:210px;padding:10px;background:#1a2a1c;border:1px solid #526544;border-radius:8px;box-shadow:0 10px 24px #0005;z-index:20}
 #app .workspace-account button{padding:12px}.workspace-help{padding:12px}#app .content{padding:26px 20px 36px}
 #app .content>.top{margin-bottom:24px;min-height:0;padding-bottom:20px;display:block}#app .top h1{font-size:26px}#app .user{padding:0;background:none;border:0;max-width:100%;margin-top:12px;font-size:12px}
 #app .workspace-hero h2{font-size:32px}#app .workspace-hero p{font-size:13px}.workspace-hero{padding-bottom:24px}
 #app .grid{grid-template-columns:1fr;gap:12px;margin:20px 0}#app .stat{min-height:0;padding:20px}#app .stat:last-child{grid-column:auto}#app .metric{font-size:30px;margin:10px 0}
 #app .panel{padding:22px 20px}#app h2{font-size:23px}.workspace-home-lower{gap:16px}.workspace-quick{gap:12px}.workspace-quick button{padding:10px 12px!important}
 .connection-intro{font-size:13px}.connection-tabs{margin-bottom:20px}.connection-tabs button{flex:1;padding-inline:12px!important}
 .connection-layout{gap:16px}.connection-side{display:block;padding:20px}.connection-side>div+div{margin-top:20px}
 .connection-heading{display:block}.connection-heading .badge{margin-top:8px!important}
 .connection-steps>li{padding-left:30px}.connection-steps p{font-size:13px}.connection-steps h3{font-size:16px!important}.connection-actions{align-items:stretch}.connection-actions .button,.connection-actions button{flex-grow:1;text-align:center}
 .qr-frame{padding:12px}.token-field{display:block}.token-field button{margin-top:8px}.qr-explanation{line-height:1.7}
 #app .costs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#app .cost{padding:16px}#app .cost strong{font-size:21px}#app .cost small{font-size:11px}
 #app .finance-filter{gap:12px}#app .finance-filter label{flex:1 1 100px}#app .finance-filter button{width:100%}
 #auth .nav{height:76px}#auth .auth{display:block;margin:32px auto;max-width:440px}#auth .auth-story{display:none}#auth .auth-card{padding:26px 22px}#auth .wrap{padding:0 20px}
 .notice{right:16px;bottom:max(16px,env(safe-area-inset-bottom));font-size:13px}
}
@media(max-width:380px){#app .finance-filter label{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){#app *,#auth *, .notice{transition:none!important;scroll-behavior:auto!important}}