@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Outfit:wght@300;400;500;600&display=swap');

/* ── DARK MODE (default) ─────────────────────────────────── */
:root {
  --bg:       #09090E;
  --bg2:      #111118;
  --bg3:      #1A1A24;
  --bg4:      #22222F;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.11);
  --text:     #EEEEF5;
  --muted:    #64647A;
  --accent:   #7B5EA7;
  --accent2:  #9B7EC8;
  --accentbg: rgba(123,94,167,0.12);
  --green:    #22C55E;
  --greenbg:  rgba(34,197,94,0.1);
  --blue:     #3B82F6;
  --bluebg:   rgba(59,130,246,0.1);
  --red:      #EF4444;
  --redbg:    rgba(239,68,68,0.1);
  --gold:     #EAB308;
  --goldbg:   rgba(234,179,8,0.1);
  --orange:   #F97316;
  --r:        12px;
  --r2:       8px;
  --shadow:   0 4px 20px rgba(0,0,0,0.5);
  --shadowlg: 0 20px 60px rgba(0,0,0,0.7);
  --fh:       'Syne', sans-serif;
  --fb:       'Outfit', sans-serif;
  --sidebar:  252px;
}

/* ── LIGHT MODE ──────────────────────────────────────────── */
html.light {
  --bg:       #F4F4F8;
  --bg2:      #FFFFFF;
  --bg3:      #F0F0F5;
  --bg4:      #E4E4EC;
  --border:   rgba(0,0,0,0.07);
  --border2:  rgba(0,0,0,0.13);
  --text:     #18181F;
  --muted:    #7A7A95;
  --accent:   #6B4FA0;
  --accent2:  #7B5EA7;
  --accentbg: rgba(107,79,160,0.1);
  --green:    #16A34A;
  --greenbg:  rgba(22,163,74,0.09);
  --blue:     #2563EB;
  --bluebg:   rgba(37,99,235,0.09);
  --red:      #DC2626;
  --redbg:    rgba(220,38,38,0.09);
  --gold:     #CA8A04;
  --goldbg:   rgba(202,138,4,0.09);
  --shadow:   0 4px 20px rgba(0,0,0,0.08);
  --shadowlg: 0 20px 60px rgba(0,0,0,0.14);
}

/* Light mode: select arrow dark */
html.light select.fc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A7A95' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Light mode: login background glows */
html.light .login-wrap::before {
  background: radial-gradient(circle,rgba(107,79,160,.07) 0%,transparent 65%);
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────── */
.theme-btn {
  width: 36px; height: 36px;
  border-radius: var(--r2);
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
  flex-shrink: 0;
}
.theme-btn:hover { background: var(--bg4); color: var(--text); }
.theme-icon-dark  { display: block; }
.theme-icon-light { display: none; }
html.light .theme-icon-dark  { display: none; }
html.light .theme-icon-light { display: block; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
a{color:inherit;text-decoration:none}
input,select,textarea,button{font-family:var(--fb)}

/* ── LOGIN ─────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.login-wrap::before{content:'';position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(123,94,167,.1) 0%,transparent 65%);top:-200px;left:50%;transform:translateX(-50%);pointer-events:none}
.login-wrap::after{content:'';position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 65%);bottom:-100px;right:-50px;pointer-events:none}
.login-card{background:var(--bg2);border:1px solid var(--border2);border-radius:20px;padding:48px 40px;width:100%;max-width:420px;box-shadow:var(--shadowlg);position:relative;z-index:1}
.login-logo{text-align:center;margin-bottom:36px}
.login-icon{width:60px;height:60px;background:linear-gradient(135deg,var(--accent),#4C3580);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.login-logo h1{font-family:var(--fh);font-size:24px;font-weight:800;letter-spacing:-.5px}
.login-logo p{font-size:13px;color:var(--muted);margin-top:4px}

/* ── FORMS ─────────────────────────────────────────────── */
.fg{margin-bottom:18px}
.fg:last-of-type{margin-bottom:24px}
.fl{display:block;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:7px}
.fc{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);padding:11px 14px;color:var(--text);font-size:15px;outline:none;transition:border-color .2s,box-shadow .2s}
.fc:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(123,94,167,.15)}
.fc::placeholder{color:var(--muted)}
select.fc{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364647A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
textarea.fc{resize:vertical;min-height:88px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.input-icon-wrap{position:relative}
.input-icon-wrap .fc{padding-left:40px}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:var(--r2);font-size:14px;font-weight:600;cursor:pointer;transition:all .18s;border:none;white-space:nowrap;line-height:1;text-decoration:none}
.btn svg{flex-shrink:0}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(123,94,167,.35)}
.btn-success{background:var(--green);color:#fff}
.btn-success:hover{background:#16a34a;transform:translateY(-1px)}
.btn-danger{background:var(--redbg);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn-ghost{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--bg4);border-color:var(--border2)}
.btn-outline{background:transparent;color:var(--muted);border:1px solid var(--border2)}
.btn-outline:hover{background:var(--bg3);color:var(--text)}
.btn-sm{padding:7px 13px;font-size:13px}
.btn-xs{padding:5px 10px;font-size:12px}
.btn-icon{padding:8px;border-radius:var(--r2)}
.btn-full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-lg{padding:13px 24px;font-size:15px}

/* ── ALERTS ─────────────────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--r2);font-size:14px;margin-bottom:18px;display:flex;align-items:flex-start;gap:10px;border:1px solid transparent}
.alert-danger{background:var(--redbg);color:var(--red);border-color:rgba(239,68,68,.2)}
.alert-success{background:var(--greenbg);color:var(--green);border-color:rgba(34,197,94,.2)}
.alert-info{background:var(--bluebg);color:var(--blue);border-color:rgba(59,130,246,.2)}
.alert-warn{background:var(--goldbg);color:var(--gold);border-color:rgba(234,179,8,.2)}

/* ── APP LAYOUT ─────────────────────────────────────────── */
.app{display:flex;min-height:100vh}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar{width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sb-head{padding:22px 18px;border-bottom:1px solid var(--border)}
.sb-brand{display:flex;align-items:center;gap:11px}
.sb-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),#4C3580);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.sb-title{font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:-.2px}
.sb-sub{font-size:10px;color:var(--muted);margin-top:1px}
.sb-nav{flex:1;padding:14px 10px;overflow-y:auto;scrollbar-width:none}
.sb-nav::-webkit-scrollbar{display:none}
.nav-label{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:0 8px;margin:16px 0 6px}
.nav-link{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:var(--r2);color:var(--muted);font-size:13.5px;font-weight:500;transition:all .18s;margin-bottom:1px;position:relative}
.nav-link:hover{background:var(--bg3);color:var(--text)}
.nav-link.active{background:var(--accentbg);color:var(--accent2)}
.nav-link .ni{width:17px;height:17px;flex-shrink:0;opacity:.8}
.nav-link.active .ni{opacity:1}
.nav-badge{margin-left:auto;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;min-width:20px;text-align:center}
.nb-green{background:var(--greenbg);color:var(--green)}
.nb-blue{background:var(--bluebg);color:var(--blue)}
.nb-purple{background:var(--accentbg);color:var(--accent2)}
.sb-foot{padding:14px 10px;border-top:1px solid var(--border)}
.user-pill{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r2);margin-bottom:8px}
.user-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;text-transform:uppercase}
.user-name{font-size:13px;font-weight:600;line-height:1.2}
.user-role{font-size:11px;color:var(--muted)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:199}

/* ── MAIN ───────────────────────────────────────────────── */
.main{margin-left:var(--sidebar);flex:1;display:flex;flex-direction:column;min-height:100vh}

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:13px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:100}
.tb-left{display:flex;align-items:center;gap:13px}
.tb-title{font-family:var(--fh);font-size:17px;font-weight:800;letter-spacing:-.3px}
.tb-sub{font-size:11px;color:var(--muted)}
.tb-right{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;background:var(--bg3);border:1px solid var(--border2);color:var(--text);border-radius:var(--r2);padding:8px;cursor:pointer}

/* ── PAGE ───────────────────────────────────────────────── */
.page{padding:26px;flex:1}

/* ── DASHBOARD ──────────────────────────────────────────── */
.dash-hero{background:linear-gradient(135deg,rgba(123,94,167,.14),rgba(59,130,246,.07));border:1px solid rgba(123,94,167,.2);border-radius:18px;padding:30px 32px;margin-bottom:24px;position:relative;overflow:hidden}
.dash-hero::after{content:'🚀';position:absolute;right:28px;top:50%;transform:translateY(-50%);font-size:60px;opacity:.12}
.dash-hero h2{font-family:var(--fh);font-size:clamp(19px,3vw,26px);font-weight:800;margin-bottom:5px}
.dash-hero p{color:var(--muted);font-size:14px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:border-color .2s,transform .2s}
.stat:hover{border-color:var(--border2);transform:translateY(-2px)}
.stat-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.stat-val{font-family:var(--fh);font-size:38px;font-weight:800;line-height:1;margin-bottom:5px}
.stat-desc{font-size:12px;color:var(--muted)}
.cv-green{color:var(--green)}.cv-blue{color:var(--blue)}.cv-purple{color:var(--accent2)}.cv-gold{color:var(--gold)}

/* action cards */
.ac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:24px}
.ac{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:26px;display:block;color:var(--text);position:relative;overflow:hidden;transition:all .22s}
.ac:hover{transform:translateY(-3px);box-shadow:var(--shadowlg)}
.ac-new{border-top:3px solid var(--green)}.ac-new:hover{box-shadow:0 16px 48px rgba(34,197,94,.12)}
.ac-cont{border-top:3px solid var(--blue)}.ac-cont:hover{box-shadow:0 16px 48px rgba(59,130,246,.12)}
.ac-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.ac-new .ac-icon{background:var(--greenbg)}.ac-cont .ac-icon{background:var(--bluebg)}
.ac h3{font-family:var(--fh);font-size:19px;font-weight:800;margin-bottom:5px}
.ac p{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.ac-num{font-family:var(--fh);font-size:42px;font-weight:800;line-height:1}
.ac-new .ac-num{color:var(--green)}.ac-cont .ac-num{color:var(--blue)}
.ac-arrow{position:absolute;right:22px;bottom:22px;font-size:20px;opacity:.25;transition:opacity .2s,transform .2s}
.ac:hover .ac-arrow{opacity:1;transform:translateX(4px)}

/* ── LIST ───────────────────────────────────────────────── */
.list-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.list-head h2{font-family:var(--fh);font-size:21px;font-weight:800}
.list-count{font-size:15px;font-weight:400;color:var(--muted);margin-left:7px}
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.search-wrap{position:relative}
.search-wrap input{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:9px 13px 9px 38px;color:var(--text);font-size:14px;width:230px;outline:none;transition:border-color .2s}
.search-wrap input:focus{border-color:var(--accent)}
.search-wrap input::placeholder{color:var(--muted)}
.search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* table */
.tw{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.dt{width:100%;border-collapse:collapse}
.dt th{background:var(--bg3);padding:12px 15px;text-align:left;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;border-bottom:1px solid var(--border)}
.dt td{padding:13px 15px;border-bottom:1px solid var(--border);font-size:14px;vertical-align:middle}
.dt tr:last-child td{border-bottom:none}
.dt tbody tr{transition:background .12s}
.dt tbody tr:hover{background:rgba(255,255,255,.018)}
.cn{font-weight:600}.cs{font-size:12px;color:var(--muted);margin-top:2px}
.ig-a{color:var(--accent2);display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500}
.ig-a:hover{text-decoration:underline}
.wa-a{color:var(--green);display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500}
.wa-a:hover{text-decoration:underline}
.act-col{display:flex;gap:5px;align-items:center}

/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.b-new{background:var(--greenbg);color:var(--green);border-color:rgba(34,197,94,.2)}
.b-cont{background:var(--bluebg);color:var(--blue);border-color:rgba(59,130,246,.2)}
.b-pend{background:var(--goldbg);color:var(--gold);border-color:rgba(234,179,8,.2)}
.b-prog{background:var(--accentbg);color:var(--accent2);border-color:rgba(123,94,167,.2)}
.b-done{background:rgba(100,100,122,.12);color:var(--muted);border-color:var(--border2)}
.b-none{background:transparent;color:var(--muted);border-color:var(--border)}

/* pagination */
.pag{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-top:1px solid var(--border);flex-wrap:wrap;gap:10px}
.pag-info{font-size:13px;color:var(--muted)}
.pag-pages{display:flex;gap:3px;align-items:center}
.pb{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r2);font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--muted);transition:all .15s}
.pb:hover{background:var(--bg4);color:var(--text)}
.pb.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pb.off{opacity:.35;pointer-events:none}

/* empty state */
.empty{text-align:center;padding:60px 24px}
.empty-ic{font-size:52px;margin-bottom:14px}
.empty h3{font-family:var(--fh);font-size:19px;font-weight:800;margin-bottom:7px}
.empty p{color:var(--muted);font-size:14px;margin-bottom:22px}

/* back link */
.back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px;font-weight:500;margin-bottom:18px;transition:color .2s}
.back:hover{color:var(--text)}

/* ── DETAIL ─────────────────────────────────────────────── */
.dcard{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:30px;margin-bottom:18px}
.d-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.d-av{width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--blue));display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:22px;font-weight:800;color:#fff;flex-shrink:0;text-transform:uppercase}
.d-name{font-family:var(--fh);font-size:23px;font-weight:800;margin-bottom:3px}
.d-sub{font-size:12px;color:var(--muted)}
.d-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px}
.df-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.df-val{font-size:14.5px;font-weight:500}
.notes-box{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:15px;font-size:14px;line-height:1.65;margin-top:16px}
.notes-box.empty-note{color:var(--muted);font-style:italic}
.qa{display:flex;gap:8px;flex-wrap:wrap;padding-top:20px;margin-top:20px;border-top:1px solid var(--border)}

/* ── MODAL ──────────────────────────────────────────────── */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.m-box{background:var(--bg2);border:1px solid var(--border2);border-radius:18px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadowlg);animation:slideUp .22s ease}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.m-head{padding:22px 26px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.m-head h3{font-family:var(--fh);font-size:17px;font-weight:800}
.m-close{width:30px;height:30px;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;transition:all .18s}
.m-close:hover{background:var(--redbg);color:var(--red);border-color:rgba(239,68,68,.3)}
.m-body{padding:22px 26px}
.m-foot{padding:14px 26px 22px;display:flex;justify-content:flex-end;gap:9px}
.confirm-c{text-align:center;padding:6px 0}
.confirm-ic{font-size:44px;margin-bottom:14px}
.confirm-c h4{font-family:var(--fh);font-size:18px;font-weight:800;margin-bottom:7px}
.confirm-c p{color:var(--muted);font-size:14px}

/* ── USERS TABLE ────────────────────────────────────────── */
.role-tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
.role-admin{background:var(--accentbg);color:var(--accent2);border:1px solid rgba(123,94,167,.25)}
.role-user{background:var(--bg3);color:var(--muted);border:1px solid var(--border2)}

/* ── TABS ───────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:22px}
.tab{padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .18s}
.tab:hover{color:var(--text)}
.tab.on{color:var(--accent2);border-bottom-color:var(--accent2)}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sb-overlay.show{display:block}
  .main{margin-left:0}
  .menu-btn{display:flex}
  .page{padding:18px 14px}
  .topbar{padding:11px 14px}
  .search-wrap input{width:100%}
  .dt th:nth-child(4),.dt td:nth-child(4),
  .dt th:nth-child(5),.dt td:nth-child(5){display:none}
  .ac-grid{grid-template-columns:1fr}
  .dcard{padding:20px}
  .d-head{flex-direction:column}
  .list-head{flex-direction:column;align-items:flex-start}
  .controls{width:100%}
}
@media(max-width:480px){
  .login-card{padding:32px 22px}
  .m-box{border-radius:14px}
}

/* ── UTILS ──────────────────────────────────────────────── */
.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:24px}
.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}
.flex{display:flex}.ac-i{align-items:center}.gap1{gap:8px}.gap2{gap:12px}.fw{flex-wrap:wrap}
.text-muted{color:var(--muted)}.text-sm{font-size:13px}
.w-full{width:100%}
.hidden{display:none!important}