:root{
    --bg:#000000;
    --bg-2:#000000;
    --panel:#12161d;
    --panel-2:#181d26;
    --panel-3:#1e2430;
    --border:#242b37;
    --grid-line:rgba(79,209,197,.05);
    --text:#e7eaef;
    --muted:#7d8794;
    --danger:#f0776b;
    --shadow:0 20px 40px rgba(0,0,0,.45);
    --radius-lg:18px;
    --radius-md:12px;
    --serif:"Fraunces", Georgia, serif;
    --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;

    /* --- Palette 1: Default (Gold & Cyan) --- */
    --accent:#d1a54c;
    --accent-ink:#221a08;
    --accent-2:#4fd1c5;
    --accent-soft:rgba(209,165,76,.12);
  }

  html[data-theme="light"]{
    --bg:#e6e6e6;
    --bg-2:#d6d6d6;
    --panel:#fffdf8;
    --panel-2:#f5f0e4;
    --panel-3:#ece5d4;
    --border:#9a9a9a;
    --grid-line:rgba(15,98,110,.05);
    --text:#20241f;
    --muted:#5a5a5a;
    --danger:#b8382b;
    --shadow:0 20px 40px rgba(40,30,10,.08);
  }

  /* --- COLOR PALETTE OPTIONS (Works on both Light & Dark themes) --- */
  html[data-palette="emerald"]{
    --accent:#3ecf8e;
    --accent-ink:#062316;
    --accent-2:#38bdf8;
    --accent-soft:rgba(62,207,142,.13);
  }
  html[data-palette="sunset"]{
    --accent:#f97316;
    --accent-ink:#2b1202;
    --accent-2:#fb7185;
    --accent-soft:rgba(249,115,22,.14);
  }
  html[data-palette="violet"]{
    --accent:#a855f7;
    --accent-ink:#1e0735;
    --accent-2:#ec4899;
    --accent-soft:rgba(168,85,247,.14);
  }

  *{box-sizing:border-box;}
  /* Reset native button chrome so custom styling isn't fought by the
     browser's built-in button paint (this is what caused the jagged
     shadow/notch look on Android WebView buttons). */
  button{
    font:inherit;
    color:inherit;
    background:none;
    border:none;
    appearance:none;
    -webkit-appearance:none;
    -webkit-tap-highlight-color:transparent;
    box-shadow:none;
    margin:0;
  }
  html,body{height:100%;}
  body{
    margin:0;
    display:flex;
    flex-direction:column;
    background:
      radial-gradient(1000px 460px at 50% -8%, var(--accent-soft), transparent 62%),
      var(--bg);
    color:var(--text);
    font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
    min-height:100vh;
    transition:background .2s ease, color .2s ease;
  }
  header{
    position:relative;
    padding:28px 20px 20px;
    text-align:center;
  }
  .brand-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    max-width:960px;
    margin:0 auto;
    text-align:center;
  }
  .menu-wrap{
    position:relative;
    margin-top:auto;
  }
  #menuToggleBtn.open{background:var(--accent-soft); color:var(--accent);}
  .menu-dropdown{
    position:absolute;
    bottom:calc(100% + 8px);
    left:0;
    min-width:210px;
    background:var(--panel);
    border-radius:12px;
    padding:6px;
    box-shadow:var(--shadow);
    display:none;
    flex-direction:column;
    gap:2px;
    z-index:60;
  }
  .menu-dropdown.show{display:flex;}
  .menu-item{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:10px 12px;
    border-radius:8px;
    border:none;
    background:transparent;
    color:var(--text);
    font-size:13.5px;
    text-align:left;
    cursor:pointer;
    transition:background .12s, color .12s;
  }
  .menu-item i{width:16px; text-align:center; color:var(--muted); font-size:14px;}
  .menu-item:hover{background:var(--panel-2);}
  .menu-item.active{background:var(--accent-soft); color:var(--accent);}
  .menu-item.active i{color:var(--accent);}
  .menu-divider{
    height:1px;
    background:var(--border);
    margin:4px 2px;
  }

  /* --- NEW: Palette Picker Swatches inside Dropdown --- */
  .menu-section-title{
    font-size:10.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    padding:6px 12px 2px;
  }
  .palette-picker-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 12px 10px;
    gap:8px;
  }
  .palette-swatch{
    width:28px;
    height:28px;
    border-radius:50%;
    border:2px solid transparent;
    cursor:pointer;
    position:relative;
    transition:transform .15s, border-color .15s;
  }
  .palette-swatch:hover{transform:scale(1.12);}
  .palette-swatch.active{border-color:var(--text); transform:scale(1.15); box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent);}
  
  /* Individual Gradients for Swatch Buttons */
  .palette-swatch[data-color="default"]{background:linear-gradient(135deg, #d1a54c, #4fd1c5);}
  .palette-swatch[data-color="emerald"]{background:linear-gradient(135deg, #3ecf8e, #38bdf8);}
  .palette-swatch[data-color="sunset"]{background:linear-gradient(135deg, #f97316, #fb7185);}
  .palette-swatch[data-color="violet"]{background:linear-gradient(135deg, #a855f7, #ec4899);}

  .brand-mark{
    width:120px;
    height:120px;
    flex:0 0 auto;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent);
    font-size:19px;
    overflow:hidden;
  }
  .brand-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .brand-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
  h1{
    margin:0;
    font-family:var(--serif);
    font-weight:700;
    font-size:clamp(30px, 7vw, 44px);
    letter-spacing:.5px;
    line-height:1.05;
  }
  h1 .veil{color:var(--muted); font-style:italic; font-weight:500;}
  .wrap{
    flex:1;
    max-width:680px;
    margin:0 auto;
    padding:20px 20px 40px;
    width:100%;
  }
  .tab-panel{display:none;}
  .tab-panel.active{display:block;}

  .search-box{
    position:relative;
  }
  input[type="text"]{
    width:100%;
    padding:15px 42px 15px 16px;
    background:var(--panel);
    border-radius:12px;
    color:var(--text);
    font-size:15px;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
  }
  input[type="text"]:focus{
    border-color:var(--accent-2);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 20%, transparent);
  }
  .search-icon-btn{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:15px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s, color .15s, transform .1s;
  }
  .search-icon-btn:hover{background:var(--panel-2); color:var(--accent-2);}
  .search-icon-btn:active{transform:translateY(-50%) scale(0.92);}
  .suggestions{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:var(--panel);
    border-radius:12px;
    max-height:340px;
    overflow-y:auto;
    z-index:10;
    display:none;
    box-shadow:var(--shadow);
  }
  .suggestions.show{display:block;}
  .suggestion-item{
    padding:12px 16px;
    cursor:pointer;
    border-bottom:1px solid var(--border);
    font-size:13.5px;
    line-height:1.4;
    transition:background .1s;
  }
  .suggestion-item:last-child{border-bottom:none;}
  .suggestion-item:hover, .suggestion-item.active{
    background:var(--panel-2);
    color:var(--accent);
  }
  .suggestion-code{
    color:var(--muted);
    font-size:11px;
    margin-top:2px;
  }
  .status{
    margin-top:14px;
    font-size:13px;
    color:var(--muted);
    min-height:18px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .status.error{color:var(--danger);}
  .status-retry-btn{
    border:1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    background:color-mix(in srgb, var(--danger) 12%, transparent);
    color:var(--danger);
    font-size:11.5px;
    font-weight:700;
    padding:3px 9px;
    border-radius:7px;
    cursor:pointer;
    margin-left:4px;
    transition:background .15s, transform .1s;
  }
  .status-retry-btn:hover{background:color-mix(in srgb, var(--danger) 20%, transparent);}
  .status-retry-btn:active{transform:scale(0.94);}
  .spinner{
    --size:26px;
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    position:relative;
    flex-shrink:0;
    display:none;
    background:conic-gradient(from 0deg, var(--accent) 0deg, var(--accent-2) 150deg, transparent 260deg, transparent 360deg);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
    animation:spin .9s cubic-bezier(.5,.05,.5,.95) infinite;
    filter:drop-shadow(0 0 6px var(--accent-soft));
  }
  .spinner.show{display:inline-block;}
  .spinner::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  .ih-loader{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:36px 20px;
    gap:6px;
  }
  .ih-loader.show{display:flex;}
  .loader-house{
    position:relative;
    width:88px;
    height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
  }
  .loader-house > i{
    font-size:46px;
    color:var(--accent);
    animation:houseBob 1.6s ease-in-out infinite;
    filter:drop-shadow(0 6px 14px var(--accent-soft));
  }
  .loader-house > img{
    width:52px;
    height:52px;
    object-fit:contain;
    animation:houseBob 1.6s ease-in-out infinite;
    filter:drop-shadow(0 6px 14px var(--accent-soft));
  }
  .loader-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
    animation:ringSpin 6s linear infinite;
  }
  .loader-coin{
    position:absolute;
    top:-10px;
    color:var(--accent-2);
    font-size:16px;
    opacity:0;
    animation:coinDrop 1.8s ease-in infinite;
  }
  .coin1{left:14px; animation-delay:.1s;}
  .coin2{left:50%; margin-left:-8px; animation-delay:.55s;}
  .coin3{right:14px; animation-delay:1s;}
  @keyframes houseBob{
    0%, 100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-4px) scale(1.05);}
  }
  @keyframes ringSpin{to{transform:rotate(360deg);}}
  @keyframes coinDrop{
    0%{opacity:0; transform:translateY(-6px) rotate(0deg);}
    15%{opacity:1;}
    55%{opacity:1; transform:translateY(38px) rotate(180deg);}
    75%{opacity:0; transform:translateY(44px) rotate(220deg);}
    100%{opacity:0; transform:translateY(-6px) rotate(0deg);}
  }
  .loader-text{
    font-family:var(--serif);
    font-size:16px;
    font-weight:600;
    color:var(--text);
  }
  .loader-sub{
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
  }
  .dots span{
    animation:dotFade 1.4s infinite;
    opacity:0;
  }
  .dots span:nth-child(2){animation-delay:.2s;}
  .dots span:nth-child(3){animation-delay:.4s;}
  @keyframes dotFade{
    0%, 100%{opacity:0;}
    50%{opacity:1;}
  }
  .ih-loader.small{padding:14px 10px;}
  .ih-loader.small .loader-house{width:56px; height:56px; margin-bottom:8px;}
  .ih-loader.small .loader-house > i{font-size:28px;}
  .ih-loader.small .loader-house > img{width:32px; height:32px;}
  .ih-loader.small .loader-coin{font-size:11px; top:-6px;}
  .ih-loader.small .loader-text{font-size:13px;}
  @media (prefers-reduced-motion: reduce){
    .loader-house > i, .loader-house > img, .loader-ring, .loader-coin, .dots span{animation:none;}
  }

  .card{
    position:relative;
    margin-top:22px;
    background:transparent;
    border-radius:var(--radius-lg);
    padding:24px;
    display:none;
    box-shadow:var(--shadow);
    animation:fadeUp .25s ease;
  }
  @keyframes fadeUp{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }
  .card.show{display:block;}
  .card.loading .card-content{opacity:.25; filter:blur(1px);}
  .card-loading-overlay{
    display:none;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-lg);
    background:color-mix(in srgb, var(--panel) 70%, transparent);
  }
  .card.loading .card-loading-overlay{display:flex;}
  .card-loading-overlay .ih-loader{display:flex;}
  .card-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:4px;
  }
  .card-header-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
  }
  .fund-avatar{
    flex-shrink:0;
    width:48px;
    height:48px;
    border-radius:13px;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--serif);
    font-size:19px;
    font-weight:600;
    overflow:hidden;
  }
  .fund-avatar img.fund-avatar-img{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
    padding:7px;
    display:block;
  }
  .fund-heading{min-width:0; flex:1;}
  .fund-house-line{
    color:var(--muted);
    font-size:12.5px;
    display:flex;
    align-items:center;
    gap:5px;
  }
  .card-code{
    display:inline-block;
    font-size:11px;
    color:var(--accent-ink);
    background:var(--accent);
    padding:3px 8px;
    border-radius:6px;
    font-weight:700;
    letter-spacing:.5px;
    margin-top:8px;
  }
  .grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:18px;
  }
  .fund-info-col{min-width:0;}
  .stat{
    background:transparent;
    border-radius:10px;
    padding:12px 14px;
    transition:background .2s;
  }
  .stat-label{
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.5px;
    display:flex;
    align-items:center;
    gap:5px;
  }
  .stat-value{
    font-size:16px;
    margin-top:4px;
    font-weight:700;
  }
  .nav-highlight{color:var(--accent);}
  .nav-down{color:var(--danger);}
  .cagr-up{color:#15803d; font-size:20px;}
  .cagr-down{color:var(--danger); font-size:20px;}
  .cagr-flat{color:var(--muted); font-size:20px;}
  
  .details-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    margin-top:22px;
  }
  .section-label{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
  }
  .chart-col{
    background:transparent;
    border-radius:var(--radius-md);
    padding:16px 16px 14px;
  }
  .section-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .section-label-row .section-label{margin-bottom:0;}
  .section-label-actions{ display:flex; align-items:center; gap:6px; }
  .chart-util-btn{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    background:var(--panel);
    border-radius:7px;
    padding:4px 9px;
    cursor:pointer;
    transition:background .15s, color .15s, border-color .15s;
  }
  .chart-util-btn:hover{ background:var(--panel-3); color:var(--accent); border-color:var(--accent); }
  .chart-util-btn:active{ transform:scale(0.95); }
  .chart-reset-btn{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    background:var(--panel);
    border-radius:7px;
    padding:4px 9px;
    cursor:pointer;
    opacity:0;
    transform:translateY(-2px);
    pointer-events:none;
    transition:opacity .15s, transform .15s, background .15s, color .15s;
  }
  .chart-reset-btn.show{opacity:1; transform:translateY(0); pointer-events:auto;}
  .chart-reset-btn:hover{background:var(--panel-3); color:var(--accent);}
  .chart-range-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
  }
  .range-btn, .compare-range-btn{
    flex:1 1 auto;
    min-width:38px;
    padding:6px 8px;
    background:var(--panel);
    color:var(--muted);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.3px;
    border-radius:7px;
    cursor:pointer;
    text-align:center;
    transition:background .15s, color .15s, border-color .15s, transform .1s;
  }
  .range-btn:hover, .compare-range-btn:hover{background:var(--panel-3); color:var(--text);}
  .range-btn:active, .compare-range-btn:active{transform:scale(0.95);}
  .range-btn.active, .compare-range-btn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  
  .chart-canvas-wrap{
    position:relative;
    width:100%;
    height:360px;
    min-height:360px;
    margin-top:8px;
    touch-action:none;
    cursor:grab;
  }
  .chart-canvas-wrap:active{cursor:grabbing;}
  canvas{
    width:100%;
    height:100%;
    display:block;
  }
  .chart-label{
    font-size:11px;
    color:var(--muted);
    margin-top:10px;
    text-align:center;
  }
  .chart-hint{
    font-size:10.5px;
    color:var(--muted);
    opacity:.75;
    margin-top:4px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
  }
  @media (max-width:480px){
    .chart-hint{display:none;}
  }
  .chart-compare{
    display:none;
    margin-top:10px;
    padding:12px 14px;
    background:var(--panel-2);
    border-radius:var(--radius-md);
    font-size:12.5px;
  }
  .chart-compare.show{display:block;}
  .chart-compare-hint{
    color:var(--muted);
    font-size:11.5px;
  }
  .chart-compare-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .chart-compare-dates{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-family:var(--mono);
    font-size:11.5px;
  }
  .chart-compare-dates .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    display:inline-block;
  }
  .chart-compare-dates .dot.a{background:var(--accent-2);}
  .chart-compare-dates .dot.b{background:var(--accent);}
  .chart-compare-figures{
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  .chart-compare-figures .pct{
    font-family:var(--mono);
    font-weight:700;
    font-size:16px;
  }
  .chart-compare-figures .pct.up{color:#3ec98f;}
  .chart-compare-figures .pct.down{color:var(--danger);}
  .chart-compare-figures .abs{
    font-family:var(--mono);
    color:var(--muted);
    font-size:11.5px;
  }
  .chart-compare-clear{
    background:transparent;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    padding:4px 9px;
    border-radius:7px;
    cursor:pointer;
  }
  .chart-compare-clear:hover{background:var(--panel-3); color:var(--text);}
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
  table.history-table td{font-family:var(--mono);}
  table.history-table td:first-child{font-family:"Segoe UI",system-ui,sans-serif;}
  .no-date-match{
    text-align:center;
    color:var(--muted);
    padding:20px 10px !important;
    font-family:"Segoe UI",system-ui,sans-serif !important;
  }
  .history-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:0;
    margin-bottom:8px;
    gap:10px;
    flex-wrap:wrap;
  }
  .history-title{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
  }
  .history-count{
    font-size:11.5px;
    color:var(--muted);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    background:var(--panel-3);
    color:var(--text);
    border-radius:8px;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s, transform .1s, color .15s;
  }
  .btn:hover{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn:active{transform:scale(0.96);}
  .btn.danger:hover{background:var(--danger); color:#fff; border-color:var(--danger);}
  .history-table-wrap{
    max-height:320px;
    overflow-y:auto;
    border-radius:10px;
  }
  table.history-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
  }
  table.history-table thead th{
    position:sticky;
    top:0;
    background:var(--panel-2);
    color:var(--muted);
    text-align:left;
    padding:9px 14px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    border-bottom:1px solid var(--border);
  }
  table.history-table td{
    padding:11px 14px;
    border-bottom:1px solid var(--border);
    color:var(--text);
  }
  table.history-table td:last-child{
    text-align:right;
    font-variant-numeric:tabular-nums;
  }
  table.history-table tbody tr:last-child td{border-bottom:none;}
  table.history-table tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--panel-2) 55%, transparent);}
  table.history-table tbody tr:hover td{background:var(--panel-2);}
  .hist-date{
    display:flex;
    align-items:center;
    gap:9px;
  }
  .hist-day{
    font-family:var(--mono);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:var(--accent-2);
    background:color-mix(in srgb, var(--accent-2) 14%, transparent);
    padding:3px 6px;
    border-radius:5px;
    flex-shrink:0;
    min-width:32px;
    text-align:center;
  }
  .hist-nav-wrap{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
  }
  .hist-nav{
    font-weight:700;
  }
  .nav-change{
    display:inline-flex;
    align-items:center;
    gap:2px;
    font-size:10.5px;
    font-weight:700;
    padding:2px 6px;
    border-radius:5px;
    font-family:var(--mono);
    white-space:nowrap;
  }
  .nav-change.up{color:#3ecf8e; background:rgba(62,207,142,.13);}
  .nav-change.down{color:var(--danger); background:color-mix(in srgb, var(--danger) 15%, transparent);}
  .nav-change.flat{color:var(--muted); background:var(--panel-3);}

  /* Recent tab */
  .recent-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    gap:10px;
  }
  .recent-header h2{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    margin:0;
  }
  .recent-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .recent-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:transparent;
    border-radius:var(--radius-md);
    padding:13px 15px;
    cursor:pointer;
    transition:background .15s, border-color .15s, transform .1s;
  }
  .recent-item:hover{background:var(--panel-2); border-color:var(--accent-2); transform:translateY(-1px);}
  .recent-icon{
    width:36px;
    height:36px;
    border-radius:9px;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    flex-shrink:0;
    overflow:hidden;
  }
  .recent-icon.has-logo{background:#fff;}
  .recent-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:5px;
    display:block;
  }
  .recent-info{flex:1; min-width:0;}
  .recent-name{
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .recent-meta{
    font-size:11.5px;
    color:var(--muted);
    margin-top:2px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .recent-arrow{color:var(--muted); font-size:14px;}
  .empty-state{
    text-align:center;
    padding:50px 20px;
    color:var(--muted);
  }
  .empty-state i{
    font-size:34px;
    color:var(--border);
    margin-bottom:12px;
    display:block;
  }
  .empty-state p{font-size:13.5px; margin:0;}

  /* Compare feature */
  .compare-action-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
    flex-wrap:wrap;
  }
  .btn.compare-btn.added{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .btn.compare-btn.full{opacity:.55; cursor:not-allowed;}
  .compare-count-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:8px;
    background:var(--accent);
    color:var(--accent-ink);
    font-size:10px;
    font-weight:700;
    margin-left:auto;
  }
  .compare-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    gap:10px;
  }
  .compare-header h2{
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    margin:0;
  }
  .compare-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .compare-mode-toggle{
    display:flex;
    gap:8px;
    margin-top:14px;
    flex-wrap:wrap;
  }
  .compare-mode-btn{
    flex:1 1 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px 12px;
    background:var(--panel);
    color:var(--muted);
    font-size:12.5px;
    font-weight:700;
    border-radius:9px;
    cursor:pointer;
    text-align:center;
    transition:background .15s, color .15s, border-color .15s, transform .1s;
  }
  .compare-mode-btn:hover{background:var(--panel-3); color:var(--text);}
  .compare-mode-btn:active{transform:scale(0.97);}
  .compare-mode-btn.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .compare-legend-item{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--panel-2);
    border-radius:10px;
    padding:8px 10px;
    font-size:12.5px;
    max-width:100%;
  }
  .compare-legend-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    flex-shrink:0;
  }
  .compare-legend-icon{
    width:22px;
    height:22px;
    border-radius:7px;
    background:var(--accent-soft);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    flex-shrink:0;
    overflow:hidden;
  }
  .compare-legend-icon.has-logo{ background:#fff; }
  .compare-legend-icon img{ width:100%; height:100%; object-fit:contain; padding:3px; display:block; }
  .compare-legend-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:220px;
  }
  .compare-legend-remove{
    background:none;
    border:none;
    color:var(--muted);
    cursor:pointer;
    padding:0;
    font-size:13px;
    line-height:1;
    flex-shrink:0;
  }
  .compare-legend-remove:hover{color:var(--danger);}
  .compare-legend-cagr{
    font-size:13.5px;
    font-weight:800;
    padding:4px 10px;
    border-radius:7px;
    white-space:nowrap;
    flex-shrink:0;
  }
  .compare-legend-cagr.up{color:#15803d; background:rgba(21,128,61,.15);}
  .compare-legend-cagr.down{color:var(--danger); background:color-mix(in srgb, var(--danger) 15%, transparent);}
  .compare-legend-cagr.flat{color:var(--muted); background:var(--panel-3);}
  .compare-card{margin-top:14px;}
  .compare-point-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid var(--border);
    font-size:12.5px;
  }
  .compare-point-row:last-child{border-bottom:none;}
  .compare-point-fund{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    flex:1;
  }
  .compare-point-fund span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  footer{
    max-width:680px;
    margin:0 auto;
    padding:18px 20px 32px;
    text-align:center;
    border-top:1px solid var(--border);
    width:100%;
  }
  .footer-line{
    font-size:14px;
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .footer-line + .footer-line{margin-top:6px;}
  .footer-line b{color:var(--text); font-weight:700;}
  .footer-line a{color:var(--accent-2); text-decoration:none;}
  .footer-line a:hover{text-decoration:underline;}

  /* --- RESPONSIVE MEDIA QUERIES --- */
  @media (max-width:600px){
    .wrap{padding:14px 14px 30px;}
    header{padding:20px 14px 14px;}
    .brand-mark{width:76px;height:76px;}
    h1{font-size:22px;}
    .grid{grid-template-columns:1fr 1fr; gap:8px;}
    .stat{padding:10px 12px;}
    .stat-value{font-size:14px;}
    .card{padding:16px; border-radius:14px;}
    .chart-canvas-wrap{height:260px; min-height:260px;}
    .history-table-wrap{max-height:280px; overflow-x:auto;}

    /* iOS zooms in on focus if inputs are under 16px */
    input[type="text"]{font-size:16px; padding:14px 42px 14px 14px;}

    /* Comfortable touch targets on small screens */
    .search-icon-btn{width:38px; height:38px;}
    .filter-chip{min-height:36px;}
    .range-btn, .compare-range-btn{min-height:36px;}
    .compare-mode-btn{min-height:40px;}
    .btn{min-height:38px;}
    .menu-item{min-height:40px;}
  }

  @media (max-width:360px){
    .brand-mark{width:64px;height:64px;}
    h1{font-size:19px;}
    .grid{grid-template-columns:1fr; gap:8px;}
  }

  @media (min-width:601px) and (max-width:1199px){
    .wrap{max-width:96vw; padding:24px 28px 40px;}
    footer{max-width:96vw;}
    .card{padding:28px;}
    .details-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows:auto auto;
      gap:24px;
      align-items:stretch;
    }
    .fund-info-col{
      grid-column: 1 / 2;
      display:flex;
      flex-direction:column;
      background:transparent;
      border-radius:var(--radius-md);
      padding:18px;
    }
    .fund-info-col .grid{grid-template-columns:1fr 1fr; margin-top:18px; flex:1;}
    .chart-col{grid-column: 2 / 3; display:flex; flex-direction:column;}
    .chart-canvas-wrap{flex:1; min-height:340px;}
    .history-col{grid-column: 1 / -1; display:flex; flex-direction:column;}
    .history-table-wrap{max-height:360px;}
  }

  @media (min-width:1200px){
    .wrap{max-width:min(1680px, 96vw);}
    footer{max-width:min(1680px, 96vw);}
    .card{padding:32px;}
    .details-grid{
      display:grid;
      grid-template-columns:420px 1fr;
      grid-template-rows:auto auto;
      align-items:stretch;
      gap:24px;
    }
    .fund-info-col{
      grid-column: 1 / 2;
      display:flex;
      flex-direction:column;
      background:transparent;
      border-radius:var(--radius-md);
      padding:20px;
    }
    .fund-info-col .grid{grid-template-columns:1fr 1fr; margin-top:18px; flex:1;}
    .history-col{grid-column: 2 / -1; display:flex; flex-direction:column;}
    .history-table-wrap{flex:1; max-height:420px;}
    .chart-col{grid-column: 1 / -1; display:flex; flex-direction:column; min-height:500px;}
    .chart-canvas-wrap{flex:1; height:auto; min-height:420px;}
    #compareCard {width: 100%; min-height: calc(100vh - 140px); display: flex; flex-direction: column;}
    #compareCard .chart-canvas-wrap {flex: 1; height: auto; min-height: 480px;}
  }
  
  /* ============================================================
  TOP 10 AUM HOMEPAGE
  ============================================================ */
  
  #topAUMSection{
  margin-top:22px;
  margin-bottom:24px;
  padding:20px;
  background:transparent;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  animation:fadeUp .3s ease;
  transition:opacity .2s ease, transform .2s ease;
  }
  
  #topAUMSection.top-aum-hidden{
  display:none;
  }
  
  .top-aum-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  }
  
  .top-aum-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:17px;
  font-weight:800;
  color:var(--text);
  }
  
  .top-aum-title i{
  font-size:18px;
  }
  
  .top-aum-subtitle{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  }
  
  .top-aum-badge{
  flex-shrink:0;
  padding:5px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.04em;
  }
  
  .top-aum-list{
  display:grid;
  gap:7px;
  }
  
  .top-aum-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border-radius:12px;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:
  transform .15s ease,
  border-color .15s ease,
  background .15s ease;
  }
  
  .top-aum-item:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  }
  
  .top-aum-rank{
  width:28px;
  flex:0 0 28px;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  text-align:center;
  }
  
  .top-aum-info{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
  }
  
  .top-aum-fund-name{
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }
  
  .top-aum-amc{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }
  
  .top-aum-value{
  flex-shrink:0;
  font-size:12px;
  font-weight:800;
  text-align:right;
  white-space:nowrap;
  }
  
  .top-aum-arrow{
  flex-shrink:0;
  font-size:11px;
  color:var(--muted);
  }
  
  .top-aum-loading,
  .top-aum-empty,
  .top-aum-error{
  padding:22px 12px;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  }
  
  .top-aum-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  }
  
  .top-aum-spinner{
  width:14px;
  height:14px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:topAumSpin .7s linear infinite;
  }
  
  @keyframes topAumSpin{
  to{
  transform:rotate(360deg);
  }
  }
  
  .top-aum-error{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  }
  
  .top-aum-retry{
  border:0;
  background:none;
  color:var(--accent);
  font-weight:700;
  cursor:pointer;
  }
  
  .top-aum-footnote{
  margin-top:10px;
  font-size:10px;
  line-height:1.4;
  color:var(--muted);
  }
  
  /* Mobile */
  @media (max-width:600px){
  #topAUMSection{
  padding:15px;
  margin-top:16px;
  }
  
  .top-aum-header{
  align-items:center;
  }
  
  .top-aum-title{
  font-size:15px;
  }
  
  .top-aum-badge{
  font-size:9px;
  }
  
  .top-aum-item{
  padding:10px;
  gap:9px;
  }
  
  .top-aum-rank{
  width:23px;
  flex-basis:23px;
  }
  
  .top-aum-fund-name{
  font-size:12px;
  }
  
  .top-aum-value{
  font-size:11px;
  }
  }
  
  
  
  /* =========================================================
  FUND EXPLORER
  ========================================================= */
  
  .fund-explorer{
  margin-top:18px;
  padding:18px;
  background:transparent;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  }
  
  .explorer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  color:var(--text);
  padding:0;
  text-align:left;
  font:inherit;
  }

  .explorer-header h2{
  margin:0;
  font-size:17px;
  font-weight:800;
  }
  
  .explorer-header h2 i{
  color:var(--accent);
  margin-right:6px;
  }
  
  .explorer-header p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  }

  .explorer-body{
  margin-top:18px;
  }

  .explorer-body-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:4px;
  }

  .explorer-body-hint{
  margin-right:auto;
  font-size:11.5px;
  color:var(--muted);
  }

  .explorer-clear{
  background:transparent;
  color:var(--muted);
  padding:6px 10px;
  border-radius:8px;
  font-size:11px;
  cursor:pointer;
  }
  
  .explorer-clear:hover{
  color:var(--text);
  border-color:var(--accent);
  }
  
  .filter-group{
  margin-top:14px;
  }
  
  .filter-label{
  margin-bottom:8px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  }
  
  .filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  }
  
  .filter-chip{
  background:var(--panel-2);
  color:var(--text);
  padding:8px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:
  border-color .15s ease,
  background .15s ease,
  color .15s ease,
  transform .15s ease;
  }
  
  .filter-chip:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  }
  
  .filter-chip.active{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent);
  }
  
  .explorer-results{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border);
  }
  
  .explorer-results-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  }
  
  #explorerResultCount{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  }
  
  .explorer-load-more{
  border:none;
  background:transparent;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  }
  
  .explorer-result-list{
  display:grid;
  gap:7px;
  }
  
  .explorer-result-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  background:transparent;
  border-radius:11px;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:
  transform .15s ease,
  border-color .15s ease;
  }
  
  .explorer-result-item:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  }
  
  .explorer-result-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--accent-soft);
  color:var(--accent);
  overflow:hidden;
  }
  
  .explorer-result-icon.has-logo{ background:#fff; }
  .explorer-result-icon img{ width:100%; height:100%; object-fit:contain; padding:5px; display:block; }
  
  .explorer-result-info{
  min-width:0;
  flex:1;
  }
  
  .explorer-result-name{
  display:block;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  }
  
  .explorer-result-meta{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  }
  
  .explorer-result-arrow{
  color:var(--muted);
  font-size:11px;
  }
  
  .explorer-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px;
  color:var(--muted);
  font-size:12px;
  }
  
  .explorer-spinner{
  width:14px;
  height:14px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:explorerSpin .7s linear infinite;
  }
  
  @keyframes explorerSpin{
  to{transform:rotate(360deg);}
  }
  
  @media(max-width:600px){
  
  .fund-explorer{
  padding:14px;
  margin-top:14px;
  }
  
  .explorer-header h2{
  font-size:15px;
  }
  
  .filter-chip{
  padding:7px 9px;
  font-size:11px;
  }
  
  .explorer-result-item{
  padding:10px;
  }
  }

/* ============================================================
   REDESIGN LAYER
   ------------------------------------------------------------
   Everything below refines the visual system and adds the
   home / searching / detail state behaviour. Nothing above this
   line was removed, so existing selectors/IDs/classes still work
   exactly as before — these rules simply take precedence because
   they come later in the cascade.
   ============================================================ */

:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --radius-sm:10px;
  --radius-xl:22px;
  --shadow-sm:0 4px 14px rgba(0,0,0,.16);
  --shadow-md:0 12px 28px rgba(0,0,0,.28);
}
html[data-theme="light"]{
  --shadow-sm:0 2px 10px rgba(40,30,10,.06);
  --shadow-md:0 14px 30px rgba(40,30,10,.10);
}

*{ -webkit-tap-highlight-color:transparent; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }

/* ---------- layout shell ---------- */
.wrap{ max-width:720px; padding:var(--sp-4) var(--sp-4) var(--sp-8); }
@media (min-width:768px){ .wrap{ max-width:900px; padding:var(--sp-6) var(--sp-6) var(--sp-8); } }
@media (min-width:1024px){ .wrap{ max-width:1160px; padding:var(--sp-7) var(--sp-7) var(--sp-8); } }
@media (min-width:1280px){ .wrap{ max-width:1320px; } }

/* ---------- header: compact row, not a tall centered hero ---------- */
header{
  padding:var(--sp-3) var(--sp-4);
  text-align:left;
  position:sticky;
  top:0;
  z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, background .2s;
}
header{ border-bottom-color:var(--border); }
.brand-row{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  max-width:1320px;
  text-align:left;
}
.brand-mark{ width:56px; height:56px; padding:0; }
.brand-text h1{ font-size:19px; letter-spacing:.2px; }
@media (min-width:768px){
  .brand-mark{ width:64px; height:64px; padding:0; }
  .brand-text h1{ font-size:23px; }
}


/* Home tab hides the app-tab strip entirely — the menu already owns
   Recent/Compare/Search navigation, so we don't need a second nav
   layer competing with the search box for attention. */

/* ---------- state system ----------
   home:      full discovery homepage
   searching: search bar + results only
   detail:    only the selected fund, edge to edge focus            */
body[data-app-state="searching"] #topAUMSection,
body[data-app-state="detail"] #topAUMSection{
  display:none !important;
}
body[data-app-state="detail"] .search-box{
  margin-bottom:0;
}
body:not([data-app-state="detail"]) .card{
  display:none !important;
}
.fund-toolbar{ display:none; }
body[data-app-state="detail"] .fund-toolbar{
  display:flex;
  margin:-4px -4px 14px;
}
.fund-back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px 9px 10px;
  border-radius:999px;
  background:var(--panel-2);
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  min-height:38px;
  transition:background .15s, color .15s, transform .1s;
}
.fund-back-btn:hover{ background:var(--panel-3); color:var(--text); }
.fund-back-btn:active{ transform:scale(.96); }

/* ---------- search box: the primary action, premium feel ---------- */
.search-box{ margin-top:var(--sp-2); }
body[data-app-state="home"] .search-box{ margin-top:var(--sp-4); }
input[type="text"]{
  width:100%;
  max-width:100%;
  padding:16px 46px 16px 46px;
  height:56px;
  border-radius:16px;
  font-size:15.5px;
  box-shadow:var(--shadow-sm);
  border-color:var(--border);
}
.search-box{ position:relative; }
.search-leading-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:16px;
  pointer-events:none;
}
input[type="text"]:focus{
  box-shadow:var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent);
}
.search-icon-btn{ right:9px; width:38px; height:38px; border-radius:10px; background:var(--panel-2); }
@media (min-width:768px){
  .search-box{ max-width:820px; }
}

/* ---------- suggestions / search results ---------- */
.suggestions{
  border-radius:16px;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:min(60vh, 420px);
  padding:6px;
}
.suggestion-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 10px;
  border-bottom:none;
  border-radius:12px;
  min-height:44px;
}
.suggestion-item:hover, .suggestion-item.active{ background:var(--panel-2); color:var(--text); }
.suggestion-icon{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:10px;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  overflow:hidden;
}
.suggestion-icon.has-logo{ background:#fff; }
.suggestion-icon img{ width:100%; height:100%; object-fit:contain; padding:6px; display:block; }
.suggestion-info{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.suggestion-name{
  font-size:14px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.suggestion-code{ font-size:11.5px; color:var(--muted); margin-top:0; }
.suggestion-aum{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:12.5px;
  font-weight:800;
  color:var(--text);
  line-height:1.25;
  white-space:nowrap;
}
.suggestion-aum small{
  font-size:9.5px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.suggestion-arrow{ flex-shrink:0; color:var(--muted); font-size:13px; }

/* ---------- status / error states ---------- */
.status{
  margin-top:var(--sp-3);
  padding:0 2px;
}
.status.error{
  background:color-mix(in srgb, var(--danger) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius:12px;
  padding:10px 12px;
}

/* ---------- homepage discovery: compact, not a wall of content ---------- */
#topAUMSection{ margin-top:var(--sp-5); }
.top-aum-item{ min-height:56px; }
.top-aum-fund-name, .top-aum-info, .explorer-result-name, .explorer-result-info,
.recent-name, .recent-info, .card-title, .fund-heading{ min-width:0; }
.top-aum-fund-name, .explorer-result-name, .recent-name{
  white-space:normal;
  word-break:break-word;
  overflow:visible;
}

#fundExplorer{ margin-top:var(--sp-4); }
.filter-chips{
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:2px;
}
.filter-chips::-webkit-scrollbar{ display:none; }
.filter-chip{ flex-shrink:0; white-space:nowrap; }

/* ---------- fund detail: the whole screen belongs to the fund ---------- */
.card{ padding:var(--sp-4); border-radius:var(--radius-xl); margin-top:var(--sp-4); }
.card-header-row{ gap:12px; }
.fund-avatar{ width:44px; height:44px; border-radius:12px; }
.card-title{
  font-size:17px;
  line-height:1.3;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
}
.fund-house-line{ overflow-wrap:break-word; }
.compare-action-row .btn{ width:100%; justify-content:center; }
@media (min-width:600px){
  .card-header-row{ align-items:center; }
  .compare-action-row{ margin-left:auto; }
  .compare-action-row .btn{ width:auto; }
  .card-header-row{ display:flex; }
}
.grid{ grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.stat{ border-radius:var(--radius-sm); padding:var(--sp-3); }
.stat:first-child{
  grid-column:1 / -1;
  background:linear-gradient(135deg, var(--accent-soft), transparent);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
}
.stat:first-child .stat-value{ font-size:26px; font-family:var(--serif); }
@media (min-width:600px){
  .grid{ grid-template-columns:repeat(4, 1fr); }
  .stat:first-child{ grid-column:auto; }
  .stat:first-child .stat-value{ font-size:20px; }
}
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(5, 1fr); } }

.details-grid{ gap:var(--sp-4); margin-top:var(--sp-5); }
.chart-canvas-wrap{ max-width:100%; }
.history-table-wrap{ max-width:100%; }
.history-table{ width:100%; }
.card-code{ word-break:break-all; }

/* ---------- overflow safety net (mobile-first hard rules) ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
.card, .top-aum-item, .explorer-result-item, .recent-item, .suggestion-item{
  max-width:100%;
}
img{ max-width:100%; }

/* Belt-and-braces: nothing in these rows should ever be able to push
   the row wider than its container, no matter how the content inside
   grows (bigger icons, longer AUM figures, etc). */
#topAUMSection, .fund-explorer, .top-aum-list, .explorer-result-list,
.top-aum-item, .explorer-result-item{
  max-width:100%;
  box-sizing:border-box;
}

/* Hide the browser's scrollbar track for a cleaner, app-like feel —
   touch/trackpad scrolling still works exactly the same. */
html{ scrollbar-width:none; }
html::-webkit-scrollbar{ display:none; width:0; height:0; }

/* ---------- compare / recent polish ---------- */
.recent-item, .top-aum-item, .explorer-result-item{ border-radius:14px; }
.compare-legend, .compare-mode-toggle{ flex-wrap:wrap; }

/* ---------- microinteractions ---------- */
.top-aum-item, .explorer-result-item, .recent-item, .suggestion-item{
  transition:background .15s ease, transform .1s ease;
}
.btn, .fund-back-btn, .filter-chip, .compare-mode-btn{
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
@media (prefers-reduced-motion: reduce){
  .card, .top-aum-item, .explorer-result-item, .recent-item{ animation:none !important; transition:none !important; }
}

/* ---------- narrow phones (320–430px) ---------- */
@media (max-width:430px){
  .wrap{ padding-left:var(--sp-4); padding-right:var(--sp-4); }
  header{ padding:10px var(--sp-4); }
  input[type="text"]{ height:54px; font-size:15px; }
  .card{ padding:var(--sp-3); border-radius:16px; }
  .fund-toolbar{ margin:-2px -2px 12px; }
  .stat-value{ font-size:15px; }
  .stat:first-child .stat-value{ font-size:22px; }
  .top-aum-title{ font-size:14px; }
  .chart-canvas-wrap{ height:240px; min-height:240px; }
}
@media (max-width:359px){
  .brand-text h1{ font-size:14.5px; }
  .grid{ gap:6px; }
}

/* ---------- top AUM: fund house logo per row ---------- */
.top-aum-item{ gap:10px; }
.top-aum-icon{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:9px;
  background:var(--accent-soft);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  overflow:hidden;
}
.top-aum-icon.has-logo{ background:#fff; }
.top-aum-icon img{ width:20px; height:20px; object-fit:contain; }

/* ============================================================
   SKELETON LOADING SYSTEM
   ============================================================ */
@keyframes skeletonSweep{
  0%{ transform:translateX(-120%) skewX(-12deg); }
  100%{ transform:translateX(120%) skewX(-12deg); }
}
@keyframes skeletonBreathe{
  0%,100%{ opacity:1; }
  50%{ opacity:.82; }
}
.skeleton{
  position:relative;
  display:inline-block;
  overflow:hidden;
  isolation:isolate;
  border-radius:7px;
  background:linear-gradient(160deg, var(--panel-2), var(--panel-3));
  animation:skeletonBreathe 2.6s ease-in-out infinite;
}
.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  width:60%;
  background-image:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent-2) 22%, transparent) 35%,
    color-mix(in srgb, var(--accent) 55%, white 10%) 50%,
    color-mix(in srgb, var(--accent-2) 22%, transparent) 65%,
    transparent
  );
  opacity:.55;
  animation:skeletonSweep 1.9s cubic-bezier(.4,0,.2,1) infinite;
  will-change:transform;
}
html[data-theme="light"] .skeleton{
  background:linear-gradient(160deg, var(--panel-3), var(--panel-2));
}
html[data-theme="light"] .skeleton::after{
  opacity:.4;
  background-image:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent-2) 20%, transparent) 35%,
    color-mix(in srgb, var(--accent) 45%, transparent) 50%,
    color-mix(in srgb, var(--accent-2) 20%, transparent) 65%,
    transparent
  );
}

/* Smoother shimmer for the compare fund-search popup specifically —
   a single continuous gradient sweep instead of the sweep + opacity
   "breathing" pulse combo used elsewhere, which read as flickery
   here since rows get shown/hidden quickly while typing. No skew
   either, so the sweep reads as one clean pass rather than a jagged
   parallelogram snapping back at the loop point. */
.compare-modal-suggestions .skeleton{
  animation:none;
}
.compare-modal-suggestions .skeleton::after{
  animation:skeletonSweepSmooth 2.2s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes skeletonSweepSmooth{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}
.skeleton-circle{ border-radius:50%; flex-shrink:0; }
.skeleton-line{ display:block; }
.skeleton-block{ display:block; width:100%; border-radius:var(--radius-sm); }
.skeleton-row{ display:flex; align-items:flex-start; gap:10px; width:100%; }
.skeleton-col{ display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.skeleton-pill{ border-radius:999px; }
.skeleton-caption{ text-align:center; }
/* Stagger the sweep slightly per-row so a list doesn't pulse as one
   flat block — reads as a livelier, more considered loading state. */
.skeleton-row:nth-child(2) .skeleton{ animation-delay:.12s; }
.skeleton-row:nth-child(2) .skeleton::after{ animation-delay:.12s; }
.skeleton-row:nth-child(3) .skeleton{ animation-delay:.24s; }
.skeleton-row:nth-child(3) .skeleton::after{ animation-delay:.24s; }
.skeleton-row:nth-child(4) .skeleton{ animation-delay:.36s; }
.skeleton-row:nth-child(4) .skeleton::after{ animation-delay:.36s; }

/* Home / first-load skeleton -------------------------------- */
.ih-loader.skeleton-loader{
  align-items:stretch;
  text-align:left;
  padding:4px 2px 8px;
  gap:16px;
}
.skeleton-aum-list{ display:flex; flex-direction:column; gap:10px; }
.skeleton-aum-row{ align-items:center; padding:8px 2px; }

/* Explorer results skeleton ---------------------------------- */
.explorer-skeleton-loading{
  display:none;
  flex-direction:column;
  gap:12px;
  padding:6px 2px;
}
.explorer-skeleton-loading:not([hidden]){ display:flex; }
.explorer-skeleton-row{ align-items:center; }

/* Fund detail skeleton ---------------------------------------- */
.skeleton-fund-detail{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
  padding:2px;
}
.skeleton-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-2);
}
.skeleton-metric{ height:52px; }
.skeleton-metric-wide{ grid-column:1 / -1; height:64px; }
@media (min-width:600px){
  .skeleton-metrics{ grid-template-columns:repeat(4, 1fr); }
  .skeleton-metric-wide{ grid-column:auto; height:52px; }
}
@media (min-width:1024px){ .skeleton-metrics{ grid-template-columns:repeat(5, 1fr); } }
.skeleton-chart{ height:220px; border-radius:var(--radius-md); }
@media (min-width:768px){ .skeleton-chart{ height:320px; } }

@media (prefers-reduced-motion: reduce){
  .skeleton, .skeleton::after{ animation:none; }
}

/* ============================================================
   SWEETALERT2 THEME
   ============================================================ */
.swal2-popup.ih-swal{
  background:var(--panel);
  color:var(--text);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  font-family:inherit;
  padding-bottom:1.75em;
}
.swal2-popup.ih-swal .swal2-title{
  color:var(--text);
  font-family:var(--serif);
  font-weight:600;
  font-size:1.35em;
}
.swal2-popup.ih-swal .swal2-html-container{ color:var(--muted); }
.swal2-popup.ih-swal .swal2-icon{ border-color:currentColor; }
.swal2-popup.ih-swal .swal2-icon.swal2-warning{ color:var(--accent); border-color:var(--accent); }
.swal2-popup.ih-swal .swal2-icon.swal2-error{ color:var(--danger); border-color:var(--danger); }
.swal2-popup.ih-swal .swal2-icon.swal2-success{ color:var(--accent-2); border-color:var(--accent-2); }
.swal2-popup.ih-swal .swal2-icon.swal2-success [class^='swal2-success-line']{ background-color:var(--accent-2); }
.swal2-popup.ih-swal .swal2-icon.swal2-success .swal2-success-ring{ border-color:color-mix(in srgb, var(--accent-2) 40%, transparent); }
.swal2-popup.ih-swal .swal2-actions .swal2-styled{
  border-radius:999px;
  font-weight:600;
  font-family:inherit;
  padding:.6em 1.5em;
  box-shadow:none;
}
.swal2-popup.ih-swal .swal2-confirm{
  background:var(--accent) !important;
  color:var(--accent-ink) !important;
}
.swal2-popup.ih-swal .swal2-confirm:focus{ box-shadow:0 0 0 3px var(--accent-soft) !important; }
.swal2-popup.ih-swal .swal2-cancel{
  background:var(--panel-2) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}
.swal2-popup.ih-swal .swal2-timer-progress-bar{ background:var(--accent); }
.swal2-container.ih-swal-backdrop{ background:rgba(8,10,13,.55); backdrop-filter:blur(2px); }
html[data-theme="light"] .swal2-container.ih-swal-backdrop{ background:rgba(40,30,10,.28); }

.swal2-toast.ih-swal-toast{
  background:var(--panel) !important;
  color:var(--text) !important;
  box-shadow:var(--shadow);
  border-radius:var(--radius-md);
}
.swal2-toast.ih-swal-toast .swal2-title{ color:var(--text); font-family:inherit; font-weight:500; font-size:.95em; }
.swal2-toast.ih-swal-toast .swal2-timer-progress-bar{ background:var(--accent); }

/* ============================================================
   PERSISTENT NAVIGATION
   Desktop: fixed left sidebar. Mobile: fixed bottom nav bar.
   ============================================================ */
.side-nav{
  position:fixed;
  z-index:50;
  background:color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-color:var(--border);
  display:flex;
}
.side-nav-logo{ display:none; }
.side-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  color:var(--muted);
  border-radius:12px;
  position:relative;
  transition:background .15s, color .15s;
}
.side-nav-item i{ font-size:18px; flex-shrink:0; }
.side-nav-item:hover{ background:var(--panel-2); color:var(--text); }
.side-nav-item.active{ background:var(--accent-soft); color:var(--accent); }
.side-nav-item .compare-count-badge{ margin-left:auto; }

/* ---- Desktop: left sidebar ---- */
@media (min-width:1024px){
  .side-nav{
    top:0; left:0; bottom:0; width:220px;
    flex-direction:column;
    padding:22px 14px;
    border-right:1px solid var(--border);
    gap:6px;
  }
  .side-nav-logo{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px;
    width:100%; margin-bottom:20px;
  }
  .side-nav-logo img{ width:56px; height:56px; object-fit:contain; }
  .side-nav-brand-name{
    font-family:var(--serif);
    font-weight:700;
    font-size:15px;
    letter-spacing:.2px;
    color:var(--text);
    text-align:center;
  }
  .side-nav-items{ display:flex; flex-direction:column; gap:4px; }
  .side-nav-item{ width:100%; padding:12px 14px; font-size:14px; font-weight:600; }
  .side-nav-item span{ white-space:nowrap; }
  body{ padding-left:220px; }
}

/* ---- Mobile / tablet: bottom nav bar ---- */
@media (max-width:1023px){
  .side-nav{
    left:0; right:0; bottom:0; top:auto;
    flex-direction:row;
    align-items:stretch;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--border);
    box-shadow:0 -8px 24px rgba(0,0,0,.18);
  }
  .side-nav-items{ display:flex; flex:1; }
  .side-nav-item{
    flex:1;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    padding:6px 2px;
    font-size:10.5px;
    font-weight:700;
    border-radius:10px;
  }
  .side-nav-item i{ font-size:19px; }
  .side-nav-item .compare-count-badge{
    position:absolute;
    top:2px;
    right:calc(50% - 20px);
    margin-left:0;
  }
  .menu-wrap{ flex:1; margin-top:0; display:flex; }
  .menu-wrap .side-nav-item{ width:100%; }
  .menu-dropdown{ bottom:calc(100% + 10px); left:auto; right:6px; }
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   EXPLORE FUNDS / TOP AUM: slightly larger identity + values
   (with hard overflow guards so nothing bleeds past the edge)
   ============================================================ */
.top-aum-list, .explorer-result-list{ overflow:hidden; }
.top-aum-item, .explorer-result-item{
  overflow:hidden;
  gap:10px;
  background:transparent;
  border-color:var(--border);
}
.top-aum-info, .explorer-result-info{ overflow:hidden; }

.explorer-result-icon{ width:40px; height:40px; flex:0 0 40px; border-radius:11px; font-size:15px; }
.explorer-result-icon img{ padding:6px; }
.explorer-result-name{ font-size:13px; }
.explorer-result-meta{ font-size:10.5px; }

.top-aum-icon{ width:40px; height:40px; flex:0 0 40px; border-radius:11px; font-size:15px; }
.top-aum-icon img{ width:24px; height:24px; }
.top-aum-fund-name{ font-size:13.5px; }
.top-aum-amc{ font-size:11.5px; }
.top-aum-value{ font-size:14px; font-weight:800; }
.top-aum-rank{ flex:0 0 20px; width:20px; }
.top-aum-arrow{ margin-left:2px; }

@media (max-width:600px){
  .top-aum-item, .explorer-result-item{ gap:8px; padding:9px 10px; }
  .explorer-result-icon{ width:34px; height:34px; flex:0 0 34px; }
  .top-aum-icon{ width:34px; height:34px; flex:0 0 34px; }
  .top-aum-icon img{ width:20px; height:20px; }
  .top-aum-value{ font-size:12.5px; }
  .top-aum-fund-name{ font-size:12.5px; }
  .top-aum-rank{ flex:0 0 16px; width:16px; font-size:10px; }
}

/* ============================================================
   COMPARE PANEL: reliable rendering + single-screen desktop fit
   ------------------------------------------------------------
   Desktop layout: header spans the top; the graph takes the full
   remaining width/height on the left; the add/added fund slots
   stack as compact rows in a narrow fixed-width column on the
   right — so the only things sharing space with the chart are
   the page header, the left icon-rail nav (already outside
   .wrap), and this slim right column, and the chart claims
   everything else.
   ============================================================ */
@media (min-width:1024px){
  /* Hide chrome that would otherwise force scrolling while comparing,
     and pull in the page's own top/bottom padding, so the chart gets
     as much of the screen as possible below the header/left nav. */
  body:has(#comparePanel.active) footer{ display:none; }
  body:has(#comparePanel.active) .wrap{
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-3);
  }
  #comparePanel.active{
    display:grid;
    grid-template-columns: 1fr 190px;
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    height: calc(100vh - 92px);
  }
  #comparePanel .compare-header{ grid-column: 1 / -1; grid-row: 1; margin-bottom:8px; }
  #comparePanel .compare-header h2{ font-size:16px; }
  /* The instructional hint is redundant once the layout is this
     compact — drop it so its space goes to the slots/graph instead. */
  #comparePanel .compare-hint{ display:none; }
  #comparePanel .compare-slots{
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-content: start;
    align-self: start;
    max-height: 100%;
    overflow-y: auto;
    margin-bottom: 0;
  }
  /* Smaller, compact rows: slimmer icon, tighter padding/type than
     the square tiles used on mobile. */
  #comparePanel .compare-slot{
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    min-height: 0;
    gap: 8px;
    padding: 6px 24px 6px 8px;
    border-radius: 8px;
  }
  #comparePanel .compare-slot-remove{
    top: 50%;
    right: 4px;
    width: 18px;
    height: 18px;
    font-size: 8px;
    transform: translateY(-50%);
  }
  #comparePanel .compare-slot-icon{
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 12px;
  }
  #comparePanel .compare-slot-name{
    -webkit-line-clamp: 1;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10.5px;
  }
  #comparePanel .compare-slot-cagr{
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 9.5px;
  }
  #comparePanel .compare-slot.empty span{ font-size: 10.5px; }
  #comparePanel #compareCard.show{
    grid-column: 1;
    grid-row: 2;
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
  }
  #compareCard .compare-mode-toggle,
  #compareCard .section-label-row,
  #compareCard .chart-range-row,
  #compareCard .chart-label,
  #compareCard .chart-hint{ flex:0 0 auto; }
  #compareCard .chart-canvas-wrap{
    flex:1 1 auto;
    min-height:0;
    height:auto;
  }
  /* The tap-to-compare readout always reserves the same slot below
     the chart (shown or not), so picking two points to compare never
     shrinks the graph — only its own contents fade in/out. */
  #compareCard .chart-compare{
    flex: 0 0 auto;
    display: block !important;
    min-height: 54px;
    visibility: hidden;
  }
  #compareCard .chart-compare.show{ visibility: visible; }
}

/* Manual fallback shown inside the chart wrapper if the compare chart
   still hasn't been able to draw itself after a couple of seconds
   (see scheduleCompareChartRender in fund.js). */
.compare-chart-fallback-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:var(--radius-md);
  background:var(--panel-2);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  z-index:2;
}
.compare-chart-fallback-btn:hover{ background:var(--panel-3); }
.chart-canvas-wrap{ position:relative; }

/* ============================================================
   COMPARE SLOTS (4 always-visible tiles: filled fund or "+")
   ============================================================ */
.compare-hint{
  margin:0 0 14px;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.5;
}
.compare-slots{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px;
  margin-bottom:18px;
}
@media (min-width:640px){
  .compare-slots{ grid-template-columns:repeat(4, 1fr); }
}

.compare-slot{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  min-height:118px;
  padding:14px 10px;
  border-radius:var(--radius-md);
  cursor:pointer;
  font:inherit;
  color:inherit;
}
.compare-slot.empty{background:color-mix(in srgb, var(--text) 6%, transparent);
  color:var(--muted);
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .1s ease;
}
.compare-slot.empty:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-soft);
}
.compare-slot.empty:active{ transform:scale(0.97); }
.compare-slot.empty i{ font-size:20px; }
.compare-slot.empty span{ font-size:12px; font-weight:700; }

.compare-slot.filled{
  border:1.5px solid var(--slot-color, var(--accent));
  background:color-mix(in srgb, var(--slot-color, var(--accent)) 10%, var(--panel));
  cursor:default;
}
.compare-slot-remove{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  border-radius:50%;
  border:none;
  background:var(--panel);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background .15s, color .15s;
}
.compare-slot-remove:hover{ background:var(--danger); color:#fff; }
.compare-slot-icon{
  width:42px; height:42px;
  border-radius:11px;
  background:var(--panel-2);
  color:var(--slot-color, var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  overflow:hidden;
}
.compare-slot-icon.has-logo{ background:#fff; }
.compare-slot-icon img{ width:100%; height:100%; object-fit:contain; padding:6px; display:block; }
.compare-slot-name{
  font-size:11.5px;
  font-weight:700;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.compare-slot-cagr{ font-size:11px; font-weight:800; }
.compare-slot-cagr.up{ color:#15803d; }
.compare-slot-cagr.down{ color:var(--danger); }
.compare-slot-cagr.flat{ color:var(--muted); }

/* ============================================================
   ADD-FUND-TO-COMPARE POPUP
   ============================================================ */
.compare-search-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity .18s ease;
}
.compare-search-modal.show{ opacity:1; }
.compare-search-modal[hidden]{ display:none; }
.compare-search-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
}
.compare-search-modal-panel{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:min(90vh, 720px);
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md), 0 30px 60px rgba(0,0,0,.35);
  padding:20px;
  overflow-y:auto;
  transform:translateY(10px) scale(0.98);
  transition:transform .18s ease;
  /* No visible scrollbar "ruler" down the right edge of the popup —
     it still scrolls, just without the track/thumb on top of it. */
  scrollbar-width:none;
}
.compare-search-modal-panel::-webkit-scrollbar{ display:none; width:0; height:0; }
.compare-search-modal.show .compare-search-modal-panel{ transform:translateY(0) scale(1); }
.compare-search-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  font-size:15px;
  font-weight:800;
}
.compare-search-modal-header i{ color:var(--accent); margin-right:8px; }
.compare-search-modal-close{
  width:32px; height:32px;
  border-radius:9px;
  background:var(--panel-2);
  color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.compare-search-modal-close:hover{ background:var(--panel-3); color:var(--text); }
.compare-filter-groups{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.compare-filter-groups .filter-group:first-of-type{ margin-top:2px; }
.compare-modal-suggestions{
  position:static !important;
  display:none;
  margin-top:12px;
  border-radius:12px;
  max-height:min(58vh, 420px);
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
  scrollbar-width:none;
}
.compare-modal-suggestions::-webkit-scrollbar{ display:none; width:0; height:0; }
/* Sized for ~6 suggestion rows (each ~58-60px) to be visible at once
   without scrolling, instead of the 2 that fit before. */
.compare-modal-suggestions.show{
  display:block;
  min-height:340px;
}
/* Slightly roomier rows in this modal specifically (it now has more
   space to work with) — scoped here so the main search box's
   suggestion list on the fund page is untouched. */
.compare-modal-suggestions .suggestion-item{ padding:14px 12px; min-height:52px; }
.compare-modal-suggestions .suggestion-icon{ width:38px; height:38px; }
.compare-suggestion-skeleton-row{ padding:14px 12px; }
.compare-suggestion-skeleton-row + .compare-suggestion-skeleton-row{ border-top:1px solid var(--border); }

@media (max-width:600px){
  .compare-search-modal{ align-items:flex-end; padding:0; }
  .compare-search-modal-panel{
    max-width:100%;
    max-height:92vh;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
  }
  .compare-search-modal.show .compare-search-modal-panel{ transform:translateY(0); }
  .compare-modal-suggestions.show{ min-height:280px; }
}