/* ===================================================================
   Thai Pronouns Learning — Frontend Styles
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Sarabun:wght@400;600;700&display=swap');

/* --- CSS Variables ------------------------------------------------- */
#tpl-app {
    --bg:        #0e0f13;
    --surface:   #181921;
    --surface2:  #1f2130;
    --border:    #2a2c3a;
    --accent:    #f0a500;
    --accent-d:  #c98900;
    --success:   #4fc3a1;
    --danger:    #e05a5a;
    --text:      #e8e6df;
    --text-muted:#7a7a8e;
    --radius:    14px;
    --radius-sm: 8px;
    --shadow:    0 4px 24px rgba(0,0,0,.45);
    --font-th:   'Sarabun', 'Noto Sans Thai', sans-serif;
    --font-en:   'DM Sans', system-ui, sans-serif;
    font-family: var(--font-en);
    background:  var(--bg);
    color:       var(--text);
    padding:     2rem 1.25rem 2.5rem;
    border-radius: var(--radius);
    max-width:   860px;
    margin:      2rem auto;
    box-sizing:  border-box;
}
#tpl-app[data-theme="light"] {
    --bg:        #f6f5f0;
    --surface:   #ffffff;
    --surface2:  #eeecea;
    --border:    #d6d3cd;
    --text:      #1a1a2e;
    --text-muted:#757083;
    --shadow:    0 4px 24px rgba(0,0,0,.12);
}
#tpl-app * { box-sizing: border-box; }

/* --- Header & Tabs -------------------------------------------------- */
.tpl-header    { margin-bottom: 1.5rem; }
.tpl-title     { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; letter-spacing: -.02em; }
.tpl-tabs      { display: flex; gap: .5rem; flex-wrap: wrap; }
.tpl-tab       {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
    padding: .55rem 1.1rem; border-radius: 40px; font-size: .9rem; font-family: var(--font-en);
    cursor: pointer; transition: all .2s;
}
.tpl-tab:hover  { border-color: var(--accent); color: var(--text); }
.tpl-tab.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }

/* --- Panels --------------------------------------------------------- */
.tpl-panel { animation: tplFadeIn .3s ease; }
@keyframes tplFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* --- Controls ------------------------------------------------------ */
.tpl-controls {
    display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.tpl-controls label { font-size: .88rem; color: var(--text-muted); }
.tpl-controls select,
.tpl-input {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--radius-sm); padding: .5rem .75rem; font-size: .9rem;
    font-family: var(--font-en); outline: none;
    transition: border-color .2s;
}
.tpl-input:focus,
.tpl-controls select:focus { border-color: var(--accent); }

/* --- Buttons ------------------------------------------------------- */
.tpl-btn {
    background: var(--accent); color: #000; border: none; border-radius: 40px;
    padding: .55rem 1.4rem; font-size: .9rem; font-weight: 700;
    font-family: var(--font-en); cursor: pointer; transition: background .2s, transform .1s;
}
.tpl-btn:hover   { background: var(--accent-d); }
.tpl-btn:active  { transform: scale(.97); }
.tpl-btn-outline {
    background: transparent; color: var(--text); border: 1px solid var(--border);
}
.tpl-btn-outline:hover { border-color: var(--accent); background: transparent; color: var(--accent); }

/* --- Progress bar -------------------------------------------------- */
.tpl-fc-progress { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; font-size:.85rem; color:var(--text-muted); }
.tpl-progress-bar { flex:1; height:5px; background:var(--border); border-radius:99px; overflow:hidden; }
.tpl-progress-bar > div { height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease; }

/* === FLASHCARDS ===================================================== */
.tpl-fc-deck {}
.tpl-card-wrap { perspective: 1000px; margin: 0 auto 1.5rem; max-width: 520px; }
.tpl-card {
    width: 100%; min-height: 280px; position: relative;
    cursor: pointer; border-radius: var(--radius);
}
.tpl-card-inner {
    width: 100%; height: 100%; min-height: 280px;
    position: relative; transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.tpl-card.flipped .tpl-card-inner { transform: rotateY(180deg); }
.tpl-card-front,
.tpl-card-back {
    position: absolute; inset: 0; border-radius: var(--radius);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; padding: 2rem 1.75rem; text-align: center;
}
.tpl-card-back { transform: rotateY(180deg); justify-content: flex-start; padding-top: 2rem; }

.tpl-thai     { font-family: var(--font-th); font-size: 4rem; font-weight: 700; line-height: 1.1; }
.tpl-tap-hint { font-size: .78rem; color: var(--text-muted); margin-top: 1.5rem; letter-spacing:.06em; text-transform:uppercase; }
.tpl-english  { font-size: 1.8rem; font-weight: 700; margin-bottom: .25rem; }
.tpl-romanized{ font-size: 1rem; color: var(--accent); margin-bottom: .75rem; }
.tpl-note     { font-size: .85rem; color: var(--text-muted); margin: 0 0 .75rem; }
.tpl-example  { font-size: .9rem; background: var(--surface2); border-radius: var(--radius-sm); padding: .6rem .9rem; margin: 0; font-family: var(--font-th); width:100%; text-align:left; }
.tpl-example em { font-family: var(--font-en); font-size:.8rem; color:var(--text-muted); font-style:italic; }

.tpl-fc-actions { display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; }
.tpl-fc-done    { text-align:center; margin-top:1rem; color:var(--text-muted); font-size:.95rem; }
.tpl-empty      { text-align:center; color:var(--text-muted); padding:2rem; }

/* === EXERCISES ===================================================== */
.tpl-exercise-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow);
    max-width: 560px; margin: 0 auto;
}
.tpl-ex-en   { font-size: 1rem; color: var(--text-muted); margin: 0 0 .5rem; }
.tpl-ex-th   { font-family: var(--font-th); font-size: 2rem; font-weight: 700; margin: 0 0 .5rem; line-height:1.4; }
.tpl-ex-hint { font-size: .82rem; color: var(--text-muted); margin: 0 0 1rem; }
.tpl-ex-input-row { display:flex; gap:.6rem; }
.tpl-ex-input-row .tpl-input { flex:1; font-family:var(--font-th); font-size:1.1rem; }
.tpl-feedback {
    min-height: 1.5rem; font-size:.9rem; font-weight:600;
    margin: .75rem 0 0;
}
.tpl-feedback.correct { color: var(--success); }
.tpl-feedback.wrong   { color: var(--danger); }
.tpl-ex-score { text-align:center; padding:2rem; }
.tpl-ex-score h3 { font-size:1.4rem; margin:0 0 .5rem; }
.tpl-ex-score p  { color:var(--text-muted); margin:0 0 1rem; }

/* === SELECTOR ====================================================== */
.tpl-selector-wrap {
    display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem;
}
@media(max-width:600px) { .tpl-selector-wrap { grid-template-columns:1fr; } }

.tpl-selector-filters {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.25rem; height: fit-content;
}
.tpl-selector-filters h3 { font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:0 0 .75rem; }
.tpl-filter-group { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.tpl-filter-chip {
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    border-radius: 6px; padding: .35rem .65rem; font-size: .82rem; cursor:pointer;
    text-align:left; transition: all .15s; font-family: var(--font-en);
}
.tpl-filter-chip:hover  { border-color:var(--accent); color:var(--text); }
.tpl-filter-chip.active { background:var(--accent); border-color:var(--accent); color:#000; font-weight:600; }
.tpl-search-label { display:block; margin-top:.5rem; }

.tpl-selector-results { min-height: 200px; }
.tpl-results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.75rem; }
.tpl-result-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 1rem; text-align:center;
    cursor:pointer; transition: all .2s;
}
.tpl-result-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.tpl-result-card .tpl-thai { font-size:2rem; display:block; margin-bottom:.35rem; }
.tpl-result-card .tpl-en   { font-size:.78rem; color:var(--text-muted); }

.tpl-detail-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; }
.tpl-back { background:transparent; border:none; color:var(--accent); cursor:pointer; font-size:.9rem; padding:0; margin-bottom:1.25rem; display:inline-block; font-family:var(--font-en); }
.tpl-detail-thai  { font-family:var(--font-th); font-size:4.5rem; font-weight:700; margin:0 0 .25rem; }
.tpl-detail-rom   { color:var(--accent); font-size:1.1rem; margin:0 0 .35rem; }
.tpl-detail-en    { font-size:1.4rem; font-weight:700; margin:0 0 .75rem; }
.tpl-detail-note  { color:var(--text-muted); font-size:.9rem; background:var(--surface2); padding:.65rem .9rem; border-radius:var(--radius-sm); margin-bottom:1rem; }
.tpl-detail-ex    { font-family:var(--font-th); font-size:1.05rem; background:var(--surface2); padding:.75rem 1rem; border-radius:var(--radius-sm); }
.tpl-detail-ex em { font-family:var(--font-en); font-size:.85rem; color:var(--text-muted); font-style:italic; display:block; margin-top:.25rem; }
.tpl-cat-badge    { display:inline-block; background:var(--surface2); border:1px solid var(--border); border-radius:4px; font-size:.75rem; padding:.2rem .55rem; color:var(--text-muted); margin-bottom:1rem; }
.tpl-loading      { color:var(--text-muted); padding:1rem 0; }

/* ================================================================
   SPACED REPETITION RATING BUTTONS
   ================================================================ */
.tpl-sr-bar {
    display: flex; justify-content: center; gap: .6rem;
    margin-top: 1.25rem; flex-wrap: wrap;
}
.tpl-sr-btn {
    flex: 1; max-width: 130px; border: none; border-radius: 10px;
    padding: .6rem .5rem; font-size: .82rem; font-weight: 700;
    cursor: pointer; transition: transform .15s, opacity .2s;
    font-family: var(--font-en);
}
.tpl-sr-btn:hover  { transform: translateY(-2px); opacity: .9; }
.tpl-sr-btn:active { transform: scale(.96); }
.tpl-sr-hard  { background: #e05a5a; color: #fff; }
.tpl-sr-good  { background: #4fc3a1; color: #000; }
.tpl-sr-easy  { background: #5b9cf6; color: #000; }
.tpl-sr-bar small { display: block; font-size: .7rem; font-weight: 400; opacity: .8; margin-top: .15rem; }

/* ================================================================
   AUDIO BUTTON
   ================================================================ */
.tpl-audio-btn {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text);
    border-radius: 50%; width: 36px; height: 36px; display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer;
    font-size: 1rem; transition: all .2s; flex-shrink: 0;
    vertical-align: middle; margin-left: .4rem;
}
.tpl-audio-btn:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.tpl-audio-btn.playing { background: var(--accent); border-color: var(--accent); color: #000; animation: tplPulse .6s infinite alternate; }
@keyframes tplPulse { from { opacity:.7; } to { opacity:1; } }

/* Audio buttons on flashcard front/back */
.tpl-card-front .tpl-thai-row,
.tpl-card-back  .tpl-thai-row { display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* ================================================================
   STATS BANNER
   ================================================================ */
.tpl-stats-bar {
    display: flex; gap: 1rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: .65rem 1rem;
    margin-bottom: 1.25rem; font-size: .82rem; color: var(--text-muted);
}
.tpl-stats-bar span strong { color: var(--accent); }

/* FC mode switcher */
.tpl-mode-switch { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.tpl-mode-chip {
    background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
    border-radius: 6px; padding: .3rem .75rem; font-size: .8rem; cursor: pointer;
    transition: all .15s; font-family: var(--font-en);
}
.tpl-mode-chip.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }

/* SR badge on card */
.tpl-sr-badge {
    font-size: .72rem; padding: .15rem .5rem; border-radius: 4px;
    position: absolute; top: .75rem; right: .75rem;
}
.tpl-sr-badge-new  { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
.tpl-sr-badge-due  { background: #e05a5a22; color: #e05a5a; border: 1px solid #e05a5a44; }
.tpl-sr-badge-ok   { background: #4fc3a122; color: #4fc3a1; border: 1px solid #4fc3a144; }

/* Detail panel audio */
.tpl-detail-thai-row { display: flex; align-items: center; gap: .5rem; }