* {
    box-sizing: border-box;
}

:root {
    --bg: #edf4f0;
    --bg-accent: radial-gradient(circle at 10% 0%, #ffffff 0%, rgba(255, 255, 255, 0.7) 28%, transparent 60%),
        linear-gradient(165deg, #edf4f0 0%, #d7e6db 55%, #c9ddd0 100%);
    --panel: rgba(255, 255, 255, 0.82);
    --text: #12302c;
    --muted: #496660;
    --brand: #0c7f77;
    --brand-strong: #086159;
    --border: #9cc5be;
    --soft-border: #c7ddd7;
    --active-row: rgba(12, 127, 119, 0.12);
    --shadow: 0 12px 40px rgba(18, 48, 44, 0.1);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-accent);
    color: var(--text);
    font-family: "Avenir Next", "Segoe UI", "Noto Sans SC", sans-serif;
}

main {
    max-width: 1150px;
    margin: 0 auto;
    padding: clamp(14px, 4vw, 42px);
}

h1,
h2,
h3 {
    margin: 0 0 10px;
    line-height: 1.2;
}

h1 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
}

h2 {
    font-size: clamp(1.3rem, 2vw, 1.9rem);
    color: var(--brand-strong);
}

h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}

a {
    color: var(--brand);
}

code {
    background: rgba(12, 127, 119, 0.11);
    border-radius: 4px;
    padding: 0 5px;
}

nav ul {
    padding: 10px;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}

nav ul li {
    border: 1px solid var(--soft-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    padding: 8px 16px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--soft-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: clamp(14px, 2.5vw, 22px);
    margin: 14px 0;
    backdrop-filter: blur(6px);
}

.hero-panel {
    border-left: 6px solid var(--brand);
}

.subtitle {
    margin: 8px 0;
    color: var(--muted);
}

.shortcut-hint {
    margin: 0;
    color: var(--muted);
}

#container {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

#drawingCanvas {
    touch-action: none;
    border: 2px solid var(--brand);
    border-radius: 10px;
    width: 100%;
    display: block;
    background: #ffffff;
}

#characterDisplay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    margin: 0;
    padding: 0 8px;
    height: 100%;
    font-size: clamp(80px, 30vmin, 400px);
    line-height: 1;
    opacity: 0.1;
    pointer-events: none;
    width: 100%;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#pinyinDisplay {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.2rem);
    margin: 12px 0 6px;
}

.meta-line {
    margin: 6px 0;
    font-size: 0.95rem;
    color: var(--muted);
}

.media-box {
    min-height: 26px;
    margin-bottom: 8px;
}

#mediaDisplay,
#preview {
    max-width: 180px;
    border-radius: 8px;
    border: 1px solid var(--soft-border);
    display: none;
}

.box {
    width: 100%;
    min-height: 50px;
    display: flex;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

button,
input,
select,
.file-label {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font-size: 1rem;
    padding: 10px 12px;
}

button,
.file-label {
    cursor: pointer;
}

.box button,
#downloadFlashcards,
.file-label {
    border: 1px solid var(--brand);
    color: var(--brand);
    background: rgba(12, 127, 119, 0.05);
    text-align: center;
    min-height: 44px;
}

.box button:hover,
#downloadFlashcards:hover,
.file-label:hover {
    background: rgba(12, 127, 119, 0.12);
}

input:focus,
select:focus,
button:focus,
.file-label:focus {
    outline: 2px solid rgba(12, 127, 119, 0.35);
    outline-offset: 1px;
}

input[type="file"] {
    flex: 1;
    min-width: 170px;
}

#flashcardForm input[type="text"],
#cardEditor input[type="text"],
#searchInput,
#tagFilter,
#filterSelect {
    flex: 1;
    min-width: 160px;
}

.check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
}

#downloadFlashcards {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    text-decoration: none;
}

.controls-row button {
    flex: 1;
    min-width: 135px;
}

.stroke-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#strokeWidthRange {
    flex: 1;
    min-width: 160px;
}

.compact-box button {
    flex: 1;
    min-width: 120px;
}

.filter-row {
    align-items: center;
}

#stats {
    flex: 2;
    min-width: 280px;
    color: var(--muted);
    align-self: center;
}

.editor-row {
    border: 1px solid var(--brand);
    border-radius: 10px;
    padding: 10px;
}

#flashcardList,
#deckLoadList {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    border: 1px solid var(--soft-border);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.65);
}

#flashcardList li,
#deckLoadList li {
    padding: 10px;
    border-bottom: 1px solid var(--soft-border);
}

#flashcardList li:last-child,
#deckLoadList li:last-child {
    border-bottom: none;
}

#flashcardList li.is-active {
    background: var(--active-row);
}

#flashcardList li .card-actions {
    display: flex;
    gap: 6px;
}

#flashcardList li .card-text {
    margin-right: 12px;
}

#flashcardList li .card-actions button {
    flex: unset;
    min-width: 72px;
    font-size: 0.9rem;
    padding: 7px 8px;
}

body.dark-mode {
    --bg: #111a18;
    --bg-accent: radial-gradient(circle at 0% 0%, rgba(36, 65, 61, 0.75) 0%, transparent 35%),
        linear-gradient(170deg, #111a18 0%, #162422 55%, #1c2f2c 100%);
    --panel: rgba(18, 30, 28, 0.88);
    --text: #e0efec;
    --muted: #a4c2bd;
    --brand: #64d3c6;
    --brand-strong: #96ebdf;
    --border: #47736e;
    --soft-border: #2e4d49;
    --active-row: rgba(100, 211, 198, 0.16);
    --shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode button,
body.dark-mode .file-label,
body.dark-mode #flashcardList,
body.dark-mode #deckLoadList,
body.dark-mode #drawingCanvas {
    background: #162523;
}

@media (max-width: 780px) {
    main {
        padding: 12px;
    }

    .box {
        flex-direction: column;
        align-items: stretch;
    }

    nav ul {
        justify-content: stretch;
        padding: 8px 12px;
    }

    nav ul li {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    #drawingCanvas {
        min-height: 280px;
    }

    #stats {
        min-width: 100%;
    }
}