/* Landing */
.landing-headline { font-size: 2rem; font-weight: normal; line-height: 1.3; color: var(--gold-light); text-align: center; }
.landing-sub { text-align: center; color: var(--muted); font-size: 1.05rem; font-style: italic; }
.btn-group { display: flex; flex-direction: column; gap: 12px; }
.btn { padding: 14px 24px; border-radius: var(--radius); border: none; cursor: pointer; font-family: inherit; font-size: 1rem; transition: all 0.2s; }
.btn-primary { background: var(--gold); color: #0f0f0f; font-weight: bold; }
.btn-primary:hover { background: var(--gold-light); color: #fff; }
.btn-secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--gold); color: var(--gold); }

/* Examples */
.screen-title { font-size: 1.1rem; color: var(--muted); text-align: center; letter-spacing: 0.05em; text-transform: uppercase; font-family: sans-serif; }
.example-cards { display: flex; flex-direction: column; gap: 12px; }
.example-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: all 0.2s; color: var(--text); font-family: inherit; font-size: 1rem; text-align: left; }
.example-card:hover { border-color: var(--gold); background: var(--surface2); }
.example-card .ex-label { font-size: 0.75rem; color: var(--muted); font-family: sans-serif; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Input */
.input-title { font-size: 1.4rem; color: var(--gold-light); font-weight: normal; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.8rem; color: var(--muted); font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.06em; }
.input-wrap { position: relative; }
.input-wrap textarea { width: 100%; }
.field textarea { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 34px 14px 14px; color: var(--text); font-family: inherit; font-size: 1rem; resize: vertical; min-height: 72px; transition: border-color 0.2s; }
.field textarea:focus { outline: none; border-color: var(--gold); }
.clear-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 4px; opacity: 0.55; transition: opacity 0.15s; }
.clear-btn:hover { opacity: 1; }
.model-select-field { margin-top: 4px; }
.model-select { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; color: var(--text); font-family: inherit; font-size: 0.95rem; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.model-select:focus { outline: none; border-color: var(--gold); }

/* Home notice */
.home-notice-text { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }

/* Language dropdown */
.lang-dropdown { position: relative; }
.lang-dropdown-toggle { display: flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; font-size: 0.82rem; color: var(--text); cursor: pointer; font-family: inherit; transition: border-color 0.15s; }
.lang-dropdown-toggle:hover { border-color: var(--gold); }
.lang-dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; z-index: 100; min-width: 140px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.lang-option { padding: 8px 14px; font-size: 0.88rem; cursor: pointer; transition: background 0.15s; color: var(--text); display: flex; align-items: center; gap: 8px; }
.flag-icon { width: 18px; height: 9px; border-radius: 2px; flex-shrink: 0; object-fit: contain; }
.lang-option:hover { background: var(--surface2); }
.lang-option.active { color: var(--gold); font-weight: bold; }
@media (max-width: 600px) { .lang-dropdown-toggle span:not(:first-child) { display: none; } }

/* Dark mode icon button */
.header-btn-icon { font-size: 1.1rem; padding: 5px 10px; line-height: 1; }

/* Thinking */
.thinking-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 40vh; }
.thinking-text { color: var(--muted); font-style: italic; font-size: 1.05rem; text-align: center; }
.pulse-ring { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--muted); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.15); opacity: 0.7; } }

/* Result */
.result-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.result-section-title { font-size: 0.78rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.result-summary { font-size: 1rem; line-height: 1.6; color: var(--text); }
.options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.option-label { font-size: 0.72rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); margin-bottom: 10px; }
.option-row { margin-bottom: 8px; }
.option-row-label { font-size: 0.72rem; font-family: sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.option-row-text { font-size: 0.9rem; line-height: 1.5; margin-top: 2px; }
.perspective-list { display: flex; flex-direction: column; gap: 10px; }
.perspective-item { padding-left: 16px; border-left: 2px solid var(--gold); font-size: 0.95rem; line-height: 1.6; }
.recommendation-text { font-size: 1rem; line-height: 1.7; color: var(--gold-light); font-style: italic; }
.tags-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 0.78rem; font-family: sans-serif; color: var(--muted); }
.hash-row { font-size: 0.7rem; font-family: monospace; color: var(--border); word-break: break-all; margin-top: 4px; }
.confidence-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-family: sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
.conf-high { background: #e8f0e8; color: var(--green); border: 1px solid #c8d8c8; }
.conf-medium { background: #f0ece0; color: var(--gold); border: 1px solid var(--border); }
.conf-low { background: #f0e8e8; color: var(--red-soft); border: 1px solid #d8c8c8; }
.bias-tag { background: #f5ece8; border: 1px solid #e0ccc0; border-radius: 20px; padding: 3px 10px; font-size: 0.75rem; font-family: sans-serif; color: #8a5a3a; }
.not-dilemma-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 24px; text-align: center; }
.not-dilemma-msg { font-size: 1rem; line-height: 1.7; color: var(--muted); font-style: italic; }

/* Follow-up */
.fu-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fu-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.fu-header-label { font-size: 0.72rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.fu-quota { font-size: 0.75rem; font-family: sans-serif; color: var(--muted); }
.fu-quota.warn { color: var(--red-soft); }
.fu-context { padding: 14px 20px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.fu-context-summary { font-size: 0.85rem; line-height: 1.55; color: var(--text); font-style: italic; margin-bottom: 6px; }
.fu-context-tradeoff { font-size: 0.78rem; font-family: sans-serif; color: var(--muted); }
.fu-context-tradeoff strong { color: var(--gold); font-weight: normal; }
.fu-chips { padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--border); }
.fu-chip { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: sans-serif; font-size: 0.78rem; cursor: pointer; transition: all 0.15s; }
.fu-chip:hover { border-color: var(--gold); color: var(--gold); background: var(--surface2); }
.fu-input-area { padding: 14px 20px; display: flex; gap: 8px; align-items: flex-end; }
.fu-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-family: inherit; font-size: 0.9rem; color: var(--text); resize: none; min-height: 40px; max-height: 120px; line-height: 1.4; }
.fu-input:focus { outline: none; border-color: var(--gold); background: var(--surface); }
.fu-send { background: var(--gold); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-family: inherit; font-size: 0.88rem; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
.fu-send:hover { background: var(--gold-light); }
.fu-send:disabled { opacity: 0.4; cursor: default; }
.fu-answer { padding: 16px 20px; border-top: 1px solid var(--border); display: none; }
.fu-answer.visible { display: block; }
.fu-answer-text { font-size: 0.95rem; line-height: 1.7; color: var(--text); white-space: pre-wrap; }
.fu-answer-rec { margin-top: 10px; font-size: 0.9rem; line-height: 1.6; color: var(--gold-light); font-style: italic; }
.fu-answer-thinking { color: var(--muted); font-family: sans-serif; font-size: 0.82rem; font-style: normal; animation: pulse 1.8s ease-in-out infinite; }
.fu-exhausted { padding: 16px 20px; text-align: center; border-top: 1px solid var(--border); }
.fu-exhausted-msg { font-size: 0.9rem; color: var(--muted); font-style: italic; margin-bottom: 12px; }
.fu-upgrade-btn { padding: 10px 24px; border-radius: 20px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-family: sans-serif; font-size: 0.82rem; cursor: pointer; transition: all 0.15s; }
.fu-upgrade-btn:hover { background: var(--gold); color: #fff; }

/* Reflection */
.reflection-prompt { font-size: 1.1rem; color: var(--text); text-align: center; font-style: italic; }
.reflection-btns { display: flex; gap: 12px; justify-content: center; }
.btn-reflect { padding: 12px 32px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--text); font-family: inherit; font-size: 1rem; cursor: pointer; transition: all 0.2s; }
.btn-reflect:hover { border-color: var(--gold); color: var(--gold); }
.followup-btns { display: flex; flex-direction: column; gap: 12px; }
.back-link { font-size: 0.85rem; color: var(--muted); font-family: sans-serif; cursor: pointer; background: none; border: none; padding: 0; text-align: left; }
.back-link:hover { color: var(--gold); }

/* Principles Explorer */
.principles-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.principles-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: sticky; top: 80px; }
.principles-sidebar h2 { font-size: 1.1rem; font-weight: normal; color: var(--gold-light); margin-bottom: 4px; }
.principles-sidebar p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.search-box { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-family: sans-serif; font-size: 0.85rem; color: var(--text); margin-bottom: 12px; }
.search-box:focus { outline: none; border-color: var(--gold); }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cat-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); font-family: sans-serif; font-size: 0.78rem; cursor: pointer; transition: all 0.15s; text-align: center; }
.cat-btn.active { background: var(--gold-light); color: #fff; border-color: var(--gold-light); }
.cat-btn:hover:not(.active) { border-color: var(--gold); color: var(--gold); }
.principles-count { font-size: 0.72rem; font-family: sans-serif; color: var(--muted); text-align: right; margin-bottom: 8px; }
.principles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.principle-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all 0.2s; text-align: left; }
.principle-card:hover { border-color: var(--gold); }
.principle-card.selected { border-color: var(--gold-light); }
.pc-category { font-size: 0.68rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 4px; }
.pc-name { font-size: 1rem; font-weight: normal; color: var(--text); }
.pc-thai { font-size: 0.82rem; color: var(--muted); margin-bottom: 8px; }
.pc-role { display: inline-block; font-size: 0.68rem; font-family: sans-serif; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 2px 8px; color: var(--muted); margin-bottom: 10px; }
.pc-desc { font-size: 0.82rem; line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.pc-tag { font-size: 0.68rem; font-family: sans-serif; background: var(--surface2); border-radius: 10px; padding: 2px 7px; color: var(--muted); }
.principle-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: sticky; top: 80px; }
.pd-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.pd-role-badge { background: var(--gold-light); color: #fff; font-size: 0.72rem; font-family: sans-serif; border-radius: 8px; padding: 4px 10px; white-space: nowrap; }
.pd-section { margin-bottom: 18px; }
.pd-section-title { font-size: 0.75rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 6px; }
.pd-section-text { font-size: 0.9rem; line-height: 1.6; color: var(--text); }
.pd-section ul { padding-left: 16px; }
.pd-section li { font-size: 0.88rem; line-height: 1.8; color: var(--text); }
.pd-prompt-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.pd-hash { font-size: 0.68rem; font-family: monospace; color: var(--border); margin-top: 16px; word-break: break-all; }

/* DEV mode */
.dev-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #3a2a10; color: #f0c060; font-family: monospace; font-size: 0.75rem; text-align: center; padding: 4px 0; letter-spacing: 0.1em; }
.dev-panel { position: fixed; bottom: 16px; right: 16px; z-index: 998; background: #1e1a14; color: #c8b890; font-family: monospace; font-size: 0.72rem; border: 1px solid #5a4a30; border-radius: 8px; padding: 10px 14px; min-width: 200px; line-height: 1.8; }
.dev-panel-title { font-size: 0.65rem; letter-spacing: 0.1em; color: #8a7a60; text-transform: uppercase; margin-bottom: 6px; }
.dev-section { margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dev-section summary { padding: 10px 14px; font-size: 0.75rem; font-family: monospace; color: var(--muted); cursor: pointer; background: var(--surface2); }
.dev-section-body { padding: 12px 14px; font-size: 0.72rem; font-family: monospace; color: var(--muted); line-height: 1.8; word-break: break-all; }

/* Page sections */
.page-label { font-size: 0.72rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; }
.page-hero-title { font-size: 0.85rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; }
.page-hero-heading { font-size: 1.9rem; font-weight: normal; color: var(--gold-light); line-height: 1.25; margin-bottom: 16px; }
.page-hero-body { font-size: 1.05rem; color: var(--muted); line-height: 1.7; max-width: 780px; }
.page-hero-image { width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 18px; }
.page-hero-image.shadow { box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.page-section { margin-top: 40px; }
.page-section-heading { font-size: 1.2rem; font-weight: normal; color: var(--gold-light); margin-bottom: 10px; }
.page-section-body { font-size: 1rem; color: var(--text); line-height: 1.75; max-width: 780px; }
.image-section { margin-top: 40px; }
.image-section-heading { font-size: 1.2rem; font-weight: normal; color: var(--gold-light); margin-bottom: 10px; }
.image-section-body { font-size: 0.95rem; color: var(--muted); line-height: 1.65; margin-bottom: 16px; max-width: 780px; }
.image-section-img { width: 100%; height: auto; display: block; margin: 0 auto; }
.image-caption { font-size: 0.78rem; color: var(--muted); text-align: center; margin-top: 10px; font-style: italic; }
@media (max-width: 600px) { .image-section-img { max-width: 180px !important; } }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.feature-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.feature-item-title { font-size: 0.92rem; font-weight: bold; color: var(--text); margin-bottom: 6px; }
.feature-item-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* Research grid */
.research-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.research-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.research-item-title { font-size: 0.95rem; font-weight: bold; color: var(--gold-light); margin-bottom: 6px; }
.research-item-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.65; }

/* Layer stack */
.layer-stack { display: flex; flex-direction: column; gap: 0; margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.layer-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.layer-item:last-child { border-bottom: none; }
.layer-num { font-size: 0.7rem; font-family: monospace; color: var(--muted); background: var(--surface2); border-radius: 4px; padding: 2px 7px; margin-top: 2px; flex-shrink: 0; }
.layer-title { font-size: 0.95rem; font-weight: bold; color: var(--text); margin-bottom: 4px; }
.layer-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* Comparison */
.comparison-desc { font-size: 0.95rem; color: var(--muted); line-height: 1.65; margin-bottom: 16px; max-width: 780px; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.comparison-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.comparison-col-label { font-size: 0.78rem; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 600px) { .comparison-grid { grid-template-columns: 1fr; } }

/* Status table */
.status-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.status-table td { padding: 10px 14px; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
.status-table td:first-child { color: var(--muted); width: 50%; }
.status-table td:last-child { color: var(--text); font-family: monospace; font-size: 0.85rem; }
.status-table tr:last-child td { border-bottom: none; }

/* Supporters */
.supporters-list { display:flex; justify-content:center; gap:32px; }
.supporter-item { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.supporter-logo { flex-shrink: 0; }
.supporter-info { flex: 1; }
.supporter-name { font-size: 0.9rem; font-weight: bold; color: var(--text); margin-bottom: 4px; }
.supporter-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* Social links */
.social-links-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.social-link-item { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: border-color 0.15s; }
.social-link-item:hover { border-color: var(--accent); }
.social-link-icon { width: 28px; height: 28px; display: block; }
.social-link-fallback { font-size: 0.75rem; color: var(--accent); }
@media (max-width: 600px) { .social-link-icon { width: 24px; height: 24px; } .social-link-item { width: 44px; height: 44px; } }

/* Footer notice */
.footer-notice { text-align: center; padding: 24px 16px 16px; font-size: 0.72rem; color: var(--muted); line-height: 1.5; max-width: 680px; margin: 0 auto; }

/* Page tags */
.page-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.page-tag { font-size: 0.75rem; font-family: sans-serif; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); color: var(--muted); }


.supporters-logos {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
  margin-top:20px;
  flex-wrap:wrap;
}

.supporter-logo-link {
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.supporter-logo-link img {
  height:40px;
  width:auto;
  display:block;
}