:root {
    --space-4: 4px;
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --radius-4: 4px;
    --radius-8: 8px;
    --radius-16: 16px;
    --font-size-xs: 0.8rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5625rem;
    --line-height-standard: 1.6;
    --button-height-40: 40px;
}

body {
    margin:0;
    background:#1a1a2e;
    color:#eaeaea;
    font-family:sans-serif;
    font-size:var(--font-size-base);
    line-height:var(--line-height-standard);
}
main { max-width:960px; margin:0 auto; padding:var(--space-24) var(--space-40) var(--space-40); }
.breadcrumb {
    margin-top:0;
}
.breadcrumb__list {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-8);
    margin:0;
    padding:0;
    list-style:none;
    color:#b8c1ec;
    font-size:var(--font-size-xs);
    line-height:var(--line-height-standard);
}
.breadcrumb__item {
    display:flex;
    align-items:center;
    gap:var(--space-8);
}
.breadcrumb__button {
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    font:inherit;
    font-weight:inherit;
    cursor:pointer;
}
.breadcrumb__button:hover {
    color:#eaeaea;
}
.breadcrumb__item:not(:last-child)::after {
    content: ">";
    color:rgba(184, 193, 236, 0.72);
}
.breadcrumb__item.is-current {
    color:#eaeaea;
}
.breadcrumb__item.is-current .breadcrumb__button {
    cursor:default;
}
h1, h2, h3, p { margin-top:0; }
h2 {
    margin-bottom:var(--space-16);
    font-size:var(--font-size-xl);
    line-height:var(--line-height-standard);
}
h3 {
    margin-bottom:var(--space-8);
    font-size:var(--font-size-lg);
    line-height:var(--line-height-standard);
}
p {
    margin-bottom:var(--space-16);
    line-height:var(--line-height-standard);
}
label { display:block; margin-top:var(--space-16); font-weight:bold; }
textarea { width:100%; margin-top:var(--space-8); box-sizing:border-box; }
textarea.prompt { height:140px; }
textarea.answer {
    position:relative;
    z-index:1;
    height:220px;
    margin-top:0;
    border:0;
    background:transparent;
    color:transparent;
    caret-color:#eaeaea;
    resize:vertical;
}
button {
    min-height:var(--button-height-40);
    padding:var(--space-8) var(--space-16);
    margin-top:0;
    border:0;
    border-radius:var(--radius-16);
    background:#ffd60a;
    color:#1a1a2e;
    font:inherit;
    line-height:var(--line-height-standard);
    font-weight:bold;
    cursor:pointer;
}
button:disabled { opacity:0.7; cursor:wait; }
pre { margin:0; white-space:pre-wrap; }
.app-header {
    position:sticky;
    top:0;
    z-index:10;
    backdrop-filter:blur(18px);
    background:rgba(8, 17, 38, 0.86);
    border-bottom:1px solid rgba(184, 193, 236, 0.12);
}
.app-header__inner {
    max-width:960px;
    margin:0 auto;
    padding:var(--space-16) var(--space-40);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-24);
}
.app-brand-block {
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}
.app-home-button {
    padding:0;
    margin:0;
    min-height:0;
    border:0;
    background:transparent;
    color:inherit;
    text-align:left;
    cursor:pointer;
}
.app-brand {
    font-size:var(--font-size-lg);
    font-weight:700;
    letter-spacing:0.08em;
    line-height:var(--line-height-standard);
}
.app-header__summary {
    margin:0;
    color:#b8c1ec;
    line-height:var(--line-height-standard);
}
.app-nav {
    display:flex;
    align-items:center;
    gap:var(--space-16);
    margin-top:0;
    color:#dbe6ff;
}
.app-nav span {
    font-size:var(--font-size-xs);
    font-weight:700;
    white-space:nowrap;
}
.app-nav select {
    min-width:180px;
    min-height:var(--button-height-40);
    padding:var(--space-8) var(--space-16);
    border:1px solid rgba(184, 193, 236, 0.24);
    border-radius:var(--radius-16);
    background:#102554;
    color:#eaeaea;
    font:inherit;
}
.panel { background:linear-gradient(180deg, #102a5c 0%, #0d2248 100%); padding:var(--space-24); border-radius:var(--radius-16); margin-top:var(--space-24); box-shadow:0 18px 40px rgba(0, 0, 0, 0.25); }
.hint { color:#b8c1ec; }
#generateButton,
#startPracticeButton {
    margin-top:var(--space-16);
}
.answer-card {
    background:#102554;
    border:1px solid rgba(184, 193, 236, 0.18);
    transition:border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.answer-card.is-locked {
    border-color:rgba(87, 204, 153, 0.75);
    box-shadow:0 0 0 1px rgba(87, 204, 153, 0.28), 0 18px 40px rgba(0, 0, 0, 0.25);
    transform:translateY(-1px);
}
.answer-banner { display:flex; align-items:center; gap:var(--space-8); margin-bottom:var(--space-16); color:#dbe6ff; font-weight:bold; transition:color 160ms ease; }
.answer-card.is-locked .answer-banner { color:#effff7; }
.answer-banner span { color:#ffd60a; }
.secret-code { min-height:180px; padding:var(--space-16); border-radius:var(--radius-8); background:rgba(6, 17, 43, 0.34); font-family:monospace; font-size:var(--font-size-base); line-height:var(--line-height-standard); transition:filter 120ms ease, opacity 120ms ease; }
.secret-code.is-hidden { filter:blur(9px); opacity:0.65; user-select:none; }
.secret-code.is-visible { filter:none; opacity:1; }
.is-hidden-section { display:none !important; }
.topic-actions { display:flex; gap:var(--space-16); flex-wrap:wrap; margin-top:var(--space-16); }
.topic-chat {
    margin-top:var(--space-16);
    padding:var(--space-16);
    border-radius:var(--radius-8);
    background:rgba(6, 17, 43, 0.34);
    border:1px solid rgba(184, 193, 236, 0.18);
}
.topic-chat__messages {
    display:grid;
    gap:var(--space-16);
}
.topic-chat__empty {
    margin:0;
    color:#b8c1ec;
}
.topic-chat__message {
    padding:var(--space-16);
    border-radius:var(--radius-8);
    background:#102554;
    border:1px solid rgba(184, 193, 236, 0.18);
}
.topic-chat__message.is-user {
    background:#163062;
}
.topic-chat__message-role {
    display:block;
    margin-bottom:var(--space-8);
    font-size:var(--font-size-xs);
    color:#b8c1ec;
}
.topic-chat__message-body {
    margin:0;
    line-height:var(--line-height-standard);
    white-space:pre-wrap;
}
.topic-chat__message-body h3,
.topic-chat__message-body h4,
.review-text h4 {
    margin:var(--space-16) 0 var(--space-8);
    line-height:var(--line-height-standard);
    color:#dbe6ff;
}
.topic-chat__message-body h3 {
    font-size:var(--font-size-lg);
}
.topic-chat__message-body h4,
.review-text h4 {
    font-size:var(--font-size-base);
}
.topic-chat__message-body p,
.topic-chat__message-body ul,
.review-text ul {
    margin:0 0 var(--space-8);
}
.topic-chat__message-body ul,
.review-text ul {
    padding-left:var(--space-24);
}
.topic-chat__message-body li,
.review-text li {
    margin-bottom:var(--space-4);
}
.topic-chat__message-body pre,
.review-text pre {
    margin:0 0 var(--space-16);
    padding:var(--space-16);
    border-radius:var(--radius-8);
    background:rgba(6, 17, 43, 0.5);
    overflow:auto;
}
.topic-chat__message-body code,
.review-text code {
    font-family:monospace;
    font-size:var(--font-size-xs);
}
.topic-chat__input {
    min-height:140px;
}
.topic-chat__actions {
    display:flex;
    justify-content:flex-start;
    margin-top:var(--space-16);
}
.result { margin-top:16px; }
#requestPanelHint,
#sampleCategoryHint {
    margin-bottom:var(--space-16);
}
.request-mode { display:flex; gap:var(--space-16); flex-wrap:wrap; margin-top:0; }
.request-mode button { background:#21386f; color:#dbe6ff; }
.request-mode button.is-active { background:#ffd60a; color:#1a1a2e; }
#sampleCategorySection {
    margin-top:var(--space-16);
}
.sample-category-list {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:var(--space-16);
    margin-top:0;
}
.sample-category-button {
    width:100%;
    margin-top:0;
    text-align:left;
    padding:var(--space-16);
    border:1px solid rgba(184, 193, 236, 0.18);
    border-radius:var(--radius-16);
    background:#163062;
    color:#dbe6ff;
}
.sample-category-button.is-active {
    background:#ffd60a;
    color:#1a1a2e;
}
.sample-category-button strong,
.sample-category-button small {
    display:block;
}
.sample-category-button strong {
    margin-bottom:var(--space-8);
}
.sample-category-button small {
    color:inherit;
    opacity:0.82;
    line-height:var(--line-height-standard);
}
.sample-list { display:grid; gap:var(--space-16); margin-top:16px; }
.sample-card { width:100%; text-align:left; padding:var(--space-16); border:1px solid rgba(184, 193, 236, 0.18); border-radius:var(--radius-8); background:#102554; color:#eaeaea; }
.sample-card strong { display:block; margin-bottom:var(--space-4); }
.sample-card small { display:block; color:#b8c1ec; margin-top:var(--space-4); }
.language-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:16px; }
.language-card { width:100%; text-align:left; padding:var(--space-16); border:1px solid rgba(184, 193, 236, 0.18); border-radius:var(--radius-16); background:#102554; color:#eaeaea; }
.language-card strong { display:block; margin-bottom:var(--space-8); font-size:var(--font-size-lg); line-height:var(--line-height-standard); }
.language-card small { display:block; color:#b8c1ec; margin-top:var(--space-8); }
.section-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-16); }
.subtle-button { background:#21386f; color:#dbe6ff; }
.feedback-panel { margin-top:var(--space-16); padding:var(--space-16); border-radius:var(--radius-8); background:rgba(6, 17, 43, 0.34); border:1px solid rgba(184, 193, 236, 0.18); }
.feedback-panel p:last-child { margin-bottom:0; }
.review-text { margin-top:var(--space-16); }
.review-text h3 {
    margin:var(--space-16) 0 var(--space-8);
    font-size:var(--font-size-xs);
    color:#dbe6ff;
}
.review-text h3:first-child { margin-top:0; }
.review-text p {
    margin:0 0 var(--space-8);
    line-height:var(--line-height-standard);
}
.review-text p:last-child { margin-bottom:0; }
.code-editor {
    position:relative;
    margin-top:var(--space-8);
    border-radius:var(--radius-8);
    background:rgba(6, 17, 43, 0.34);
    border:1px solid rgba(184, 193, 236, 0.18);
    overflow:hidden;
}
.answer-overlay,
textarea.answer {
    width:100%;
    min-height:220px;
    padding:var(--space-16);
    box-sizing:border-box;
    font-family:monospace;
    font-size:var(--font-size-base);
    line-height:var(--line-height-standard);
    white-space:pre;
    tab-size:2;
}
.answer-overlay {
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    color:#eaeaea;
}
.code-line {
    min-height:1.6em;
    border-radius:var(--radius-4);
}
.code-line.is-mismatch {
    background:rgba(255, 107, 107, 0.22);
    box-shadow:inset 0 0 0 1px rgba(255, 107, 107, 0.25);
}

@media (max-width: 720px) {
    main {
        padding:var(--space-24) var(--space-16) var(--space-32);
    }

    .app-header__inner {
        padding:var(--space-16);
        align-items:flex-start;
        flex-direction:column;
    }

    .app-nav {
        width:100%;
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .app-nav select {
        width:100%;
    }
}