:root{
    /* ---- Light theme (v3) ----
       Variable NAMES kept the same as before so every existing component
       rule re-themes automatically from this one block. --emerald stays the
       gold accent (works on both light and dark pages since gold-background
       components carry their own dark text already). */
    --ink:#172033;
    --ink-soft:#3F4A5C;
    --paper:#FFFFFF;
    --canvas:#F7F8FC;
    --line:#E5E7EB;
    --line-strong:#D0D5DD;
    --emerald:#C99A2E;
    --emerald-soft:#FBF3DF;
    --gold-deep:#A87B1E;
    --gold-bright:#E0B043;
    --violet:#5B4FE0;
    --violet-soft:#EEECFC;
    --amber:#B3760F;
    --amber-soft:#FBF0DD;
    --success:#1B8A5A;
    --success-soft:#E3F5EC;
    --error:#D3352E;
    --error-soft:#FBEAE9;
    --muted:#667085;
    --radius-lg:22px;
    --radius-md:14px;
    --radius-sm:9px;
    --shadow-card: 0 1px 2px rgba(23,32,51,0.04), 0 8px 24px -12px rgba(23,32,51,0.14);
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--canvas);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
  }
  img,svg{display:block;}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2px solid var(--violet);outline-offset:2px;}

  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  .wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px;}

  /* ---------- Top nav ---------- */
  .topnav{
    position:sticky;top:0;z-index:40;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topnav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-0.01em;}
  .brand-mark{
    width:34px;height:34px;border-radius:10px;
    background:var(--emerald);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .brand-mark svg{width:18px;height:18px;}
  .nav-links{display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500;}
  .nav-links a{text-decoration:none;color:var(--ink-soft);}
  .nav-links a:hover{color:var(--ink);}
  .nav-actions{display:flex;align-items:center;gap:12px;}
  .app-nav-links{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;}
  .app-nav-links button{background:none;border:none;color:var(--muted);padding:8px 12px;border-radius:8px;}
  .app-nav-links button.active{background:var(--canvas);color:var(--ink);}
  .app-nav-links button:hover{color:var(--ink);}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-weight:600;font-size:14.5px;
    padding:11px 20px;border-radius:10px;border:1px solid transparent;
    text-decoration:none;transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
    white-space:nowrap;
  }
  .btn:active{transform:translateY(1px);}
  .btn-primary{background:var(--emerald);color:#0A0C10;}
  .btn-primary:hover{background:var(--gold-deep);}
  .btn-emerald{background:var(--emerald);color:#0A0C10;}
  .btn-emerald:hover{background:var(--gold-deep);}
  .btn-on-gold{background:#0A0C10;color:var(--gold-bright);}
  .btn-on-gold:hover{background:#1a1d24;}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
  .btn-ghost:hover{background:var(--canvas);}
  .btn-text{background:none;color:var(--ink-soft);padding:8px 4px;}
  .btn-sm{padding:8px 14px;font-size:13.5px;}
  .btn-block{width:100%;}
  .btn[disabled]{opacity:.5;cursor:not-allowed;}

  /* ---------- Screens ---------- */
  .screen{display:none;}
  .screen.active{display:block;}

  /* ---------- Hero ---------- */
  .hero{
    padding:88px 0 72px;
    background:
      radial-gradient(ellipse 900px 480px at 50% -10%, rgba(201,154,46,0.10) 0%, rgba(201,154,46,0) 60%),
      linear-gradient(180deg, #FFFFFF 0%, var(--canvas) 100%);
    position:relative;
    overflow:hidden;
  }
  .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;margin-top:40px;}
  .eyebrow-tag{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13.5px;font-weight:600;color:var(--emerald);
    background:var(--emerald-soft);padding:7px 14px;border-radius:100px;margin-bottom:22px;
  }
  .eyebrow-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);}
  h1.headline{
    font-family:var(--font-display);font-weight:500;
    font-size:52px;line-height:1.15;letter-spacing:-0.015em;margin:0 0 22px;
    max-width:20ch;
  }
  .hero-sub{font-size:17px;color:var(--ink-soft);line-height:1.65;max-width:52ch;margin:0 0 32px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
  .hero-note{font-size:13.5px;color:var(--muted);max-width:44ch;}

  .preview-card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-card);overflow:hidden;
  }
  .preview-card-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
  .preview-card-head .title{font-weight:600;font-size:15px;}
  .badge{
    font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:100px;letter-spacing:0.01em;
  }
  .badge-illustrative{background:var(--violet-soft);color:var(--violet);}
  .badge-live{background:var(--emerald-soft);color:var(--emerald);}
  .badge-pending{background:var(--amber-soft);color:var(--amber);}
  .badge-neutral{background:var(--canvas);color:var(--muted);border:1px solid var(--line);}

  .mini-opp{padding:16px 22px;border-bottom:1px solid var(--line);}
  .mini-opp:last-child{border-bottom:none;}
  .mini-opp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px;}
  .mini-opp-title{font-weight:600;font-size:14.5px;}
  .mini-opp-meta{font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;}
  .mini-opp-reward{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--emerald);white-space:nowrap;}

  /* ---------- Sections ---------- */
  section{padding:76px 0;}
  .section-head{max-width:640px;margin:0 0 44px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-kicker{font-size:14px;font-weight:600;color:var(--emerald);margin:0 0 10px;}
  h2.section-title{font-family:var(--font-display);font-size:34px;font-weight:500;letter-spacing:-0.01em;margin:0 0 14px;line-height:1.15;}
  .section-desc{color:var(--muted);font-size:16px;}

  .steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
  .step{background:var(--paper);padding:28px 24px;}
  .step-num{
    counter-increment:step;
    font-family:var(--font-display);font-size:26px;color:var(--line-strong);margin-bottom:14px;
  }
  .step-num::before{content:counter(step);}
  .step h3{font-size:16px;margin:0 0 8px;font-weight:600;}
  .step p{margin:0;font-size:14px;color:var(--muted);}

  .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .cat-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;transition:border-color .15s;}
  .cat-card:hover{border-color:var(--line-strong);}
  .cat-icon{width:38px;height:38px;border-radius:10px;background:var(--canvas);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .cat-icon svg{width:19px;height:19px;color:var(--ink-soft);}
  .cat-card h3{font-size:15.5px;margin:0 0 6px;font-weight:600;}
  .cat-card p{font-size:13.5px;color:var(--muted);margin:0;}

  .opp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .opp-card{
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);
  }
  .opp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
  .opp-cat{font-size:12.5px;color:var(--muted);font-weight:500;}
  .opp-title{font-size:16.5px;font-weight:600;margin:2px 0 0;line-height:1.3;}
  .opp-desc{font-size:13.5px;color:var(--muted);margin:0;flex:1;}
  .opp-meta-row{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line);}
  .opp-reward{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--emerald);}
  .opp-time{font-size:12.5px;color:var(--muted);}

  .banner-note{
    display:flex;align-items:flex-start;gap:12px;
    background:var(--violet-soft);border:1px solid #DCD8F7;border-radius:var(--radius-md);
    padding:16px 18px;font-size:13.5px;color:#3f3499;margin-bottom:28px;
  }
  .banner-note.amber{background:var(--amber-soft);border-color:#EFDCB0;color:#7A5209;}
  .banner-note svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;}

  .benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;}
  .benefit{display:flex;gap:16px;}
  .benefit-icon{width:40px;height:40px;border-radius:10px;background:var(--emerald);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .benefit-icon svg{width:18px;height:18px;color:#fff;}
  .benefit h3{font-size:15.5px;margin:0 0 6px;font-weight:600;}
  .benefit p{font-size:13.5px;color:var(--muted);margin:0;}

  .trust-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;list-style:none;padding:0;margin:0;}
  .trust-list li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-soft);}
  .trust-list svg{width:18px;height:18px;color:var(--emerald);flex-shrink:0;margin-top:2px;}

  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    width:100%;text-align:left;background:none;border:none;padding:20px 0;
    display:flex;justify-content:space-between;align-items:center;font-size:15.5px;font-weight:600;color:var(--ink);
  }
  .faq-q svg{width:16px;height:16px;color:var(--muted);flex-shrink:0;transition:transform .15s;}
  .faq-item.open .faq-q svg{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease;}
  .faq-item.open .faq-a{max-height:240px;}
  .faq-a p{margin:0 0 20px;color:var(--muted);font-size:14.5px;max-width:64ch;}

  .cta-band{background:linear-gradient(135deg, var(--gold-bright) 0%, var(--emerald) 55%, var(--gold-deep) 100%);border-radius:var(--radius-lg);padding:56px 48px;text-align:center;}
  .cta-band h2{font-family:var(--font-display);color:#0A0C10;font-size:30px;font-weight:500;margin:0 0 12px;}
  .cta-band p{color:#3A2E10;margin:0 0 28px;font-size:15.5px;}

  footer{border-top:1px solid var(--line);padding:52px 0 32px;background:var(--paper);}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px;}
  .footer-col h4{font-size:13px;color:var(--muted);margin:0 0 14px;font-weight:600;}
  .footer-col a{display:block;font-size:14px;color:var(--ink-soft);text-decoration:none;margin-bottom:10px;}
  .footer-col a:hover{color:var(--ink);}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px;}

  /* ---------- Auth ---------- */
  .auth-shell{min-height:calc(100vh - 72px);display:flex;align-items:center;justify-content:center;padding:56px 24px;}
  .auth-card{width:100%;max-width:440px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-card);}
  .auth-card h1{font-family:var(--font-display);font-size:26px;font-weight:500;margin:0 0 8px;}
  .auth-card .sub{color:var(--muted);font-size:14.5px;margin:0 0 28px;}
  .field{margin-bottom:18px;}
  .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;}
  .field input,.field select,.field textarea{
    width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:9px;
    font-size:14.5px;font-family:inherit;background:var(--canvas);color:var(--ink);
  }
  .field input::placeholder,.field textarea::placeholder{color:var(--muted);}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--emerald);}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;font-size:13.5px;color:var(--muted);}
  .check-row input{margin-top:3px;}
  .auth-foot{text-align:center;margin-top:22px;font-size:14px;color:var(--muted);}
  .auth-foot button{background:none;border:none;color:var(--violet);font-weight:600;text-decoration:underline;}

  /* ---------- App shell ---------- */
  .app-shell{display:none;background:var(--canvas);min-height:calc(100vh - 72px);}
  .app-shell.active{display:block;}
  .app-header{padding:36px 0 0;}
  .app-title{font-family:var(--font-display);font-size:28px;font-weight:500;margin:0 0 6px;}
  .app-sub{color:var(--muted);font-size:14.5px;margin:0 0 28px;}

  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
  .stat-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;}
  .stat-label{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .stat-value{font-family:var(--font-display);font-size:28px;font-weight:600;}
  .stat-hint{font-size:12px;color:var(--muted);margin-top:4px;}

  .panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;margin-bottom:24px;}
  .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
  .panel-head h3{font-size:16px;margin:0;font-weight:600;}

  .progress-track{height:8px;background:var(--line);border-radius:100px;overflow:hidden;margin:10px 0 6px;}
  .progress-fill{height:100%;background:var(--emerald);border-radius:100px;width:0%;}
  .progress-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);}

  .empty-state{text-align:center;padding:48px 20px;color:var(--muted);}
  .empty-state svg{width:36px;height:36px;margin:0 auto 14px;color:var(--line-strong);}
  .empty-state p{margin:0;font-size:14px;max-width:38ch;margin:0 auto;}

  .grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;}

  .filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
  .chip{
    padding:8px 16px;border-radius:100px;border:1px solid var(--line-strong);background:var(--paper);
    font-size:13.5px;font-weight:500;color:var(--ink-soft);
  }
  .chip.active{background:var(--emerald);color:#0A0C10;border-color:var(--emerald);}

  .table{width:100%;border-collapse:collapse;font-size:14px;}
  .table th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);}
  .table td{padding:14px 12px;border-bottom:1px solid var(--line);}
  .table tr:last-child td{border-bottom:none;}

  .app-footer-space{height:80px;}

  /* Opportunity detail overlay */
  .overlay{position:fixed;inset:0;background:rgba(14,27,43,0.4);z-index:60;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;}
  .overlay.active{display:flex;}
  .detail-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);max-width:600px;width:100%;padding:0;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,0.6);}
  .detail-head{padding:28px 30px 20px;border-bottom:1px solid var(--line);}
  .detail-body{padding:26px 30px;}
  .detail-close{position:absolute;top:20px;right:20px;background:var(--canvas);border:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;}
  .detail-row:last-child{border-bottom:none;}
  .detail-row .k{color:var(--muted);}
  .detail-row .v{font-weight:600;}
  .disclosure-box{background:var(--canvas);border-radius:var(--radius-sm);padding:14px 16px;font-size:13px;color:var(--muted);margin-top:18px;}

  /* Admin */
  .admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
  .integration-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);}
  .integration-row:last-child{border-bottom:none;}
  .integration-left{display:flex;align-items:center;gap:14px;}
  .integration-icon{width:38px;height:38px;border-radius:9px;background:var(--emerald);display:flex;align-items:center;justify-content:center;color:#0A0C10;font-family:var(--font-display);font-weight:600;font-size:15px;}
  .status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;}
  .status-dot.off{background:var(--line-strong);}
  .status-dot.on{background:var(--emerald);}

  /* Toggle switch */
  .switch{position:relative;display:inline-block;width:38px;height:22px;}
  .switch input{opacity:0;width:0;height:0;}
  .slider-el{position:absolute;cursor:pointer;inset:0;background:var(--line-strong);border-radius:100px;transition:.15s;}
  .slider-el::before{content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:var(--ink);border-radius:50%;transition:.15s;}
  .switch input:checked + .slider-el{background:var(--emerald);}
  .switch input:checked + .slider-el::before{transform:translateX(16px);}

  @media (max-width: 860px){
    .hero-grid{grid-template-columns:1fr;}
    h1.headline{font-size:38px;}
    .steps{grid-template-columns:1fr 1fr;}
    .cat-grid{grid-template-columns:1fr 1fr;}
    .opp-grid{grid-template-columns:1fr;}
    .benefits-grid{grid-template-columns:1fr;}
    .trust-list{grid-template-columns:1fr;}
    .stat-grid{grid-template-columns:1fr 1fr;}
    .admin-grid{grid-template-columns:1fr 1fr;}
    .grid-2{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .nav-links{display:none;}
    .field-row{grid-template-columns:1fr;}
  }

/* ---- Additions for the real app ---- */
.badge-live-real{background:var(--emerald-soft);color:var(--emerald);}
.toast{position:fixed;bottom:24px;right:24px;background:var(--paper);border:1px solid var(--emerald);color:var(--ink);padding:14px 20px;border-radius:10px;font-size:14px;box-shadow:0 12px 30px -8px rgba(0,0,0,0.5);z-index:100;max-width:320px;display:none;}
.toast.show{display:block;}
.field-error{color:var(--error);font-size:13px;margin-top:-10px;margin-bottom:14px;display:none;}
.field-error.show{display:block;}
.loading-row{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;padding:20px 0;}
.spinner{width:16px;height:16px;border:2px solid var(--line-strong);border-top-color:var(--violet);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ================================================================
   V2 polish: smoothness, richer opportunity cards, mobile tab bar,
   contact page, keyword emphasis. No fabricated stats/logos added —
   only real data gets rendered through these classes.
   ================================================================ */

/* Smooth screen transitions */
.screen, .app-shell{ opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease; }
.screen.active, .app-shell.active{ opacity:1; transform:translateY(0); }
* { scroll-behavior:smooth; }

/* Emphasis span for hero/keyword highlighting */
.emphasis{ color:var(--emerald); font-family:var(--font-display); font-style:italic; }

/* Card lift on hover — used across opp-card, cat-card, stat-card */
.opp-card, .cat-card, .stat-card, .panel{ transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.opp-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -16px rgba(14,27,43,0.22); border-color:var(--line-strong); }
.cat-card:hover{ transform:translateY(-2px); }
.btn{ transition:transform .12s ease, box-shadow .12s ease, background .15s ease, opacity .12s ease; }

/* Redesigned opportunity card internals */
.opp-card-head{ display:flex; align-items:center; gap:12px; }
.opp-icon{ width:44px; height:44px; border-radius:12px; object-fit:cover; background:var(--canvas); border:1px solid var(--line); flex-shrink:0; }
.opp-icon-fallback{ width:44px; height:44px; border-radius:12px; background:var(--emerald); color:#0A0C10; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:16px; flex-shrink:0; }
.opp-cat-chip{ display:inline-block; font-size:11px; font-weight:600; padding:3px 9px; border-radius:100px; background:var(--violet-soft); color:var(--violet); margin-bottom:4px; }
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--emerald); display:inline-block; margin-right:6px; animation:pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ box-shadow:0 0 0 0 rgba(14,124,87,0.45);} 50%{ box-shadow:0 0 0 5px rgba(14,124,87,0);} }
.opp-reward-pill{
  font-family:var(--font-display); font-weight:600; font-size:15px; color:#0A0C10;
  background:var(--emerald); padding:5px 12px; border-radius:100px; white-space:nowrap;
}

/* Skeleton loaders (replace bare spinner text on first load) */
.skeleton-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); padding:22px; }
.skeleton-line{ height:12px; border-radius:6px; background:linear-gradient(90deg, var(--line) 25%, #EEF0F3 37%, var(--line) 63%); background-size:400% 100%; animation:skeleton-shimmer 1.4s ease infinite; margin-bottom:10px; }
.skeleton-line.short{ width:40%; }
.skeleton-line.tall{ height:20px; width:70%; }
@keyframes skeleton-shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* Old bottom tab-bar / top app-nav pattern — removed in favor of the
   sidebar + mobile drawer layout above. Kept out entirely to avoid dead
   CSS confusing future edits. */

/* Contact page reuses .auth-card, plus a success state */
.contact-success{ text-align:center; padding:30px 10px; }
.contact-success svg{ width:40px; height:40px; color:var(--success); margin:0 auto 14px; }

/* Category icon color variants (icon tint only — no third-party logos) */
.cat-icon.c-blue{ background:#E7F0FE; } .cat-icon.c-blue svg{ color:#2563EB; }
.cat-icon.c-violet{ background:var(--violet-soft); } .cat-icon.c-violet svg{ color:var(--violet); }
.cat-icon.c-emerald{ background:var(--emerald-soft); } .cat-icon.c-emerald svg{ color:var(--emerald); }
.cat-icon.c-amber{ background:var(--amber-soft); } .cat-icon.c-amber svg{ color:var(--amber); }
.cat-icon.c-rose{ background:#FCE8EC; } .cat-icon.c-rose svg{ color:#C0295A; }
.cat-icon.c-teal{ background:#E4F6F4; } .cat-icon.c-teal svg{ color:#0E7C77; }

/* Fade-in-on-scroll (landing sections) */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---- Boot overlay: covers the page until we know the real login state ---- */
.boot-overlay{
  position:fixed; inset:0; z-index:200; background:var(--canvas);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .3s ease;
}
.boot-overlay.fade-out{ opacity:0; pointer-events:none; }
.boot-mark{
  width:52px;height:52px;border-radius:14px;background:var(--emerald);
  display:flex;align-items:center;justify-content:center;
}
.boot-mark svg{width:26px;height:26px;}
.boot-spinner{
  width:22px;height:22px;border:3px solid var(--line-strong);border-top-color:var(--emerald);
  border-radius:50%;animation:spin .7s linear infinite;
}

/* ---- Landing page welcome banner (top of hero) — compact, integrated card,
   not a giant disconnected pill. Label / main message / supporting line. ---- */
.welcome-banner{
  display:flex; flex-direction:column; gap:4px;
  background:var(--paper); border:1px solid var(--emerald-soft);
  box-shadow:0 0 0 1px rgba(212,168,67,0.06), 0 8px 20px -12px rgba(0,0,0,0.5);
  border-radius:var(--radius-md);
  padding:14px 20px; margin:32px auto 0; max-width:560px;
}
.welcome-banner-label{
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--emerald);
}
.welcome-banner-main{
  font-size:15px; font-weight:600; color:var(--ink); line-height:1.4;
}
.welcome-banner-sub{
  font-size:13px; color:var(--muted); line-height:1.5;
}
@media (max-width:640px){
  .welcome-banner{ margin:24px 0 0; max-width:100%; padding:12px 16px; }
}

/* ---- Responsive: 3-column stat/step grids used on the landing page ---- */
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-3-steps{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr;}
  .grid-3-steps{grid-template-columns:1fr;}
}
@media (min-width:641px) and (max-width:860px){
  .grid-3{grid-template-columns:repeat(3,1fr);gap:10px;}
}

/* ---- Defensive: prevent any accidental horizontal scroll at very narrow
   widths (320px+) — long unbroken strings (emails, wallet addresses,
   long tracking URLs shown as text) must wrap, never force page-width ---- */
html, body{ overflow-x:hidden; max-width:100vw; }
.detail-row .v, .opp-desc, .stat-value, td{ overflow-wrap:anywhere; word-break:break-word; }
@media (max-width:375px){
  .wrap, .wrap-narrow{ padding:0 16px; }
  h1.headline{ font-size:32px; }
  .stat-value{ font-size:22px; }
}

/* ---- Header: prevent overflow/clipping at narrow widths (320-375px) ----
   Confirmed by measurement: brand + full-length buttons overflow by ~120px
   at 320px without this. Short label + tighter sizing closes that gap. */
.label-short{ display:none; }
@media (max-width:480px){
  .label-full{ display:none; }
  .label-short{ display:inline; }
  .brand{ font-size:17px; gap:7px; }
  .brand-mark{ width:28px; height:28px; border-radius:8px; }
  .brand-mark svg{ width:15px; height:15px; }
  .nav-actions{ gap:6px; }
  .nav-actions .btn{ padding:8px 12px; font-size:13px; }
  .nav-actions .btn-text{ padding:6px 6px; }
  .topnav .wrap{ padding:0 16px; }
  #appUserName{ display:none; } /* name is redundant with the dashboard's own greeting; dropping it guarantees no overflow regardless of name length */
}

/* ================================================================
   App layout v3: left sidebar (desktop) + slide-in drawer (mobile)
   + compact top header, replacing the old top-nav/tab-bar pattern.
   ================================================================ */

.field-success{ color:var(--success); font-size:13px; margin-top:-10px; margin-bottom:14px; display:none; }

.app-layout{ display:flex; min-height:100vh; }

/* ---- Sidebar (acts as the drawer content on mobile) ---- */
.app-sidebar{
  width:248px; flex-shrink:0; background:var(--paper); border-right:1px solid var(--line);
  display:flex; flex-direction:column; height:100vh; position:sticky; top:0;
}
.sidebar-top{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 16px; }
.sidebar-top .brand{ font-size:19px; }
.drawer-close{ display:none; background:none; border:none; color:var(--muted); padding:6px; border-radius:8px; }

.sidebar-nav{ display:flex; flex-direction:column; gap:2px; padding:8px 12px; flex:1; overflow-y:auto; }
.sidebar-nav button{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:none; border-radius:10px; padding:11px 12px;
  font-size:14.5px; font-weight:500; color:var(--ink-soft); cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.sidebar-nav button svg{ width:19px; height:19px; flex-shrink:0; }
.sidebar-nav button:hover{ background:var(--canvas); color:var(--ink); }
.sidebar-nav button.active{ background:var(--emerald-soft); color:var(--gold-deep); font-weight:600; }
.sidebar-nav button.active svg{ color:var(--gold-deep); }
.sidebar-nav button:focus-visible{ outline:2px solid var(--emerald); outline-offset:-2px; }

.sidebar-bottom{ padding:12px; border-top:1px solid var(--line); }
.sidebar-logout{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:none; border-radius:10px; padding:11px 12px;
  font-size:14.5px; font-weight:500; color:var(--error); cursor:pointer;
}
.sidebar-logout:hover{ background:var(--error-soft); }
.sidebar-logout svg{ width:19px; height:19px; }

/* ---- Main content area beside the sidebar ---- */
.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.app-topheader{
  display:none; /* shown on mobile only, below */
  align-items:center; gap:12px; height:64px; padding:0 16px;
  background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30;
}
.hamburger-btn{ background:none; border:none; color:var(--ink); padding:6px; border-radius:8px; flex-shrink:0; }
.hamburger-btn:hover{ background:var(--canvas); }
.app-topheader-brand{ font-size:17px; flex:1; }
.app-topheader-user{ display:flex; align-items:center; gap:8px; }
.app-topheader-name{ font-size:13px; color:var(--muted); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-avatar{
  width:30px; height:30px; border-radius:50%; background:var(--emerald); color:#0A0C10;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.app-content{ flex:1; }

/* ---- Mobile drawer behavior ---- */
.drawer-overlay{ display:none; }
@media (max-width:860px){
  .app-layout{ display:block; }
  .app-topheader{ display:flex; }
  .app-sidebar{
    position:fixed; top:0; left:0; z-index:70; width:280px; max-width:82vw;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,0.25);
  }
  .app-sidebar.open{ transform:translateX(0); }
  .drawer-close{ display:flex; align-items:center; justify-content:center; }
  .drawer-overlay{
    display:none; position:fixed; inset:0; background:rgba(23,32,51,0.45); z-index:60;
  }
  .drawer-overlay.open{ display:block; }
  .app-main{ width:100%; }
}