/* ==================== FaceFind · shared site styles (Tesla flat) ==================== */
:root{
  --font-sans: "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg:#ffffff;
  --bg-warm:#f4f4f4;
  --bg-hero:#f4f4f4;
  --red:#e82127;
  --red-deep:#c9121a;
  --red-soft:#fdecec;
  --border:#e1e1e1;
  --ink:#171a20;
  --fg:#171a20;
  --muted:#5c5e62;
  --faint:#a0a0a0;
  --green:#3e9c4c;
  --green-soft:#e8f5ec;
  --card-bg:#ffffff;
  --footer-bg:#0f0f0f;
  --footer-fg:#f5f5f5;
  --footer-muted:#9a9a9a;
  --radius:14px;
  --container:1360px;
  --pad-x:clamp(16px, calc(5.1px + 2.8vw), 48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  color:var(--fg);
  background:var(--bg);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.eyebrow{font-size:13px;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;font-weight:600}
h1,h2{font-weight:600}
h1,h2,h3,h4{color:var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==================== Header ==================== */
.app-header{
  position:sticky;top:0;z-index:100;
  background:#fff;border-bottom:1px solid var(--border);
  transition:box-shadow .2s cubic-bezier(.23,1,.32,1);
}
.app-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;max-width:var(--container);margin-inline:auto;
  padding:12px clamp(8px, calc(2.6px + 1.4vw), 24px) 12px;
  position:relative;z-index:210;
}
.brand{display:inline-flex;align-items:baseline;font-weight:600;font-size:clamp(22px, calc(15.7px + 1.4vw), 32px);color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .accent{color:var(--red)}
.brand .ai{opacity:.55}
.app-nav{display:none;gap:32px}
.app-nav a.nav-link{font-size:clamp(15px, calc(13.4px + .4vw), 17px);color:var(--ink);text-decoration:none;padding:6px 2px}
.app-nav a.nav-link:hover{color:var(--red)}
.app-nav a.nav-link:focus-visible{outline-offset:6px}
.app-header__actions{display:flex;align-items:center;gap:20px;justify-content:flex-end}
.lang-pill{display:none;font-weight:500;font-size:14px;color:var(--fg)}
.btn-login{
  margin-left:auto;
  background:var(--ink);border:1px solid transparent;color:#fff;
  font-weight:600;font-size:15px;padding:10px 22px;border-radius:10px;
  transition:background .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1);
}
.btn-login:hover{background:#000}
.btn-login:focus-visible{outline-offset:3px}
@media(min-width:768px){
  .app-nav{display:flex}
  .lang-pill{display:inline-flex}
  .menu-toggle{display:none}
}
/* Mobile menu */
.menu-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:0;background:transparent;border-radius:10px;color:var(--ink)}
.mobile-menu{display:none;background:#fff;border-top:1px solid var(--border);position:absolute;left:0;right:0;top:100%;z-index:200;box-shadow:0 6px 16px rgba(20,20,20,.10)}
.mobile-menu a{display:block;padding:15px 26px;border-bottom:1px solid var(--border);color:var(--ink);text-decoration:none}
.mobile-menu a:last-child{border-bottom:0}
.is-stuck{box-shadow:0 1px 8px rgba(20,20,20,.08)}

/* ==================== Document / sub-page layout ==================== */
.doc-hero{background:var(--bg);padding-top:clamp(24px, calc(14px + 1.6vw), 44px);padding-bottom:clamp(20px, calc(12px + 1.4vw), 36px);border-bottom:1px solid var(--border)}
.doc-hero h1{font-size:clamp(30px, calc(20px + 3vw), 48px);line-height:1.12;font-weight:600;margin-bottom:12px}
.doc-hero p{font-size:clamp(15px, calc(13.5px + .6vw), 18px);color:var(--muted);max-width:64ch}
.doc{background:var(--bg);padding-top:clamp(28px, calc(16px + 1.6vw), 48px);padding-bottom:clamp(40px, calc(24px + 2.4vw), 72px)}
.doc__body{max-width:820px;margin-inline:auto}
.doc section{margin-bottom:clamp(22px, calc(12px + 1.4vw), 34px)}
.doc section:last-child{margin-bottom:0}
.doc h2{font-size:clamp(20px, calc(16px + 1vw), 26px);font-weight:600;margin-bottom:10px;color:var(--ink)}
.doc h3{font-size:clamp(16px, calc(14px + .5vw), 18px);font-weight:600;margin:18px 0 8px;color:var(--ink)}
.doc p{font-size:15px;line-height:1.8;color:#3a3f4a;margin-bottom:12px}
.doc p:last-child{margin-bottom:0}
.doc ul,.doc ol{margin:0 0 14px 20px;color:#3a3f4a;font-size:15px;line-height:1.8}
.doc li{margin-bottom:6px}
.doc a.inline{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.doc .updated{font-size:13px;color:var(--faint);margin-bottom:4px}
.doc .note{background:var(--bg-warm);border:1px solid var(--border);border-radius:10px;padding:16px 20px;font-size:14.5px;color:#3a3f4a;line-height:1.7}
.doc .red-dot{color:var(--red)}

/* ==================== Buttons ==================== */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--red);border:1px solid transparent;color:#fff;font-weight:600;font-size:clamp(15px, calc(14px + .3vw), 17px);padding:14px 28px;border-radius:11px;transition:background .2s cubic-bezier(.23,1,.32,1)}
.btn-primary:hover{background:var(--red-deep)}
.btn-primary:focus-visible{outline-offset:3px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d6d6d6;color:var(--ink);font-weight:600;font-size:15px;padding:14px 28px;border-radius:11px;transition:background .2s cubic-bezier(.23,1,.32,1)}
.btn-ghost:hover{background:#f4f4f4}

/* ==================== Forms ==================== */
.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:clamp(20px, calc(12px + 1.4vw), 32px);max-width:640px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.form-group input[type="text"],.form-group input[type="email"],.form-group input[type="password"],.form-group input[type="url"],.form-group select,.form-group textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;
  transition:border-color .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(232,33,39,.10)}
.form-group textarea{resize:vertical;min-height:120px}
.form-hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.form-note{font-size:13.5px;color:var(--muted);line-height:1.65;margin-top:6px}

/* ==================== Footer ==================== */
.footer{background:var(--footer-bg);color:var(--footer-fg);padding:clamp(20px, calc(9px + 2vw), 40px) 0 16px}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px, calc(10px + 2.4vw), 48px)}
.footer .brand{font-size:clamp(22px, calc(16px + 1.4vw), 30px);color:#fff;font-weight:600}
.footer .brand .accent{color:var(--red)}
.footer .brand .ai{opacity:.6}
.footer .tagline{color:var(--footer-muted);font-size:14px;line-height:1.6;max-width:40ch;margin-top:12px}
.footer h4{color:#fff;font-size:13px;letter-spacing:.06em;margin-bottom:14px;text-transform:uppercase}
.footer ul{list-style:none;padding:0}
.footer ul li{margin-bottom:9px}
.footer ul a{color:#fff;font-size:14px;text-decoration:none}
.footer ul a:hover{color:var(--red)}
.footer__legal{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;flex-wrap:wrap;gap:18px;color:var(--footer-muted);font-size:13px;justify-content:space-between}
.footer__company{font-size:13px;color:var(--footer-muted);line-height:1.7}

/* ==================== Responsive ==================== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:0!important;transition-duration:.01ms!important;transition-delay:0!important;scroll-behavior:auto!important}
}
@media(max-width:640px){
  .app-header__inner{gap:12px}
  .menu-toggle{display:inline-flex}
}

/* ==================== Auth (login / account) ==================== */
.auth{min-height:calc(100vh - 200px);display:flex;align-items:center;justify-content:center;padding:clamp(24px, calc(14px + 1.6vw), 56px) 0}
.auth__card{width:100%;max-width:440px}
.auth__head{text-align:center;margin-bottom:24px}
.auth__brand{display:inline-flex;align-items:baseline;font-weight:600;font-size:clamp(24px, calc(18px + 1.4vw), 30px);color:var(--ink);text-decoration:none}
.auth__brand .accent{color:var(--red)}
.auth__brand .ai{opacity:.55}
.auth__title{font-size:clamp(24px, calc(18px + 1.4vw), 30px);font-weight:600;color:var(--ink);margin-top:18px}
.auth__sub{color:var(--muted);font-size:14.5px;margin-top:6px}
.auth__card .form-card{max-width:none;padding:clamp(22px, calc(16px + 1.2vw), 32px)}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.field-row .check{margin-bottom:0}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);cursor:pointer;margin-bottom:18px}
.check input{width:16px;height:16px;accent-color:var(--red);cursor:pointer}
.link-btn{background:none;border:0;color:var(--red);font-size:14px;font-weight:600;padding:2px 0;text-decoration:none;cursor:pointer}
.link-btn:hover{text-decoration:underline}
.btn-block{width:100%}
.pass-wrap{position:relative}
.pass-wrap input{padding-right:48px}
.pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:9px;color:var(--muted)}
.pass-toggle:hover{color:var(--ink)}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:13px;margin:20px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth__back{text-align:center;margin-top:20px}
.auth__back a{font-size:14px;color:var(--muted)}
.auth__back a:hover{color:var(--red)}

/* ==================== Modal / Dialog ==================== */
.modal-overlay{position:fixed;inset:0;z-index:900;background:rgba(15,15,15,.52);display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.is-open{display:flex}
.modal{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.18);width:100%;max-width:440px;max-height:calc(100dvh - 40px);overflow:auto;padding:clamp(20px, calc(14px + 1.2vw), 30px);animation:modal-in .2s cubic-bezier(.23,1,.32,1)}
@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.modal__title{font-size:clamp(19px, calc(17px + .5vw), 23px);font-weight:600;color:var(--ink);line-height:1.2}
.modal__close{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:10px;color:var(--muted);cursor:pointer}
.modal__close:hover{background:#f4f4f4;color:var(--ink)}
.modal__close:focus-visible{outline-offset:2px}
.modal__sub{font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:18px}
.modal__icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.modal__icon--success{background:var(--green-soft);color:var(--green)}
.modal__icon--error{background:var(--red-soft);color:var(--red)}
.modal__icon--info{background:#eef1fb;color:#312e81}
.modal__foot{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.modal__alt{font-size:13.5px;color:var(--muted);text-align:center}
.modal__alt button{background:none;border:0;color:var(--red);font-weight:600;padding:0;cursor:pointer}
.modal__alt button:hover{text-decoration:underline}
.modal__note{display:flex;gap:9px;align-items:flex-start;background:var(--bg-warm);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13px;color:#3a3f4a;line-height:1.6;margin:14px 0}
.modal__note svg{flex:none;margin-top:1px}
/* Code input (verification) */
.code-row{display:flex;gap:10px;justify-content:center;margin:6px 0 4px}
.code-row input{width:48px;height:56px;text-align:center;font-size:22px;font-weight:600;font-family:inherit;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:12px;transition:border-color .2s cubic-bezier(.23,1,.32,1), box-shadow .2s cubic-bezier(.23,1,.32,1)}
.code-row input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(232,33,39,.10)}
.code-hint{text-align:center;font-size:13px;color:var(--muted);margin-top:10px}
.code-hint button{background:none;border:0;color:var(--red);font-weight:600;padding:0;cursor:pointer}

/* ==================== Toast ==================== */
.toast-wrap{position:fixed;top:50%;left:50%;transform:translate(-50%,-52%);z-index:1200;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.toast-wrap:not(:empty)::before{content:"";position:fixed;inset:0;background:rgba(15,23,42,.32);z-index:-1;animation:toast-veil .25s ease-out}
.toast{pointer-events:auto;display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-top:4px solid var(--green);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.28);padding:22px 28px;min-width:340px;max-width:460px;animation:toast-in .28s cubic-bezier(.23,1,.32,1)}
.toast--error{border-top-color:var(--red)}
.toast__dot{flex:none;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;line-height:1}
.toast__dot::after{content:"✓"}
.toast--error .toast__dot{background:var(--red)}
.toast--error .toast__dot::after{content:"✕"}
.toast__msg{font-size:15px;color:var(--ink);line-height:1.5}
.toast.is-leaving{opacity:0;transform:scale(.92);transition:all .22s cubic-bezier(.23,1,.32,1)}
@keyframes toast-in{from{opacity:0;transform:scale(.92) translateY(-10px)}to{opacity:1;transform:none}}
@keyframes toast-veil{from{opacity:0}to{opacity:1}}

/* Dialog catalog page */
.dialog-catalog{padding:clamp(28px, calc(16px + 1.8vw), 52px) 0 clamp(40px, calc(24px + 2.4vw), 72px)}
.dialog-catalog h1{font-size:clamp(28px, calc(20px + 2vw), 42px);font-weight:600}
.dialog-catalog .lead{color:var(--muted);max-width:60ch;margin-top:10px;font-size:clamp(15px, calc(13.5px + .6vw), 18px)}
.dg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:32px}
.dg-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s cubic-bezier(.23,1,.32,1), transform .18s cubic-bezier(.23,1,.32,1)}
.dg-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.dg-card h3{font-size:16px;font-weight:600}
.dg-card p{font-size:13px;color:var(--muted);line-height:1.6}
.dg-card .btn-ghost,.dg-card .btn-primary{margin-top:auto;justify-content:center;padding:11px 18px;font-size:14px}
.dg-sec{margin-top:34px}
.dg-sec h2{font-size:clamp(18px, calc(15px + .7vw), 22px);font-weight:600;margin-bottom:14px}
.dg-btns{display:flex;flex-wrap:wrap;gap:12px}
.badge-chip{display:inline-flex;align-items:center;gap:6px;background:var(--red-soft);color:var(--red);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}

/* Mobile: brand logo shorten to "FaceFind" (hide .site) on all pages */
@media(max-width:767px){
  .brand .accent,
  .brand .ai{display:none}
}