/*
 * Whochic shared UI core — V0.5.21
 * Central design baseline for public/account/admin screens.
 * Login intentionally remains isolated on apps/Auth/frontend/assets/login-ui.css.
 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;line-height:1.5}
body,h1,h2,h3,h4,h5,p,figure{margin:0}
button,input,select,textarea{font:inherit;font-size:100%;line-height:1.5;margin:0;color:inherit}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
img,svg{max-width:100%;display:block}a{color:inherit}

:root{
  --bg:#f5f6f8;--surface:#fff;--surface2:#fafbfc;--surface3:#f1f3f5;
  --text:#17191d;--muted:#69707c;--muted2:#9299a3;--border:#dfe3e8;--border2:#cbd1d9;
  --primary:#2563eb;--primary2:#1d4ed8;--primarySoft:#eef4ff;
  --ok:#16834b;--okSoft:#edf8f2;--warn:#a56516;--warnSoft:#fff7e8;--bad:#c43e3e;--badSoft:#fff0f0;
  --shadow:0 1px 2px rgba(20,25,35,.03),0 8px 24px rgba(20,25,35,.04);
  --control:44px;--buttonVisual:44px;
  --radius:10px;--radius-card:16px;--radius-large:20px;
}

html{font-family:Inter,Sarabun,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text)}
body{min-width:0;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}

.ui-page{min-height:100vh;padding:24px}
.ui-container{width:min(100%,1120px);margin-inline:auto}
.ui-center{min-height:calc(100vh - 48px);display:grid;place-items:center}
.ui-card{width:min(100%,560px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-large);padding:32px;box-shadow:var(--shadow)}
.ui-stack{display:grid;gap:16px}
.ui-stack-sm{display:grid;gap:8px}
.ui-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ui-title{font-size:clamp(28px,5vw,42px);line-height:1.1;letter-spacing:-.025em;color:var(--text)}
.ui-muted{color:var(--muted)}
.ui-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.ui-button{min-height:var(--buttonVisual);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:1px solid var(--border2);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:14px;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.ui-button.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.ui-button:active{transform:scale(.985)}
@media(hover:hover){.ui-button:hover{border-color:var(--primary)}.ui-button.primary:hover{background:var(--primary2)}}
.ui-control{width:100%;min-height:var(--control);padding:0 12px;border:1px solid var(--border2);border-radius:var(--radius);background:var(--surface);color:var(--text);outline:0}
.ui-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}

@media(max-width:620px){.ui-page{padding:16px}.ui-center{min-height:calc(100vh - 32px)}.ui-card{padding:24px}.ui-actions{grid-template-columns:1fr}}