/* ============================================================
   VPSCLOUD.VN — main.css  (loaded by ALL layouts)
   Class names match exactly with HTML in views/layouts/
   ============================================================ */

:root {
  --primary:    #2563eb;
  --primary-d:  #1d4ed8;
  --primary-l:  #dbeafe;
  --accent:     #0ea5e9;
  --success:    #16a34a;
  --success-l:  #dcfce7;
  --warning:    #d97706;
  --warning-l:  #fef3c7;
  --danger:     #dc2626;
  --danger-l:   #fee2e2;
  --info:       #0891b2;
  --info-l:     #cffafe;
  --dark:       #0f172a;
  --g900:       #111827;
  --g800:       #1f2937;
  --g700:       #374151;
  --g600:       #4b5563;
  --g500:       #6b7280;
  --g400:       #9ca3af;
  --g300:       #d1d5db;
  --g200:       #e5e7eb;
  --g100:       #f3f4f6;
  --g50:        #f9fafb;
  --white:      #ffffff;
  --font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:       'JetBrains Mono','Fira Code',monospace;
  --r:          .5rem;
  --r-lg:       .875rem;
  --r-xl:       1.25rem;
  --sh:         0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --sh-md:      0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.05);
  --sh-lg:      0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.05);
  --sh-xl:      0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.04);
  --t:          all .18s ease;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--g900);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none;transition:var(--t)}
a:hover{color:var(--primary-d)}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4,h5,h6{line-height:1.25;color:var(--dark)}
h1{font-size:clamp(1.875rem,4vw,3rem);font-weight:800}
h2{font-size:clamp(1.375rem,2.5vw,2rem);font-weight:700}
h3{font-size:1.125rem;font-weight:600}
h4{font-size:1rem;font-weight:600}
p{color:var(--g600)}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* ══════════════════════════════════════════
   NAVBAR  (.navbar.navbar-main)
══════════════════════════════════════════ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;height:64px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--g200);transition:box-shadow .2s;
}
.navbar.scrolled{box-shadow:var(--sh-md)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.navbar-brand{display:flex;align-items:center;gap:.625rem;font-size:1.25rem;font-weight:800;color:var(--dark)}
.navbar-brand img{width:32px;height:32px}
.navbar-brand span{color:var(--primary)}
.navbar-menu{display:flex;align-items:center;gap:.125rem}
.nav-link{padding:.5rem .875rem;border-radius:var(--r);font-size:.9375rem;font-weight:500;color:var(--g700);transition:var(--t);display:block}
.nav-link:hover,.nav-link.active{background:var(--g100);color:var(--primary)}
.navbar-actions{display:flex;align-items:center;gap:.625rem}
.navbar-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;padding:.375rem;background:none;border:none;cursor:pointer;border-radius:var(--r);
}
.navbar-toggle span{display:block;width:22px;height:2px;background:var(--g700);border-radius:2px;transition:var(--t)}

/* ══════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════ */
.hero{
  padding:130px 0 90px;
  background:linear-gradient(160deg,#eff6ff 0%,#f0f9ff 40%,#f0fdf4 100%);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(37,99,235,.1) 0%,transparent 65%);
}
.hero-content{position:relative;z-index:1;max-width:780px;margin:0 auto;text-align:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--primary-l);color:var(--primary);
  padding:.375rem 1rem;border-radius:999px;font-size:.8125rem;font-weight:600;margin-bottom:1.5rem;
}
.hero h1{margin-bottom:1.25rem}
.hero p{font-size:1.125rem;max-width:560px;margin:0 auto 2rem}
.hero-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.hero-stats{
  display:flex;justify-content:center;gap:3rem;
  margin-top:4rem;padding-top:3rem;border-top:1px solid var(--g200);flex-wrap:wrap;
}
.hero-stats .stat strong{display:block;font-size:1.75rem;font-weight:800;color:var(--dark)}
.hero-stats .stat span{font-size:.875rem;color:var(--g500)}
.hero-visual{display:flex;justify-content:center;margin-top:3rem}

/* hero mockup card */
.hero-card-mockup{
  background:var(--white);border-radius:var(--r-xl);padding:1.5rem;
  box-shadow:var(--sh-xl);width:340px;max-width:100%;border:1px solid var(--g200);
}
.mockup-bar{height:8px;background:var(--g100);border-radius:999px;margin-bottom:.875rem}
.mockup-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:999px}
.mockup-url{font-size:.75rem;color:var(--g400);font-family:var(--mono);margin-bottom:1rem}
.mockup-divider{height:1px;background:var(--g100);margin:.75rem 0}
.mockup-content{display:flex;flex-direction:column;gap:.5rem}
.mockup-row{display:flex;justify-content:space-between;font-size:.8125rem}
.mockup-stat{font-weight:600}
.mockup-stat.green{color:var(--success)}
.mockup-stat.blue{color:var(--primary)}
.mockup-stat.orange{color:var(--warning)}

/* ══════════════════════════════════════════
   SECTION
══════════════════════════════════════════ */
.section{padding:80px 0}
.section-header{text-align:center;margin-bottom:3rem}
.section-header .label{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:.5rem}
.section-header h2{margin-bottom:.75rem}
.section-header p{max-width:540px;margin:0 auto;font-size:1.0625rem}

/* ══════════════════════════════════════════
   PLANS / PRICING
══════════════════════════════════════════ */
.plans-grid,.plans-grid-full{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.5rem;
}
.plan-card{
  background:var(--white);border:2px solid var(--g200);border-radius:var(--r-xl);
  padding:2rem;position:relative;transition:var(--t);
}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.plan-card.plan-featured{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.08)}
.plan-badge{
  position:absolute;top:-1px;right:1.5rem;
  background:var(--primary);color:#fff;
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.25rem .75rem;border-radius:0 0 .5rem .5rem;
}
.plan-header{margin-bottom:1.25rem}
.plan-header h3{font-size:1rem;color:var(--dark);margin-bottom:.25rem}
.plan-header p{font-size:.875rem;color:var(--g500);margin:0}
.plan-price{margin-bottom:1.25rem}
.price-amount{font-size:1.875rem;font-weight:800;color:var(--dark)}
.price-unit{font-size:.875rem;color:var(--g500)}
.price-monthly,.monthly-price{font-size:.8125rem;color:var(--g400);margin-top:.125rem;display:block}
.price-hourly,.hourly-price{font-size:.8125rem;color:var(--g400);margin-top:.125rem;display:none}
.plan-specs{
  display:flex;flex-direction:column;gap:.5rem;
  padding:1rem 0;border-top:1px solid var(--g100);border-bottom:1px solid var(--g100);margin-bottom:1.25rem;
}
.plan-specs .spec{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--g700)}
.plan-specs .spec i{color:var(--primary);width:16px;text-align:center;flex-shrink:0}
.plan-features{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1.5rem}
.plan-features li{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--g600)}
.plan-features li::before{content:'✓';color:var(--success);font-weight:700;flex-shrink:0}
.billing-toggle{display:flex;justify-content:center;gap:.75rem;margin-bottom:2.5rem}
.toggle-btn{
  padding:.5rem 1.5rem;border-radius:999px;font-weight:600;font-size:.9375rem;
  border:2px solid var(--g300);background:transparent;color:var(--g600);cursor:pointer;transition:var(--t);
}
.toggle-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}
.toggle-switch{display:flex;align-items:center;gap:.75rem;font-size:.9375rem;color:var(--g700)}
.billing-options,.billing-option-box{margin-top:1rem}
.billing-option{margin-bottom:.75rem}

/* ══════════════════════════════════════════
   FEATURES
══════════════════════════════════════════ */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.feature-card{
  background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);
  padding:1.75rem;transition:var(--t);
}
.feature-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.feature-icon{
  width:48px;height:48px;border-radius:var(--r);
  background:var(--primary-l);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1rem;
}
.feature-card h3{margin-bottom:.375rem}
.features-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}
.feature-detail-item{display:flex;gap:1rem}
.feature-detail-icon{
  width:44px;height:44px;border-radius:var(--r);background:var(--primary-l);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0;margin-top:.125rem;
}
.feature-detail-content h4{margin-bottom:.25rem}
.features-section{padding:80px 0}

/* ══════════════════════════════════════════
   CTA / CONTACT / FAQ
══════════════════════════════════════════ */
.cta-section{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);padding:80px 0;text-align:center}
.cta-box{max-width:600px;margin:0 auto}
.cta-section h2,.cta-box h2{color:#fff;margin-bottom:1rem}
.cta-section p,.cta-box p{color:rgba(255,255,255,.85);font-size:1.125rem;margin-bottom:2rem}
.contact-grid{display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.contact-item{display:flex;gap:1rem;align-items:flex-start}
.contact-icon{width:44px;height:44px;border-radius:var(--r);background:var(--primary-l);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0}
.contact-form-box{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-xl);padding:2rem;box-shadow:var(--sh)}
.pricing-faq,.pricing-preview{max-width:720px;margin:0 auto}
.faq-list{display:flex;flex-direction:column;gap:.75rem}
.faq-item{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:1.125rem 1.25rem;cursor:pointer;font-weight:600;color:var(--dark)}
.faq-answer{padding:0 1.25rem 1.125rem;color:var(--g600);font-size:.9375rem}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer{background:var(--dark);color:var(--g400);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand h3{font-size:1.25rem;color:#fff;margin-bottom:.75rem}
.footer-brand p{font-size:.9375rem;line-height:1.7;margin-bottom:1.25rem;color:var(--g400)}
.footer-social{display:flex;gap:.875rem;margin-top:1rem}
.footer-social a{
  width:36px;height:36px;border-radius:50%;background:#1e293b;
  display:flex;align-items:center;justify-content:center;
  color:var(--g400);transition:var(--t);font-size:1rem;
}
.footer-social a:hover{background:var(--primary);color:#fff}
.footer-links h4{font-size:.9375rem;color:#fff;margin-bottom:1rem}
.footer-links ul{display:flex;flex-direction:column;gap:.5rem}
.footer-links a{font-size:.9375rem;color:var(--g400);transition:var(--t)}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid #1e293b;padding-top:1.5rem;display:flex;justify-content:space-between;font-size:.875rem;flex-wrap:wrap;gap:.75rem}
.footer-bottom p{color:var(--g500);margin:0}

/* ══════════════════════════════════════════
   AUTH  (.auth-body)
══════════════════════════════════════════ */
.auth-body{background:#f0f5ff}
.auth-wrapper{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth-panel-left{
  background:linear-gradient(160deg,#1e3a8a 0%,#1d4ed8 50%,#0369a1 100%);
  padding:3rem;display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.auth-panel-left::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at top right,rgba(255,255,255,.08),transparent 60%)}
.auth-logo{font-size:1.375rem;font-weight:800;color:#fff;position:relative;z-index:1}
.auth-hero{position:relative;z-index:1;margin-top:auto}
.auth-hero h2{font-size:2rem;color:#fff;margin-bottom:.875rem;line-height:1.2}
.auth-hero p{color:rgba(255,255,255,.8);font-size:1rem;margin-bottom:1.5rem}
.auth-features{display:flex;flex-direction:column;gap:.625rem}
.auth-features li{display:flex;align-items:center;gap:.625rem;color:rgba(255,255,255,.9);font-size:.9375rem}
.auth-features i{color:#86efac;font-size:.875rem}
.auth-panel-right{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;background:var(--g50)}
.auth-card{
  width:100%;max-width:420px;background:var(--white);
  border-radius:var(--r-xl);padding:2.25rem 2rem;
  box-shadow:var(--sh-xl);border:1px solid var(--g200);
}
.auth-title{font-size:1.5rem;font-weight:800;color:var(--dark);margin-bottom:.375rem}
.auth-subtitle{color:var(--g500);font-size:.9375rem;margin-bottom:1.75rem}
.auth-switch{text-align:center;margin-top:1.25rem;font-size:.9375rem;color:var(--g600)}
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:var(--g400);font-size:.875rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--g200)}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.625rem 1.375rem;border-radius:var(--r);
  font-weight:600;font-size:.9375rem;border:2px solid transparent;
  cursor:pointer;transition:var(--t);white-space:nowrap;
  text-decoration:none;vertical-align:middle;line-height:1.4;
}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{opacity:.9;color:#fff}
.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning)}
.btn-warning:hover{opacity:.9;color:#fff}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn-danger:hover{opacity:.9;color:#fff}
.btn-outline-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-outline-danger:hover{background:var(--danger);color:#fff}
.btn-secondary{background:var(--g200);color:var(--g700);border-color:var(--g200)}
.btn-secondary:hover{background:var(--g300)}
.btn-link{background:none;border:none;color:var(--primary);padding:0;font-weight:600;cursor:pointer}
.btn-link:hover{color:var(--primary-d)}
.btn-icon{
  width:36px;height:36px;padding:0;justify-content:center;
  background:var(--g100);border:1px solid var(--g200);color:var(--g600);
  border-radius:var(--r);position:relative;
}
.btn-icon:hover{background:var(--g200);color:var(--dark)}
.btn-sm{padding:.375rem 1rem;font-size:.875rem}
.btn-xs{padding:.25rem .75rem;font-size:.8125rem}
.btn-lg{padding:.875rem 2rem;font-size:1.0625rem;border-radius:var(--r-lg)}
.btn-block{width:100%;justify-content:center}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn-back{color:var(--g600);background:none;border:none;font-weight:500;padding:0;cursor:pointer}
.btn-back:hover{color:var(--dark)}
.btn-copy{position:absolute;top:.5rem;right:.5rem}

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-group{margin-bottom:1.125rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem}
label{display:block;font-size:.9375rem;font-weight:600;color:var(--g700);margin-bottom:.375rem}
.required{color:var(--danger);margin-left:.125rem}
.form-control{
  width:100%;padding:.625rem .875rem;
  border:1.5px solid var(--g300);border-radius:var(--r);
  font-size:.9375rem;color:var(--g900);background:var(--white);
  transition:border-color .15s,box-shadow .15s;outline:none;
}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.form-control::placeholder{color:var(--g400)}
.form-control.is-invalid{border-color:var(--danger)}
.form-control-sm{padding:.5rem .75rem;font-size:.875rem}
select.form-control{
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%239ca3af' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.25rem;
}
textarea.form-control{min-height:120px;resize:vertical}
.form-hint{font-size:.8125rem;color:var(--g500);margin-top:.25rem}
.form-error{font-size:.8125rem;color:var(--danger);margin-top:.25rem}
.input-group{position:relative}
.input-group .form-control{padding-left:2.5rem}
.input-group .input-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none}
.input-toggle-pass{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--g400);padding:0}
.input-toggle-pass:hover{color:var(--g600)}
.password-strength{margin-top:.5rem}
.strength-bar{height:4px;background:var(--g200);border-radius:2px;overflow:hidden;margin-bottom:.25rem}
.form-check{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.5rem}
.form-check input[type="checkbox"]{width:16px;height:16px;margin-top:.125rem;cursor:pointer;accent-color:var(--primary);flex-shrink:0}
.check-label{font-size:.9375rem;color:var(--g700);cursor:pointer}
.captcha-notice{font-size:.75rem;color:var(--g400);text-align:center;margin-top:.875rem}
.password-hidden{position:relative}

/* ══════════════════════════════════════════
   ALERTS
══════════════════════════════════════════ */
.alert{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.875rem 1.125rem;border-radius:var(--r);
  border:1px solid transparent;font-size:.9375rem;margin-bottom:1rem;
}
.alert-success{background:var(--success-l);border-color:#86efac;color:#14532d}
.alert-danger{background:var(--danger-l);border-color:#fca5a5;color:#7f1d1d}
.alert-warning{background:var(--warning-l);border-color:#fcd34d;color:#78350f}
.alert-info{background:var(--info-l);border-color:#67e8f9;color:#164e63}
.alert-secondary{background:var(--g100);border-color:var(--g300);color:var(--g700)}
.alert-dismissible{position:relative;padding-right:2.5rem}
.alert-close{position:absolute;top:.75rem;right:.875rem;background:none;border:none;cursor:pointer;font-size:1rem;color:currentColor;opacity:.6;line-height:1}
.alert-close:hover{opacity:1}

/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.badge-success{background:var(--success-l);color:#14532d}
.badge-danger{background:var(--danger-l);color:#7f1d1d}
.badge-warning{background:var(--warning-l);color:#78350f}
.badge-info{background:var(--info-l);color:#164e63}
.badge-primary{background:var(--primary-l);color:#1e3a8a}
.badge-secondary{background:var(--g200);color:var(--g700)}
.badge-sm{font-size:.6875rem;padding:.125rem .5rem}
.badge-xs{font-size:.625rem;padding:.1rem .4rem}
.badge-lg{font-size:.875rem;padding:.3rem .875rem}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.card{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:1.125rem 1.375rem;border-bottom:1px solid var(--g100)}
.card-header h3,.card-header h4{margin:0;font-size:1rem}
.card-body{padding:1.375rem}
.card-danger{border-color:#fca5a5;background:#fff9f9}
.page-hero{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);padding:3rem 0;color:#fff;margin-bottom:2.5rem}
.page-hero h1,.page-hero h2{color:#fff}
.page-hero p{color:rgba(255,255,255,.85);margin:0}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:1rem}
.page-header h2,.page-header h3{margin:0}
.page-header-actions{display:flex;gap:.625rem}

/* ══════════════════════════════════════════
   TABLES
══════════════════════════════════════════ */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.9375rem}
.table th{padding:.75rem 1rem;text-align:left;font-size:.8125rem;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:.04em;background:var(--g50);border-bottom:1px solid var(--g200);white-space:nowrap}
.table td{padding:.875rem 1rem;border-bottom:1px solid var(--g100);color:var(--g700);vertical-align:middle}
.table tbody tr:hover{background:var(--g50)}
.table tbody tr:last-child td{border-bottom:none}
.table-sm th,.table-sm td{padding:.5rem .875rem}
.row-highlight{background:#fffbeb!important}
.row-highlight-warning{background:#fef2f2!important}
.info-table .info-row{display:flex;padding:.625rem 0;border-bottom:1px solid var(--g100)}
.info-table .info-label{width:160px;flex-shrink:0;font-size:.875rem;color:var(--g500);font-weight:500}
.info-table .info-value{flex:1;font-size:.9375rem;color:var(--g900)}
.info-row{display:flex;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--g100)}
.info-label{font-size:.875rem;color:var(--g500);font-weight:500;min-width:140px;flex-shrink:0}
.info-value{font-size:.9375rem;color:var(--g900)}

/* ══════════════════════════════════════════
   FILTER + SEARCH
══════════════════════════════════════════ */
.filter-bar,.filter-form,.filter-inline{display:flex;gap:.625rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.25rem}
.filter-tabs{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:1.25rem}
.filter-tab{padding:.5rem 1rem;border-radius:var(--r);font-size:.875rem;font-weight:600;color:var(--g600);background:var(--g100);border:1.5px solid transparent;cursor:pointer;transition:var(--t);text-decoration:none;display:inline-block}
.filter-tab.active,.filter-tab:hover{background:var(--primary-l);color:var(--primary);border-color:var(--primary)}
.search-form{display:flex;gap:.625rem}

/* ══════════════════════════════════════════
   EMPTY STATES + MISC
══════════════════════════════════════════ */
.empty-state,.empty-page{text-align:center;padding:4rem 2rem;color:var(--g500)}
.empty-state-sm{padding:2rem 1rem}
.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.4}
.empty-state h3,.empty-page h3{color:var(--g700);margin-bottom:.5rem}
.action-buttons{display:flex;gap:.375rem;align-items:center;flex-wrap:wrap}

/* ══════════════════════════════════════════
   TOASTS
══════════════════════════════════════════ */
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.625rem}
.toast{display:flex;align-items:center;justify-content:space-between;gap:.875rem;min-width:280px;max-width:380px;padding:.875rem 1.125rem;border-radius:var(--r-lg);box-shadow:var(--sh-lg);font-size:.9375rem;font-weight:500;transform:translateX(120%);opacity:0;transition:all .28s ease}
.toast.show{transform:translateX(0);opacity:1}
.toast-success{background:#f0fdf4;border:1px solid #86efac;color:#14532d}
.toast-error{background:#fef2f2;border:1px solid #fca5a5;color:#7f1d1d}
.toast-warning{background:#fffbeb;border:1px solid #fcd34d;color:#78350f}
.toast-info{background:#eff6ff;border:1px solid #93c5fd;color:#1e3a8a}
.toast button{background:none;border:none;cursor:pointer;font-size:.875rem;opacity:.6;color:currentColor;flex-shrink:0}
.toast button:hover{opacity:1}

/* ══════════════════════════════════════════
   UTILITY
══════════════════════════════════════════ */
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--g500)!important}.text-primary{color:var(--primary)!important}
.text-success{color:var(--success)!important}.text-danger{color:var(--danger)!important}
.text-warning{color:var(--warning)!important}.text-secondary{color:var(--g500)!important}
.text-sm{font-size:.875rem}.text-xs{font-size:.8125rem}
.text-gradient{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.font-weight-bold{font-weight:700}.font-mono{font-family:var(--mono)}
.d-flex{display:flex}.align-items-end{align-items:flex-end}
.float-right{float:right}.inline{display:inline}
.p-0{padding:0!important}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-5{margin-top:1.25rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.ml-2{margin-left:.5rem}
.col-3{width:25%}.col-4{width:33.333%}.col-6{width:50%}.col-8{width:66.666%}
.done{text-decoration:line-through;opacity:.5}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .navbar-menu{
    display:none;position:fixed;top:64px;left:0;right:0;
    flex-direction:column;background:#fff;padding:1rem;
    border-bottom:1px solid var(--g200);box-shadow:var(--sh-lg);gap:.25rem;z-index:800;
  }
  .navbar-menu.open{display:flex}
  .navbar-toggle{display:flex}
  .hero{padding:100px 0 60px}
  .hero-stats{gap:1.5rem}
  .auth-wrapper{grid-template-columns:1fr}
  .auth-panel-left{display:none}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .plans-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn-lg{width:100%;justify-content:center}
  .auth-card{padding:1.5rem 1.25rem}
  #toast-container{left:1rem;right:1rem;bottom:1rem}
  .toast{min-width:0;width:100%}
}