:root{
  --ink:#0f172a;
  --navy:#0b1f3a;
  --teal:#0f766e;
  --emerald:#059669;
  --muted:#475569;
  --line:#dbe4ee;
  --soft:#eef4f8;
  --panel:#ffffff;
  --panel-2:#f8fbfd;
  --surface:#f3f7fb;
  --text:#0f172a;
  --text-soft:#475569;
  --success:#065f46;
  --warn:#92400e;
  --danger:#991b1b;
  --shadow:0 20px 40px rgba(2,8,23,.08);
  --radius:24px;
  --radius-sm:16px;
  --max:1280px;
}
html[data-theme="dark"]{
  --surface:#08111f;
  --panel:#0f1c2c;
  --panel-2:#122234;
  --text:#e2e8f0;
  --text-soft:#94a3b8;
  --line:#24364d;
  --soft:#0a1627;
  --shadow:0 20px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Segoe UI, Tahoma, Arial, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(15,118,110,.06), transparent 22rem),
    radial-gradient(circle at top left, rgba(11,31,58,.07), transparent 24rem),
    var(--surface);
  color:var(--text);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(var(--max),calc(100% - 2rem));margin-inline:auto}
.surface{padding:2rem 0}
.bg-grid{
  background-image:linear-gradient(to right, rgba(148,163,184,.08) 1px, transparent 1px),linear-gradient(to bottom, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size:24px 24px;
}
.skip-link{position:absolute;inset-inline-start:-9999px;top:auto}
.skip-link:focus{inset-inline-start:1rem;top:1rem;z-index:9999;background:#fff;color:#000;padding:.75rem 1rem;border-radius:12px}
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-bottom:1px solid rgba(148,163,184,.18);
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 0}
.brand{display:flex;align-items:center;gap:.85rem;font-weight:800;letter-spacing:.02em}
.brand img{width:180px;height:auto;max-width:100%;object-fit:contain;flex:0 0 auto}
.brand small{display:block;color:var(--text-soft);font-weight:600}
.nav-shell{display:flex;align-items:center;gap:1rem}
.main-nav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.nav-list{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.main-nav a{
  display:inline-flex;align-items:center;justify-content:center;padding:.65rem .85rem;border-radius:999px;font-weight:650;color:var(--text-soft);
}
.main-nav a:hover,.main-nav a.is-active{background:var(--panel);color:var(--navy);box-shadow:var(--shadow)}
.utility-nav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.select-pill,.utility-link{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:.6rem .8rem;color:var(--text-soft);box-shadow:var(--shadow);
}
.select-pill select{border:none;background:transparent;color:inherit;outline:none}
.icon-btn,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  border:none;border-radius:999px;padding:.78rem 1.1rem;cursor:pointer;
  transition:transform .16s ease, background .2s ease, box-shadow .2s ease;
}
.icon-btn:hover,.button:hover{transform:translateY(-1px)}
.button-primary{background:linear-gradient(135deg,var(--navy),#112b4b);color:#fff;box-shadow:var(--shadow)}
.button-secondary{background:linear-gradient(135deg,var(--teal),var(--emerald));color:#fff;box-shadow:var(--shadow)}
.button-soft{background:var(--panel-2);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow)}
.button-soft:hover{background:var(--panel);color:var(--text)}
.button-link{color:var(--teal);padding:0;background:none}
.hero{padding:3.5rem 0 2rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1.4rem;align-items:stretch}
.hero-main,.hero-panel,.card,.table-card,.form-card,.metric-card,.notice, .panel-card{
  background:var(--panel);
  border:1px solid rgba(148,163,184,.18);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-main{
  padding:2.2rem;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(15,118,110,.15), transparent 18rem),
    radial-gradient(circle at bottom right, rgba(11,31,58,.18), transparent 20rem),
    linear-gradient(135deg,#0b1f3a,#0f172a);
  color:#f8fafc;border:none;
}
.hero-main:before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;opacity:.25;pointer-events:none;
}
.hero-main > *{position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.45rem .7rem;border-radius:999px;background:rgba(255,255,255,.1);
  color:#d1fae5;font-size:.93rem;font-weight:700;letter-spacing:.03em
}
.hero-title{font-size:clamp(2rem,3.4vw,4.2rem);line-height:1.1;margin:1rem 0 1rem;font-weight:900}
.hero-copy{font-size:1.1rem;color:#d7e4f0;max-width:52rem}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.35rem}
.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1.7rem}
.metric-pill{
  padding:1rem;border-radius:20px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1)
}
.metric-pill strong{display:block;font-size:1.35rem;color:#fff}
.metric-pill span{font-size:.92rem;color:#cbd5e1}
.hero-panel{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.hero-panel h3{margin:.2rem 0 .35rem;font-size:1.15rem}
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}
.kpi-card{padding:1rem;border-radius:20px;background:var(--panel-2);border:1px solid var(--line)}
.kpi-card strong{display:block;font-size:1.25rem;color:var(--navy)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.section-head h2,.page-title{margin:0;font-size:clamp(1.45rem,2vw,2.2rem)}
.section-head p,.lede{margin:.35rem 0 0;color:var(--text-soft);max-width:48rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card,.panel-card{padding:1.25rem}
.card h3,.panel-card h3{margin:.2rem 0 .4rem;font-size:1.1rem}
.card p,.panel-card p,.muted{color:var(--text-soft)}
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .65rem;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--line);font-size:.84rem;font-weight:700;color:var(--navy)
}
.badge-teal{background:rgba(15,118,110,.12);color:var(--teal);border-color:rgba(15,118,110,.2)}
.badge-emerald{background:rgba(5,150,105,.12);color:var(--emerald);border-color:rgba(5,150,105,.2)}
.badge-navy{background:rgba(11,31,58,.12);color:var(--navy);border-color:rgba(11,31,58,.2)}
.card-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}
.card-list{margin:.8rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem}
.card-list li{position:relative;padding-inline-start:1.2rem}
.card-list li:before{content:"";position:absolute;inset-inline-start:0;top:.65rem;width:.45rem;height:.45rem;border-radius:999px;background:var(--teal)}
.split{
  display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:start
}
.media-frame{
  border-radius:24px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel-2);box-shadow:var(--shadow)
}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.price-card{
  padding:1.25rem;border-radius:26px;background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--shadow)
}
.price-card.featured{border-color:rgba(15,118,110,.4);box-shadow:0 24px 44px rgba(15,118,110,.18)}
.price{font-size:2.1rem;font-weight:900;color:var(--navy)}
.price small{font-size:.95rem;color:var(--text-soft)}
.empty{
  padding:1.4rem;border-radius:20px;background:var(--panel-2);
  border:1px dashed var(--line);color:var(--text-soft)
}
.notice{padding:1rem 1.1rem;margin:1rem 0}
.notice-info{border-inline-start:4px solid var(--navy)}
.notice-success{border-inline-start:4px solid var(--emerald)}
.notice-error{border-inline-start:4px solid var(--danger)}
.form-card{padding:1.35rem}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.field{display:grid;gap:.45rem}
.field label{font-weight:700}
.input,.textarea,.select{
  width:100%;border-radius:16px;border:1px solid var(--line);
  background:var(--panel-2);padding:.82rem .95rem;color:var(--text);
  outline:none;transition:border-color .16s ease, box-shadow .16s ease
}
.input:focus,.textarea:focus,.select:focus{border-color:rgba(15,118,110,.7);box-shadow:0 0 0 3px rgba(15,118,110,.15)}
.textarea{min-height:132px;resize:vertical}
.check-row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.data-table{
  width:100%;border-collapse:collapse;font-size:.96rem
}
.data-table th,.data-table td{padding:.9rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:start}
.data-table thead th{font-size:.9rem;color:var(--text-soft);font-weight:800;background:var(--panel-2)}
.data-table tbody tr:hover{background:rgba(148,163,184,.05)}
.table-wrap{overflow:auto;border-radius:24px}
.pill-status{
  display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .62rem;border-radius:999px;font-size:.82rem;font-weight:800
}
.status-ok{background:rgba(5,150,105,.12);color:var(--success)}
.status-warn{background:rgba(245,158,11,.15);color:var(--warn)}
.status-danger{background:rgba(220,38,38,.12);color:#b91c1c}
.status-error{background:rgba(239,68,68,.14);color:var(--danger)}
.site-footer{padding:2rem 0 3rem;border-top:1px solid rgba(148,163,184,.16);margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:1rem}
.footer-grid h4{margin:.2rem 0 .6rem}
.footer-links{display:grid;gap:.45rem}
.flash-stack{display:grid;gap:.8rem;margin-bottom:1rem}
.page-hero{padding:2rem 0 1rem}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.5rem;color:var(--text-soft);font-size:.92rem;margin-bottom:.6rem}
.auth-shell{max-width:540px;margin:2rem auto}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sidebar-layout{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar{
  background:linear-gradient(180deg,#09162a,#0d1d33);color:#ecfeff;padding:1.1rem;position:sticky;top:0;height:100vh;overflow:auto;border-inline-end:1px solid rgba(255,255,255,.08)
}
.sidebar .brand{margin-bottom:1.2rem}
.sidebar .brand small{color:#93c5fd}
.side-group{margin-bottom:1rem}
.side-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin:.7rem .5rem}
.side-link{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.78rem .9rem;border-radius:18px;color:#dbeafe;margin:.18rem 0
}
.side-link:hover,.side-link.active{background:rgba(255,255,255,.09);color:#fff}
.admin-main{padding:1rem 1.15rem 2rem}
.admin-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.5rem 0 1rem;margin-bottom:1rem;border-bottom:1px solid rgba(148,163,184,.18)
}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.summary-card{
  padding:1rem 1.1rem;border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)
}
.summary-card strong{display:block;font-size:1.45rem;color:var(--navy)}
.status-grid,.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.status-item,.tool-card{padding:1rem;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.tool-card form{display:inline}
.panel-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.search-bar{display:flex;gap:.75rem;flex-wrap:wrap}
.inline-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.code{
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  padding:.18rem .4rem;border-radius:10px;background:var(--panel-2);border:1px solid var(--line)
}
.mobile-toggle{display:none}
.muted-small{font-size:.9rem;color:var(--text-soft)}
.lang-switch{display:flex;gap:.35rem}
.lang-switch a{padding:.55rem .7rem;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-weight:700}
.lang-switch a.active{background:var(--navy);color:#fff}
.list-inline{display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.stats-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem
}
.stats-strip .panel-card{padding:1rem}
.table-card{padding:1rem}
.footer-note{margin-top:1rem;color:var(--text-soft);font-size:.92rem}
.hero-mini{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem
}
.separator{height:1px;background:var(--line);margin:1rem 0}
@media (max-width: 1100px){
  .hero-grid,.split,.footer-grid,.sidebar-layout,.summary-grid,.pricing-grid,.stats-strip,.hero-mini{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .sidebar{position:relative;height:auto}
}
@media (max-width: 820px){
  .grid-3,.grid-2,.account-grid,.form-grid,.status-grid,.tool-grid,.hero-metrics,.kpi-grid,.grid-4{grid-template-columns:1fr}
  .main-nav{display:none}
  .main-nav.is-open{display:grid;position:absolute;inset-inline:1rem;top:82px;background:var(--panel);border:1px solid var(--line);padding:1rem;border-radius:24px;box-shadow:var(--shadow)}
  .mobile-toggle{display:inline-flex}
  .header-row{position:relative}
}


.header-row{align-items:flex-start}
.brand span{display:flex;flex-direction:column;gap:.2rem}
.auth-shell .form-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.price-card .card-actions{align-items:flex-start;flex-direction:column}
@media (max-width: 820px){
  .nav-list{display:grid;gap:.35rem}
}


/* live fix: logo sizing */
.site-header .brand img{width:240px;max-width:min(46vw,240px);height:auto}
.site-footer .brand img{width:200px;max-width:min(60vw,200px);height:auto}
.auth-shell .brand img,.sidebar .brand img{width:180px;max-width:min(48vw,180px);height:auto}

/* live fix: soft buttons contrast */
.button-soft{background:var(--panel-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;box-shadow:var(--shadow)}
.button-soft:hover,.button-soft:focus{background:var(--panel)!important;color:var(--text)!important}
.button-soft *, .button-soft:visited{color:inherit!important}


/* stronger live fix: logo sizing */
html[dir="rtl"] .site-header .brand img{width:280px !important;max-width:min(62vw,280px) !important;height:auto !important}
html[dir="ltr"] .site-header .brand img{width:340px !important;max-width:min(72vw,340px) !important;height:auto !important}
.site-footer .brand img{width:220px !important;max-width:min(70vw,220px) !important;height:auto !important}
.auth-shell .brand img,.sidebar .brand img{width:200px !important;max-width:min(60vw,200px) !important;height:auto !important}

/* stronger live fix: button text contrast */
.button-soft,
a.button-soft,
button.button-soft,
.hero-actions .button-soft,
.utility-nav .button-soft{
  background:var(--panel-2) !important;
  border:1px solid var(--line) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
}
.button-soft *,
a.button-soft *,
button.button-soft *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.button-soft:hover,
.button-soft:focus,
.hero-actions .button-soft:hover,
.utility-nav .button-soft:hover{
  background:#1b2b40 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* make primary/secondary always readable too */
.button-primary,
.button-secondary,
a.button-primary,
a.button-secondary{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.button-primary *,
.button-secondary *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}


/* final live contrast fix */
html[dir="rtl"] .site-header .brand img{width:300px !important;max-width:min(68vw,300px) !important;height:auto !important}
html[dir="ltr"] .site-header .brand img{width:420px !important;max-width:min(78vw,420px) !important;height:auto !important}

/* nav links and active states */
.main-nav a,
.main-nav a:visited,
.main-nav a:hover,
.main-nav a.is-active{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
.main-nav a.is-active,
.main-nav a:hover{
  background:#17314d !important;
  border-radius:999px !important;
}

/* badges / pills / counters */
.badge,
.badge *,
.metric-pill,
.metric-pill *,
.select-pill,
.select-pill *,
.lang-switch a,
.lang-switch a *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
}

.badge{
  background:#17314d !important;
  border:1px solid #31506f !important;
}
.badge-teal{
  background:#0f766e !important;
  border-color:#14b8a6 !important;
  color:#ffffff !important;
}



.metric-pill{
  background:#24364d !important;
  border:1px solid #3b5576 !important;
}
.select-pill{
  background:#12263b !important;
  border:1px solid #2f4a68 !important;
}
.select-pill select,
.select-pill span{
  color:#ffffff !important;
  background:transparent !important;
}

.lang-switch a{
  background:#12263b !important;
  border:1px solid #2f4a68 !important;
}
.lang-switch a.active{
  background:#1d4ed8 !important;
  border-color:#60a5fa !important;
  color:#ffffff !important;
}


/* unified title badges */
.badge,
.badge-teal,
.badge-emerald,
.badge-navy{
  background:#17314d !important;
  border:1px solid #31506f !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}


/* refined badge hierarchy */
.badge{color:#ffffff !important;-webkit-text-fill-color:#ffffff !important}
.badge-teal{
  background:#0f766e !important;
  border:1px solid #14b8a6 !important;
  color:#ffffff !important;
}
.badge-emerald{
  background:#059669 !important;
  border:1px solid #34d399 !important;
  color:#ffffff !important;
}
.badge-navy{
  background:#1d4ed8 !important;
  border:1px solid #60a5fa !important;
  color:#ffffff !important;
}


/* systematic badge hierarchy */
.badge,
.badge-teal,
.badge-emerald,
.badge-navy{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:none !important;
}

/* 1) section labels */
.section-head .badge,
section > .container > .badge,
.surface > .container > .badge{
  background:#0f766e !important;
  border:1px solid #14b8a6 !important;
  color:#ffffff !important;
}

/* 2) badges inside cards */
.card .badge,
.card > .badge{
  background:#17314d !important;
  border:1px solid #31506f !important;
  color:#ffffff !important;
}

/* 3) update / status badges only */
.notice .badge,
.notice-success .badge,
.notice-info .badge,
.portal-update .badge,
.update-badge,
.status-badge,
.badge-emerald{
  background:#059669 !important;
  border:1px solid #34d399 !important;
  color:#ffffff !important;
}

/* keep explicit navy badges stable when used manually */
.badge-navy{
  background:#17314d !important;
  border:1px solid #31506f !important;
  color:#ffffff !important;
}

/* keep explicit teal badges stable when used manually */
.badge-teal{
  background:#0f766e !important;
  border:1px solid #14b8a6 !important;
  color:#ffffff !important;
}