/* SHOUT UI v2 — visual-only skin. Application IDs, routes and handlers stay untouched. */
:root{
  --ui-ink:#171a16;
  --ui-ink-2:#252a24;
  --ui-paper:#f4f5ef;
  --ui-surface:#ffffff;
  --ui-surface-2:#ecefe6;
  --ui-line:#dfe3d8;
  --ui-muted:#71786d;
  --ui-acid:#dfff25;
  --ui-acid-strong:#c8ec00;
  --ui-radius:18px;
  --ui-shadow:0 18px 48px rgba(26,32,22,.09);
}

/* Brand and public entry */
#landing{
  --bg:var(--ui-paper);
  --panel:var(--ui-surface);
  --panel2:var(--ui-surface-2);
  --text:var(--ui-ink);
  --muted:var(--ui-muted);
  --line:var(--ui-line);
  --acid:var(--ui-acid-strong);
  color:var(--ui-ink);
  background:
    radial-gradient(circle at 82% 3%,rgba(201,236,0,.2),transparent 32%),
    radial-gradient(circle at -8% 72%,rgba(115,157,255,.08),transparent 34%),
    linear-gradient(180deg,#fafbf7 0,var(--ui-paper) 52%,#eef1e8 100%);
}
#landing .landing-nav{
  padding-top:28px;
  border-bottom:1px solid rgba(23,26,22,.07);
}
#landing .logo,.side-logo .logo{font-weight:950;letter-spacing:-3px}
#landing .landing-copy h1{font-size:clamp(48px,6.4vw,78px);line-height:.93;letter-spacing:-.065em}
#landing .landing-copy h1 em{color:var(--ui-ink);text-decoration:underline;text-decoration-color:var(--ui-acid);text-decoration-thickness:.19em;text-underline-offset:-.08em;text-decoration-skip-ink:none}
#landing .landing-copy>p{line-height:1.52;color:var(--ui-muted)}
#landing .eyebrow{color:#747c6f}
#landing .btn{border-radius:999px;padding-inline:20px;box-shadow:none}
#landing .btn.secondary{background:#171a16;color:#fff;border-color:#171a16}
#landing .btn.ghost{background:#fff;color:var(--ui-ink);border-color:var(--ui-line)}
#landing .pill{background:#fff;color:var(--ui-ink);border-color:var(--ui-line)}
#landing .pill.acid{background:rgba(201,236,0,.18);color:#495500;border-color:rgba(153,181,0,.35)}
#landing .phone{border-radius:42px;padding:10px;border-color:rgba(255,255,255,.14);transform:rotate(1.2deg)}
#landing .phone-screen{border-radius:33px;padding:22px;background:#10110f}
#landing .preview-shout{border-radius:20px;background:#191a17;border-color:#2d3029}
#landing .hero-note{color:var(--ui-muted);font-weight:650}
#landing .social-proof{margin-top:0}
#landing .proof{
  min-height:124px;
  padding:20px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--ui-line);
  border-radius:18px;
}
#landing .proof strong{color:var(--ui-ink)}
#landing .proof span{color:var(--ui-muted);line-height:1.4}

/* Signed-in app: light editorial canvas with a dark navigation rail. */
#shell{
  --bg:var(--ui-paper);
  --bg2:#eef0e9;
  --panel:var(--ui-surface);
  --panel2:var(--ui-surface-2);
  --panel3:#e4e8dd;
  --text:var(--ui-ink);
  --muted:var(--ui-muted);
  --line:var(--ui-line);
  --acid:var(--ui-acid-strong);
  --shadow:var(--ui-shadow);
  --radius:var(--ui-radius);
  background:var(--ui-paper);
  color:var(--ui-ink);
}
#shell .main{
  background:
    radial-gradient(circle at 88% -8%,rgba(201,236,0,.1),transparent 29%),
    linear-gradient(180deg,#f8f9f5 0,var(--ui-paper) 38%);
}

/* Navigation */
#shell .sidebar{
  width:256px;
  padding:22px 14px 18px;
  background:#11140f;
  border-right:0;
  color:#f6f7f2;
  box-shadow:10px 0 36px rgba(17,20,15,.08);
}
#shell .main{margin-left:256px}
#shell .side-logo{padding:10px 12px 30px}
#shell .side-user{
  margin:0 2px 24px;
  padding:12px;
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.055);
  border-radius:16px;
}
#shell .side-user .avatar{background:var(--ui-acid);border:0;color:#11140f}
#shell .side-user .muted{color:#8f9689}
#shell .side-nav{gap:7px}
#shell .side-nav button{
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  color:#9da497;
  font-size:14px;
  font-weight:720;
  letter-spacing:-.01em;
}
#shell .side-nav button:hover{background:rgba(255,255,255,.05);color:#fff}
#shell .side-nav button.on{background:var(--ui-acid);color:#12150f;box-shadow:0 8px 22px rgba(200,236,0,.12)}
#shell .side-nav button.on .nav-icon{color:#12150f}
#shell .nav-icon{width:22px;text-align:center;font-size:18px}
#shell .side-bottom .btn{border-color:rgba(255,255,255,.12);color:#d7dbd2}

/* Header and page rhythm */
#shell #topbar{
  position:sticky;
  top:0;
  z-index:14;
  background:rgba(248,249,245,.84);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border-bottom:1px solid rgba(217,222,210,.72);
}
#shell .topbar{
  height:78px;
  padding:0 34px;
  background:transparent;
  border:0;
  backdrop-filter:none;
}
#shell .top-title strong{font-size:16px;letter-spacing:-.02em}
#shell .top-title span{font-size:12px;color:var(--ui-muted)}
#shell .top-actions{gap:9px}
#shell .icon-btn{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--ui-line);
  background:rgba(255,255,255,.78);
  color:var(--ui-ink);
  box-shadow:0 4px 14px rgba(26,32,22,.05);
}
#shell .main-content{max-width:1180px;padding:38px 34px 54px}
#shell .page-hero{margin-bottom:28px;align-items:flex-end}
#shell .page-hero>div:first-child{max-width:720px}
#shell .page-hero h1{font-size:clamp(38px,4.3vw,62px);line-height:.98;letter-spacing:-.06em;color:var(--ui-ink)}
#shell .page-hero p{font-size:15px;line-height:1.55;color:var(--ui-muted);max-width:650px}
#shell .eyebrow{
  color:#77806e;
  font-size:10px;
  font-weight:850;
  letter-spacing:.14em;
  margin-bottom:9px;
}
#shell h2{font-size:27px;letter-spacing:-.045em}
#shell h3{letter-spacing:-.025em}
#shell .section{margin-top:34px}
#shell .section-head{margin-bottom:15px}

/* Surfaces */
#shell .card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(215,220,207,.94);
  border-radius:var(--ui-radius);
  padding:21px;
  box-shadow:0 5px 20px rgba(31,37,26,.045);
}
#shell .card.clickable{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
#shell .card.clickable:hover{transform:translateY(-3px);border-color:#c7cebd;box-shadow:var(--ui-shadow)}
#shell .card.callout{
  background:linear-gradient(130deg,#181c16,#252b20);
  border:0;
  color:#f7f8f3;
  box-shadow:0 22px 50px rgba(19,23,16,.14);
}
#shell .callout .muted,#shell .callout p{color:#b5bcae}
#shell .metric{padding:20px 21px}
#shell .metric strong{font-size:32px;color:var(--ui-ink)}
#shell .metric span{color:var(--ui-muted);font-size:11px;letter-spacing:.02em}
#shell .avatar{
  background:#e9ede3;
  border-color:#d7ddd0;
  color:var(--ui-ink);
}
#shell .money{color:#536100;font-size:28px}
#shell .divider{background:var(--ui-line)}
#shell .empty{background:rgba(255,255,255,.46);border-color:#ccd2c5;color:var(--ui-muted)}
#shell .notice{color:#22643c;background:#ecf8ef;border-color:#c7e8d0}
#shell .warning{color:#7c5410;background:#fff7e7;border-color:#f0dcae}

/* Controls */
#shell .btn,.modal-card .btn,.drawer-panel .btn{
  min-height:46px;
  border-radius:14px;
  padding:12px 17px;
  background:var(--ui-ink);
  color:#fff;
  font-size:12px;
  font-weight:820;
  letter-spacing:.015em;
  box-shadow:none;
}
#shell .btn:hover,.modal-card .btn:hover,.drawer-panel .btn:hover{transform:translateY(-1px);filter:none}
#shell .btn.secondary,.modal-card .btn.secondary,.drawer-panel .btn.secondary{
  background:var(--ui-acid);
  color:#14170f;
  border-color:transparent;
}
#shell .btn.ghost,.modal-card .btn.ghost,.drawer-panel .btn.ghost{
  background:transparent;
  color:var(--ui-ink);
  border:1px solid var(--ui-line);
}
#shell .side-bottom .btn.ghost{color:#dfe3da;border-color:rgba(255,255,255,.13)}
#shell .btn.danger,.modal-card .btn.danger{background:#dc5d5d;color:#fff}
#shell .btn.small,.modal-card .btn.small,.drawer-panel .btn.small{min-height:38px;border-radius:12px;padding:8px 12px;font-size:10px}
#shell input,#shell textarea,#shell select,
.modal-card input,.modal-card textarea,.modal-card select,
.drawer-panel input,.drawer-panel textarea,.drawer-panel select{
  border:1px solid #d5dacd;
  background:#fff;
  color:var(--ui-ink);
  padding:14px 15px;
  border-radius:13px;
  box-shadow:0 1px 0 rgba(25,31,21,.02);
}
#shell input:focus,#shell textarea:focus,#shell select:focus,
.modal-card input:focus,.modal-card textarea:focus,.modal-card select:focus,
.drawer-panel input:focus,.drawer-panel textarea:focus,.drawer-panel select:focus{
  border-color:#9eaa8d;
  box-shadow:0 0 0 4px rgba(200,236,0,.16);
}
#shell .field label,.modal-card .field label,.drawer-panel .field label{
  color:#596153;
  font-size:10px;
  letter-spacing:.08em;
}
#shell .pill,.modal-card .pill,.drawer-panel .pill{
  background:#eef0e9;
  border-color:#dce1d6;
  color:#5e6658;
  padding:6px 10px;
}
#shell .pill.acid,.modal-card .pill.acid,.drawer-panel .pill.acid{background:#f1fbc5;border-color:#d8eb7f;color:#465300}
#shell .pill.green,.modal-card .pill.green,.drawer-panel .pill.green{background:#e9f7ed;border-color:#cce7d3;color:#21623a}
#shell .pill.orange,.modal-card .pill.orange,.drawer-panel .pill.orange{background:#fff3dc;border-color:#f0d9a8;color:#77500c}
#shell .pill.blue,.modal-card .pill.blue,.drawer-panel .pill.blue{background:#eaf3ff;border-color:#ccddf3;color:#2d5f93}

/* Marketplace and workflow cards */
#shell .market-grid{gap:16px}
#shell .shout-card{padding:22px;min-height:240px;display:flex;flex-direction:column}
#shell .shout-card h3{font-size:23px;margin-top:18px}
#shell .shout-card .description{line-height:1.5;min-height:52px}
#shell .shout-card .shout-meta{margin-top:auto;padding-top:15px}
#shell .filterbar{
  padding:8px;
  gap:7px;
  border-radius:17px;
  background:#e7eae1;
  margin-bottom:18px;
}
#shell .filterbar input,#shell .filterbar select{background:#fff;border:0;min-height:46px}
#shell .check-step{
  background:#f1f3ed;
  border-color:#dce1d6;
  color:var(--ui-ink);
}
#shell .check-step:hover{border-color:#bfc8b6}
#shell .check-step.done{background:#f6f7f3;opacity:1}
#shell .check-step.done span{color:#328251}
#shell .check-step:not(.done) span{color:#6f8100}
#shell .choice,.modal-card .choice,.drawer-panel .choice{
  background:#f4f6f0;
  border-color:#dce1d6;
  color:var(--ui-ink);
}
#shell .choice.on,.modal-card .choice.on,.drawer-panel .choice.on{
  background:#eff9c6;
  border-color:#d4e875;
  color:#485600;
}
#shell .choice:focus-visible,.modal-card .choice:focus-visible,.drawer-panel .choice:focus-visible{
  outline:3px solid rgba(168,199,0,.38);
  outline-offset:2px;
}
#shell .segmented{background:#e8ebe3;border-color:#d8ddd2}
#shell .segmented button{color:#70786b}
#shell .segmented button.on{background:#fff;color:var(--ui-ink);box-shadow:0 2px 8px rgba(30,36,26,.08)}
#shell .rating-stars button{background:#eef1e9;border-color:#dce1d6;color:#aab1a4}
#shell .rating-stars button.on{color:#667700;border-color:#cfe16f;background:#f2f9d5}
#shell .campaign-row{padding:18px 20px}
#shell .mini-progress{background:#e1e5dc}
#shell .mini-progress div{background:#a8c700}
#shell .message{background:#eef0e9;color:var(--ui-ink)}
#shell .message.mine{background:#1c2119;color:#fff}

/* Dialogs live outside #shell, so give them their own light theme. */
.modal-backdrop,.drawer-backdrop{background:rgba(17,20,15,.5);backdrop-filter:blur(8px)}
.modal-card,.drawer-panel{
  --text:var(--ui-ink);
  --muted:var(--ui-muted);
  --line:var(--ui-line);
  color:var(--ui-ink);
  background:#fafbf8;
  border-color:#dfe3d8;
  box-shadow:0 28px 90px rgba(15,19,13,.22);
}
.modal-card{border-radius:24px;padding:28px}
.drawer-panel{padding:30px}
.modal-card .muted,.drawer-panel .muted{color:var(--ui-muted)}
.modal-card .card,.drawer-panel .card{background:#fff;border:1px solid var(--ui-line);box-shadow:none;color:var(--ui-ink)}
.modal-card .eyebrow,.drawer-panel .eyebrow{color:#737c6a}
.modal-close{border:1px solid #d9ded2;background:#eef0e9;color:#30362c;border-radius:50%}
.drawer-panel .composer{background:#fafbf8}
.drawer-panel .message{background:#eaede5;color:var(--ui-ink)}
.drawer-panel .message.mine{background:#1b2018;color:#fff}
#drawerBody>.between:first-child,#modalBody>.between:first-child{padding-right:62px!important;align-items:flex-start}
#drawerBody>.between:first-child>.money,#modalBody>.between:first-child>.money{flex:0 0 auto}
.toast{border-radius:999px;background:#171a16;color:#fff;padding:13px 19px;font-weight:750}

/* Phone layout: native-feeling header and floating tab dock. */
@media(max-width:800px){
  #landing .landing-nav{
    padding:18px 16px 15px;
    padding-top:max(18px,env(safe-area-inset-top));
  }
  #landing .landing-nav .logo{font-size:29px}
  #landing .landing-nav .row{gap:7px}
  #landing .landing-nav .pill{display:none}
  #landing .landing-hero{padding:42px 16px 30px}
  #landing .landing-copy{max-width:560px}
  #landing .landing-copy h1{margin-bottom:20px}
  #landing .landing-copy>p{font-size:17px}
  #landing .hero-actions{display:grid;grid-template-columns:1fr;margin:25px 0 18px}
  #landing .hero-actions .btn{width:100%;min-height:54px}
  #landing .social-proof{padding:0 16px calc(42px + env(safe-area-inset-bottom))}
  #landing .proof-grid{gap:9px}
  #landing .proof{min-height:116px;padding:16px}
  #landing .proof strong{font-size:25px}
  #landing .proof span{font-size:11px}
  #shell .main{margin-left:0;background:linear-gradient(180deg,#fafbf7 0,var(--ui-paper) 28%)}
  #shell #topbar{padding-top:max(10px,env(safe-area-inset-top))!important;background:rgba(248,249,245,.94)}
  #shell #topbar .topbar{
    height:60px!important;
    min-height:60px!important;
    padding:0 18px!important;
  }
  #shell .top-title strong{font-size:17px}
  #shell .top-actions{gap:6px}
  #shell .top-actions .icon-btn{width:36px;height:36px;min-width:36px;background:#fff}
  #shell .top-actions .icon-btn[aria-label="Feedback"]{display:none}
  #shell .mobile-signout{
    display:inline-flex!important;
    width:auto!important;
    min-width:56px!important;
    height:36px!important;
    padding:0 9px!important;
    border-radius:11px!important;
    background:#171a16!important;
    color:#fff!important;
    border-color:#171a16!important;
    font-size:8px!important;
    letter-spacing:.04em;
  }
  #shell .main-content{padding:24px 16px calc(82px + env(safe-area-inset-bottom))}
  #shell .page-hero{gap:16px;margin-bottom:22px}
  #shell .page-hero h1{font-size:38px;line-height:1}
  #shell .page-hero p{font-size:14px;margin-top:11px}
  #shell .page-hero>.btn{width:100%}
  #shell .mobile-nav{
    left:10px;right:10px;bottom:6px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;
    background:rgba(18,21,16,.95);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow:0 12px 30px rgba(16,20,14,.2);
    backdrop-filter:blur(22px);
  }
  #shell .mobile-nav button{color:#8e9788;min-height:43px;font-size:7px;font-weight:760;border-radius:11px;padding:4px 1px 2px}
  #shell .mobile-nav button span{font-size:15px;margin-bottom:2px}
  #shell .mobile-nav button.on{color:#11150d;background:var(--ui-acid)}
  #shell #mobileNav:has(button[data-nav="business-campaigns"]){--mobile-nav-cols:5!important}
  #shell #mobileNav button[data-nav="business-campaigns"]{display:block!important}
  #shell .danger-zone .btn{
    width:auto!important;
    min-height:34px!important;
    padding:7px 11px!important;
    border-radius:10px!important;
    font-size:9px!important;
  }
  #shell .market-grid{grid-template-columns:1fr}
  #shell .shout-card{min-height:220px}
  .modal-card{
    width:calc(100% - 16px);
    margin:max(8px,env(safe-area-inset-top)) auto 8px;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - env(safe-area-inset-bottom));
    border-radius:24px;
    padding:25px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .drawer-panel{
    height:min(92vh,calc(100dvh - env(safe-area-inset-top)));
    padding:18px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius:28px 28px 0 0;
  }
  .drawer-handle{background:#c5cbbf}
}

@media(max-width:500px){
  #landing .landing-copy h1{font-size:45px}
  #shell .grid.two,#shell .grid.three,#shell .grid.four,#shell .kpi-grid{gap:10px}
  #shell .card{padding:17px;border-radius:16px}
  #shell .metric{padding:17px}
  #shell .metric strong{font-size:26px}
  #shell .metric span{font-size:10px}
  #shell .section{margin-top:28px}
  #shell .section-head{align-items:flex-start}
  #shell .filterbar{padding:7px}
  #shell .campaign-row{padding:17px}
  #shell .grid.two:has(> .card .avatar){grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  #shell *,#landing *{scroll-behavior:auto!important;transition:none!important}
}