:root {
    --mk-font-display: 'Cormorant Garamond', 'Noto Serif KR', serif;
    --mk-font-en:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mk-font-vi:      'Be Vietnam Pro', 'Inter', -apple-system, system-ui, sans-serif;
    --mk-font-ko:      'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
    --mk-ink:          #14110f;
    --mk-ink-2:        #3a3530;
    --mk-ink-3:        #6a635c;
    --mk-muted:        #9a948c;
    --mk-line:         #e6e1dc;
    --mk-line-soft:    #f0ece7;
    --mk-paper:        #faf7f3;
    --mk-paper-2:      #f4efe9;
    --mk-accent:       #a3786d;
    --mk-accent-soft:  #efe2dc;
    --mk-accent-deep:  #7d574d;
    --mk-radius:       2px;
    --mk-radius-lg:    6px;
}
html[lang="en"] body { font-family: var(--mk-font-en); }
html[lang="vi"] body { font-family: var(--mk-font-vi); }
html[lang="ko"] body { font-family: var(--mk-font-ko); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    color: var(--mk-ink);
    background: var(--mk-paper);
    font-size: 14.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
a { color: var(--mk-ink); text-decoration: none; transition: color .25s; }
a:hover { color: var(--mk-accent-deep); }
img { max-width: 100%; }

.miso-logo {
    font-family: var(--mk-font-display);
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--mk-ink);
    text-decoration: none;
    display: inline-flex; align-items: baseline; gap: 0;
    line-height: 1;
    font-size: 18px;
    text-transform: uppercase;
}
.miso-logo .dot { color: var(--mk-accent); margin: 0 2px; }

.ak-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}
.ak-cover {
    position: relative;
    background:
        linear-gradient(180deg, rgba(20,17,15,0.32) 0%, rgba(20,17,15,0.05) 35%, rgba(20,17,15,0) 70%, rgba(20,17,15,0.55) 100%),
        url('https://images.unsplash.com/photo-1556228578-8c89e6adf883?auto=format&fit=crop&w=1600&q=80') center / cover no-repeat,
        var(--mk-paper-2);
    color: #fff;
    padding: 56px 64px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.ak-cover-top a.miso-logo {
    color: #fff;
}
.ak-cover-top a.miso-logo .dot { color: var(--mk-accent-soft); }
.ak-cover-quote {
    max-width: 460px;
}
.ak-cover-quote .ak-eyebrow {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.36em;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    margin-bottom: 18px;
}
.ak-cover-quote h2 {
    font-family: var(--mk-font-display);
    font-weight: 300;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    line-height: 1.18;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.012em;
}
.ak-cover-quote h2 em { font-style: italic; color: var(--mk-accent-soft); font-weight: 400; }
.ak-cover-quote p {
    color: rgba(255,255,255,0.86);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.ak-panel {
    display: flex; align-items: center; justify-content: center;
    padding: 56px 48px;
    background: var(--mk-paper);
    position: relative;
}
.ak-panel-inner {
    width: 100%;
    max-width: 420px;
}
.ak-panel-inner--wide { max-width: 680px; }
.ak-panel-head { margin-bottom: 32px; }
.ak-panel-head .mobile-logo {
    display: none;
    margin-bottom: 18px;
}
.ak-panel-head .ak-eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 0.36em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mk-accent);
    margin-bottom: 12px;
}
.ak-panel-head h1 {
    font-family: var(--mk-font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    color: var(--mk-ink);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.ak-panel-head p {
    color: var(--mk-ink-3);
    font-size: 13.5px;
    margin: 0;
    line-height: 1.6;
}

.ak-form-row { margin-bottom: 14px; }
.ak-form-row label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mk-muted);
    margin-bottom: 6px;
    font-weight: 600;
}
.ak-form-row .form-control,
.ak-form-row .form-select {
    border: 1px solid var(--mk-line);
    background: #fff;
    color: var(--mk-ink);
    border-radius: var(--mk-radius);
    padding: 12px 14px;
    font-size: 14px;
    width: 100%;
    transition: border-color .2s;
}
.ak-form-row .form-control:focus,
.ak-form-row .form-select:focus {
    border-color: var(--mk-ink);
    outline: none;
    box-shadow: none;
}

.ak-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 14px 22px;
    border: 1px solid var(--mk-ink);
    background: var(--mk-ink);
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s, color .25s;
    border-radius: var(--mk-radius);
    text-decoration: none;
}
.ak-btn:hover { background: #000; color: #fff; }
.ak-btn--ghost {
    background: transparent;
    color: var(--mk-ink);
}
.ak-btn--ghost:hover { background: var(--mk-ink); color: #fff; }

.ak-sns-zalo {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    background: #0068ff;
    color: #fff;
    border: 0;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: var(--mk-radius);
    margin-bottom: 14px;
    transition: opacity .25s;
}
.ak-sns-zalo:hover { opacity: 0.9; color: #fff; }
.ak-sns-zalo i { font-size: 15px; }

.ak-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 16px;
    color: var(--mk-muted);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.ak-divider::before, .ak-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--mk-line);
}
.ak-sns-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 4px;
}
.ak-sns-grid .ak-sns-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    text-decoration: none;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: var(--mk-radius);
    transition: opacity .2s, transform .2s;
    border: 1px solid transparent;
}
.ak-sns-grid .ak-sns-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.ak-sns-btn-unconf { opacity: 0.55; }

.ak-foot {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--mk-line-soft);
    text-align: center;
    font-size: 12.5px;
    color: var(--mk-ink-3);
}
.ak-foot a { color: var(--mk-ink); border-bottom: 1px solid var(--mk-line); padding-bottom: 1px; }
.ak-foot a:hover { color: var(--mk-accent-deep); border-color: var(--mk-accent); }
.ak-foot .sep { margin: 0 10px; color: var(--mk-muted); }

.ak-lang {
    margin-top: 18px;
    text-align: center;
    display: inline-flex; gap: 0;
    justify-content: center;
    width: 100%;
}
.ak-lang-row {
    display: inline-flex; gap: 0;
    border: 1px solid var(--mk-line);
    border-radius: 999px;
    padding: 2px;
    background: #fff;
}
.ak-lang-row a {
    padding: 6px 14px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mk-muted);
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
}
.ak-lang-row a.is-active { background: var(--mk-ink); color: #fff; }
.ak-lang-row a:hover:not(.is-active) { color: var(--mk-ink); }

.ak-flash {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: var(--mk-radius-lg);
    font-size: 13px;
    line-height: 1.5;
}
.ak-flash.is-ok { background: #ecf3eb; color: #4d6c4b; border-left: 2px solid #88a586; }
.ak-flash.is-error { background: var(--mk-accent-soft); color: var(--mk-accent-deep); border-left: 2px solid var(--mk-accent); }

@media (max-width: 991px) {
    .ak-wrap { grid-template-columns: 1fr; }
    .ak-cover { display: none; }
    .ak-panel { padding: 44px 28px; }
    .ak-panel-head .mobile-logo { display: inline-flex; }
}
@media (max-width: 480px) {
    .ak-panel { padding: 36px 22px; }
    .ak-sns-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — luxe black auth panels
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    --mk-ink:          #f3ebde;
    --mk-ink-2:        #cfc6b8;
    --mk-ink-3:        #968d80;
    --mk-muted:        #6a6259;
    --mk-line:         #2b2620;
    --mk-line-soft:    #1d1915;
    --mk-paper:        #0a0807;
    --mk-paper-2:      #14110f;
    --mk-accent:       #c9a274;
    --mk-accent-soft:  #2a2014;
    --mk-accent-deep:  #e0bd8b;
    color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--mk-paper); color: var(--mk-ink); }
:root[data-theme="dark"] .miso-logo { color: var(--mk-ink); }
:root[data-theme="dark"] .miso-logo .dot { color: var(--mk-accent); }

:root[data-theme="dark"] .ak-cover {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.8) 100%),
        url('https://images.unsplash.com/photo-1556228578-8c89e6adf883?auto=format&fit=crop&w=1600&q=80') center / cover no-repeat,
        var(--mk-paper-2);
}
:root[data-theme="dark"] .ak-cover-quote .ak-eyebrow { color: rgba(255,255,255,0.78); }
:root[data-theme="dark"] .ak-cover-quote h2 { color: #fff; }
:root[data-theme="dark"] .ak-cover-quote h2 em { color: var(--mk-accent-deep); }
:root[data-theme="dark"] .ak-cover-quote p { color: rgba(255,255,255,0.86); }

:root[data-theme="dark"] .ak-panel { background: var(--mk-paper); }
:root[data-theme="dark"] .ak-panel-head .ak-eyebrow { color: var(--mk-accent); }
:root[data-theme="dark"] .ak-panel-head h1 { color: var(--mk-ink); }
:root[data-theme="dark"] .ak-panel-head p  { color: var(--mk-ink-3); }

:root[data-theme="dark"] .ak-form-row label { color: var(--mk-muted); }
:root[data-theme="dark"] .ak-form-row .form-control,
:root[data-theme="dark"] .ak-form-row .form-select {
    background: #0f0d0b;
    border-color: var(--mk-line);
    color: var(--mk-ink);
}
:root[data-theme="dark"] .ak-form-row .form-control::placeholder { color: var(--mk-muted); }
:root[data-theme="dark"] .ak-form-row .form-control:focus,
:root[data-theme="dark"] .ak-form-row .form-select:focus {
    border-color: var(--mk-accent);
    box-shadow: 0 0 0 1px rgba(201,162,116,0.25);
}

:root[data-theme="dark"] .ak-btn {
    background: var(--mk-accent);
    border-color: var(--mk-accent);
    color: #0a0807;
}
:root[data-theme="dark"] .ak-btn:hover { background: var(--mk-accent-deep); border-color: var(--mk-accent-deep); color: #0a0807; }
:root[data-theme="dark"] .ak-btn--ghost { background: transparent; color: var(--mk-ink); border-color: var(--mk-line); }
:root[data-theme="dark"] .ak-btn--ghost:hover { background: var(--mk-accent); color: #0a0807; border-color: var(--mk-accent); }

:root[data-theme="dark"] .ak-divider { color: var(--mk-muted); }
:root[data-theme="dark"] .ak-divider::before,
:root[data-theme="dark"] .ak-divider::after { background: var(--mk-line); }

:root[data-theme="dark"] .ak-foot { border-top-color: var(--mk-line-soft); color: var(--mk-ink-3); }
:root[data-theme="dark"] .ak-foot a { color: var(--mk-ink); border-bottom-color: var(--mk-line); }
:root[data-theme="dark"] .ak-foot a:hover { color: var(--mk-accent-deep); border-color: var(--mk-accent); }
:root[data-theme="dark"] .ak-foot .sep { color: var(--mk-muted); }

:root[data-theme="dark"] .ak-lang-row { background: var(--mk-paper-2); border-color: var(--mk-line); }
:root[data-theme="dark"] .ak-lang-row a { color: var(--mk-ink-3); }
:root[data-theme="dark"] .ak-lang-row a.is-active { background: var(--mk-accent); color: #0a0807; }
:root[data-theme="dark"] .ak-lang-row a:hover:not(.is-active) { color: var(--mk-ink); }

:root[data-theme="dark"] .ak-flash.is-ok { background: #14241a; color: #a8cba2; border-left-color: #557d55; }
:root[data-theme="dark"] .ak-flash.is-error { background: #2a1614; color: #e3aaa0; border-left-color: var(--mk-accent); }

/* Theme toggle in top-right corner of auth panel */
.ak-theme-toggle {
    position: fixed; top: 18px; right: 22px; z-index: 50;
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 1px solid var(--mk-line);
    background: rgba(255,255,255,0.85);
    color: var(--mk-ink);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .25s, border-color .25s, background .25s;
    padding: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ak-theme-toggle:hover { color: var(--mk-accent-deep); border-color: var(--mk-accent); }
.ak-theme-toggle i { font-size: 14px; }
.ak-theme-toggle .icon-sun  { display: none; }
.ak-theme-toggle .icon-moon { display: inline-block; }
:root[data-theme="dark"] .ak-theme-toggle {
    background: rgba(20,17,15,0.65);
    border-color: var(--mk-line);
    color: var(--mk-ink);
}
:root[data-theme="dark"] .ak-theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme="dark"] .ak-theme-toggle .icon-moon { display: none; }

:root.theme-anim,
:root.theme-anim body,
:root.theme-anim *:not(svg):not(path) {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}