:root {
  --bg: #07100d;
  --bg-soft: #0b1713;
  --panel: #0e1d18;
  --panel-2: #12251e;
  --line: #213b31;
  --text: #f3f8f5;
  --muted: #8fa99e;
  --green: #21d07a;
  --green-soft: rgba(33, 208, 122, .13);
  --red: #ff5d68;
  --red-soft: rgba(255, 93, 104, .13);
  --amber: #f4b744;
  --amber-soft: rgba(244, 183, 68, .12);
  --blue: #5ea8ff;
  --shadow: 0 22px 60px rgba(0,0,0,.28);
}

/* Theme 2: cyber operations — cyan/magenta glow on deep midnight navy. */
:root[data-theme="neon"] {
  --bg: #050617; --bg-soft: #0a0b26; --panel: #0d1030; --panel-2: #141944;
  --line: #273065; --text: #f4f6ff; --muted: #929bd0; --green: #26f7e8;
  --green-soft: rgba(38,247,232,.12); --red: #ff4f9a; --red-soft: rgba(255,79,154,.13);
  --amber: #ffd166; --blue: #7c8cff; --shadow: 0 22px 70px rgba(8,4,40,.58);
}

/* Theme 3: bright executive console — clean, calm and presentation friendly. */
:root[data-theme="arctic"] {
  color-scheme: light;
  --bg: #edf4f8; --bg-soft: #e3edf4; --panel: #ffffff; --panel-2: #f6fafc;
  --line: #cbdbe5; --text: #102838; --muted: #648091; --green: #087fdb;
  --green-soft: rgba(8,127,219,.10); --red: #dc3c4d; --red-soft: rgba(220,60,77,.10);
  --amber: #c78100; --blue: #087fdb; --shadow: 0 18px 45px rgba(39,77,98,.14);
}

/* Theme 4: premium financial desk — graphite surfaces with restrained gold. */
:root[data-theme="gold"] {
  --bg: #0d0d0c; --bg-soft: #151512; --panel: #1a1915; --panel-2: #222018;
  --line: #49422b; --text: #f8f3e6; --muted: #aaa184; --green: #e7bd55;
  --green-soft: rgba(231,189,85,.12); --red: #ff6868; --red-soft: rgba(255,104,104,.12);
  --amber: #f1c75b; --blue: #d9b85e; --shadow: 0 24px 60px rgba(0,0,0,.48);
}

/* Theme 5: ocean command center — blue/teal, softer contrast for long sessions. */
:root[data-theme="ocean"] {
  --bg: #06141c; --bg-soft: #0a202a; --panel: #0c2731; --panel-2: #103541;
  --line: #1f5260; --text: #eefcff; --muted: #87abb4; --green: #26d6c5;
  --green-soft: rgba(38,214,197,.12); --red: #ff6c7a; --red-soft: rgba(255,108,122,.12);
  --amber: #ffc857; --blue: #53b7ff; --shadow: 0 24px 65px rgba(0,19,28,.42);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% -10%, rgba(33,208,122,.12), transparent 31%),
    radial-gradient(circle at 90% 2%, rgba(94,168,255,.07), transparent 26%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="neon"] body { background: radial-gradient(circle at 10% 0, rgba(124,140,255,.18), transparent 32%), radial-gradient(circle at 95% 8%, rgba(255,79,154,.10), transparent 27%), var(--bg); }
:root[data-theme="arctic"] body { background: radial-gradient(circle at 12% -5%, rgba(8,127,219,.13), transparent 30%), linear-gradient(180deg, #f7fbfd, var(--bg)); }
:root[data-theme="gold"] body { background: radial-gradient(circle at 18% -5%, rgba(231,189,85,.12), transparent 30%), var(--bg); }
:root[data-theme="ocean"] body { background: radial-gradient(circle at 14% -8%, rgba(38,214,197,.14), transparent 32%), radial-gradient(circle at 95% 0, rgba(83,183,255,.10), transparent 28%), var(--bg); }

button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(430px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,37,30,.96), rgba(9,20,16,.96));
  box-shadow: var(--shadow);
}
.brand-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #04120b;
  background: linear-gradient(135deg, #5bf2a5, #16a861);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -1px;
  box-shadow: 0 13px 32px rgba(33,208,122,.22);
}
.brand-mark.small { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; }
.login-card h1 { margin: 22px 0 8px; font-size: 30px; }
.login-card p { color: var(--muted); line-height: 1.55; }
.login-card label { display: block; margin: 22px 0 8px; font-weight: 700; }
.login-card input {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #07120e;
  outline: none;
}
.login-card input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(33,208,122,.12); }
.login-card small { display: block; margin-top: 18px; color: #688276; text-align: center; }
.form-error { min-height: 24px; padding-top: 8px; color: var(--red); font-size: 14px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px max(22px, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid rgba(33,59,49,.75);
  background: rgba(7,16,13,.88);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand h1 { margin: 0; font-size: 16px; letter-spacing: .4px; }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.theme-picker { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 750; }
.theme-picker select { max-width: 142px; padding: 6px 25px 6px 8px; border: 0; outline: 0; color: var(--text); background: var(--panel-2); border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }
:root[data-theme="neon"] .summary-card, :root[data-theme="neon"] .group-stat-card, :root[data-theme="neon"] .group-card { box-shadow: inset 0 0 0 1px rgba(38,247,232,.03), 0 0 28px rgba(38,247,232,.025); }
:root[data-theme="neon"] .eyebrow { text-shadow: 0 0 14px rgba(38,247,232,.5); }
:root[data-theme="gold"] .brand-mark { background: linear-gradient(135deg, #f9da82, #b88722); box-shadow: 0 13px 32px rgba(231,189,85,.2); }
:root[data-theme="arctic"] .topbar { background: rgba(247,251,253,.9); border-color: var(--line); }
:root[data-theme="arctic"] .server-chip, :root[data-theme="arctic"] .clock { background: rgba(255,255,255,.82); color: var(--text); }
:root[data-theme="arctic"] .btn-ghost { color: var(--text); }
:root[data-theme="arctic"] .login-card { background: rgba(255,255,255,.96); }
:root[data-theme="arctic"] .login-card input { background: #fff; color: var(--text); }
:root[data-theme="ocean"] .brand-mark { background: linear-gradient(135deg, #5ef2dd, #199ab7); }
.server-chip, .badge, .clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(14,29,24,.8);
  color: #cfe0d8;
  font-size: 13px;
}
.badge-demo { color: var(--amber); border-color: rgba(244,183,68,.35); background: var(--amber-soft); font-weight: 800; }

.content { width: min(1440px, 100%); margin: 0 auto; padding: 32px 22px 72px; }
.hero-row, .section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.hero-row { margin-bottom: 22px; }
.hero-row h2, .section-head h2 { margin: 4px 0 5px; font-size: clamp(22px, 3vw, 34px); letter-spacing: -.6px; }
.eyebrow { margin: 0; color: var(--green); font-size: 12px; font-weight: 900; letter-spacing: 1.6px; }
.system-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--text);
  font-weight: 850;
  letter-spacing: .2px;
  transition: transform .15s ease, opacity .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-full { width: 100%; margin-top: 14px; }
.btn-primary, .btn-success { background: var(--green); color: #04150c; }
.btn-danger { background: var(--red); color: #210307; }
.btn-ghost { border-color: var(--line); background: var(--panel); color: #d9e7e0; }
.btn-small { min-height: 34px; padding: 0 12px; font-size: 12px; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 34px;
}
.summary-card {
  min-height: 116px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(18,37,30,.96), rgba(11,24,19,.96));
  box-shadow: 0 12px 30px rgba(0,0,0,.13);
}
.summary-card .label { color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .7px; }
.summary-card .value { margin-top: 17px; font-size: clamp(21px, 2.2vw, 30px); font-weight: 900; letter-spacing: -.7px; }
.summary-card .sub { margin-top: 4px; color: #6f8e80; font-size: 12px; }
.summary-card.negative .value { color: var(--red); }
.summary-card.positive .value { color: var(--green); }

.intel-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 28px; }
.intel-spdr { grid-column:span 1; }
.oil-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.oil-quote{display:grid;gap:5px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}.oil-quote>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.oil-quote strong{font-size:20px}.oil-quote small{color:var(--muted)}
.oil-h1-grid{display:grid;grid-template-columns:1fr;gap:12px}.oil-h1-card{min-width:0;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2)}.oil-h1-card>header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.oil-h1-card>header>div{display:grid;gap:3px}.oil-h1-card>header>div:last-child{text-align:right}.oil-h1-card>header small{color:var(--muted);font-size:9px}.oil-h1-card>header strong{font-size:12px}.oil-h1-card>header b{font-size:17px}.oil-h1-card>header span{font-size:9px;font-weight:850}.oil-h1-chart{height:210px;margin-top:10px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--bg-soft),transparent);overflow:hidden}.oil-h1-chart svg{width:100%;height:100%}.oil-chart-grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}.oil-chart-grid text{fill:var(--muted);font:10px system-ui;text-anchor:end}.oil-candle{color:var(--green)}.oil-candle.down{color:var(--red)}.oil-candle line{stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke}.oil-candle rect{fill:currentColor}.oil-h1-card>footer{display:flex;justify-content:space-between;margin-top:5px;color:var(--muted);font-size:8px}
.intel-spdr .intel-body{max-height:none;overflow:visible}.intel-news .intel-body{max-height:720px}
.intel-card { min-width:0;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden; }
.intel-card summary { display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--line);cursor:pointer;list-style:none; }.intel-card summary::-webkit-details-marker{display:none}.intel-card summary>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--amber-soft);color:var(--amber);font-weight:950}.intel-card summary div{display:grid;gap:2px;flex:1}.intel-card summary small{color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.8px}.intel-card summary strong{font-size:14px}.intel-card summary i{color:var(--green);font-size:18px;font-style:normal}.intel-card:not([open]) summary{border-bottom:0}.intel-card:not([open]) summary i::before{content:"+"}.intel-card:not([open]) summary i{font-size:0}.intel-card:not([open]) summary i::before{font-size:18px}
.intel-body{max-height:520px;overflow:auto;padding:15px;scrollbar-width:thin}.intel-loading,.intel-error{padding:28px 12px;color:var(--muted);text-align:center;font-size:12px}.intel-error{color:var(--red)}
.intel-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.intel-metrics.compact{grid-template-columns:repeat(3,1fr)}.intel-metrics>div,.spdr-comparisons>div,.driver-indicators>div{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-soft)}.intel-metrics small,.spdr-comparisons small,.driver-indicators small{color:var(--muted);font-size:9px;text-transform:uppercase}.intel-metrics strong,.spdr-comparisons strong,.driver-indicators strong{font-size:15px}.intel-callout{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding:11px;border-radius:11px;background:var(--bg-soft);font-size:12px}.intel-callout strong{font-size:18px}.terminal-mini-list{display:grid;gap:7px;margin-top:11px}.terminal-mini-list span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.terminal-mini-list b{margin-left:auto;color:var(--text)}
.spdr-hero{display:grid;gap:5px;padding:3px 1px 13px}.spdr-hero small{color:var(--muted)}.spdr-hero strong{font-size:28px}.spdr-hero span{font-size:12px;font-weight:800}.spdr-comparisons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.spdr-comparisons span,.driver-indicators span{color:var(--muted);font-size:9px}.spdr-history{max-height:225px;overflow:auto;margin-top:10px;border:1px solid var(--line);border-radius:10px}.spdr-history table{width:100%;border-collapse:collapse;font-size:10px}.spdr-history th,.spdr-history td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}.spdr-history th:first-child,.spdr-history td:first-child{text-align:left}.spdr-history th{position:sticky;top:0;background:var(--panel-2);color:var(--muted)}.intel-analysis{padding:10px;border-radius:9px;background:var(--bg-soft);font-size:11px;line-height:1.5}.source-link{display:inline-block;margin-top:8px;color:var(--green);font-size:10px;text-decoration:none}
.spdr-analytics{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.spdr-chart-head{display:flex;align-items:end;justify-content:space-between;gap:14px}.spdr-chart-head div{display:grid;gap:4px}.spdr-chart-head small{color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.7px}.spdr-chart-head strong{font-size:12px}.spdr-chart-head>b{font-size:15px}.spdr-chart{position:relative;height:230px;margin-top:10px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--bg-soft),transparent);overflow:hidden;color:var(--amber)}.spdr-chart svg{width:100%;height:100%}.spdr-grid line{stroke:var(--line);stroke-width:1}.spdr-area{fill:url(#spdrArea)}.spdr-line{fill:none;stroke:currentColor;stroke-width:3;vector-effect:non-scaling-stroke}.spdr-last-point{fill:var(--panel);stroke:currentColor;stroke-width:3;vector-effect:non-scaling-stroke}.spdr-axis{position:absolute;right:10px;padding:2px 5px;border-radius:5px;background:color-mix(in srgb,var(--panel) 85%,transparent);color:var(--muted);font-size:9px}.spdr-axis-max{top:8px}.spdr-axis-min{bottom:8px}.spdr-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.spdr-detail-grid>div{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}.spdr-detail-grid small{color:var(--muted);font-size:9px;text-transform:uppercase}.spdr-detail-grid strong{font-size:14px}.spdr-explain{margin:10px 0 0;padding:10px;border-left:3px solid var(--amber);border-radius:0 9px 9px 0;background:var(--amber-soft);color:var(--muted);font-size:10px;line-height:1.55}
.news-list,.trump-list,.driver-list{display:grid;gap:8px}.news-item,.trump-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}.news-time{display:grid;align-content:start}.news-time small,.news-main small,.trump-item small,.driver-headline small{color:var(--muted);font-size:9px}.news-main>div{display:flex;align-items:center;gap:6px}.news-main strong{font-size:11px}.news-main p,.trump-item p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.4}.impact{padding:3px 5px;border-radius:5px;font-size:8px;font-weight:900;text-transform:uppercase}.impact.high{background:var(--red-soft);color:var(--red)}.impact.medium{background:var(--amber-soft);color:var(--amber)}.impact.low{background:var(--green-soft);color:var(--green)}.gold-direction{align-self:start;font-size:9px;white-space:nowrap}.intel-subtitle{margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--line);font-size:12px}.trump-item{grid-template-columns:minmax(0,1fr) auto}.trump-item span,.driver-headline span{display:inline-block;margin-bottom:4px;color:var(--amber);font-size:8px;font-weight:900}.trump-item a,.driver-headline a{display:block;color:var(--text);font-size:10px;font-weight:750;text-decoration:none;line-height:1.4}.driver-indicators{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.driver-headline{padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--bg-soft)}.financialjuice-note{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:9px;border:1px dashed var(--line);border-radius:9px;font-size:9px}.financialjuice-note a{color:var(--green)}.financialjuice-note span{color:var(--muted)}.intel-disclaimer{color:var(--muted);font-size:9px;line-height:1.5}
.news-original-title{display:block!important;margin-top:3px;color:var(--muted)!important;font-size:8px!important}.news-read-btn{grid-column:2/-1;justify-self:start;margin-top:5px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--amber-soft);color:var(--amber);font:inherit;font-size:9px;font-weight:850;cursor:pointer}.trump-item>.news-read-btn,.driver-headline>.news-read-btn{grid-column:auto;margin-top:8px}.news-modal-card{width:min(760px,calc(100vw - 24px));max-height:min(760px,88vh);overflow:auto;text-align:left}.news-modal-body{display:grid;gap:10px;margin-top:14px}.news-modal-body h4{margin:8px 0 0;font-size:12px}.news-modal-body p{margin:0;color:var(--muted);font-size:12px;line-height:1.7;white-space:pre-line}.news-translation-meta{display:flex;align-items:center;justify-content:space-between;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);font-size:10px}.news-risk-note{padding:10px;border-left:3px solid var(--amber);background:var(--amber-soft);color:var(--muted);font-size:10px;line-height:1.5}.news-original{padding:9px;border:1px solid var(--line);border-radius:9px;font-size:10px}.news-original summary{cursor:pointer;color:var(--muted)}
.group-vps{min-height:36px;padding:0 11px;border:1px solid color-mix(in srgb,var(--amber) 45%,var(--line));border-radius:10px;background:var(--amber-soft);color:var(--amber);font:inherit;font-size:10px;font-weight:900;cursor:pointer;white-space:nowrap}
.group-vps-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.group-auto-discovery{display:inline-flex;min-height:36px;align-items:center;padding:0 11px;border:1px solid color-mix(in srgb,var(--green) 45%,var(--line));border-radius:10px;background:var(--green-soft);color:var(--green);font-size:10px;font-weight:900;white-space:nowrap}
.official-grid{display:grid;gap:8px}.official-source{padding:9px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}.official-source header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.official-source header a{color:var(--green);font-size:10px;font-weight:850;text-decoration:none}.official-source header span{font-size:8px;font-weight:900}.official-source>a{display:block;padding:5px 0;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent);color:var(--text);font-size:9px;line-height:1.4;text-decoration:none}.official-source>a b{margin-right:6px;color:var(--amber);font-size:7px}

.overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 255px; align-items: start; gap: 16px; margin-bottom: 28px; }
.overview-performance { min-width: 0; grid-column: 1; grid-row: 1; }
.summary-sidebar { position: sticky; top: 82px; z-index: 12; grid-column: 2; grid-row: 1; max-height: calc(100vh - 96px); overflow-y: auto; padding: 9px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(15px); }
.summary-sidebar .summary-grid { grid-template-columns: 1fr; gap: 8px; margin: 0; }
.summary-sidebar .summary-card { min-height: 88px; padding: 13px; }
.summary-sidebar .summary-card .value { margin-top: 8px; font-size: 21px; }
.summary-toggle { position: sticky; top: 0; z-index: 2; width: 100%; min-height: 35px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 11px; font-weight: 850; }
.summary-sidebar.summary-hidden { width: 150px; padding: 7px; overflow: hidden; }
.summary-sidebar.summary-hidden .summary-grid { display: none; }
.summary-sidebar.summary-hidden .summary-toggle { margin: 0; }

.orders-panel { margin: 0 0 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.orders-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.orders-head h2 { margin: 4px 0; font-size: 22px; }.orders-head p { margin-bottom: 0; font-size: 12px; }
.orders-controls { display: flex; align-items: end; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.orders-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.orders-controls select { min-width: 205px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); }
.panel-toggle { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.panel-toggle:hover { border-color: var(--green); color: var(--green); }
.collapsible-panel.panel-collapsed #groupStatsGrid { display: none; }
.orders-panel.panel-collapsed .orders-controls > :not(.panel-toggle),
.orders-panel.panel-collapsed .orders-summary,
.orders-panel.panel-collapsed .orders-table-wrap,
.orders-panel.panel-collapsed .orders-head .muted { display: none; }
.orders-panel.panel-collapsed .orders-head { border-bottom: 0; }
.orders-summary { display: flex; flex-wrap: wrap; gap: 20px; padding: 13px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }.orders-summary strong { margin-left: 5px; color: var(--text); }
.orders-table-wrap { overflow-x: auto; }.orders-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.orders-table th,.orders-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }.orders-table th:first-child,.orders-table td:first-child { text-align: left; }.orders-table th { color: var(--muted); font-size: 10px; text-transform: uppercase; }.orders-table td small { display:block;color:var(--muted);margin-top:3px; }
.order-side { display:inline-block;min-width:45px;padding:4px 7px;border-radius:7px;text-align:center;font-weight:900; }.order-side.buy { color:var(--green);background:var(--green-soft); }.order-side.sell { color:var(--red);background:var(--red-soft); }

.group-stats-head { margin-top: 28px; }
.group-stats-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.group-stat-card { overflow: hidden; min-height: 260px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.group-stat-card.empty { border-style: dashed; background: rgba(10, 29, 22, .45); }
.group-stat-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.group-stat-title span { color: var(--text); font-size: 14px; font-weight: 850; }
.group-stat-title strong { color: var(--green); font-size: 12px; }
.group-stat-table-wrap { overflow-x: auto; }
.group-stat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.group-stat-table th, .group-stat-table td { padding: 11px 10px; border-bottom: 1px solid rgba(45, 89, 69, .42); text-align: right; white-space: nowrap; }
.group-stat-table th:first-child, .group-stat-table td:first-child { text-align: left; }
.group-stat-table th { color: var(--muted); font-size: 10px; letter-spacing: .55px; text-transform: uppercase; }
.group-stat-table td { color: var(--text); font-size: 12px; font-weight: 750; }
.group-stat-table td.positive { color: var(--green); }
.group-stat-table td.negative { color: var(--red); }
.group-stat-table td.cashflow-deposit { color: var(--green); }
.group-stat-table td.cashflow-withdrawal { color: var(--amber); }
.group-stat-foot { padding: 12px 18px; color: var(--muted); font-size: 12px; }
.group-stat-foot strong { margin-left: 5px; color: var(--text); }
.group-stat-empty { display: grid; min-height: 190px; padding: 25px; place-items: center; color: var(--muted); text-align: center; font-size: 13px; }
.system-stat-card{min-height:0}.system-stat-table{min-width:760px}.system-total-table{min-width:1040px}.system-stat-table tr.period-summary td{border-top:2px solid var(--line);background:rgba(31,211,132,.035);font-weight:850}.stats-coverage{display:inline-flex;padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:10px}.bot-daily-table td:first-child strong,.bot-daily-table .bot-balance-cell strong{display:block}.bot-daily-table td:first-child small,.bot-daily-table .bot-balance-cell small{display:block;margin-top:3px;color:var(--muted);font-size:10px}.stats-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900}.stats-status.online{background:var(--green-soft);color:var(--green)}.stats-status.warning{background:var(--amber-soft);color:var(--amber)}.stats-status.offline{background:var(--red-soft);color:var(--red)}
.bot-daily-table tr.trial-row td{background:rgba(244,183,68,.035)}.trial-tag{display:inline-flex;margin-left:6px;padding:2px 6px;border:1px solid rgba(244,183,68,.35);border-radius:999px;background:var(--amber-soft);color:var(--amber);font-size:9px;font-weight:950;letter-spacing:.45px;vertical-align:1px}
.chart-stats-pending{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:800}.chart-stats-pending small{font-size:9px;font-weight:650;color:var(--muted)}

.chart-panel { margin-top: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.chart-head h2 { margin: 4px 0; font-size: 22px; }
.chart-head p { margin-bottom: 0; font-size: 12px; }
.chart-picker { display: grid; gap: 6px; min-width: min(360px, 100%); color: var(--muted); font-size: 11px; font-weight: 800; }
.chart-picker select { min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--text); outline: none; }
.chart-stage { position: relative; height: 420px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, black), var(--bg-soft)); }
.chart-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--chart-columns, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--chart-rows, 1), minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); }
.chart-grid:empty { display: none; }
.chart-grid.is-overflowing { grid-template-rows: none; grid-auto-rows: 210px; overflow-y: auto; }
.chart-tile { display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, black), var(--bg-soft)); }
.chart-tile-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 7px 11px; border-bottom: 1px solid var(--line); }
.chart-tile-head div { display: flex; min-width: 0; align-items: baseline; gap: 7px; }
.chart-tile-head strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chart-tile-head span { color: var(--green); font-size: 10px; font-weight: 900; }
.chart-tile-head small { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.chart-canvas-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.chart-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.chart-tile-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: var(--muted); text-align: center; font-size: 11px; }
.chart-grid[data-count="1"] { gap: 0; background: transparent; }
.chart-grid[data-count="1"] .chart-tile { display: block; }
.chart-grid[data-count="1"] .chart-tile-head { display: none; }
.chart-grid[data-count="1"] .chart-canvas-wrap { height: 100%; }
.chart-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }

.section-head { margin: 30px 0 14px; }
.section-head.compact { margin: 0 0 14px; align-items: center; }
.section-head h2 { font-size: 24px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.025); }
.status-dot.online { background: var(--green); box-shadow: 0 0 12px rgba(33,208,122,.6); }
.status-dot.warning { background: var(--amber); box-shadow: 0 0 12px rgba(244,183,68,.45); }
.status-dot.offline { background: var(--red); box-shadow: 0 0 12px rgba(255,93,104,.45); }

.groups { display: grid; gap: 20px; }
.group-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(11,24,19,.88);
  box-shadow: var(--shadow);
}
.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(33,208,122,.085), transparent 44%);
}
.group-title { display: flex; align-items: center; gap: 12px; }
.group-title h3 { margin: 0; font-size: 18px; }
.group-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.group-actions { display: flex; align-items: center; gap: 12px; }
.group-state { color: var(--muted); font-size: 12px; font-weight: 800; }
.group-collapse {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: #0a1d16;
  font: inherit; font-size: 12px; font-weight: 750; cursor: pointer;
}
.group-collapse:hover { color: var(--text); border-color: #247a57; }
.group-collapse i { color: var(--green); font-size: 18px; font-style: normal; line-height: 1; }

.account-list { display: grid; }
.account-list.collapsed { display: none; }
.account-row {
  display: grid;
  grid-template-columns: minmax(105px, .55fr) minmax(160px, .95fr) minmax(100px, .55fr) minmax(120px, .7fr) minmax(300px, 1.45fr) minmax(95px, .55fr) minmax(135px, .7fr);
  align-items: center;
  gap: 10px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(33,59,49,.72);
}
.account-row:last-child { border-bottom: 0; }
.account-row:hover { background: rgba(255,255,255,.018); }
.account-field { min-width: 0; }
.account-field > span, .bot-info > span { display: block; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .55px; text-transform: uppercase; }
.account-field strong { display: block; margin-top: 5px; overflow: hidden; color: var(--text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-field small, .bot-info small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-id strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.account-chart strong { color: var(--green); }
.connection { display: flex; align-items: center; gap: 8px; }
.connection strong { font-size: 12px; }
.connection small { display: block; margin-top: 3px; color: var(--muted); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric { min-width: 0; }
.metric label { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .45px; }
.metric strong { display: block; margin-top: 4px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric strong.negative { color: var(--red); }
.metric strong.positive { color: var(--green); }
.bot-info { min-width: 0; }
.bot-info strong { display: block; margin-top: 5px; overflow: hidden; color: var(--green); font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.control-cell { display: grid; justify-items: end; gap: 7px; }
.settings-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--muted); font: inherit; cursor: pointer; }
.settings-button span { color: var(--green); font-size: 17px; line-height: 1; }
.settings-button small { font-size: 11px; font-weight: 800; }
.settings-button:hover { color: var(--text); border-color: var(--green); }
.settings-button.pending { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle-label { min-width: 30px; font-size: 12px; font-weight: 900; }
.toggle {
  position: relative;
  width: 54px;
  height: 30px;
  padding: 0;
  border: 1px solid #34483f;
  border-radius: 999px;
  background: #17241f;
  transition: .2s ease;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #8ca096;
  transition: .2s ease;
}
.toggle.on { background: var(--green-soft); border-color: rgba(33,208,122,.65); }
.toggle.on::after { transform: translateX(24px); background: var(--green); box-shadow: 0 0 12px rgba(33,208,122,.6); }
.toggle.mixed { background: var(--amber-soft); border-color: var(--amber); }
.toggle.mixed::after { transform: translateX(12px); background: var(--amber); box-shadow: 0 0 12px rgba(255,190,64,.45); }
.toggle.pending { opacity: .6; animation: pulse 1s infinite alternate; }
.control-note { color: var(--muted); font-size: 10px; text-align: right; }

.activity-panel {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(11,24,19,.82);
}
.activity-list { display: grid; gap: 9px; max-height: 340px; overflow: auto; padding-right: 4px; }
.activity-item {
  display: grid;
  grid-template-columns: 90px 12px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  color: #cbdad3;
  font-size: 13px;
}
.activity-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.activity-bullet.success { background: var(--green); }
.activity-bullet.warning { background: var(--amber); }
.activity-bullet.error { background: var(--red); }
.empty-state { padding: 26px; text-align: center; color: var(--muted); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,7,5,.75);
  backdrop-filter: blur(8px);
}
.modal-card {
  width: min(440px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #0d1c17;
  box-shadow: var(--shadow);
  text-align: center;
}
.modal-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-size: 25px;
  font-weight: 950;
}
.modal-card h3 { margin: 0 0 8px; font-size: 22px; }
.modal-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.settings-modal-card { width: min(720px, 100%); max-height: min(850px, 92vh); overflow-y: auto; background: var(--panel); }
.settings-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.settings-modal-head h3 { margin-top: 4px; }
.modal-close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: 23px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.settings-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 750; }
.settings-grid input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: var(--bg-soft); color: var(--text); }
.settings-grid input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.settings-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.settings-switches label { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-soft); color: var(--text); font-size: 12px; font-weight: 750; }
.settings-switches input { accent-color: var(--green); width: 17px; height: 17px; }
.settings-switches .danger-setting { border-color: rgba(255,93,104,.45); }
.settings-warning { margin-top: 12px !important; padding: 10px 12px; border-radius: 10px; background: var(--red-soft); color: var(--red) !important; font-size: 12px; }
.settings-sync-status { margin-top: 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 800; }
.settings-sync-status.synced { color: var(--green); background: var(--green-soft); }
.settings-sync-status.pending { color: var(--amber); background: var(--amber-soft); border-color: rgba(244,183,68,.35); }
.wukong-settings { display: grid; gap: 14px; }
.wukong-settings-section { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.wukong-settings-section h4 { margin: 0 0 12px; color: var(--green); font-size: 12px; letter-spacing: .08em; }
.wukong-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.wukong-settings-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 750; }
.wukong-settings-grid label.wide { grid-column: 1 / -1; }
.wukong-settings-grid input:not([type="checkbox"]), .wukong-settings-grid select { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: var(--panel); color: var(--text); }
.wukong-settings-grid input:focus, .wukong-settings-grid select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.wukong-setting-toggle { display: flex !important; grid-template-columns: 18px 1fr; align-items: center; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text) !important; }
.wukong-setting-toggle input { width: 17px; height: 17px; accent-color: var(--green); }
.wukong-settings input:disabled, .wukong-settings select:disabled { cursor: not-allowed; opacity: .62; }
.settings-modal-card:has(.wukong-settings:not(.hidden)) { width: min(980px, 100%); }
.settings-modal-card button:disabled { cursor: not-allowed; opacity: .5; }
.summary-card.interactive { cursor: pointer; }
.summary-card.interactive:hover, .summary-card.interactive:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px var(--green-soft); }
.warning-modal-card { width: min(650px, 100%); }
.warning-list { display: grid; gap: 9px; max-height: 60vh; overflow-y: auto; }
.warning-item { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }
.warning-item div { display: grid; gap: 4px; }
.warning-item strong { color: var(--text); font-size: 13px; }
.warning-item small { color: var(--muted); font-size: 12px; }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  max-width: min(390px, calc(100vw - 44px));
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #10221b;
  box-shadow: var(--shadow);
  color: #e7f2ed;
}
.toast.error { border-color: rgba(255,93,104,.45); color: #ffb0b6; }

@keyframes pulse { from { opacity: .48; } to { opacity: .9; } }

@media (max-width: 1200px) {
  .intel-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}
  .overview-layout { grid-template-columns: minmax(0,1fr) 220px; }
  .group-stats-grid { grid-template-columns: minmax(0, 1fr); }
  .summary-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
  .account-row { grid-template-columns: minmax(100px,.6fr) minmax(150px,1fr) minmax(95px,.6fr) minmax(120px,.75fr) minmax(250px,1.5fr) minmax(95px,.65fr); }
  .control-cell { grid-column: 1 / -1; grid-row: auto; display: flex; justify-content: flex-end; align-items: center; }
}

@media (max-width: 820px) {
  .intel-grid{grid-template-columns:1fr}.intel-news .intel-body{max-height:620px}.spdr-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-layout { display:block; }
  .summary-sidebar { position: fixed; top: auto; right: 12px; bottom: 12px; z-index: 80; width: min(310px, calc(100vw - 24px)); max-height: 72vh; }
  .summary-sidebar.summary-hidden { width: 150px; }
  .orders-head { align-items: stretch; flex-direction: column; }
  .orders-controls { justify-content: stretch; }.orders-controls label,.orders-controls select,.orders-controls .btn { width:100%; }
  .chart-head { align-items: stretch; flex-direction: column; }
  .chart-stage { height: 330px; }
  .chart-grid.is-multi { grid-template-columns: 1fr !important; grid-template-rows: none; grid-auto-rows: 290px; overflow-y: auto; }
  .theme-picker span { display: none; }
  .theme-picker select { max-width: 120px; }
  .group-stats-grid { grid-template-columns: 1fr; }
  .settings-grid, .settings-switches, .wukong-settings-grid { grid-template-columns: 1fr; }
  .wukong-settings-grid label.wide { grid-column: auto; }
  .topbar { position: static; align-items: flex-start; padding: 13px 16px; }
  .brand p, .clock, .server-chip span:not(.status-dot) { display: none; }
  .header-actions { gap: 7px; }
  .content { padding: 24px 14px 56px; }
  .hero-row, .section-head { align-items: flex-start; flex-direction: column; }
  .system-actions { width: 100%; justify-content: stretch; }
  .system-actions .btn { flex: 1; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-card { min-height: 102px; }
  .group-header { align-items: flex-start; flex-direction: column; }
  .group-actions { width: 100%; justify-content: space-between; }
  .account-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    padding: 17px;
  }
  .metrics { grid-column: 1 / -1; }
  .control-cell { grid-column: 1 / -1; grid-row: auto; justify-content: space-between; }
}

@media (max-width: 480px) {
  .intel-body{max-height:460px}.intel-spdr .intel-body{max-height:none}.spdr-comparisons{grid-template-columns:1fr}.spdr-detail-grid{grid-template-columns:1fr 1fr}.spdr-chart{height:190px}.news-item{grid-template-columns:auto minmax(0,1fr)}.gold-direction{grid-column:2}.driver-indicators{grid-template-columns:1fr}
  .theme-picker { width: 100%; order: 5; }
  .theme-picker select { width: 100%; max-width: none; }
  .brand h1 { font-size: 13px; }
  .btn { padding: 0 12px; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .summary-card { padding: 14px; }
  .summary-card .value { font-size: 21px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .account-row { grid-template-columns: 1fr 1fr; }
  .control-cell { flex-direction: row; }
  .activity-item { grid-template-columns: 72px 10px 1fr; padding: 9px; font-size: 12px; }
  .login-card { padding: 26px 21px; }
}