@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Exo+2:wght@300;400;500;600&family=Share+Tech+Mono&display=swap');

/* ═══════════════════════════════════════════════════════════
   CIIC v2  —  Complete Design System  |  Mobile-First
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:        #050a0f;
  --card:      #0a1520;
  --card2:     #0d1f3c;
  --border:    #1a3a5c;
  --border2:   rgba(26,58,92,.5);
  --cyan:      #00d4ff;
  --green:     #00ff88;
  --red:       #ff3366;
  --orange:    #ff4400;
  --yellow:    #ffaa00;
  --purple:    #bb66ff;
  --text:      #c8d8e8;
  --muted:     #6a8aaa;
  --f-head:    'Rajdhani', sans-serif;
  --f-body:    'Exo 2', sans-serif;
  --f-mono:    'Share Tech Mono', monospace;
  --nav-h:     64px;
  --sb-w:      256px;
  --r:         8px;
  --r-sm:      5px;
  --t:         .2s ease;
  --shadow:    0 4px 24px rgba(0,0,0,.35);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-body); background: var(--bg); color: var(--text);
       line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #020609; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

a { color: var(--cyan); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--green); }
h1,h2,h3,h4,h5,h6 { font-family: var(--f-head); color: #fff; line-height: 1.2; }

/* ── CONTAINER ── */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ════════════════════════════════════════════
   PUBLIC NAV
   ════════════════════════════════════════════ */
.ciic-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  background: rgba(5,10,15,.96);
  border-bottom: 1px solid rgba(0,212,255,.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center;
  transition: box-shadow var(--t);
}
.ciic-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ciic-nav.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.5); }

.nav-brand { font-family: var(--f-head); font-size: 1.4em; font-weight: 700;
             color: #fff; letter-spacing: 2px; white-space: nowrap; flex-shrink: 0; }
.nav-brand span { color: var(--cyan); }

.nav-links-desktop { display: flex; align-items: center; gap: 2px; }
.nav-link { color: var(--muted) !important; font-family: var(--f-head); font-size: .83em;
            letter-spacing: 1px; text-transform: uppercase; padding: 6px 10px !important;
            border-bottom: 2px solid transparent; white-space: nowrap;
            transition: color var(--t), border-color var(--t); }
.nav-link:hover, .nav-link.active { color: var(--cyan) !important; border-bottom-color: var(--cyan); }
.nav-cta { background: linear-gradient(135deg,#005599,var(--cyan)); color: #fff !important;
           border-radius: var(--r-sm); border-bottom: none !important;
           margin-left: 6px; padding: 7px 16px !important; }
.nav-cta:hover { box-shadow: 0 0 20px rgba(0,212,255,.4); color: #fff !important; }

/* Hamburger */
#mob-btn { display: none; background: none; border: 1px solid var(--border);
           padding: 6px 11px; color: var(--text); border-radius: var(--r-sm);
           font-size: 1.1em; line-height: 1; flex-shrink: 0;
           transition: background var(--t), border-color var(--t); }
#mob-btn:hover { background: var(--card2); border-color: var(--cyan); }

/* Mobile nav */
#mob-nav { position: fixed; top: var(--nav-h); left: 0; right: 0;
           background: #07101a; border-bottom: 1px solid var(--border);
           z-index: 899; padding: 8px 0 14px;
           box-shadow: 0 10px 40px rgba(0,0,0,.6);
           max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
           transform: translateY(-110%);
           transition: transform .26s cubic-bezier(.4,0,.2,1); }
#mob-nav.open { transform: translateY(0); }
#mob-nav a { display: block; color: var(--muted); padding: 11px 22px;
             font-family: var(--f-head); font-size: .9em; letter-spacing: 1px;
             text-transform: uppercase; border-left: 3px solid transparent;
             transition: all var(--t); }
#mob-nav a:hover, #mob-nav a.active { color: var(--cyan); background: rgba(0,212,255,.05); border-left-color: var(--cyan); }
#mob-nav .mob-cta { margin: 8px 22px 0; display: block; text-align: center;
                    background: linear-gradient(135deg,#005599,var(--cyan));
                    color: #fff !important; padding: 12px 22px !important;
                    border-radius: var(--r-sm); border-left: none !important; }

/* ── TICKER ── */
.ticker { background: rgba(255,51,102,.05); border-top: 1px solid rgba(255,51,102,.18);
          border-bottom: 1px solid rgba(255,51,102,.18); padding: 9px 0; overflow: hidden; }
.ticker-inner { display: flex; align-items: center; gap: 40px;
                white-space: nowrap; animation: tick 38s linear infinite; }
.ticker-inner:hover { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker-label { background: var(--red); color: #fff; padding: 3px 10px;
                font-family: var(--f-mono); font-size: .73em; letter-spacing: 2px;
                border-radius: 2px; flex-shrink: 0; }
.ticker-item { font-size: .81em; color: var(--text); flex-shrink: 0; }

/* ── HERO ── */
.hero { min-height: 100vh; padding-top: var(--nav-h); display: flex; align-items: center;
        position: relative; overflow: hidden;
        background: radial-gradient(ellipse at 15% 55%,rgba(0,80,160,.18) 0%,transparent 60%),
                    radial-gradient(ellipse at 85% 45%,rgba(0,212,255,.06) 0%,transparent 55%),
                    var(--bg); }
.hero::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(0,212,255,.025) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,212,255,.025) 1px,transparent 1px);
  background-size: 55px 55px; }
.hero-title { font-size: clamp(1.95em,5vw,4.2em); font-weight: 700; }
.hero-title .hl { color: var(--cyan); text-shadow: 0 0 28px rgba(0,212,255,.38); }
.hero-sub { color: var(--muted); font-size: clamp(.88em,2vw,1.08em);
            font-weight: 300; margin: 16px 0 26px; }
.hero-stats { display: flex; gap: 20px; flex-wrap: wrap;
              padding-top: 24px; border-top: 1px solid var(--border); margin-top: 32px; }
.stat-val { font-family: var(--f-mono); font-size: clamp(1.3em,3vw,2em);
            color: var(--cyan); display: block; text-shadow: 0 0 14px rgba(0,212,255,.45); }
.stat-lbl { font-size: .74em; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }

/* ── SECTIONS ── */
.section { padding: clamp(40px,6vw,82px) 0; }
.section-title { font-size: clamp(1.55em,3vw,2.4em); font-weight: 700;
                 position: relative; padding-bottom: 12px; }
.section-title::after { content:''; position:absolute; bottom:0; left:0;
                         width: 48px; height: 3px;
                         background: linear-gradient(90deg,var(--cyan),transparent); }
.section-sub { color: var(--muted); margin-top: 10px; font-size: .96em; }

/* ── SEVERITY ── */
.sev { display:inline-block; padding:2px 8px; border-radius:3px; font-family:var(--f-mono);
       font-size:.69em; font-weight:700; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.sev-critical { background:rgba(255,0,51,.15);  color:#ff0033; border:1px solid rgba(255,0,51,.3); }
.sev-high     { background:rgba(255,68,0,.15);   color:#ff4400; border:1px solid rgba(255,68,0,.3); }
.sev-medium   { background:rgba(255,170,0,.15);  color:#ffaa00; border:1px solid rgba(255,170,0,.3); }
.sev-low      { background:rgba(0,170,68,.15);   color:#00aa44; border:1px solid rgba(0,170,68,.3); }
.sev-info     { background:rgba(0,212,255,.1);   color:var(--cyan); border:1px solid rgba(0,212,255,.25); }

/* ── CARDS ── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
        padding: 22px; position: relative; overflow: hidden;
        transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.card:hover { border-color: rgba(0,212,255,.32); box-shadow: 0 6px 28px rgba(0,212,255,.08); transform: translateY(-2px); }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px;
                background:linear-gradient(90deg,transparent,var(--cyan),transparent);
                opacity:0; transition: opacity var(--t); }
.card:hover::before { opacity:1; }
.card.no-hover:hover { transform:none; border-color:var(--border); box-shadow:none; }
.card.no-hover::before { display:none; }

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn { font-family: var(--f-head); font-weight: 600; letter-spacing: 1px;
       text-transform: uppercase; border: none; border-radius: var(--r-sm);
       padding: 10px 22px; cursor: pointer; transition: all var(--t);
       display: inline-flex; align-items: center; justify-content: center;
       gap: 7px; font-size: .86em; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.btn-primary { background: linear-gradient(135deg,#00448a,var(--cyan)); color: #fff;
               box-shadow: 0 3px 14px rgba(0,212,255,.18); }
.btn-primary:hover { box-shadow: 0 4px 22px rgba(0,212,255,.38); transform: translateY(-1px); color: #fff; }
.btn-outline { background: transparent; color: var(--cyan); border: 1.5px solid var(--cyan); }
.btn-outline:hover { background: var(--cyan); color: var(--bg); }
.btn-danger  { background: linear-gradient(135deg,#7a0020,var(--red)); color: #fff; }
.btn-danger:hover  { box-shadow: 0 4px 18px rgba(255,51,102,.35); transform: translateY(-1px); color: #fff; }
.btn-ghost  { background: var(--card2); color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover  { color: var(--cyan); border-color: var(--cyan); }
.btn-sm  { padding: 6px 13px; font-size: .78em; }
.btn-xs  { padding: 4px 10px; font-size: .74em; }
.btn-block { width: 100%; justify-content: center; padding: 12px; }

/* ════════════════════════════════════════════
   FORMS  —  Professional upgrade
   ════════════════════════════════════════════ */
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }

/* Label */
.form-group label,
label.field-label {
  display: block; color: var(--muted);
  font-size: .72em; letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 7px; font-family: var(--f-head); font-weight: 600;
}

/* Input / select / textarea base */
.form-ctrl {
  width: 100%;
  background: rgba(13,31,60,.7);
  border: 1.5px solid var(--border);
  color: var(--text); border-radius: var(--r-sm);
  padding: 11px 14px; font-family: var(--f-body); font-size: .92em;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  outline: none; -webkit-appearance: none; appearance: none;
  backdrop-filter: blur(4px);
}
.form-ctrl:hover  { border-color: rgba(0,212,255,.4); background: rgba(13,31,60,.9); }
.form-ctrl:focus  { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,.1);
                     background: rgba(13,31,60,1); }
.form-ctrl::placeholder { color: rgba(106,138,170,.5); }
.form-ctrl:disabled { opacity: .5; cursor: not-allowed; }

/* Input icon wrapper */
.input-wrap { position: relative; }
.input-wrap .input-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%);
                          color:var(--muted); font-size:.9em; pointer-events:none; }
.input-wrap .form-ctrl  { padding-left: 36px; }

/* Select arrow */
select.form-ctrl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236a8aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px; cursor: pointer;
}
select.form-ctrl option { background: var(--card2); color: var(--text); }

/* Textarea */
textarea.form-ctrl { resize: vertical; min-height: 90px; }

/* Checkbox / radio  */
.check-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-label input[type=checkbox],
.check-label input[type=radio]   { width:16px; height:16px; flex-shrink:0; margin-top:3px;
                                    accent-color: var(--cyan); cursor:pointer; }
.check-label span { font-size: .87em; color: var(--muted); line-height: 1.5; }

/* Form section header */
.form-section-head {
  font-family: var(--f-head); font-size: 1.02em; color: var(--cyan);
  font-weight: 700; letter-spacing: 1px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
  margin-bottom: 18px; margin-top: 6px;
  display: flex; align-items: center; gap: 8px;
}

/* Field hint */
.field-hint { font-size: .76em; color: var(--muted); margin-top: 5px; line-height: 1.4; }

/* Upload zone */
.upload-zone {
  background: rgba(13,31,60,.6); border: 2px dashed var(--border); border-radius: var(--r);
  padding: 22px; text-align: center; cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.upload-zone:hover { border-color: var(--cyan); background: rgba(0,212,255,.04); }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-zone .uz-icon { font-size: 2em; margin-bottom: 8px; }
.upload-zone .uz-label { color: var(--cyan); font-size: .86em; margin-bottom: 4px; }
.upload-zone .uz-hint  { color: var(--muted); font-size: .74em; }

/* ════════════════════════════════════════════
   ALERTS
   ════════════════════════════════════════════ */
.ciic-alert { border-radius: var(--r-sm); padding: 12px 15px; font-size: .87em;
              display: flex; align-items: flex-start; gap: 10px;
              margin-bottom: 16px; border: 1px solid; line-height: 1.5; }
.ciic-alert > span:first-child { flex-shrink:0; margin-top:1px; }
.ciic-alert-success { background:rgba(0,255,136,.07);  border-color:rgba(0,255,136,.25);  color:var(--green); }
.ciic-alert-error   { background:rgba(255,51,102,.07); border-color:rgba(255,51,102,.25); color:#ff7799; }
.ciic-alert-info    { background:rgba(0,212,255,.07);  border-color:rgba(0,212,255,.25);  color:var(--cyan); }
.ciic-alert-warning { background:rgba(255,170,0,.07);  border-color:rgba(255,170,0,.25);  color:var(--yellow); }

/* ── TABLES ── */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r); }
.tbl { width:100%; border-collapse:collapse; font-size:.87em; min-width:480px; }
.tbl th { background:var(--card2); color:var(--cyan); font-family:var(--f-head); font-size:.73em;
          letter-spacing:1px; text-transform:uppercase; padding:11px 14px;
          border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
.tbl td { padding:11px 14px; border-bottom:1px solid var(--border2); color:var(--text); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(0,212,255,.025); }

/* ── BADGES & TAGS ── */
.badge { display:inline-block; padding:3px 9px; border-radius:3px; font-family:var(--f-mono);
         font-size:.67em; text-transform:uppercase; letter-spacing:1px;
         border:1px solid; white-space:nowrap; }
.badge-active    { background:rgba(0,255,136,.1);  color:var(--green);  border-color:rgba(0,255,136,.25); }
.badge-pending   { background:rgba(255,170,0,.1);  color:var(--yellow); border-color:rgba(255,170,0,.25); }
.badge-rejected  { background:rgba(255,51,102,.1); color:var(--red);    border-color:rgba(255,51,102,.25); }
.badge-suspended { background:rgba(150,80,0,.15);  color:#cc8800;       border-color:rgba(150,80,0,.3); }
.badge-open      { background:rgba(255,51,102,.1); color:var(--red);    border-color:rgba(255,51,102,.25); }
.badge-closed    { background:rgba(0,255,136,.1);  color:var(--green);  border-color:rgba(0,255,136,.25); }
.tag { display:inline-block; background:var(--card2); border:1px solid var(--border);
       color:var(--muted); padding:2px 9px; border-radius:12px; font-size:.76em; white-space:nowrap; }

/* ════════════════════════════════════════════
   AUTH PAGES  —  Full professional redesign
   ════════════════════════════════════════════ */
.auth-page {
  min-height: 100dvh; display: flex;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(0,80,160,.15) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 20%,rgba(0,212,255,.07) 0%,transparent 45%),
    var(--bg);
  position: relative; overflow: hidden;
}
.auth-page::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(0,212,255,.02) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,212,255,.02) 1px,transparent 1px);
  background-size: 60px 60px;
}
.auth-panel {
  width: 100%; max-width: 460px; margin: auto; padding: 24px 20px; position: relative; z-index: 1;
}
.auth-logo-wrap { text-align: center; margin-bottom: 32px; }
.auth-logo { font-family: var(--f-head); font-size: 2.1em; font-weight: 700;
             color: #fff; letter-spacing: 3px; display: inline-block; }
.auth-logo span { color: var(--cyan); }
.auth-title { font-family: var(--f-head); font-size: 1.45em; color: #fff; margin-top: 8px; }
.auth-sub   { color: var(--muted); font-size: .88em; margin-top: 5px; }

.auth-card {
  background: rgba(10,21,32,.92); border: 1px solid rgba(0,212,255,.15);
  border-radius: var(--r); padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(0,212,255,.05);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.auth-footer-link { text-align: center; margin-top: 18px; font-size: .86em; color: var(--muted); }

/* Password show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap .form-ctrl { padding-right: 44px; }
.pw-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%);
             background:none; border:none; color:var(--muted); cursor:pointer;
             font-size:.9em; transition:color var(--t); padding:4px; }
.pw-toggle:hover { color: var(--cyan); }

/* Strength bar */
.pw-strength { margin-top: 7px; }
.pw-strength-bar { height: 3px; border-radius: 2px; transition: width .3s, background .3s; background: var(--border); }
.pw-strength-label { font-size: .73em; margin-top: 4px; }

/* ════════════════════════════════════════════
   DASHBOARD  SHELL
   ════════════════════════════════════════════ */
.dash-wrap { display: flex; min-height: 100dvh; }

/* Sidebar */
.sidebar {
  width: var(--sb-w); min-height: 100dvh;
  background: linear-gradient(180deg, #070f18, #060d15);
  border-right: 1px solid var(--border);
  position: fixed; left: 0; top: 0;
  display: flex; flex-direction: column;
  z-index: 300; overflow-y: auto; overscroll-behavior: contain;
  transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s;
}
.sidebar-logo { font-family: var(--f-head); font-size: 1.1em; font-weight: 700;
                color: #fff; letter-spacing: 2px; padding: 18px 20px;
                border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sidebar-logo span { color: var(--cyan); }
.sidebar-user { padding: 14px 18px; border-bottom: 1px solid var(--border);
                display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--card2);
          border: 2px solid var(--cyan); display: flex; align-items: center;
          justify-content: center; font-size: .95em; overflow: hidden; flex-shrink: 0; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.u-name { font-size: .86em; font-weight: 600; color: #fff; line-height: 1.3; }
.u-id   { font-size: .69em; color: var(--cyan); font-family: var(--f-mono); }
.sidebar-nav { flex: 1; padding: 10px 0; }
.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 18px;
                 color: var(--muted); font-family: var(--f-head); font-size: .84em;
                 letter-spacing: 1px; border-left: 3px solid transparent;
                 transition: all var(--t); }
.sidebar-nav a:hover, .sidebar-nav a.active {
  color: var(--cyan); background: rgba(0,212,255,.06); border-left-color: var(--cyan); }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:299;
                   backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.sidebar-overlay.active { display:block; }

/* Main content */
.main { margin-left: var(--sb-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
.topbar { background: var(--card); border-bottom: 1px solid var(--border);
          height: 60px; padding: 0 20px; display: flex; align-items: center;
          justify-content: space-between; position: sticky; top: 0; z-index: 100;
          gap: 12px; flex-shrink: 0; box-shadow: 0 2px 12px rgba(0,0,0,.2); }
.topbar-title { font-family: var(--f-head); font-size: 1.05em; color: #fff;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#sb-toggle { display:none; background:none; border:none; color:var(--muted); font-size:1.2em;
             cursor:pointer; padding:4px 8px; border-radius:var(--r-sm); flex-shrink:0;
             transition: color var(--t), background var(--t); }
#sb-toggle:hover { color:var(--cyan); background:var(--card2); }
.page-body { padding: clamp(14px,2.5vw,26px); flex:1; }

/* ── STAT CARDS ── */
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
             padding:18px 16px 22px; position:relative; overflow:hidden;
             transition:border-color var(--t), box-shadow var(--t); }
.stat-card:hover { border-color:var(--accent,var(--cyan)); box-shadow:0 4px 20px rgba(0,0,0,.25); }
.stat-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--accent,var(--cyan)); }
.stat-num { font-family:var(--f-mono); font-size:clamp(1.5em,3vw,2.1em); font-weight:700; color:#fff; }
.stat-lbl { color:var(--muted); font-size:.79em; margin-top:4px; }
.stat-ico { position:absolute; right:14px; top:14px; font-size:1.65em; opacity:.12; }

/* ── MODAL ── */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:1065;
            align-items:flex-start; justify-content:center; padding:16px; overflow-y:auto; }
.modal-bg.open { display:flex; }

/* Bootstrap 5 sets .modal { display:none; position:fixed; z-index:1055; width:100%; height:100% }.
   Our .modal is the inner card div — override Bootstrap so it stays visible and positioned correctly.
   style.css loads AFTER Bootstrap so same-specificity rules here take precedence. */
.modal-bg .modal {
  display: block;
  position: relative;
  top: auto; left: auto;
  z-index: 1;
  height: auto;
  overflow: hidden;
  max-height: 90dvh;
  overflow-y: auto;
}
.modal { background:var(--card); border:1px solid rgba(0,212,255,.35); border-radius:var(--r);
         max-width:620px; width:100%; box-shadow:0 0 60px rgba(0,212,255,.2); margin:auto; flex-shrink:0; }
.modal-head { padding:16px 22px; border-bottom:1px solid var(--border); display:flex;
              align-items:center; justify-content:space-between;
              position:sticky; top:0; background:var(--card); z-index:2; flex-shrink:0; }
.modal-title { font-family:var(--f-head); color:var(--cyan); font-size:1.05em; }
.modal-close { cursor:pointer; color:var(--muted); font-size:1.25em; line-height:1; width:30px; height:30px;
               display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0;
               transition:all var(--t); border:none; background:none; }
.modal-close:hover { background:rgba(255,255,255,.08); color:#fff; }
.modal-body { padding:20px 22px; overflow-y:auto; }
.modal-foot { padding:14px 22px; border-top:1px solid var(--border);
              display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;
              position:sticky; bottom:0; background:var(--card); z-index:2; flex-shrink:0; }

/* ── FOOTER ── */
.footer { background:#030709; border-top:1px solid var(--border); padding:clamp(36px,6vw,60px) 0 20px; }
.footer-brand { font-family:var(--f-head); font-size:1.45em; color:#fff; font-weight:700; letter-spacing:2px; }
.footer-brand span { color:var(--cyan); }
.footer-links h6 { font-family:var(--f-head); color:var(--cyan); letter-spacing:2px; font-size:.74em; text-transform:uppercase; margin-bottom:12px; }
.footer-links ul { list-style:none; padding:0; }
.footer-links ul li { margin-bottom:7px; }
.footer-links ul li a { color:var(--muted); font-size:.86em; }
.footer-links ul li a:hover { color:var(--cyan); }
.footer-bottom { border-top:1px solid var(--border); margin-top:30px; padding-top:16px;
                 color:var(--muted); font-size:.82em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ── REGISTER PAGE ── */
.register-page { min-height:100dvh; background:
    radial-gradient(ellipse at top left,rgba(0,80,160,.12) 0%,transparent 50%),
    radial-gradient(ellipse at bottom right,rgba(0,212,255,.06) 0%,transparent 50%), var(--bg); }

/* Membership type cards on register */
.mtype-card { background:var(--card2); border:2px solid var(--border); border-radius:var(--r);
              padding:16px; cursor:pointer; transition:all var(--t); }
.mtype-card:hover { border-color:rgba(0,212,255,.4); }
.mtype-card.selected { border-color: currentColor; background:rgba(0,212,255,.05); }

/* ── UTILITY ── */
.text-cyan   { color:var(--cyan)   !important; }
.text-green  { color:var(--green)  !important; }
.text-red    { color:var(--red)    !important; }
.text-yellow { color:var(--yellow) !important; }
.text-muted  { color:var(--muted)  !important; }
.text-white  { color:#fff          !important; }
.text-center { text-align:center   !important; }
.mono   { font-family:var(--f-mono) !important; }
.w-100  { width:100% !important; }
.h-100  { height:100% !important; }
.d-flex { display:flex !important; }
.d-block{ display:block !important; }
.d-none { display:none !important; }
.align-items-center        { align-items:center  !important; }
.align-items-start         { align-items:flex-start !important; }
.justify-content-between   { justify-content:space-between !important; }
.justify-content-center    { justify-content:center !important; }
.flex-wrap  { flex-wrap:wrap !important; }
.flex-column{ flex-direction:column !important; }
.flex-1     { flex:1 !important; }
.gap-1 { gap:4px; } .gap-2 { gap:8px; } .gap-3 { gap:14px; } .gap-4 { gap:20px; }
.mb-0 { margin-bottom:0   !important; }
.mb-2 { margin-bottom:10px!important; }
.mb-3 { margin-bottom:16px!important; }
.mb-4 { margin-bottom:22px!important; }
.mt-2 { margin-top:10px   !important; }
.mt-3 { margin-top:16px   !important; }
.mt-4 { margin-top:22px   !important; }
.p-0  { padding:0 !important; }
.overflow-x-auto { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.position-relative { position:relative; }
.fade-in  { animation:fadeIn .45s ease forwards; opacity:0; }
@keyframes fadeIn { to { opacity:1; } }
.hr-glow { border:none; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin:22px 0; }
.spin { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════
   RESPONSIVE  ≤ 991px  (tablet)
   ════════════════════════════════════════════ */
@media (max-width: 991px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.7); }
  .main { margin-left:0; }
  #sb-toggle { display:block; }
  .nav-links-desktop { display:none !important; }
  #mob-btn { display:block; }
  .card { padding:18px; }
  .page-body { padding:16px; }
  .d-none-mobile { display:none !important; }
}

/* ════════════════════════════════════════════
   RESPONSIVE  ≤ 600px  (phone)
   ════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --nav-h:58px; }
  .hero { padding-top:calc(var(--nav-h) + 12px); padding-bottom:40px; align-items:flex-start; }
  .hero-stats { gap:14px; }
  .section { padding:36px 0; }
  .card { padding:15px; }
  .btn { padding:9px 15px; font-size:.83em; }
  .btn-sm { padding:6px 10px; font-size:.76em; }
  .form-ctrl { padding:10px 12px; font-size:.9em; }
  .auth-card { padding:20px 16px; }
  .auth-panel { padding:20px 14px; }
  .topbar { height:52px; padding:0 12px; }
  .topbar-title { font-size:.93em; }
  .page-body { padding:11px; }
  .modal-body { padding:14px 15px; }
  .modal-foot { padding:11px 15px; }
  .sidebar { width:min(85vw,300px); }
  .footer-bottom { flex-direction:column; text-align:center; }
  .tbl { font-size:.81em; }
  .tbl th,.tbl td { padding:9px 10px; }
  .stat-num { font-size:1.5em; }
  .container { padding:0 14px; }
  .hero-stats > div { min-width:60px; }
}

/* ════════════════════════════════════════════
   RESPONSIVE  ≤ 400px  (small phone)
   ════════════════════════════════════════════ */
@media (max-width: 400px) {
  .hero-title { font-size:1.72em; }
  .section-title { font-size:1.4em; }
  .stat-val { font-size:1.22em; }
  .btn { padding:8px 13px; }
  .nav-brand { font-size:1.2em; }
  .card { padding:13px; }
  .auth-card { padding:16px 13px; }
}

/* ════════════════════════════════════════════
   RESPONSIVE  ≥ 1400px
   ════════════════════════════════════════════ */
@media (min-width:1400px) {
  :root { --sb-w:270px; }
  .page-body { padding:28px; }
  .card { padding:24px; }
}

/* ── PRINT ── */
@media print {
  .sidebar,.topbar,.ciic-nav,#mob-btn,.sidebar-overlay,.ticker { display:none !important; }
  .main { margin-left:0 !important; }
  .page-body { padding:0 !important; }
  .card { border:1px solid #ccc !important; background:#fff !important;
          box-shadow:none !important; transform:none !important; }
  body { background:#fff !important; color:#000 !important; }
}

/* ════════════════════════════════════════════
   CIIC v3 — Enhanced Responsive System
   Mobile-first · Android · PWA
   ════════════════════════════════════════════ */

/* ── Dynamic logo ── */
.nav-logo-img  { display:block; max-height:40px; max-width:160px; object-fit:contain; }
.sidebar-logo-wrap { padding:16px 18px; border-bottom:1px solid var(--border);
                     display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ── Sidebar user info clip on small ── */
.sb-user-info  { min-width:0; }
.sb-user-info .u-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }

/* ── Admin sidebar purple theme ── */
.admin-sidebar { background:linear-gradient(180deg,#07030f,#0d0520) !important;
                 border-right-color:#2a0a4a !important; }
.admin-sidebar .sidebar-logo,
.admin-sidebar .sidebar-logo-wrap { border-bottom-color:#2a0a4a; }
.admin-sidebar .sidebar-nav a.active { color:#bb66ff !important; background:rgba(187,102,255,.07); border-left-color:#bb66ff !important; }
.admin-sidebar .sidebar-nav a:hover  { color:#bb66ff !important; background:rgba(187,102,255,.05); }

/* ── Safe-area insets (iPhone X / Android notch) ── */
@supports (padding:max(0px)) {
  .ciic-nav   { padding-left:max(0px,env(safe-area-inset-left)); padding-right:max(0px,env(safe-area-inset-right)); }
  .sidebar    { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .footer     { padding-bottom:max(20px,env(safe-area-inset-bottom)); }
  #mob-nav    { padding-bottom:max(14px,env(safe-area-inset-bottom)); }
  .page-body  { padding-bottom:max(14px,env(safe-area-inset-bottom)); }
}

/* ── Touch targets (WCAG 2.5.5 — 44px min) ── */
.btn           { min-height:44px; }
.btn-sm        { min-height:38px; }
.btn-xs        { min-height:32px; }
.nav-link      { min-height:44px; display:inline-flex; align-items:center; }
#mob-btn       { min-width:44px; min-height:44px; }
#sb-toggle     { min-width:44px; min-height:44px; }
.sidebar-nav a { min-height:44px; display:flex; align-items:center; }

/* ── Form inputs — prevent iOS zoom (font-size ≥ 16px on mobile) ── */
@media (max-width: 767px) {
  .form-ctrl          { font-size:16px !important; }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select              { font-size:16px !important; }
}

/* ── Card grid on small screens ── */
@media (max-width:575px) {
  .row.g-4  { --bs-gutter-x:12px; --bs-gutter-y:12px; }
  .row.g-3  { --bs-gutter-x:10px; --bs-gutter-y:10px; }
}

/* ── Improved table responsiveness ── */
.table-wrap      { border-radius:var(--r); overflow:hidden; }
.table-wrap table{ min-width:0; }
@media (max-width:640px) {
  .tbl-responsive-cards         { display:block; }
  .tbl-responsive-cards thead   { display:none; }
  .tbl-responsive-cards tbody tr{ display:block; border:1px solid var(--border); border-radius:var(--r); margin-bottom:10px; padding:12px; background:var(--card); }
  .tbl-responsive-cards td      { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border:none; border-bottom:1px solid var(--border2); }
  .tbl-responsive-cards td:last-child { border-bottom:none; }
  .tbl-responsive-cards td::before { content:attr(data-label); font-size:.7em; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-family:var(--f-head); flex-shrink:0; margin-right:10px; }
}

/* ── Stat cards — tighter on mobile ── */
@media (max-width:480px) {
  .stat-card      { padding:14px 12px 18px; }
  .stat-num       { font-size:1.65em; }
  .stat-ico       { font-size:1.3em; }
}

/* ── Modal full-screen on tiny screens ── */
@media (max-width:480px) {
  .modal-bg       { padding:0; align-items:flex-end; }
  .modal-bg .modal { max-width:100%; border-radius:var(--r) var(--r) 0 0; }
  .modal-body     { max-height:70dvh; overflow-y:auto; }
}

/* ── Better auth card on phones ── */
@media (max-width:400px) {
  .auth-panel     { padding:16px 10px; }
  .auth-card      { padding:16px 12px; }
}

/* ── Horizontal scroll on page-body ── */
.page-body { overflow-x: hidden; }

/* ── Sidebar collapsed width on tablet ── */
@media (max-width:991px) {
  .sidebar        { width:min(82vw, 290px); }
}

/* ── Topbar title overflow fix ── */
.topbar-title { max-width: calc(100vw - 160px); }

/* ── Membership type cards ── */
.mtype-card     { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* ── Ticker pause on touch ── */
@media (hover:none) {
  .ticker-inner { animation-play-state: running !important; }
}

/* ── Print: favicon/logo ── */
@media print {
  .nav-logo-img { max-height:32px; }
}

/* ── PWA display-mode standalone nav adjustment ── */
@media (display-mode: standalone) {
  .ciic-nav { padding-top: env(safe-area-inset-top); height:calc(var(--nav-h) + env(safe-area-inset-top)); }
  body { padding-top: env(safe-area-inset-top); }
}

/* ── Focus visible (keyboard accessibility) ── */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ── Smooth transitions for sidebar open/close ── */
.sidebar { will-change: transform; }
.main    { will-change: margin-left; }

/* ── Upload zone on mobile ── */
@media (max-width:600px) {
  .upload-zone { padding:18px 12px; }
  .upload-zone .uz-icon { font-size:1.6em; }
}

/* ── Settings tab buttons responsive ── */
#settings-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap !important; padding-bottom:4px; }
@media (max-width:540px) {
  #settings-tabs { gap:4px !important; }
  .tab-btn { font-size:.78em !important; padding:7px 10px !important; white-space:nowrap; }
}

/* ── Better select option styling on Android ── */
select.form-ctrl { -webkit-appearance:none; appearance:none; }

/* ── Eliminate 300ms tap delay ── */
a, button, [role="button"], input, select, textarea, label {
  touch-action: manipulation;
}

/* ── Loading skeleton animation ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--card2) 25%, var(--card) 50%, var(--card2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}

/* ── Notification badge ── */
.notif-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:#fff;
  font-size:.6em; font-family:var(--f-mono);
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--card);
}

/* ── Improved hero on large screens ── */
@media (min-width:1200px) {
  .hero-title { font-size:4.4em; }
}

/* ── Cyber grid background (subtle) ── */
.cyber-grid::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,212,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.028) 1px, transparent 1px);
  background-size:52px 52px;
}

/* ════════════════════════════════════════════
   v3.1 — Bug Fixes
   ════════════════════════════════════════════ */

/* ── Card animation: CSS-only, NEVER sets opacity:0 inline ── */
/* no-anim = opt-out for table cards and modals */
.card.no-anim { animation: none !important; }

@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-animate-in {
  animation: cardFadeUp 0.35s ease both;
}

/* ── Modal: mobile bottom-sheet layout ── */
@media (max-width: 600px) {
  .modal-bg { align-items: flex-end; padding: 0; }
  /* Use .modal-bg .modal for higher specificity than Bootstrap's .modal { display:none } */
  .modal-bg .modal {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    border-radius: var(--r) var(--r) 0 0;
    max-height: 92dvh;
    overflow: hidden;
  }
  .modal-head { flex-shrink: 0; position: sticky; top: 0; z-index: 2; }
  .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: none; }
  .modal-foot { flex-shrink: 0; position: sticky; bottom: 0; background: var(--card); }
}

/* ── Fix: datetime-local input styling on mobile ── */
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
}

/* ── Fix: form fields clear red border on input ── */
.form-ctrl:focus { border-color: var(--cyan) !important; }

/* ── Fix: submit button loading state ── */
button[disabled] { opacity: .6; cursor: not-allowed !important; }

/* ── Ensure topbar action buttons are always visible ── */
.topbar .btn { position: relative; z-index: 1; }

/* ── Empty state cards always visible (no animation override) ── */
.card.text-center.no-anim,
td > .btn,
td > button { opacity: 1 !important; }

/* ── Remove animation from cards inside modals ── */
.modal-bg .card,
.modal-bg .modal .card { animation: none !important; opacity: 1 !important; }

/* ── Fix: alert auto-dismiss doesn't affect flash on page load ── */
.ciic-alert { opacity: 1; }