:root {
  --bg: #fffaf3;
  --surface: #ffffff;
  --ink: #25211f;
  --muted: #746e69;
  --yellow: #ffd95a;
  --yellow-deep: #f4b928;
  --coral: #ff7668;
  --mint: #66d5b0;
  --navy: #26304f;
  --line: #eee4d8;
  --shadow: 0 14px 38px rgba(72, 50, 25, .10);
  --radius: 24px;
  font-family: Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { display: flex; justify-content: center; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:3px solid var(--navy); outline-offset:3px; box-shadow:0 0 0 6px rgba(255,217,90,.9); }
.card[tabindex="-1"]:focus { outline:3px solid var(--navy); outline-offset:3px; }
button:disabled { cursor:not-allowed; }

.app-shell { width: min(100%, 520px); min-height: 100vh; background: var(--bg); position: relative; padding-bottom: 92px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 10px; position: sticky; top: 0; background: rgba(255,250,243,.94); backdrop-filter: blur(14px); z-index: 20; }
.brand { display: flex; gap: 11px; align-items: center; }
.brand-mark { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg,var(--yellow),var(--coral)); font-size: 23px; box-shadow: var(--shadow); }
.brand b { display: block; font-size: 20px; letter-spacing: .5px; }
.brand small { color: var(--muted); display: block; margin-top: 2px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn, .login-btn { border: 0; background: var(--surface); border-radius: 14px; min-height: 42px; box-shadow: 0 7px 24px rgba(72,50,25,.08); }
.icon-btn { width: 42px; }
.login-btn { padding: 0 13px; font-weight: 800; color: var(--navy); }

.demo-banner { margin: 4px 18px 0; padding: 9px 12px; background: #fff2bc; border: 1px solid #f5d96c; border-radius: 14px; font-size: 13px; color: #6f5510; display: flex; justify-content: space-between; gap: 8px; }
.screen { display: none; padding: 12px 18px 24px; animation: fade .2s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.hero { border-radius: 30px; padding: 22px; color: #fff; background: linear-gradient(145deg,#273252,#4b5c8e); position: relative; overflow: hidden; box-shadow: var(--shadow); }
.hero::after { content:""; position:absolute; width:150px; height:150px; border-radius:50%; background:rgba(255,217,90,.24); right:-44px; top:-55px; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .5px; opacity: .82; text-transform: uppercase; }
.hero h1 { margin: 9px 0 8px; font-size: clamp(25px, 7vw, 34px); line-height: 1.1; max-width: 350px; }
.hero p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.55; }
.stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 18px; }
.stat { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); padding: 11px 10px; border-radius: 17px; }
.stat span { display:block; font-size:12px; color:rgba(255,255,255,.72); }
.stat b { display:block; margin-top:4px; font-size:18px; }

.section-title { display:flex; justify-content:space-between; align-items:end; margin: 24px 2px 12px; }
.section-title h2 { margin:0; font-size:20px; }
.section-title small { color:var(--muted); }
.card { background: var(--surface); border: 1px solid rgba(238,228,216,.9); border-radius: var(--radius); box-shadow: var(--shadow); }
.quest-card { padding: 20px; }
.quest-head { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.quest-app { display:flex; gap:12px; align-items:center; }
.app-icon { width:50px; height:50px; border-radius:18px; background:linear-gradient(145deg,#ffe27c,#ff8f81); display:grid; place-items:center; font-size:24px; flex:none; }
.badge { border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; background:#eefaf5; color:#277b62; }
.quest-card h3 { font-size:21px; margin:16px 0 8px; line-height:1.35; }
.quest-card p { color:var(--muted); line-height:1.55; margin:0; }
.meta { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }
.pill { background:#f7f2eb; border-radius:999px; padding:7px 10px; font-size:13px; color:#5f5750; }
.primary { border:0; border-radius:18px; background:linear-gradient(135deg,var(--yellow),#ffbd4d); color:#3c2b00; font-weight:900; padding:15px 18px; width:100%; box-shadow:0 10px 22px rgba(244,185,40,.24); }
.primary:disabled { filter:grayscale(.5); opacity:.65; cursor:not-allowed; }
.secondary { border:1px solid var(--line); background:#fff; border-radius:16px; padding:12px 14px; font-weight:800; color:var(--navy); }
.action-row { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:10px; }

.progress-card { margin-top:14px; padding:16px; }
.progress-head { display:flex; justify-content:space-between; align-items:center; }
.progress-track { height:11px; background:#efe8df; border-radius:999px; overflow:hidden; margin-top:11px; }
.progress-bar { height:100%; width:0; background:linear-gradient(90deg,var(--mint),var(--yellow)); border-radius:inherit; transition:width .35s ease; }

.search-box { display:flex; gap:10px; margin-top:6px; }
.search-box input { width:100%; border:1px solid var(--line); border-radius:17px; padding:14px 15px; background:#fff; }
.filters { display:flex; overflow:auto; gap:8px; padding:12px 0 5px; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.filter-btn { border:1px solid var(--line); background:#fff; padding:9px 12px; border-radius:999px; white-space:nowrap; }
.filter-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.app-list { display:grid; gap:12px; margin-top:12px; }
.app-card { padding:16px; display:flex; gap:13px; align-items:center; }
.app-card .content { flex:1; min-width:0; }
.app-card h3 { margin:0 0 5px; font-size:17px; }
.app-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.4; }
.catalog-meta { display:block; margin-top:6px; color:var(--muted); font-size:12px; font-weight:700; }
.catalog-empty .secondary { display:block; width:100%; margin-top:12px; }
.app-card .secondary { padding:9px 12px; }
.sample-label { color:#a25c28; background:#fff0db; padding:3px 7px; border-radius:999px; font-size:11px; font-weight:800; }

.reward-summary { display:grid; grid-template-columns: 1.2fr .8fr; gap:12px; }
.reward-main { padding:20px; background:linear-gradient(145deg,#fff0a7,#ffd45e); }
.reward-main b { display:block; font-size:34px; margin-top:8px; }
.level-card { padding:20px; background:linear-gradient(145deg,#dff9ef,#a7e8d1); }
.level-card b { display:block; font-size:34px; margin-top:8px; }
.notice { margin-top:14px; padding:15px; border-radius:18px; background:#fff; border-left:5px solid var(--coral); color:#5f5750; line-height:1.45; }
.badge-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.badge-card { padding:16px; text-align:center; }
.badge-card.locked { opacity:.42; filter:grayscale(1); }
.badge-emoji { font-size:30px; }
.badge-card b { display:block; margin-top:7px; }
.ledger { display:grid; gap:8px; }
.ledger-row { display:flex; justify-content:space-between; gap:12px; padding:13px 14px; background:#fff; border-radius:16px; border:1px solid var(--line); }
.ledger-row small { color:var(--muted); display:block; margin-top:3px; }

.profile-card { padding:20px; text-align:center; }
.avatar { width:72px; height:72px; border-radius:26px; margin:0 auto 12px; background:linear-gradient(145deg,var(--mint),#82a8ff); display:grid; place-items:center; font-size:33px; }
.profile-card h2 { margin:0; }
.profile-card p { margin:6px 0 0; color:var(--muted); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.mini-stat { padding:14px 8px; text-align:center; }
.mini-stat b { font-size:20px; display:block; }
.mini-stat small { color:var(--muted); }
.happy-request-matches { display:grid; gap:8px; margin-top:12px; text-align:left; }
.happy-request-matches > b { font-size:14px; }
.happy-request-matches > small { line-height:1.45; }
.happy-request-match { display:block; text-decoration:none; font-size:13px; line-height:1.35; }
.setting-list { display:grid; gap:9px; }
.setting { display:flex; justify-content:space-between; align-items:center; padding:15px 16px; background:#fff; border-radius:17px; border:1px solid var(--line); }
.setting select { border:1px solid var(--line); border-radius:10px; padding:7px; background:#fff; }
.referral-code { font-family:ui-monospace,Consolas,monospace; font-weight:900; letter-spacing:1px; }
.disclaimer { margin-top:18px; color:var(--muted); line-height:1.55; font-size:13px; }

.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,520px); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,1fr); gap:6px; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border-top:1px solid var(--line); z-index:30; }
.nav-btn { border:0; background:transparent; border-radius:15px; padding:7px 4px; color:#837b75; font-size:12px; }
.nav-btn span { display:block; font-size:22px; margin-bottom:2px; }
.nav-btn.active { background:#fff3bf; color:#4b3900; font-weight:900; }

.modal-backdrop { position:fixed; inset:0; background:rgba(30,27,24,.48); display:none; align-items:end; justify-content:center; z-index:50; }
.modal-backdrop[hidden] { display:none; }
.modal-backdrop.open { display:flex; }
.modal { width:min(100%,520px); background:#fff; border-radius:30px 30px 0 0; padding:22px 18px calc(24px + env(safe-area-inset-bottom)); max-height:85vh; overflow:auto; }
.modal h2 { margin:0 0 8px; }
.option-list { display:grid; gap:10px; margin:16px 0; }
.option { border:1px solid var(--line); border-radius:15px; padding:13px; display:flex; gap:10px; align-items:center; }
.option:focus-within { outline:3px solid var(--navy); outline-offset:2px; background:#fff9de; }
.option input { width:19px; height:19px; }
.modal-actions { display:grid; grid-template-columns:.7fr 1.3fr; gap:10px; }
.modal-open { overflow:hidden; }
.toast { position:fixed; left:50%; bottom:102px; transform:translate(-50%,20px); width:min(calc(100% - 36px),484px); padding:13px 15px; border-radius:15px; background:#26211f; color:#fff; opacity:0; pointer-events:none; transition:.2s; z-index:80; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:380px) {
  .topbar { padding-left:13px; padding-right:13px; }
  .screen { padding-left:13px; padding-right:13px; }
  .stats-row, .stats-grid { gap:6px; }
  .stat b { font-size:16px; }
  .brand small { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
  .screen { animation:none; }
  .progress-bar, .toast { transition:none; }
}

/* v0.2 business platform additions */
.ad-label { display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border-radius:999px; background:#26304f; color:#fff; font-size:11px; font-weight:900; letter-spacing:.3px; }
.sponsored-card { padding:20px; border-color:#ffd0c9; background:linear-gradient(160deg,#fff,#fff7f5); }
.sponsored-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.sponsored-card h3 { margin:15px 0 8px; font-size:21px; line-height:1.35; }
.sponsored-card p { color:var(--muted); line-height:1.55; }
.sponsored-card .merchant { background:linear-gradient(145deg,#ffc7bd,#ff8d7f); }
.primary.coral { background:linear-gradient(135deg,#ff9b8d,var(--coral)); color:#fff; box-shadow:0 10px 22px rgba(255,118,104,.24); }
.secondary.full { width:100%; margin-top:10px; }
.ad-disclosure { font-size:12px; padding:10px 12px; background:#fff0ed; border-radius:14px; color:#7b4740 !important; }
.business-card { margin-top:16px; padding:18px; border-radius:24px; background:linear-gradient(145deg,#eafaf5,#fff8d6); border:1px solid #d9eee6; box-shadow:var(--shadow); }
.business-card { display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; }
.business-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:17px; background:var(--navy); color:#fff; font-size:24px; font-weight:900; }
.business-card h2 { margin:1px 0 6px; font-size:18px; }
.business-card p { margin:0; color:var(--muted); line-height:1.5; }
.business-links { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.business-links a { text-align:center; text-decoration:none; border-radius:15px; padding:12px 9px; background:#fff; border:1px solid var(--line); color:var(--navy); font-weight:900; font-size:13px; }
.pi-ad-slot { margin-top:14px; padding:18px; border:1px dashed #aaa; border-radius:18px; text-align:center; color:var(--muted); background:#fff; }

.portal-body { display:block; min-height:100vh; background:var(--bg); }
.portal-shell { width:min(100% - 28px,760px); margin:0 auto; padding:22px 0 60px; }
.portal-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.portal-header a { color:var(--navy); text-decoration:none; font-weight:900; }
.portal-hero { padding:24px; border-radius:28px; color:#fff; background:linear-gradient(145deg,#273252,#53659b); box-shadow:var(--shadow); }
.portal-hero h1 { margin:6px 0 8px; }
.portal-hero p { margin:0; color:rgba(255,255,255,.82); line-height:1.55; }
.portal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.portal-grid > * { min-width:0; }
.portal-card { padding:20px; min-width:0; max-width:100%; }
.portal-card h2 { margin-top:0; font-size:19px; }
.form-grid { display:grid; gap:12px; }
.form-grid label { display:grid; gap:6px; font-weight:800; font-size:14px; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; border:1px solid var(--line); border-radius:14px; padding:12px 13px; background:#fff; color:var(--ink); }
.form-grid textarea { min-height:100px; resize:vertical; }
.status-box { padding:13px; border-radius:15px; background:#f7f2eb; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.metric { padding:13px; border-radius:15px; background:#fff; border:1px solid var(--line); text-align:center; }
.metric b { display:block; font-size:21px; }
.metric small { color:var(--muted); }
.step-list { padding-left:20px; line-height:1.75; color:var(--muted); }
.inline-actions { display:flex; flex-wrap:wrap; gap:8px; }
.inline-actions button { flex:1; min-width:150px; }
@media (max-width:620px) { .portal-grid { grid-template-columns:minmax(0,1fr); } .business-links { grid-template-columns:1fr; } }

/* v0.3 creator campaign marketplace */
.wide-card{grid-column:1/-1}.portal-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.portal-title-row h2{margin-bottom:4px}.portal-title-row p{margin:0;color:var(--muted)}.opportunity-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.opportunity-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:rgba(255,255,255,.75)}.opportunity-card h3{margin:10px 0 6px}.opportunity-card p{color:var(--muted);white-space:normal;overflow-wrap:anywhere}.opportunity-meta{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}.opportunity-meta span,.match-score{display:inline-flex;border-radius:999px;background:var(--soft);padding:5px 9px;font-size:12px;font-weight:700}.match-score{margin-left:6px}.tracking-url{font-size:12px;background:var(--soft);border-radius:10px;padding:10px}.empty-state{padding:24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px}
@media (max-width:640px){.portal-title-row{display:block}.portal-title-row button{margin-top:10px;width:100%}.opportunity-list{grid-template-columns:1fr}}
.admin-metrics{max-width:1080px;margin:0 auto 18px}.review-list{display:grid;gap:10px}.review-card{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.78)}.review-card h3{margin:0 0 6px}.review-card p{margin:0 0 12px;color:var(--muted)}
.proof-label{display:grid;gap:7px;font-weight:700;margin:14px 0}.proof-label input{width:100%;font-size:20px;letter-spacing:.08em;text-transform:uppercase}


/* v0.5 fraud review, analytics, settlement and session-safe UI */
.analytics-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.analytics-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px}
.analytics-table th,.analytics-table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.analytics-table th{position:sticky;top:0;background:#fff8e2;color:var(--navy);font-weight:900}
.analytics-table tr:last-child td{border-bottom:0}
.money-state{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#f2eee8;font-size:11px;font-weight:900}
.money-state.pending{background:#fff0c9;color:#745500}.money-state.available{background:#dff7ea;color:#185e3a}.money-state.paid{background:#e7efff;color:#254c91}.money-state.rejected{background:#ffe7e4;color:#8e332b}
.portal-note{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.5}

.credential-list{display:grid;gap:10px;margin-bottom:18px}.credential-card{display:flex;align-items:center;gap:12px;padding:14px}.credential-card>span{font-size:28px}.credential-card div{display:grid;gap:4px}.credential-card small{color:var(--muted)}

/* AutoDev2 partner ROI transparency */
.roi-metric-grid{grid-template-columns:repeat(auto-fit,minmax(108px,1fr))}
.roi-table{min-width:1180px}
@media (max-width:620px){.roi-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.admin-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.admin-chart-card{margin:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.72)}.admin-chart-card figcaption{font-weight:800;margin-bottom:10px}.admin-chart-frame{position:relative;min-height:260px}.admin-chart-frame canvas{max-width:100%;max-height:300px}@media(max-width:720px){.admin-chart-grid{grid-template-columns:1fr}.admin-chart-frame{min-height:220px}}

.admin-review-grid{margin-top:16px;max-width:100%;overflow-x:auto}.admin-review-grid .gridjs-container{min-width:680px;font-family:inherit}.admin-review-grid .gridjs-search{float:none;margin-bottom:12px}.admin-review-grid .gridjs-search-input{width:min(420px,100%);border-radius:12px;border:1px solid var(--line);padding:10px 12px;font:inherit}.admin-review-grid .gridjs-wrapper{border:1px solid var(--line);border-radius:16px;box-shadow:none}.admin-review-grid .gridjs-th,.admin-review-grid .gridjs-td{border-color:var(--line);font-size:13px;white-space:normal}.admin-review-grid .gridjs-th{font-weight:800}.admin-review-grid .gridjs-footer{box-shadow:none;border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px}.admin-review-grid .gridjs-pagination .gridjs-pages button{min-width:40px;min-height:40px}@media(max-width:720px){.admin-review-grid{margin-inline:-6px;padding-bottom:4px}.admin-review-grid .gridjs-container{min-width:620px}}