@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#0b1020;--panel:#111a2e;--panel2:#15213a;--line:#263550;--text:#edf3ff;--muted:#91a0ba;--mint:#83f0c5;--blue:#7aa8ff;--danger:#ff9eaa}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.hidden{display:none!important}.brand{display:flex;align-items:center;gap:11px;font:700 20px 'Space Grotesk',sans-serif;letter-spacing:-.6px}.brand-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:linear-gradient(145deg,var(--mint),#53bda8);color:#0a1721;font-size:13px;letter-spacing:-1px}.brand-accent{color:var(--mint)}.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;max-width:1440px;margin:auto}.auth-art{position:relative;overflow:hidden;padding:clamp(28px,5vw,76px);display:flex;flex-direction:column;background:radial-gradient(ellipse at 70% 45%,#203d53 0,transparent 40%),linear-gradient(150deg,#101a30,#0b1020 70%)}.auth-art:before,.auth-art:after{content:"";position:absolute;border:1px solid #36506955;border-radius:50%;width:520px;height:520px;right:-130px;top:23%;box-shadow:0 0 0 50px #20344a22,0 0 0 100px #20344a14}.auth-art:after{width:300px;height:300px;right:-20px;top:34%;border-color:#83f0c544;box-shadow:0 0 0 36px #83f0c511}.art-copy{position:relative;z-index:1;margin:auto 0;max-width:570px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:700;color:var(--mint);text-transform:uppercase}.art-copy h1{font:600 clamp(38px,5vw,68px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-2.6px;margin:20px 0}.art-copy h1 span{color:var(--mint)}.art-copy p{color:#a9b7ce;line-height:1.8;max-width:440px;font-size:15px}.art-bottom{display:flex;align-items:center;gap:10px;color:#a8b8cb;font-size:9px;letter-spacing:1.6px;position:relative;z-index:1}.pulse{width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px var(--mint)}.art-line{height:1px;width:45px;background:#3a506a}.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,6vw,90px);background:#0d1425;border-left:1px solid #1d2a40}.auth-heading{margin-bottom:28px}.auth-heading h2{font:600 34px 'Space Grotesk',sans-serif;letter-spacing:-1px;margin:10px 0}.auth-heading p{color:var(--muted);font-size:13px;line-height:1.7}.auth-panel form{display:flex;flex-direction:column}.auth-panel label{font-size:12px;color:#c7d2e4;margin:15px 0 8px}.auth-panel input,.field{width:100%;background:#111d31;border:1px solid #293952;color:var(--text);border-radius:12px;padding:14px 15px;outline:none;min-width:0}.auth-panel input:focus,.field:focus{border-color:var(--mint);box-shadow:0 0 0 3px #83f0c51a}.btn{border:1px solid transparent;border-radius:11px;padding:11px 15px;font-weight:700;cursor:pointer;transition:.18s}.btn:disabled{opacity:.55;cursor:wait}.btn.primary{background:var(--mint);color:#0b1720}.btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}.btn.secondary{background:#17243a;border-color:#2c3d56;color:#e2eaf8}.btn.danger{background:#321e2b;border-color:#5d3443;color:#ffc4ce}.btn.full{margin-top:17px;width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 17px}.auth-message{font-size:12px;color:var(--danger);line-height:1.6;margin-top:10px;overflow-wrap:anywhere}.switch-line{display:flex;gap:8px;align-items:center;margin-top:22px;color:var(--muted);font-size:12px}.switch-line button{background:none;border:0;color:var(--mint);font-weight:700;cursor:pointer}.auth-foot{border-top:1px solid #1d2a40;margin-top:48px;padding-top:18px;color:#63738d;font-size:10px;letter-spacing:.5px}.auth-foot span{padding:0 8px;color:var(--mint)}.mobile-brand{display:none}
.app-shell{min-height:100vh}.topbar{height:76px;border-bottom:1px solid #1c2a41;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,54px);background:#0d1425;gap:14px}.top-actions{display:flex;align-items:center;gap:10px}.demo-badge{font-size:9px;letter-spacing:1.4px;font-weight:700;color:var(--mint);border:1px solid #2c6659;background:#15352f;padding:7px 9px;border-radius:7px}.user-chip{font-size:12px;color:#c7d3e6;max-width:180px;overflow:hidden;text-overflow:ellipsis}.nav-wrap{display:flex;gap:5px;padding:0 clamp(18px,4vw,54px);border-bottom:1px solid #1c2a41;background:#0d1425;overflow-x:auto}.nav-link{white-space:nowrap;display:flex;align-items:center;gap:9px;padding:15px 14px;color:#92a2bc;font-size:12px;border-bottom:2px solid transparent}.nav-link.active{color:var(--mint);border-color:var(--mint)}.page{max-width:1320px;margin:auto;padding:32px clamp(18px,4vw,54px) 70px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:25px}.page-head h1{font:600 clamp(28px,4vw,38px) 'Space Grotesk',sans-serif;letter-spacing:-1.3px;margin:8px 0}.page-head p{color:var(--muted);font-size:13px;margin:0;line-height:1.6}.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;background:#142d2b;border:1px solid #28564c;border-radius:8px;color:var(--mint);font-size:10px;font-weight:700}.layout-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:17px}.card{background:linear-gradient(145deg,#121e33,#10192b);border:1px solid #26364f;border-radius:17px;padding:22px;min-width:0}.card h2,.card h3{font-family:'Space Grotesk',sans-serif;margin:0 0 12px}.muted{color:var(--muted);font-size:12px;line-height:1.7}.balance{font:600 clamp(32px,5vw,45px) 'Space Grotesk',sans-serif;letter-spacing:-1.7px;margin:10px 0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:23px}.stat{background:#0c1526;border:1px solid #202f47;border-radius:12px;padding:14px}.stat span{display:block;color:var(--muted);font-size:10px;line-height:1.5}.stat strong{display:block;font:600 18px 'Space Grotesk',sans-serif;margin-top:8px}.section{margin-top:28px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.section-title h2{font:600 20px 'Space Grotesk',sans-serif;margin:0}.link-button{background:none;border:0;color:var(--mint);font-size:12px;font-weight:700;cursor:pointer}.machines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.machine{background:#121e33;border:1px solid #283851;border-radius:16px;padding:19px;display:flex;flex-direction:column;min-width:0}.machine.free{border-color:#326b5a}.machine.gold{background:linear-gradient(145deg,#25233a,#121e33);border-color:#62568c}.machine-icon{width:46px;height:46px;display:grid;place-items:center;background:#1e3047;border-radius:14px;font-size:23px}.tier{color:var(--mint);font-size:9px;font-weight:700;letter-spacing:1.7px;margin-top:17px}.machine h3{font:600 19px 'Space Grotesk',sans-serif;margin:7px 0}.price{font:600 23px 'Space Grotesk',sans-serif;margin:6px 0}.note{font-size:10px;color:var(--muted);line-height:1.7}.machine ul{padding-left:18px;color:#b7c5d9;font-size:11px;line-height:2;margin:15px 0 20px}.machine-actions{display:grid;gap:8px;margin-top:auto}.tools{display:flex;gap:10px;margin-bottom:17px}.tools .field{max-width:260px}.activity{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #223149}.activity:last-child{border:0}.activity b{font-size:12px}.activity small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.activity strong{font-size:12px}.empty{padding:30px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed #30415b;border-radius:12px}.notice{padding:13px 15px;background:#1b293b;border:1px solid #34465c;border-radius:11px;color:#c0cfe2;font-size:11px;line-height:1.7}.profile-row{display:flex;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #24324a;font-size:12px}.profile-row span{color:var(--muted)}.profile-row strong{overflow-wrap:anywhere;text-align:right}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:23px 0}.detail-stat{background:#0d1729;border:1px solid #25354e;padding:14px;border-radius:11px}.detail-stat span{display:block;color:var(--muted);font-size:10px}.detail-stat strong{display:block;font-size:14px;margin-top:8px}.footer{text-align:center;color:#62718b;font-size:10px;padding:20px;border-top:1px solid #1c2a41}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#d4fff0;color:#09221b;padding:12px 18px;border-radius:10px;font-size:12px;font-weight:700;transition:.2s;z-index:9}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:850px){.auth-wrap{grid-template-columns:1fr}.auth-art{display:none}.auth-panel{border:0;min-height:100vh;padding:28px clamp(22px,7vw,60px)}.mobile-brand{display:flex;margin-bottom:auto;padding-bottom:50px}.auth-heading{margin-top:auto}.auth-foot{margin-top:35px}.layout-grid{grid-template-columns:1fr}.machines{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.topbar{height:66px;padding:0 14px}.topbar .brand{font-size:17px}.brand-mark{width:34px;height:34px}.demo-badge{display:none}.user-chip{max-width:100px;font-size:10px}.top-actions .btn{padding:8px 10px;font-size:11px}.nav-wrap{padding:0 8px}.nav-link{padding:13px 10px;font-size:11px}.page{padding:25px 14px 50px}.card{padding:17px}.machines{grid-template-columns:1fr}.stats{gap:6px}.stat{padding:10px}.stat strong{font-size:15px}.tools{flex-direction:column}.tools .field{max-width:none}.page-head{align-items:flex-start;flex-direction:column}.auth-heading h2{font-size:30px}}

/* Mobile refinement v2: tighter spacing and reliable horizontal navigation */
@media(max-width:520px){
  .topbar{padding:0 12px;gap:8px}
  .top-actions{gap:6px}
  .top-actions .user-chip{max-width:86px}
  .nav-wrap{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .nav-link{flex:0 0 auto;padding:12px 9px;gap:6px}
  .page{padding:20px 12px 38px}
  .page-head{gap:12px;margin-bottom:18px}
  .page-head h1{font-size:31px;margin:6px 0}
  .page-head p{font-size:12px}
  .page-head .pill{font-size:9px;padding:7px 9px}
  .layout-grid{gap:12px}
  .card{padding:15px;border-radius:14px}
  .balance{font-size:36px;margin:7px 0}
  .stats{margin-top:16px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .stat{padding:9px 8px;border-radius:10px}
  .stat span{font-size:9px}
  .stat strong{font-size:14px;margin-top:6px}
  .tools{gap:8px}
  .tools .btn{width:100%}
  .section{margin-top:21px}
  .section-title h2{font-size:18px}
  .machine{padding:16px}
  .machine h3{font-size:18px}
  .detail-grid{gap:7px}
  .detail-stat{padding:11px}
  .detail-stat strong{font-size:12px}
  .profile-row{align-items:flex-start;font-size:11px}
  .profile-row strong{max-width:58%}
  .footer{padding:16px 12px;font-size:9px}
}

.machine-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.active-badge{display:inline-flex;align-items:center;gap:5px;background:#153a32;border:1px solid #347b67;color:#83f0c5;border-radius:8px;padding:7px 9px;font-size:9px;font-weight:700;letter-spacing:1px;white-space:nowrap}.machine-active{border-color:#347b67;box-shadow:inset 0 0 0 1px #83f0c51a}.machine-actions .btn:disabled{opacity:1;color:#83f0c5;border-color:#347b67;background:#15352f;cursor:default}

/* Status clarity patch */
.machine-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.active-badge{display:inline-flex;align-items:center;gap:5px;background:#153a32;border:1px solid #347b67;color:#83f0c5;border-radius:8px;padding:7px 9px;font-size:9px;font-weight:700;letter-spacing:1px;white-space:nowrap}
.machine-active{border-color:#347b67;box-shadow:inset 0 0 0 1px #83f0c51a}
.machine-actions .btn:disabled{opacity:1;color:#83f0c5;border-color:#347b67;background:#15352f;cursor:default}
.toast{left:auto;right:14px;bottom:18px;transform:translateY(10px);max-width:calc(100vw - 28px);width:max-content;white-space:normal;text-align:left;border:1px solid #347b67;box-shadow:0 8px 30px #0005}
.toast.show{transform:translateY(0)}

.status-pending{display:inline-flex;align-items:center;background:#2a2b35;border:1px solid #555466;color:#c2c5d2;border-radius:8px;padding:7px 9px;font-size:9px;font-weight:700;letter-spacing:1px;white-space:nowrap}
.detail-active{color:#83f0c5}.detail-pending{color:#c2c5d2}
.activation-info{display:flex;flex-direction:column;gap:6px;margin:0 0 22px;padding:15px;background:#102b28;border:1px solid #2e6658;border-radius:12px}
.activation-info span{color:#83f0c5;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.activation-info strong{font-size:14px}.activation-info small{font-size:10px;color:#a4b9b4;line-height:1.6}

/* Final stability and layout pass */
.machine-card-top{min-height:46px}
.detail-top .machine-card-top{margin-bottom:12px}
.auth-message{overflow-wrap:anywhere}
@media(max-width:520px){
 .page-head{padding-top:4px}
 .page-head h1{line-height:1.12}
 .page-head .pill{align-self:flex-start}
 .topbar{position:relative}
 .nav-wrap{position:relative;z-index:2}
 .machine-card-top{min-height:44px}
}