*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* ── Flaticon icon alignment fix ─────────────────────────
   Flaticon uicons renders glyphs via ::before with font
   metrics that shift the glyph up by ~0.125em relative to
   the parent line box. Forcing the <i> element to
   inline-flex with explicit centering kills that offset
   across every context: icon buttons, labels, badges, etc.
──────────────────────────────────────────────────────── */
.fi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.fi::before {
  display: block;
  line-height: 1;
  vertical-align: middle;
}

/* NAV HEADER */
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 64px;background:var(--surf1);border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:100;flex-shrink:0}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer}
.nav-logo{width:32px;height:32px;flex-shrink:0}
.nav-title{font-size:14px;font-weight:600;color:var(--txt);white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:24px}
.nav-username{font-size:14px;color:var(--txt)}

/* ICON BUTTONS */
.ibtn{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--txt2);transition:color .15s;padding:0;line-height:1}
.ibtn:hover{color:var(--txt)}
.ibtn-sm{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--txt2);font-size:16px;transition:all .15s}
.ibtn-sm:hover{background:var(--surf2);color:var(--txt)}
.ibtn-lg{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--brand);border:none;cursor:pointer;color:#fff;font-size:20px;transition:background .2s}
.ibtn-lg:hover{background:var(--brand-h)}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:var(--brand);color:#fff;font-family:var(--font);font-size:14px;font-weight:400;border:none;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .2s,transform .15s;text-decoration:none}
.btn-primary:hover{background:var(--brand-h)}
.btn-primary:active{background:var(--brand-a);transform:scale(.98)}
.btn-primary-lg{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:var(--brand);color:#fff;font-family:var(--font);font-size:14px;font-weight:400;border:none;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .2s,transform .15s}
.btn-primary-lg:hover{background:var(--brand-h)}
.btn-primary-lg:active{transform:scale(.98)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;background:transparent;color:var(--txt2);font-family:var(--font);font-size:14px;font-weight:500;border:1px solid var(--bdr);border-radius:8px;cursor:pointer;white-space:nowrap;transition:all .2s;text-decoration:none}
.btn-secondary:hover{background:var(--surf2);color:var(--txt)}
.btn-secondary:active{transform:scale(.98)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;background:none;color:var(--txt2);font-family:var(--font);font-size:12px;border:1px solid var(--bdr);border-radius:8px;cursor:pointer;white-space:nowrap;transition:all .15s}
.btn-ghost:hover{background:var(--surf2);color:var(--txt)}
.btn-green{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;background:var(--brand);color:#fff;font-family:var(--font);font-size:12px;font-weight:500;border:none;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .15s}
.btn-green:hover{background:var(--brand-h)}

/* SEARCH BARS */
.search-hero{display:flex;align-items:center;gap:12px;height:40px;padding:0 24px;background:var(--surf2);border:1px solid var(--bdr);border-radius:10px;flex:1;transition:border-color .2s}
.search-hero:hover:not(:focus-within){border-color:#3a4a5c}
.search-hero:focus-within{border-color:var(--brand-ring)}
.search-hero input{flex:1;background:none;border:none;outline:none;font-family:var(--font);font-size:14px;color:var(--txt2);caret-color:var(--txt)}
.search-hero input::placeholder{color:var(--txt2)}
.search-hero input:focus{color:var(--txt)}
.search-hero-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.search-nav{display:flex;align-items:center;gap:8px;flex:1;max-width:660px;height:40px;padding:0 16px;background:var(--surf2);border:1px solid var(--bdr);border-radius:8px;transition:border-color .2s}
.search-nav:focus-within{border-color:var(--brand-ring)}
.search-nav input{flex:1;background:none;border:none;outline:none;font-family:var(--font);font-size:14px;color:var(--txt2);caret-color:var(--txt)}
.search-nav input::placeholder{color:var(--txt2)}
.search-nav input:focus{color:var(--txt)}

/* CHIP */
.chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;background:transparent;color:var(--txt2);font-family:var(--font);font-size:12px;font-weight:500;border:1px solid var(--bdr);border-radius:8px;cursor:pointer;white-space:nowrap;transition:all .2s}
.chip:hover{background:var(--surf2);color:var(--txt)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:4px;font-size:11px;font-weight:500;white-space:nowrap}
.badge-success{background:rgba(16,185,129,.15);color:var(--success)}
.badge-info{background:rgba(59,130,246,.15);color:var(--info)}
.badge-warning{background:rgba(245,158,11,.15);color:var(--warning)}
.badge-error{background:rgba(239,68,68,.15);color:var(--error)}

/* SEPARATOR */
.sep{width:100%;height:1px;background:var(--bdr);flex-shrink:0}