/* ===============================
   Coinyway Theme System (Dark/Light)
   - Works with: <html data-theme="dark|light">
   - Keep your early theme <script> in <head>
   =============================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Base */
  --bg:#0c0f14;
  --panel:#121723;
  --panel-2:#171d2b;
  --panel-3:#0f1420;
  --text:#e8eefc;
  --muted:#98a2b3;

  /* Brand & Accents */
  --primary:#16d19a;
  --primary-2:#22e0a9;
  --accent:#66a6ff;
  --danger:#ff6b6b;
  --warning:#ffb020;
  --info:#66ccff;
  --success:#21d49b;

  /* Borders & Effects */
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.04);

  /* Links */
  --link: var(--accent);
  --link-hover:#3e86ff;

  /* Outline / Focus */
  --focus: rgba(34,224,169,.35);

  /* Tables */
  --table-stripe: rgba(255,255,255,.03);
  --table-border: rgba(255,255,255,.08);

  /* Nav/Tabs */
  --nav-active-bg: var(--panel-2);
  --tab-ink: var(--accent);

  /* Selection */
  --selection-bg: rgba(102,166,255,.28);
  --selection-text: var(--text);
}

/* Light theme override */
html[data-theme="light"]{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-2:#f3f6fb;
  --panel-3:#eef2f9;
  --text:#0e1525;
  --muted:#5c6577;

  --primary:#11c78f;
  --primary-2:#18d9a0;
  --accent:#3e86ff;
  --danger:#e25555;
  --warning:#b97d00;
  --info:#1a88d6;
  --success:#0f9b6c;

  --border:1px solid rgba(0,0,0,.08);
  --glass:rgba(0,0,0,.04);

  --link:#1e5bff;
  --link-hover:#1340c7;

  --focus: rgba(30,91,255,.25);

  --table-stripe: rgba(0,0,0,.035);
  --table-border: rgba(0,0,0,.08);

  --nav-active-bg:#e9eef9;
  --tab-ink:#1e5bff;
  --selection-bg: rgba(30,91,255,.2);
  --selection-text:#0e1525;
}

/* Help UA pick right native colors */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

/* ---------- Base ---------- */
html,body{height:100%}
::selection{ background:var(--selection-bg); color:var(--selection-text); }

body.cw-body{
  background:
     radial-gradient(1200px 600px at -10% -10%, rgba(102,166,255,.08), transparent 60%),
     radial-gradient(1000px 500px at 110% 10%, rgba(34,224,169,.07), transparent 60%),
     var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  transition: background-color .25s ease,color .25s ease;
}

/* Links */
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:none; }

/* Muted text shortcut */
.text-muted{ color:var(--muted)!important }
.lead{ color: color-mix(in oklab, var(--muted) 65%, var(--text) 35%) }

/* Focus ring */
:where(button, [type="button"], [type="submit"], .form-control, .form-select, .form-check-input):focus{
  outline: none !important;
  box-shadow: 0 0 0 .2rem var(--focus) !important;
  border-color: color-mix(in oklab, var(--focus) 55%, transparent);
}

/* Scrollbar (Chromium/WebKit) */
*{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--text) 20%, transparent) transparent;
}
*::-webkit-scrollbar{ height:12px; width:12px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--text) 18%, transparent);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ---------- Layout Blocks ---------- */
.box{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Hero */
.cw-hero{
  padding-top:72px; padding-bottom:48px;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(34,224,169,.08), transparent 60%),
    radial-gradient(700px 320px at 80% -10%, rgba(102,166,255,.08), transparent 60%);
}
.text-gradient{
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}

/* ---------- Navbar / Header ---------- */
.cw-nav{
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
  border-bottom: var(--border);
}
.cw-nav .navbar-brand span{letter-spacing:.2px}
.cw-nav .nav-link{
  color: var(--muted);
  padding: .55rem .8rem;
  border-radius: 10px;
}
.cw-nav .nav-link:hover,
.cw-nav .nav-link.active{ color: var(--text); background: var(--nav-active-bg) }
.cw-nav .btn{ border-radius: 999px }

/* Icon buttons (header actions) */
.cw-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
  border-radius:12px; color:var(--muted);
  background: var(--panel-2); border: var(--border);
  transition:background .2s ease,color .2s ease;
}
.cw-icon-btn:hover{ color:var(--text); background: var(--glass) }

/* ---------- Cards / Offers ---------- */
.cw-offer-card{
  display:flex; flex-direction:column;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: var(--border);
  background: var(--panel-2);
  min-height: 160px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cw-offer-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }

.cw-offer-thumb{
  height: 90px; background-size: cover; background-position: center;
  border-bottom: var(--border);
}
.cw-offer-body{
  padding:12px 14px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
}
.cw-offer-body .small{grid-column:1 / span 1}
.cw-offer-reward{
  grid-column:2; justify-self:end;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color:#05130f; font-weight:700; padding:4px 10px;
  border-radius: 999px; font-size:.95rem;
}

/* ---------- Forms ---------- */
.form-control, .form-select{
  background: var(--panel-3);
  color: var(--text);
  border: var(--border);
  border-radius: 12px;
}
.form-control::placeholder{ color: color-mix(in oklab, var(--muted) 85%, var(--text) 15%) }
.form-control:disabled, .form-select:disabled{ background: color-mix(in oklab, var(--panel-3) 80%, #0000 20%); opacity:.7 }

.input-group-text{
  background: var(--panel-2);
  color: var(--muted);
  border: var(--border);
}
.form-check-input{
  background: var(--panel-3);
  border: var(--border);
}
.form-check-input:checked{
  background-color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 70%, #000 30%);
}

/* ---------- Buttons ---------- */
.btn{ border-radius: 12px; font-weight: 700; }

.btn-primary{
  background: linear-gradient(90deg, var(--accent), #3e86ff);
  color:#061121; border:0;
}
.btn-primary:hover{ filter: brightness(.97); }

.btn-success{
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color:#04140f; border:0;
}
.btn-danger{
  background: linear-gradient(90deg, var(--danger), color-mix(in oklab, var(--danger) 80%, #fff 20%));
  color:#140404; border:0;
}
.btn-warning{
  background: linear-gradient(90deg, var(--warning), color-mix(in oklab, var(--warning) 80%, #fff 15%));
  color:#1b1200; border:0;
}
.btn-info{
  background: linear-gradient(90deg, var(--info), color-mix(in oklab, var(--info) 75%, #fff 20%));
  color:#031622; border:0;
}

/* Outline styles auto-contrast for both themes */
.btn-outline-light{
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--text) 22%, transparent);
  background: linear-gradient(180deg, var(--glass), transparent);
}
.btn-outline-light:hover{
  background: color-mix(in oklab, var(--glass) 80%, transparent);
}

.btn-outline-dark{
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--text) 30%, transparent);
  background: transparent;
}
html[data-theme="light"] .btn-outline-dark{
  color: #0e1525;
  border-color: rgba(0,0,0,.2);
}
html[data-theme="light"] .btn-outline-dark:hover{
  background: rgba(0,0,0,.06);
}

/* Link-button */
.btn-link{
  color: var(--link);
}
.btn-link:hover{ color: var(--link-hover) }

/* ---------- Dropdown / Nav / Tabs ---------- */
.dropdown-menu{
  background: var(--panel-2);
  color: var(--text);
  border: var(--border);
  box-shadow: var(--shadow);
}
.dropdown-item{ color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus{
  background: var(--nav-active-bg); color: var(--text);
}
.dropdown-divider{ border-top: 1px solid color-mix(in oklab, var(--text) 10%, transparent) }

.nav-tabs{
  border-bottom: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.nav-tabs .nav-link{
  color: var(--muted);
  border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav-tabs .nav-link.active{
  color: var(--text);
  border-color: var(--tab-ink);
  background: transparent;
}

/* ---------- Modal / Offcanvas / Toast / Tooltip ---------- */
.modal-content{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text);
  border: var(--border);
  border-radius: 16px;
}
.modal-header, .modal-footer{ border-color: color-mix(in oklab, var(--text) 10%, transparent) }

.offcanvas{
  background: var(--panel-2);
  color: var(--text);
  border-left: var(--border);
}

.toast{
  background: var(--panel);
  color: var(--text);
  border: var(--border);
}
.toast-header{
  background: var(--panel-2);
  color: var(--muted);
  border-bottom: var(--border);
}

/* Tooltips (with BS .tooltip-inner) */
.tooltip .tooltip-inner{
  background: color-mix(in oklab, var(--panel-3) 92%, #000 8%);
  color: var(--text);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.bs-tooltip-auto .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before{
  border-top-color: color-mix(in oklab, var(--panel-3) 92%, #000 8%) !important;
  border-bottom-color: color-mix(in oklab, var(--panel-3) 92%, #000 8%) !important;
  border-left-color: color-mix(in oklab, var(--panel-3) 92%, #000 8%) !important;
  border-right-color: color-mix(in oklab, var(--panel-3) 92%, #000 8%) !important;
}

/* ---------- Alerts / Badges / Progress ---------- */
.alert{
  border: 1px solid currentColor;
  color: #061121;
}
html[data-theme="dark"] .alert{ color: #0c141c; }

.alert-primary{ background: color-mix(in oklab, var(--accent) 22%, transparent); }
.alert-success{ background: color-mix(in oklab, var(--success) 22%, transparent); }
.alert-danger { background: color-mix(in oklab, var(--danger) 22%, transparent); }
.alert-warning{ background: color-mix(in oklab, var(--warning) 22%, transparent); }
.alert-info   { background: color-mix(in oklab, var(--info) 22%, transparent); }

.badge{
  border-radius:999px;
  background: color-mix(in oklab, var(--text) 15%, transparent);
  color: var(--text);
}
.badge.bg-success{ background: linear-gradient(90deg, var(--primary), var(--primary-2)) !important; color:#04140f !important; }
.badge.bg-danger { background: var(--danger) !important; color:#140404 !important; }

.progress{
  background: color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: 20px;
}
.progress-bar{
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}

/* ---------- Tables / List group / Accordion ---------- */
.table{
  color: var(--text);
  border-color: var(--table-border);
}
.table>:not(caption)>*>*{
  background: transparent;
  border-bottom-color: var(--table-border);
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  background: var(--table-stripe);
}
.table-hover>tbody>tr:hover>*{
  background: color-mix(in oklab, var(--table-stripe) 50%, transparent);
}

.list-group{
  background: transparent;
  border: var(--border);
  border-radius: 12px;
}
.list-group-item{
  background: var(--panel);
  color: var(--text);
  border-color: color-mix(in oklab, var(--text) 10%, transparent);
}
.list-group-item.active{
  background: var(--nav-active-bg);
  border-color: transparent;
  color: var(--text);
}

.accordion-button{
  background: var(--panel-2);
  color: var(--text);
}
.accordion-button:not(.collapsed){
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--text) 10%, transparent);
}
.accordion-body{
  background: var(--panel);
  color: var(--text);
}

/* ---------- Footer ---------- */
.cw-footer{
  border-top: var(--border);
  background: linear-gradient(180deg, var(--panel), var(--panel-3));
  color: var(--muted);
}
.cw-footer .cw-footer-link{
  text-decoration:none;
  color: var(--muted);
  font-size:.95rem;
}
.cw-footer .cw-footer-link:hover{ color: var(--text) }
html[data-theme="light"] .cw-footer{ color: var(--muted) }

/* ---------- Language Modal ---------- */
.cw-lang-modal{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--text); border: var(--border); border-radius: 16px;
}
.cw-lang-item{ text-decoration:none; color:inherit; border-radius:12px; }
.cw-lang-item:hover{ transform: translateY(-1px); transition:.15s; }

/* Flags */
.cw-flag{ width:26px; height:18px; border-radius:4px; display:inline-block; border:1px solid color-mix(in oklab, var(--text) 20%, transparent) }
.flag-uk{
  background:
    linear-gradient(to bottom,#012169 0 100%),
    linear-gradient(25deg,transparent 47%, #fff 47% 53%, transparent 53%),
    linear-gradient(-25deg,transparent 47%, #fff 47% 53%, transparent 53%),
    linear-gradient(25deg,transparent 45%, #C8102E 45% 55%, transparent 55%),
    linear-gradient(-25deg,transparent 45%, #C8102E 45% 55%, transparent 55%),
    linear-gradient(to bottom,transparent 40%, #fff 40% 60%, transparent 60%),
    linear-gradient(to right, transparent 43%, #fff 43% 57%, transparent 57%),
    linear-gradient(to bottom,transparent 45%, #C8102E 45% 55%, transparent 55%),
    linear-gradient(to right,  transparent 47%, #C8102E 47% 53%, transparent 53%);
  background-blend-mode: overlay;
}
.flag-tr{
  background:
    radial-gradient(circle at 40% 50%, transparent 0 11px, #fff 11.5px 12px, transparent 12.5px),
    radial-gradient(circle at 48% 50%, #fff 0 7px, transparent 7.5px),
    #E30A17;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){ .cw-hero{ padding-top:36px } }
@media (max-width: 575.98px){
  .display-5{ font-size: 2rem }
  .cw-offer-thumb{ height: 84px }
}

/* Small extras */
.cw-hero a:hover{ opacity:.9 }
.cw-hero img[alt="Trustpilot"]{ filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)) }

.cw-lang-modal{background:#141824;color:#e9edf7;border-radius:14px}
.cw-lang-modal .modal-header{padding:18px 20px 8px}
.cw-lang-modal .modal-title{font-weight:700}
.cw-lang-item{
  display:flex;align-items:center;gap:.6rem;justify-content:space-between;
  width:100%;padding:.65rem .8rem;border-radius:10px;text-decoration:none;
  background:transparent;color:#e9edf7;border:1px solid rgba(255,255,255,.06)
}
.cw-lang-item:hover{background:rgba(255,255,255,.04)}
.cw-lang-item.active{background:rgba(25,135,84,.08);border-color:rgba(25,135,84,.35)}
.cw-flag-wrap{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;overflow:hidden;background:#0f1320;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.cw-flag-wrap img{width:100%;height:100%;object-fit:cover}
.cw-check{
  width:20px;height:20px;display:inline-block;border-radius:50%;
  background:#1fa97a;position:relative;flex:0 0 auto
}
.cw-check:after{
  content:"";position:absolute;left:6px;top:3px;width:6px;height:10px;border:2px solid #0c3a2d;border-top:0;border-left:0;transform:rotate(45deg)
}
.btn-close{filter:invert(1) grayscale(100%)}
:root{
  --cw-bg:#ffffff;
  --cw-text:#0f1117;
  --cw-muted:#4a5568;
  --cw-item-bg:#f6f8fb;
  --cw-item-border:rgba(15,17,23,.08);
  --cw-item-hover:#eef2f7;
  --cw-active-bg:rgba(31,171,105,.12);
  --cw-active-border:rgba(31,171,105,.35);
  --cw-flag-ring:rgba(15,17,23,.10);
  --cw-check:#1fa97a;
  --cw-check-tick:#0a2f25;
  --cw-close-filter:invert(0);
}
.theme-dark .cw-lang-modal,
[data-bs-theme="dark"] .cw-lang-modal,
[data-theme="dark"] .cw-lang-modal{
  --cw-bg:#0f1118;
  --cw-text:#e9edf7;
  --cw-muted:#a8b3cf;
  --cw-item-bg:#151a23;
  --cw-item-border:rgba(255,255,255,.06);
  --cw-item-hover:#1b2030;
  --cw-active-bg:rgba(31,171,105,.12);
  --cw-active-border:rgba(31,171,105,.35);
  --cw-flag-ring:rgba(255,255,255,.12);
  --cw-check:#1fa97a;
  --cw-check-tick:#0c3a2d;
  --cw-close-filter:invert(1);
}

.cw-lang-modal{
  background:var(--cw-bg);
  color:var(--cw-text);
  border-radius:14px;
}
.cw-lang-modal .modal-header{padding:18px 20px 8px}
.cw-lang-modal .modal-title{font-weight:700;color:var(--cw-text)}
.btn-close{filter:var(--cw-close-filter);opacity:.7}
.btn-close:hover{opacity:1}

.cw-lang-item{
  padding:.7rem 1rem;
  border:1px solid var(--cw-item-border);
  border-radius:10px;
  text-decoration:none;
  color:var(--cw-text);
  background:var(--cw-item-bg);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
  min-height:48px;
}
.cw-lang-item:hover{background:var(--cw-item-hover)}
.cw-lang-item.active{
  background:var(--cw-active-bg);
  border-color:var(--cw-active-border);
  justify-content:space-between;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--cw-active-border) 60%, transparent);
}

.cw-flag{
  width:26px;height:26px;border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 1px var(--cw-flag-ring);
  flex:0 0 auto;
}
.cw-check{
  width:18px;height:18px;border-radius:50%;
  background:var(--cw-check);
  position:relative;flex:0 0 auto;
}
.cw-check::after{
  content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;
  border:2px solid var(--cw-check-tick);
  border-top:0;border-left:0;transform:rotate(45deg)
}

.row.g-3{--bs-gutter-x:1rem;--bs-gutter-y:1rem}
.fw-medium{font-weight:600;color:var(--cw-text)}
:root {
  --bg: #0f1216;
  --bg-soft: #12161c;
  --surface: #171b22;
  --border: #242b35;
  --text: #e8eef7;
  --muted: #9aa7b8;

  --brand: #66a6ff;
  --brand-2: #16d19a;
  --brand-3: #7c4dff;

  --success: #18c29c;
  --danger: #ff5573;
  --info: #57b7ff;
  --warning: #ffb648;

  --focus: 0 0 0 3px rgba(102,166,255,.35);
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 10px;
  --shadow-1: 0 8px 28px rgba(0,0,0,.35);
  --shadow-2: 0 14px 38px rgba(0,0,0,.45);
  --ring: 0 0 0 1px var(--border);

  --input-bg: #0f1319;
  --input-border: #262e39;
  --input-text: var(--text);
  --input-placeholder: #7e8b9b;

  --btn-fg: #0b0e12;
  --grad-1: linear-gradient(135deg, var(--brand), var(--brand-2));
  --grad-2: linear-gradient(135deg, #2b86c5, #7058ff);
}

html.light, body.light, [data-theme="light"] {
  --bg: #f6f8fb;
  --bg-soft: #fff;
  --surface: #fff;
  --border: #e7eaf0;
  --text: #0f1720;
  --muted: #556277;
  --input-bg: #fff;
  --input-border: #d7dce4;
  --input-text: #0f1720;
  --input-placeholder: #9aa6b2;
  --btn-fg: #ffffff;
  --shadow-1: 0 8px 24px rgba(16,24,40,.08);
  --shadow-2: 0 14px 30px rgba(16,24,40,.12);
}

/* =========================================
   AUTH WRAPPER & CARD
========================================= */
.cw-auth-wrap {
  min-height: calc(100dvh - 120px);
  display: grid;
  align-items: center;
  background: radial-gradient(1000px 600px at 10% -20%, rgba(102,166,255,.10), transparent 60%),
              radial-gradient(900px 500px at 120% 10%, rgba(22,209,154,.08), transparent 60%),
              var(--bg);
}

.cw-card {
  background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.02), transparent 30%)
              , var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  overflow: hidden;
}

.cw-auth-card { padding: 28px; }

.cw-card-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.cw-logo-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cw-logo-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--grad-1);
  box-shadow: 0 0 0 6px rgba(102,166,255,.15), 0 0 24px rgba(102,166,255,.35);
}

.cw-title { color: var(--text); }
.cw-subtitle { color: var(--muted); margin-top: 6px; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====== Theme Tokens (Dark) */
:root {
  --bg: #0f1216;
  --bg-soft: #12161c;
  --surface: #171b22;
  --surface-2: #131821;
  --text: #e7eef7;
  --muted: #97a4b6;
  --border: #242c37;

  --brand: #66a6ff;
  --brand-2: #16d19a;

  --input-bg: #0f141b;
  --input-border: #243041;
  --input-placeholder: #7f8ba0;

  --success: #17c39b;
  --danger: #ff5977;
  --info: #57b7ff;

  --radius-xl: 18px;
  --radius: 12px;
  --radius-sm: 10px;

  --focus-ring: 0 0 0 3px rgba(102,166,255,.35);
}

/* ====== Light Theme */
html.light, body.light, [data-theme="light"] {
  --bg: #f6f8fb;
  --bg-soft: #f9fbff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #0e1621;
  --muted: #556276;
  --border: #e5e9f1;

  --input-bg: #ffffff;
  --input-border: #d9e0ea;
  --input-placeholder: #9aa7b6;

  --focus-ring: 0 0 0 3px rgba(35,113,255,.22);
}

.cw-auth-wrap {
  min-height: calc(100dvh - 120px);
  display: grid;
  align-items: center;
  background:
    radial-gradient(900px 560px at -10% -10%, rgba(102,166,255,.08), transparent 60%),
    radial-gradient(800px 520px at 110% 0%, rgba(22,209,154,.06), transparent 60%),
    var(--bg);
  padding: 32px 16px;
}

.cw-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}

.cw-auth-card {
  max-width: 520px;         
  margin: 0 auto;
  padding: 22px;
}

.cw-card-head {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.cw-logo-title { display: flex; align-items: center; gap: 10px; }
.cw-logo-dot {
  width: 12px; height: 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 0 6px rgba(102,166,255,.15);
}
.cw-title { margin: 0; color: var(--text); }
.cw-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

/* ====== Form */
.cw-form { display: grid; gap: 14px; }

.cw-field { display: grid; gap: 8px; }
.cw-label { font-weight: 600; color: var(--text); font-size: 14px; }

.cw-input {
  width: 100%;
  height: 46px;               
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  font-size: 14px;
}
.cw-input::placeholder { color: var(--input-placeholder); }
.cw-input:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Hints */
.cw-hint { color: var(--muted); font-size: 12px; }

/* Checkbox satırı */
.cw-checkbox {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  color: var(--muted); font-size: 14px;
}
.cw-checkbox input { margin-top: 3px; }

/* Link */
.cw-link, .cw-checkbox a { color: var(--brand); text-decoration: none; }
.cw-link:hover, .cw-checkbox a:hover { text-decoration: underline; }

/* ====== Password + Eye */
.cw-password { position: relative; }
.cw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--input-border); background: var(--surface-2);
  cursor: pointer; display: grid; place-items: center;
}
.cw-eye::before { content: "👁️"; font-size: 15px; }
.cw-eye.active::before { content: "🙈"; }

.cw-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cw-strength-bars { display: flex; gap: 6px; }
.cw-strength-bar {
  width: 58px;              
  height: 8px;            
  border-radius: 999px;
  background: #253041;
  border: 1px solid #2a3647;
  transition: background .2s, border-color .2s, filter .2s;
}
.cw-strength-bar.on:nth-child(1) { background: #ff6b6b; border-color: #ff6b6b; }
.cw-strength-bar.on:nth-child(2) { background: #ffb648; border-color: #ffb648; }
.cw-strength-bar.on:nth-child(3) { background: #55d98a; border-color: #55d98a; }
.cw-strength-bar.on:nth-child(4) { background: #16d19a; border-color: #16d19a; filter: drop-shadow(0 0 10px rgba(22,209,154,.4)); }
.cw-strength-label { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ====== Buttons */
.cw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; padding: 12px 16px; border: 1px solid transparent;
  font-weight: 600; letter-spacing: .2px; text-decoration: none; cursor: pointer;
  transition: transform .06s ease, box-shadow .18s, border-color .18s, background .18s;
}
.cw-btn:active { transform: translateY(1px); }

.cw-btn-primary {
  color: #0b0f14;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 22px rgba(102,166,255,.25);
}
.cw-btn-primary:hover { box-shadow: 0 14px 28px rgba(102,166,255,.33); }

.cw-btn-ghost {
  background: var(--bg-soft);
  border: 1px solid var(--input-border);
  color: var(--text);
}
.cw-btn-ghost:hover { border-color: var(--brand); }

/* Google */
.cw-google-btn img { display: inline-block; }

/* Full width helper */
.w-100 { width: 100%; }

.cw-or {
  position: relative; text-align: center; color: var(--muted); font-size: 12px;
}
.cw-or::before, .cw-or::after {
  content: ""; position: absolute; top: 50%; width: 42%;
  border-top: 1px dashed var(--border);
}
.cw-or::before { left: 0; }
.cw-or::after  { right: 0; }

/* ====== Alerts */
.cw-alert {
  position: relative; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-soft);
  font-size: 14px;
}
.cw-alert-success { border-color: rgba(23,195,155,.35); background: rgba(23,195,155,.08); }
.cw-alert-danger  { border-color: rgba(255,89,119,.35); background: rgba(255,89,119,.08); }
.cw-alert-info    { border-color: rgba(87,183,255,.35);  background: rgba(87,183,255,.08);  }
.cw-alert-linebeam {
  position: absolute; left: 0; bottom: 0; height: 3px;
  width: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* ====== Utilities / Responsive */
.cw-bottom-note { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
@media (max-width: 576px) {
  .cw-auth-card { max-width: 100%; padding: 18px; }
  .cw-strength-bar { width: 44px; }
}

:root{
  /* Eye (show) */
  --icon-eye: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23cfe3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/>\
    <circle cx='12' cy='12' r='3'/>\
  </svg>");

  /* Eye-off (hide) */
  --icon-eye-off: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23cfe3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a20.29 20.29 0 0 1 5.06-5.94'/>\
    <path d='M1 1l22 22'/>\
    <path d='M9.88 9.88A3 3 0 0 0 12 15a3 3 0 0 0 2.12-.88'/>\
    <path d='M14.12 14.12 9.88 9.88'/>\
  </svg>");

  /* Checkmark for checkbox */
  --icon-check: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'>\
    <polyline points='20 6 9 17 4 12'/></svg>");
}

/* =========================================
   CHECKBOX — custom, gradient, svg tick
========================================= */
.cw-checkbox {
  display:grid;
  grid-template-columns: 20px 1fr;
  gap:10px;
  align-items:start;
  color:var(--muted);
  font-size:14px;
}
.cw-checkbox input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;height:18px;
  border-radius:6px;
  border:1.5px solid var(--input-border);
  background:var(--input-bg);
  outline: none;
  display:inline-block;
  position:relative;
  cursor:pointer;
  transition:border-color .18s, background .18s, box-shadow .18s, transform .06s;
}
.cw-checkbox input[type="checkbox"]:hover{
  border-color: var(--brand);
}
.cw-checkbox input[type="checkbox"]:focus-visible{
  box-shadow: var(--focus-ring);
}
.cw-checkbox input[type="checkbox"]:active{
  transform: translateY(1px);
}
.cw-checkbox input[type="checkbox"]:checked{
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.cw-checkbox input[type="checkbox"]:checked::after{
  content:"";
  position:absolute; inset:0;
  background: var(--icon-check) center/12px 12px no-repeat;
}

.cw-alert{
  opacity:0;
  transform: translateY(-6px);
}
.cw-alert.cw-anim-in{
  animation: cwAlertIn .28s ease-out forwards;
}
.cw-alert.cw-anim-shake{
  animation: cwAlertIn .28s ease-out forwards, cwShake .4s ease-in-out .28s;
}
@keyframes cwAlertIn{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes cwShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-5px); }
  50%{ transform: translateX(5px); }
  75%{ transform: translateX(-3px); }
  100%{ transform: translateX(0); }
}

.cw-alert-progress{
  position:absolute; left:0; bottom:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  animation: cwProgress 2.4s linear forwards;
  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}
@keyframes cwProgress{
  from{ width:0%; } to{ width:100%; }
}

.cw-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:38px;height:38px;border-radius:10px;
  border:1px solid var(--input-border);
  background: var(--surface-2);
  cursor:pointer; display:grid; place-items:center;
  transition:border-color .18s, background .18s, box-shadow .18s, transform .06s;
}
.cw-eye:hover{ border-color: var(--brand); }
.cw-eye:active{ transform:translateY(-50%) translateY(1px); }

.cw-eye::before{
  content:"";
  width:20px;height:20px; display:block;
  background: var(--icon-eye) center/contain no-repeat;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.cw-eye.is-on::before{
  background: var(--icon-eye-off) center/contain no-repeat;
}

.cw-password { position: relative; }
.cw-password .cw-input { padding-right: 52px; } 
.cw-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:38px;height:38px;border-radius:10px;
  border:1px solid var(--input-border);
  background: var(--surface-2);
  cursor:pointer; display:grid; place-items:center;
  z-index: 2;                    
}
.cw-eye::before{                 
  content:""; width:20px;height:20px; display:block;
  background: var(--icon-eye) center/contain no-repeat;
}
.cw-eye.is-on::before{ background: var(--icon-eye-off) center/contain no-repeat; }

.cw-anim-out{ animation: cwAlertOut .24s ease-in forwards; }
@keyframes cwAlertOut{
  from{ opacity:1; transform: translateY(0); }
  to{ opacity:0; transform: translateY(-6px); }
}

.cw-alert.cw-anim-out {
  animation: cwFadeOutUp 0.5s ease forwards;
}
@keyframes cwFadeOutUp {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: .6; transform: translateY(-3px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

.cw-checkbox.cw-attn {
  animation: cwShake .4s ease-in-out, cwPulse 1.2s ease-out 1;
}
@keyframes cwPulse {
  0% { box-shadow: 0 0 0 0 rgba(102,166,255,.0); }
  30%{ box-shadow: 0 0 0 6px rgba(102,166,255,.20); }
  100%{ box-shadow: 0 0 0 0 rgba(102,166,255,.0); }
}
.cw-checkbox input[type="checkbox"].cw-attn-box {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

:root{
  --icon-fg: #cfe3ff; 
  --icon-eye-open: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/>\
    <circle cx='12' cy='12' r='3'/>\
  </svg>");

  --icon-eye-closed: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M17.94 17.94A10.94 10.94 0 0 1 12 20C5 20 1 12 1 12a20.29 20.29 0 0 1 5.06-5.94'/>\
    <path d='M1 1l22 22'/>\
    <path d='M9.88 9.88A3 3 0 0 0 12 15a3 3 0 0 0 2.12-.88'/>\
  </svg>");
}
html.light, body.light, [data-theme="light"] {
  --icon-fg: #5d6b86; /* light için daha koyu */
}

.cw-password { position: relative; }
.cw-password .cw-input { padding-right: 52px; }  
.cw-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--input-border);
  background: var(--surface-2);
  cursor:pointer; display:grid; place-items:center;
  z-index:2; color: var(--icon-fg);
  transition:border-color .18s, background .18s, color .18s, transform .06s;
}
.cw-eye:hover{ border-color: var(--brand); color: #a9c9ff; }
.cw-eye:active{ transform: translateY(calc(-50% + 1px)); }

.cw-eye::before{
  content:""; width:22px; height:22px; display:block;
  mask: var(--icon-eye-open) no-repeat center / contain;
  -webkit-mask: var(--icon-eye-open) no-repeat center / contain;
  background-color: currentColor;
}
.cw-eye.is-on::before{
  mask: var(--icon-eye-closed) no-repeat center / contain;
  -webkit-mask: var(--icon-eye-closed) no-repeat center / contain;
}

.cw-checkbox.cw-attn { animation: cwShake .4s ease-in-out, cwPulse 1.2s ease-out 1; }
@keyframes cwPulse { 0%{box-shadow:0 0 0 0 rgba(102,166,255,0);} 30%{box-shadow:0 0 0 6px rgba(102,166,255,.2);} 100%{box-shadow:0 0 0 0 rgba(102,166,255,0);} }
.cw-checkbox input[type="checkbox"].cw-attn-box { border-color: var(--brand); box-shadow: var(--focus-ring); }

.cw-anim-out { animation: cwFadeOutUp .5s ease forwards; }
@keyframes cwFadeOutUp { 0%{opacity:1;transform:translateY(0)} 70%{opacity:.6;transform:translateY(-3px)} 100%{opacity:0;transform:translateY(-8px)} }

:root {
  --cw-bg: #ffffff;
  --cw-text: #0f1420;
  --cw-text-dim: #5c667a;
  --cw-border: #cfd6e4;

  --cw-primary-1: #66a6ff;
  --cw-primary-2: #16d19a;
  --cw-surface: #f6f8fc;

  --cw-toggle-track: #e8eef7;
  --cw-toggle-thumb: #ffffff;
  --cw-toggle-ring: rgba(102,166,255,.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cw-bg: #0d1117;
    --cw-text: #e6edf3;
    --cw-text-dim: #9aa7b2;
    --cw-border: #242b36;

    --cw-primary-1: #66a6ff;
    --cw-primary-2: #16d19a;
    --cw-surface: #121826;

    --cw-toggle-track: #1a2130;
    --cw-toggle-thumb: #0f1522;
    --cw-toggle-ring: rgba(22,209,154,.35);
  }
}


html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

.cw-remember-toggle {
  --h: 28px;             
  --w: 52px;             
  --pad: 3px;           
  --ring: 0 0 0 0px var(--cw-toggle-ring);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--cw-text);
}

.cw-remember-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cw-toggle-track {
  position: relative;
  width: var(--w);
  height: var(--h);
  background: var(--cw-toggle-track);
  border-radius: calc(var(--h) / 2);
  border: 1px solid var(--cw-border);
  display: inline-flex;
  align-items: center;
  padding: var(--pad);
  box-sizing: border-box;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow: var(--ring);
}

.cw-toggle-thumb {
  position: relative;
  width: calc(var(--h) - var(--pad)*2);
  height: calc(var(--h) - var(--pad)*2);
  background: var(--cw-toggle-thumb);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transform: translateX(0);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), background .25s ease;
  will-change: transform;
}

.cw-toggle-check {
  position: absolute;
  right: 8px;
  font-size: .9rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .2s ease;
  color: #fff;
  pointer-events: none;
}

.cw-remember-toggle input:checked + .cw-toggle-track {
  /* gradient track */
  background: linear-gradient(135deg, var(--cw-primary-2), var(--cw-primary-1));
  border-color: transparent;
  box-shadow: 0 0 0 6px var(--cw-toggle-ring);
}

.cw-remember-toggle input:checked + .cw-toggle-track .cw-toggle-thumb {
  transform: translateX(calc(var(--w) - var(--h)));
  background: rgba(255,255,255,.95);
}

.cw-remember-toggle input:checked + .cw-toggle-track .cw-toggle-check {
  opacity: 1;
}

.cw-remember-toggle:hover .cw-toggle-track {
  box-shadow: 0 0 0 6px var(--cw-toggle-ring);
}

.cw-remember-toggle input:focus-visible + .cw-toggle-track {
  outline: none;
  box-shadow: 0 0 0 6px var(--cw-toggle-ring);
}

.cw-remember-label {
  font-size: .95rem;
  color: var(--cw-text-dim);
  transition: color .2s ease;
}
.cw-remember-toggle:hover .cw-remember-label {
  color: var(--cw-text);
}

@media (prefers-reduced-motion: reduce) {
  .cw-toggle-thumb { transition: none; }
  .cw-toggle-track { transition: none; }
  .cw-toggle-check  { transition: none; }
}

:root {
--cw-bg: #0b1215; /* base bg (dark) */
--cw-bg-2: #0f1a20; /* card bg (dark) */
--cw-fg: #e7f0f2; /* text */
--cw-muted: #9bb0b6; /* secondary text */
--cw-primary: #16d19a; /* brand mint */
--cw-primary-2: #66a6ff; /* brand blue */
--cw-nav: rgba(10, 15, 18, .6);
--cw-border: rgba(255,255,255,.08);
}


html[data-theme="light"] {
--cw-bg: #f6f8fb;
--cw-bg-2: #ffffff;
--cw-fg: #111418;
--cw-muted: #4d5b63;
--cw-nav: rgba(255,255,255,.6);
--cw-border: rgba(0,0,0,.08);
}


.cw-body { background: var(--cw-bg); color: var(--cw-fg); min-height: 100vh; }
.cw-bg {
position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(60vmax 60vmax at 10% 10%, color-mix(in oklab, var(--cw-primary) 35%, transparent) 0%, transparent 60%),
radial-gradient(60vmax 60vmax at 90% 20%, color-mix(in oklab, var(--cw-primary-2) 35%, transparent) 0%, transparent 60%),
radial-gradient(60vmax 60vmax at 50% 100%, color-mix(in oklab, var(--cw-primary) 22%, transparent) 0%, transparent 60%),
conic-gradient(from 0deg at 50% 50%, transparent 0 30%, color-mix(in oklab, var(--cw-primary-2) 20%, transparent) 30% 60%, transparent 60% 100%),
linear-gradient(180deg, var(--cw-bg) 0%, color-mix(in oklab, var(--cw-bg) 85%, #000 15%) 100%);
filter: saturate(110%) contrast(105%);
animation: cwFloat 24s ease-in-out infinite alternate, cwSpin 90s linear infinite;
}


@keyframes cwFloat {
0% { transform: translate3d(0,0,0) scale(1); }
100% { transform: translate3d(0,-1.5%,0) scale(1.01); }
}
@keyframes cwSpin { to { filter: hue-rotate(15deg); } }


/* NAVBAR */
.cw-nav {
position: sticky; top: 0; z-index: 1020;
backdrop-filter: blur(10px) saturate(110%);
-webkit-backdrop-filter: blur(10px) saturate(110%);
background: var(--cw-nav);
border-bottom: 1px solid var(--cw-border);
}
.cw-nav .nav-link { color: var(--cw-fg); opacity: .85; }
.cw-nav .nav-link:hover { opacity: 1; }
.navbar-toggler { border: 1px solid var(--cw-border); }
.navbar-toggler-icon { filter: invert(1) contrast(2); }


.cw-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px;
background: color-mix(in oklab, var(--cw-bg-2) 70%, transparent);
border: 1px solid var(--cw-border); color: var(--cw-fg);
}
.cw-icon-btn:hover { background: color-mix(in oklab, var(--cw-bg-2) 85%, transparent); }


.cw-lang-modal { background: color-mix(in oklab, var(--cw-bg-2) 90%, transparent); border: 1px solid var(--cw-border); }
.cw-flag { width: 22px; height: 22px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cw-lang-item {
padding: .9rem 1rem; border-radius: 14px; text-decoration: none; color: var(--cw-fg);
border: 1px solid var(--cw-border);
background: color-mix(in oklab, var(--cw-bg-2) 75%, transparent);
transition: transform .18s ease, background .18s ease;
}
.cw-lang-item:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--cw-bg-2) 90%, transparent); }
.cw-lang-item.active { outline: 2px solid color-mix(in oklab, var(--cw-primary) 45%, transparent); }
.cw-check { width: 8px; height: 8px; background: var(--cw-primary); border-radius: 999px; display: inline-block; }


/* Buttons palette */
.btn-primary { background: linear-gradient(90deg, var(--cw-primary), var(--cw-primary-2)); border: none; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline-light { color: var(--cw-fg); border-color: var(--cw-border); }
.btn-outline-light:hover { background: color-mix(in oklab, var(--cw-bg-2) 90%, transparent); }


/* Cards & general */
.cw-card { background: color-mix(in oklab, var(--cw-bg-2) 85%, transparent); border: 1px solid var(--cw-border); border-radius: 16px; }
.cw-subtitle { color: var(--cw-muted); }


/* Utility */
.fw-medium { font-weight: 600; }

:root {
  --cw-bg: #0b1215;
  --cw-surface: rgba(17, 23, 31, 0.72);
  --cw-border: rgba(255,255,255,0.08);
  --cw-glow: 0 8px 30px rgba(22, 209, 154, .15);
  --cw-text: #eaf2ff;
  --cw-muted: #a9b4c0;
  --cw-primary: #16d19a;
}

[data-theme="light"] {
  --cw-bg: #f7fbff;
  --cw-surface: rgba(255,255,255,0.85);
  --cw-border: #e8eef6;
  --cw-text: #0e1a23;
  --cw-muted: #586471;
  --cw-glow: 0 8px 30px rgba(22, 209, 154, .18);
}

/* Header shell */
.cw-header {
  z-index: 1030;
  backdrop-filter: blur(10px);
}

.cw-header-underline {
  position: relative;
  height: 2px;
  overflow: hidden;
}
.cw-header-underline > span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--cw-primary), #66a6ff);
  transition: width .3s ease;
}

.cw-burger {
  --w: 22px;
  --h: 16px;
  --th: 2px;
  --dur: .28s;
  position: relative;
  width: var(--w);
  height: var(--h);
  display: inline-block;
}
.cw-burger .line {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--th);
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--dur) ease, opacity var(--dur) ease, top var(--dur) ease, bottom var(--dur) ease;
}
.cw-burger .line.top { top: 0; }
.cw-burger .line.mid { top: calc(50% - var(--th)/2); }
.cw-burger .line.bot { bottom: 0; }

.navbar-toggler[aria-expanded="true"] .cw-burger .top {
  transform: translateY(calc(var(--h)/2 - var(--th)/2)) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .cw-burger .mid {
  opacity: 0;
  transform: scaleX(0.25);
}
.navbar-toggler[aria-expanded="true"] .cw-burger .bot {
  transform: translateY(calc(-1 * (var(--h)/2 - var(--th)/2))) rotate(-45deg);
}

@media (max-width: 991.98px) {
  #cwNav {
    backdrop-filter: blur(6px);
    background: color-mix(in oklab, var(--cw-surface, #0b1215) 92%, transparent);
    border-radius: 14px;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,.06);
    animation: cwNavSlide .25s ease;
  }
  [data-theme="light"] #cwNav {
    background: rgba(255,255,255,.92);
    border-color: #e9edf3;
  }
  #cwNav .nav-link {
    padding: .6rem .8rem;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease;
  }
  #cwNav .nav-link:hover {
    background: rgba(255,255,255,.08);
  }
  [data-theme="light"] #cwNav .nav-link:hover {
    background: rgba(0,0,0,.05);
  }
  #cwNav .btn {
    width: 100%;
    transition: transform .2s ease;
  }
  #cwNav .btn:active {
    transform: translateY(1px);
  }
  #cwNav .d-none.d-lg-inline-flex {
    display: inline-flex !important;
    width: 100%;
  }
  #cwNav .ms-auto {
    margin-left: 0 !important;
  }
  #cwNav .cw-icon-btn {
    width: 44px;
    height: 38px;
  }
}

@keyframes cwNavSlide {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-burger .line,
  #cwNav {
    transition: none !important;
    animation: none !important;
  }
}

:root{
  --cw-surface: #0b1215;
  --cw-border: rgba(255,255,255,.08);
}
[data-theme="light"]{
  --cw-surface: #ffffff;
  --cw-border: #e9edf3;
}

.cw-nav{
  background: var(--cw-surface);
  border-bottom: 1px solid var(--cw-border);
}
.cw-body .navbar-brand img{ display:block; }

.cw-nav .nav-link{
  border-radius: 10px;
  padding: .6rem .85rem;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.cw-nav .nav-link:hover{
  background: rgba(255,255,255,.06);
}
[data-theme="light"] .cw-nav .nav-link:hover{
  background: rgba(0,0,0,.06);
}

.cw-icon-btn,
.cw-close{
  width: 40px; height: 40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid var(--cw-border);
  background: rgba(255,255,255,.04);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
[data-theme="light"] .cw-icon-btn,
[data-theme="light"] .cw-close{ background:#fff; }
.cw-icon-btn:active,
.cw-close:active{ transform: translateY(1px); }

[data-theme="dark"] .cw-nav .btn.btn-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: transparent;
}

[data-theme="dark"] .cw-nav .btn.btn-outline-light:hover,
[data-theme="dark"] .cw-nav .btn.btn-outline-light:focus,
[data-theme="dark"] .cw-nav .btn.btn-outline-light:active,
[data-theme="dark"] .cw-nav .btn.btn-outline-light:active:focus {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;   
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: none !important;                    
}

[data-theme="light"] .cw-nav .btn.btn-outline-light:hover,
[data-theme="light"] .cw-nav .btn.btn-outline-light:focus {
  color: #111;
  background: #fff;
  border-color: #e9edf3;
  box-shadow: none;
}

.cw-burger{
  --w: 22px; --h: 16px; --th: 2px; --dur: .28s;
  position:relative; width:var(--w); height:var(--h); display:inline-block;
}
.cw-burger .line{
  position:absolute; left:0; right:0; height:var(--th);
  background: currentColor; border-radius:2px; transform-origin:center;
  transition: transform var(--dur) ease, opacity var(--dur) ease;
}
.cw-burger .top{ top:0; }
.cw-burger .mid{ top:calc(50% - var(--th)/2); }
.cw-burger .bot{ bottom:0; }
.navbar-toggler[aria-expanded="true"] .cw-burger .top{
  transform: translateY(calc(var(--h)/2 - var(--th)/2)) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .cw-burger .mid{ opacity:0; transform: scaleX(.25); }
.navbar-toggler[aria-expanded="true"] .cw-burger .bot{
  transform: translateY(calc(-1*(var(--h)/2 - var(--th)/2))) rotate(-45deg);
}

@media (max-width: 991.98px){
  #cwNav{
    border:1px solid var(--cw-border);
    border-radius:16px;
    padding:10px;
    margin-top:10px;
    background: rgba(15,22,35,.92);
    backdrop-filter: blur(6px);
    animation: cwSlide .22s ease;
  }
  [data-theme="light"] #cwNav{ background: rgba(255,255,255,.96); }

  #cwNav .nav-link{ padding:.65rem .85rem; }
  #cwNav .btn{ width:100%; }
  .cw-mobile-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:6px 8px 8px; margin-bottom:6px; border-bottom:1px solid var(--cw-border);
  }
  .cw-mobile-brand{ display:flex; align-items:center; gap:10px; font-weight:600; }
}

@keyframes cwSlide{
  from{ transform: translateY(-8px); opacity:0; }
  to{ transform:none; opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  #cwNav, .cw-burger .line{
    animation:none !important; transition:none !important;
  }
}

[data-theme="light"] .navbar-toggler .line {
  background: #111; 
}

[data-theme="light"] .navbar-toggler[aria-expanded="true"] .line {
  background: #111; 
}

[data-theme="dark"] .navbar-toggler .line {
  background: #fff;
}

[data-theme="dark"] .cw-nav .btn.btn-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: transparent;
}

[data-theme="dark"] .cw-nav .btn.btn-outline-light:hover,
[data-theme="dark"] .cw-nav .btn.btn-outline-light:focus,
[data-theme="dark"] .cw-nav .btn.btn-outline-light:active,
[data-theme="dark"] .cw-nav .btn.btn-outline-light:active:focus {
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;   
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: none !important;                    
}

[data-theme="light"] .cw-nav .btn.btn-outline-light:hover,
[data-theme="light"] .cw-nav .btn.btn-outline-light:focus {
  color: #111;
  background: #fff;
  border-color: #e9edf3;
  box-shadow: none;
}

.cw-footer{
  --cw-surface: var(--cw-surface, #0f1623);
  --cw-text: var(--cw-text, #cfd7e0);
  --cw-muted: var(--cw-muted, #a7b0be);
  --cw-border: rgba(255,255,255,.08);
  --cw-link-hover: #fff;
  --cw-accent: #16d19a;
  background: var(--cw-surface);
  color: var(--cw-text);
  border-top: 1px solid var(--cw-border);
  font-size: 14px;
}
[data-theme="light"] .cw-footer{
  --cw-surface: #ffffff;
  --cw-text: #1b2838;
  --cw-muted: #556070;
  --cw-border: #e9edf3;
  --cw-link-hover: #0b1215;
}

/* Top section spacing */
.cw-footer-top{ background: transparent; }
.cw-footer-brand span{ color: var(--cw-link-hover); }
.cw-footer-blurb{ color: var(--cw-muted); line-height: 1.6; }

/* Column headings */
.cw-footer-heading{
  color: var(--cw-accent);
  letter-spacing:.2px;
  font-weight: 600;
  text-transform: none;
}

/* Links */
.cw-footer-link{
  color: var(--cw-muted);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.cw-footer-link:hover{ color: var(--cw-link-hover); transform: translateX(2px); }

/* Badges & rating */
.cw-badges img{ display:block; height:40px; }
.cw-rating .badge{ background: rgba(22,209,154,.12); color:#16d19a; border:1px solid rgba(22,209,154,.35); }
.cw-star{ color:#22c55e; fill: currentColor; }

/* Bottom line */
.cw-footer-bottom{ background: transparent; border-top: 1px solid var(--cw-border); }
.cw-legal{ color: var(--cw-muted); }
.cw-legal .cw-footer-link{ font-weight: 500; }

/* Language chip (bottom-left) */
.cw-lang-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.04); border:1px solid var(--cw-border);
  color: var(--cw-link-hover);
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
[data-theme="light"] .cw-lang-chip{ background:#fff; }
.cw-lang-chip:hover{ transform: translateY(-1px); }
.cw-lang-chip .cw-flag{ width:18px; height:18px; border-radius:50%; object-fit:cover; }

/* Social icons (right) */
.cw-socials .cw-social{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--cw-border);
  background: rgba(255,255,255,.04);
  color: var(--cw-muted);
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
[data-theme="light"] .cw-socials .cw-social{ background:#fff; }
.cw-socials .cw-social:hover{ color: var(--cw-link-hover); transform: translateY(-1px); }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .cw-footer .cw-footer-heading{ margin-top: 8px; }
  .cw-footer .cw-footer-top{ padding-top: 28px; padding-bottom: 8px; }
  .cw-footer .cw-footer-bottom{ padding-top: 6px; }
}

.cw-footer{
  --bg-dark:#0f1623;
  --bg-light:#ffffff;
  --text-dark:#cfd7e0;
  --text-light:#1b2838;
  --muted-dark:#a7b0be;
  --muted-light:#556070;
  --border-dark:rgba(255,255,255,.08);
  --border-light:#e9edf3;
  --chip-dark:rgba(255,255,255,.04);
  --chip-light:#fff;

  --accent:#16d19a;
  --accent2:#66a6ff;
  --radius:14px;

  background:var(--bg-dark);
  color:var(--text-dark);
  border-top:1px solid var(--border-dark);
  font-size:14px;
}
[data-theme="light"] .cw-footer{
  background:var(--bg-light);
  color:var(--text-light);
  border-top:1px solid var(--border-light);
}

/* ---------- Top section ---------- */
.cw-footer-top{ background:transparent; }
.cw-footer-brand img{ display:block; height:32px; filter: drop-shadow(0 0 6px rgba(102,166,255,.12)); }
.cw-footer-blurb{ color:var(--muted-dark); line-height:1.6; }
[data-theme="light"] .cw-footer-blurb{ color:var(--muted-light); }

/* Column headings with subtle gradient text */
.cw-footer-heading{
  font-weight:700;
  letter-spacing:.2px;
  background:linear-gradient(45deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Links */
.cw-footer-link{
  color:var(--muted-dark);
  text-decoration:none;
  transition:color .18s ease, transform .16s ease;
}
[data-theme="light"] .cw-footer-link{ color:var(--muted-light); }
.cw-footer-link:hover{ color:#ffffff; transform:translateX(2px); }
[data-theme="light"] .cw-footer-link:hover{ color:#0b1215; }

/* Badges & rating */
.cw-badges img{ height:40px; }
.cw-rating .badge{
  border:1px solid rgba(22,209,154,.35);
  background:
    linear-gradient(135deg, rgba(22,209,154,.16), rgba(102,166,255,.16));
  color:#a7f3d0;
}
[data-theme="light"] .cw-rating .badge{
  color:#0f766e;
  background:linear-gradient(135deg, rgba(22,209,154,.12), rgba(102,166,255,.12));
  border-color:#b6e6d8;
}
.cw-stars svg{ filter: drop-shadow(0 0 4px rgba(22,209,154,.35)); opacity:.95; }

/* ---------- Bottom bar ---------- */
.cw-footer-bottom{ border-top:1px solid var(--border-dark); background:transparent; }
[data-theme="light"] .cw-footer-bottom{ border-top:1px solid var(--border-light); }
.cw-legal{ color:var(--muted-dark); }
[data-theme="light"] .cw-legal{ color:var(--muted-light); }
.cw-legal .cw-footer-link{ font-weight:500; }

/* Language chip (desktop + mobile) */
.cw-lang-chip{
  --chip-bg:var(--chip-dark);
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid transparent;
  background:
    linear-gradient(var(--chip-bg),var(--chip-bg)) padding-box,
    linear-gradient(135deg,var(--accent),var(--accent2)) border-box;
  color:#fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: transform .14s ease, box-shadow .2s ease, opacity .2s ease;
}
[data-theme="light"] .cw-lang-chip{ --chip-bg:var(--chip-light); color:#0b1215; }
.cw-lang-chip:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.cw-lang-chip:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(102,166,255,.35); }
.cw-lang-chip .cw-flag{
  width:18px; height:18px; border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  object-fit:cover;
}
.cw-lang-chip .cw-lang-text{ font-weight:600; letter-spacing:.1px; }

/* Social icons */
.cw-socials .cw-social{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--border-dark);
  background:var(--chip-dark); color:var(--muted-dark);
  transition:transform .14s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
[data-theme="light"] .cw-socials .cw-social{
  border-color:var(--border-light);
  background:var(--chip-light);
  color:var(--muted-light);
}
.cw-socials .cw-social:hover{
  color:#fff; transform:translateY(-1px);
  border-color:transparent;
  box-shadow:0 4px 12px rgba(102,166,255,.25), inset 0 0 0 999px transparent;
  background:
    linear-gradient(var(--chip-dark),var(--chip-dark)) padding-box,
    radial-gradient(120% 120% at 30% 30%, rgba(102,166,255,.45), rgba(22,209,154,.45)) border-box;
}
[data-theme="light"] .cw-socials .cw-social:hover{ color:#0b1215; }

/* ---------- Soft Mobile Layout ---------- */
@media (max-width: 991.98px){
  .cw-footer-top{ padding:28px 0 8px; }
  .cw-footer-top .col-12{ text-align:center; }
  .cw-footer-brand{ justify-content:center; }
  .cw-footer-blurb{ text-align:center; margin-left:auto; margin-right:auto; max-width:560px; }
  .cw-badges{ justify-content:center; }
  .cw-footer-heading{ text-align:center; }
  .cw-footer .list-unstyled{ align-items:center; }
  .cw-footer .list-unstyled li{ text-align:center; }
  .cw-footer-bottom .d-flex{ gap:14px; }
  .cw-lang-chip{ padding:9px 16px; }
}

/* Ultra small screens */
@media (max-width: 420px){
  .cw-footer{ font-size:13.5px; }
  .cw-lang-chip{ padding:8px 14px; }
  .cw-socials .cw-social{ width:34px; height:34px; }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .cw-footer-link, .cw-lang-chip, .cw-socials .cw-social{ transition:none!important; }
}

.cw-lang-chip{
  /* reset */
  appearance:none;
  border:0;
  outline:0;
  line-height:1;
  cursor:pointer;

  /* layout */
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;

  /* gradient border + inner plate */
  --chip-plate-dark: rgba(255,255,255,.05);
  --chip-plate-light:#ffffff;
  background:
    linear-gradient(var(--chip-plate-dark),var(--chip-plate-dark)) padding-box,
    linear-gradient(135deg,var(--accent,#16d19a),var(--accent2,#66a6ff)) border-box;
  border:1px solid transparent;
  color:#fff;
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 0 0 0 999px transparent;
  transition:
    transform .14s ease,
    box-shadow .22s ease,
    filter .22s ease,
    background-color .22s ease,
    opacity .22s ease;
}
[data-theme="light"] .cw-lang-chip{
  background:
    linear-gradient(var(--chip-plate-light),var(--chip-plate-light)) padding-box,
    linear-gradient(135deg,var(--accent,#16d19a),var(--accent2,#66a6ff)) border-box;
  color:#0b1215;
  box-shadow:
    0 6px 20px rgba(15,22,35,.10),
    inset 0 0 0 999px transparent;
}

/* soft shine */
.cw-lang-chip::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background:
    radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

/* chevron */
.cw-lang-chip::after{
  content:"";
  width:10px; height:10px; margin-left:2px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 9l5 6 5-6z"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 9l5 6 5-6z"/></svg>') no-repeat center / contain;
  opacity:.85;
}

/* flag */
.cw-lang-chip .cw-flag{
  width:20px; height:20px; border-radius:50%;
  display:inline-block; object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
[data-theme="light"] .cw-lang-chip .cw-flag{
  box-shadow:0 0 0 2px rgba(0,0,0,.10);
}

/* label */
.cw-lang-chip .cw-lang-text{
  font-weight:600;
  letter-spacing:.2px;
}

/* hover/active/focus */
.cw-lang-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(102,166,255,.25), 0 4px 10px rgba(22,209,154,.18);
}
.cw-lang-chip:active{ transform:translateY(0); filter:saturate(1.1); }
.cw-lang-chip:focus-visible{
  box-shadow:0 0 0 3px rgba(102,166,255,.35), 0 8px 20px rgba(0,0,0,.18);
}

@media (max-width:420px){
  .cw-lang-chip{ padding:9px 14px; gap:8px; }
  .cw-lang-chip .cw-flag{ width:18px; height:18px; }
}

.cw-lang-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--cw-border,rgba(255,255,255,.09));border-radius:12px;background:var(--cw-surface,#0f1623);color:var(--cw-text,#e9edf4);line-height:1}
.cw-lang-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cw-flag{width:20px;height:20px;border-radius:50%;display:block}

/* Modal */
.cw-lang-modal{background:var(--cw-surface,#101826);border:1px solid var(--cw-border,rgba(255,255,255,.08));border-radius:18px}
.cw-lang-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:576px){.cw-lang-grid{grid-template-columns:1fr}}
.cw-lang-option{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--cw-border,rgba(255,255,255,.08));border-radius:14px;background:var(--cw-surface,#0f1623);text-decoration:none;color:var(--cw-text,#e9edf4);transition:box-shadow .2s,border-color .2s}
.cw-lang-option:hover{border-color:var(--cw-primary,#16d19a);box-shadow:0 0 0 3px rgba(22,209,154,.18)}
.cw-lang-flag img{width:22px;height:22px;border-radius:50%}
.cw-lang-name{font-weight:600}
.cw-lang-check{margin-left:auto;width:22px;height:22px;border-radius:999px;background:var(--cw-primary,#16d19a);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;opacity:0;transform:scale(.8);transition:.2s}
.cw-lang-option.is-active{border-color:var(--cw-primary,#16d19a)}
.cw-lang-option.is-active .cw-lang-check{opacity:1;transform:scale(1)}

/* Footer */
.cw-footer{margin-top:40px;background:var(--cw-surface,#0f1623);border-top:1px solid var(--cw-border,rgba(255,255,255,.08))}
[data-theme="light"] .cw-footer{background:#fff;border-top-color:#e8eef6}
.cw-footer-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:32px 0}
@media (max-width:992px){.cw-footer-top{grid-template-columns:repeat(2,1fr)}}
@media (max-width:576px){.cw-footer-top{grid-template-columns:1fr}}
.cw-footer-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;color:var(--cw-text,#e9edf4)}
.cw-footer-mark{width:24px;height:24px}
.cw-footer-text{color:var(--cw-muted,#aab4c3);margin-top:10px}
.cw-foot-head{font-weight:700;margin:0 0 10px 0;color:var(--cw-text,#e9edf4);font-size:.95rem}
.cw-foot-link{display:block;padding:6px 0;color:var(--cw-muted,#b8c0cf);text-decoration:none}
.cw-foot-link:hover{color:var(--cw-text,#e9edf4)}
.cw-footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--cw-border,rgba(255,255,255,.08))}
.cw-foot-copy{color:var(--cw-muted,#aab4c3)}
.cw-pill{display:inline-flex;align-items:center;border:1px solid var(--cw-border,rgba(255,255,255,.1));border-radius:999px;padding:4px 10px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.04))}
.cw-social{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;border:1px solid var(--cw-border,rgba(255,255,255,.1));color:var(--cw-text,#e9edf4);text-decoration:none}
.cw-social:hover{border-color:var(--cw-primary,#16d19a);box-shadow:0 0 0 3px rgba(22,209,154,.18)}
[data-theme="light"] .cw-foot-link{color:#5b6473}

