/* ============================================================
   VibeBro — application styles
   A builder's worktable: cool paper, ink type, petrol brand,
   amber accent. Rubber-stamp status chips, segmented progress
   strips shared across Build (tasks) and Test (checkpoints).
   ============================================================ */

:root {
  --paper:#f1f3f0; --panel:#ffffff; --ink:#171d24; --muted:#646a71; --muted-2:#8a9097;
  --line:#dfe3dc; --brand:#11565e; --brand-ink:#0c4147; --amber:#f4b942;
  --pass:#177a43; --pass-bg:#dff4e7; --fail:#ad3121; --fail-bg:#fbe4e0;
  --doing:#b47814; --doing-bg:#fff3db; --pending:#646a71; --pending-bg:#ebedef;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,26,32,.05), 0 4px 14px rgba(20,26,32,.05);
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Space Grotesk',var(--font-body);
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.55; }
h1,h2,h3 { font-family:var(--font-display); letter-spacing:-.01em; margin:0 0 .35em; }
h1 { font-size:1.6rem; } h2 { font-size:1.15rem; } h3 { font-size:1rem; }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
p { margin:.4em 0; }
.mono { font-family:var(--font-mono); font-size:.8em; letter-spacing:.02em; }
.muted { color:var(--muted); } .small { font-size:.82rem; }
.amber { color:var(--amber); }
.ok-text { color:var(--pass); }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none!important; transition:none!important; } }

/* ---------- Top bar ---------- */
.topbar { display:flex; align-items:center; gap:22px; background:var(--panel); border-bottom:1px solid var(--line); padding:10px 22px; position:sticky; top:0; z-index:30; }
.brand { display:flex; align-items:center; }
.brand:hover { text-decoration:none; }
.crumbs { font-size:.85rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.crumb-sep { color:var(--muted-2); }
.crumb-here { color:var(--ink); font-weight:500; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.top-link { color:var(--muted); font-weight:500; font-size:.9rem; }
.top-link:hover { color:var(--ink); text-decoration:none; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:600; overflow:hidden; flex:none; }
.avatar img { width:100%; height:100%; object-fit:cover; }

.wrap { max-width:1080px; margin:0 auto; padding:20px 22px 60px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:6px 0 18px; flex-wrap:wrap; }
.page-head p { margin:.2em 0 0; }
.head-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0 14px; flex-wrap:wrap; }
.sub-head { margin-top:26px; }
.footer { max-width:1080px; margin:0 auto; padding:18px 22px 30px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted-2); font-size:.8rem; border-top:1px solid var(--line); }
.footer strong { font-family:var(--font-display); color:var(--brand); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font:500 .9rem var(--font-body); border:1px solid var(--line); border-radius:8px; padding:9px 15px; cursor:pointer; text-decoration:none; background:var(--panel); color:var(--ink); transition:background .15s,border-color .15s,transform .05s; white-space:nowrap; }
.btn:hover { text-decoration:none; border-color:var(--muted-2); }
.btn:active { transform:translateY(1px); }
.btn[data-busy] { opacity:.6; pointer-events:none; }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-primary:hover { background:var(--brand-ink); border-color:var(--brand-ink); }
.btn-block { width:100%; }
.btn-sm { padding:7px 12px; font-size:.85rem; }
.btn-lg { padding:12px 22px; font-size:1rem; }
.btn-xs { padding:4px 9px; font-size:.78rem; border-radius:6px; }
.btn-pass { background:var(--pass); border-color:var(--pass); color:#fff; }
.btn-fail { background:var(--fail); border-color:var(--fail); color:#fff; }
.btn-danger-ghost { color:var(--fail); }
.btn-danger-ghost:hover { background:var(--fail-bg); border-color:var(--fail); }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.btn-google { background:#fff; color:#3c4043; border-color:var(--line); font-weight:600; }
.btn-google:hover { background:#f7f8fa; }

/* ---------- Forms ---------- */
label { display:block; font-size:.85rem; color:var(--muted); margin:10px 0 0; }
input, select, textarea { width:100%; font:400 .92rem var(--font-body); color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; padding:9px 11px; margin-top:4px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(17,86,94,.12); }
input[disabled], textarea[disabled], select[disabled] { background:#f6f7f5; color:var(--muted); }
textarea { resize:vertical; }
input[type=color].color-input { padding:2px; height:38px; cursor:pointer; }
input[type=checkbox] { width:auto; margin:0 6px 0 0; }
.chk { display:flex; align-items:center; font-size:.9rem; color:var(--ink); margin-top:8px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width:560px){ .grid-2 { grid-template-columns:1fr; } }
.form-section { margin:18px 0 4px; color:var(--brand); font-size:.92rem; }
fieldset.device-pick { border:1px solid var(--line); border-radius:8px; padding:6px 12px 10px; margin-top:12px; display:flex; gap:18px; flex-wrap:wrap; }
fieldset.device-pick legend { font-size:.8rem; color:var(--muted); padding:0 4px; }

/* ---------- Cards / dashboard ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }
.card { display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 17px; box-shadow:var(--shadow); }
.project-card:hover { border-color:var(--brand); text-decoration:none; transform:translateY(-1px); transition:transform .1s, border-color .15s; }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.card-top h3 { margin:0; }
.mini-label { font-size:.68rem; letter-spacing:.06em; color:var(--muted-2); text-transform:uppercase; margin:12px 0 4px; }
.card-foot { display:flex; justify-content:space-between; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }

/* ---------- Progress strips ---------- */
.strip { display:flex; height:9px; border-radius:5px; overflow:hidden; background:var(--pending-bg); gap:1px; }
.strip-sm { height:7px; width:150px; }
.strip-page { flex:1; max-width:420px; height:11px; }
.seg { display:block; }
.seg-pass { background:var(--pass); } .seg-fail { background:var(--fail); }
.seg-doing { background:var(--doing); } .seg-pending { background:var(--pending-bg); }
.seg-empty { background:repeating-linear-gradient(45deg,#e9ece7,#e9ece7 5px,#eef1ec 5px,#eef1ec 10px); }

.dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; }
.dot-pass { background:var(--pass); } .dot-fail { background:var(--fail); }
.dot-doing { background:var(--doing); } .dot-pending { background:var(--pending); }
.stat-line { display:flex; align-items:center; gap:4px; padding:5px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.stat-line:last-child { border-bottom:none; }
.stat-line strong { margin-left:auto; }

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:6px 0 20px; flex-wrap:wrap; }
.tab { padding:9px 14px; color:var(--muted); font-weight:500; font-size:.92rem; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover { color:var(--ink); text-decoration:none; }
.tab.on { color:var(--brand); border-bottom-color:var(--brand); }
.tab-count { font-family:var(--font-mono); font-size:.72rem; background:var(--pending-bg); color:var(--muted); padding:1px 6px; border-radius:10px; margin-left:4px; }

/* ---------- Mode switch (page) ---------- */
.mode-switch { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.mode-btn { padding:8px 14px; color:var(--muted); font-weight:500; font-size:.9rem; }
.mode-btn:hover { color:var(--ink); text-decoration:none; background:#f6f7f5; }
.mode-btn.on { background:var(--brand); color:#fff; }

/* ---------- Split layout ---------- */
.split { display:grid; grid-template-columns:1fr 300px; gap:22px; align-items:start; }
@media (max-width:820px){ .split { grid-template-columns:1fr; } }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow); margin-bottom:16px; }
.panel h3 { margin-bottom:8px; }
.split-side .btn { margin-top:6px; }

/* ---------- Rows (pages list / members) ---------- */
.rows { display:flex; flex-direction:column; gap:8px; }
.row { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px; box-shadow:var(--shadow); }
a.row:hover { border-color:var(--brand); text-decoration:none; }
.row-static { cursor:default; }
.row-main { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.row-main strong { font-weight:600; }
.row-arrow { color:var(--muted-2); font-size:1.1rem; }
.role-select { width:auto; padding:6px 8px; font-size:.82rem; margin:0; }

/* ---------- Task / checkpoint rows ---------- */
.task-row { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--radius); padding:13px 15px; box-shadow:var(--shadow); margin-bottom:9px; }
.task-row.status-done, .task-row.status-cp-pass { border-left-color:var(--pass); }
.task-row.status-doing { border-left-color:var(--doing); }
.task-row.status-cp-fail { border-left-color:var(--fail); }
.task-head { display:flex; align-items:flex-start; gap:12px; }
.task-title { flex:1; min-width:0; }
.task-title strong { font-weight:600; }
.task-details { margin-top:8px; padding-left:2px; color:var(--ink); font-size:.92rem; white-space:pre-wrap; }
.task-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.status-select { width:auto; padding:5px 7px; font-size:.8rem; margin:0; }

/* Stamps */
.stamp { font:700 .68rem var(--font-display); letter-spacing:.05em; padding:4px 8px; border-radius:5px; white-space:nowrap; flex:none; }
.stamp-pass { background:var(--pass-bg); color:var(--pass); }
.stamp-fail { background:var(--fail-bg); color:var(--fail); }
.stamp-doing { background:var(--doing-bg); color:var(--doing); }
.stamp-pending { background:var(--pending-bg); color:var(--pending); }
.chip-mini { display:inline-block; font-size:.7rem; background:var(--pending-bg); color:var(--muted); padding:1px 7px; border-radius:10px; }
.chip-proj { background:#e4f0f1; color:var(--brand); }

/* Device chips */
.device-chips { display:flex; gap:6px; margin-top:7px; flex-wrap:wrap; }
.device-chip { font-size:.72rem; padding:2px 8px; border-radius:10px; background:#eef1ec; color:var(--muted); border:1px solid var(--line); }

/* Checkpoint note */
.cp-note { border-radius:8px; padding:9px 11px; }
.cp-note-fail { background:var(--fail-bg); }
.cp-note-pass { background:var(--pass-bg); }
.note-tag { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:3px; color:var(--muted); }

/* ---------- Media strip ---------- */
.media-strip { display:flex; gap:10px; flex-wrap:wrap; margin-top:11px; align-items:flex-start; }
.media-item { width:92px; display:flex; flex-direction:column; gap:3px; }
.media-item img { width:92px; height:66px; object-fit:cover; border-radius:7px; border:1px solid var(--line); }
.media-file { width:92px; height:66px; border-radius:7px; border:1px solid var(--line); background:#f6f7f5; display:flex; align-items:center; justify-content:center; color:var(--brand); font-weight:600; }
.media-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.media-x-row { display:flex; gap:4px; }
.media-add { display:flex; }
.media-add-btn { width:92px; height:66px; border:1.5px dashed var(--line); border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.78rem; cursor:pointer; margin:0; text-align:center; padding:4px; }
.media-add-btn:hover { border-color:var(--brand); color:var(--brand); }

/* ---------- Assets grid ---------- */
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.asset-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.asset-thumb { display:flex; align-items:center; justify-content:center; height:120px; background:#f6f7f5; border-bottom:1px solid var(--line); }
.asset-thumb img, img.asset-thumb { width:100%; height:120px; object-fit:cover; }
.asset-file .mono { font-size:1.1rem; color:var(--brand); }
.asset-meta { padding:10px 12px; display:flex; flex-direction:column; gap:2px; flex:1; }
.asset-actions { display:flex; gap:6px; padding:0 12px 12px; }

/* ---------- Theme tab ---------- */
.swatch-row { display:flex; gap:16px; flex-wrap:wrap; }
.swatch-label { display:flex; flex-direction:column; gap:4px; font-size:.82rem; }
.theme-form h3 { margin-top:16px; }
.theme-details { margin-top:14px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.theme-details summary { cursor:pointer; font-weight:500; color:var(--brand); }

/* ---------- Snippets ---------- */
.snippets-panel .snippet-new input, .snippets-panel .snippet-new textarea { margin-top:6px; }
.snippet-new { margin-bottom:12px; }
.snippet-list { display:flex; flex-direction:column; gap:8px; }
.snippet-card { border:1px solid var(--line); border-radius:8px; padding:9px 11px; background:#fafbf9; cursor:pointer; transition:border-color .12s, background .12s; }
.snippet-card:hover { border-color:var(--brand); background:#f2f7f6; }
.snippet-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.snippet-head strong { font-size:.9rem; }
.snippet-copyhint { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); }
.snippet-card:hover .snippet-copyhint { color:var(--brand); }
.snippet-actions { display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }
.empty-snip { margin-top:4px; }
.check-list { display:flex; flex-direction:column; gap:4px; margin-top:8px; max-height:280px; overflow:auto; }

/* ---------- Credentials ---------- */
.cred-bar { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; margin-bottom:16px; box-shadow:var(--shadow); }
.cred-bar summary { cursor:pointer; font-weight:600; font-family:var(--font-display); color:var(--brand); }
.cred-body { margin-top:10px; }
.cred-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.cred-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin:10px 0; }
.cred-card { border:1px solid var(--line); border-radius:9px; padding:12px 13px; background:#fafbf9; }
.cred-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.cred-field { display:flex; align-items:center; gap:8px; padding:3px 0; }
.cred-k { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); width:42px; flex:none; }
.cred-v { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cred-mask { letter-spacing:1px; }
.cred-notes { margin-top:6px; white-space:pre-wrap; }
.cred-actions { display:flex; gap:6px; margin-top:9px; }

/* ---------- Timeline ---------- */
.timeline { display:flex; flex-direction:column; gap:0; border-left:2px solid var(--line); margin-left:8px; padding-left:0; }
.t-item { display:flex; gap:12px; padding:9px 0 9px 16px; position:relative; }
.t-dot { width:11px; height:11px; border-radius:50%; background:var(--muted-2); position:absolute; left:-6.5px; top:13px; border:2px solid var(--panel); }
.t-dot.act-created, .t-dot.act-added { background:var(--brand); }
.t-dot.act-completed, .t-dot.act-marked_pass, .t-dot.act-joined { background:var(--pass); }
.t-dot.act-marked_fail, .t-dot.act-deleted, .t-dot.act-removed, .t-dot.act-revoked { background:var(--fail); }
.t-dot.act-moved_to_test, .t-dot.act-uploaded { background:var(--doing); }
.t-body { font-size:.9rem; }
.t-action { color:var(--muted); }

/* ---------- Role chips ---------- */
.role-chip { font-size:.7rem; font-weight:600; padding:2px 9px; border-radius:11px; text-transform:capitalize; }
.role-view { background:var(--pending-bg); color:var(--muted); }
.role-edit { background:#e4f0f1; color:var(--brand); }
.role-cowork { background:#fff3db; color:var(--doing); }
.role-owner { background:#171d24; color:#fff; }

/* ---------- Empty states ---------- */
.empty-state { text-align:center; padding:48px 24px; background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius); }
.empty-state.small-empty { padding:30px 20px; text-align:left; }
.empty-stamp { display:inline-block; font:700 .72rem var(--font-display); letter-spacing:.1em; color:var(--amber); border:2px solid var(--amber); border-radius:6px; padding:4px 10px; transform:rotate(-4deg); margin-bottom:14px; }

/* ---------- Flash / errors ---------- */
.flash { padding:10px 14px; border-radius:8px; margin:0 0 14px; font-size:.9rem; border:1px solid; }
.flash-ok { background:var(--pass-bg); border-color:#bfe6cf; color:#10552f; }
.flash-err { background:var(--fail-bg); border-color:#f3c5bc; color:#8c2417; }
.modal-error { background:var(--fail-bg); border:1px solid #f3c5bc; color:#8c2417; padding:8px 12px; border-radius:7px; font-size:.86rem; margin:0 0 10px; }

/* ---------- Modals ---------- */
.modal { position:fixed; inset:0; background:rgba(20,26,32,.5); display:flex; align-items:flex-start; justify-content:center; padding:42px 16px; z-index:60; overflow:auto; }
.modal[hidden] { display:none; }
.modal-box { background:var(--panel); border-radius:14px; padding:22px 22px; width:100%; max-width:440px; box-shadow:0 20px 50px rgba(20,26,32,.25); }
.modal-wide { max-width:560px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ---------- Auth & install ---------- */
.auth-body { background:linear-gradient(160deg,#0c4147,#11565e 60%,#0c3a40); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px 16px; }
.auth-card { background:var(--panel); border-radius:16px; padding:30px 30px 26px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); text-align:center; }
.auth-card h1 { margin-top:14px; }
.auth-card form { text-align:left; margin-top:8px; }
.auth-card .btn-block { margin-top:18px; }
.install-card { max-width:520px; text-align:left; }
.install-card h1 { text-align:left; }
.or-line { display:flex; align-items:center; gap:10px; color:var(--muted-2); font-size:.8rem; margin:18px 0 4px; }
.or-line::before, .or-line::after { content:""; flex:1; height:1px; background:var(--line); }

/* ---------- Settings ---------- */
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:780px){ .settings-grid { grid-template-columns:1fr; } }
.settings-grid .panel { padding:18px 20px; }
.copy-uri { display:flex; align-items:center; gap:8px; background:#f6f7f5; border:1px solid var(--line); border-radius:7px; padding:7px 10px; word-break:break-all; }

/* ============================================================
   Global safety + responsive hardening
   ============================================================ */
img { max-width:100%; }
.topbar img.brand-logo, .brand img { display:block; }
.wrap { width:100%; }
table { max-width:100%; }

/* Topbar wraps gracefully and never blows up the avatar */
.topbar { flex-wrap:wrap; row-gap:8px; }
.topbar-right { flex-wrap:wrap; gap:12px; }

@media (max-width:680px){
  .topbar { gap:12px; padding:9px 16px; }
  .topbar-right { gap:10px; }
  .top-link { font-size:.86rem; }
  .wrap { padding:16px 16px 50px; }
  .crumbs { order:3; flex-basis:100%; margin-top:2px; }
  .page-head h1 { font-size:1.4rem; }
  .tabs { gap:2px; }
  .tab { padding:8px 10px; font-size:.88rem; }
  .modal { padding:20px 12px; }
  .modal-box { padding:18px 16px; }
  .head-actions { width:100%; }
  .cards { grid-template-columns:1fr; }
  .settings-grid, .cred-grid, .cred-list, .asset-grid { grid-template-columns:1fr; }
  .device-pick { gap:10px 16px; }
}
@media (max-width:420px){
  .brand img { height:26px; width:auto; }
  .btn { padding:8px 12px; font-size:.86rem; }
  .stamp { font-size:.62rem; padding:3px 6px; }
}

/* ============================================================
   PUBLIC / LANDING / LEGAL  (marketing + SEO/GEO surfaces)
   ============================================================ */
.pub-body { background:var(--paper); }
.pub-nav { display:flex; align-items:center; gap:20px; max-width:1120px; margin:0 auto; padding:16px 24px; }
.pub-nav .brand img { height:30px; width:auto; }
.pub-nav-links { margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pub-nav-links a { color:var(--muted); font-weight:500; font-size:.92rem; }
.pub-nav-links a:hover { color:var(--ink); text-decoration:none; }
.pub-wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.pub-section { padding:56px 0; }
.pub-section + .pub-section { border-top:1px solid var(--line); }
.eyebrow { display:inline-block; font:600 .72rem var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--brand); background:#e4f0f1; padding:5px 11px; border-radius:20px; }

/* Hero */
.hero { background:linear-gradient(170deg,#0c4147 0%,#11565e 55%,#0a3a40 100%); color:#fff; }
.hero .pub-nav .brand img { filter:brightness(0) invert(1); }
.hero .pub-nav-links a { color:rgba(255,255,255,.8); }
.hero .pub-nav-links a:hover { color:#fff; }
.hero-inner { max-width:1120px; margin:0 auto; padding:54px 24px 70px; }
.hero h1 { font-size:clamp(2rem,4.6vw,3.3rem); line-height:1.08; color:#fff; max-width:14ch; margin:18px 0 0; }
.hero h1 .accent { color:var(--amber); }
.hero-sub { font-size:clamp(1.02rem,1.6vw,1.22rem); color:rgba(255,255,255,.86); max-width:54ch; margin:18px 0 0; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.btn-amber { background:var(--amber); border-color:var(--amber); color:#3a2c05; font-weight:600; }
.btn-amber:hover { background:#ffc94f; border-color:#ffc94f; }
.btn-ghost-light { background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.btn-ghost-light:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.hero-eyebrow { color:var(--amber); background:rgba(244,185,66,.16); }
.hero-trust { display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; color:rgba(255,255,255,.8); font-size:.86rem; }
.hero-trust b { color:#fff; font-family:var(--font-display); }

/* Feature grid */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:34px; }
.feature { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); }
.feature .ficon { width:42px; height:42px; border-radius:10px; background:#e4f0f1; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:13px; }
.feature h3 { margin:0 0 6px; }
.feature p { color:var(--muted); margin:0; font-size:.94rem; }
.section-title-block { max-width:62ch; }
.section-title-block h2 { font-size:clamp(1.5rem,2.6vw,2rem); margin-top:10px; }
.section-title-block p { color:var(--muted); font-size:1.02rem; }

/* How it works steps */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:30px; counter-reset:step; }
.step { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:relative; }
.step::before { counter-increment:step; content:counter(step); position:absolute; top:-14px; left:18px; width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; }
.step h3 { margin:8px 0 5px; }
.step p { color:var(--muted); font-size:.92rem; margin:0; }

/* FAQ (AEO/GEO) */
.faq-list { margin-top:26px; max-width:820px; }
.faq-item { border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:4px 18px; margin-bottom:10px; }
.faq-item summary { cursor:pointer; font-weight:600; font-family:var(--font-display); padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color:var(--brand); font-size:1.3rem; line-height:1; }
.faq-item[open] summary::after { content:"–"; }
.faq-item p { color:var(--muted); margin:0 0 14px; }

/* CTA band */
.cta-band { background:var(--ink); color:#fff; border-radius:16px; padding:42px 36px; text-align:center; margin:18px 0; }
.cta-band h2 { color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); }
.cta-band p { color:rgba(255,255,255,.8); max-width:52ch; margin:10px auto 22px; }

/* Public footer */
.pub-footer { border-top:1px solid var(--line); }
.pub-footer-inner { max-width:1120px; margin:0 auto; padding:34px 24px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.pub-footer .brand img { height:26px; width:auto; }
.pub-footer-col h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin:0 0 10px; }
.pub-footer-col a { display:block; color:var(--muted); font-size:.9rem; padding:3px 0; }
.pub-footer-col a:hover { color:var(--ink); text-decoration:none; }
.pub-foot-bottom { border-top:1px solid var(--line); padding:16px 24px; text-align:center; color:var(--muted-2); font-size:.82rem; }

/* Legal / doc pages */
.doc-wrap { max-width:780px; margin:0 auto; padding:30px 24px 70px; }
.doc-wrap h1 { font-size:2rem; }
.doc-wrap h2 { margin-top:30px; font-size:1.2rem; }
.doc-wrap p, .doc-wrap li { color:#2a3138; line-height:1.7; }
.doc-meta { color:var(--muted); font-size:.86rem; margin-bottom:26px; }

/* Users admin table */
.tbl { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.tbl th, .tbl td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:middle; }
.tbl th { background:#f6f7f5; font-family:var(--font-display); font-size:.82rem; color:var(--muted); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:#fafbf9; }
.tbl .num { text-align:right; font-family:var(--font-mono); font-size:.82rem; }
.badge-admin { font-size:.68rem; font-weight:700; background:#171d24; color:#fff; padding:2px 7px; border-radius:9px; }
.badge-google { font-size:.68rem; background:#e4f0f1; color:var(--brand); padding:2px 7px; border-radius:9px; }
.table-scroll { overflow-x:auto; }
.user-meta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:14px 0 24px; }
.user-stat { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 16px; }
.user-stat .n { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--brand); }
.user-stat .l { color:var(--muted); font-size:.8rem; }

@media (max-width:680px){
  .pub-section { padding:40px 0; }
  .hero-inner { padding:36px 18px 50px; }
  .pub-nav { padding:14px 18px; }
  .pub-nav-links { gap:12px; }
  .pub-wrap, .pub-footer-inner { padding-left:18px; padding-right:18px; }
  .cta-band { padding:32px 20px; }
}

/* ============================================================
   Test-data generator (floating helper)
   ============================================================ */
.tdg-fab { position:fixed; right:20px; bottom:20px; width:50px; height:50px; border-radius:50%; border:none; background:var(--brand); color:#fff; font-size:1.35rem; cursor:pointer; box-shadow:0 6px 20px rgba(12,65,71,.4); z-index:55; transition:transform .12s, background .15s; }
.tdg-fab:hover { transform:translateY(-2px) scale(1.04); background:var(--brand-ink); }
.tdg { position:fixed; right:20px; bottom:82px; width:320px; max-width:calc(100vw - 32px); background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px rgba(20,26,32,.28); z-index:56; padding:16px; }
.tdg[hidden] { display:none; }
.tdg-head { display:flex; align-items:center; justify-content:space-between; }
.tdg-head strong { font-family:var(--font-display); font-size:1rem; }
.tdg-x { background:none; border:none; font-size:1.4rem; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }
.tdg-x:hover { color:var(--ink); }
.tdg-hint { color:var(--muted); font-size:.78rem; margin:6px 0 12px; }
.tdg-rows { display:flex; flex-direction:column; gap:7px; max-height:50vh; overflow:auto; }
.tdg-row { display:flex; align-items:center; gap:9px; }
.tdg-k { font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted-2); width:74px; flex:none; }
.tdg-v { flex:1; min-width:0; background:#f6f7f5; border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-family:var(--font-mono); font-size:.78rem; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:border-color .12s, background .12s; }
.tdg-v:hover { border-color:var(--brand); background:#eef5f4; }
.tdg-v.copied { border-color:var(--pass); background:var(--pass-bg); }
.tdg-actions { margin-top:12px; }
@media (max-width:480px){ .tdg { right:12px; left:12px; width:auto; } .tdg-fab { right:14px; bottom:14px; } }

/* ============================================================
   Landing "wow" upgrades — split hero, mockup, showcase
   ============================================================ */
.hero { position:relative; overflow:hidden; }
.hero-glow { position:absolute; top:-180px; right:-120px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(244,185,66,.28) 0%, rgba(244,185,66,0) 68%); pointer-events:none; }
.hero-inner { position:relative; z-index:1; }
.hero-split { display:grid; grid-template-columns:1.05fr .95fr; gap:46px; align-items:center; padding-top:30px; padding-bottom:64px; }
.hero-copy h1 { max-width:16ch; }
.hero-art { display:flex; justify-content:center; }
.hero-art .mock { width:100%; max-width:520px; height:auto; transform:perspective(1300px) rotateY(-7deg) rotateX(3deg); }
.section-title-block.center { margin-left:auto; margin-right:auto; text-align:center; }

/* feature card polish */
.feature { transition:transform .14s, box-shadow .14s, border-color .14s; }
.feature:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(20,26,32,.10); border-color:#cfe0e0; }

/* showcase alternating block */
.showcase-section { background:linear-gradient(180deg,#fff,#f1f3f0); }
.showcase { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.showcase-text h2 { font-size:clamp(1.5rem,2.6vw,2rem); margin-top:10px; }
.showcase-text p { color:var(--muted); font-size:1.02rem; }
.showcase-art { display:flex; justify-content:center; }
.showcase-art .mock { width:100%; max-width:480px; height:auto; border-radius:14px; }
.check-points { list-style:none; padding:0; margin:18px 0 0; }
.check-points li { position:relative; padding:7px 0 7px 28px; color:var(--ink); font-weight:500; }
.check-points li::before { content:"✓"; position:absolute; left:0; top:7px; width:18px; height:18px; border-radius:50%; background:var(--pass-bg); color:var(--pass); font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* cta band glow */
.cta-band { position:relative; overflow:hidden; }
.cta-band > * { position:relative; z-index:1; }
.cta-band::after { content:""; position:absolute; bottom:-120px; left:50%; transform:translateX(-50%); width:480px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(17,86,94,.55) 0%, rgba(17,86,94,0) 70%); z-index:0; }

@media (max-width:860px){
  .hero-split { grid-template-columns:1fr; gap:30px; text-align:center; padding-bottom:48px; }
  .hero-copy h1 { max-width:none; margin-left:auto; margin-right:auto; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-cta, .hero-trust { justify-content:center; }
  .hero-art .mock { transform:none; max-width:460px; }
  .hero-glow { right:-160px; top:-220px; }
  .showcase { grid-template-columns:1fr; gap:26px; }
  .showcase-art { order:-1; }
}

/* ============================================================
   Long-text overflow safety + code blocks + project logo
   ============================================================ */
/* Nothing user-entered should break out of its box or widen the page */
.task-details, .cp-note, .row-main, .snippet-card, .feature p, .step p,
.cred-notes, .t-body, .hero-sub { overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
.task-title, .task-title strong { min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.task-head { flex-wrap:wrap; }

/* Code field input (modal) */
.code-input { font-family:var(--font-mono); font-size:.82rem; line-height:1.5; white-space:pre; tab-size:2; }

/* Collapsible code block in list views */
.code-block { margin-top:9px; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.code-block > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:8px 11px; background:#f3f5f2; user-select:none; }
.code-block > summary::-webkit-details-marker { display:none; }
.code-block > summary:hover { background:#eaeee9; }
.code-ico { color:var(--brand); font-weight:600; flex:none; }
.code-peek { color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.code-meta { color:var(--muted-2); flex:none; }
.code-block[open] > summary { border-bottom:1px solid var(--line); }
.code-wrap { position:relative; }
.code-copy { position:absolute; top:8px; right:8px; z-index:2; background:#1b2b35; color:#cfe5e7; border-color:#2c4250; }
.code-copy:hover { background:#24333d; border-color:#3a4f5d; color:#fff; }
.code-pre { margin:0; padding:13px 14px; overflow-x:auto; max-width:100%; background:#11202a; color:#d6e2e8;
  font-family:var(--font-mono); font-size:.8rem; line-height:1.55; white-space:pre; tab-size:2; }
.code-pre code { font-family:inherit; }

/* Project logo control (theme tab) */
.logo-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.logo-preview { width:120px; height:64px; border:1px solid var(--line); border-radius:9px; background:#f6f7f5; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; }
.logo-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.logo-preview.empty { color:var(--muted-2); font-size:.78rem; text-align:center; padding:6px; }
.logo-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ============================================================
   Navigation, card-url overflow & responsive polish (v3)
   ============================================================ */
.topbar-left { display:flex; align-items:center; gap:16px; min-width:0; flex:1 1 auto; }
.back-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); color:var(--ink); font-size:1.15rem; line-height:1; background:var(--panel); flex:none; transition:background .12s, border-color .12s, transform .12s; }
.back-btn:hover { background:#eef1ec; border-color:var(--brand); text-decoration:none; transform:translateX(-1px); }
.crumbs { min-width:0; }
.crumbs a, .crumb-here { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34ch; display:inline-block; vertical-align:bottom; }

/* card URL must never break out of the card */
.card-url { overflow-wrap:anywhere; word-break:break-all; line-height:1.35; }

/* production-feel hover on project cards */
.project-card { transition:transform .14s, box-shadow .14s, border-color .14s; }
.project-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(20,26,32,.10); border-color:#cfe0e0; text-decoration:none; }

/* Tablet */
@media (max-width:1024px){
  .wrap, .container { padding-left:18px; padding-right:18px; }
}

/* Mobile: topbar crumbs to their own scrollable row, full-width header actions */
@media (max-width:680px){
  .topbar-left { flex-wrap:wrap; gap:10px; }
  .crumbs { order:3; flex-basis:100%; margin-top:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
  .crumbs a, .crumb-here { max-width:22ch; }
  .head-actions { width:100%; }
  .head-actions .btn { flex:1 1 auto; justify-content:center; min-width:0; }
}

/* Small phones: stack task/checkpoint rows so action buttons don't crowd the title */
@media (max-width:560px){
  .task-head { flex-wrap:wrap; }
  .task-actions { width:100%; justify-content:flex-start; margin-top:4px; }
  .task-actions .status-select { flex:1 1 auto; }
  .mini-label { font-size:.7rem; }
  .card-foot { flex-direction:column; gap:2px; align-items:flex-start; }
}