/* =========================================================
   Dolores UI — FULL CSS REFACTOR
   One source of truth for sizes. No horizontal scroll.
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  /* Brand */
  --primary: cornflowerblue;
  --primary-glow: rgba(100,149,237,.35);
  --hover-glow: 0 0 12px var(--primary-glow), 0 0 24px var(--primary-glow);
  --bg-dark: #0f0f0f;
  --bg-darker: #1a1a1a;
  --text-muted: #ccc;
  --text-subtle: #888;
  --border-color: #2c2c2c;
  --fightclub-pink: #e72e77;
  --fightclub-glow: #ff66a3;

  /* Layout (edit here only) */
  --sidebar-width: 200px; /* fixed left nav width */
  --topbar-height: 60px;  /* blue bar height */
}

/* ---------- Global locks ---------- */
html, body { width:100%; max-width:100vw; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }

body{
  margin:0;
  font-family:'Segoe UI', sans-serif;
  background: linear-gradient(to bottom right, var(--bg-dark), var(--bg-darker));
  color:var(--text-muted);
}
img, canvas, video { max-width:100%; height:auto; }
pre{ white-space:pre-wrap; word-wrap:break-word; }

/* ---------- Top bar ---------- */
.top-ticker{
  position:fixed; top:0; left:0; width:100%;
  height: var(--topbar-height);
  display:flex; align-items:center; justify-content:center;
  padding: 0 16px;
  color:#fff; z-index:9999;
  background: linear-gradient(to right, cornflowerblue, #6ea7ff, #3c77dd);
  box-shadow:0 0 12px rgba(100,149,237,.5), 0 0 24px rgba(100,149,237,.3);
}
.ticker-content{ font-weight:700; font-size:1.1rem; }

/* ---------- Profile avatar ---------- */
.profile-avatar{
  position:fixed; top:8px; right:16px; height:40px; width:40px; border-radius:50%;
  object-fit:cover; border:2px solid #fff; background:#000; z-index:10001;
  box-shadow:0 0 6px rgba(255,255,255,.5); transition:transform .2s;
}
.profile-avatar:hover{ transform:scale(1.1); }
.profile-avatar-img{
  width:100px; height:100px; border-radius:50%; object-fit:cover;
  border:2px solid var(--primary); box-shadow:0 0 10px var(--primary-glow);
}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed; top:var(--topbar-height); left:0; bottom:0;
  width: var(--sidebar-width);
  padding:20px; overflow-y:auto; z-index:1000;
  background:#1a1a1a; color:var(--text-muted);
  box-shadow:2px 0 10px var(--primary-glow);
  transition:left .3s ease-in-out;
}
.sidebar h3{ color:var(--primary); font-size:1.2rem; margin:0 0 8px; }
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li{ margin:12px 0; }
.sidebar a{ color:#bfbfbf; text-decoration:none; transition:.2s; }
.sidebar a:hover{ color:var(--fightclub-pink); text-shadow:0 0 5px var(--fightclub-glow); }

.sidebar-toggle{
  position:fixed; top:calc(var(--topbar-height) + 5px); left:10px;
  background:var(--primary); color:#111; padding:.4rem .7rem; border-radius:6px;
  font-weight:700; cursor:pointer; box-shadow:0 0 10px var(--primary-glow);
  z-index:1100; display:none;
}

/* ---------- Main content shell ---------- */
.main-content{
  margin-left: var(--sidebar-width);
  /* FIX: top offset equals top bar height; remove margin-top double offset */
  padding: var(--topbar-height) 24px 24px;
  min-height: 100vh;
  width:auto;
  max-width: calc(100vw - var(--sidebar-width));
  overflow-x:hidden;
  display:block; /* prevent huge children from centering/stretching */
}

/* ---------- Generic sections / headers ---------- */
.page{
  height: calc(100vh - var(--topbar-height));
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; background:transparent; overflow:hidden;
}
.page-wrapper{
  min-height: calc(100vh - var(--topbar-height));
  display:flex; justify-content:center; align-items:center; padding:2rem; background:transparent;
}
.page-section{ margin-block-start:0 !important; }
.section-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 1rem; margin-bottom:2rem;
}
.section-header h1{ font-size:1.8rem; margin:0; color:var(--primary); }

/* ---------- Cards ---------- */
.card{
  background: rgba(0,0,0,.85);
  color:var(--text-muted);
  border:1px solid var(--border-color);
  border-radius:1rem;
  width:100%; max-width:720px;
  padding:3rem; text-align:center;
  box-shadow:0 0 60px var(--primary-glow);
  backdrop-filter: blur(8px);
}
.card h1{ font-size:2.5rem; color:var(--primary); margin:0 0 1rem; }
.card-input-group{ display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:2rem; }
.card-input, .card-btn{
  width:100%; max-width:360px; padding:.9rem 1.2rem; font-size:1.05rem; border-radius:8px;
  box-shadow:0 0 12px rgba(100,149,237,.4), 0 0 24px rgba(100,149,237,.15);
}
.card-input{ background:#111; color:#ccc; border:1px solid cornflowerblue; }
.card-btn{ background:cornflowerblue; color:#111; font-weight:600; text-transform:uppercase; border:none; cursor:pointer; transition:.2s; }
.card-btn:hover{ background:#6ea7ff; box-shadow:0 0 20px rgba(100,149,237,.5); }
.overlay-hidden{ display:none; margin-top:1rem; font-style:italic; color:var(--text-subtle); }

/* ---------- Login form ---------- */
.card-login-form{ display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:2rem; }
.card-login-form input, .card-login-form button{
  width:100%; max-width:360px; padding:.9rem 1.2rem; font-size:1rem; border-radius:8px;
  box-shadow:0 0 12px var(--primary-glow), 0 0 24px var(--primary-glow);
}
.card-login-form input{ background:#111; color:#ccc; border:1px solid cornflowerblue; }
.card-login-form button{ background:cornflowerblue; color:#111; font-weight:600; text-transform:uppercase; border:none; cursor:pointer; transition:.2s; }
.card-login-form .forgot-link{ margin-top:.5rem; font-size:.9rem; color:var(--text-subtle); text-decoration:none; }
.card-login-form .forgot-link:hover{ color:var(--primary); text-shadow:var(--hover-glow); }

/* ---------- Chat input ---------- */
/* Chat prompt hard clamp */
#prompt{
  width: 100% !important;
  max-width: 100% !important;
  height: 220px;
  resize: vertical;
  display: block;
  background: #111;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 0 5px var(--primary-glow);
}

/* ---------- Links ---------- */
a{ color:var(--fightclub-pink); text-decoration:none; transition: color .2s, text-shadow .2s; }
a:hover{ color:var(--fightclub-glow); text-shadow:0 0 6px var(--fightclub-glow); }
a:visited{ color:#c22b66; }
a:active{ color:#ff94c2; text-shadow:0 0 10px var(--fightclub-glow); }

/* ---------- Buttons ---------- */
.btn, button{
  padding:.6rem 1.2rem; background:var(--primary); color:#111; font-weight:600;
  border:none; border-radius:8px; cursor:pointer; font-size:.95rem;
  transition:.2s; box-shadow:0 0 12px var(--primary-glow); text-decoration:none;
}
.btn:hover, button:hover{ background:#6ea7ff; box-shadow:0 0 20px var(--primary-glow); transform:translateY(-2px); }
.btn-xs{ font-size:.75rem; padding:.35rem .75rem; border-radius:6px; }
.danger{ background:#e63946; color:#fff; } .danger:hover{ background:#ff5e6c; box-shadow:0 0 12px rgba(255,94,108,.6); }

/* ---------- Tables (global — ORIGINAL BASE) ---------- */
table{
  width:100%; max-width:100%;
  margin:1.25rem 0;
  border-collapse:collapse; border-radius:12px; overflow:hidden;
  background:#121212; box-shadow:0 0 20px var(--primary-glow);
  font-size:.95rem; table-layout:fixed; word-break:break-word; overflow-wrap:break-word;
}
thead{ background: linear-gradient(to right, #1f1f1f, #232323); }
th{ color:var(--primary); text-shadow:var(--hover-glow); padding:1rem; text-align:left; border-bottom:1px solid var(--border-color); }
td{ color:var(--text-muted); padding:.9rem 1.1rem; border-bottom:1px solid #2c2c2c; transition: background .3s; }
tr:hover td{ background-color: rgba(100,149,237,.05); box-shadow: inset 0 0 10px var(--primary-glow); }

/* Explicit narrow columns (optional) — will be neutralized by overrides below */
table td:nth-child(2), table th:nth-child(2){ width:100px; white-space:nowrap; }
table td:last-child, table th:last-child{ width:80px; text-align:center; }

/* ---------- Project grid ---------- */
.project-grid{
  display:grid; grid-template-columns:300px 1fr 300px; gap:2rem;
  width:95%; margin:0 auto; padding:0;
}
.project-grid .card{
  padding:1.5rem; background:rgba(15,15,15,.95);
  border:1px solid var(--border-color); box-shadow:0 0 10px var(--primary-glow);
  overflow:hidden;
}
.project-grid .card:nth-child(1){ max-width:300px; }
.project-grid .card:nth-child(3){ max-width:300px; justify-self:end; }
.project-grid-wrapper{ margin-block-start:0 !important; }

/* ---------- Admin nav meta ---------- */
.admin-nav{ margin-top:1rem; border-top:1px solid #444; padding-top:.5rem; }
.admin-label{ font-size:.75rem; color:#999; padding-left:1rem; }

/* ---------- Autosave table inputs ---------- */
.autosave-table input[type="text"],
.autosave-table input[type="email"],
.autosave-table select,
.autosave-table textarea{
  background:transparent; color:var(--text-muted);
  border:none; border-bottom:1px solid var(--border-color);
  border-radius:0; padding:.4rem .5rem; font-size:.85rem; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.autosave-table input:focus,
.autosave-table select:focus,
.autosave-table textarea:focus{
  outline:none; border-bottom:1px solid var(--primary); box-shadow:0 1px 0 var(--primary-glow); background:transparent;
}
.autosave-table textarea{ resize:vertical; min-height:36px; overflow:auto; }
.autosave-table td{ padding:.5rem .6rem; vertical-align:middle; position:relative; overflow:visible; }
.autosave-table select{
  background:#0f0f0f; color:var(--text-muted); border:1px solid var(--border-color);
  padding:.4rem .6rem; font-size:.9rem; border-radius:6px; width:100%; appearance:none;
  background-image: linear-gradient(45deg, var(--fightclub-pink), var(--primary));
  background-repeat:no-repeat; background-position:right .4rem center; background-size:1rem 1rem;
  color-scheme:dark;
}

/* ---------- Shred animation ---------- */
.shred-btn{
  position:absolute; top:50%; right:-10px; transform:translateY(-50%);
  font-size:1rem; color:#ff4444; font-weight:700; cursor:pointer; opacity:0; transition:opacity .2s; z-index:10;
}
tr.shredding{ animation:ninjaShred .5s ease-out forwards; }
@keyframes ninjaShred{
  0%{ transform:scale(1); opacity:1; }
  25%{ transform:scale(1.02) rotate(.5deg); }
  50%{ transform:scale(.98) rotate(-.5deg); }
  75%{ transform:scale(.95); opacity:.3; }
  100%{ transform:scaleY(0); opacity:0; height:0; }
}

/* ---------- Market Data page ---------- */
.market-data-page{
  display:block; padding:2rem;
  margin-left: var(--sidebar-width);
  /* FIX: use padding-top instead of margin-top to match top bar */
  padding-top: var(--topbar-height);
}
.market-data-page .card{ margin-bottom:2rem; max-width:360px; }

#dom-tape{
  display:flex; flex-direction:column-reverse;
  font-family:monospace; font-size:.85rem; line-height:1.4;
}
.dom-level{ padding:2px 6px; border-bottom:1px solid #222; color:var(--text-muted); }

/* ---------- Backfill ---------- */
.backfill-container{
  max-width:960px; margin:4rem auto; padding:2rem; background:#121212;
  border-radius:12px; box-shadow:0 0 30px rgba(0,153,255,.25); color:#eee;
}
.backfill-container h2{
  font-size:2rem; margin-bottom:1.5rem; color:#4da6ff;
  display:flex; align-items:center; gap:.5rem;
}
.scan-form{ display:flex; align-items:center; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.scan-form input[type="date"]{ padding:.4rem .8rem; border-radius:6px; border:none; background:#1e1e1e; color:#eee; }
.scan-btn{
  background:linear-gradient(145deg,#007bff,#0056b3); color:#fff;
  padding:.5rem 1rem; border-radius:8px; border:none; font-weight:700; cursor:pointer; transition:.2s;
}
.scan-btn:hover{ background:linear-gradient(145deg,#3399ff,#0066cc); }
.backfill-table{
  width:100%; border-collapse:collapse; background:#1a1a1a;
  border-radius:8px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,.6);
}
.backfill-table th, .backfill-table td{ padding:.75rem 1rem; text-align:center; border-bottom:1px solid #333; }
.backfill-table thead{ background:#2b2b2b; color:#4da6ff; }
.backfill-table tbody tr:hover{ background:#262626; }
/* NOTE: legacy nowrap on last 3 columns is neutralized by overrides below */
.backfill-table td:nth-last-child(-n+3),
.backfill-table th:nth-last-child(-n+3){ width:80px; white-space:nowrap; }
.backfill-table td form{ margin:0; }
.btn.btn-xs{ padding:.3rem .6rem; font-size:.8rem; }
.log-link{ text-decoration:none; font-size:1.2rem; }
.log-dash{ color:#555; }

/* =========================================================
   DASHBOARD (Market Dashboard layout)
   ========================================================= */
.dashboard-wrapper{
  /* FIX: wrapper has no page offsets; main-content owns them */
  padding: 12px 16px;
  display:grid;
  grid-template-areas:
    "top top"
    "chart chat"
    "bottom bottom";
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: min-content;
  gap:12px;
  min-width:0; /* allow shrink; prevents overflow */
}
.market-top    { grid-area: top;    min-width:0; }
.chart-area    { grid-area: chart;  min-width:0; overflow:hidden; }
.chat-area     { grid-area: chat;   min-width:0; display:flex; flex-direction:column; }
.levels-bottom { grid-area: bottom; min-width:0; display:flex; flex-direction:row; gap:10px; }

/* Chart must obey parent */
.chart-area canvas{
  display:block;
  width:100% !important;
  height:420px !important;   /* stream-friendly */
  max-height:60vh;
}

/* Latest-1m row */
#md-latest{ width:100%; border-collapse:collapse; }
#md-latest th, #md-latest td{ padding:.6rem .8rem; border-bottom:1px solid #2c2c2c; }

/* Chat widgets (right column) */
/* ===== Chat hard clamps (dashboard) ===== */
.chat-area{ min-width:0; overflow-x:hidden; }
.chat-area *{ max-width:100%; box-sizing:border-box; }

/* input layout */
.chat-area .chat-form{ display:flex; gap:8px; align-items:flex-start; width:100%; }
.chat-area .chat-form textarea,
.chat-area .chat-form input[type="text"]{
  width:100% !important;
}

/* ===== Pagination (shared) ===== */
.pagination{margin-top:20px;text-align:center;}
.pagination a,.pagination span{display:inline-block;margin:0 4px;padding:8px 14px;font-size:.9rem;border-radius:6px;background:#1f1f1f;color:var(--primary);text-decoration:none;transition:background .2s,color .2s;}
.pagination a:hover{background:var(--primary);color:#111;}
.pagination .current{background:var(--primary);color:#111;font-weight:700;}

/* =========================================================
   ⭐ GLOBAL TABLE FIXES (OVERRIDES) — KEEP NAMES, STOP SPILLOVER
   Drop this block at the end to win specificity battles.
   ========================================================= */

/* Both wrappers behave the same; use either across the app */
.records-table-wrapper,
.table-wrapper{
  overflow-x:auto;
  max-width:100%;
  margin:1rem 0;
  border-radius:10px;
}

/* Normalize all tables under these wrappers and the base <table> */
.records-table-wrapper table,
.table-wrapper table,
table{
  width:100%;
  table-layout:fixed;          /* predictable column sizing */
  border-collapse:collapse;
}

/* Headers */
.records-table-wrapper thead th,
.table-wrapper thead th,
table thead th{
  text-align:center;
  vertical-align:middle;
  padding:12px;
  background: linear-gradient(to right, #1f1f1f, #232323);
  color: var(--primary);
  border-bottom:1px solid var(--border-color);
}

/* Cells */
.records-table-wrapper td,
.table-wrapper td,
table tbody td{
  text-align:center;
  vertical-align:middle;
  padding:.9rem 1.1rem;
  border-bottom:1px solid #2c2c2c;
  color:var(--text-muted);

  /* ✅ The actual fix: wrap everything, break anywhere if needed */
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Neutralize legacy nowrap/width constraints that caused overflow */
table td:nth-child(2),
table th:nth-child(2),
table td:last-child,
table th:last-child,
.backfill-table td:nth-last-child(-n+3),
.backfill-table th:nth-last-child(-n+3){
  white-space:normal !important;
  width:auto !important;
}

/* Keep your hover look */
.records-table-wrapper tbody tr:hover td,
.table-wrapper tbody tr:hover td,
table tbody tr:hover td{
  background-color: rgba(100,149,237,.05);
  box-shadow: inset 0 0 10px var(--primary-glow);
}

/* Backfill table keeps its unique header color but uses global wrapping */
.backfill-table thead th{
  background:#2b2b2b !important;
  color:#4da6ff !important;
}

/* Optional: subtle zebra for readability (applies only inside wrappers) */
.records-table-wrapper tbody tr:nth-child(odd) td,
.table-wrapper tbody tr:nth-child(odd) td{ background:#181818; }
.records-table-wrapper tbody tr:nth-child(even) td,
.table-wrapper tbody tr:nth-child(even) td{ background:#202020; }

/* Horizontal scrollbar style (only when needed) */
.records-table-wrapper::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar{ height:8px; }
.records-table-wrapper::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:4px; }


/* =========================================================
   Dolores Disclaimer Modal
   ========================================================= */
#legal-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* default hidden */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7); /* dark overlay */
  z-index: 10000; /* above top ticker and sidebar */
}

#legal-modal.show {
  display: flex;
  animation: fadeInBg 0.25s ease-out;
}

.modal-card {
  max-width: 420px;
  width: 90%;
  padding: 2rem;
  text-align: center;
  background: rgba(15,15,15,.95);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 40px var(--primary-glow);
  animation: fadeInUp 0.3s ease-out;
}

/* Fade-in for backdrop */
@keyframes fadeInBg {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide-up for modal card */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   GLOBAL ACTION BUTTON FIXES FOR TABLES
   ========================================================= */

/* Container for actions in any table */
.table-actions {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;
  gap: 8px;                   /* space between buttons */
  flex-wrap: wrap;            /* wrap if too many buttons */
  min-width: 120px;           /* prevents squishing */
}

/* Buttons inside table actions */
.table-actions .btn {
  padding: 6px 10px;
  font-size: 0.8rem;
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;
  flex: 1 1 auto; /* allow flexible sizing */
}

/* Color variants */
.table-actions .btn-view {
  background: #3498db;
  color: white;
}
.table-actions .btn-edit {
  background: #f39c12;
  color: white;
}
.table-actions .btn-delete {
  background: #e74c3c;
  color: white;
}

/* Hover effects */
.table-actions .btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}


/* Toggle switch overrides */
.form-check.form-switch input[type="checkbox"] {
  width: 2.5rem;
  height: 1.3rem;
  cursor: pointer;
  background-color: #222;
  border: 1px solid #555;
  border-radius: 1rem;
  position: relative;
  appearance: none;
  outline: none;
  transition: background-color 0.3s ease-in-out;
}

.form-check.form-switch input[type="checkbox"]:checked {
  background-color: var(--primary);
}

.form-check.form-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

.form-check.form-switch input[type="checkbox"]:checked::before {
  transform: translateX(1.2rem);
}

.form-check-label {
  font-weight: 500;
  color: var(--text-muted);
}

/* ---- Form Inputs: Modern dark theme ---- */
input[type="text"],
textarea,
select {
  width: 100%;
  padding: 0.7rem 1rem;
  background: #1a1a1a;
  color: #f0f0f0;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
}

/* Placeholder text */
input::placeholder,
textarea::placeholder {
  color: #777;
}

/* Hover state */
input[type="text"]:hover,
textarea:hover,
select:hover {
  border-color: var(--primary);
}

/* Focused state */
input[type="text"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
  background: #111;
}

/* Textarea specific */
textarea {
  min-height: 120px;
  resize: vertical;
}

/* Labels */
.form-label {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.3rem;
  display: block;
}




/* static/algo_engine/css/kitties_panel.css */
/* static/algo_engine/css/setup_panel.css */

/* Panel stays black */
.kitties-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text, #fff);
}

/* sentiment row at top */
.setup-sentiment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

/* card container */
.setup-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* card style */
.setup-card {
  background: #333; /* clean gray */
  border-radius: 12px;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* neon glow breathing */
.setup-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 14px;
  background: linear-gradient(45deg, #ff007f, #7f00ff, #00eaff);
  filter: blur(12px);
  opacity: 0.6;
  animation: breathing 6s ease-in-out infinite;
  z-index: 0;
}

.setup-card * {
  position: relative;
  z-index: 1; /* text and dot above glow */
}

@keyframes breathing {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* dot styling */
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

.dot.bullish { background: #16a34a; }  /* green */
.dot.bearish { background: #dc2626; }  /* red */
.dot.neutral { background: #facc15; }  /* yellow */

.dolores-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}


/* =========================================================
   LOGIN INPUT POLISH — FORCE WHITE INPUTS
   ========================================================= */

.card-login-form input[type="email"],
.card-login-form input[type="password"] {
  background: #ffffff;
  color: #111;
  border: 1px solid cornflowerblue;
  box-shadow:
    0 0 12px rgba(100,149,237,.35),
    inset 0 0 0 1px rgba(255,255,255,.6);
}

/* placeholder color */
.card-login-form input::placeholder {
  color: #777;
}

/* focus stays white (critical) */
.card-login-form input[type="email"]:focus,
.card-login-form input[type="password"]:focus {
  background: #ffffff;
  color: #111;
  outline: none;
  box-shadow:
    0 0 16px rgba(100,149,237,.55),
    inset 0 0 0 1px rgba(255,255,255,.8);
}