@import url('../../../assets/tokens/css-variables.css');
@import url('../../../assets/tokens/typography.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--klj-bg);
  color:var(--klj-text);
  -webkit-font-smoothing:antialiased;
}

/* ── App shell ── */
.app-shell{
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  background:var(--klj-surface);
  box-shadow:var(--klj-shadow-shell);
  display:flex;
  flex-direction:column;
  position:relative;
}

.screen{display:none;flex:1;flex-direction:column;min-height:100vh}
.screen.active{display:flex}

/* ── Per-screen header themes ── */
.screen[data-theme-header="home"] .status-bar,
.screen[data-theme-header="home"] .app-header{background:var(--klj-screen-home)}
.screen[data-theme-header="patient"] .status-bar,
.screen[data-theme-header="patient"] .app-header{background:var(--klj-screen-patient)}
.screen[data-theme-header="visit"] .status-bar,
.screen[data-theme-header="visit"] .app-header{background:var(--klj-screen-visit)}
.screen[data-theme-header="phq9"] .status-bar,
.screen[data-theme-header="phq9"] .app-header{background:var(--klj-screen-phq9)}
.screen[data-theme-header="med"] .status-bar,
.screen[data-theme-header="med"] .app-header{background:var(--klj-screen-med)}
.screen[data-theme-header="alert"] .status-bar,
.screen[data-theme-header="alert"] .app-header{background:var(--klj-screen-alert)}
.screen[data-theme-header="report"] .status-bar,
.screen[data-theme-header="report"] .app-header{background:var(--klj-screen-report)}
.screen[data-theme-header="sos"] .status-bar,
.screen[data-theme-header="sos"] .app-header{background:var(--klj-screen-sos)}

/* ── Status bar ── */
.status-bar{
  background:var(--klj-primary);
  padding:6px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:var(--klj-text-sm);
  font-weight:var(--klj-weight-regular);
  color:#fff;
}
.status-bar .offline-badge{
  background:rgba(255,255,255,.2);
  padding:2px 8px;
  border-radius:10px;
  font-size:var(--klj-text-xs);
  font-weight:var(--klj-weight-medium);
}

/* ── App header ── */
.app-header{
  background:var(--klj-primary);
  color:#fff;
  padding:14px 16px 16px;
}
.app-header-row{display:flex;justify-content:space-between;align-items:flex-start}
.app-header h1{
  font-size:var(--klj-text-lg);
  font-weight:var(--klj-weight-semibold);
  line-height:1.4;
}
.app-header .sub{
  font-size:var(--klj-text-sm);
  font-weight:var(--klj-weight-regular);
  opacity:.85;
  margin-top:2px;
  line-height:var(--klj-leading-normal);
}
.app-header .back-btn{
  background:rgba(255,255,255,.2);
  border:none;
  color:#fff;
  border-radius:var(--klj-radius-sm);
  padding:4px 10px;
  font-size:var(--klj-text-sm);
  font-weight:var(--klj-weight-medium);
  font-family:inherit;
  cursor:pointer;
  margin-bottom:8px;
}
.bell-btn{
  background:rgba(255,255,255,.2);
  border:none;
  border-radius:var(--klj-radius-sm);
  padding:6px 10px;
  color:#fff;
  font-size:var(--klj-text-sm);
  cursor:pointer;
  position:relative;
  font-family:inherit;
}
.bell-badge{
  position:absolute;
  top:-4px;right:-4px;
  background:var(--klj-danger);
  color:#fff;
  font-size:var(--klj-text-xs);
  font-weight:var(--klj-weight-bold);
  width:18px;height:18px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

/* ── Content ── */
.screen-body{
  flex:1;
  padding:14px 16px;
  overflow-y:auto;
  padding-bottom:80px;
  background:var(--klj-bg);
}
.screen[data-theme-header="home"] .screen-body,
.screen[data-theme-header="login"] .screen-body{background:var(--klj-surface)}

/* ── Section label ── */
.sec-label{
  font-size:var(--klj-text-xs);
  font-weight:var(--klj-weight-semibold);
  color:var(--klj-text-secondary);
  text-transform:uppercase;
  letter-spacing:var(--klj-tracking-label);
  line-height:1.4;
  margin:12px 0 8px;
}
.sec-label:first-child{margin-top:0}

/* ── KPI cards ── */
.kpi-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.kpi-card{
  background:var(--klj-neutral-100);
  border-radius:var(--klj-radius-md);
  padding:12px 8px;
  text-align:center;
  cursor:pointer;
  border:2px solid transparent;
  box-shadow:var(--klj-shadow-sm);
  transition:border-color .15s,box-shadow .15s;
}
.kpi-card:hover,.kpi-card:active{
  border-color:var(--klj-primary-300);
  box-shadow:var(--klj-shadow-md);
}
.kpi-card .val{font-size:var(--klj-text-xl);font-weight:var(--klj-weight-bold);line-height:1}
.kpi-card .lbl{font-size:var(--klj-text-xs);color:var(--klj-text-secondary);margin-top:4px}
.kpi-card.total .val{color:var(--klj-kpi-total)}
.kpi-card.warn .val{color:var(--klj-kpi-watch)}
.kpi-card.crit .val{color:var(--klj-kpi-crit)}

/* ── Menu grid ── */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.menu-btn{
  background:var(--klj-neutral-50);
  border:1px solid var(--klj-border);
  border-radius:var(--klj-radius-lg);
  padding:14px 10px;
  text-align:center;
  cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
  font-family:inherit;
  box-shadow:var(--klj-shadow-sm);
}
.menu-btn:hover{
  background:var(--klj-primary-100);
  border-color:var(--klj-primary-300);
  box-shadow:var(--klj-shadow-md);
}
.menu-btn .icon{font-size:26px;margin-bottom:6px}
.menu-btn .title{font-size:var(--klj-text-sm);font-weight:var(--klj-weight-semibold);color:var(--klj-text)}
.menu-btn .desc{font-size:var(--klj-text-xs);color:var(--klj-text-muted);margin-top:2px}
.menu-btn.sos{
  background:var(--klj-status-crit-bg);
  border-color:var(--klj-status-crit-border);
}
.menu-btn.sos .title{color:var(--klj-status-crit-text)}

/* ── Alert preview ── */
.alert-preview{
  border-radius:var(--klj-radius-md);
  padding:10px 12px;
  margin-bottom:8px;
  border-left:4px solid;
  cursor:pointer;
}
.alert-preview.crit{background:var(--klj-status-crit-bg);border-left-color:var(--klj-status-crit)}
.alert-preview.warn{background:var(--klj-status-warn-bg);border-left-color:var(--klj-status-warn)}
.alert-preview.info{background:var(--klj-status-ok-bg);border-left-color:var(--klj-status-ok)}
.alert-preview .title{font-size:var(--klj-text-sm);font-weight:var(--klj-weight-semibold)}
.alert-preview .meta{font-size:var(--klj-text-xs);color:var(--klj-text-secondary);margin-top:2px}

/* ── Bottom nav ── */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  display:flex;
  justify-content:space-around;
  background:var(--klj-surface);
  border-top:1px solid var(--klj-border);
  padding:8px 4px 12px;
  z-index:100;
  box-shadow:0 -2px 12px rgba(15,142,147,.06);
}
.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px 12px;
  font-family:inherit;
  color:var(--klj-neutral-400);
  font-size:var(--klj-text-xs);
}
.nav-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.nav-item.active{color:var(--klj-primary);font-weight:var(--klj-weight-semibold)}

/* ── Forms ── */
.field-label{display:block;font-size:var(--klj-text-sm);font-weight:var(--klj-weight-medium);color:var(--klj-text-secondary);margin-bottom:5px}
.field-input,.field-select,.field-textarea{
  width:100%;
  border:1px solid var(--klj-input-border);
  border-radius:var(--klj-radius-sm);
  padding:10px 12px;
  font-size:var(--klj-text-base);
  font-family:inherit;
  background:var(--klj-surface);
  margin-bottom:12px;
  color:var(--klj-text);
  transition:border-color .15s,box-shadow .15s;
}
.field-input:focus,.field-select:focus,.field-textarea:focus{
  outline:none;
  border-color:var(--klj-primary);
  box-shadow:0 0 0 3px rgba(15,142,147,.15);
}
.field-textarea{resize:vertical;min-height:80px}
.field-input.otp{text-align:center;letter-spacing:var(--klj-tracking-otp);font-size:var(--klj-text-xl);font-weight:var(--klj-weight-semibold)}

/* ── Buttons ── */
.btn{
  width:100%;
  border:none;
  border-radius:var(--klj-radius-md);
  padding:12px 16px;
  font-size:var(--klj-text-md);
  font-weight:var(--klj-weight-semibold);
  font-family:inherit;
  cursor:pointer;
  transition:background .15s,opacity .15s,transform .1s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--klj-primary);color:#fff}
.btn-primary:hover{background:var(--klj-primary-600)}
.btn-danger{background:var(--klj-danger);color:#fff}
.btn-danger:hover{background:#B91C1C}
.btn-outline{background:var(--klj-surface);color:var(--klj-primary);border:2px solid var(--klj-primary)}
.btn-purple{background:var(--klj-screen-phq9);color:#fff}
.btn-sm{width:auto;padding:8px 14px;font-size:var(--klj-text-sm)}

.screen[data-theme-header="phq9"] .btn-primary{background:var(--klj-screen-phq9)}
.screen[data-theme-header="report"] .btn-primary{background:var(--klj-screen-report)}
.screen[data-theme-header="report"] .progress-fill{background:var(--klj-screen-report)}
.screen[data-theme-header="med"] .btn-primary{background:var(--klj-screen-med)}

/* ── GPS bar ── */
.gps-bar{
  background:var(--klj-gps-bg);
  border:1px solid var(--klj-gps-border);
  border-radius:var(--klj-radius-md);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.gps-dot{width:8px;height:8px;border-radius:50%;background:var(--klj-gps-dot);flex-shrink:0}
.gps-bar span{font-size:var(--klj-text-sm);color:var(--klj-gps-text);font-weight:var(--klj-weight-medium)}

/* ── Pills ── */
.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pill{
  border:1px solid var(--klj-border);
  border-radius:9999px;
  padding:6px 14px;
  font-size:var(--klj-text-sm);
  background:var(--klj-neutral-100);
  color:var(--klj-text-secondary);
  cursor:pointer;
  font-family:inherit;
}
.pill.selected{background:var(--klj-success-light);border-color:var(--klj-status-ok-border);color:var(--klj-status-ok-text);font-weight:var(--klj-weight-semibold)}
.pill.warn-sel{background:var(--klj-warning-light);border-color:var(--klj-status-warn-border);color:var(--klj-status-warn-text);font-weight:var(--klj-weight-semibold)}
.pill.crit-sel{background:var(--klj-status-crit-bg);border-color:var(--klj-status-crit-border);color:var(--klj-status-crit-text);font-weight:var(--klj-weight-semibold)}

/* ── Patient list ── */
.filter-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.filter-tab{
  flex-shrink:0;
  padding:6px 12px;
  border-radius:var(--klj-radius-sm);
  font-size:var(--klj-text-sm);
  border:1px solid var(--klj-border);
  background:var(--klj-neutral-100);
  color:var(--klj-text-secondary);
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
}
.filter-tab.active{background:var(--klj-primary-100);border-color:var(--klj-gps-border);color:var(--klj-gps-text);font-weight:var(--klj-weight-semibold)}
.filter-tab[data-filter="f2"].active{background:var(--klj-icd-f2-bg);border-color:#93C5FD;color:var(--klj-icd-f2-text)}
.filter-tab[data-filter="f3"].active{background:var(--klj-icd-f3-bg);border-color:#C4B5FD;color:var(--klj-icd-f3-text)}
.filter-tab[data-filter="f10"].active{background:var(--klj-icd-f10-bg);border-color:var(--klj-status-crit-border);color:var(--klj-icd-f10-text)}

.patient-card{
  background:var(--klj-surface);
  border:1px solid var(--klj-border);
  border-radius:var(--klj-radius-lg);
  padding:12px 14px;
  margin-bottom:8px;
  border-left:4px solid;
  cursor:pointer;
  box-shadow:var(--klj-shadow-sm);
}
.patient-card.ok{border-left-color:var(--klj-status-ok)}
.patient-card.warn{border-left-color:var(--klj-status-warn)}
.patient-card.crit{border-left-color:var(--klj-status-crit)}
.patient-card .name{font-size:var(--klj-text-md);font-weight:var(--klj-weight-semibold)}
.patient-card .id{font-size:var(--klj-text-xs);color:var(--klj-text-secondary);margin-top:2px}
.patient-card .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:var(--klj-text-xs);padding:2px 8px;border-radius:10px;font-weight:var(--klj-weight-medium)}
.tag.f2{background:var(--klj-icd-f2-bg);color:var(--klj-icd-f2-text)}
.tag.f3{background:var(--klj-icd-f3-bg);color:var(--klj-icd-f3-text)}
.tag.f10{background:var(--klj-icd-f10-bg);color:var(--klj-icd-f10-text)}
.tag.st-ok{background:var(--klj-success-light);color:var(--klj-status-ok-text)}
.tag.st-warn{background:var(--klj-warning-light);color:var(--klj-status-warn-text)}
.tag.st-crit{background:var(--klj-status-crit-bg);color:var(--klj-status-crit-text)}

/* ── Modal ── */
.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(15,23,42,.5);
  z-index:200;
  align-items:flex-end;
  justify-content:center;
}
.modal-overlay.open{display:flex}
.modal-sheet{
  background:var(--klj-surface);
  width:100%;
  max-width:430px;
  max-height:85vh;
  border-radius:var(--klj-radius-xl) var(--klj-radius-xl) 0 0;
  padding:20px 16px;
  overflow-y:auto;
}
.modal-sheet h3{font-size:var(--klj-text-lg);margin-bottom:12px}
.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--klj-neutral-100);font-size:var(--klj-text-base)}
.detail-row:last-child{border-bottom:none}

/* ── PHQ-9 ── */
.phq-q{font-size:var(--klj-text-base);margin-bottom:6px;line-height:1.4}
.phq-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:14px}
.phq-opt{
  border:1px solid var(--klj-border);
  border-radius:var(--klj-radius-sm);
  padding:8px 4px;
  font-size:var(--klj-text-xs);
  text-align:center;
  background:var(--klj-neutral-100);
  color:var(--klj-text-secondary);
  cursor:pointer;
  font-family:inherit;
}
.phq-opt.sel{background:var(--klj-icd-f3-bg);border-color:#C4B5FD;color:var(--klj-icd-f3-text);font-weight:var(--klj-weight-semibold)}
.score-box{border-radius:var(--klj-radius-lg);padding:16px;text-align:center;margin:12px 0}
.score-box .score{font-size:var(--klj-text-3xl);font-weight:var(--klj-weight-bold)}
.score-box .level{font-size:var(--klj-text-sm);margin-top:4px}
.score-box.normal{background:var(--klj-status-ok-bg)}.score-box.normal .score{color:var(--klj-status-ok-text)}
.score-box.mild{background:var(--klj-info-light)}.score-box.mild .score{color:#1D4ED8}
.score-box.mod{background:var(--klj-warning-light)}.score-box.mod .score{color:var(--klj-status-warn-text)}
.score-box.severe{background:var(--klj-status-crit-bg)}.score-box.severe .score{color:var(--klj-status-crit-text)}

/* ── Med ── */
.med-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:10px 0}
.med-day{border-radius:4px;padding:6px 2px;font-size:var(--klj-text-xs);text-align:center}
.med-day.taken{background:var(--klj-success-light);color:var(--klj-status-ok-text);font-weight:var(--klj-weight-semibold)}
.med-day.missed{background:var(--klj-status-crit-bg);color:var(--klj-status-crit-text);font-weight:var(--klj-weight-semibold)}
.adherence-bar{background:var(--klj-neutral-100);border-radius:4px;height:8px;overflow:hidden;margin:8px 0}
.adherence-fill{height:100%;background:var(--klj-success);border-radius:4px}
.warn-box{background:var(--klj-warning-light);border:1px solid var(--klj-status-warn-border);border-radius:var(--klj-radius-md);padding:12px;margin-bottom:12px}
.warn-box .title{font-size:var(--klj-text-sm);font-weight:var(--klj-weight-semibold);color:var(--klj-status-warn-text)}
.warn-box .text{font-size:var(--klj-text-sm);color:#B45309;margin-top:4px}
.info-box{background:var(--klj-info-light);border:1px solid #93C5FD;border-radius:var(--klj-radius-md);padding:12px;margin-bottom:12px}
.info-box .title{font-size:var(--klj-text-sm);font-weight:var(--klj-weight-semibold);color:#1D4ED8}
.info-box .text{font-size:var(--klj-text-sm);color:#3B82F6;margin-top:4px}

/* ── Alerts ── */
.alert-tabs{display:flex;gap:6px;margin-bottom:12px}
.alert-tab{
  flex:1;
  padding:8px;
  border-radius:var(--klj-radius-sm);
  font-size:var(--klj-text-sm);
  border:1px solid var(--klj-border);
  background:var(--klj-neutral-100);
  text-align:center;
  cursor:pointer;
  font-family:inherit;
}
.alert-tab.active{font-weight:var(--klj-weight-semibold)}
.alert-tab.crit.active{background:var(--klj-status-crit-bg);border-color:var(--klj-status-crit-border);color:var(--klj-status-crit-text)}
.alert-tab.warn.active{background:var(--klj-warning-light);border-color:var(--klj-status-warn-border);color:var(--klj-status-warn-text)}
.alert-tab.info.active{background:var(--klj-success-light);border-color:var(--klj-status-ok-border);color:var(--klj-status-ok-text)}
.alert-item{border-radius:var(--klj-radius-md);padding:12px 14px;margin-bottom:8px;border-left:4px solid}
.alert-item.crit{background:var(--klj-status-crit-bg);border-left-color:var(--klj-status-crit)}
.alert-item.warn{background:var(--klj-status-warn-bg);border-left-color:var(--klj-status-warn)}
.alert-item.info{background:var(--klj-status-ok-bg);border-left-color:var(--klj-status-ok)}
.alert-item .title{font-size:var(--klj-text-base);font-weight:var(--klj-weight-semibold)}
.alert-item .desc{font-size:var(--klj-text-sm);color:var(--klj-text-secondary);margin-top:4px}
.alert-item .time{font-size:var(--klj-text-xs);color:var(--klj-text-muted);margin-top:4px}
.alert-actions{display:flex;gap:8px;margin-top:10px}

/* ── Report ── */
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kpi-stat{
  background:var(--klj-neutral-50);
  border:1px solid var(--klj-border);
  border-radius:var(--klj-radius-lg);
  padding:14px;
  text-align:center;
  box-shadow:var(--klj-shadow-sm);
}
.kpi-stat .val{font-size:var(--klj-text-2xl);font-weight:var(--klj-weight-bold);color:var(--klj-screen-report)}
.kpi-stat .lbl{font-size:var(--klj-text-xs);color:var(--klj-text-secondary);margin-top:4px}
.progress-section{margin-bottom:16px}
.progress-label{display:flex;justify-content:space-between;font-size:var(--klj-text-sm);margin-bottom:4px}
.progress-bar{background:var(--klj-neutral-100);border-radius:4px;height:8px;overflow:hidden}
.progress-fill{height:100%;background:var(--klj-primary);border-radius:4px}
.leaderboard-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--klj-neutral-100);font-size:var(--klj-text-base)}
.leaderboard-item .rank{font-weight:var(--klj-weight-bold);color:var(--klj-screen-report);width:24px}
.leaderboard-item.me{background:var(--klj-primary-100);border-radius:var(--klj-radius-sm);padding:10px;margin:0 -8px}

/* ── Login / Splash (ตรง splash-primary.png) ── */
.login-hero{
  background:linear-gradient(180deg,var(--klj-splash-from) 0%,var(--klj-splash-to) 100%);
  padding:48px 20px 36px;
  text-align:center;
}
.login-logo{
  width:88px;height:88px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  overflow:hidden;
  box-shadow:var(--klj-shadow-md);
}
.login-logo img{width:100%;height:100%;object-fit:cover}
.login-hero .brand-th{
  font-size:var(--klj-text-brand-th);
  font-weight:var(--klj-weight-bold);
  color:var(--klj-brand-th);
  line-height:var(--klj-leading-tight);
  letter-spacing:var(--klj-tracking-brand);
}
.login-hero .brand-en{
  font-size:var(--klj-text-brand-en);
  font-weight:var(--klj-weight-semibold);
  color:var(--klj-brand-en);
  line-height:var(--klj-leading-snug);
  margin-top:4px;
}
.login-hero .tagline{
  font-size:var(--klj-text-brand-tagline);
  font-weight:var(--klj-weight-regular);
  color:var(--klj-brand-tagline);
  line-height:var(--klj-leading-normal);
  margin-top:10px;
}
.login-hero .area{
  font-size:var(--klj-text-brand-subtitle);
  font-weight:var(--klj-weight-regular);
  color:var(--klj-brand-subtitle);
  line-height:var(--klj-leading-normal);
  margin-top:6px;
}
.login-form{
  padding:28px 20px 32px;
  background:var(--klj-surface);
}
.login-hint{
  text-align:center;
  font-size:var(--klj-text-sm);
  font-weight:var(--klj-weight-regular);
  color:var(--klj-brand-subtitle);
  margin-top:12px;
  line-height:var(--klj-leading-normal);
}
.otp-timer{
  text-align:center;
  font-size:var(--klj-text-sm);
  font-weight:var(--klj-weight-medium);
  color:var(--klj-warning);
  margin-bottom:8px;
}

/* ── SOS ── */
.urgency-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.urgency-opt{
  border:2px solid var(--klj-border);
  border-radius:var(--klj-radius-md);
  padding:12px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  background:var(--klj-surface);
}
.urgency-opt.sel{border-color:var(--klj-danger);background:var(--klj-status-crit-bg)}
.urgency-opt .title{font-size:var(--klj-text-base);font-weight:var(--klj-weight-semibold)}
.urgency-opt .desc{font-size:var(--klj-text-sm);color:var(--klj-text-secondary);margin-top:2px}
.reason-check{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:var(--klj-text-base)}
.reason-check input{width:18px;height:18px;accent-color:var(--klj-danger)}

/* ── Toast ── */
.success-toast{
  display:none;
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:var(--klj-status-ok-text);
  color:#fff;
  padding:20px 32px;
  border-radius:var(--klj-radius-lg);
  font-size:var(--klj-text-lg);
  font-weight:var(--klj-weight-semibold);
  z-index:300;
  text-align:center;
  box-shadow:var(--klj-shadow-md);
}
.success-toast.show{display:block}

/* ── Form hint ── */
.form-hint{
  font-size:var(--klj-text-xs);
  font-weight:var(--klj-weight-regular);
  color:var(--klj-text-muted);
  margin-top:10px;
  text-align:center;
  line-height:var(--klj-leading-normal);
}

/* ── Dev links ── */
.dev-links{position:fixed;top:8px;right:8px;display:flex;gap:6px;z-index:50}
.dev-links a{
  font-size:var(--klj-text-xs);
  color:var(--klj-text-secondary);
  text-decoration:none;
  background:var(--klj-surface);
  border:1px solid var(--klj-border);
  padding:4px 10px;
  border-radius:var(--klj-radius-sm);
  box-shadow:var(--klj-shadow-sm);
}

@media(min-width:500px){
  body{background:var(--klj-neutral-200)}
}