/*
 * QGuide action palette
 * Blue-green carries primary actions, olive identifies the AI guide, and
 * muted terracotta remains only as a warm informational accent.
 */
:root,
body.ql-visual-lock {
  --accent:#93664d;
  --accent-2:#ad7a60;
  --accent-soft:#f5eae1;
  --v3-accent:#93664d;
  --v3-accent-dark:#76503d;
  --v3-accent-soft:#f5eae1;
  --ql-orange:#93664d;
  --ql-green:#53652c;
  --ql-action:#174e5b;
  --ql-action-top:#2a6a70;
  --ql-action-hover:#103e4a;
  --ql-action-ring:rgba(42,106,112,.42);
}

body.ql-visual-lock .ql-primary,
body.ql-visual-lock .button-primary,
body.ql-visual-lock .ql-header-cta,
body.ql-visual-lock .ql-cocreate-primary,
.ql-primary,
.button-primary,
.ql-header-cta,
.ql-cocreate-primary {
  color:#fff!important;
  border:1px solid transparent!important;
  background:linear-gradient(180deg,var(--ql-action-top) 0%,var(--ql-action) 100%)!important;
  box-shadow:0 7px 16px rgba(7,56,82,.16),0 1px 0 rgba(255,255,255,.22) inset!important;
}

body.ql-visual-lock .ql-primary:hover,
body.ql-visual-lock .button-primary:hover,
body.ql-visual-lock .ql-header-cta:hover,
body.ql-visual-lock .ql-cocreate-primary:hover,
.ql-primary:hover,
.button-primary:hover,
.ql-header-cta:hover,
.ql-cocreate-primary:hover {
  filter:none!important;
  background:linear-gradient(180deg,#235d64 0%,var(--ql-action-hover) 100%)!important;
  box-shadow:0 10px 20px rgba(7,56,82,.22),0 1px 0 rgba(255,255,255,.18) inset!important;
}

body.ql-visual-lock .ql-primary:focus-visible,
body.ql-visual-lock .button-primary:focus-visible,
body.ql-visual-lock .ql-header-cta:focus-visible,
body.ql-visual-lock .ql-cocreate-primary:focus-visible,
body.ql-visual-lock .ql-send:focus-visible,
.ql-primary:focus-visible,
.button-primary:focus-visible,
.ql-header-cta:focus-visible,
.ql-cocreate-primary:focus-visible,
.ql-send:focus-visible {
  outline:3px solid var(--ql-action-ring)!important;
  outline-offset:3px;
}

body.ql-visual-lock .ql-send,
.ql-send {
  color:#fff!important;
  background:var(--ql-action)!important;
}

body.ql-visual-lock .ql-desktop-nav a.is-active,
body.ql-visual-lock .ql-map-link,
.ql-desktop-nav a.is-active,
.ql-map-link {
  color:var(--ql-orange)!important;
}

body.ql-visual-lock .ql-desktop-nav a.is-active::after,
.ql-desktop-nav a.is-active::after {
  background:var(--ql-orange)!important;
}

body.ql-visual-lock .v3-ai-fab,
.v3-ai-fab {
  background:linear-gradient(180deg,#697641 0%,var(--ql-green) 100%)!important;
  box-shadow:0 7px 20px rgba(65,77,35,.24)!important;
}

body.ql-visual-lock .v3-ai-fab span,
.v3-ai-fab span {
  background:var(--ql-green)!important;
}

.v3-live-ai-button,
.v4-live-ai-floating,
.ql-v52-inline-ai {
  color:#fff!important;
  background:linear-gradient(180deg,#697641 0%,var(--ql-green) 100%)!important;
  box-shadow:0 7px 20px rgba(65,77,35,.24)!important;
}

.ql-v52-inline-ai span {
  background:var(--ql-green)!important;
}

/* 攻略共創的登入前預覽。原本這一段只有一句話加一顆按鈕，看不出寫完會拿到什麼，
   所以要先把「五題」「會產出攻略圖」「可以不公開」講完再問人要不要登入。
   手機（visual-lock.js）與桌機（pages.js）是同一道牆的兩份實作，共用這段樣式，
   所以這裡刻意不限定 body.ql-visual-lock——只有按鈕沿用各自檔案的慣例。 */
.qg-cocreate-preview{display:grid;gap:14px;padding:22px}
.qg-cocreate-preview h2{margin:0;font-size:21px;line-height:1.35}
.qg-cocreate-preview>p{margin:0;color:#5f5a4f;line-height:1.65}
.qg-cocreate-preview ol{margin:0;padding:0;list-style:none;counter-reset:qgq;display:grid;gap:9px}
.qg-cocreate-preview ol li{counter-increment:qgq;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;color:#48453f;line-height:1.55}
.qg-cocreate-preview ol li::before{content:counter(qgq);width:24px;height:24px;border-radius:50%;background:var(--ql-green,#5b6b32);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.qg-cocreate-preview-note{display:flex;gap:8px;align-items:flex-start;margin:0;border:1px solid #ddd1be;border-radius:11px;padding:11px 13px;background:rgba(255,253,249,.7);color:#645e52;font-size:13px;line-height:1.6}
/* 「以這篇為底稿」的來源標示：共創頁桌機與手機兩份共用（pages.js cocreateBaseNote）。 */
.qg-cocreate-base-note{display:flex;gap:8px;align-items:flex-start;margin:12px 0;border:1px solid #cfdcc0;border-radius:11px;padding:11px 13px;background:#f4f8ee;color:#4f5a3a;font-size:14px;line-height:1.6}
.qg-cocreate-base-note svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;color:var(--ql-green,#5b6b32)}
.qg-cocreate-preview-note svg{flex:0 0 auto;margin-top:2px;color:var(--ql-green,#5b6b32)}
body.ql-visual-lock .qg-cocreate-preview .ql-cocreate-primary{width:100%}
.qg-cocreate-preview-alt{color:#6a6355;text-decoration:underline;text-underline-offset:3px;font-size:14px;align-self:center}
body.ql-visual-lock .qg-cocreate-preview-alt{justify-self:center}