/* ============================================================
   Guide Editor — Frontend
   ============================================================ */

/* --- Breadcrumb + Page Title --- */
.ge-breadcrumbs {
    max-width: 960px; margin: -1.5rem auto 0.5rem;
    padding: 0.25rem 0 0;
    font-size: 0.85rem;
}
.ge-breadcrumbs ol {
    list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem;
    padding: 0; margin: 0;
}
.ge-breadcrumbs li {
    display: flex; align-items: center; gap: 0.25rem;
    color: var(--text-muted, #7a7870);
}
.ge-breadcrumbs li:not(:last-child)::after {
    content: '\203A'; margin-left: 0.25rem; color: var(--text-muted, #7a7870);
}
.ge-breadcrumbs a {
    color: var(--text-dimmed, #7a7870); text-decoration: none;
}
.ge-breadcrumbs a:hover {
    color: var(--gold, #c4a24e); text-decoration: underline;
}
.ge-breadcrumbs li:last-child a {
    color: var(--text-primary, #e0ddd5); pointer-events: none;
}

.ge-page-title {
    max-width: 960px; margin: 0.5rem auto 1rem;
    font-size: 1.5rem; font-weight: 700;
    color: var(--text-primary, #e0ddd5);
}

.guide-editor { max-width: 960px; margin: 0 auto; position: relative; }

/* --- Hero Image Upload --- */
.ge-hero-upload {
    margin-bottom: 1.25rem;
}
.ge-hero-upload__preview {
    position: relative; width: 100%;
    aspect-ratio: 1200 / 400;
    border: 2px dashed var(--border-color, #2a2a35);
    border-radius: var(--border-radius-lg, 8px);
    overflow: hidden; cursor: pointer;
    background: var(--bg-panel, #13151a);
    transition: border-color 0.15s;
}
.ge-hero-upload__preview:hover {
    border-color: var(--gold-dark, #a37e2c);
}
.ge-hero-upload__placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 0.4rem;
    color: var(--text-dimmed, #7a7870); font-size: 0.9rem;
}
.ge-hero-upload__placeholder small {
    font-size: 0.78rem; color: var(--text-muted, #555);
}
.ge-hero-upload__icon { font-size: 2rem; opacity: 0.5; }
.ge-hero-upload__img {
    width: 100%; height: 100%; object-fit: cover;
}
.ge-hero-upload__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    background: rgba(0,0,0,0.5); opacity: 0;
    transition: opacity 0.15s;
}
.ge-hero-upload__preview:hover .ge-hero-upload__overlay { opacity: 1; }
.ge-hero-upload__change {
    padding: 0.45rem 1rem; border-radius: 6px; border: 1px solid var(--gold, #c4a24e);
    background: rgba(0,0,0,0.6); color: var(--gold); font-size: 0.85rem;
    cursor: pointer; font-family: var(--font-body); font-weight: 600;
}
.ge-hero-upload__remove {
    padding: 0.35rem 0.65rem; border-radius: 6px; border: 1px solid rgba(239,68,68,0.4);
    background: rgba(0,0,0,0.6); color: #f87171; font-size: 1.1rem;
    cursor: pointer; line-height: 1;
}
.ge-hero-upload--has-image .ge-hero-upload__preview {
    border-style: solid; border-color: var(--border-color, #2a2a35);
}
.ge-hero-upload--error .ge-hero-upload__preview {
    border-color: #ef4444;
}

/* --- Save Status Indicator --- */
.ge-save-status {
    position: sticky; top: 0; z-index: 10;
    text-align: right; font-size: 0.8rem; padding: 0.35rem 0.75rem;
    color: var(--text-dimmed, #7a7870);
}
.ge-save-status--saved { color: var(--success, #22c55e); }
.ge-save-status--unsaved { color: var(--warning, #f59e0b); }
.ge-save-status--bottom {
    position: static; padding: 0; font-size: 0.85rem;
}
.ge-actions__spacer { flex: 1; }

/* --- Meta Section --- */
.ge-meta {
    background: var(--bg-panel, #13151a);
    border: 1px solid var(--border-panel, #252830);
    border-radius: var(--border-radius-lg, 8px);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.ge-meta__row { display: flex; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.ge-meta__row:last-child { margin-bottom: 0; }
.ge-meta__field { flex: 1; min-width: 150px; }
.ge-meta__field--wide { flex: 2; min-width: 250px; }
.ge-meta__field--narrow { flex: 0 0 100px; min-width: 80px; }
.ge-meta__field label {
    display: block; font-size: 0.78rem; font-weight: 600;
    color: var(--text-dimmed, #7a7870); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.ge-meta__field select, .ge-meta__field input[type="number"] {
    width: 100%; padding: 0.5rem 0.7rem; border-radius: var(--border-radius, 6px);
    border: 1px solid var(--border-color, #2a2a35);
    background: var(--bg-input, #0f1015); color: var(--text-primary, #e0ddd5);
    font-family: var(--font-body); font-size: 0.9rem;
}

/* --- Radio Group --- */
.ge-radio-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ge-radio {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.75rem; border-radius: var(--border-radius, 6px);
    border: 1px solid var(--border-color, #2a2a35);
    font-size: 0.85rem; cursor: pointer; transition: all 0.15s;
    color: var(--text-dimmed);
}
.ge-radio:has(input:checked) {
    border-color: var(--gold-dark, #a37e2c); color: var(--text-primary);
    background: rgba(196, 162, 78, 0.08);
}
.ge-radio input { display: none; }
.ge-radio--green:has(input:checked) { border-color: #22c55e; color: #4ade80; background: rgba(34,197,94,0.08); }
.ge-radio--yellow:has(input:checked) { border-color: #f59e0b; color: #fbbf24; background: rgba(245,158,11,0.08); }
.ge-radio--red:has(input:checked) { border-color: #ef4444; color: #f87171; background: rgba(239,68,68,0.08); }

/* --- Tags --- */
.ge-tags {
    display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.4rem 0.5rem;
    border: 1px solid var(--border-color, #2a2a35); border-radius: var(--border-radius, 6px);
    background: var(--bg-input, #0f1015); min-height: 38px; align-items: center;
}
.ge-tags input {
    border: none; outline: none; background: transparent;
    color: var(--text-primary); flex: 1; min-width: 120px; font-size: 0.85rem; font-family: var(--font-body);
}
.ge-tag {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.15rem 0.5rem; border-radius: 4px;
    background: rgba(196, 162, 78, 0.12); color: var(--gold, #c4a24e);
    font-size: 0.8rem;
}
.ge-tag__remove {
    background: none; border: none; color: inherit; cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0; opacity: 0.7;
}
.ge-tag__remove:hover { opacity: 1; }
.ge-tag--auto {
    background: rgba(196, 162, 78, 0.06);
    color: var(--text-dimmed, #7a7870);
    border: 1px dashed rgba(196, 162, 78, 0.25);
    font-size: 0.75rem;
}

/* --- Formatting Help --- */
.ge-format-help { margin-bottom: 1rem; border: 1px solid var(--border-panel, #252830); border-radius: 8px; background: var(--bg-panel, #13151a); }
.ge-format-help summary { padding: 0.6rem 1rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--gold, #c4a24e); user-select: none; }
.ge-format-help[open] summary { border-bottom: 1px solid var(--border-panel, #252830); }
.ge-format-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1rem; }
@media (max-width: 640px) { .ge-format-help__grid { grid-template-columns: 1fr; } }
.ge-format-help h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dimmed, #7a7870); margin: 0.75rem 0 0.3rem; }
.ge-format-help h4:first-child { margin-top: 0; }
.ge-format-help table { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
.ge-format-help td { padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--border-panel, #252830); vertical-align: middle; }
.ge-format-help td:first-child { white-space: nowrap; font-family: 'Fira Code', monospace; color: var(--text-dimmed, #7a7870); }
.ge-format-help code { background: rgba(255,255,255,0.06); padding: 1px 4px; border-radius: 3px; font-size: 0.85em; }

/* --- Language Tabs --- */
.ge-lang-tabs { display: flex; gap: 0; margin-bottom: 0; }
.ge-lang-tab {
    padding: 0.65rem 1.25rem; cursor: pointer;
    border: 1px solid var(--border-color, #2a2a35); border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent; color: var(--text-dimmed, #7a7870);
    font-size: 0.9rem; font-weight: 600; font-family: var(--font-body);
    transition: all 0.15s;
}
.ge-lang-tab--active {
    background: var(--bg-panel, #13151a); color: var(--text-primary, #e0ddd5);
    border-bottom-color: var(--bg-panel, #13151a); position: relative; z-index: 1;
}
.ge-lang-tab__flag { font-weight: 700; margin-right: 0.25rem; }
.ge-lang-tab__status { margin-left: 0.35rem; font-size: 0.75rem; }

/* --- Language Panel --- */
.ge-lang-panel {
    display: none; padding: 1.25rem;
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: 0 8px 8px 8px;
    background: var(--bg-panel, #13151a);
    margin-top: -1px; margin-bottom: 1.25rem;
}
.ge-lang-panel--active { display: block; }

/* --- Inputs --- */
.ge-input {
    width: 100%; padding: 0.55rem 0.75rem; border-radius: var(--border-radius, 6px);
    border: 1px solid var(--border-color, #2a2a35);
    background: var(--bg-input, #0f1015); color: var(--text-primary, #e0ddd5);
    font-family: var(--font-body); font-size: 0.95rem;
    margin-bottom: 0.5rem;
}
.ge-input--title { font-size: 1.15rem; font-weight: 600; }
.ge-input:focus { outline: none; border-color: var(--gold-dark, #a37e2c); }

/* --- Toolbar --- */
.ge-toolbar {
    display: flex; flex-wrap: wrap; gap: 2px; padding: 0.4rem 0.5rem;
    background: var(--bg-secondary, #0f1015);
    border: 1px solid var(--border-color, #2a2a35);
    border-bottom: none; border-radius: 6px 6px 0 0;
    margin-top: 0.5rem;
}
.ge-toolbar button {
    padding: 0.3rem 0.55rem; border: 1px solid transparent; border-radius: 4px;
    background: transparent; color: var(--text-dimmed, #7a7870);
    cursor: pointer; font-size: 0.85rem; font-family: var(--font-body);
    transition: all 0.12s; line-height: 1.2;
}
.ge-toolbar button:hover { background: rgba(196, 162, 78, 0.1); color: var(--text-primary); border-color: var(--border-color); }
.ge-toolbar__sep { width: 1px; background: var(--border-color, #2a2a35); margin: 0 0.2rem; align-self: stretch; }
.ge-toolbar__preview { margin-left: auto; }

/* --- Content Textarea --- */
.ge-content {
    width: 100%; min-height: 400px; padding: 1rem;
    border: 1px solid var(--border-color, #2a2a35);
    border-top: none; border-radius: 0 0 6px 6px;
    background: var(--bg-input, #0f1015); color: var(--text-primary, #e0ddd5);
    font-family: 'Fira Code', 'Consolas', monospace; font-size: 0.9rem;
    line-height: 1.7; resize: vertical;
}
.ge-content:focus { outline: none; border-color: var(--gold-dark, #a37e2c); }

/* --- Preview --- */
.ge-preview {
    min-height: 400px; padding: 1.25rem;
    border: 1px solid var(--border-color, #2a2a35);
    border-top: none; border-radius: 0 0 6px 6px;
    background: var(--bg-panel, #13151a); color: var(--text-primary, #e0ddd5);
    font-size: 0.95rem; line-height: 1.7;
    overflow-y: auto;
}
.ge-preview h2 { font-size: 1.5rem; color: var(--gold, #c4a24e); margin: 1.5rem 0 0.75rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; }
.ge-preview h3 { font-size: 1.2rem; color: var(--text-primary); margin: 1.25rem 0 0.5rem; }
.ge-preview h4 { font-size: 1rem; color: var(--text-secondary); margin: 1rem 0 0.5rem; }
.ge-preview p { margin-bottom: 0.75rem; }
.ge-preview ul, .ge-preview ol { margin: 0.5rem 0 0.75rem 1.5rem; }
.ge-preview li { margin-bottom: 0.3rem; }
.ge-preview blockquote { border-left: 3px solid var(--gold-dark); padding: 0.5rem 1rem; margin: 0.75rem 0; color: var(--text-dimmed); background: rgba(196,162,78,0.05); border-radius: 0 6px 6px 0; }
.ge-preview code { background: rgba(255,255,255,0.06); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.88em; }
.ge-preview pre { background: rgba(0,0,0,0.3); padding: 1rem; border-radius: 6px; overflow-x: auto; margin: 0.75rem 0; }
.ge-preview pre code { background: none; padding: 0; }
.ge-preview img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5rem 0; }
.ge-preview hr { border: none; border-top: 1px solid var(--border-color); margin: 1.5rem 0; }
.ge-preview .guide-highlight, .ge-preview mark { background: rgba(196, 162, 78, 0.2); color: var(--gold, #c4a24e); padding: 0.1rem 0.3rem; border-radius: 3px; }

/* Custom blocks in preview */
.ge-callout { padding: 0.75rem 1rem; border-radius: 6px; margin: 0.75rem 0; font-size: 0.92rem; }
.ge-callout--info { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); color: #93c5fd; }
.ge-callout--warning { background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.2); color: #fdba74; }
.ge-spoiler { border: 1px solid var(--border-color); border-radius: 6px; margin: 0.75rem 0; }
.ge-spoiler summary { padding: 0.5rem 0.75rem; cursor: pointer; font-weight: 600; color: var(--text-dimmed); }
.ge-spoiler > div { padding: 0.5rem 0.75rem; }

/* --- Meta Description --- */
.ge-meta-desc { position: relative; margin-top: 0.75rem; }
.ge-meta-desc__count { position: absolute; right: 0.75rem; top: 0.6rem; font-size: 0.75rem; color: var(--text-dimmed); }

/* --- Checkbox --- */
.ge-checkbox {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.75rem; font-size: 0.88rem; color: var(--text-dimmed); cursor: pointer;
}

/* --- Actions --- */
.ge-actions {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; margin-bottom: 2rem;
}
.ge-btn {
    padding: 0.6rem 1.25rem; border-radius: var(--border-radius, 6px);
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--border-color, #2a2a35);
    background: var(--bg-panel, #13151a); color: var(--text-primary, #e0ddd5);
    font-family: var(--font-body); transition: all 0.15s; text-decoration: none;
}
.ge-btn:hover { border-color: var(--gold-dark); color: var(--gold); }
.ge-btn--primary { background: var(--gold, #c4a24e); color: var(--bg-primary, #0a0a0f); border-color: var(--gold); }
.ge-btn--primary:hover { background: var(--gold-bright, #d4b65e); }
.ge-btn--secondary { border-color: var(--gold-dark); color: var(--gold); }
.ge-btn--ghost { background: transparent; border-color: transparent; color: var(--text-dimmed); }
.ge-btn--ghost:hover { color: var(--text-primary); }

/* --- Status Toggle --- */
.ge-status-toggle {
    display: inline-flex; align-items: center;
    background: var(--bg-secondary, #0f1015);
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: var(--border-radius, 6px);
    overflow: hidden;
}
.ge-status-toggle__opt {
    padding: 0.5rem 0.9rem; border: none; background: transparent;
    color: var(--text-dimmed, #7a7870); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; font-family: var(--font-body); transition: all 0.15s;
    position: relative;
}
.ge-status-toggle__opt + .ge-status-toggle__opt {
    border-left: 1px solid var(--border-color, #2a2a35);
}
.ge-status-toggle__opt:hover { color: var(--text-primary, #e0ddd5); }
.ge-status-toggle__opt--active {
    background: rgba(196, 162, 78, 0.15); color: var(--gold, #c4a24e);
}
.ge-status-toggle__opt--active.ge-status-toggle__opt--published {
    background: rgba(34, 197, 94, 0.12); color: #4ade80;
}

/* --- Feedback box --- */
.ge-feedback {
    margin-top: 1rem; padding: 1rem;
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px; color: #f87171;
}
.ge-feedback h4 { margin: 0 0 0.5rem; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .ge-meta__row { flex-direction: column; gap: 0.5rem; }
    .ge-meta__field--narrow { flex: 1; }
    .ge-toolbar { gap: 1px; padding: 0.3rem; }
    .ge-toolbar button { padding: 0.25rem 0.4rem; font-size: 0.78rem; }
    .ge-actions { flex-direction: column; }
    .ge-actions .ge-btn { width: 100%; text-align: center; }
}