:root {
  --unread-red: #c64b5b;
  --unread-ink: #98404d;
  --bg: #f7f8f5;
  --surface: #ffffff;
  --surface-muted: #f3f5f0;
  --ink: #263c33;
  --muted: #7a877f;
  --line: #e2e7df;
  --line-strong: #ced8ca;
  --accent: #31674f;
  --accent-hover: #28563f;
  --teal: #557c5c;
  --teal-soft: #e8f0df;
  --shadow: 0 14px 40px rgba(38, 60, 51, .13);
}

body { background: var(--bg); }
.login-screen { background: #f3f6ef; }
.login-panel { border-top-color: var(--accent); border-radius: 10px; }
.login-mark, .brand-mark { background: var(--accent); color: #dfedbd; border-radius: 9px; }
.login-eyebrow { color: #6a875c; }
.login-submit { background: var(--accent); border-radius: 7px; }
.login-submit:hover { background: var(--accent-hover); }
.login-panel input:focus,
.admin-toolbar input:focus,
.admin-toolbar select:focus,
.admin-field input:focus,
.admin-field select:focus { border-color: #79966c; box-shadow: 0 0 0 3px rgba(121, 150, 108, .16); }

.topbar { border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(38, 60, 51, .06); }
.sidebar { background: #f1f4ed; }
.admin-button:hover { border-color: #91aa86; background: #edf3e7; }
.admin-create-button,
.admin-save-button,
.guidance-new-button { background: var(--accent); }
.admin-create-button:hover,
.admin-save-button:hover,
.guidance-new-button:hover { background: var(--accent-hover); }
.guidance-save-button { border-color: #9eb493; color: var(--accent); }
.guidance-save-button:hover:not(:disabled) { border-color: #6f9365; background: #edf3e7; color: #28563f; }
.guidance-new-button:disabled,
.guidance-new-button.current-mode { background: #dfe8da; color: #49634e; }
.admin-switch input:checked + span { background: var(--accent); }
.admin-avatar { background: var(--teal-soft); color: var(--accent); }

.guidance-create-tools { margin: 0 0 20px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-muted); }
.guidance-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guidance-mode-switch button { min-width: 0; min-height: 64px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s, transform .16s; }
.guidance-mode-switch button:hover { border-color: #91aa86; background: #f8faf6; transform: translateY(-1px); }
.guidance-mode-switch button:focus-visible { outline: 3px solid rgba(121, 150, 108, .2); outline-offset: 2px; }
.guidance-mode-switch button.active { border-color: var(--accent); background: #edf3e7; box-shadow: inset 0 0 0 1px var(--accent); }
.guidance-mode-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 7px; background: #eef1ec; color: #66746b; }
.guidance-mode-icon svg { width: 18px; height: 18px; }
.guidance-mode-switch button.active .guidance-mode-icon { background: var(--accent); color: #fff; }
.guidance-mode-copy { min-width: 0; display: grid; gap: 3px; }
.guidance-mode-copy strong { font-size: 12px; }
.guidance-mode-copy small { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.guidance-mode-check { width: 18px; height: 18px; color: transparent; }
.guidance-mode-switch button.active .guidance-mode-check { color: var(--accent); }
.guidance-ai-panel { margin-top: 12px; padding: 14px; border: 1px solid #cfdcc8; border-radius: 7px; background: #fff; }
.guidance-ai-panel > label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 11px; font-weight: 800; }
.guidance-ai-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.guidance-ai-compose textarea { min-height: 82px; padding: 10px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); font: inherit; line-height: 1.5; }
.guidance-ai-compose button { min-width: 126px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; }
.guidance-ai-compose button:hover { background: var(--accent-hover); }
.guidance-ai-compose button svg { width: 16px; height: 16px; }
.guidance-ai-followup { padding: 12px; margin: 12px 0; border: 1px solid #b7d6e7; border-radius: 8px; background: #f2f8fc; }
.guidance-ai-followup label { display: block; font-size: 13px; line-height: 1.7; margin-bottom: 8px; }
.guidance-ai-followup textarea { display: block; width: 100%; min-height: 78px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; resize: vertical; }
.guidance-ai-followup button { margin-top: 8px; padding: 9px 13px; background: var(--teal-soft); color: #245f81; border: 1px solid #b7d6e7; border-radius: 6px; cursor: pointer; font: inherit; font-size: 12px; }
.guidance-ai-followup button:hover { background: #d3e9f5; }
.guidance-ai-panel small { display: block; color: var(--muted); line-height: 1.7; }
#guidanceAiProgress { font-size: 12px; font-weight: 700; color: #245f81; }
.guidance-ai-followup[hidden] { display: none; }

@media (max-width: 760px) {
  .guidance-mode-switch { grid-template-columns: 1fr; }
  .guidance-ai-compose { grid-template-columns: 1fr; }
  .guidance-ai-compose button { min-height: 42px; }
}

.plug-reply .answer-text{white-space:normal}.plug-reply .answer-text p{margin:0 0 14px}.plug-reply .answer-text p:last-child{margin-bottom:0}.plug-reply .answer-item{padding-top:4px;line-height:1.65}

.guidance-review-tabs{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.guidance-review-tabs button{padding:9px 12px;background:white;border:1px solid var(--line-strong);border-radius:6px;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.guidance-review-tabs button.active{background:var(--surface-muted);border-color:var(--accent);font-weight:800}
.guidance-review-notice{margin-bottom:18px;padding:14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-muted);font-size:12px;line-height:1.7}
.guidance-review-notice[hidden]{display:none}.guidance-review-notice p{margin:8px 0}.guidance-review-notice blockquote{margin:8px 0;padding-left:10px;border-left:2px solid var(--line-strong);white-space:pre-wrap;overflow-wrap:anywhere}
#guidanceReviewContext{white-space:pre-wrap;overflow-wrap:anywhere}.guidance-review-notice button{padding:7px 12px;border:1px solid var(--line-strong);background:white;border-radius:5px;cursor:pointer}
.guidance-list-empty{padding:16px;font-size:12px;color:var(--muted);line-height:1.7}.guidance-list-item em.pending{background:var(--surface-muted);color:var(--ink)}
.guidance-layout{height:calc(100% - 179px)}
@media(max-width:760px){.guidance-review-tabs{padding:8px 12px}.guidance-review-tabs button{flex:1}.guidance-layout{height:calc(100% - 175px)}}

.guidance-dialog[open]{display:flex;flex-direction:column}.guidance-head,.guidance-review-tabs,.guidance-toolbar{flex-shrink:0}
.guidance-dialog .guidance-layout{height:auto;flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
@media(max-width:760px){.guidance-dialog .guidance-layout{grid-template-rows:minmax(70px,150px) minmax(0,1fr)}}

.answer-feedback{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.7}
.answer-feedback>strong{display:block;margin-bottom:8px}.answer-feedback-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.answer-feedback-choices label{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:5px;cursor:pointer}
.answer-feedback input{accent-color:var(--accent)}.answer-feedback textarea{display:block;width:100%;min-height:60px;padding:9px;border:1px solid var(--line-strong);border-radius:5px;resize:vertical;font:inherit;line-height:1.6}
.answer-feedback button{margin-top:9px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:5px;background:var(--surface-muted);color:var(--ink);font:inherit;cursor:pointer}
.answer-feedback button:disabled{opacity:.55;cursor:default}.answer-feedback-status{margin:8px 0 0;color:var(--muted)}.answer-feedback form[hidden]{display:none}

.guidance-unread-dot { display: inline-block; width: 7px; height: 7px; margin-left: 9px; border-radius: 50%; background: var(--unread-red); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(109,40,49,.12); vertical-align: middle; flex-shrink: 0; }
.guidance-unread-dot[hidden] { display: none; }

/* Pending review types retain their colors when selected. */
[data-review-kind="update"] { --review-color: #92400e; --review-edge: #d97706; --review-bg: #fffbeb; --review-badge: #fef3c7; }
[data-review-kind="new"] { --review-color: #1e40af; --review-edge: #2563eb; --review-bg: #eff6ff; --review-badge: #dbeafe; }
[data-review-kind="feedback"] { --review-color: #405e52; --review-edge: #6f9584; --review-bg: #f2f6f3; --review-badge: #dfeae3; }
.guidance-list-item[data-review-kind] { border-left: 4px solid var(--review-edge); background: var(--review-bg); }
.guidance-list-item[data-review-kind]:hover { border-color: var(--review-edge); }
.guidance-list-item[data-review-kind] em.pending { background: var(--review-badge); color: var(--review-color); font-weight: 700; }
.guidance-list-item[data-review-kind].selected { border-color: var(--review-edge); background: var(--review-bg); box-shadow: inset 0 0 0 1px var(--review-edge); }
.guidance-list-item[data-review-kind]:focus-visible { outline: 2px solid var(--review-edge); outline-offset: 2px; }
.guidance-review-notice[data-review-kind] { border-left: 4px solid var(--review-edge); background: var(--review-bg); }
.guidance-review-notice[data-review-kind] h3 { color: var(--review-color); }

.problem-report form>label { display: block; margin-top: 10px; color: var(--ink); }
.problem-report input[type="text"], .problem-report input[type="file"] { display: block; width: 100%; margin-top: 5px; padding: 8px; font: inherit; }
.problem-report input[type="text"] { border: 1px solid var(--line-strong); border-radius: 5px; }
.problem-report form>button+button { margin-left: 8px; }
.problem-report button[hidden] { display: none; }
.problem-report-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.problem-report-photos>strong { width: 100%; }
.problem-report-photos img { display: block; width: 140px; height: 100px; object-fit: contain; border: 1px solid var(--line-strong); border-radius: 5px; background: white; }

.answer-feedback-option { border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); }
.answer-feedback-option>summary { display: flex; align-items: center; gap: 8px; padding: 9px 11px; color: var(--muted); cursor: pointer; list-style: none; }
.answer-feedback-option>summary::-webkit-details-marker { display: none; }
.answer-feedback-option>summary::after { content: "›"; margin-left: auto; font-size: 18px; line-height: 1; }
.answer-feedback-option[open]>summary::after { transform: rotate(90deg); }
.answer-feedback-option>summary:hover { color: var(--ink); }
.answer-feedback-option>summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 7px; }
.feedback-optional-tag { font-size: 10px; color: var(--muted); }
.answer-feedback-option>form, .answer-feedback-option>.feedback-optional-hint, .answer-feedback-option>strong { margin: 10px 11px; }
.answer-feedback-option>strong { display: block; }
.answer-feedback-option>form>button+button { margin-left: 8px; }
.answer-feedback-option[hidden] { display: none; }
.answer-feedback-status:empty { display: none; }
.guidance-list-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.guidance-list-item .guidance-item-unread { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1px solid rgba(165,73,85,.14); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--unread-ink); font-size: 10px; font-weight: 500; line-height: 1.5; }
.guidance-item-unread::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--unread-red); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.guidance-list-item .guidance-item-unread[hidden] { display: none; }

.guidance-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.guidance-item-heading>strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.guidance-item-heading>.guidance-item-unread { flex-shrink: 0; white-space: nowrap; }

#guidanceButton { position: relative; overflow: visible; }
#guidanceButtonUnreadDot {
  display: block; position: absolute; top: 0; right: 0;
  width: 11px; height: 11px; padding: 0; margin: 0;
  transform: translate(50%, -50%); border-radius: 50%; border: 2px solid white;
  background: linear-gradient(160deg, #df6673, var(--unread-red));
  box-shadow: 0 1px 3px rgba(109,40,49,.18), 0 0 0 1px rgba(165,73,85,.09);
  pointer-events: none;
}
#guidanceButtonUnreadDot[hidden] { display: none; }
.store-picker-trigger { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px; border: 1px solid #d5ded3; border-radius: 10px; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; box-shadow: 0 2px 5px rgba(38,60,51,.035); transition: border-color .15s, box-shadow .15s; }
.store-picker-trigger:hover, .store-picker-trigger[aria-expanded="true"] { border-color: #88a591; box-shadow: 0 0 0 3px rgba(49,103,79,.055); }
.store-picker-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.store-picker-trigger:disabled { opacity: .55; cursor: default; box-shadow: none; }
.store-picker-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 8px; background: #eef3ed; color: #52735f; }
.store-picker-icon svg { width: 17px; height: 17px; }
.store-picker-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.store-picker-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
.store-picker-hint { color: var(--muted); font-size: 10px; }
.store-picker-chevron { flex: 0 0 15px; width: 15px; height: 15px; color: #7a897f; transition: transform .15s; }
.store-picker-trigger[aria-expanded="true"] .store-picker-chevron { transform: rotate(180deg); }
.store-picker-menu { position: fixed; z-index: 50; display: flex; flex-direction: column; overflow: hidden; padding: 7px; border: 1px solid #dce5da; border-radius: 12px; background: #fff; box-shadow: 0 12px 36px rgba(38,60,51,.14), 0 2px 7px rgba(38,60,51,.05); }
.store-picker-menu[hidden] { display: none; }
.store-picker-search { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 2px 2px 7px; padding: 0 10px; height: 40px; border: 1px solid #e3e9df; border-radius: 7px; background: #f7f9f5; }
.store-picker-search:focus-within { border-color: #9ab09e; }
.store-picker-search svg { flex-shrink: 0; width: 16px; height: 16px; color: #839187; }
.store-picker-search input { min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.store-picker-options { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ccd8ca transparent; }
.store-picker-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 45px; margin: 2px 0; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #43584c; font: inherit; text-align: left; cursor: pointer; }
.store-picker-option.is-active, .store-picker-option:hover { background: #f4f7f1; }
.store-picker-option[aria-selected="true"] { background: #eaf2e8; color: #285c44; }
.store-picker-option.is-global { margin-bottom: 6px; }
.store-picker-option-icon { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 6px; color: #77907c; }
.store-picker-option-icon svg { width: 16px; height: 16px; }
.store-picker-option-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.store-picker-option-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.store-picker-option[aria-selected="true"] strong { font-weight: 650; }
.store-picker-option-copy small { font-size: 10px; color: #849183; }
.store-picker-check { display: grid; place-items: center; visibility: hidden; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #d8e8d5; color: #38724f; font-size: 12px; }
.store-picker-option[aria-selected="true"] .store-picker-check { visibility: visible; }
.store-picker-footer { flex-shrink: 0; margin: 6px 3px 1px; padding: 7px 7px 3px; border-top: 1px solid #edf0e9; color: #8c978d; font-size: 10px; }
.store-picker-empty { padding: 20px 12px; color: var(--muted); text-align: center; font-size: 12px; line-height: 1.6; }
@media (max-width: 560px) {
  .mobile-store-control.store-picker { display: block; padding: 0; height: auto; border: 0; background: transparent; }
  .mobile-store-control .store-picker-trigger { min-height: 44px; padding: 7px 9px; gap: 8px; }
  .mobile-store-control .store-picker-icon { flex-basis: 26px; height: 26px; border-radius: 6px; }
  .mobile-store-control .store-picker-copy small { display: none; }
  .store-picker-search input { font-size: 16px; }
}