:root{
  --bg:#06111d;
  --bg-soft:#0b1727;
  --surface:#0d1b2d;
  --surface-2:#10233a;
  --surface-3:#132b45;
  --line:rgba(130,177,217,.18);
  --line-strong:rgba(130,177,217,.28);
  --text:#f4f8fc;
  --muted:#9bb2c9;
  --muted-2:#7f98b2;
  --brand:#17a8e5;
  --brand-strong:#1190cb;
  --brand-soft:rgba(23,168,229,.14);
  --accent:#65d9ff;
  --success:#2bd59d;
  --danger:#ff7f8d;
  --shadow:0 18px 50px rgba(0,0,0,.34);
  --shadow-soft:0 10px 24px rgba(0,0,0,.22);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
  --radius-sm:14px;
  --container:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(23,168,229,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(101,217,255,.11), transparent 26%),
    linear-gradient(180deg, #04101a 0%, #081523 44%, #06111d 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
body.auth-page .app-shell,
body.dashboard-page .app-shell,
body.directory-page .app-shell{max-width:var(--container);margin:0 auto;padding:24px 20px 42px}
body.auth-page .site-footer,
body.dashboard-page .site-footer,
body.directory-page .site-footer{margin-top:24px}
.app-shell{position:relative}
.page{display:block}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:4px 0 20px;
}
.brand-link{display:flex;align-items:center;gap:14px;min-width:0;color:inherit}
.brand-logo-wrap{
  width:58px;height:58px;border-radius:18px;overflow:hidden;flex:0 0 58px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:var(--shadow-soft);
  display:grid;place-items:center;
}
.brand-logo{width:100%;height:100%;object-fit:contain;padding:8px}
.brand-logo-sm{padding:7px}
.brand-name{font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1}
.brand-tagline{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.35;max-width:320px}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill-balance,.icon-only-btn,.ghost-link,.segmented-link{
  min-height:44px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 14px;backdrop-filter:blur(10px);transition:.18s ease;
}
.pill-balance:hover,.icon-only-btn:hover,.ghost-link:hover,.segmented-link:hover{transform:translateY(-1px);border-color:var(--line-strong)}
.icon-only-btn{width:44px;padding:0}
.icon{width:22px;height:22px;flex:0 0 22px}
.icon-sm{width:18px;height:18px;flex:0 0 18px}
.brand-mark{
  width:92px;height:92px;border-radius:26px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid var(--line); box-shadow:var(--shadow-soft);margin-bottom:18px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
h1,h2,h3{margin:0 0 12px;line-height:1.05;letter-spacing:-.04em}
h1{font-size:clamp(38px,5vw,64px)}
h2{font-size:clamp(28px,3vw,40px)}
h3{font-size:20px}
.lead{font-size:18px;line-height:1.8;color:var(--muted);margin:0 0 18px}
.helper-text,.site-footer,.footer-links,.muted{color:var(--muted)}
.auth-layout{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);gap:28px;align-items:stretch}
.verify-layout{max-width:760px;margin:0 auto}
.auth-panel,.visual-panel,.card,.hero-panel,.progress-rail,.section-card,.directory-shell .hero-strip,.directory-grid .card{
  background:linear-gradient(180deg,rgba(15,31,50,.96),rgba(9,21,34,.97));
  border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow);
}
.auth-panel,.visual-card,.verify-panel,.section-card,.card{padding:30px}
.visual-card{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.auth-form{display:grid;gap:18px}
.form-card{padding:24px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));border:1px solid var(--line)}
.input-group{display:block}
.label{display:block;font-weight:800;margin:0 0 8px;color:var(--text)}
.input-wrap,.select-wrap select{
  display:flex;align-items:center;gap:12px;min-height:58px;padding:0 16px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);
  transition:.18s ease;
}
.input-wrap:focus-within,.select-wrap select:focus{outline:none;border-color:rgba(101,217,255,.5);box-shadow:0 0 0 4px rgba(23,168,229,.12)}
.input-wrap input,.select-wrap select{width:100%;border:0;background:transparent;color:var(--text);font-size:16px}
.input-wrap input::placeholder{color:var(--muted-2)}
.input-wrap input:focus{outline:none}
.input-group small,.helper-text{display:block;margin-top:8px;font-size:13px;line-height:1.7}
.checkbox-row{display:flex;align-items:flex-start;gap:12px;padding:2px 2px 2px 0;color:var(--muted);line-height:1.7}
.checkbox-row input{width:18px;height:18px;margin-top:4px;accent-color:var(--brand)}
.stack-lg,.checklist,.transaction-list,.mini-list{display:grid;gap:14px}
.form-grid{display:grid;gap:18px}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn{
  border:0;border-radius:18px;min-height:56px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:16px;cursor:pointer;transition:.18s ease;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(180deg,#57cfff 0%,#169ad8 100%);color:#04111d;box-shadow:0 16px 32px rgba(23,168,229,.30)}
.btn-secondary{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line)}
.btn-soft{background:var(--brand-soft);color:var(--accent);border:1px solid rgba(23,168,229,.22)}
.form-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:14px}
.flash-stack{display:grid;gap:12px;margin:0 0 18px}
.flash{padding:14px 16px;border-radius:16px;font-weight:700;border:1px solid transparent}
.flash-success{background:rgba(43,213,157,.10);color:#9ff3d2;border-color:rgba(43,213,157,.2)}
.flash-error{background:rgba(255,127,141,.10);color:#ffc0c8;border-color:rgba(255,127,141,.18)}
.flash-info{background:rgba(23,168,229,.12);color:#b9ecff;border-color:rgba(23,168,229,.22)}
.mini-badge,.progress-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--brand-soft);color:#b9ecff;font-weight:700;font-size:14px}
.hero-illustration{width:min(100%,420px);margin:0 auto}
.auth-highlights{display:grid;gap:14px}
.highlight-item{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.highlight-item p{margin:4px 0 0;color:var(--muted);line-height:1.7}
.highlight-icon,.quick-icon,.choice-icon,.transaction-icon,.mini-icon,.status-icon{
  width:46px;height:46px;border-radius:14px;background:var(--brand-soft);display:grid;place-items:center;color:var(--accent);flex:0 0 46px
}
.verify-panel{text-align:left}
.auth-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}
.verify-code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.verify-code input{
  text-align:center;font-size:24px;font-weight:800;letter-spacing:.08em;min-height:64px;padding:0;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text)
}
.verify-code input:focus{outline:none;border-color:rgba(101,217,255,.5);box-shadow:0 0 0 4px rgba(23,168,229,.12)}
.resend-wrap{display:flex;justify-content:center;margin-top:12px}
.dashboard-shell{display:grid;gap:22px}
.dashboard-hero{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:20px;padding:28px;
  background:
    radial-gradient(circle at top right, rgba(101,217,255,.14), transparent 28%),
    linear-gradient(135deg, rgba(23,168,229,.24), rgba(8,24,41,.92) 55%, rgba(8,24,41,.98));
  border-radius:32px;border:1px solid var(--line);box-shadow:var(--shadow);
}
.dashboard-copy p{max-width:720px}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.meta-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);font-size:13px}
.balance-card,.progress-card{padding:20px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.balance-label,.progress-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.balance-value{font-size:48px;font-weight:900;line-height:1;margin:10px 0;color:#b9ecff}
.balance-note,.progress-note{font-size:14px;color:var(--muted);line-height:1.7}
.progress-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:14px 0 10px}
.progress-bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#57cfff,#17a8e5)}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:20px}
.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.section-head p{margin:6px 0 0;color:var(--muted);line-height:1.7}
.link-inline{color:#b9ecff;font-size:13px;font-weight:800;white-space:nowrap}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.quick-card{padding:18px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.18s ease;display:flex;flex-direction:column;gap:12px}
.quick-card:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.quick-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.quick-arrow{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:grid;place-items:center;color:var(--text)}
.quick-title{font-size:18px;font-weight:800;margin:0;line-height:1.2}
.quick-desc{font-size:14px;color:var(--muted);line-height:1.7;margin:0}
.banner-card{padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03))}
.banner-inner{display:flex;gap:14px;align-items:flex-start}
.banner-title{margin:0 0 6px;font-size:19px;font-weight:800}
.banner-desc{margin:0;color:var(--muted);line-height:1.7;font-size:14px}
.banner-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mini-item,.check-item,.transaction-item{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.mini-title{margin:0 0 4px;font-size:15px;font-weight:800}
.mini-desc{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.status-badge{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;background:rgba(43,213,157,.12);color:#b3f4dc;border:1px solid rgba(43,213,157,.2)}
.check-item.done{border-color:rgba(43,213,157,.25)}
.site-footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:8px 4px 0;font-size:13px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.directory-hero{padding:28px}
.directory-hero p{max-width:740px}
.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.directory-card{padding:18px}
.directory-card h3{margin-bottom:8px}
.directory-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.directory-meta span{padding:8px 10px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted)}
@media (max-width: 1024px){
  .auth-layout,.dashboard-hero,.dashboard-grid,.directory-grid{grid-template-columns:1fr}
}
@media (max-width: 820px){
  body.auth-page .app-shell,body.dashboard-page .app-shell,body.directory-page .app-shell{padding:16px 14px 30px}
  .topbar{align-items:flex-start;flex-direction:column}
  .topbar-actions{width:100%}
  .pill-balance{flex:1;justify-content:center}
  .brand-name{font-size:20px}
  h1{font-size:clamp(34px,11vw,52px)}
  .lead{font-size:17px}
  .auth-panel,.visual-card,.verify-panel,.section-card,.card{padding:22px}
  .quick-grid,.form-grid.two,.verify-code,.directory-grid{grid-template-columns:1fr}
  .verify-code{display:grid;grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 560px){
  .brand-logo-wrap{width:50px;height:50px;flex-basis:50px}
  .brand-tagline{font-size:12px;max-width:none}
  .topbar-actions{gap:8px}
  .segmented-link,.ghost-link,.pill-balance{min-height:42px;padding:0 12px}
  .icon-only-btn{width:42px;height:42px}
  .btn{min-height:54px;font-size:15px}
  .dashboard-hero{padding:22px}
  .balance-value{font-size:40px}
  .site-footer{padding-top:0}
}

.nav {
    background: #06121c;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: white;
}

.brand img {
    width: 32px;
    height: 32px;
}

.nav-menu a {
    margin: 0 10px;
    color: #9fb3c8;
    text-decoration: none;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-name {
    color: #9fb3c8;
    margin-right: 10px;
}

.btn {
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #2ea6ff, #1f7dd6);
    color: white;
}

.btn-secondary {
    background: rgba(255,255,255,0.08);
    color: white;
}

.btn-ghost {
    color: #9fb3c8;
}

.menu-toggle {
    display: none;
    background: none;
    color: white;
    font-size: 22px;
    border: none;
}

.mobile-menu {
    display: none;
    flex-direction: column;
    padding: 12px;
    background: #06121c;
}

.mobile-menu.show {
    display: flex;
}

.mobile-menu a {
    padding: 10px 0;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logout {
    color: #ff6b6b;
}

/* MOBILE */
@media (max-width: 768px) {
    .desktop {
        display: none;
    }

    .menu-toggle {
        display: block;
    }
}