@import "/kawa-tokens.css";
:root{--brand-hover:var(--accent-b);--brand-fg:var(--brand-ink);--brand-soft:var(--hover);--surface-2:var(--bg);--text-muted:var(--muted);--danger:var(--bad);--danger-soft:color-mix(in srgb,var(--bad) 12%,transparent);--ok-soft:color-mix(in srgb,var(--ok) 12%,transparent);--shadow-lg:var(--shadow-hi);--radius-sm:12px}

*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--text);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif;padding:24px}
.card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:32px}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:18px}.logo{width:34px;height:34px;border-radius:10px;background:var(--brand);color:var(--brand-fg);display:grid;place-items:center;font-weight:700}
h1{font-size:21px;margin:0 0 6px}.muted{color:var(--text-muted);margin:0 0 20px;font-size:14px}
label{display:block;font-size:13px;font-weight:600;margin-bottom:14px}input{display:block;width:100%;margin-top:6px;padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit}
input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.hint{font-size:12px;color:var(--text-muted);margin:-6px 0 14px}
button{width:100%;padding:12px;border:0;border-radius:var(--radius-sm);background:var(--brand);color:var(--brand-fg);font:600 15px inherit;cursor:pointer}button:hover{background:var(--brand-hover)}button:disabled{opacity:.6;cursor:wait}
#msg:empty{display:none}#msg{padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:14px}.err{background:var(--danger-soft);color:var(--danger)}.ok{background:var(--ok-soft);color:var(--ok)}
footer{margin:22px 0 0;text-align:center;font-size:12px}
.msg:empty{display:none}.msg{padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:14px}
[hidden]{display:none!important}
body:has(#appView:not([hidden])){display:block;padding:0}
.app{width:100%;align-self:stretch;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:20px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border)}.top .brand{margin:0}
nav{display:flex;gap:6px;flex:1}.tab,.ghost{width:auto;background:transparent;color:var(--text-muted);padding:8px 12px;font-weight:600}.tab:hover,.ghost:hover{background:var(--surface-2);color:var(--text)}
.tab.on{background:var(--brand-soft);color:var(--brand)}.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted)}
.panel{flex:1;padding:20px}.inner{margin:20px auto}
.inbox{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:16px;height:calc(100vh - 62px)}
.list,.reader{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.listhead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}.listhead span{flex:1;font-size:13px}
#items{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
#items li{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 8px}
#items li:hover{background:var(--surface-2)}#items li.sel{background:var(--brand-soft)}
#items .from{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#items .date{font-size:12px;color:var(--text-muted)}
#items .subj{grid-column:1/3;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted)}
#items li.unread .from,#items li.unread .subj{font-weight:700;color:var(--text)}#items li.unread .from::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:6px}
.pager{display:flex;align-items:center;justify-content:space-between;padding:8px;border-top:1px solid var(--border);font-size:12px}
.reader{padding:20px 24px;overflow:auto}.reader h2{margin:0 0 8px;font-size:20px}.meta{font-size:13px;color:var(--text-muted);margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:12px}
.reader pre{white-space:pre-wrap;word-break:break-word;font:inherit;margin:0}.reader iframe{border:0;width:100%;flex:1;min-height:400px;background:#fff;border-radius:var(--radius-sm)}
.empty{margin:auto;text-align:center}
@media (max-width:760px){.inbox{grid-template-columns:1fr;height:auto}.reader{min-height:300px}}

/* v2 design system */
.card,.list,.reader{background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}.card:hover{box-shadow:var(--shadow-hi)}
.logo{border-radius:50%;background:var(--text);color:var(--bg)}
button{border-radius:999px}.tab,.ghost{border-radius:999px}.tab.on{background:var(--brand);color:var(--brand-ink)}
.top{margin:16px 16px 0;border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow);background:var(--surface)}
.panel{padding:16px}.inbox{height:calc(100vh - 92px)}
#items li{transition:background .15s}#items li.sel{background:var(--hover);box-shadow:inset 3px 0 0 var(--brand)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
main.card,.inner,.list,.reader{animation:rise .35s ease-out both}.reader{animation-delay:.06s}
#items li{animation:rise .3s ease-out both}#items li:nth-child(2){animation-delay:.03s}#items li:nth-child(3){animation-delay:.06s}#items li:nth-child(4){animation-delay:.09s}#items li:nth-child(n+5){animation-delay:.12s}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:760px){.top{border-radius:20px;flex-wrap:wrap}}
.listhead .muted,.pager .muted{margin:0}
/* v3 palette accents */
.logo{background:var(--navy);color:var(--navy-ink)}#items li.unread .from::before{background:var(--brand)}#items li.sel{background:color-mix(in srgb,var(--soft) 40%,transparent)}
/* v5 gradients */
body{background:var(--grad-page);background-attachment:fixed}
button:not(.tab):not(.ghost){background:var(--grad-btn);color:var(--grad-btn-ink)}button:not(.tab):not(.ghost):hover{filter:brightness(1.06)}
.tab.on{background:var(--grad-btn);color:var(--grad-btn-ink)}.logo{background:var(--grad-hero);color:#fff}
/* forgot password / contact admin / backup email */
textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:inherit;resize:vertical;box-sizing:border-box}
textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin:12px 0 0}.links .ghost{color:var(--brand)}
.support{padding:10px 12px;border-radius:var(--radius-sm);background:var(--brand-soft);margin:0 0 14px;overflow-wrap:anywhere}
#resend{margin-top:8px}
/* profile: avatar (photo or initials), photo picker, two-column fields */
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:none;background:var(--grad-hero);color:#fff;font-size:13px;font-weight:700}
.av img{width:100%;height:100%;object-fit:cover;display:block}.av:empty{display:none}
.av-btn{width:auto;padding:0;border-radius:50%;background:transparent!important;line-height:0}.av-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.av.big{width:88px;height:88px;font-size:32px}.av.big:empty{display:grid}
.photo-row{display:flex;gap:16px;align-items:center;margin:0 0 10px}.photo-row .hint{margin:8px 0 0}
.photo-btns{display:flex;flex-wrap:wrap;gap:6px}.ghost.line{border:1px solid var(--border);color:var(--text)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:480px){.two{grid-template-columns:1fr}.photo-row{flex-direction:column;align-items:flex-start}}