/* ============================================================
   AfforrAi - Design System
   โทน: Light · Clean · Minimal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  /* พื้นหลัง - โทนสว่าง สะอาด */
  --bg-0:#ffffff;
  --bg-1:#fafafb;
  --bg-2:#f4f5f7;
  --bg-card:#ffffff;
  --border:#e6e8ec;
  --border-soft:#eef0f3;

  /* ตัวอักษร - เทาเข้มอ่านสบาย ไม่ใช้ดำสนิท */
  --txt:#1a1d24;
  --txt-dim:#5b6472;
  --txt-mute:#9aa1ad;

  /* สีแบรนด์ - น้ำเงินสะอาด เรียบ */
  --brand:#3b5bff;
  --brand-2:#4f74ff;
  --brand-glow:rgba(59,91,255,.18);
  --accent:#6366f1;

  --ok:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --info:#0284c7;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 8px 24px -12px rgba(16,24,40,.12);
  --shadow-glow:0 0 0 1px var(--border), 0 4px 20px -8px rgba(59,91,255,.16);

  --font-display:'Sora',sans-serif;
  --font-body:'IBM Plex Sans Thai','Sora',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-body);
  background:var(--bg-0);
  color:var(--txt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}

/* ---------- Layout ---------- */
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}
.grid{display:grid}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.text-center{text-align:center}
.hidden{display:none!important}
.w-full{width:100%}

/* ---------- Navbar ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--border-soft);
}
.nav-inner{height:66px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.3px;color:var(--txt)}
.logo-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:grid;place-items:center;font-size:17px;color:#fff;
}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{padding:9px 16px;border-radius:9px;color:var(--txt-dim);font-weight:500;font-size:15px;transition:.15s}
.nav-links a:hover{color:var(--txt);background:var(--bg-2)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:10px;border:1px solid transparent;
  font-weight:600;font-size:15px;cursor:pointer;transition:.15s;
  background:var(--bg-2);color:var(--txt);
}
.btn:hover{background:#eceef1}
.btn-primary{
  background:var(--brand);color:#fff;
  box-shadow:0 1px 2px rgba(59,91,255,.2);
}
.btn-primary:hover{background:#2f4ce0}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--txt)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-ok{background:var(--ok);color:#fff}
.btn-ok:hover{background:#138a3e}
.btn-bad{background:var(--bad);color:#fff}
.btn-bad:hover{background:#bf1d1d}
.btn-sm{padding:7px 14px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Card ---------- */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.card-glow{box-shadow:var(--shadow)}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.label{display:block;font-size:14px;color:var(--txt-dim);margin-bottom:7px;font-weight:500}
.input,select.input,textarea.input{
  width:100%;padding:11px 14px;border-radius:10px;
  background:var(--bg-0);border:1px solid var(--border);
  color:var(--txt);font-size:15px;transition:.15s;
}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
.input::placeholder{color:var(--txt-mute)}

/* ---------- Badge / Status ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600}
.badge::before{content:"";width:7px;height:7px;border-radius:50%}
.b-active{background:#e7f6ee;color:#15803d}.b-active::before{background:#16a34a}
.b-pending{background:#fef3e2;color:#b45309}.b-pending::before{background:#d97706}
.b-expired{background:#fdeaea;color:#b91c1c}.b-expired::before{background:#dc2626}
.b-suspended{background:#eef0f3;color:#64748b}.b-suspended::before{background:#94a3b8}
.b-info{background:#e3f2fb;color:#0369a1}.b-info::before{background:#0284c7}

/* ---------- Table ---------- */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;padding:12px 14px;font-size:12.5px;color:var(--txt-mute);
  text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);font-weight:600}
.table td{padding:14px;border-bottom:1px solid var(--border-soft);font-size:14.5px}
.table tr:hover td{background:var(--bg-1)}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.stat{
  background:var(--bg-card);
  border:1px solid var(--border);border-radius:var(--radius);padding:22px;
}
.stat-label{color:var(--txt-mute);font-size:13px;font-weight:500}
.stat-value{font-family:var(--font-display);font-size:30px;font-weight:800;margin-top:6px;color:var(--txt)}

/* ---------- Sidebar (dashboard) ---------- */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{
  background:var(--bg-1);
  border-right:1px solid var(--border-soft);padding:22px 14px;
  position:sticky;top:0;height:100vh;overflow-y:auto
}
.side-link{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:9px;
  color:var(--txt-dim);font-weight:500;font-size:14.5px;margin-bottom:3px;transition:.15s
}
.side-link:hover{background:var(--bg-2);color:var(--txt)}
.side-link.active{
  background:var(--brand);color:#fff;
}
.side-link.active:hover{background:#2f4ce0;color:#fff}
.side-link .ic{width:20px;text-align:center}
.main{padding:28px 32px;background:var(--bg-0)}
.page-title{font-family:var(--font-display);font-size:25px;font-weight:800;margin-bottom:4px;color:var(--txt)}
.page-sub{color:var(--txt-mute);font-size:14.5px;margin-bottom:24px}

/* ---------- Hero ---------- */
.hero{padding:90px 0 60px;text-align:center}
.hero h1{font-family:var(--font-display);font-size:clamp(34px,5vw,56px);font-weight:800;
  line-height:1.12;letter-spacing:-1px;color:var(--txt)}
.hero p{color:var(--txt-dim);font-size:18px;max-width:600px;margin:20px auto 32px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--border);font-size:13.5px;color:var(--txt-dim);margin-bottom:24px}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.price-card{position:relative;display:flex;flex-direction:column}
.price-card.featured{border-color:var(--brand);box-shadow:var(--shadow-glow)}
.price-tag{font-family:var(--font-display);font-size:38px;font-weight:800;margin:10px 0;color:var(--txt)}
.price-tag small{font-size:15px;color:var(--txt-mute);font-weight:500}
.feat-list{list-style:none;margin:18px 0;flex:1}
.feat-list li{padding:8px 0;color:var(--txt-dim);display:flex;gap:10px;font-size:14.5px}
.feat-list li::before{content:"✓";color:var(--ok);font-weight:700}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg-1)}
.auth-card{width:100%;max-width:420px}

/* ---------- Phone viewer ---------- */
.phone-stage{
  background:#1a1d24;border-radius:22px;border:1px solid var(--border);
  aspect-ratio:9/16;max-width:380px;margin:0 auto;overflow:hidden;
  display:grid;place-items:center;position:relative
}
#phoneBox{width:100%;height:100%}

/* ---------- Toast ---------- */
.toast{
  position:fixed;top:20px;right:20px;z-index:999;
  padding:14px 20px;border-radius:11px;font-weight:500;
  background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow);
  transform:translateX(120%);transition:.3s;max-width:340px;color:var(--txt)
}
.toast.show{transform:translateX(0)}
.toast.ok{border-left:3px solid var(--ok)}
.toast.bad{border-left:3px solid var(--bad)}

/* ---------- Mobile ---------- */
.menu-btn{display:none;background:var(--bg-2);border:1px solid var(--border);
  width:40px;height:40px;border-radius:9px;color:var(--txt);font-size:18px;cursor:pointer}
@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:240px;z-index:100;transform:translateX(-100%);transition:.25s;box-shadow:var(--shadow)}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:block}
  .main{padding:20px 16px}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    background:var(--bg-0);padding:16px;border-bottom:1px solid var(--border)}
}