:root{
  --color-bg:#f0f4f8;
  --color-surface:#ffffff;
  --color-border:#e2e8f0;
  --color-border-light:#f1f5f9;
  --color-text:#0f172a;
  --color-text-muted:#64748b;
  --color-primary:#2563eb;
  --color-primary-dark:#1d4ed8;
  --color-primary-light:#eff6ff;
  --color-accent:#f59e0b;
  --color-accent-light:rgba(245,158,11,.15);
  --color-positive:#059669;
  --color-positive-bg:#ecfdf5;
  --color-negative:#dc2626;
  --color-negative-bg:#fef2f2;
  --color-warning:#d97706;
  --color-warning-bg:#fffbeb;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:0 8px 24px rgba(15,23,42,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',Segoe UI,system-ui,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;-webkit-font-smoothing:antialiased}

/* ── Main page: deep blue theme ── */
.main-page{
  --color-bg-deep:#071525;
  --color-bg-mid:#0f2744;
  --color-bg-accent:#163560;
  --color-surface:#ffffff;
  --color-surface-soft:#f4f8fd;
  --color-border:#c5d7eb;
  --color-border-light:#e3edf7;
  --color-text:#0c1929;
  --color-text-muted:#4a627a;
  --color-text-on-dark:#e8f0fa;
  --color-text-muted-on-dark:#8fa8c4;
  --color-primary:#0ea5e9;
  --color-primary-dark:#0284c7;
  --color-primary-light:rgba(14,165,233,.14);
  --color-accent:#f59e0b;
  --color-accent-dark:#d97706;
  --color-accent-light:rgba(245,158,11,.18);
  --color-positive:#10b981;
  --color-positive-bg:#ecfdf5;
  --color-negative:#ef4444;
  --color-negative-bg:#fef2f2;
  --color-warning:#f59e0b;
  --color-warning-bg:rgba(245,158,11,.12);
  --shadow-sm:0 1px 3px rgba(7,21,37,.25);
  --shadow-md:0 8px 24px rgba(7,21,37,.35);
  --shadow-lg:0 16px 40px rgba(7,21,37,.45);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(14,165,233,.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 20%, rgba(99,102,241,.14) 0%, transparent 50%),
    linear-gradient(165deg, var(--color-bg-deep) 0%, var(--color-bg-mid) 42%, var(--color-bg-accent) 100%);
  color:var(--color-text-on-dark);
}
.main-page .site-nav{background:rgba(7,21,37,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.main-page .site-logo{color:var(--color-text-on-dark)}
.main-page .logo-icon{color:var(--color-primary);text-shadow:0 0 20px rgba(14,165,233,.45)}
.main-page .nav-link{color:var(--color-text-muted-on-dark)}
.main-page .nav-link:hover{background:rgba(14,165,233,.15);color:#7dd3fc}
.main-page .nav-link.active{background:rgba(14,165,233,.2);color:#7dd3fc}
.main-page .hero h1{color:var(--color-text-on-dark);text-shadow:0 2px 24px rgba(0,0,0,.25)}
.main-page .hero-subtitle{color:var(--color-text-muted-on-dark)}
.main-page .hero-badge{background:var(--color-accent-light);color:#fcd34d;border:1px solid rgba(245,158,11,.35)}
.main-page .disclaimer-banner{background:rgba(245,158,11,.12);color:#fde68a;border:1px solid rgba(245,158,11,.35)}
.main-page .section-header h2{color:var(--color-text-on-dark)}
.main-page .section-desc{color:var(--color-text-muted-on-dark)}
.main-page .section-badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--color-text-muted-on-dark)}
.main-page .site-footer{border-top-color:rgba(255,255,255,.1);color:var(--color-text-muted-on-dark)}
.main-page .site-footer a{color:#7dd3fc}
.main-page .stat-card,
.main-page .control-card,
.main-page .table-card,
.main-page .comparison-card,
.main-page .fund-chart-card,
.main-page .card,
.main-page .login-form{background:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-md);color:var(--color-text)}
.main-page .table-card td,
.main-page .comparison-card td,
.main-page .comparison-card th,
.main-page .card td,
.main-page .card th{color:var(--color-text)}
.main-page .stat-label{color:var(--color-text-muted)}
.main-page .stat-value{color:var(--color-text)}
.main-page .no-record{color:var(--color-text-muted)}
.main-page .stat-card:hover{box-shadow:var(--shadow-lg);border-color:#93c5fd}
.main-page .control-card-header h2,
.main-page .control-group label{color:var(--color-text)}
.main-page .control-card-header p{color:var(--color-text-muted)}
.main-page .control-card-header p a{color:var(--color-primary-dark)}
.main-page th{background:var(--color-surface-soft);color:var(--color-text-muted)}
.main-page th.sortable:hover{background:var(--color-primary-light);color:var(--color-primary-dark)}
.main-page tbody tr:hover{background:#f0f7ff}
.main-page .btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);box-shadow:0 2px 8px rgba(14,165,233,.35);color:#fff}
.main-page .btn-primary:hover{background:linear-gradient(135deg,#38bdf8 0%,var(--color-primary) 100%);box-shadow:0 4px 14px rgba(14,165,233,.45)}
.main-page .btn-outline{border-color:var(--color-primary);color:var(--color-primary-dark)}
.main-page .btn-outline:hover{background:var(--color-primary-light);color:var(--color-primary-dark)}
.main-page .table-card td.positive,
.main-page .comparison-card td.positive,
.main-page .return-cell.positive{color:var(--color-positive)}
.main-page .table-card td.negative,
.main-page .comparison-card td.negative,
.main-page .return-cell.negative{color:var(--color-negative)}
.main-page .return-cell.positive{background:var(--color-positive-bg);border-radius:var(--radius-sm)}
.main-page .return-cell.negative{background:var(--color-negative-bg);border-radius:var(--radius-sm)}
.main-page .portfolio-link{color:var(--color-primary-dark)}
.main-page .totals-row td{background:var(--color-surface-soft)}
.main-page .fund-chart-card h3{color:var(--color-text)}
.main-page .chart-panel-title{color:var(--color-text)}
.main-page .compare-vs{color:var(--color-accent)}
.main-page .input-prefix:focus-within,
.main-page .period-panel select:focus,
.main-page .search-panel input:focus,
.main-page .search-panel select:focus,
.main-page .compare-panel select:focus,
.main-page .control-group select:focus,
.main-page .control-group input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(14,165,233,.2)}
.main-page .type-badge.type-etf{background:#dbeafe;color:#1d4ed8}
.main-page .type-badge.type-stock{background:#d1fae5;color:#047857}
.main-page .type-badge.type-robo{background:#ede9fe;color:#6d28d9}
.main-page code{background:var(--color-surface-soft)!important;color:var(--color-primary-dark)}
.main-page .stat-card{border-top:3px solid transparent}
.main-page .stat-card:nth-child(1){border-top-color:var(--color-primary)}
.main-page .stat-card:nth-child(2){border-top-color:#6366f1}
.main-page .stat-card:nth-child(3){border-top-color:var(--color-accent)}
.main-page .stat-card:nth-child(4){border-top-color:var(--color-positive)}
.main-page .stat-card:nth-child(5){border-top-color:#a855f7}
.main-page .stat-value.positive{color:var(--color-positive)}
.main-page .stat-value.negative{color:var(--color-negative)}

/* ── Admin (main-page theme) ── */
.main-page .admin-hero{text-align:center;padding:28px 0 24px}
.main-page .admin-hero h1{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px;color:var(--color-text-on-dark);text-shadow:0 2px 24px rgba(0,0,0,.25)}
.main-page .admin-tabs{border-bottom-color:rgba(255,255,255,.12);margin-bottom:22px}
.main-page .admin-tab{color:var(--color-text-muted-on-dark)}
.main-page .admin-tab:hover{color:#7dd3fc}
.main-page .admin-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.main-page .card{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px 24px}
.main-page .card h2{font-size:1rem;font-weight:600;margin-bottom:8px;color:var(--color-text)}
.main-page .card label{display:block;font-size:.8rem;font-weight:600;color:var(--color-text-muted);margin-bottom:10px}
.main-page .form-grid label.field{margin-bottom:0}
.main-page .card input:not([type="checkbox"]),
.main-page .card select,
.main-page .card textarea,
.main-page .login-form input{width:100%;padding:9px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9rem;font-family:inherit;background:#fff;color:var(--color-text);margin-top:4px;margin-bottom:10px;transition:border-color .15s,box-shadow .15s;outline:none}
.main-page .card input:focus,
.main-page .card select:focus,
.main-page .login-form input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(14,165,233,.2)}
.main-page .card input[type="checkbox"]{width:auto;margin-right:6px;vertical-align:middle}
.main-page .card-desc{color:var(--color-text-muted)}
.main-page .lookup-results h3{color:var(--color-text-muted)}
.main-page .api-meta{background:var(--color-surface-soft);border-color:var(--color-border);color:var(--color-text-muted)}
.main-page .api-meta strong{color:var(--color-text)}
.main-page .search-result-item{background:#fff;border-color:var(--color-border)}
.main-page .search-result-item.best-match{border-color:var(--color-primary);background:var(--color-primary-light)}
.main-page .login-container{background:transparent;min-height:100vh}
.main-page .login-form{width:min(380px,92vw);padding:28px 24px;text-align:center;border:1px solid var(--color-border)}
.main-page .login-logo{justify-content:center;margin-bottom:18px;text-decoration:none;color:var(--color-text)!important}
.main-page .login-form h2{margin-bottom:16px;color:var(--color-text);font-size:1.25rem}
.main-page .nav-btn{background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:.875rem;font-weight:500}
.main-page .btn-secondary{background:#475569;color:#fff;padding:9px 16px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;font-weight:600;font-family:inherit;margin-left:0;transition:background .15s}
.main-page .btn-secondary:hover{background:#334155}
.main-page .form-actions .btn-secondary{margin-bottom:0}
.main-page table td button{background:var(--color-surface-soft);border-color:var(--color-border);color:var(--color-text)}
.main-page table td button:hover{background:var(--color-primary-light);border-color:#93c5fd;color:var(--color-primary-dark)}
.main-page table td button.btn-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-color:var(--color-primary-dark);color:#fff}
.main-page table td button.btn-primary:hover{background:linear-gradient(135deg,#38bdf8 0%,var(--color-primary) 100%)}
.main-page .empty-message{color:var(--color-text-muted)}
.main-page input.api-filled,
.main-page select.api-filled{background:#ecfdf5;border-color:#86efac}
.main-page .card.full-width.table-card{padding:0;overflow:hidden}
.main-page .card.full-width.table-card>h2{padding:20px 24px 0;margin-bottom:0}
.main-page .card.full-width.table-card .table-scroll{padding:0 0 4px}
.main-page .card.full-width.table-card .empty-message{padding:12px 24px 20px}

/* Admin + compare: fluid width so wide tables can breathe */
.main-page .admin-shell,
.main-page .app-shell{max-width:min(1680px,96vw);padding:24px clamp(16px,2.5vw,40px) 48px}
.main-page .site-nav-inner{max-width:min(1680px,96vw);padding:0 clamp(16px,2.5vw,40px)}

.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{padding:9px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9rem;font-family:inherit;background:#fff;color:var(--color-text);width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(14,165,233,.2)}
.contact-form .form-actions{margin-top:4px}
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.turnstile-wrap{min-height:65px}

.admin-panel-grid{display:grid;gap:18px;grid-template-columns:1fr}
.admin-panel-grid .card.full-width{grid-column:1/-1}

/* Side-by-side form + table on wide screens */
@media(min-width:1100px){
  .admin-panel-grid.split-layout{grid-template-columns:minmax(300px,380px) 1fr;align-items:start}
  .admin-panel-grid.split-layout .form-card{grid-column:1;grid-row:1}
  .admin-panel-grid.split-layout .table-card{grid-column:2;grid-row:1;min-width:0}
}

/* Multi-column forms */
.form-grid{display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));align-items:end}
@media(min-width:900px){
  .form-grid{grid-template-columns:repeat(3,1fr)}
  .form-grid.composition-form{grid-template-columns:1fr 1fr minmax(100px,140px)}
}
@media(min-width:1200px){
  .form-grid{grid-template-columns:repeat(4,1fr)}
  #fundForm.form-grid{grid-template-columns:repeat(6,1fr)}
  #fundForm.form-grid .span-2{grid-column:span 3}
}
.form-grid .span-full{grid-column:1/-1}
.form-grid .span-2{grid-column:span 2}
.form-grid .field{display:flex;flex-direction:column;gap:4px;margin-bottom:0;font-size:.75rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em}
.form-grid .field input,
.form-grid .field select{margin-top:0;margin-bottom:0;text-transform:none;font-weight:400;letter-spacing:normal}
.main-page .form-grid .field input:not([type="checkbox"]),
.main-page .form-grid .field select{width:100%}
.field-checkboxes{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding-top:4px}
.field-checkbox{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:500;color:var(--color-text);text-transform:none;letter-spacing:normal;margin-bottom:0}
.field-checkbox input[type="checkbox"]{width:auto;margin:0}
.search-form .input-row{max-width:560px}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:4px}
.form-actions .btn-primary,.form-actions .btn-secondary{margin:0}

/* Search results in responsive grid */
.search-results-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}

/* Compact admin tables */
.main-page .admin-table th,
.main-page .admin-table td{padding:10px 12px;font-size:.8125rem;vertical-align:middle}
.main-page .admin-table th{font-size:.7rem}
.main-page .admin-table .actions-cell{white-space:normal;max-width:none!important;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.main-page .admin-table .actions-col{min-width:11rem}
.main-page .admin-table td.cell-input{max-width:none;overflow:visible;white-space:normal}
.main-page .admin-table td.cell-input input,
.main-page .admin-table td.cell-input select{min-width:120px}
.main-page .admin-table .actions-cell button{margin:0;padding:4px 8px;font-size:.75rem}
.main-page .admin-table td:not(.actions-cell):not(.cell-input){max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main-page .admin-table td.fund-name{max-width:220px}
.main-page .admin-table td.fund-symbol{max-width:100px}

.input-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.input-row input{flex:1 1 160px;min-width:0;margin-bottom:0!important}
.input-row .btn-primary{flex:0 0 auto;white-space:nowrap;margin-bottom:0}

@media(max-width:720px){
  .form-grid .span-2{grid-column:1/-1}
  .admin-panel-grid.split-layout{grid-template-columns:1fr}
  .main-page .admin-table td:not(.actions-cell){max-width:none;white-space:normal}
}

/* ── Main page layout ── */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.site-nav-inner{max-width:1140px;margin:0 auto;padding:8px 20px;min-height:56px;height:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.site-nav-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.site-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.05rem;color:var(--color-text);text-decoration:none}
.logo-icon{color:var(--color-primary);font-size:1.2rem}
.nav-link{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;font-weight:500;padding:6px 14px;border-radius:var(--radius-sm);transition:background .15s,color .15s}
.nav-link:hover{background:var(--color-primary-light);color:var(--color-primary)}
.nav-link.active{background:var(--color-primary-light);color:var(--color-primary)}

.app-shell{max-width:1140px;margin:0 auto;padding:24px 20px 48px}
.hero{text-align:center;padding:32px 0 28px}
.hero-badge{display:inline-block;background:var(--color-primary-light);color:var(--color-primary);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:14px}
.hero h1{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.hero-subtitle{font-size:1.05rem;color:var(--color-text-muted);max-width:min(960px,100%);margin:0 auto 18px;line-height:1.5}
.disclaimer-banner{display:flex;align-items:flex-start;gap:10px;background:var(--color-warning-bg);color:#92400e;font-size:.8rem;line-height:1.5;text-align:left;padding:12px 18px;border-radius:var(--radius-md);border:1px solid #fde68a;width:100%;max-width:min(960px,100%);margin:0 auto}
.disclaimer-banner svg{flex-shrink:0;margin-top:2px}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:18px 20px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat-label{font-size:.75rem;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.stat-value{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--color-text)}
.stat-value.positive{color:var(--color-positive)}
.stat-value.negative{color:var(--color-negative)}

.control-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:24px;box-shadow:var(--shadow-sm);min-width:0;max-width:100%}
.control-card-header{margin-bottom:18px}
.control-card-header h2{font-size:1rem;font-weight:600;margin-bottom:4px}
.control-card-header p{font-size:.875rem;color:var(--color-text-muted)}
.control-card-header p a{color:var(--color-primary);text-decoration:none;font-weight:500}
.control-card-header p a:hover{text-decoration:underline}
.control-group{display:flex;flex-direction:column;gap:5px}
.control-group label{font-size:.75rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em}
.control-group.search-group{flex:1;min-width:200px}
.control-action{align-self:flex-end}
.input-prefix{display:flex;align-items:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s}
.input-prefix:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.input-prefix span{padding:0 10px;color:var(--color-text-muted);background:var(--color-border-light);font-weight:500;border-right:1px solid var(--color-border)}
.input-prefix input{border:none;padding:9px 12px;font-size:.9rem;min-width:120px;outline:none;font-family:inherit}

.data-section{margin-bottom:28px}
.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-header h2{font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.section-desc{font-size:.875rem;color:var(--color-text-muted);margin-top:2px}
.section-desc a{color:var(--color-primary);text-decoration:none;font-weight:500}
.section-desc a:hover{text-decoration:underline}
.section-badge{font-size:.8rem;font-weight:500;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);padding:4px 12px;border-radius:999px;white-space:nowrap}

.table-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.table-scroll{overflow-x:auto}
.comparison-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow-sm)}

/* ── Controls ── */
.period-panel,.search-panel,.compare-panel{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;width:100%;max-width:100%;min-width:0}
.period-panel select,.period-panel input,.search-panel input,.search-panel select,.compare-panel select,.control-group select,.control-group input[type="text"],.control-group input[type="date"],.control-group input[type="number"]:not(.input-prefix input){padding:9px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9rem;font-family:inherit;background:#fff;color:var(--color-text);transition:border-color .15s,box-shadow .15s;outline:none}
.period-panel select:focus,.search-panel input:focus,.search-panel select:focus,.compare-panel select:focus,.control-group select:focus,.control-group input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.search-panel input{min-width:0;width:100%;max-width:100%}
.compare-select-group{flex:1 1 220px;min-width:0;max-width:100%}
.compare-panel select{width:100%;max-width:100%;min-width:0}
.compare-vs{align-self:flex-end;padding-bottom:10px;font-size:.8rem;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}

.btn-primary{display:inline-flex;align-items:center;gap:6px;background:var(--color-primary);border:none;color:#fff;padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;font-weight:600;font-family:inherit;transition:background .15s,box-shadow .15s,transform .1s}
.btn-primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-sm)}
.btn-primary:active{transform:scale(.98)}
.btn-outline{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary)}
.btn-outline:hover{background:var(--color-primary-light);box-shadow:none}
.btn-link{color:var(--color-primary);text-decoration:none;font-weight:600;display:inline-block;margin:8px auto;padding:6px 12px;border:1px solid var(--color-primary);border-radius:var(--radius-sm)}

/* ── Tables ── */
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;font-size:.875rem;border-bottom:1px solid var(--color-border-light)}
th{background:#f8fafc;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);white-space:nowrap}
th.sortable{cursor:pointer;user-select:none;transition:background .15s,color .15s}
th.sortable:hover{background:#eef2ff;color:var(--color-primary)}
.sort-indicator{font-size:.65rem;margin-left:2px}
tbody tr{transition:background .12s}
tbody tr:hover{background:#f8fafc}
tbody tr:last-child td{border-bottom:none}
.no-record{text-align:center;color:var(--color-text-muted);padding:32px 16px!important;font-style:italic}

/* ── Badges & values ── */
.type-badge{display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:#f1f5f9;color:#475569}
.type-badge.type-etf{background:#eff6ff;color:#1d4ed8}
.type-badge.type-stock{background:#f0fdf4;color:#15803d}
.type-badge.type-robo{background:#fdf4ff;color:#7e22ce}
.risk-pill{display:inline-block;font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:999px}
.risk-pill.low-risk{background:var(--color-positive-bg);color:var(--color-positive)}
.risk-pill.medium-risk{background:var(--color-warning-bg);color:var(--color-warning)}
.risk-pill.high-risk{background:var(--color-negative-bg);color:var(--color-negative)}
.return-cell{font-weight:600;font-variant-numeric:tabular-nums}
.cell-sub{display:block;font-size:.72rem;font-weight:500;color:var(--color-text-muted);margin-top:2px;line-height:1.35}
.dividend-cell{font-variant-numeric:tabular-nums;line-height:1.35}
.dividend-cell .div-yield{font-weight:600}
.dividend-cell .div-payout{color:var(--color-positive);font-weight:600;font-size:.8rem}
.dividend-cell .div-next{color:var(--color-text-muted);font-size:.72rem}
.positive{color:var(--color-positive);font-weight:600}
.negative{color:var(--color-negative);font-weight:600}
.low-risk{color:var(--color-positive);font-weight:600}
.medium-risk{color:var(--color-warning);font-weight:600}
.high-risk{color:var(--color-negative);font-weight:600}

.site-footer{border-top:1px solid var(--color-border);padding-top:20px;margin-top:12px;color:var(--color-text-muted);text-align:center;font-size:.85rem}
.site-footer a{color:var(--color-primary);text-decoration:none;font-weight:500}
.site-footer a:hover{text-decoration:underline}

.hidden{display:none}

.portfolio-link{color:var(--color-primary);text-decoration:none;font-weight:600}
.portfolio-link:hover{text-decoration:underline}
.totals-row td{background:var(--color-surface-soft,#f8fafc);border-top:2px solid var(--color-border);font-variant-numeric:tabular-nums}
.alloc-bar{display:flex;height:18px;border-radius:999px;overflow:hidden;background:#e2e8f0;margin-bottom:12px}
.alloc-seg{height:100%;min-width:2px}
.alloc-note{font-size:.8rem;color:var(--color-text-muted);margin-top:10px}
.chart-panel{margin-bottom:16px}
.chart-panel-title{font-size:.95rem;font-weight:600;margin-bottom:10px;color:var(--color-text)}
.price-chart{width:100%;height:160px;display:block}
.overlay-chart{height:220px}
.chart-axis{display:flex;justify-content:space-between;gap:8px;font-size:.72rem;color:var(--color-text-muted);margin-top:6px;font-variant-numeric:tabular-nums}
.chart-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
.chart-legend-item{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--color-text-muted)}
.chart-swatch{width:10px;height:10px;border-radius:2px;display:inline-block}
.chart-empty{color:var(--color-text-muted);font-style:italic;padding:12px 0}
.fund-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.fund-chart-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:16px 18px;box-shadow:var(--shadow-sm)}
.fund-chart-card h3{font-size:.95rem;font-weight:600;color:var(--color-text);margin-bottom:2px}
.fund-chart-card header p{font-size:.8rem;color:var(--color-text-muted);margin-bottom:10px}

/* ── About page ── */
.about-prose{display:flex;flex-direction:column;gap:18px}
.about-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm)}
.about-card h2{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:10px;color:var(--color-text)}
.about-card h3{font-size:.9rem;font-weight:600;margin:16px 0 8px;color:var(--color-text)}
.about-card p,.about-card li{font-size:.925rem;line-height:1.65;color:#334155}
.about-card ul,.about-card ol{padding-left:1.2rem;margin:8px 0}
.about-card li{margin:4px 0}
.about-card code,.formula{display:inline-block;background:#f1f5f9;border:1px solid var(--color-border);border-radius:6px;padding:2px 8px;font-size:.82rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#0f172a}
.formula-block{display:block;width:100%;margin:10px 0;padding:10px 12px;overflow-x:auto}
.band-legend{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 4px}
.band-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--color-text-muted)}
.about-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.about-toc a{font-size:.8rem;font-weight:600;color:var(--color-primary);text-decoration:none;background:var(--color-primary-light);padding:6px 12px;border-radius:999px}
.about-toc a:hover{background:#dbeafe}

/* ── Admin & shared ── */
header{margin-bottom:18px;text-align:center}
header h1{font-size:2rem;margin-bottom:.2rem}
header p{color:var(--color-text-muted);margin-bottom:10px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:14px}
.card.full-width{grid-column:1/-1}
.card h2{margin-bottom:10px}
.card input,.card select,.card textarea{width:100%;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:8px}
.data-preview{margin-top:20px}
footer{border-top:1px solid var(--color-border);padding-top:12px;margin-top:20px;color:var(--color-text-muted);text-align:center;font-size:.95rem}
.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;border-bottom:2px solid var(--color-border);padding-bottom:0}
.admin-tab{background:transparent;border:none;border-bottom:3px solid transparent;color:var(--color-text-muted);cursor:pointer;font-size:.95rem;font-weight:600;margin-bottom:-2px;padding:10px 18px;transition:color .15s,border-color .15s}
.admin-tab:hover{color:var(--color-primary)}
.admin-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.admin-tab-panel{display:none}
.admin-tab-panel.active{display:block}
table td input,table td select{width:100%;padding:6px;border:1px solid var(--color-border);border-radius:4px;font-size:.9rem}
table td button{margin:2px 4px 2px 0;padding:4px 10px;border:1px solid var(--color-border);border-radius:4px;background:#f8fafc;cursor:pointer;font-size:.85rem}
table td button:hover{background:#e2e8f0}
table td button.btn-danger{background:var(--color-negative-bg);border-color:#fecaca;color:#991b1b}
table td button.btn-danger:hover{background:#fecaca}
table td button.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
table td button.btn-primary:hover{background:var(--color-primary-dark)}
.search-result-item{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:10px;margin:10px 0}
.search-result-item.best-match{border-color:var(--color-primary);background:var(--color-primary-light,#eff6ff)}
.search-result-item .match-meta{font-size:.8rem;color:var(--color-text-muted,#64748b);margin:6px 0 10px;line-height:1.5}
.search-result-item .match-actions{display:flex;gap:8px;flex-wrap:wrap}
.card-desc{font-size:.875rem;color:var(--color-text-muted,#64748b);margin:-4px 0 12px}
.lookup-results{margin-top:14px}
.lookup-results h3{font-size:.9rem;margin-bottom:8px;color:var(--color-text-muted,#64748b)}
.api-meta{background:#f8fafc;border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-sm,6px);padding:10px 12px;margin-bottom:8px;font-size:.8rem;color:var(--color-text-muted,#64748b);line-height:1.6}
.api-meta strong{color:var(--color-text,#0f172a)}
.form-actions{display:flex;gap:8px;margin-top:4px}
.form-actions .btn-primary,.form-actions .btn-secondary{margin-bottom:0}
input.api-filled{background:#f0fdf4;border-color:#86efac}
select.api-filled{background:#f0fdf4;border-color:#86efac}
.empty-message{color:var(--color-text-muted);font-style:italic;padding:8px 0}
.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--color-bg)}
.login-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:20px;width:300px;text-align:center}
.login-form h2{margin-bottom:20px}
.login-form input{width:100%;padding:8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:10px}
.error-message{color:var(--color-negative);margin-top:10px}
.status-bar{margin:16px 0;padding:12px 16px;border-radius:var(--radius-md);font-weight:600;transition:opacity .3s ease;opacity:1}
.status-bar.hidden{display:none;opacity:0}
.status-bar.success{background:#dcfce7;color:#166534;border:1px solid #a7f3d0}
.status-bar.error{background:var(--color-negative-bg);color:#991b1b;border:1px solid #fecaca}
.status-bar.loading{background:#e0f2fe;color:#0c4a6e;border:1px solid #bae6fd}
.status-bar.loading::before{content:'⏳ '}
.btn-secondary{background:#6b7280;border:none;color:#fff;padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;margin-left:10px}
.btn-secondary:hover{background:#4b5563}
.group-header td{background:#f1f5f9;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem}
.canada-group{margin-bottom:32px}
.admin-table code{font-size:.8em;background:#f1f5f9;padding:1px 5px;border-radius:4px}

@media(max-width:640px){
  .hero{padding:20px 0}
  .control-card{padding:16px}
  .period-panel,.search-panel,.compare-panel{flex-direction:column;align-items:stretch}
  .compare-select-group,.search-panel .control-group,.period-panel .control-group{flex:1 1 auto;width:100%;max-width:100%;min-width:0}
  .compare-panel select,.search-panel input,.search-panel select,.period-panel select,.period-panel input,.control-group select{width:100%;max-width:100%;min-width:0}
  .control-action{align-self:stretch}
  .control-action .btn-primary{width:100%;justify-content:center}
  .compare-vs{display:none}
  th,td{padding:10px 12px;font-size:.8rem}
}