/* ================================================================
   QR DEEMLO — Shared Design System v5.0
   Import via: <link rel="stylesheet" href="assets/deemlo.css">
================================================================ */

/* ── FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --fd: 'Bricolage Grotesque', sans-serif;
  --fb: 'Inter', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  /* Palette */
  --violet:  #7c3aed;
  --purple:  #a78bfa;
  --pink:    #ec4899;
  --cyan:    #06b6d4;
  --teal:    #14b8a6;
  --green:   #10b981;
  --amber:   #f59e0b;
  --orange:  #f97316;
  --red:     #ef4444;
  --rose:    #f43f5e;
  --indigo:  #6366f1;

  /* Radius */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 12px;
  --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px;
  --r-full: 9999px;

  /* Easing */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --tf: 150ms; --tb: 240ms; --ts: 420ms;
}

/* ── DARK THEME ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:      #060614;
  --bg-s:    #0d0d1f;
  --bg-c:    rgba(13,13,31,.92);
  --g1:      rgba(255,255,255,.04);
  --g2:      rgba(255,255,255,.07);
  --g3:      rgba(255,255,255,.12);
  --bd:      rgba(255,255,255,.08);
  --bd2:     rgba(124,58,237,.35);
  --bdf:     rgba(124,58,237,.65);
  --t1:      #f0f0ff;
  --t2:      #8585aa;
  --t3:      #4a4a70;
  --t-inv:   #060614;
  --ss:      0 2px 8px  rgba(0,0,0,.45);
  --sm:      0 8px 32px rgba(0,0,0,.65);
  --sl:      0 24px 64px rgba(0,0,0,.85);
  --sb:      0 8px 28px rgba(124,58,237,.32);
  --scroll:  rgba(255,255,255,.1);
}

/* ── LIGHT THEME ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:      #f5f3ff;
  --bg-s:    #ffffff;
  --bg-c:    rgba(255,255,255,.96);
  --g1:      rgba(0,0,0,.03);
  --g2:      rgba(0,0,0,.06);
  --g3:      rgba(0,0,0,.1);
  --bd:      rgba(0,0,0,.09);
  --bd2:     rgba(124,58,237,.28);
  --bdf:     rgba(124,58,237,.55);
  --t1:      #1a0a2e;
  --t2:      #6040a0;
  --t3:      #a090c0;
  --t-inv:   #ffffff;
  --ss:      0 2px 8px  rgba(80,0,160,.06);
  --sm:      0 8px 32px rgba(80,0,160,.11);
  --sl:      0 24px 64px rgba(80,0,160,.17);
  --sb:      0 8px 28px rgba(124,58,237,.22);
  --scroll:  rgba(0,0,0,.12);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--ts), color var(--ts);
}
button { font-family: inherit; cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-family: inherit; color: var(--t1); }
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: var(--r-full); }

/* ── BACKGROUND EFFECTS ─────────────────────────────────────── */
.bg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-mesh {
  position: absolute; inset: -50%;
  animation: meshDrift 28s ease-in-out infinite alternate;
}
[data-theme="dark"] .bg-mesh {
  background:
    radial-gradient(ellipse 60% 40% at 12% 10%, rgba(124,58,237,.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 38% at 88% 85%, rgba(6,182,212,.09) 0%, transparent 55%),
    radial-gradient(ellipse 42% 32% at 52% 48%, rgba(236,72,153,.06) 0%, transparent 52%);
}
[data-theme="light"] .bg-mesh {
  background:
    radial-gradient(ellipse 60% 40% at 12% 10%, rgba(124,58,237,.07) 0%, transparent 60%),
    radial-gradient(ellipse 55% 38% at 88% 85%, rgba(6,182,212,.04) 0%, transparent 55%);
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--bd) 1px, transparent 1px),
    linear-gradient(90deg, var(--bd) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .55;
}
@keyframes meshDrift { from { transform: translate(0,0); } to { transform: translate(1.2%,1.5%); } }

/* ── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes popIn    { from { opacity:0; transform:scale(.92) translateY(10px); } to { opacity:1; transform:none; } }
@keyframes slideDown{ from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@keyframes spin     { to   { transform: rotate(360deg); } }
@keyframes shimmer  { 0%   { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes lprog    { from{width:0} to{width:100%} }
@property --ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes spinGlow { to { --ang: 360deg; } }

/* ── LOADER ─────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  transition: opacity .6s, visibility .6s;
}
#loader.out { opacity: 0; visibility: hidden; pointer-events: none; }
.ld-logo {
  font-family: var(--fd); font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(135deg,var(--violet),var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ld-ring { width:40px; height:40px; border:2.5px solid var(--bd); border-top-color:var(--violet); border-radius:50%; animation:spin .8s linear infinite; }
.ld-track { width:160px; height:2px; background:var(--g2); border-radius:var(--r-full); overflow:hidden; }
.ld-fill  { height:100%; background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:var(--r-full); animation:lprog 2.2s var(--ease) forwards; }

/* ── CONFIRM MODAL ──────────────────────────────────────────── */
#cfmOverlay, #cfmOv {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(6,6,20,.78); backdrop-filter: blur(16px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#cfmOverlay.show, #cfmOv.show { display: flex; animation: fadeUp .22s var(--ease); }
.cfm-box {
  background: var(--bg-c); border: 1px solid var(--bd);
  border-radius: var(--r-2xl); padding: 32px 28px;
  max-width: 380px; width: 100%;
  box-shadow: var(--sl);
  backdrop-filter: blur(24px);
}
#cfmOv.show .cfm-box, #cfmOverlay.show .cfm-box {
  animation: popIn .26s var(--ease);
}
.cfm-icon  { font-size: 44px; text-align: center; margin-bottom: 14px; }
.cfm-title { font-family:var(--fd); font-size:20px; font-weight:700; text-align:center; margin-bottom:8px; }
.cfm-desc  { font-size:13px; color:var(--t2); text-align:center; line-height:1.7; margin-bottom:28px; white-space:pre-line; }
.cfm-btns  { display:flex; gap:10px; }
.cfm-btns button { flex:1; padding:13px; border-radius:var(--r-md); font-size:14px; font-weight:600; transition:all var(--tb) var(--ease); }
.cfm-cancel { background:var(--g2); color:var(--t2); border:1px solid var(--bd); }
.cfm-cancel:hover { background:var(--g3); }
.cfm-ok    { background:linear-gradient(135deg,var(--violet),var(--pink)); color:#fff; box-shadow:var(--sb); }
.cfm-ok:hover { opacity:.9; transform:translateY(-1px); }
.cfm-ok.danger { background:linear-gradient(135deg,var(--red),var(--orange)); box-shadow:0 8px 24px rgba(239,68,68,.3); }

/* ── TOASTS ─────────────────────────────────────────────────── */
#toastBox {
  position: fixed; top: 70px; right: 16px; z-index: 9997;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: 340px; width: calc(100% - 32px);
}
@media(max-width:480px){ #toastBox { right:0; left:0; width:100%; padding:0 12px; } }
.toast {
  padding: 12px 16px; border-radius: var(--r-lg);
  background: var(--bg-c); border: 1px solid var(--bd);
  box-shadow: var(--sm); font-size: 13px; font-weight: 500; color: var(--t1);
  display: flex; align-items: center; gap: 10px;
  pointer-events: all; animation: slideDown .3s var(--ease);
  backdrop-filter: blur(24px); position: relative; overflow: hidden;
}
.toast::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:3px 0 0 3px; }
.toast.ok::before   { background: var(--green); }
.toast.err::before  { background: var(--red);   }
.toast.warn::before { background: var(--amber); }
.toast.info::before { background: var(--violet);}
.toast i.toast-ico  { font-size:18px; flex-shrink:0; }
.toast span.toast-msg { flex:1; line-height:1.4; }

/* ── NAVBAR ─────────────────────────────────────────────────── */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  position: sticky; top: 0; z-index: 200;
  backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid var(--bd);
  margin: 0 -16px;
  transition: background var(--ts);
}
[data-theme="dark"]  .navbar { background: rgba(6,6,20,.88); }
[data-theme="light"] .navbar { background: rgba(245,243,255,.92); }
.nb-brand { display: flex; align-items: center; gap: 10px; }
.nb-logo  { width:34px; height:34px; border-radius:var(--r-sm); overflow:hidden; flex-shrink:0; }
.nb-logo img { width:100%; height:100%; object-fit:cover; }
.nb-name {
  font-family: var(--fd); font-size: 17px; font-weight: 800; letter-spacing: -.03em;
  background: linear-gradient(135deg,var(--violet),var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nb-actions { display: flex; gap: 6px; align-items: center; }
.nb-btn {
  width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--g1); border:1px solid var(--bd);
  color:var(--t2); font-size:17px;
  display:flex; align-items:center; justify-content:center;
  transition: all var(--tf); position: relative;
  text-decoration: none;
}
.nb-btn:hover { background:var(--g2); border-color:var(--bd2); color:var(--violet); }
.nb-btn:active { transform: scale(.93); }
.nb-badge {
  position:absolute; top:-4px; right:-4px;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--red); color:#fff;
  border-radius:var(--r-full); font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg); line-height:1;
}
.nb-badge.hide { display: none; }

/* ── CARD ───────────────────────────────────────────────────── */
.card {
  background: var(--bg-c); border: 1px solid var(--bd);
  border-radius: var(--r-xl); padding: 20px;
  box-shadow: var(--ss); margin-bottom: 12px;
  backdrop-filter: blur(14px);
}
.card-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--t3); margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.card-title::before {
  content: ''; width: 3px; height: 14px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--violet), var(--pink));
  border-radius: var(--r-full);
}

/* ── FORM ELEMENTS ──────────────────────────────────────────── */
.flabel { font-size:12px; font-weight:600; color:var(--t2); margin-bottom:7px; display:block; }
.finput {
  width:100%; padding:11px 14px;
  border-radius:var(--r-md); border:1px solid var(--bd);
  background:var(--g1); color:var(--t1);
  font-size:14px; outline:none; transition:all var(--tb);
}
.finput:focus { border-color:var(--bdf); background:var(--g2); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.finput::placeholder { color:var(--t3); font-size:13px; }
.finput.mono { font-family:var(--fm); font-size:14px; }
.finput.sm   { padding:9px 12px; font-size:13px; }
textarea.finput { resize:vertical; min-height:70px; font-size:13px; line-height:1.6; }
.input-wrap  { position:relative; margin-bottom:14px; }
.input-wrap .finput.has-sfx { padding-right:46px; }
.input-sfx   { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--t3); font-size:18px; cursor:pointer; transition:color var(--tf); display:flex; align-items:center; }
.input-sfx:hover { color:var(--t2); }
.frow { margin-bottom:12px; }
.row  { display:flex; gap:8px; align-items:flex-end; }
.row .finput { flex:1; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:400px){ .grid2{ grid-template-columns:1fr; } }
.sep { height:1px; background:var(--bd); margin:14px 0; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  padding:10px 16px; border-radius:var(--r-md);
  font-size:13px; font-weight:600;
  transition:all var(--tb) var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; border:none; white-space:nowrap;
}
.btn:active  { transform:scale(.97); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.full    { width:100%; padding:13px; font-size:14px; }
.btn.sm      { padding:7px 12px; font-size:12px; }
.btn-violet  { background:linear-gradient(135deg,var(--violet),var(--pink)); color:#fff; box-shadow:var(--sb); }
.btn-violet:hover { opacity:.92; transform:translateY(-1px); }
.btn-teal    { background:linear-gradient(135deg,var(--green),var(--cyan)); color:#fff; }
.btn-teal:hover { opacity:.92; transform:translateY(-1px); }
.btn-amber   { background:linear-gradient(135deg,var(--amber),var(--orange)); color:#fff; }
.btn-amber:hover { opacity:.92; transform:translateY(-1px); }
.btn-outline { background:var(--g1); color:var(--t2); border:1px solid var(--bd); }
.btn-outline:hover { border-color:var(--bd2); color:var(--violet); background:rgba(124,58,237,.06); }
.btn-danger  { background:rgba(239,68,68,.1); color:var(--red); border:1px solid rgba(239,68,68,.22); }
.btn-danger:hover { background:rgba(239,68,68,.18); }
.btn-warn    { background:rgba(245,158,11,.1); color:var(--amber); border:1px solid rgba(245,158,11,.22); }
.btn-warn:hover   { background:rgba(245,158,11,.18); }

/* ── TABS ───────────────────────────────────────────────────── */
.tab-bar {
  display:flex; gap:3px; padding:4px;
  background:var(--g1); border:1px solid var(--bd);
  border-radius:var(--r-md); margin:12px 0;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tab-bar::-webkit-scrollbar{ display:none; }
.tab-btn {
  flex:1; min-width:fit-content; padding:9px 10px;
  border-radius:var(--r-sm); font-size:11px; font-weight:600;
  color:var(--t2); transition:all var(--tb) var(--ease);
  display:flex; align-items:center; justify-content:center;
  gap:5px; white-space:nowrap; letter-spacing:.01em;
}
.tab-btn.active { background:var(--bg-s); color:var(--violet); box-shadow:var(--ss); }
.tc { display:none; }
.tc.active { display:block; animation:fadeUp .25s var(--ease); }

/* ── BADGE ──────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--r-full); font-size:10px; font-weight:700; letter-spacing:.04em; }
.badge.active { background:rgba(16,185,129,.12); color:var(--green); border:1px solid rgba(16,185,129,.25); }
.badge.locked { background:rgba(239,68,68,.12); color:var(--red); border:1px solid rgba(239,68,68,.25); }

/* ── TOGGLE SWITCH ──────────────────────────────────────────── */
.toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:var(--r-md);
  border:1px solid var(--bd); background:var(--g1);
  cursor:pointer; transition:all var(--tb); user-select:none; margin-bottom:10px;
}
.toggle-row:hover { border-color:var(--bd2); background:rgba(124,58,237,.05); }
.toggle-lbl { font-size:13px; color:var(--t2); display:flex; align-items:center; gap:8px; }
.sw {
  width:40px; height:22px; background:var(--g2); border-radius:var(--r-full);
  position:relative; transition:background .25s; flex-shrink:0; border:1px solid var(--bd);
}
.sw.on { background:var(--violet); border-color:var(--violet); }
.sw::after {
  content:''; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  transition:transform .25s var(--ease); box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.sw.on::after { transform:translateX(18px); }

/* ── STAT CARDS ─────────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:10px 0; }
.stat-card {
  background:var(--bg-c); border:1px solid var(--bd);
  border-radius:var(--r-lg); padding:14px 10px; text-align:center;
  box-shadow:var(--ss); position:relative; overflow:hidden;
  transition:all var(--tb) var(--ease); cursor:default;
  backdrop-filter:blur(12px);
}
.stat-card:hover { transform:translateY(-2px); border-color:var(--bd2); }
.stat-card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; border-radius:2px 2px 0 0; }
.stat-card.c1::after { background:linear-gradient(90deg,var(--violet),var(--purple)); }
.stat-card.c2::after { background:linear-gradient(90deg,var(--amber),var(--orange)); }
.stat-card.c3::after { background:linear-gradient(90deg,var(--green),var(--cyan)); }
.stat-card.c4::after { background:linear-gradient(90deg,var(--red),var(--pink)); }
.stat-icon  { font-size:18px; margin-bottom:6px; display:block; }
.stat-val   { font-family:var(--fm); font-size:20px; font-weight:700; line-height:1; display:block; }
.stat-lbl   { font-size:10px; color:var(--t2); margin-top:5px; display:block; text-transform:uppercase; letter-spacing:.06em; font-weight:500; }

/* Usage progress */
.usage-wrap  { margin:10px 0; }
.usage-track { background:var(--g2); border-radius:var(--r-full); height:5px; overflow:hidden; }
.usage-fill  { height:100%; border-radius:var(--r-full); background:linear-gradient(90deg,var(--violet),var(--cyan)); transition:width 1.2s var(--ease); }
.usage-meta  { display:flex; justify-content:space-between; font-size:11px; color:var(--t3); margin-top:5px; }

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert {
  padding:11px 15px; border-radius:var(--r-md); border-left:3px solid;
  font-size:12px; font-weight:500; margin-bottom:12px;
  display:flex; align-items:center; gap:9px; line-height:1.5;
}
.alert.warn  { background:rgba(245,158,11,.07); border-color:var(--amber); color:var(--amber); }
.alert.err   { background:rgba(239,68,68,.07);  border-color:var(--red);   color:var(--red);   }
.alert.ok    { background:rgba(16,185,129,.07); border-color:var(--green); color:var(--green); }
.alert.info  { background:rgba(124,58,237,.07); border-color:var(--violet);color:var(--purple);}

/* ── PAGINATION ─────────────────────────────────────────────── */
.pagination { display:flex; gap:5px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.pg-btn { padding:6px 11px; border-radius:var(--r-sm); border:1px solid var(--bd); background:var(--g1); font-size:11px; font-weight:700; color:var(--t2); transition:all var(--tf); cursor:pointer; }
.pg-btn:hover,.pg-btn.active { border-color:var(--bd2); color:var(--violet); background:rgba(124,58,237,.07); }
.pg-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── EMPTY STATE ────────────────────────────────────────────── */
.empty { text-align:center; padding:36px 20px; color:var(--t3); }
.empty-icon { font-size:48px; margin-bottom:14px; display:block; opacity:.55; }
.empty p { font-size:13px; color:var(--t2); line-height:1.7; }

/* ── SOCIAL ICON COLORS ──────────────────────────────────────── */
.ico-facebook  { background:#1877f2; }
.ico-instagram { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.ico-tiktok    { background:#010101; }
.ico-youtube   { background:#ff0000; }
.ico-zalo      { background:#0068ff; }
.ico-twitter   { background:#1da1f2; }
.ico-threads   { background:#101010; }
.ico-linkedin  { background:#0077b5; }
.ico-telegram  { background:#2ca5e0; }
.ico-whatsapp  { background:#25d366; }
.ico-pinterest { background:#e60023; }
.ico-snapchat  { background:#fffc00; }
.ico-spotify   { background:#1db954; }
.ico-github    { background:#24292e; }
.ico-behance   { background:#1769ff; }
.ico-dribbble  { background:#ea4c89; }
.ico-shopee    { background:#f53d2d; }
.ico-lazada    { background:#0f146b; }
.ico-website   { background:linear-gradient(135deg,#6366f1,#8b5cf6); }
.ico-phone     { background:#10b981; }
.ico-email     { background:#f59e0b; }
.ico-custom    { background:#64748b; }

/* ── UTILS ──────────────────────────────────────────────────── */
.spin   { display:inline-block; animation:spin .7s linear infinite; }
.mt-2   { margin-top:8px; }
.mt-3   { margin-top:12px; }
.mt-4   { margin-top:16px; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  text-align:center; padding:10px 16px;
  font-size:11px; color:var(--t3);
  backdrop-filter:blur(20px); border-top:1px solid var(--bd);
  transition:background var(--ts);
}
[data-theme="dark"]  .site-footer { background:rgba(6,6,20,.86); }
[data-theme="light"] .site-footer { background:rgba(245,243,255,.9); }
.site-footer a { color:var(--t2); font-weight:600; transition:color var(--tf); }
.site-footer a:hover { color:var(--violet); }