:root{
  --bg:#0f172a; --bg-2:#0b1220; --card:#111827; --b:#1f2937; --b2:#334155;
  --tx:#e2e8f0; --muted:#94a3b8; --accent:#2563eb; --ok:#10b981; --warn:#f59e0b; --bad:#ef4444;
  --top:56px; --kpi:44px; --filters:52px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;-webkit-text-size-adjust:100%}
.hidden{display:none!important} .container{max-width:1100px;margin:0 auto;padding:0 16px}

.btn{appearance:none;border:1px solid var(--b2);background:var(--card);color:var(--tx);padding:10px 14px;border-radius:12px;font:600 16px/1 system-ui;cursor:pointer}
.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}
.input,.select{width:100%;height:46px;padding:10px 12px;font-size:16px;border-radius:12px;border:1px solid var(--b2);background:var(--bg-2);color:var(--tx)}
.field{display:flex;flex-direction:column;gap:10px}

.topbar{position:sticky;top:0;height:var(--top);display:flex;align-items:center;background:var(--bg-2);border-bottom:1px solid var(--b);z-index:80}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{height:24px;width:24px;border-radius:50%}
.actions{display:flex;gap:8px}

.kpi{position:sticky;top:var(--top);z-index:70;background:var(--bg);border-bottom:1px solid var(--b)}
.kpi__inner{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:10px 16px}
.kpi__item{color:var(--muted)}

.filters{position:sticky;top:calc(var(--top) + var(--kpi));z-index:66;background:var(--bg);border-bottom:1px solid var(--b)}
.filters__header{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 16px}
.filters__controls{display:flex;gap:12px;align-items:center}

.columns-header{position:sticky;top:calc(var(--top) + var(--kpi) + var(--filters));z-index:62;background:var(--bg-2);border-bottom:1px solid var(--b)}
.columns{display:grid;grid-template-columns:32% 20% 30% 18%;padding:12px 0;font-weight:700}
.columns span:nth-child(1){text-align:left}
.columns span:nth-child(2){text-align:center}
.columns span:nth-child(3){text-align:center}
.columns span:nth-child(4){text-align:right}

.table-container{}
.table-wrap{overflow:auto;border:1px solid var(--b);border-radius:12px}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table colgroup col.col-code{width:32%}.table colgroup col.col-rating{width:20%}.table colgroup col.col-sum{width:30%}.table colgroup col.col-status{width:18%}
.table thead{height:0;visibility:hidden}
.table tbody td{padding:12px;border-bottom:1px solid var(--b);background:#0f162a;transition:background .15s ease}
.table tbody tr:hover{background:#0b1220}
.table tbody td:nth-child(1){text-align:left}
.table tbody td:nth-child(2){text-align:center}
.table tbody td:nth-child(3){text-align:center}
.table tbody td:nth-child(4){text-align:right}

.badge{border:1px solid var(--b2);background:var(--bg-2);color:var(--muted);padding:2px 8px;border-radius:999px;font-size:12px;display:inline-block}
.badge--ok{color:#10b981;border-color:#10b981}.badge--warn{color:#f59e0b;border-color:#f59e0b}.badge--bad{color:#ef4444;border-color:#ef4444}

.pager{display:flex;align-items:center;gap:8px;justify-content:center;padding:12px 0}
.pager #page-info{min-width:160px;text-align:center;color:var(--muted)}

.view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.card{background:var(--card);border:1px solid var(--b);border-radius:16px;padding:24px 20px;box-shadow:0 12px 36px rgba(0,0,0,.35)}
.card .brand{margin-bottom:10px}
.card h2{margin:6px 0 14px;text-align:center}

.backbar{position:sticky;top:0;background:var(--bg-2);border-bottom:1px solid var(--b);z-index:90;
  padding:8px 16px;display:flex;justify-content:space-between;align-items:center}
.profile{padding:16px}
.profile .row{display:grid;grid-template-columns:1fr 2fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--b)}
.profile .label{color:var(--muted)}


/* === PAGER HALF SIZE OVERRIDES === */
.pager{gap:6px;padding:6px 0;justify-content:space-between;align-items:center;flex-wrap:nowrap}
.pager #page-info{font-size:12px;line-height:1.2;min-width:auto}
.pager .btn{height:28px;min-width:28px;padding:0 8px;border-radius:10px;font-size:12px;line-height:26px}
.pager label{display:flex;align-items:center;gap:6px;margin:0}
.pager label span{font-size:12px}
.pager .select, .pager select{height:28px;font-size:12px;border-radius:10px;padding:0 8px;min-width:64px}
@media (max-width:460px){
  .pager{gap:4px}
  .pager #page-info{font-size:11px}
  .pager .btn{height:26px;min-width:26px;font-size:11px;line-height:24px;padding:0 6px}
  .pager .select, .pager select{height:26px;font-size:11px;min-width:58px;padding:0 6px}
}


/* === Scroll limitation & UX tweaks for table wrap === */
.table-wrap{
  overflow-x:auto;
  overscroll-behavior-x:contain; /* limit momentum */
  -webkit-overflow-scrolling: touch;
}


/* Symmetric horizontal padding for filters */
.filters .container{padding:10px 16px;}


/* === UI polish: consistent labels & alignment === */
.filters .field > label{font-size:12px; line-height:1; color:var(--muted); margin:0 0 4px 2px;}
.columns.container{padding:0 16px;} /* match .container side padding for perfect left/right alignment */
.table-container.container{padding:0 16px;} /* keep table aligned with filters/header */

/* Center status badges in the status column */
.table tbody td:nth-child(4){ text-align: center !important; }
.table tbody td:nth-child(4) .badge{ margin: 0 auto; }


/* Longer dividers under each row */
.table tbody tr{ position: relative; }
.table tbody tr::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--b); pointer-events:none; }
/* Restore proper row dividers without cross strike */
.table tbody td{ border-bottom:1px solid var(--b) !important; }
.table tbody tr::after{ display:none !important; }

/* Adjust column header alignments */
.columns{ display:grid; grid-template-columns: 28% 22% 30% 20%; padding:12px 0; font-weight:700; }
.columns span:nth-child(1){ text-align:left; padding-left:4px; } /* Код */
.columns span:nth-child(2){ text-align:left; } /* Рейтинг */
.columns span:nth-child(3){ text-align:left; } /* Взносы */
.columns span:nth-child(4){ text-align:left; } /* Статус */


/* --- Fix: divider must be under content, not crossing text --- */
.table tbody tr{ position: relative; }
.table tbody tr::after{ z-index: 0; }
.table tbody td{ position: relative; z-index: 1; }

/* --- Headers alignment per user marks --- */
.columns span:nth-child(1){ text-align:left; padding-left:12px; }

/* Keep data alignment for table body as before */
.table tbody td:nth-child(2){ text-align: center; }
.table tbody td:nth-child(3){ text-align: center; }
.table tbody td:nth-child(4){ text-align: right; }

/* Align headers with their data */
.columns span:nth-child(2){ text-align:center; } /* Рейтинг aligned with numbers */
.columns span:nth-child(3){ text-align:center; } /* Взносы aligned with money values */
.columns span:nth-child(4){ text-align:right; padding-right:12px; } /* Статус stays right */



















/* Header alignment v14 (status above badge) */
.columns span:nth-child(1){ text-align:left; padding-left:12px; } /* Код */
.columns span:nth-child(2){ text-align:left; padding-left:2px; }  /* Рейтинг */
.columns span:nth-child(3){ text-align:left; padding-left:2px; }  /* Взносы */
.columns span:nth-child(4){ text-align:center; width:120px; }     /* Статус fixed above badge */

/* Header alignment hotfix (pull left) */
.columns span:nth-child(2){ text-align:left !important; padding-left:0 !important; }
.columns span:nth-child(3){ text-align:left !important; padding-left:0 !important; }


/* ==== Investments & Profile Enhancements ==== */
.msk-date{opacity:0.8;font-variant-numeric:tabular-nums}

.bottom-fixed{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:10px;background:var(--bg);border-top:1px solid var(--b);z-index:90}
.bottom-fixed .btn{min-width:200px}

.investments .tabs{display:flex;gap:8px;margin:12px 0}
.investments .tab{padding:8px 12px;border:1px solid var(--b);background:var(--bg-2);cursor:pointer;border-radius:8px}
.investments .tab.active{background:var(--bg);font-weight:700}
.tab-content{margin-top:10px}
.tab-content.hidden{display:none}

.table-mobile td{display:table-cell}
@media (max-width: 480px){
  .table-mobile thead{display:none}
  .table-mobile tr{display:block;border:1px solid var(--b);border-radius:8px;margin:8px 0;padding:6px}
  .table-mobile td{display:flex;justify-content:space-between;padding:6px 0}
  .table-mobile td::before{content:attr(data-label);font-weight:600;margin-right:12px}
}

.market-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:10px 0}
.h-compact{margin:0;line-height:1.1}
.subtle{opacity:0.7;font-size:0.9em}

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.kpi-card{border:1px solid var(--b);border-radius:12px;padding:12px;background:var(--bg-2)}
.kpi-card .kpi-title{opacity:0.7;font-size:0.9em}
.kpi-card .kpi-value{font-size:1.4em;font-weight:800;margin-top:4px}
.kpi-card .kpi-sub{opacity:0.7;margin-top:4px}

/* Admin panel */
.admin-actions{display:flex;gap:8px;margin:12px 0;align-items:center}
.form-row{margin:6px 0}
dialog{border:1px solid var(--b);border-radius:12px;padding:10px}


.btn-primary{background:var(--accent,#2e7);color:#000;border:1px solid var(--b);padding:8px 14px;border-radius:10px;cursor:pointer}
.btn-primary.btn-sm{padding:4px 8px;border-radius:8px;font-size:0.9em}


/* Dense table styling for My Projects */
.table-dense th, .table-dense td { padding: 6px 8px; }
.mono { font-variant-numeric: tabular-nums; }

/* Responsive my-projects table */
@media (max-width: 480px){
  #my-projects-table thead { display: none; }
  #my-projects-table tr { display:block; border:1px solid var(--b); border-radius:8px; margin:8px 0; padding:6px; }
  #my-projects-table td { display:flex; justify-content:space-between; padding:6px 0; }
  #my-projects-table td::before { content: attr(data-label); font-weight:600; margin-right:12px; }
}


/* Hide legacy market-head (Категория/фильтр) if present */
.market-head{display:none}

/* Actions cell with status at right edge */
.market-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.market-actions .badge{margin-left:auto}

/* Dialog minimal styling */
dialog#invest-modal { border:1px solid var(--b); border-radius:12px; padding:16px; max-width: 340px; }
dialog#invest-modal::backdrop{ background: rgba(0,0,0,.4); }
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}


/* Modal overlay (dialog fallback) */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:999}
.overlay.hidden{display:none}
.overlay__box{background:var(--bg,#101317);border:1px solid var(--b,#2a2f38);border-radius:12px;padding:16px;max-width:340px;width:calc(100% - 40px)}
.overlay__title{font-weight:700;margin-bottom:6px}
.overlay__body{opacity:0.9}


/* Admin only helpers */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}



/* ==== FIX 1: KPI block stacked vertically (members on 1st line, fund on 2nd) ==== */
.kpi__inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-start !important;
  padding: 10px 16px !important;
}
.kpi__item { width: 100% !important; }



/* ==== FIX 2: Compact table (no horizontal scroll, status visible) ==== */
.table { table-layout: fixed !important; }
.table th, .table td { padding: 8px 10px !important; line-height: 1.2 !important; }
.table thead th { font-size: 13px !important; }
.table tbody td { font-size: 14px !important; }

.table td:nth-child(2), .table td:nth-child(3){
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

/* Column widths */
.col-code   { width: 34% !important; }
.col-rating { width: 18% !important; }
.col-sum    { width: 28% !important; }
.col-status { width: 20% !important; text-align: right !important; }

/* Allow code to wrap to two lines */
.table td:first-child { word-break: break-word !important; line-height: 1.15 !important; font-size: 13px !important; }

/* Smaller status badge */
.badge { font-size: 12px !important; padding: 2px 8px !important; }

.table-wrap { margin: 0 !important; }

@media (max-width: 420px){
  .table th, .table td { padding: 6px 8px !important; }
  .table thead th { font-size: 12px !important; }
  .table tbody td { font-size: 13px !important; }
  .col-code   { width: 36% !important; }
  .col-rating { width: 18% !important; }
  .col-sum    { width: 26% !important; }
  .col-status { width: 20% !important; }
  .badge { font-size: 11px !important; padding: 2px 6px !important; }
}



/* ==== FIX 3: Minimize side paddings (wider content on mobile) ==== */
#app-view .container,
#app-view .kpi__inner.container,
#app-view .filters .container,
#app-view .columns.container,
#app-view .table-container.container {
  max-width: 100vw !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.columns.container { padding-left: 8px !important; padding-right: 8px !important; }
.filters__header { padding-left: 0 !important; padding-right: 0 !important; }
.filters { padding-top: 6px !important; padding-bottom: 6px !important; }
.table-wrap { border-radius: 12px !important; }



/* ==== FIX 4: Align table headers with values (Код/Рейтинг/Взносы/Статус) ==== */
/* Make the columns header use the same column widths as the table */
.columns.container {
  display: grid !important;
  grid-template-columns: 34% 18% 28% 20% !important; /* Код / Рейтинг / Взносы / Статус */
  column-gap: 0 !important;
  padding-top: 8px !important;
  border-top: 1px solid #1e293b !important;
}

/* Header text alignment per column */
.columns.container span:nth-child(1) { text-align: left  !important; }  /* Код */
.columns.container span:nth-child(2) { text-align: center !important; } /* Рейтинг */
.columns.container span:nth-child(3) { text-align: center !important; } /* Взносы */
.columns.container span:nth-child(4) { text-align: right !important; }  /* Статус */

/* Table cells alignment to match headers */
.table tbody td:nth-child(1) { text-align: left   !important; }  /* Код */
.table tbody td:nth-child(2) { text-align: center !important; }  /* Рейтинг */
.table tbody td:nth-child(3) { text-align: center !important; }  /* Взносы */
.table tbody td:nth-child(4) { text-align: right  !important; }  /* Статус */



/* ==== FIX 5: Shift values under headers exactly (left-align rating & sums) ==== */
/* Column widths (slightly adjusted): Код 32% / Рейтинг 20% / Взносы 30% / Статус 18% */
.col-code   { width: 32% !important; }
.col-rating { width: 20% !important; }
.col-sum    { width: 30% !important; }
.col-status { width: 18% !important; }

.columns.container {
  grid-template-columns: 32% 20% 30% 18% !important;
}

/* Header titles alignment */
.columns.container span:nth-child(2) { text-align: left !important; }  /* Рейтинг */
.columns.container span:nth-child(3) { text-align: left !important; }  /* Взносы */

/* Table cells alignment + tighter inner paddings for columns 2/3 */
.table tbody td:nth-child(2),
.table tbody td:nth-child(3){
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 6px !important;
}

/* Keep status to the far right */
.table tbody td:nth-child(4){
  text-align: right !important;
  padding-right: 10px !important;
}



/* ==== FIX 6: Pull status column closer + disable horizontal scroll ==== */

/* Adjust column widths to give more room and pull Status left */
.col-code   { width: 30% !important; }
.col-rating { width: 20% !important; }
.col-sum    { width: 28% !important; }
.col-status { width: 22% !important; }

.columns.container {
  grid-template-columns: 30% 20% 28% 22% !important;
}

/* Align status header and cells to left inside their column */
.columns.container span:nth-child(4){
  text-align: left !important;
  padding-left: 10px !important;
}
.table tbody td:nth-child(4){
  text-align: left !important;
  padding-left: 10px !important;
}

/* Disable horizontal scroll entirely */
.table-wrap{
  overflow-x: hidden !important;
}



/* ==== FIX 7: Center align 'неактивен' and 'заблокирован' badges ==== */

/* Make status column flexbox to center variable-length badges */
.table tbody td:nth-child(4){
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure all badges have min-width and are centered */
.table tbody td:nth-child(4) .badge{
  margin: 0 auto !important;
  display: inline-block !important;
  text-align: center !important;
  min-width: 80px; /* enough for 'заблокирован' */
}



/* ==== FIX 8: Full-bleed layout — remove side gutters and overflow ==== */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Make all main containers span the viewport width */
#app-view,
#app-view .topbar .container,
#app-view .kpi__inner.container,
#app-view .filters .container,
#app-view .columns.container,
#app-view .table-container.container {
  max-width: 100vw !important;
  width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Topbar spacing to match */
.topbar .container {
  max-width: 100vw !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Avoid any accidental global container max-width caps */
.container {
  max-width: 100vw !important;
}

/* Ensure no child introduces horizontal scroll */
.view, .kpi, .filters, .columns, .table-container, .table-wrap {
  overflow-x: hidden !important;
}



/* ==== FIX 9: symmetric side paddings + stop right-side bleed under sticky headers ==== */

/* Make left/right paddings identical (slightly smaller) for header columns and table */
#app-view .columns.container,
#app-view .table-container.container {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Keep the table block hugging edges symmetrically */
.table-wrap { margin-left: 0 !important; margin-right: 0 !important; border-radius: 12px !important; }

/* Solid backgrounds + higher stacking for sticky bars so nothing "shines through" on scroll */
.topbar, .kpi, .filters, .columns {
  background-color: var(--bg-2) !important;
  z-index: 1000 !important;
  overflow: hidden !important; /* clip any children to avoid bleed */
  backface-visibility: hidden; /* fix iOS repaints */
}

/* Preserve order: topbar above kpi, kpi above filters, filters above columns */
.topbar { z-index: 1030 !important; }
.kpi    { z-index: 1020 !important; }
.filters{ z-index: 1010 !important; }
.columns{ z-index: 1005 !important; }

/* Ensure widths really span full viewport without subpixel gaps on iOS */
.topbar .container,
.kpi__inner.container,
.filters .container,
.columns.container {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Prevent table content from overlapping headers while scrolling */
.table-container, .table-wrap { z-index: 1 !important; position: relative !important; }



/* ==== FIX 10: Equal left/right padding for table container ==== */
#app-view .table-container.container {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#app-view .columns.container {
  padding-left: 8px !important;
  padding-right: 8px !important;
}



/* ==== FIX 11: Full-width dark background, centered content container ==== */

/* Make header sections stretch full width with solid background */
.topbar, .kpi, .filters, .columns {
  background-color: var(--bg-2) !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Center inner containers with limited max-width */
.topbar .container,
.kpi__inner.container,
.filters .container,
.columns.container,
.table-container.container {
  max-width: 1100px !important;   /* same as design constraint */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

/* Ensure table container background matches */
.table-container.container {
  background-color: transparent !important;
}



/* ==== FIX 12: Fill background fully to edges (no lighter strips) ==== */

/* Make the global page and the app-view have the same dark background */
html, body, #app-view {
  background-color: var(--bg-2) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Ensure all sticky sections also share exact same bg */
.topbar, .kpi, .filters, .columns {
  background-color: var(--bg-2) !important;
}

/* Eliminate any accidental lighter gutters caused by padding */
#app-view .kpi__inner.container,
#app-view .filters .container,
#app-view .columns.container {
  background-color: transparent !important; /* inside stays transparent */
  padding-left: 8px !important;  /* keep symmetric paddings but the page bg is dark now */
  padding-right: 8px !important;
}

/* Optional: match the page background under the table area as well */
.table-container.container {
  background-color: var(--bg-2) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Keep the table card rounded with its own inner bg */
.table-wrap {
  background-color: var(--bg) !important; /* inner card color */
  border-radius: 12px !important;
}



/* ==== FIX 13: Brand spacing (logo + MKM) ==== */
.topbar .brand {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;          /* меньше расстояние между логотипом и надписью */
  padding-left: 12px !important;/* небольшой отступ от левого края */
}

.topbar .brand img {
  height: 22px !important;      /* подгони при желании на 20–24px */
  width: auto !important;
  display: block !important;
}

/* =========================================================
   LUX THEME OVERRIDES — ultra‑premium look & feel
   Applied on top of existing styles without breaking layout.
   Date: 2025‑08‑24
   ========================================================= */
:root{
  --bg:#0a0b0d;        /* deep black */
  --bg-2:#0b0d12;      /* ink */
  --card:#0e1016;      /* obsidian */
  --b:rgba(255,255,255,.08);
  --b2:rgba(255,255,255,.16);
  --tx:#e9ecef;        /* platinum */
  --muted:#a7b0be;     /* cool silver */
  --accent:#c9aa71;    /* champagne gold */
  --accent-2:#987d4f;  /* old gold */
  --ok:#38d39f; --warn:#f5c567; --bad:#ff6b6b;
  --top:64px; --kpi:48px; --filters:56px;
  --glow:0 0 0 1px rgba(201,170,113,.25), 0 10px 30px rgba(0,0,0,.45);
}

/* Typography & global polish */
html, body{ background:var(--bg); color:var(--tx); }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  font-feature-settings:"tnum" 1,"cv10" 1,"ss02" 1; /* tabular nums for figures */
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Brand */
.brand span{
  letter-spacing:.12em; text-transform:uppercase; font-weight:800;
  background:linear-gradient(90deg,var(--accent),#f6e08f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Bars */
.topbar, .backbar{
  background:rgba(11,13,18,.72);
  border-bottom:1px solid rgba(201,170,113,.15);
  backdrop-filter:blur(12px);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.kpi{
  background:rgba(10,11,13,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
}
.kpi__item{ color:#d7dce6; font-variant-numeric:tabular-nums; }
.kpi__item strong{ color:var(--accent); }

/* Controls */
.input,.select{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.12);
  color:var(--tx);
  border-radius:14px;
  height:46px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.input:focus,.select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(201,170,113,.18);
  background:rgba(255,255,255,.03);
}

/* Buttons */
.btn{
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06));
  color:var(--tx);
  padding:10px 16px;
  border-radius:14px;
  font:600 16px/1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  box-shadow:0 2px 0 rgba(255,255,255,.04) inset;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
  will-change:transform;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.35); }
.btn:active{ transform:translateY(0); box-shadow:0 2px 6px rgba(0,0,0,.35) inset; }

.btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:rgba(201,170,113,.6);
  color:#0a0b0d;
  text-shadow:0 0 1px rgba(255,255,255,.25);
  box-shadow:0 10px 24px rgba(201,170,113,.28), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.btn--primary:hover{ filter:brightness(1.05); box-shadow:0 14px 28px rgba(201,170,113,.36), 0 0 0 1px rgba(255,255,255,.08) inset; }

/* Cards */
.card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:var(--glow);
}
.card h2{ letter-spacing:.04em; }
.card .brand{ margin-bottom:14px; }

/* Table */
.table-wrap{ border-color:rgba(255,255,255,.10); }
.table{
  border-collapse:separate;
  border-spacing:0;
}
.table tbody td{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00));
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  padding:14px 12px;
  transition:background .15s ease, color .15s ease;
}
.table tbody tr:hover td{ background:rgba(201,170,113,.06); }
.table tbody td:nth-child(1){
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.02em; text-transform:uppercase;
}

/* Status badges */
.badge{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.02);
  color:#e5e7eb;
}
.badge--ok{ color:#86efac; border-color:#22c55e; background:rgba(34,197,94,.08); }
.badge--warn{ color:#facc15; border-color:#eab308; background:rgba(234,179,8,.10); }
.badge--bad{ color:#f87171; border-color:#ef4444; background:rgba(239,68,68,.10); }

/* Login view background */
body.gated .view{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(201,170,113,.18), transparent),
    radial-gradient(800px 600px at 95% 0%, rgba(255,255,255,.06), transparent),
    var(--bg);
}

/* Columns & headers */
.columns{ color:#cbd5e1; }
.columns span{ letter-spacing:.02em; }

/* Scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(201,170,113,.9), rgba(152,125,79,.9));
  border-radius:8px; border:1px solid rgba(0,0,0,.25);
}
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); }

/* Mobile tweaks */
@media (max-width:480px){
  .btn{ border-radius:12px; }
  .card{ border-radius:16px; }
}


/* =======================
   ELITE CLUB EXTRAS
   ======================= */
:root{
  --lux-gold-1:#d8c089;
  --lux-gold-2:#b8945a;
  --lux-gold-3:#8e6e39;
  --lux-ink:#07080a;
}
/* Crest (monogram) */
.crest{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; padding:8px 12px; border-radius:14px;
  border:1px solid rgba(201,170,113,.20);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  margin-right:12px;
}
.crest:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.45); border-color:rgba(201,170,113,.35); filter:brightness(1.05); }
.crest__svg{ width:28px; height:28px; display:block; }
.crest__wordmark{
  font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  background:linear-gradient(90deg, var(--accent), #f6e08f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:13px;
}

/* Headings */
h1, h2, .card h2{
  letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(90deg, var(--lux-gold-1), var(--lux-gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1{ font-size:28px; }
h2{ font-size:18px; }

/* Premium borders on cards */
.card{
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(1000px 200px at 10% -10%, rgba(201,170,113,.18), transparent 60%),
             linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  mix-blend-mode:screen; opacity:.6;
}
.card::after{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  border:1px solid rgba(201,170,113,.15);
  pointer-events:none;
}

/* Subtle entrance animation */
@keyframes luxFade {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
.card, .table-wrap, .kpi, .topbar{ animation:luxFade .4s ease both; }

/* Table row separators refined */
.table tbody td{ border-bottom:1px solid rgba(201,170,113,.10) !important; }

dialog#next-meeting-modal::backdrop{background:rgba(0,0,0,.45);}

/* === FINAL: Perfect header alignment with body columns === */
.columns.container{
  display: grid !important;
  grid-template-columns: 32% 20% 30% 18% !important; /* match <colgroup> */
  gap: 0 !important;
  border-top: 1px solid var(--b) !important;
  padding: 12px 16px !important; /* same side padding as .table-container */
  background: var(--bg-2);
}
.columns.container span:nth-child(1){ text-align: left !important; padding-left: 0 !important; }
.columns.container span:nth-child(2){ text-align: center !important; }
.columns.container span:nth-child(3){ text-align: center !important; }
.columns.container span:nth-child(4){ text-align: right !important; padding-right: 0 !important; }

/* Keep body cells aligned */
.table tbody td:nth-child(1){ text-align: left !important; }
.table tbody td:nth-child(2){ text-align: center !important; }
.table tbody td:nth-child(3){ text-align: center !important; }
.table tbody td:nth-child(4){ text-align: right !important; }

/* Ensure sticky stack order: columns above table */
.columns-header, .columns.container { position: sticky; top: calc(var(--top) + var(--kpi) + var(--filters)); z-index: 65; }


/* === Final header inside table (Код / Рейтинг / Взносы / Статус) === */
.table thead {
  height: auto !important;
  visibility: visible !important;
  background: var(--bg-2);
}
.table thead th {
  padding: 8px 12px;
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--b);
}
.table thead th:nth-child(1) { text-align: left; }
.table thead th:nth-child(4) { text-align: right; }
.table tbody td {
  padding-top: 8px;
}


/* === Remove duplicate header block (.columns.container) === */
.columns.container { display:none !important; }

/* === Pull table up closer to filters === */
.table-container.container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.table-wrap {
  margin-top: 0 !important;
}


/* === Remove duplicate header block and tighten vertical gap === */
.columns.container{ display:none !important; }           /* hide old separate headers */
.columns-header{ display:none !important; }              /* safety: hide any alt header bar */

.filters{ margin-bottom: 0 !important; }                 /* no extra space below filters */
.table-container.container{ padding-top: 0 !important; margin-top: 0 !important; }
.table-wrap{ margin-top: 6px !important; }              /* a tiny breathing space */

/* Ensure the table sits visually right under the filters' bottom line */
.filters__header{ border-bottom: 1px solid var(--b) !important; padding-bottom: 8px !important; }


/* === Fix logo without extension === */
.brand img[src="assets/logo"] {
  content: url("assets/logo.png");
}



/* ==== Trust & Status Global Overrides ==== */
:root {
  --bg:#0E0E0E;
  --bg-2:#11151A;
  --card:#161C23;
  --b:#1F2933;
  --b2:#2F3A46;
  --tx:#EAEFF5;
  --muted:#9CA6B5;
  --accent:#C9A646;
  --ok:#1C7C54;
  --warn:#E5B75B;
  --bad:#EF5959;
}

body {
  background: var(--bg) !important;
  color: var(--tx) !important;
}

.app, .table-wrap {
  background: var(--bg-2) !important;
  color: var(--tx) !important;
}

.card {
  background: var(--card) !important;
  border: 1px solid var(--b2) !important;
  color: var(--tx) !important;
}

header, .topbar {
  background: var(--bg-2) !important;
  color: var(--tx) !important;
}

button, .btn {
  background: var(--accent) !important;
  color: #1a1f2b !important;
}

/* badges */
.badge--ok { color: var(--ok)!important; border-color: var(--ok)!important; }
.badge--warn { color: var(--warn)!important; border-color: var(--warn)!important; }
.badge--bad { color: var(--bad)!important; border-color: var(--bad)!important; }

/* Gate modal */
.gate-card { background: var(--card)!important; border:1px solid var(--b2)!important; color: var(--tx)!important; }
.gate-title { color: var(--tx)!important; }
.gate-text, .gate-foot { color: var(--muted)!important; }
.gate-input { background: rgba(255,255,255,.06)!important; color: var(--tx)!important; border:1px solid rgba(255,255,255,.14)!important; }
.gate-input:focus { border-color: var(--accent)!important; }
.gate-btn { background: var(--accent)!important; color:#1a1f2b!important; border:none!important; }
.gate-error { color: var(--bad)!important; }


/* --- LUX v4 ADDON START --- */

/* === MKM LUX Components v4 === */
:root{ --gold-1:#EAD88F; --gold-2:#C9A646; }

.btn--lux{
  position:relative;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2)) !important;
  border:1px solid rgba(201,166,70,.42) !important;
  color:#14181f !important; font-weight:800 !important; letter-spacing:.2px !important;
  box-shadow:0 10px 24px rgba(201,166,70,.28), inset 0 1px 0 rgba(255,255,255,.26) !important;
  overflow:hidden;
}
.btn--lux:hover{ transform:translateY(-1px); box-shadow:0 16px 40px rgba(201,166,70,.30), inset 0 1px 0 rgba(255,255,255,.30) !important; }
.btn--lux:active{ transform:translateY(0); }


#next-meeting-btn[data-locked="1"]{
  /* Two-tone gold fill with diagonal stripes */
  background: repeating-linear-gradient(-45deg, var(--gold-1), var(--gold-1) 12px, var(--gold-2) 12px, var(--gold-2) 24px) !important;
  color:#14181f !important;
  border:1.5px dashed rgba(201,166,70,.65) !important; /* perforated edge */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 22px rgba(201,166,70,.26) !important;
  cursor: help !important;
  position: relative;
}
#next-meeting-btn[data-locked="1"]::before{
  content:"🔒";
  margin-right: 6px;
}
#next-meeting-btn[data-locked="1"]::after{
  /* inner perforation ring */
  content:"";
  position:absolute; inset:4px;
  border:1px dashed rgba(201,166,70,.35);
  border-radius:12px; pointer-events:none;
}
/* Brand logo polish */
.brand img{ width:28px !important; height:28px !important; border-radius:8px !important; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.brand span{ font-weight:800; letter-spacing:.3px; }

/* --- LUX v4 ADDON END --- */

/* === YIELD PRO PANEL v2 === */
.kpi-card--accent{
  background: linear-gradient(180deg, rgba(201,166,70,.09), transparent);
  border-color: rgba(201,166,70,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.kpi-badge{
  display:inline-block;padding:3px 8px;border-radius:999px;
  background: rgba(201,166,70,.12); border:1px solid rgba(201,166,70,.28);
  font-size:.75em; font-weight:700; letter-spacing:.2px; color:var(--tx);
}
.yield-sections{display:grid; gap:12px; margin-top:10px;}
.y-section{border:1px solid var(--b); background:var(--bg-2); border-radius:12px; padding:12px;}
.y-section h3{margin:0 0 10px 0; font-size:1.05rem;}
.metrics-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.metric{border:1px solid var(--b); background:var(--bg); border-radius:10px; padding:10px;}
.metric .m-title{opacity:.75; font-size:.85em;}
.metric .m-value{font-weight:800; font-size:1.2em; margin-top:4px;}
.metric .m-sub{opacity:.7; font-size:.9em; margin-top:3px;}
.range{display:flex; align-items:center; gap:8px; margin-top:8px;}
.range input[type="range"]{width:100%;}
.small{opacity:.7;font-size:.85em;}


/* === v2: Login header cleanup (icon-only brand on login screen) === */
#login-view .brand span,
#login-view .crest__wordmark { display:none !important; }
#login-view .brand { gap:6px !important; }

/* === v2: Extra analytics layout === */
.cmp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; align-items:start; }

.compare-card, .tool-card {
  background: var(--panel);
  border: 1px solid var(--b);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3) inset, 0 10px 30px rgba(0,0,0,.05);
}
.compare-card h4, .tool-card h4 { margin: 0 0 8px 0; font-size: 14px; opacity: .9; }

.subtle{ opacity:.7; font-size:12px; }

/* inline sparkline */
.sparkline{ width:100%; height:80px; display:block; }
.sparkline path{ fill: none; stroke: var(--accent); stroke-width:2; }
.sparkline .area{ fill: color-mix(in lab, var(--accent) 20%, transparent); }
.sparkline .grid line{ stroke: rgba(255,255,255,.055); stroke-width:1; }

/* small pill */
.pill{ display:inline-block; border:1px dashed rgba(255,255,255,.15); padding:2px 6px; border-radius:20px; font-size:12px; }
.pill.good{ color:#75d58d; border-color:rgba(117,213,141,.4); }
.pill.warn{ color:#ffd88a; border-color:rgba(255,216,138,.35); }
.pill.bad{  color:#ff9b9b; border-color:rgba(255,155,155,.35); }

/* fancy progress */
.bar{ height:8px; background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.08)); border-radius:999px; overflow:hidden; }
.bar > i{ display:block; height:100%; background:linear-gradient(90deg, var(--gold-1), var(--gold-2)); width:0%; border-radius:999px; transition:width .4s ease; }

/* number grid (compact) */
.numgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.numgrid .metric{ background:var(--panel); border:1px solid var(--b); border-radius:12px; padding:10px; }
.numgrid .metric .m-title{ font-size:12px; opacity:.7; }
.numgrid .metric .m-value{ font-size:16px; font-weight:700; }


/* === PATCH v2: Compact & Luxe Profile + Silver text + Gold button === */
:root{
  --gold-1:#F1E6B2;
  --gold-2:#B9892E;
  --silver-1:#f2f4f7; --silver-2:#cbd1d8; --silver-3:#e6e9ef;
}

/* Silver metallic text */
.silver-text{
  font-weight:800;
  background: linear-gradient(180deg, var(--silver-1) 0%, var(--silver-3) 22%, #fff 45%, var(--silver-2) 68%, var(--silver-3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.28);
}

/* Profile card luxe frame & spacing (scoped to profile view) */
#profile-view .card{
  position:relative;
  padding: 18px 16px;
  border-radius: 18px;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(201,166,70,.10), transparent 55%),
    radial-gradient(100% 120% at 100% 100%, rgba(111,128,168,.08), transparent 50%),
    var(--card);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 12px; /* приподнял карточку: меньше пустоты снизу */
}
#profile-view .card::after{ /* деликатный «foil» */
  content:"";
  position:absolute; inset:1px;
  background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,0) 30%, rgba(255,255,255,.06) 60%, rgba(255,255,255,0));
  pointer-events:none; border-radius: 17px;
  mix-blend-mode: screen; opacity:.35;
}

/* Rows tighter */
#profile-view .profile .row{ padding: 8px 0; }
#profile-view .profile .row:last-child{ border-bottom: 0; }
#profile-view .profile .label{ color: var(--muted); }

/* Bottom bar smaller just в Профиле */
#profile-view .bottom-fixed{ height:56px; padding:8px 12px; }
#profile-view .bottom-fixed .btn{ height:40px; line-height:38px; }
#profile-view .profile.container{ padding-bottom: 64px !important; } /* резерв под фикс-бар */

#profile-view .fio-row{ -webkit-column-span: all; column-span: all; border-bottom: 1px solid var(--b); padding-bottom: 10px; margin-bottom: 4px; }

/* Auto-compact layout for short screens — две колонки */
@media (max-height: 740px){
  #profile-view .card{ padding: 14px 12px; }
  #profile-view .profile{ column-count: 2; column-gap: 24px; }
  #profile-view .profile .row{ break-inside: avoid; border-bottom:0; padding: 6px 0; }
  #profile-view .label{ font-size: .95em; }
  #profile-view .fio-row{ -webkit-column-span: all; column-span: all; }
}

/* Decorative degree badge (EA) */
#degree-badge{ z-index:2; 
  position:absolute; top:-14px; right:12px;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; letter-spacing:.6px;
  background:
    radial-gradient(60% 60% at 30% 28%, #ffffff 0%, #e9eef5 35%, #b6beca 62%, #f8fafc 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
  color:#111;
}

/* Next Meeting: золото, без замка */
#next-meeting-btn{ color:#111 !important; text-shadow:0 1px 0 rgba(255,255,255,.20); }
#next-meeting-btn::before{ content:none !important; }
#next-meeting-btn{
  background:
    linear-gradient(-45deg, rgba(255,255,255,.12) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%,
                           rgba(255,255,255,.12) 50%, rgba(255,255,255,.12) 75%, rgba(255,255,255,0) 75%) 0/20px 20px,
    linear-gradient(180deg, var(--gold-1), var(--gold-2)) !important;
}


/* ===== Profile Modern Card (Netlify-friendly, no external deps) ===== */
.profile--modern .profile-card {
  position: relative;
  padding: 18px 18px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(31,41,55,.6), rgba(17,24,39,.75));
  border: 1px solid var(--b);
  box-shadow: 0 24px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
.profile--modern .profile-card__header {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.profile--modern .avatar-ring {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(from 160deg, #22d3ee, #a78bfa, #60a5fa, #22d3ee);
  padding: 2px;
}
.profile--modern .avatar-initials {
  width: 100%; height: 100%; border-radius: 50%;
  display:grid; place-items:center;
  font-weight: 800; font-size: 16px; letter-spacing:.5px;
  color: #e5e7eb;
  background: radial-gradient(85% 85% at 30% 28%, #1f2937 0%, #111827 100%);
  border: 1px solid rgba(255,255,255,.08);
}
.profile--modern .profile-card__title {
  min-width: 0;
}
.profile--modern .profile-name {
  font-size: 18px; font-weight: 700; color:#e2e8f0; line-height:1.25;
  white-space: normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.profile--modern .profile-tags {
  margin-top: 6px; display:flex; gap:8px; flex-wrap:wrap;
}
.profile--modern .tag {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--b2);
  background: rgba(148,163,184,.08);
  padding: 6px 10px; border-radius: 12px; font-size: 12px; color:#cbd5e1;
}
.profile--modern .tag__icon { flex:0 0 auto; opacity:.9 }
.profile--modern .tag--degree { border-color: rgba(167,139,250,.35); background: rgba(167,139,250,.12); }
.profile--modern .tag--code   { border-color: rgba(96,165,250,.35);  background: rgba(96,165,250,.10); }

.profile--modern .badge--degree { right: 14px; top: -10px; }

.profile--modern .profile-grid {
  display:grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 520px){
  .profile--modern .profile-grid { grid-template-columns: 1fr; }
}
.profile--modern .info {
  background: rgba(148,163,184,.06);
  border: 1px solid var(--b);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 58px;
  display:grid;
  grid-template-rows: auto 1fr;
}
.profile--modern .info__label {
  font-size: 12px; color: var(--muted);
}
.profile--modern .info__value {
  font-size: 15px; color: #e5e7eb; margin-top: 6px; font-weight:600;
}

/* Small tweak to the old layout inside profile view (disable previous rows) */
#profile-view .profile.container:not(.profile--modern) .row{ display:none; }


/* --- FIX: disable legacy 2-column column-count for modern profile --- */
#profile-view .profile--modern{
  -webkit-column-count: 1 !important;
  column-count: 1 !important;
  -webkit-column-gap: 0 !important;
  column-gap: 0 !important;
}
#profile-view .profile--modern .profile-card,
#profile-view .profile--modern .profile-grid,
#profile-view .profile--modern .info{ break-inside: avoid; }
#profile-view .profile--modern .profile-card{ display:block; width:100%; }
/* Force single column on narrow screens regardless of viewport height */
@media (max-width: 600px){
  #profile-view .profile--modern .profile-grid{ grid-template-columns: 1fr !important; }
}


/* === Custom fixes for user request (v3) === */

/* 1) Remove the `<>` code icon before the public code */
.profile--modern .tag--code .tag__icon { display: none !important; }

/* 2) Vertically center text inside the bottom "Инвестиции" button */
.bottom-fixed .btn,
.bottom-fixed .btn-primary,
.bottom-fixed .btn--primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding-top: 0.6em !important;
  padding-bottom: 0.6em !important;
}

/* Also ensure .btn itself has proper vertical centering everywhere */
.btn, .btn-primary, .btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 3) Make the profile card a bit more compact so more data fits without scrolling */
.profile--modern .profile-card { padding: 14px 14px 16px !important; border-radius: 16px; }
.profile--modern .profile-card__header { gap: 10px !important; margin-bottom: 8px !important; }
.profile--modern .profile__name { font-size: 18px !important; }
.profile--modern .tag { padding: 5px 8px !important; font-size: 12px !important; }
.profile--modern .profile-grid { gap: 8px !important; margin-top: 10px !important; }
.profile--modern .info { padding: 10px 12px !important; min-height: 50px !important; }
.profile--modern .info__label { font-size: 12px !important; }
.profile--modern .info__value { font-size: 15px !important; }

/* 4) Make the EA letters golden inside the silver circle (keep the circle silver) */
.profile--modern .badge--degree {
  color: #C9A646 !important; /* rich gold */
  font-weight: 700;
}
/* Make sure badge itself stays a subtle silver bubble */
#degree-badge {
  background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.8) 40%, rgba(190,198,210,.75) 60%, rgba(120,130,150,.55) 100%) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #C9A646 !important;
}
/* Slightly tighten layout on very small screens */
@media (max-height: 740px) {
  .profile--modern .profile-card { padding: 12px 12px 14px !important; }
  .profile--modern .info { min-height: 48px !important; }
}



/* ==== YIELD ULTRA v3 (added) ==== */
.y-pro-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.y-pro-card{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(100% 100% at 0% 0%, rgba(255,255,255,.04), rgba(255,255,255,.01) 60%);
  border-radius:14px; padding:12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.y-pro-card .title{font-size:.95rem; opacity:.75; margin-bottom:6px;}
.y-pro-card .value{font-size:1.35rem; font-weight:800;}
.y-pro-card .sub{opacity:.75; font-size:.85rem; margin-top:2px}

.table-ultra{
  width:100%; border-collapse:separate; border-spacing:0;
}
.table-ultra th, .table-ultra td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
}
.table-ultra thead th{
  font-size:.85rem; letter-spacing:.02em; text-transform:unset;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  position:sticky; top:0; z-index:1;
}
.table-ultra tbody tr:hover td{ background: rgba(201,170,113,.06); }
.table-ultra .mono{ font-variant-numeric: tabular-nums; }

/* Responsive: transform rows into cards on small screens */
@media (max-width: 480px){
  .table-ultra thead{ display:none; }
  .table-ultra, .table-ultra tbody, .table-ultra tr, .table-ultra td{ display:block; width:100%; }
  .table-ultra tr{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.10); border-radius:12px; margin:10px 0; padding:6px 10px; }
  .table-ultra td{ border-bottom:none; display:flex; justify-content:space-between; gap:12px; padding:8px 2px; }
  .table-ultra td::before{ content:attr(data-label); opacity:.65; }
}

/* Payout schedule: subtle zebra */
.schedule td:nth-child(odd){}
.schedule .month-label{ white-space:nowrap; }

/* Rounded buttons */
.btn-gold{
  appearance:none; border:none; border-radius:12px; padding:10px 14px;
  font-weight:800; letter-spacing:.3px; cursor:pointer;
  background: linear-gradient(180deg, #EAD88F, #C9A646);
  color:#111316;
  box-shadow: 0 10px 20px rgba(201,166,70,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover{ transform: translateY(-1px); }
.btn-outline{
  background: transparent; border:1px solid rgba(255,255,255,.22); color:var(--tx);
}

/* Badges */
.badge-soft{ display:inline-block; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  font-size:.72rem; letter-spacing:.2px;
}

/* Tighten margins on iPhone heights */
@media (max-width: 430px){
  .y-section{ padding:10px; }
  .y-pro-card{ padding:10px; border-radius:12px; }
}


/* === MKX: KPI block (isolated) === */
.mkx-kpi-container{display:flex;gap:20px;margin:20px 0;flex-wrap:wrap}
.mkx-kpi-card{background:linear-gradient(145deg,#1e1e1e,#2b2b2b);border-radius:12px;box-shadow:0 8px 16px rgba(0,0,0,0.3);padding:20px;display:flex;align-items:center;color:#f0f0f0;min-width:220px;transition:transform .2s ease,box-shadow .2s ease}
.mkx-kpi-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,0.4)}
.mkx-kpi-icon{font-size:2rem;margin-right:12px}
.mkx-kpi-text{font-size:1.2rem;font-weight:600}

/* === YIELD PRO: hedge-fund polish (scoped to #tab-yield) === */
#tab-yield{ --panel: var(--bg-2); --ring: rgba(232,209,142,.18); --radius:14px; --space:14px; --space-lg:16px; }
#tab-yield .yield-sections{ display:grid; gap:var(--space-lg); margin-top:12px; }
#tab-yield .y-section{ border:1px solid var(--b); background:var(--panel); border-radius:var(--radius); padding:14px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 30px rgba(0,0,0,.06); }
#tab-yield .y-section h3{ margin:0 0 10px 0; font-size:1.05rem; letter-spacing:.2px; }
#tab-yield .kpi-grid{ gap:var(--space); }
#tab-yield .kpi-card{ border-radius:14px; padding:14px; background:var(--bg-2); border:1px solid var(--b); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
#tab-yield .kpi-card--accent{ background:linear-gradient(180deg,var(--bg-2),rgba(255,255,255,.02)); border-color:var(--b2); }
#tab-yield .metrics-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space); }
#tab-yield .metric{ border:1px solid var(--b); background:var(--bg); border-radius:12px; padding:12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
#tab-yield .metric .m-title{ opacity:.75; font-size:.9em; }
#tab-yield .metric .m-value{ font-weight:800; font-size:1.25em; margin-top:4px; }
#tab-yield .metric .m-sub{ opacity:.7; font-size:.95em; margin-top:4px; }

#tab-yield .cmp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space); align-items:start; }
#tab-yield .compare-card{ background:var(--panel); border:1px solid var(--b); border-radius:var(--radius); padding:12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
#tab-yield .compare-card h4{ margin:0 0 10px 0; font-size:14px; opacity:.9; }
#tab-yield .compare-card .numgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#tab-yield .compare-card .metric{ background:var(--bg); }

#tab-yield .plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--space); align-items:start; }
#tab-yield .tool-card{ background:var(--panel); border:1px solid var(--b); border-radius:var(--radius); padding:12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }

/* tight, consistent spacing for nested blocks */
#tab-yield .y-section .y-section{ margin-top:var(--space); }


/* === MKX: professional toolbar for list view === */
.kpi{ padding: 8px 0 0; }
.kpi__inner{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:12px;
}
.kpi__item{
  background: linear-gradient(180deg, var(--bg-2), rgba(255,255,255,0.02));
  border: 1px solid var(--b2);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.kpi__item .kpi__label{
  color: var(--muted);
  font-size: .92rem;
  letter-spacing: .2px;
  margin-bottom: 4px;
  display:block;
}
.kpi__item .kpi__value{
  display:block;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  letter-spacing: .2px;
}

.filters{ margin-top: 10px; }
.filters__header{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  align-items: end;
  padding: 6px 0 4px;
}
.filters__header .field{ margin:0; }
.filters__header label{
  color: var(--muted) !important;
  font-size: .92rem;
  margin-bottom: 6px;
}
.filters__header select{background-image:url('data:image/svg+xml;utf8,<svg fill="%23e8d18e" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:44px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--b2);
  background: linear-gradient(180deg, var(--bg-2), rgba(255,255,255,.02));
  box-shadow: 0 6px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 10px 40px 10px 14px;
  font-weight: 600;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.filters__header select:hover{ border-color: rgba(232,209,142,.35); }
.filters__header select:focus{ outline:none; box-shadow: 0 0 0 2px rgba(232,209,142,.25), 0 8px 28px rgba(0,0,0,.35); }

@media (max-width: 640px){
  .kpi__inner{ grid-template-columns: 1fr; }
  .filters__header{ grid-template-columns: 1fr; }
}


/* === GOLD THEME for first KPI on Yield (kpi-card--accent) === */
.kpi-card--accent{
  border-color: rgba(232,209,142,.55) !important;
  background: linear-gradient(180deg, rgba(58,42,0,.85), rgba(31,26,0,.85)) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.kpi-card--accent .kpi-title{ color: rgba(232,209,142,.88) !important; }
.kpi-card--accent .kpi-value{ color: #F6E27A !important; }
.kpi-card--accent .kpi-sub{ color: rgba(232,209,142,.75) !important; }


/* === MKX: compact pager buttons === */
.pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px; /* reduce spacing */
}
.pager .btn{
  min-width:36px;
  height:36px;
  padding:0;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pager__info{
  margin:0 4px;
}

/* Menu view */
.menu-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.btn-block{ width:100%; justify-content:center; }

/* Modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999; }
.modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,520px); z-index:1000; }
.modal__content{ background: rgba(12,12,16,.98); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.hidden{ display:none !important; }

/* Hide investments button at bottom in profile view */
#profile-view .bottom-fixed { display:none !important; }

/* v15: when a view is opened from Menu, simplify headers */
.from-menu .tabs { display:none !important; }
.from-menu #next-meeting-btn { display:none !important; }


/* ===== TRUST VIEW ===== */
.trust-hero{
  position: relative;
  padding: 28px 18px;
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,.25);
  background: radial-gradient(120% 100% at 50% 0%, rgba(16,185,129,.15), rgba(0,0,0,.65) 48%, rgba(0,0,0,.9) 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 80px rgba(16,185,129,.12);
  text-align: center;
}
.trust-emblem{
  width: 88px; height: 88px; margin: 0 auto 10px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  letter-spacing: 2px; font-weight: 800;
  border:1px solid rgba(34,197,94,.35);
  background: radial-gradient(circle at 50% 40%, rgba(34,197,94,.20), rgba(0,0,0,.7));
  text-shadow: 0 0 10px rgba(34,197,94,.35);
}
.trust-title{ margin: 6px 0 8px; font-size: 18px; }
.trust-text{ opacity:.9; line-height:1.45; }

/* ===== MODAL (Next Meeting) ===== */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999; }
.modal{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,520px); z-index:1000; }
.modal__content{
  background: rgba(12,12,16,.96);
  border-radius: 14px;
  padding: 16px;
  border:1px solid rgba(255, 215, 128, .25);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.modal--gold{ 
  position: relative;
  background: radial-gradient(120% 120% at 50% 0%, rgba(253, 224, 71, .06), rgba(12,12,16,.96));
}
.modal__emblem{
  font-size: 12px; letter-spacing: 3px; opacity:.55; text-align:center; margin-top: -4px;
}
.modal__title{ margin: 8px 0 6px; text-align:left; text-shadow: 0 0 12px rgba(253, 224, 71, .25); }
.modal__actions{ text-align:right; margin-top: 14px; }

.hidden{ display:none !important; }


/* v18 ensure hidden class */
.hidden{display:none!important;}

/* v19: when Menu is visible, Trust is forced hidden */
#menu-view:not(.hidden) ~ #trust-view { display:none !important; }


/* ===== v23 KPI & Filters restyle ===== */

/* Centered city title */
.topbar__inner{ position:relative; }
.topbar__center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-weight:800; letter-spacing:1.2px; color:#e7c56a;
}

/* KPI layout */
.kpi{ padding:6px 0 2px; }
.kpi__inner{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kpi__item{
  --glass: rgba(255,255,255,.04);
  background: radial-gradient(140% 120% at 50% -30%, rgba(34,197,94,.06), transparent 50%), var(--glass);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.35);
  padding:14px 16px;
  border-radius:16px;
  text-align:center;
  font-size:22px; font-weight:800; letter-spacing:.6px;
  color:#E6EDF5;
}
.kpi__item small{ display:block; font-size:12px; opacity:.7; font-weight:600; letter-spacing:.4px; margin-top:2px; }
#kpi-members::before{ content:'Участники'; display:block; font-size:12px; opacity:.65; font-weight:600; letter-spacing:.4px; margin-bottom:2px; }
#kpi-sum::before{ content:'Общий фонд ($)'; display:block; font-size:12px; opacity:.65; font-weight:600; letter-spacing:.4px; margin-bottom:2px; }
@media (max-width: 480px){ .kpi__item{ font-size:20px; } }

/* Filters header */
.filters{ padding-top:8px; }
.filters__header{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.1));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.filters__controls{ display:flex; gap:12px; }
.filters__controls .field label{ font-weight:700; letter-spacing:.3px; color:#9fb0c2 !important; margin-bottom:6px; display:block; }
.select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding:12px 40px 12px 14px; border-radius:14px;
  background: linear-gradient(180deg, #10151c, #0b1016);
  border:1px solid rgba(255,255,255,.08); color:#e6edf5;
  position:relative;
}
.select:focus{ outline:none; box-shadow: 0 0 0 2px rgba(231,197,106,.25); border-color: rgba(231,197,106,.45); }
.field{ position:relative; }
.field::after{
  content:'▾'; position:absolute; right:12px; top:36px; pointer-events:none;
  color:#e7c56a; font-weight:800; font-size:12px;
}

/* Mobile cards for members (from v22) */
@media (max-width: 768px){
  #members-table{ border-collapse: separate; border-spacing:0 10px; }
  #members-table tbody tr{
    display:block;
    background: radial-gradient(120% 140% at 50% -20%, rgba(34,197,94,.06), transparent 40%), #0f1624;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:10px 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  #members-table tbody td{
    display:flex; justify-content:center; align-items:center;
    padding:6px 0 !important; border-bottom:none !important; background:transparent !important;
    text-align:center !important;
  }
  #members-table tbody td:nth-child(1){ font-weight:800; font-size:16px; letter-spacing:.6px; color:#e7c56a; }
  #members-table tbody td:nth-child(2){ font-size:18px; font-weight:800; margin-top:2px; }
  #members-table tbody td:nth-child(3){ font-size:16px; opacity:.95; }
  #members-table tbody td:nth-child(4) .badge{
    display:inline-block; padding:6px 12px; border-radius:999px;
    border:1px solid rgba(16,185,129,.35);
    background:rgba(16,185,129,.12); color:#8CE9B3; font-weight:700;
  }
  #members-table tbody tr + tr{ margin-top:8px; }
}

/* Elegant gold buttons */
.btn{
  background-image: linear-gradient(180deg, #F1D27A, #C39B3A);
  border:1px solid rgba(255, 209, 102, .45);
  color:#0B0D10; border-radius:14px; font-weight:700;
  box-shadow: 0 6px 18px rgba(231,197,106,.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); box-shadow:0 10px 26px rgba(231,197,106,.32); }
.btn:active{ transform: translateY(0); filter:brightness(.98); }


/* ===== v24 Polish: KPI deluxe + Segmented filters ===== */

/* KPI: deluxe glass cards with subtle gradient border & monospaced digits */
.kpi__item{
  position: relative;
  background:
    radial-gradient(110% 140% at 50% -40%, rgba(34,197,94,.10), transparent 55%),
    rgba(255,255,255,.035);
  border-radius: 18px;
  border: 1px solid rgba(231,197,106,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.40);
  padding: 16px 18px;
  text-align:center;
}
.kpi__item::after{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  pointer-events:none;
  background: linear-gradient(140deg, rgba(231,197,106,.25), rgba(34,197,94,.18));
  mask: linear-gradient(#0000, #000);
  opacity:.25;
}
.kpi__item strong, .kpi__item, #kpi-members, #kpi-sum{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
#kpi-members{ font-size:24px; font-weight:800; }
#kpi-sum{ font-size:24px; font-weight:800; }
#kpi-members::before, #kpi-sum::before{
  display:block; font-size:12px; opacity:.7; font-weight:700; letter-spacing:.4px; margin-bottom:4px;
}
#kpi-members::before{ content:"Участники"; }
#kpi-sum::before{ content:"Общий фонд ($)"; }

/* Filters: segmented glossy controls */
.filters__header{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14));
  border: 1px solid rgba(231,197,106,.18);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
}
.filters__controls{ display:flex; gap:12px; }
.field{
  position:relative;
  background: linear-gradient(180deg, #121822, #0c1119);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 8px 10px 6px;
  min-width: 150px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.field label{
  font-size:12px; letter-spacing:.3px; font-weight:800;
  color:#9fb0c2 !important; margin-bottom:4px; display:block;
}
.field .select{
  width:100%;
  background: transparent;
  border: none;
  color: #e6edf5;
  padding: 6px 28px 8px 4px;
  font-weight:800;
}
.field::after{
  content:"⌄";
  position:absolute; right:10px; bottom:9px;
  color:#e7c56a; font-weight:900; font-size:12px; pointer-events:none;
}
@media (max-width: 420px){
  .filters__controls{ gap:8px; }
  .field{ min-width: 0; flex: 1 1 0; }
}

/* Keep members mobile card style from previous version */


/* ===== v25 Auth polish ===== */
#login-view{
  min-height: calc(100vh - 40px);
  display:flex; align-items:center; justify-content:center;
  padding: 28px 16px;
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(34,197,94,.08), transparent 40%),
    radial-gradient(100% 140% at 50% 110%, rgba(231,197,106,.06), transparent 40%);
}
#login-view .card{
  width: 92%;
  max-width: 420px;
  border-radius: 20px;
  border: 1px solid rgba(231,197,106,.18);
  background: linear-gradient(180deg, rgba(13,18,26,.92), rgba(10,14,20,.92));
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  padding: 18px 18px 20px;
}
#login-view .brand{
  display:flex; align-items:center; gap:10px;
  margin-bottom: 6px;
}
#login-view .brand img{ width: 28px; height: 28px; border-radius:8px; border:1px solid rgba(231,197,106,.35); padding:4px; background: rgba(231,197,106,.05); }
#login-view h2{
  text-align:center;
  margin: 4px 0 12px;
  letter-spacing: 1.1px;
  color: #E7C56A;
  text-transform: uppercase;
}
#login-view .field{
  background: linear-gradient(180deg, #121822, #0c1119);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 12px 8px;
  margin-top: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#login-view .field label{
  font-size: 12px; font-weight: 800; letter-spacing: .3px; color: #9fb0c2;
  display:block; margin-bottom: 4px;
}
#login-view .input{
  background: transparent; border: none; color: #e6edf5;
  padding: 4px 0 6px;
  font-size: 16px; font-weight: 700;
}
#login-view .input::placeholder{ color: rgba(230,237,245,.45); }
#login-view .btn{
  background-image: linear-gradient(180deg, #F1D27A, #C39B3A);
  border:1px solid rgba(255, 209, 102, .45);
  color:#0B0D10; border-radius:14px; font-weight:800; font-size:16px;
  box-shadow: 0 8px 22px rgba(231,197,106,.30);
  margin-top: 14px;
}
#login-view .btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
#login-view .error{ color:#ffb3b3; font-weight:700; margin-top:8px; min-height:18px; }