:root{
  --brand:#2f6fed;
  --brand-dark:#1e4fc4;
  --brand-light:#eaf1ff;
  --accent:var(--brand);
  --chrome:#111827;
  --chrome-dark:#0a0f1c;
  --ink:#0f172a;
  --muted:#667085;
  --line:#e5e7eb;
  --bg:#f7f8fa;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
@media (max-width:480px){html{font-size:14px}}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  font-size:.94rem;
}

/* Bootstrap's default heading sizes are built for desktop docs — scale them down
   so they don't dominate a small phone screen. */
h1{font-size:1.5rem}
h2{font-size:1.35rem}
h3{font-size:1.22rem}
h4{font-size:1.12rem}
h5{font-size:1.02rem}
h6{font-size:.92rem}
.section-title{font-size:1.15rem}
.auth-card h4{font-size:1.2rem}
.auth-logo{font-size:2rem}
label,.form-label{font-size:.85rem}
.btn{font-size:.88rem}
.btn-lg{font-size:.95rem}
.form-control,.form-select{font-size:.9rem}
.card-body p, .card-body .text-muted{font-size:.85rem}

/* iOS Safari auto-zooms the whole page when a focused field's font-size is under 16px —
   force real inputs (not buttons/labels) to 16px on phones so focusing never triggers it. */
@media (max-width:480px){
  input.form-control, textarea.form-control, select.form-select,
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="date"]{
    font-size:16px;
  }
}

/* Bootstrap Icons: pin every icon glyph to the surrounding text's own size/line-height
   and give it correct baseline alignment. Without this, an icon can render oversized and
   out of line with its label (especially during the split second the icon webfont is still
   loading) since the glyph's own font metrics differ wildly from body text. */
[class^="bi-"], [class*=" bi-"]{
  font-size:1em;
  line-height:1;
  vertical-align:-.125em;
  display:inline-block;
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-align:center}
.btn-group .btn{display:inline-flex}
/* Icon-only buttons (view toggle, export, table row actions) read as too small otherwise —
   give their glyph a modest fixed size regardless of the button's own (small) font-size. */
.toolbar-actions .btn i, .view-toggle .btn i,
.product-table .btn i, .capture-actions .btn i{font-size:1rem}
/* "-lg" icon variants (bi-plus-lg etc.) are drawn bold/oversized in the icon font itself —
   dial them back down so a "+" reads as a normal-weight icon, not a chunky logo mark. */
.btn i.bi-plus-lg, .add-reference-btn i.bi-plus-lg{font-size:.85em}
body.has-bottom-nav{padding-bottom:0}
a{text-decoration:none}

/* ---------- Top navbar (mobile only — desktop uses the sidebar below) ---------- */
.app-navbar{background:var(--chrome);box-shadow:0 2px 10px rgba(0,0,0,.15);padding-top:.5rem;padding-bottom:.5rem;flex-wrap:nowrap}
.app-navbar .container-fluid{flex-wrap:nowrap;display:flex;align-items:center;justify-content:space-between}
.app-navbar .navbar-brand{
  color:#fff;font-size:1.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:70vw;flex-shrink:1;min-width:0;
}
.avatar-badge{
  width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0;
}
.account-btn{
  display:inline-flex;align-items:center;gap:.5rem;background:transparent;border:none;
  color:#fff;padding:.25rem .3rem;border-radius:20px;flex-shrink:0;
}
.account-btn:hover,.account-btn:focus{background:rgba(255,255,255,.1)}
.account-btn .account-name{font-weight:500;font-size:.88rem}
.account-btn .bi-chevron-down{font-size:.75rem;color:rgba(255,255,255,.6)}

.app-main{min-height:calc(100vh - 56px);padding-bottom:90px}

/* ---------- Desktop left sidebar ---------- */
.app-sidebar{
  position:fixed;top:0;left:0;bottom:0;width:230px;background:var(--chrome);
  flex-direction:column;padding:1.1rem .9rem;z-index:1030;overflow-y:auto;
}
.sidebar-brand{
  color:#fff;font-weight:700;font-size:1.05rem;display:block;margin-bottom:1.5rem;
  text-decoration:none;line-height:1.25;
}
.sidebar-nav{display:flex;flex-direction:column;gap:.2rem;flex:1}
.sidebar-link{
  color:rgba(255,255,255,.72);padding:.65rem .8rem;border-radius:10px;
  display:flex;align-items:center;gap:.65rem;font-weight:500;font-size:.88rem;text-decoration:none;
}
.sidebar-link.active,.sidebar-link:hover{background:rgba(47,111,237,.28);color:#fff}
.sidebar-account{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12)}
.sidebar-account .account-btn{width:100%;color:#fff;padding:.5rem}
.sidebar-account .account-name{flex:1;text-align:left;font-size:.85rem}
.sidebar-account .dropdown-menu{width:100%}

@media (min-width:768px){
  .app-main{margin-left:230px;min-height:100vh;padding-bottom:2rem}
}

/* ---------- Bottom mobile nav ---------- */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:1030;
  background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:stretch;justify-content:space-between;
  padding:4px max(4px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
.bottom-nav a{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--muted);text-decoration:none;padding:7px 2px 6px;border-radius:12px;
}
.bottom-nav a .icon-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:26px}
.bottom-nav a i{font-size:23px;line-height:1}
.bottom-nav a .label{font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}
.bottom-nav a.active{color:var(--brand)}
.bottom-nav a.active .icon-wrap{color:var(--brand)}
.dot-badge{
  position:absolute;top:-4px;right:-9px;background:#dc3545;color:#fff;font-size:.6rem;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:2px solid #fff;
}

/* ---------- Cards / general ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius)}
.btn{border-radius:10px;font-weight:600}
/* Regular buttons read as too cramped on a phone — give them a bigger tap target.
   Icon-only/compact buttons (toolbar, table actions, view toggle) set their own sizing
   with more specific selectors below, so they aren't affected by this. */
@media (max-width:480px){
  .btn{font-size:.95rem;padding:.6rem 1.1rem}
  .btn-sm{font-size:.86rem;padding:.45rem .8rem}
}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.form-control,.form-select{border-radius:10px;border-color:#d7dbdf;padding:.6rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(47,111,237,.15)}
.section-title{font-weight:700;letter-spacing:.2px}
.page-head{padding:1rem 0 .25rem}

/* ---------- Product grid ---------- */
.product-card{
  border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);
  transition:box-shadow .15s, transform .15s;height:100%;
}
.product-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.product-thumb{
  aspect-ratio:1/1;background:#eef1f0 center/cover no-repeat;position:relative;
  display:flex;align-items:center;justify-content:center;color:#b7bdba;font-size:2rem;
}
.product-thumb .media-count{
  position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;
  font-size:.68rem;padding:2px 7px;border-radius:20px;
}
.badge-draft{
  display:inline-block;background:#fff4e0;color:#92640a;font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;padding:1px 6px;border-radius:10px;vertical-align:middle;
}
.product-thumb .idea-flag{
  position:absolute;top:6px;right:6px;background:var(--brand);color:#fff;
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;
}
.product-card .body{padding:.65rem .75rem .8rem}
.product-card .name{font-weight:600;font-size:.92rem;margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-card .sku{color:var(--muted);font-size:.72rem}
.product-card .prices{display:flex;justify-content:space-between;margin-top:.4rem;font-size:.8rem}
.select-check{
  position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:9px;background:#fff;
  border:2px solid #d7dbd9;display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.select-check input{width:22px;height:22px;cursor:pointer}

/* ---------- Product table (desktop table, mobile stacked cards) ---------- */
.product-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.product-table th{background:var(--brand-light);color:var(--brand-dark);font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;padding:.7rem .8rem;text-align:left;white-space:nowrap}
.product-table td{padding:.6rem .8rem;border-top:1px solid var(--line);vertical-align:middle;font-size:.88rem}
.product-table tr:hover td{background:#fafdfb}
.table-thumb{width:46px;height:46px;border-radius:8px;object-fit:cover;background:#eef1f0}

@media (max-width:767.98px){
  .table-responsive-cards thead{display:none}
  .table-responsive-cards, .table-responsive-cards tbody, .table-responsive-cards tr, .table-responsive-cards td{display:block;width:100%}
  .table-responsive-cards tr{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.7rem;padding:.6rem .8rem;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
  }
  .table-responsive-cards td{border:none;padding:.28rem 0;display:flex;justify-content:space-between;gap:.5rem;font-size:.86rem}
  .table-responsive-cards td::before{content:attr(data-label);color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.3px;flex:0 0 auto}
  .table-responsive-cards td.cell-main{padding-bottom:.5rem;margin-bottom:.35rem;border-bottom:1px solid var(--line)}
  .table-responsive-cards td.cell-main::before{content:none}

  .table-responsive-cards td.cell-select{padding-bottom:.1rem}
  .table-responsive-cards .table-check{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;margin:-.4rem -.4rem 0 0;cursor:pointer;
  }
  .table-responsive-cards .table-check input{width:22px;height:22px;cursor:pointer}

  .table-responsive-cards td.cell-actions{padding-top:.6rem;margin-top:.4rem;border-top:1px solid var(--line)}
  .table-responsive-cards td.cell-actions::before{content:none}
  .table-responsive-cards .actions-row{display:flex;gap:.6rem;width:100%}
  .table-responsive-cards .actions-row .btn{flex:1;padding:.5rem;font-size:.85rem}
}
.actions-row{display:flex;gap:.5rem}

/* ---------- View toggle ---------- */
.view-toggle .btn{padding:.5rem .85rem}
.view-toggle .btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- Products toolbar (title row + search row) ---------- */
.page-head{flex-wrap:wrap;row-gap:.5rem}
.page-head h4{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolbar-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.toolbar-actions > .btn-group .btn, .toolbar-actions > .dropdown > .btn{height:38px;width:38px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.search-toolbar{display:flex;gap:.5rem;align-items:stretch}
.search-toolbar .input-group{flex:1 1 auto;min-width:0}
.search-toolbar .status-select{flex:0 0 auto;width:auto;max-width:150px}
@media (max-width:420px){
  .search-toolbar{flex-wrap:wrap}
  .search-toolbar .input-group{flex-basis:100%}
  .search-toolbar .status-select{flex:1 1 auto;max-width:none}
}

/* ---------- Color swatch picker (horizontal scroll strip, not a grid — keeps the form short) ---------- */
.color-swatch-grid{
  display:flex;flex-wrap:nowrap;gap:.65rem;overflow-x:auto;padding:.15rem .1rem .6rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.color-swatch-grid::-webkit-scrollbar{height:4px}
.color-swatch-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.color-swatch{
  width:34px;height:34px;border-radius:50%;border:none;padding:0;cursor:pointer;position:relative;
  box-shadow:0 0 0 1.5px #d7dbd9,0 1px 3px rgba(0,0,0,.08);flex:0 0 auto;scroll-snap-align:start;
}
.color-swatch.light-swatch{box-shadow:0 0 0 1.5px #b7bdba}
.color-swatch.selected{box-shadow:0 0 0 2.5px var(--brand)}
.color-swatch.selected::after{
  content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.85rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.color-swatch.light-swatch.selected::after{color:#111;text-shadow:none}
.selected-colors-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.65rem}
.color-chip{
  background:var(--brand-light);color:var(--brand-dark);border-radius:20px;padding:.28rem .55rem .28rem .75rem;
  font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;
}
.color-chip button{border:none;background:transparent;color:var(--brand-dark);font-size:1rem;line-height:1;padding:0}

/* ---------- Photo/video capture ---------- */
.capture-zone{
  border:2px dashed #c9d1cd;border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;background:#fafcfb;
}
.capture-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.75rem}
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem;margin-top:1rem}
.thumb-item{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#eef1f0}
.thumb-item img,.thumb-item video{width:100%;height:100%;object-fit:cover}
.thumb-item .remove-btn{
  position:absolute;top:4px;right:4px;background:rgba(0,0,0,.65);color:#fff;border:none;
  width:22px;height:22px;border-radius:50%;font-size:.75rem;line-height:1;display:flex;align-items:center;justify-content:center;
}
.thumb-item .badge-primary-photo{position:absolute;bottom:4px;left:4px;background:var(--accent);color:#fff;font-size:.6rem;padding:1px 6px;border-radius:20px}
.thumb-item.video-thumb::after{content:"▶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;background:rgba(0,0,0,.25)}

/* Business card photo: a single preview slot, not a grid */
.card-photo-preview{width:120px;margin-bottom:.6rem}

/* ---------- Autosave status pill ---------- */
.autosave-status{
  font-size:.72rem;font-weight:600;color:var(--muted);white-space:nowrap;flex-shrink:0;
  padding:.25rem .6rem;border-radius:20px;background:#f0f1f3;
}
.autosave-status.pending{background:#fff4e0;color:#92640a}
.autosave-status.saving{background:var(--brand-light);color:var(--brand-dark)}
.autosave-status.saved{background:#e7f7ed;color:#0f7a3d}
.autosave-status.error{background:#fde8e8;color:#b42318}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--chrome) 0%, #16233f 55%, var(--brand-dark) 130%);padding:1.5rem}
.auth-card{max-width:400px;width:100%;background:#fff;border-radius:18px;padding:2rem 1.75rem;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.auth-logo{font-size:2.4rem;text-align:center;margin-bottom:.25rem}

/* Sticky bulk-select action bar */
.bulk-bar{
  position:fixed;left:0;right:0;bottom:64px;z-index:1025;background:var(--brand-dark);color:#fff;
  padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  box-shadow:0 -4px 16px rgba(0,0,0,.2);
}
@media (min-width:768px){.bulk-bar{bottom:0}}

.empty-state{text-align:center;padding:3.5rem 1rem;color:var(--muted)}
.empty-state i{font-size:2.6rem;color:#c9d1cd}

.stat-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.75rem .85rem}
.stat-tile .num{font-size:1.2rem;font-weight:700;color:var(--brand-dark)}
.stat-tile .label{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.text-accent{color:var(--accent)}

/* ---------- Native-style dense list (Ideas list, etc.) ---------- */
.native-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.native-list-row{
  display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);
  color:var(--ink);background:#fff;transition:background .1s;
}
.native-list-row:last-child{border-bottom:none}
.native-list-row:active,.native-list-row:hover{background:#f5f6f8;color:var(--ink)}
.native-list-thumb{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;background:#eef1f0 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;color:#b7bdba;font-size:1.05rem;
}
.native-list-body{flex:1 1 auto;min-width:0}
.native-list-title{display:block;font-weight:600;font-size:.87rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.native-list-meta{display:block;font-size:.72rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.native-list-chevron{color:#c3c8cf;font-size:.85rem;flex-shrink:0}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-dot.open{background:#f59e0b}
.status-dot.fulfilled{background:#16a34a}
.status-dot.closed{background:#9ca3af}

/* ---------- Ideas / market-reference comparison ---------- */
.compare-block{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;position:relative;
}
.compare-block.response-block{border-left:3px solid var(--brand);cursor:pointer}
.compare-label{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-light);color:var(--brand-dark);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:.25rem .6rem;
  border-radius:20px;margin-bottom:.7rem;
}
.compare-label.response-label{background:#eef1f5;color:#334155}
.response-summary{display:flex;align-items:center;gap:.7rem;cursor:pointer}
.response-summary-thumb{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;background:#eef1f0 center/cover no-repeat;
}
.response-summary-body{flex:1 1 auto;min-width:0}
.response-detail{display:none;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line)}
.response-block.expanded .response-detail{display:block}
.response-block.expanded .response-summary .bi-chevron-down{transform:rotate(180deg)}
.response-summary .bi-chevron-down{transition:transform .15s;color:#c3c8cf;flex-shrink:0}

/* ---------- Slide-up bottom sheet (native-app style detail screen) ---------- */
.app-sheet-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1050;display:none;
  opacity:0;transition:opacity .18s ease;
}
.app-sheet-overlay.open{display:block;opacity:1}
.app-sheet{
  position:fixed;left:0;right:0;bottom:0;max-width:760px;margin:0 auto;
  background:var(--bg);border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);
  max-height:92vh;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .22s cubic-bezier(.32,.72,0,1);
}
.app-sheet-overlay.open .app-sheet{transform:translateY(0)}
.app-sheet-handle{width:36px;height:4px;background:#d7dbdf;border-radius:3px;margin:10px auto 0}
.app-sheet-close{
  position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;border:none;
  background:#eef0f3;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.9rem;z-index:2;
}
.app-sheet-body{overflow-y:auto;padding:2.2rem 1rem 2rem;-webkit-overflow-scrolling:touch}
body.sheet-open{overflow:hidden}

/* "+" action to add a market reference, placed at the right of the section header as asked */
.add-reference-btn{
  width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;
  box-shadow:0 3px 10px rgba(47,111,237,.4);
}
.add-reference-btn:hover{background:var(--brand-dark);color:#fff}

/* Inside the slide-up sheet the sheet chrome already provides a close (×) button,
   so hide the inline "back to ideas" link to avoid two redundant exits.
   (!important needed: the link also carries Bootstrap's .d-inline-block utility, which is !important itself.) */
.app-sheet-body .back-link{display:none!important}