/* Grasshopper Dojo — dark, clean, mobile-first */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0b0f14; --panel:#12181f; --panel2:#0f141a; --border:#1f2933;
  --text:#e6edf3; --muted:#8892a4; --accent:#34d399; --accent2:#22d3ee; --danger:#f87171;
}
html,body { max-width:100%; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:15px; }
.hidden { display:none !important; }
.view { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.logo { font-size:22px; font-weight:800; letter-spacing:-0.5px; }
.logo span { color:var(--accent2); }
.logo.small { font-size:17px; }
.tagline { color:var(--muted); margin-top:6px; font-size:14px; }
.login-card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:32px; width:100%; max-width:400px; text-align:center; }
.login-card .logo-block { margin-bottom:20px; }
.login-card input { width:100%; padding:12px 14px; margin:8px 0; border-radius:10px; border:1px solid var(--border); background:var(--panel2); color:var(--text); font-size:15px; }
.tabs { display:flex; gap:8px; margin-bottom:12px; }
.tab { flex:1; padding:10px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:14px; }
.tab.active { background:var(--panel2); color:var(--text); border-color:var(--accent); }
.btn-primary { width:100%; padding:12px 16px; border:none; border-radius:10px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#06231a; font-weight:700; font-size:15px; cursor:pointer; margin-top:8px; }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.ghost { background:transparent; border:1px solid var(--border); color:var(--muted); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:13px; }
.msg { min-height:20px; margin-top:10px; font-size:13px; color:var(--muted); }
.msg.err { color:var(--danger); }
.msg.ok { color:var(--accent); }
.owner-link { margin-top:16px; font-size:13px; }
.owner-link a { color:var(--muted); }
.topbar { display:flex; align-items:center; gap:16px; padding:10px 24px; border-bottom:1px solid var(--border); background:var(--panel); position:sticky; top:0; z-index:10; }
.topbar nav { display:flex; gap:6px; flex:1; flex-wrap:wrap; }
.nav-btn { background:transparent; border:none; color:var(--muted); padding:8px 12px; border-radius:8px; cursor:pointer; font-size:14px; }
.nav-btn.active { color:var(--text); background:var(--panel2); }
.userchip { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-left:auto; }
.userchip .code { background:var(--panel2); padding:3px 8px; border-radius:6px; font-family:monospace; font-size:11px; }
.userchip .ghost { font-size:12px; padding:4px 12px; border-radius:6px; }
.content { max-width:980px; margin:0 auto; padding:24px 20px 80px; }
.greeting { margin-bottom:20px; }
.greeting h1 { font-size:24px; }
.greeting p { color:var(--muted); margin-top:4px; }
.product-section { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px; margin-bottom:18px; }
.product-section h3 { display:flex; align-items:center; gap:8px; font-size:18px; }
.product-section h3 .open-link { margin-left:auto; font-size:12px; color:var(--accent2); text-decoration:none; font-weight:600; }
.product-section h3 .open-link:hover { text-decoration:underline; }
.product-section .badge { background:var(--panel2); color:var(--accent); border:1px solid var(--border); font-size:11px; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:0.5px; }
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:14px 0; }
.stat-card { background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:14px; }
.stat-card .num { font-size:26px; font-weight:800; color:var(--accent); }
.stat-card .lbl { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; }
table { width:100%; border-collapse:collapse; margin-top:10px; font-size:14px; }
.table-wrap { overflow-x:auto; }
th,td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
.feed { list-style:none; margin-top:10px; }
.feed li { padding:10px 0; border-bottom:1px solid var(--border); display:flex; gap:10px; font-size:14px; }
.feed .dot { flex:0 0 8px; height:8px; border-radius:50%; background:var(--accent); margin-top:6px; }
.feed .dot.warn { background:#fbbf24; }
.feed .dot.done { background:var(--accent2); }
.feed .t { font-weight:600; }
.feed .d { color:var(--muted); font-size:13px; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:18px; }
.product-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:8px; }
.product-card .price { font-size:24px; font-weight:800; color:var(--accent); }
.product-card .price small { font-size:13px; color:var(--muted); font-weight:400; }
.product-card .desc { color:var(--muted); font-size:13px; flex:1; }
.product-card.owned { border-color:var(--accent); }
.product-card .owned-tag { color:var(--accent); font-size:12px; font-weight:700; }
.card-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.owner-client { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; }
.owner-client .row1 { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.owner-client .prod { font-size:12px; color:var(--accent); }
.chat-drawer { position:fixed; right:12px; bottom:12px; left:12px; width:auto; height:min(62vh,480px); background:var(--panel); border:1px solid var(--border); border-radius:14px; display:flex; flex-direction:column; z-index:50; overflow:hidden; }
.chat-head { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); font-weight:600; font-size:14px; flex:0 0 auto; }
.chat-body { flex:1 1 auto; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:14px; min-height:0; }
.chat-body .msg-b { background:var(--panel2); border:1px solid var(--border); padding:9px 12px; border-radius:10px; max-width:90%; white-space:pre-wrap; }
.chat-body .msg-b.user { align-self:flex-end; background:#0d2b21; border-color:#14532d; }
.chat-input-row { display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); flex:0 0 auto; }
.chat-input-row input { flex:1; padding:10px; border-radius:8px; border:1px solid var(--border); background:var(--panel2); color:var(--text); }
.chat-input-row .btn-primary { margin:0; width:auto; padding:10px 16px; }
.sub { color:var(--muted); font-size:14px; margin-top:4px; }
.btn-sm { padding:8px 14px; font-size:13px; border:none; border-radius:8px; cursor:pointer; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#06231a; font-weight:700; margin-top:6px; }
.btn-sm:disabled { opacity:0.5; cursor:not-allowed; }
.btn-danger { background:transparent; border:1px solid var(--danger); color:var(--danger); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:12px; }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---- Product pages ---- */
.prod-page-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.prod-page-head h2 { font-size:22px; }
.prod-tabs { display:flex; gap:8px; margin:10px 0 16px; flex-wrap:wrap; }
.prod-tabs .chip { background:var(--panel2); border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer; }
.prod-tabs .chip.active { color:var(--text); border-color:var(--accent); }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:10px; }
.form-grid input, .form-grid select, .form-grid textarea { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--panel2); color:var(--text); font-size:14px; }
.form-grid textarea { grid-column:1 / -1; min-height:64px; font-family:inherit; }
.form-grid .full { grid-column:1 / -1; }
.label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; display:block; }
.actions-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.hint { color:var(--muted); font-size:13px; }
.hint code { background:var(--panel2); border:1px solid var(--border); padding:1px 6px; border-radius:5px; font-size:12px; }
.status-pill { font-size:11px; padding:2px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); }
.status-pill.live { color:var(--accent); border-color:var(--accent); }
details.acc { border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--panel2); }
details.acc summary { cursor:pointer; list-style:none; display:flex; gap:8px; align-items:center; }
details.acc summary::-webkit-details-marker { display:none; }
details.acc summary::before { content:'▸'; color:var(--accent2); transition:transform .15s; }
details.acc[open] summary::before { transform:rotate(90deg); }

/* ---- App shell: phone (default) ---- */
#view-app.view { display:block; padding:0; }
.shell { display:block; }
.sidebar { display:none; }
.snapshot-row { display:none; }
#feedPanel { display:none; }
.feed-filters { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 4px; }
.feed-filters .chip { background:var(--panel2); border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:4px 12px; font-size:12px; cursor:pointer; }
.feed-filters .chip.active { color:var(--text); border-color:var(--accent); }

/* ---- Desktop app layout (>= 768px): full sidebar ---- */
@media (min-width: 768px) {
  .view { padding: 0; }
  .login-card { max-width: 520px; padding: 40px 44px; border-radius: 20px; }
  .login-card .logo { font-size: 26px; }
  .shell { display:flex; min-height:100vh; }
  .sidebar { display:flex; flex-direction:column; width:240px; background:var(--panel); border-right:1px solid var(--border); position:fixed; top:0; bottom:0; left:0; padding:20px 14px; gap:6px; overflow-y:auto; flex-shrink:0; }
  .sidebar .logo { padding: 0 10px 16px; font-size: 18px; }
  .sidebar .nav-btn { white-space:nowrap; }
  .side-nav { display:flex; flex-direction:column; gap:2px; }
  .sidebar .nav-btn { text-align:left; width:100%; padding:10px 12px; font-size:14px; }
  .sidebar .nav-btn.active { background:var(--panel2); color:var(--text); }
  .prod-list { margin-top:18px; border-top:1px solid var(--border); padding-top:14px; display:flex; flex-direction:column; gap:2px; }
  .prod-list .lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; padding:0 10px 8px; }
  .prod-item { text-align:left; background:transparent; border:1px solid transparent; color:var(--muted); padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13px; white-space:nowrap; overflow:hidden; }
  .prod-item:hover { color:var(--text); background:var(--panel2); }
  .prod-item .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:8px; vertical-align:middle; }
  .prod-item .pname { display:inline-block; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
  .side-foot { margin-top:auto; display:flex; flex-direction:column; gap:8px; padding:0 2px; }
  .side-foot .code { font-family:monospace; font-size:12px; color:var(--muted); padding:0 10px; }
  .main-col { flex:1; margin-left:240px; display:flex; flex-direction:column; min-height:100vh; min-width:0; }
  .topbar { position:static; padding:10px 28px; }
  .topbar .logo { display:none; }
  .topbar nav { display:none; }
  .topbar .userchip .ghost { display:none; }
  .topbar .userchip .code { display:none; }
  .content { max-width:1280px; padding:28px 32px 80px; }
  .greeting h1 { font-size:26px; }
  .snapshot-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:22px; }
  .snapshot-row .stat-card { padding:14px 16px; }
  .snapshot-row .num { font-size:22px; }
  .product-sections.multi { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
  .product-sections.multi .product-section { margin-bottom:0; min-width:0; }
  .desktop-full { grid-column:1 / -1; min-width:0; }
  #feedPanel { display:block; }
  .chat-drawer { position:fixed; top:16px; bottom:16px; right:16px; left:auto; width:400px; height:auto; }
}

/* ── Pulse product ── */
.pulse-score-line { margin: 12px 0 8px; font-size: 14px; }
.pulse-score-line .ok { color: #6ee7b7; }
.pulse-score-line .warn { color: #fbbf24; }
.pulse-sources { width: 100%; margin: 8px 0 12px; border-collapse: collapse; }
.pulse-sources th, .pulse-sources td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(148,163,184,.15); font-size: 13px; }
.pulse-recs { background: rgba(110,231,183,.06); border: 1px solid rgba(110,231,183,.2); border-radius: 10px; padding: 10px 14px; margin: 8px 0; font-size: 13px; }
.pulse-recs ul { margin: 6px 0 0; padding-left: 18px; }
.pulse-chat { margin-top: 14px; border: 1px solid rgba(148,163,184,.2); border-radius: 12px; overflow: hidden; }
.pulse-chat-msgs { max-height: 240px; overflow-y: auto; padding: 10px 12px; background: rgba(15,23,42,.4); }
.pulse-msg { margin: 4px 0; padding: 7px 10px; border-radius: 10px; font-size: 13px; max-width: 85%; line-height: 1.45; }
.pulse-msg.user { background: rgba(110,231,183,.15); margin-left: auto; }
.pulse-msg.bot { background: rgba(148,163,184,.15); }
.pulse-chat-input { display: flex; gap: 8px; padding: 8px; background: rgba(15,23,42,.7); }
.pulse-chat-input input { flex: 1; background: #0f172a; border: 1px solid rgba(148,163,184,.3); color: #e6edf3; border-radius: 8px; padding: 8px 10px; font-size: 13px; }

/* Comply page */
.comply-add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.comply-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8892a4; }
.comply-field input { background: #0f172a; border: 1px solid rgba(148,163,184,.3); color: #e6edf3; border-radius: 8px; padding: 8px 10px; font-size: 13px; min-width: 150px; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; }
.doc-card { background: rgba(15,23,42,.6); border: 1px solid rgba(148,163,184,.25); border-radius: 10px; padding: 12px 14px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: #e6edf3; transition: border-color .15s; }
.doc-card:hover { border-color: rgba(110,231,183,.5); }
.doc-name { font-size: 13px; font-weight: 600; }
.doc-cat { font-size: 11px; color: #8892a4; text-transform: capitalize; }
.comply-chip { margin: 3px; }

/* Generated document preview — dark green-outline bubbles (Ryan 08-06) */
.doc-bubble { background: rgba(15,23,42,.75); border: 1px solid rgba(110,231,183,.4); border-radius: 12px; padding: 10px 14px; margin: 6px 0; font-size: 13px; line-height: 1.55; color: #d1d9e8; white-space: pre-wrap; word-break: break-word; }
.doc-bubble strong, .doc-bubble b { color: #6ee7b7; }
.doc-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.doc-back { background: rgba(110,231,183,.12); border: 1px solid rgba(110,231,183,.4); color: #6ee7b7; }
.doc-back:hover { background: rgba(110,231,183,.22); }
.rec-added { opacity: .45; pointer-events: none; text-decoration: line-through; }