/* ============================================================
   Stoll Troubleshooting App — shell styles (Phase 1)
   Brand tokens derived from the supplied logos and a representative STG.
   ============================================================ */
:root{
  --cyan:#01C3FF;
  --black:#0b0b0b;
  --panel:#16181b;
  --panel-2:#1f2226;
  --line:#2c3036;
  --text:#f2f5f7;
  --muted:#9aa3ab;
  --danger:#ff5a5a;
  --radius:14px;
  --maxw:880px;
  font-family: Arial, Helvetica, sans-serif;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ margin:0; height:100%; }
body{
  background:var(--black);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-family: Arial, Helvetica, sans-serif;
}

.muted{ color:var(--muted); }
.error{ color:var(--danger); font-size:.9rem; }
.view{ max-width:var(--maxw); margin:0 auto; padding:18px 16px 40px; }

/* ---------- Login ---------- */
.login{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card{
  width:100%; max-width:360px; text-align:center;
  background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:28px 24px;
}
.login-logo{ width:200px; max-width:80%; height:auto; margin:0 auto 6px; display:block; }
.login-card h1{
  margin:.2em 0 .1em; font-size:1.25rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cyan);
}
#login-form,
#dealer-form,
#cb-form{ display:flex; flex-direction:column; gap:16px; margin-top:18px; }
input[type=password]{
  width:100%; padding:14px 14px; font-size:1rem;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:12px; outline:none;
}
input[type=password]:focus{ border-color:var(--cyan); }

.primary{
  background:var(--cyan); color:#04222c; border:none; cursor:pointer;
  padding:14px 16px; font-size:1rem; font-weight:700; border-radius:12px;
  letter-spacing:.02em;
}
.primary:active{ transform:translateY(1px); }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; padding-top:max(10px, env(safe-area-inset-top));
  background:var(--black); border-bottom:1px solid var(--line);
}
.topbar-logo{ height:26px; width:auto; }
.topbar-title{
  font-size:.95rem; color:var(--muted); margin-left:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.iconbtn{
  background:var(--panel); color:var(--text); border:1px solid var(--line);
  width:38px; height:38px; border-radius:10px; font-size:1.2rem; cursor:pointer;
  flex:0 0 auto;
}
.iconbtn:active{ transform:translateY(1px); }

.screen-title{ font-size:1.3rem; margin:.2em 0 .15em; }
.screen-sub{ margin:0 0 18px; }

/* ---------- Search ---------- */
.searchwrap{ margin:0 0 18px; }
input[type=search]{
  width:100%; padding:13px 14px; font-size:1rem;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:12px; outline:none;
}
input[type=search]:focus{ border-color:var(--cyan); }
.card .cat{
  font-size:.72rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}

/* ---------- Category tiles ---------- */
.tiles{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
@media (min-width:620px){ .tiles{ grid-template-columns:repeat(3, 1fr); } }
.tile{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; color:var(--text); min-height:120px; justify-content:space-between;
}
.tile:hover{ border-color:var(--cyan); }
.tile:active{ transform:translateY(1px); }
.tile .icon{ width:34px; height:34px; color:var(--cyan); }
.tile .name{ font-size:1.05rem; font-weight:700; }
.tile .count{ font-size:.8rem; color:var(--muted); }

/* ---------- Guide cards ---------- */
.cards{ display:flex; flex-direction:column; gap:12px; }
.card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; cursor:pointer; text-align:left; color:var(--text);
}
.card:hover{ border-color:var(--cyan); }
.card:active{ transform:translateY(1px); }
.card .title{ font-size:1.02rem; font-weight:700; line-height:1.3; }
.card .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
  background:rgba(1,195,255,.12); color:var(--cyan);
  border:1px solid rgba(1,195,255,.4);
  padding:3px 8px; border-radius:999px;
}
.card .demo-flag{
  font-size:.7rem; color:#04222c; background:var(--cyan);
  align-self:flex-start; padding:2px 8px; border-radius:6px; font-weight:700;
}

.empty{ color:var(--muted); text-align:center; padding:40px 10px; }

/* ---------- Guide viewer ---------- */
.view-guide{ max-width:none; padding:0; }
#guide-frame{
  width:100%; border:0; display:block;
  height:calc(100dvh - 58px); background:#fff;
}

/* ---------- Shell home: module buttons ---------- */
.modules{ display:flex; flex-direction:column; gap:14px; padding-top:4px; }
.module{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 18px; color:var(--text);
}
.module:hover{ border-color:var(--cyan); }
.module:active{ transform:translateY(1px); }
.module .micon{ width:30px; height:30px; color:var(--cyan); flex:0 0 auto; }
.module .mlabel{ font-size:1.1rem; font-weight:700; flex:1 1 auto; line-height:1.25; }
.module .mlock{ width:20px; height:20px; color:var(--muted); flex:0 0 auto; }

/* ---------- Version tag (home screen only) ---------- */
.version-tag{
  display:block; margin:26px auto 0; padding:6px 10px;
  background:none; border:0; cursor:pointer;
  color:#5a626a; font-size:.68rem; letter-spacing:.03em;
  font-family:Arial, Helvetica, sans-serif;
}
.version-tag:active{ color:var(--cyan); }

/* ---------- Dealer gate ---------- */
.gatewrap{ display:flex; justify-content:center; padding-top:36px; }
.gate-lock{ width:40px; height:40px; color:var(--cyan); display:block; margin:0 auto 8px; }

/* ---------- Bulletins: model filter ---------- */
.filterbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
.filter-label{ font-size:.85rem; color:var(--muted); margin-right:2px; }
.filter-chip{
  font-size:.78rem; font-weight:700; letter-spacing:.03em; cursor:pointer;
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px;
}
.filter-chip.on{ background:rgba(1,195,255,.15); color:var(--cyan); border-color:var(--cyan); }

/* ---------- Bulletin cards ---------- */
.bcard{
  display:flex; gap:14px; align-items:center; width:100%; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; color:var(--text);
}
.bcard:hover{ border-color:var(--cyan); }
.bcard:active{ transform:translateY(1px); }
.bthumb{ width:72px; height:102px; object-fit:cover; object-position:top center;
  border:1px solid var(--line); border-radius:6px; background:#fff; flex:0 0 auto; }
.bthumb-none{ background:var(--panel-2); }
.binfo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.bnum{ font-size:1.02rem; font-weight:700; }
.brev{ font-size:.78rem; color:var(--muted); }

/* ---------- Bulletin PDF viewer ---------- */
.view-pdf{ max-width:none; padding:0; position:relative;
  height:calc(100dvh - 58px); display:flex; flex-direction:column; }
.pdf-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); }
.pdfbtn{ background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; min-width:38px; height:34px; padding:0 12px; cursor:pointer; font-size:1rem; }
.pdfbtn:active{ transform:translateY(1px); }
.pdfbtn.on{ border-color:var(--cyan); color:var(--cyan); }
.pdf-thumbs-toggle{ margin-left:auto; }
.pdf-zoom-label{ min-width:52px; text-align:center; color:var(--muted); font-size:.9rem; }
.pdf-body{ flex:1 1 auto; display:flex; min-height:0; }
.pdf-thumbs{ flex:0 0 auto; width:100px; overflow-y:auto; padding:8px;
  background:var(--black); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px; }
.pdf-thumb{ width:100%; height:auto; border:1px solid var(--line); border-radius:3px; background:#fff; cursor:pointer; }
.pdf-thumb:hover{ border-color:var(--cyan); }
.pdf-pages{ flex:1 1 auto; overflow:auto; padding:14px; background:#33363b;
  -webkit-overflow-scrolling:touch; }
.pdf-page{ background:#fff; box-shadow:0 1px 10px rgba(0,0,0,.45);
  display:block; margin:0 auto 14px; max-width:none; }
.pdf-loading{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--muted); font-size:.95rem; }

/* ---------- Contacts ---------- */
.contact-cards{ display:flex; flex-direction:column; gap:14px; }
.contact-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.c-name{ font-size:1.1rem; font-weight:700; }
.c-role{ font-size:.85rem; color:var(--muted); margin-top:2px; }
.c-block{ margin-top:12px; }
.c-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }
.c-list{ margin:0; padding-left:18px; }
.c-list li{ margin:2px 0; font-size:.92rem; }
.c-text{ font-size:.95rem; }
.c-line{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:11px 12px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  color:var(--cyan); text-decoration:none; font-size:.98rem; word-break:break-word; }
.c-line:active{ transform:translateY(1px); }
.c-ic{ width:18px; height:18px; color:var(--cyan); flex:0 0 auto; }

/* ---------- Videos ---------- */
.vcard{ display:flex; flex-direction:column; width:100%; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; color:var(--text); }
.vcard:hover{ border-color:var(--cyan); }
.vcard:active{ transform:translateY(1px); }
.vthumb{ width:100%; aspect-ratio:16 / 9; object-fit:cover; background:#000; display:block; }
.vbody{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; }
.vtitle{ font-size:1.02rem; font-weight:700; line-height:1.3; }
.view-video{ max-width:none; padding:0; background:#000; min-height:calc(100dvh - 58px); }
.video-embed{ width:100%; max-width:960px; margin:0 auto; }
.video-frame{ width:100%; aspect-ratio:16 / 9; border:0; display:block; }
.video-desc{ max-width:960px; margin:0 auto; padding:18px 16px 40px; border-top:1px solid var(--line); }
.video-desc-title{ font-size:1.05rem; color:var(--cyan); margin:0 0 8px; }
.video-desc-body{ white-space:pre-wrap; line-height:1.5; font-size:.98rem; color:var(--text); }

/* ---------- Resources ---------- */
#resources-pinned{ margin-bottom:18px; }

/* ---------- CB Series theme (Bright Lemon) ----------
   Scoped to .cb-theme screens and the CB home button only.
   Everything outside the CB module stays cyan. */
.cb-theme, .cb-module{ --cyan:#FFD21F; }
.cb-theme .chip{ background:rgba(255,210,31,.12); border-color:rgba(255,210,31,.45); }
.cb-theme .filter-chip.on{ background:rgba(255,210,31,.15); }
#cb-pinned{ margin-bottom:18px; }
#cb-typefilter{ margin-bottom:10px; }
.rcard{ position:relative; }
a.rcard{ text-decoration:none; color:var(--text); }
.rcard.pinned .title{ padding-left:20px; }
.pinicon{ position:absolute; top:16px; left:12px; width:13px; height:13px; color:var(--cyan); }
.exticon{ position:absolute; top:16px; right:12px; width:13px; height:13px; color:var(--muted); }