/* TurkCouncil English Dictionary — redesign 2026-09-21. Part 3: accounts, saved words, lists, study, learn. */

/* ---------- auth ---------- */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 420px); gap: 34px; justify-content: center; align-items: start; padding-top: 34px; padding-bottom: 40px; }
.auth-card { padding: 30px 30px 26px; }
.auth-card h1 { font: 700 30px/1.15 var(--serif); margin-bottom: 14px; }
.auth-form { display: grid; gap: 16px; }
.auth-hint, .auth-error, .notice--ok { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; font-size: 14.5px; }
.auth-hint { background: var(--soft-teal); color: var(--teal-deep); }
.auth-error { background: #fdecec; color: #a11b1b; border: 1px solid #f4b4b4; }
:root[data-theme="dark"] .auth-error { background: rgba(239, 68, 68, .12); color: #ffb0b0; border-color: rgba(239, 68, 68, .4); }
.notice--ok { background: #e9f9f1; color: #0b6b46; }
:root[data-theme="dark"] .notice--ok { background: rgba(16, 185, 129, .12); color: #7ee0b4; }
.auth-alt { margin-top: 18px; text-align: center; color: var(--muted); }
.auth-alt a, .check a, .auth-card a { color: var(--link); font-weight: 600; }
.auth-alt a:hover, .check a:hover { text-decoration: underline; }
.auth-perks { padding-top: 6px; }
.auth-perks h2 { font: 600 18px var(--sans); margin-bottom: 14px; }
.auth-perks ul { list-style: none; display: grid; gap: 14px; }
.auth-perks li { display: flex; gap: 14px; align-items: center; }
.auth-perks b { display: block; font: 600 15px var(--sans); color: var(--heading); }
.auth-perks small { display: block; color: var(--muted); font-size: 13.5px; }
.tl-ic--lg { width: 64px; height: 64px; margin: 0 auto 8px; }
.tl-ic--lg svg.i { width: 30px; height: 30px; }

/* ---------- account ---------- */
.acct { padding-top: 26px; padding-bottom: 40px; }
.acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.stack { display: grid; gap: 14px; margin-top: 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.prog-stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 4px; }
.prog-stats li { text-align: center; padding: 12px 6px; border-radius: 12px; background: var(--surface-2); }
.prog-stats b { display: block; font: 700 26px/1.1 var(--serif); color: var(--heading); }
.prog-stats span { font-size: 12.5px; color: var(--muted); }
.danger-zone { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-2); }
.danger-zone summary { cursor: pointer; color: var(--red); font-weight: 600; }

/* ---------- saved words ---------- */
.sv-layout { padding-top: 22px; padding-bottom: 24px; }
.sv-side { display: grid; gap: 14px; position: sticky; top: calc(var(--header-h) + 14px); }
.sv-lists-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.sv-lists-head .link-sm { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sv-lists-head h2 { font-size: 16px !important; white-space: nowrap; }
.sv-main { min-width: 0; }
.sv-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sv-actions .is-on { background: var(--teal-solid); color: var(--on-teal-solid); }
.sv-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.sv-filters .select-sm { min-width: 0; font-size: 13.5px; }
.sv-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; color: var(--text-2); }
.layout-toggle { display: inline-flex; gap: 4px; }
.layout-toggle .is-sel { background: var(--soft-teal); color: var(--teal-deep); }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--soft-teal); border: 1px solid var(--border-2); }
.bulk-bar span { margin-right: auto; color: var(--teal-deep); }
.sv-table col.sc-sel { width: 0; } .sv-table col.sc-fav { width: 40px; } .sv-table col.sc-word { width: 21%; } .sv-table col.sc-pos { width: 9%; } .sv-table col.sc-lv { width: 8%; } .sv-table col.sc-tr { width: 18%; } .sv-table col.sc-date { width: 11%; }
.th-wrap { white-space: normal !important; line-height: 1.15; }
.wcell { display: flex; align-items: center; gap: 10px; }
.wcell .audio-btn { flex: none; margin: 0 !important; }
.sv-table .sc-sel { display: none; padding-left: 12px; }
.sv-table-wrap.is-editing .sc-sel { display: table-cell; }
.sv-table-wrap.is-editing col.sc-sel { width: 40px; }
.sv-table .c-base { white-space: normal; }
.sv-table .c-date { font-size: 13px; white-space: nowrap; }
.sv-trc { color: var(--text); }
.sv-fav { color: var(--border-2); }
.sv-fav.is-on { color: var(--amber); }
.sv-fav.is-on svg.i { fill: currentColor; }
.sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.pager--inline { margin: 0; }
.pg-icon { padding: 0; min-width: 36px; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sv-tile { position: relative; padding: 16px; display: grid; gap: 6px; }
.sv-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 2; }
.sv-tile .icon-btn { position: relative; z-index: 2; }
.sv-tr { font-weight: 600; }
.sv-status { justify-self: start; padding: 2px 10px; border-radius: 999px; font: 600 12px var(--sans); }
.sv-status--review { background: var(--soft-blue); color: var(--nav); }
.sv-status--learning { background: #e0edff; color: #1d4f9e; }
.sv-status--mastered { background: #dcf7e9; color: #0b6b46; }
.ring-wrap { position: relative; width: 158px; height: 158px; margin: 8px auto 12px; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 14; }
.ring-bg { stroke: var(--soft-blue); }
.ring-seg { stroke-linecap: butt; }
.ring-m { stroke: #10b981; } .ring-l { stroke: #2563eb; } .ring-r { stroke: #94a3b8; }
.ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-c b { font: 700 32px/1 var(--serif); color: var(--heading); }
.ring-c span { font-size: 13px; color: var(--muted); }
.legend { list-style: none; display: grid; gap: 8px; margin-bottom: 14px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.legend em { margin-left: auto; font-style: normal; color: var(--text-2); font-weight: 600; }
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot-m { background: #10b981; } .dot-l { background: #2563eb; } .dot-r { background: #94a3b8; }

/* ---------- word lists ---------- */
.lists-page, .study-hub { padding-top: 24px; padding-bottom: 40px; }
.lists-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 18px; align-items: end; margin-bottom: 8px; }
.new-list-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-top: 8px; }
.section-h { font: 600 20px var(--sans); margin: 26px 0 12px; }
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.list-card { display: grid; gap: 12px; align-content: start; }
.list-card-top { display: flex; gap: 14px; align-items: flex-start; }
.list-card h3 { font: 600 17px/1.25 var(--sans); }
.list-card h3 a:hover { color: var(--teal-deep); }
.list-card p { font-size: 14px; margin-top: 2px; }
.list-meta { font-size: 14px; color: var(--text-2); }
.bar { height: 8px; border-radius: 999px; background: var(--soft-blue); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--teal-2)); transition: width .3s ease; }
.list-edit { flex-basis: 100%; }
.list-edit summary { list-style: none; cursor: pointer; display: inline-flex; }
.list-edit[open] { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.list-edit[open] summary { justify-self: start; }
.list-pop { position: absolute; z-index: 90; right: 0; top: calc(100% + 8px); width: 270px; padding: 14px; box-shadow: var(--shadow-lg); text-align: left; }
.list-pop-h { font: 600 14px var(--sans); margin-bottom: 8px; color: var(--heading); }
.list-pop-body { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.list-pop .check { justify-content: flex-start; }
.list-pop .check em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12.5px; }
.list-new { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 6px; }
.list-new .input { height: 38px; }

/* ---------- study ---------- */
.study-wrap { max-width: 760px; padding-top: 22px; padding-bottom: 48px; }
.study-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.study-count { font-weight: 600; color: var(--muted); }
.fc-stage { margin-top: 18px; }
.fcard { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); padding: 38px 30px 34px; min-height: 320px; display: grid; align-content: center; text-align: center; gap: 10px; cursor: pointer; outline: none; }
.fcard:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 35%, transparent), var(--shadow); }
.fc-meta { font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fc-word { font: 700 clamp(36px, 6vw, 56px)/1.1 var(--serif); color: var(--heading); word-break: break-word; }
.fc-word--sm { font-size: clamp(26px, 4vw, 34px); color: var(--muted); }
.fc-ipa { font-size: 22px; }
.fc-snd { display: flex; justify-content: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.fc-hint { margin-top: 12px; color: var(--muted); font-size: 14px; }
.fc-tr { font: 700 clamp(22px, 3.4vw, 30px)/1.3 var(--sans); color: var(--heading); }
.fc-forms { color: var(--text-2); font-size: 16px; }
.fc-forms span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-left: 10px; }
.fc-ex { margin: 6px auto 0; max-width: 560px; padding: 12px 16px; border-radius: 12px; background: var(--soft-blue); text-align: left; }
.fc-ex p { font-size: 16.5px; }
.fc-ex em { font-style: normal; font-weight: 700; color: var(--heading); }
.fc-ex footer { margin-top: 4px; font-size: 14px; color: var(--muted); }
.fc-actions { margin-top: 18px; display: grid; justify-items: center; }
.fc-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.fc-grades .btn { flex-direction: column; height: 62px; gap: 2px; font-size: 15px; }
.fc-grades small { font-size: 11px; opacity: .65; }
.g-again { background: #fdecec; color: #a11b1b; } .g-hard { background: #fff3dc; color: #8a5a06; } .g-good { background: #e0edff; color: #1d4f9e; } .g-easy { background: #dcf7e9; color: #0b6b46; }
.fc-grades .btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.study-keys { margin-top: 22px; text-align: center; font-size: 13px; }
.study-keys kbd { padding: 2px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border-2); font: 600 12px var(--sans); color: var(--nav); }
.fc-done { text-align: center; display: grid; gap: 12px; padding: 34px 24px; }
.fc-done h2 { font: 700 28px var(--serif); }
.fc-done h2 small { font: 500 18px var(--sans); color: var(--muted); }
.quiz-q { display: grid; gap: 12px; text-align: center; padding: 30px 24px; }
.quiz-opts { display: grid; gap: 10px; margin-top: 8px; text-align: left; }
.quiz-opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--border-2); border-radius: 12px; background: var(--surface); font: 500 16.5px var(--sans); color: var(--text); cursor: pointer; text-align: left; transition: all var(--ease); }
.quiz-opt:hover:not(:disabled) { border-color: var(--teal); background: var(--soft-teal); }
.qk { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--soft-blue); color: var(--nav); font: 700 13px var(--sans); flex: none; }
.quiz-opt.is-right { border-color: #10b981; background: #e9f9f1; color: #0b3d2a; }
.quiz-opt.is-wrong { border-color: #ef4444; background: #fdecec; color: #7a1414; }
:root[data-theme="dark"] .quiz-opt.is-right { background: rgba(16, 185, 129, .14); color: #c8f3de; } :root[data-theme="dark"] .quiz-opt.is-wrong { background: rgba(239, 68, 68, .14); color: #ffc9c9; }
.quiz-fb { display: grid; gap: 8px; justify-items: center; margin-top: 4px; }
.fb-ok { color: #0b6b46; font-weight: 700; } .fb-no { color: #a11b1b; font-weight: 600; }
.quiz-wrong ul { list-style: none; display: grid; gap: 6px; margin-top: 6px; }
.quiz-wrong a { font-weight: 700; color: var(--link); }

@media (max-width: 1240px) { .sv-side { position: static; grid-template-columns: 1fr 1fr; } .sv-side .quote-card { display: none; } }
@media (max-width: 980px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .acct-grid { grid-template-columns: 1fr; }
  .lists-top { grid-template-columns: 1fr; }
  .new-list-row { grid-template-columns: 1fr; }
  .sv-side { grid-template-columns: 1fr; }
  .sv-sort { margin-left: 0; }
  .sv-table .c-ex, .sv-table th.c-ex { display: none; }
}
@media (max-width: 640px) {
  .sv-table .c-date, .sv-table th.c-date { display: none; }
  .fc-grades { grid-template-columns: 1fr 1fr; }
  .fcard { padding: 28px 18px; }
  .prog-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- learn ---------- */
.learn-page { padding-top: 24px; padding-bottom: 40px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-top: 8px; }
.guide-card { display: flex; gap: 16px; padding: 20px; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.guide-card:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-2px); }
.guide-body { display: grid; gap: 6px; align-content: start; }
.guide-card h2 { font: 700 18px/1.3 var(--sans); color: var(--heading); }
.guide-card p { color: var(--text-2); font-size: 14.5px; }
.guide-card small { color: var(--muted); }
.plan-cta { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.plan-cta > div { flex: 1; }
.plan-cta h2 { font: 700 20px var(--sans); } .plan-cta p { color: var(--muted); margin-top: 2px; }
.plan-cta .cta-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--soft-teal); color: var(--teal); display: grid; place-items: center; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 22px; align-items: start; }
.article { padding: 28px 34px 34px; }
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.prose { font-size: 17px; line-height: 1.7; color: var(--text); max-width: 74ch; }
.prose h2 { font: 700 24px/1.25 var(--serif); margin: 30px 0 10px; }
.prose p { margin: 12px 0; }
.prose ul, .prose ol { margin: 12px 0 12px 22px; display: grid; gap: 6px; }
.prose a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose em { font-style: italic; color: var(--heading); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--soft-blue); font-size: .9em; }
.callout { margin: 20px 0; padding: 14px 18px; border-radius: 12px; background: var(--soft-teal); border-left: 4px solid var(--teal); }
.doc-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15.5px; }
.doc-table th, .doc-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc-table th { background: var(--soft-blue); color: var(--heading); font-weight: 600; }
.bad { color: #b42318; } .good { color: #0b6b46; font-weight: 600; }
@media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; } .article { padding: 20px 18px 26px; } .plan-cta { flex-wrap: wrap; } }

@media (max-width: 700px) {
  .sv-table, .sv-table tbody, .sv-table tr, .sv-table td { display: block; }
  .sv-table thead, .sv-table colgroup { display: none; }
  .sv-table tbody { display: grid; gap: 10px; }
  .sv-table tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 13px 44px 13px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); }
  .sv-table td { padding: 0; border: 0; background: transparent !important; }
  .sv-table td.c-ex, .sv-table td.c-date, .sv-table td.sc-sel { display: none !important; }
  .sv-table-wrap.is-editing td.sc-sel { display: block !important; }
  .sv-table td.sc-fav { order: 0; position: absolute; top: 8px; right: 34px; }
  .sv-table td.c-base { flex: 1 0 100%; font-size: 18px; }
  .sv-table td.c-m { position: absolute; top: 8px; right: 4px; }
  .sv-table td.sv-trc { flex: 1 0 100%; }
  .sv-table-wrap.card { background: transparent; border: 0; box-shadow: none; }
}