:root {
  --red: #fa8802;
  --red-soft: #fff3e6;
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #e7e9ee;
  --text: #1f2430;
  --muted: #6b7280;
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ===== Login ===== */
.login-area {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #fafbfc, #f1f3f6);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-logo {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--red); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.login-brand-title { margin: 0; font-weight: 800; font-size: 16px; }
.login-brand-sub { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.login-card h2 { margin: 8px 0 4px; font-size: 20px; }
.login-card .note { margin: 0 0 18px; font-size: 12px; color: var(--muted); }
.login-card label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 6px; }
.login-card input {
  width: 100%; padding: 11px 13px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 10px; outline: none;
}
.login-card input:focus { border-color: var(--red); }
.login-card #login-button {
  width: 100%; margin-top: 20px; padding: 12px;
  background: var(--red); color: #fff; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700;
}
.login-card #login-button:disabled { opacity: .6; }
.status-message { min-height: 18px; margin: 10px 0 0; font-size: 12px; color: var(--red); }

/* ===== App shell ===== */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Topbar */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 24px; background: var(--card);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.brand-logo-img {
  height: 40px; width: auto; max-width: 200px; display: block; object-fit: contain;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-title { font-weight: 800; font-size: 16px; }
.brand-sub { font-size: 10px; color: var(--muted); }
.searchbar {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 8px 6px 16px; box-shadow: var(--shadow);
}
.searchbar:focus-within { border-color: var(--red); }
.search-icon { color: var(--muted); font-size: 15px; }
.searchbar textarea {
  flex: 1; border: none; outline: none; resize: none; font-size: 15px;
  font-family: inherit; line-height: 1.5; padding: 5px 0; max-height: 80px;
}
.clear-btn { border: none; background: transparent; color: var(--muted); font-size: 14px; padding: 6px; }
.search-btn {
  border: none; background: var(--red); color: #fff; border-radius: 999px;
  width: 38px; height: 38px; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
.bell, .help { position: relative; font-size: 18px; color: #4b5563; }
.badge {
  position: absolute; top: -6px; right: -8px; background: var(--red); color: #fff;
  font-size: 10px; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.user-chip { display: flex; align-items: center; gap: 8px; }
.avatar { font-size: 26px; color: #9aa3b2; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-weight: 700; font-size: 13px; }
.user-store { font-size: 11px; color: var(--muted); }
.secondary-button {
  border: 1px solid var(--border); background: #fff; color: #374151;
  border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 600;
}
.secondary-button:hover { background: #f9fafb; }

/* Layout */
.layout { flex: 1; display: flex; align-items: flex-start; }

/* Sidebar */
.sidebar {
  width: 248px; flex-shrink: 0; padding: 20px 16px;
  border-right: 1px solid var(--border); background: var(--card);
  min-height: 100vh; position: sticky; top: 0;
}
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 10px; font-size: 14px; font-weight: 600; color: #374151;
}
.nav-item:hover { background: #f3f4f6; }
.nav-item.active { background: var(--red-soft); color: var(--red); }
.side-card {
  margin-top: 22px; padding: 16px; border-radius: 12px;
  background: var(--red-soft); border: 1px solid #f6d6d5;
}
.side-card-title { margin: 0 0 6px; font-weight: 800; font-size: 13px; color: var(--red); }
.side-card-text { margin: 0 0 12px; font-size: 12px; color: #4b5563; line-height: 1.6; }
.side-card-btn {
  width: 100%; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 9px; font-size: 12px; font-weight: 600; color: #374151;
}
.side-history { margin-top: 22px; }
.side-history-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.side-history-head a { font-size: 11px; color: var(--red); font-weight: 600; }
.history-item { display: flex; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.history-item:hover { background: #f3f4f6; }
.h-ico { color: #9aa3b2; font-size: 14px; }
.h-title { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.4; }
.h-time { margin: 2px 0 0; font-size: 11px; color: var(--muted); }

/* Content */
.content { flex: 1; padding: 24px; max-width: 1320px; }

/* Result head */
.result-head {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow);
}
.result-bot {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px;
  background: var(--red-soft); color: var(--red); font-size: 28px;
  display: flex; align-items: center; justify-content: center;
}
.result-text { flex: 1; }
.result-text h1 { margin: 0 0 4px; font-size: 20px; }
.result-text p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.result-counts { display: flex; gap: 10px; flex-shrink: 0; }
.count {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.count-video { background: #fff3e6; color: var(--red); }
.count-doc { background: #eaf1fe; color: #2563eb; }
.count-faq { background: #e9f9ef; color: #16a34a; }

/* Tabs */
.tabs { display: flex; gap: 28px; margin: 22px 4px 16px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 12px 2px; font-size: 14px; font-weight: 700; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.tab.active { color: var(--red); border-bottom-color: var(--red); }

/* Columns */
.columns {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px; align-items: start;
}
.col {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; box-shadow: var(--shadow);
}
.col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 14px; font-weight: 700; }
.col-head a { font-size: 12px; color: var(--red); font-weight: 600; }
.block-title { margin: 18px 0 12px; font-size: 14px; font-weight: 700; }

/* Video column */
.video-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #3a4250, #1f2430);
  display: flex; align-items: flex-end; padding: 16px;
}
.video-thumb .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.video-overlay { color: #fff; font-weight: 800; font-size: 19px; line-height: 1.35; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.video-title { margin: 12px 0 4px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.video-meta { margin: 0; font-size: 12px; color: var(--muted); }
.related { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.related-item { }
.rel-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 8px;
  background: linear-gradient(135deg, #cfd6e0, #aab3c2);
}
.rel-time {
  position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.75); color: #fff;
  font-size: 11px; padding: 1px 5px; border-radius: 4px;
}
.rel-title { margin: 7px 0 3px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.rel-meta { margin: 0; font-size: 11px; color: var(--muted); }

/* Docs column */
.doc-item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
.doc-item:hover { background: #fafbfc; }
.doc-ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 8px; color: #fff;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.doc-ico.pdf { background: #fa8802; }
.doc-ico.word { background: #2563eb; font-size: 18px; }
.doc-ico.manual { background: #16a34a; font-size: 18px; }
.doc-body { flex: 1; min-width: 0; }
.doc-title { margin: 0 0 3px; font-size: 13px; font-weight: 700; }
.doc-meta { margin: 0 0 4px; font-size: 11px; color: var(--muted); }
.doc-desc { margin: 0; font-size: 12px; color: #4b5563; line-height: 1.5; }
.doc-dl { color: #9aa3b2; font-size: 16px; align-self: center; cursor: pointer; }
.doc-dl:hover { color: var(--red); }

/* AI column */
.col-ai { display: flex; flex-direction: column; }
.ai-head { font-size: 14px; font-weight: 800; margin-bottom: 12px; color: #111827; }
.messages { flex: 1; overflow-y: auto; max-height: 560px; }
.message { margin-bottom: 12px; }
.message.user { text-align: right; }
.message.user .bubble { background: var(--red); color: #fff; border-radius: 12px 12px 2px 12px; }
.message.bot .bubble { background: #f3f4f6; color: var(--text); border-radius: 12px 12px 12px 2px; }
.bubble {
  display: inline-block; text-align: left; padding: 11px 14px; font-size: 13px;
  line-height: 1.7; white-space: pre-wrap; max-width: 100%;
}
.ai-feedback { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.fb-btn { border: 1px solid var(--border); background: #fff; border-radius: 8px; width: 34px; height: 30px; font-size: 14px; }
.fb-btn:hover { background: #f3f4f6; }

/* FAQ banner */
.faq-banner {
  display: flex; align-items: center; gap: 18px; margin-top: 22px;
  background: var(--red-soft); border: 1px solid #f6d6d5; border-radius: 14px; padding: 18px 24px;
}
.faq-ico { font-size: 26px; color: var(--red); }
.faq-text { flex: 1; }
.faq-title { margin: 0 0 4px; font-weight: 800; font-size: 15px; color: var(--red); }
.faq-sub { margin: 0; font-size: 12px; color: #4b5563; line-height: 1.6; }
.faq-btn { background: var(--red); color: #fff; border: none; border-radius: 10px; padding: 12px 20px; font-size: 14px; font-weight: 700; white-space: nowrap; }

/* Responsive */
@media (max-width: 1100px) {
  .columns { grid-template-columns: 1fr; }
  .result-counts { display: none; }
}
@media (max-width: 860px) {
  .sidebar { display: none; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .searchbar { order: 3; flex-basis: 100%; }
  .user-meta, .brand-sub { display: none; }
  .content { padding: 16px; }
  .related { grid-template-columns: 1fr 1fr; }
  .faq-banner { flex-direction: column; align-items: flex-start; }
}

/* ===== STEP11 dynamic columns ===== */
.col.has-dynamic > *:not(.dynamic-list):not(.col-head){ display:none !important; }
.dynamic-list{ display:flex; flex-direction:column; gap:10px; }
.dynamic-list .empty-note{ color:#888; font-size:13px; padding:14px 12px; background:#f7f7f8; border:1px dashed #ddd; border-radius:8px; text-align:center; }
.doc-item.dyn{ display:flex; gap:10px; padding:10px; border:1px solid #eee; border-radius:8px; background:#fff; }
.doc-item.dyn .doc-ico{ flex:0 0 auto; font-size:11px; font-weight:700; color:#fff; background:#888; border-radius:5px; padding:4px 6px; height:fit-content; }
.doc-item.dyn .doc-ico.pdf{ background:#e23b3b; }
.doc-item.dyn .doc-ico.word{ background:#2b579a; }
.doc-item.dyn .doc-ico.excel{ background:#207245; }
.doc-item.dyn .doc-ico.drive{ background:#1a73e8; }
.doc-item.dyn .doc-ico.manual{ background:#6a5acd; }
.doc-item.dyn .doc-title{ font-size:13px; font-weight:600; margin:0 0 4px; }
.doc-item.dyn .doc-desc{ font-size:12px; color:#666; margin:0 0 6px; }
.doc-link, .vid-link{ display:inline-block; font-size:12px; color:#e23b3b; text-decoration:none; font-weight:600; }
.doc-link:hover, .vid-link:hover{ text-decoration:underline; }
.vid-item.dyn{ display:flex; gap:10px; padding:10px; border:1px solid #eee; border-radius:8px; background:#fff; }
.vid-item.dyn .vid-thumb{ flex:0 0 56px; height:40px; background:#222; color:#fff; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.vid-item.dyn .vid-title{ font-size:13px; font-weight:600; margin:0 0 4px; }
.vid-item.dyn .vid-desc{ font-size:12px; color:#666; margin:0 0 6px; }

/* ===== Step30.5 Design Refresh ===== */
.content{padding:28px 32px;background:#f7f8fa;}
.topbar-spacer{flex:1;}
/* Hero ask area */
.hero-ask{background:#fff;border:1px solid #eef0f3;border-radius:16px;padding:24px 28px;box-shadow:0 1px 3px rgba(16,24,40,.04);margin-bottom:20px;}
.hero-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.hero-bot{width:56px;height:56px;border-radius:14px;background:#fff3e9;display:flex;align-items:center;justify-content:center;font-size:30px;flex:none;}
.hero-text h1{font-size:24px;font-weight:700;color:#1f2433;margin:0 0 4px;}
.hero-text p{font-size:14px;color:#6b7280;margin:0;}
.ask-bar{display:flex;align-items:center;gap:10px;border:2px solid #ff7a18;border-radius:14px;padding:10px 12px;background:#fff;}
.ask-bar textarea#message{flex:1;border:none;outline:none;resize:none;font-size:16px;line-height:1.5;min-height:34px;max-height:120px;padding:6px 4px;color:#1f2433;font-family:inherit;background:transparent;}
.ask-bar .clear-btn{border:none;background:transparent;color:#9aa0ab;font-size:16px;cursor:pointer;padding:4px 8px;}
.ask-btn{display:flex;align-items:center;gap:8px;background:#ff7a18;color:#fff;border:none;border-radius:10px;padding:12px 22px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;flex:none;}
.ask-btn:hover{background:#f06b06;}
.ask-ico{font-size:14px;}
.pii-note{margin:14px 2px 0;font-size:12.5px;color:#a86200;background:#fff8ed;border:1px solid #ffe2bd;border-radius:8px;padding:8px 12px;}
/* AI answer card */
.ai-answer-card{background:#fff;border:1px solid #eef0f3;border-radius:16px;padding:22px 26px;box-shadow:0 1px 3px rgba(16,24,40,.04);margin-bottom:22px;}
.ai-answer-head{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#ff7a18;margin-bottom:14px;}
.ai-spark{font-size:18px;}
.ai-answer-card .messages{background:#fff7ef;border:1px solid #ffe6ce;border-radius:12px;padding:20px 22px;min-height:120px;}
.ai-answer-card .message.bot{display:block;}
.ai-answer-card .bubble{background:transparent;color:#2b3040;font-size:15.5px;line-height:1.85;white-space:pre-wrap;padding:0;box-shadow:none;max-width:100%;}
.ai-answer-foot{margin-top:14px;padding-top:14px;border-top:1px solid #eef0f3;display:flex;flex-direction:column;gap:12px;}
.ai-disclaimer{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#8a8f9a;margin:0;}
.info-i{color:#ff9b4d;font-size:14px;}
.ai-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ai-actions .fb-label{font-size:13px;color:#6b7280;margin-right:4px;}
.fb-btn,.print-btn{border:1px solid #e3e6eb;background:#fff;border-radius:8px;padding:7px 14px;font-size:13px;color:#4a5160;cursor:pointer;}
.fb-btn:hover{background:#f3f4f6;}
.print-btn{margin-left:auto;border-color:#ffcf9e;color:#d9740a;}
.print-btn:hover{background:#fff3e6;}
/* Bottom 3-area grid */
.bottom-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
.panel{background:#fff;border:1px solid #eef0f3;border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(16,24,40,.04);}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.panel-title{font-size:14.5px;font-weight:700;color:#1f2433;}
.panel-link{font-size:12px;color:#ff7a18;cursor:pointer;}
/* empty-state: hidden when JS injects content (adds .has-dynamic on col) */
.panel-empty{font-size:13px;color:#9aa0ab;background:#f7f8fa;border:1px dashed #e3e6eb;border-radius:8px;padding:14px;text-align:center;}
.col-video.has-dynamic .video-empty,.col-docs.has-dynamic .docs-empty{display:none;}
.dynamic-list:empty{display:none;}
/* document cards */
.panel .doc-item{display:flex;align-items:flex-start;gap:10px;border:1px solid #eef0f3;border-radius:10px;padding:10px 12px;margin-bottom:10px;}
.panel .doc-item:last-child{margin-bottom:0;}
.doc-ico{flex:none;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;}
.doc-ico.pdf{background:#e4564c;}.doc-ico.word{background:#2b66c2;}.doc-ico.excel{background:#1f8a52;}.doc-ico.md{background:#5b6470;}.doc-ico.manual{background:#7c5cc4;}.doc-ico.file{background:#9aa0ab;}
.doc-body{flex:1;min-width:0;}
.doc-title{font-size:13.5px;font-weight:600;color:#1f2433;margin:0 0 3px;line-height:1.4;}
.doc-meta{font-size:11.5px;color:#9aa0ab;margin:0 0 4px;}
.doc-desc{font-size:12px;color:#6b7280;margin:0 0 6px;line-height:1.45;}
.doc-link{display:inline-block;font-size:12px;color:#ff7a18;font-weight:600;text-decoration:none;}
.doc-link:hover{text-decoration:underline;}
/* FAQ ranking */
.faq-rank{list-style:none;margin:0;padding:0;}
.faq-rank-item{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid #f1f2f5;cursor:pointer;}
.faq-rank-item:last-child{border-bottom:none;}
.faq-rank-item:hover{background:#fafbfc;}
.rank-num{flex:none;width:30px;height:30px;border-radius:50%;background:#f1f2f5;color:#6b7280;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.rank-num.top{background:#ffe7cf;color:#d9740a;}
.rank-q{flex:1;font-size:13px;color:#2b3040;line-height:1.4;}
.rank-arrow{color:#c2c7d0;font-size:16px;}
/* video items (rendered by JS) */
.panel .vid-item{display:flex;gap:10px;border:1px solid #eef0f3;border-radius:10px;padding:10px;margin-bottom:10px;}
.vid-thumb{flex:none;width:64px;height:44px;border-radius:6px;background:#1f2433;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;}
.vid-title{font-size:13px;font-weight:600;color:#1f2433;margin:0 0 3px;line-height:1.4;}
.vid-desc{font-size:12px;color:#6b7280;margin:0 0 5px;}
.vid-link{font-size:12px;color:#ff7a18;font-weight:600;text-decoration:none;}
/* sidebar polish */
.nav-item{border-radius:10px;padding:11px 14px;margin-bottom:2px;color:#4a5160;display:flex;align-items:center;gap:10px;}
.nav-item.active{background:#fff3e9;color:#d9740a;font-weight:700;}
.nav-item:hover{background:#f7f8fa;}
/* responsive */
@media(max-width:1024px){.bottom-grid{grid-template-columns:1fr;}}
@media(max-width:720px){.content{padding:16px;}.hero-ask{padding:16px;}.ask-bar{flex-wrap:wrap;}.ask-btn{width:100%;justify-content:center;}.hero-text h1{font-size:20px;}.print-btn{margin-left:0;}}
.doc-ico.drive{background:#1a73e8;}
.fb-btn,.print-btn{white-space:nowrap;}
.ai-actions{row-gap:8px;}


/* ===== fbfix: feedback buttons layout correction ===== */
.ai-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #eee;
}
.ai-actions .fb-label{
  font-size:13px;
  color:#6b7280;
  margin-right:4px;
  white-space:nowrap;
}
.ai-actions .fb-btn,
.ai-actions .print-btn{
  width:auto;
  height:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border:1px solid #e3e6eb;
  border-radius:8px;
  background:#fff;
  color:#4a5160;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
}
.ai-actions .fb-btn:hover,
.ai-actions .print-btn:hover{ background:#f3f4f6; }
.ai-actions .print-btn{ margin-left:auto; }
.ai-actions .print-btn:hover{ background:#fff3e6; }
@media (max-width:720px){
  .ai-actions .print-btn{ margin-left:0; }
}


/* ===== Step33: Sidebar design improvement ===== */
.sidebar { padding: 22px 16px 26px; display: flex; flex-direction: column; }

/* Brand (logo + title) at top of sidebar */
.side-brand { display: flex; align-items: center; gap: 12px; padding: 2px 6px 0; margin-bottom: 16px; }
.side-brand-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; flex-shrink: 0; }
.side-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.side-brand-sub { font-size: 11px; color: #8a94a6; font-weight: 600; }
.side-brand-title { font-size: 16px; color: #1f2433; font-weight: 800; }

/* Logged-in account card (no password shown) */
.side-account { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin-bottom: 18px;
  background: #fff5ec; border: 1px solid #ffe3cc; border-radius: 12px; }
.side-account-label { font-size: 11px; color: #b06a2c; font-weight: 700; letter-spacing: .02em; }
.side-account-email { font-size: 13px; color: #2b2f38; font-weight: 700; word-break: break-all; line-height: 1.35; }
.side-account-logout { margin-top: 6px; align-self: flex-start; padding: 5px 12px; font-size: 12px; font-weight: 600;
  color: #6b7280; background: #fff; border: 1px solid #e3e6eb; border-radius: 8px; cursor: pointer; }
.side-account-logout:hover { background: #f3f4f6; color: #374151; }

/* Roomier menu to match reference image */
.side-nav { gap: 6px; }
.nav-item { padding: 11px 14px; gap: 12px; font-size: 14px; border-radius: 12px; }
.nav-item.active { background: #fff3e9; color: #d9740a; font-weight: 700; }
.nav-item.active:hover { background: #ffeada; }

/* Mobile: keep account card readable, sidebar already hidden < 860px */
@media (max-width: 860px) {
  .side-brand, .side-account { display: none; }
}


/* ===== Step33 fix: prevent vertical character wrapping in nav ===== */
.side-account-email { word-break: break-word; overflow-wrap: anywhere; }


/* ===== Step33 nav layout (clean) ===== */
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; font-size: 14px; white-space: nowrap; overflow: visible; }
.nav-item span { font-size: 14px; line-height: 1.2; }
.nav-item.active { background: #fff3e9; color: #d9740a; font-weight: 700; }
.nav-item.active:hover { background: #ffeada; }


/* ===== Step33b: show logo only, larger ===== */
.side-brand { justify-content: center; padding: 4px 6px 0; margin-bottom: 16px; }
.side-brand-logo { width: 150px; height: auto; max-width: 100%; border-radius: 14px; object-fit: contain; }


/* Embedded A14 video demo (in-page player) */
.vd-video-card{border:1px solid #e3e3e3;border-radius:8px;padding:12px;margin-bottom:10px;background:#fff;}
.vd-card-title{font-weight:700;margin-bottom:4px;}
.vd-card-meta{font-size:12px;color:#777;margin-bottom:6px;}
.vd-card-summary{font-size:13px;color:#444;margin-bottom:6px;}
.vd-know{font-size:12px;color:#555;margin-bottom:8px;}
.vd-chip{display:inline-block;background:#f0f4f8;border-radius:10px;padding:1px 8px;margin:2px;font-size:11px;}
.vd-play-btn{background:#2b7a78;color:#fff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;font-size:13px;}
.vd-play-btn:hover{background:#235e5c;}
.vd-chapter-list{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px;}
.vd-player-wrap{--vd-width:440px;margin-top:14px;width:min(var(--vd-width),92vw)!important;max-width:92vw!important;box-sizing:border-box;border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:10px;overflow:hidden;}
.vd-player{display:block;width:100%;aspect-ratio:16/9;height:auto;max-height:none;object-fit:contain;background:#111827;border-radius:12px;}
.vd-player-status{font-size:12px;color:#666;margin-bottom:4px;}
.vd-chapters{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;max-height:72px;overflow-y:auto;}
.vd-chapter{background:#eef2f5;border:1px solid #d6dde2;border-radius:6px;padding:4px 8px;cursor:pointer;font-size:12px;}
.vd-chapter:hover{background:#dfe7ec;}

/* A14 in-page player: header + close button + responsive (added) */
.vd-player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.vd-player-title{font-weight:700;font-size:15px;color:#111827;}
.vd-close-btn{appearance:none;border:none;border-radius:999px;background:#f97316;color:#fff;font-weight:700;font-size:14px;padding:8px 14px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(249,115,22,0.25);}
.vd-close-btn:hover{opacity:0.9;}

/* A14 player: YouTube-style 16:9 + size switcher (added) */
.vd-player-wrap.vd-size-small{--vd-width:320px;}
.vd-player-wrap.vd-size-medium{--vd-width:440px;}
.vd-player-wrap.vd-size-large{--vd-width:560px;}
.vd-size-controls{display:flex;align-items:center;gap:6px;}
.vd-size-btn{border:1px solid #fed7aa;background:#fff7ed;color:#c2410c;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;}
.vd-size-btn.active{background:#f97316;color:#fff;border-color:#f97316;}
@media (max-width:768px){
  .vd-player-wrap{max-width:92vw;width:min(var(--vd-width),92vw);padding:10px;}
.vd-video-box{max-height:calc(100dvh - 260px);}
  .vd-player{width:100%;height:100%;display:block;object-fit:contain;}
.vd-video-box{width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 320px);background:#111827;border-radius:12px;overflow:hidden;}
.vd-video-box video{width:100%;height:100%;display:block;object-fit:contain;}
  .vd-player-head{flex-wrap:wrap;gap:8px;align-items:flex-start;}
  .vd-close-btn{font-size:13px;padding:7px 12px;}
}

/* A14 related-video notice in AI answer area (added) */
.video-answer-notice{margin:0 0 12px 0;padding:12px 14px;border:1px solid #fed7aa;border-left:5px solid #f97316;border-radius:10px;background:#fff7ed;color:#7c2d12;}
.video-answer-notice strong{display:block;font-size:15px;font-weight:700;color:#9a3412;margin-bottom:4px;}
.video-answer-notice p{margin:0;font-size:13px;line-height:1.6;color:#7c2d12;}

/* A14 player size-fix: let player break out of narrow col-video grid cell (added) */
.col-video{overflow:visible;}
#vd-player-wrap.vd-player-wrap{position:relative;z-index:5;}

/* === FC menu guidance card === */
.guide-bubble{ background:#eef5ff; border:1px solid #c9defc; border-radius:12px; padding:14px 16px; color:#1f3a5f; line-height:1.7; }
.guide-bubble .guide-lead{ font-weight:700; font-size:15px; margin:0 0 6px; color:#13396b; }
.guide-bubble .guide-sub{ margin:0 0 10px; font-size:13.5px; color:#3a5572; }
.guide-bubble .guide-qhead{ margin:6px 0 6px; font-weight:600; font-size:13px; color:#2b4a72; }
.guide-bubble .guide-qlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.guide-bubble .guide-qlist li{ margin:0; }
.guide-bubble .guide-q-btn{ display:inline-block; width:100%; text-align:left; background:#fff; border:1px solid #b9d3f5; border-radius:8px; padding:8px 12px; font-size:13.5px; color:#13396b; cursor:pointer; transition:background .15s,border-color .15s; }
.guide-bubble .guide-q-btn:hover{ background:#dcebff; border-color:#7faaf0; }
.guide-bubble .guide-help-list{ margin:4px 0 8px; padding-left:18px; font-size:13.5px; }
.guide-bubble .guide-help-list li{ margin:3px 0; }
.guide-bubble .guide-notes{ margin-top:8px; padding-top:8px; border-top:1px dashed #c9defc; }
.guide-bubble .guide-notes p{ margin:2px 0; font-size:12.5px; color:#8a5a00; }

/* === FAQ ranking clickable enhancement === */
.faq-rank-item{ transition:background .15s, transform .05s; border-radius:8px; }
.faq-rank-item:hover{ background:#eef5ff; }
.faq-rank-item:hover .rank-q{ color:#13396b; }
.faq-rank-item:active{ transform:scale(0.99); background:#dcebff; }