/* ═══════════════════════════════════════════════════════════════════════
   India Market Terminal — Bloomberg-inspired dark theme
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --bg-deep:      #060a10;
    --bg-panel:     #0c1018;
    --bg-card:      #111827;
    --bg-hover:     #1a2332;
    --border:       #1e293b;
    --border-bright:#2d3a4d;

    --text-primary: #e2e8f0;
    --text-secondary:#8899aa;
    --text-dim:     #4a5568;

    --amber:        #ff8c00;
    --amber-dim:    #cc7000;
    --green:        #00e676;
    --green-dim:    #00c853;
    --red:          #ff3d3d;
    --red-dim:      #d32f2f;
    --blue:         #42a5f5;
    --cyan:         #26c6da;

    --font-data:    'IBM Plex Mono', 'Fira Code', monospace;
    --font-head:    'Chakra Petch', 'Barlow Condensed', sans-serif;
    --radius:       4px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-data);
    background: var(--bg-deep);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── Terminal Container ─────────────────────────────────────────────── */

.terminal {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,140,0,.03) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(0,230,118,.02) 0%, transparent 50%),
        var(--bg-deep);
}

/* ── Header ─────────────────────────────────────────────────────────── */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    background: linear-gradient(180deg, #0f1520 0%, #0a0e17 100%);
    border-bottom: 1px solid var(--border);
    gap: 16px;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    color: var(--amber);
    font-size: 18px;
    animation: pulse-glow 3s ease-in-out infinite;
}

.logo-text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--amber);
    text-shadow: 0 0 20px rgba(255,140,0,.3);
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255,140,0,.5); }
    50%      { opacity: .7; text-shadow: 0 0 16px rgba(255,140,0,.8); }
}

.market-badge {
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 3px 10px;
    border-radius: 3px;
    background: rgba(255,61,61,.15);
    color: var(--red);
    border: 1px solid rgba(255,61,61,.3);
    transition: all .4s;
}

.gift-nifty {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding: 2px 10px;
    border-left: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.gift-label {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--text-dim);
}

.gift-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.gift-move {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.gift-pts,
.gift-pct {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.market-badge.live {
    background: rgba(0,230,118,.12);
    color: var(--green);
    border-color: rgba(0,230,118,.3);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,230,118,.3); }
    50%      { box-shadow: 0 0 8px 2px rgba(0,230,118,.15); }
}

.header-center { flex: 1; max-width: 480px; }

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 10px;
    font-size: 16px;
    color: var(--text-dim);
    pointer-events: none;
}

#search-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: 12px;
    padding: 7px 12px 7px 32px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

#search-input:focus {
    border-color: var(--amber-dim);
    box-shadow: 0 0 0 2px rgba(255,140,0,.15);
}

#search-input::placeholder { color: var(--text-dim); }

.search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius);
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
}

.search-results.visible { display: block; }

.search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}

.search-item:hover { background: var(--bg-hover); }

.search-item:last-child { border-bottom: none; }

.search-item .sym { color: var(--amber); font-weight: 600; }
.search-item .name { color: var(--text-secondary); margin-left: 8px; }

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    justify-content: flex-end;
}

.update-label {
    font-size: 10px;
    color: var(--text-dim);
}

.clock {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.clock-label {
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* ── Indices Strip ──────────────────────────────────────────────────── */

.indices-strip {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(12,16,24,.95) 0%, rgba(8,12,20,.98) 100%);
    border-bottom: 1px solid var(--border);
    gap: 4px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.indices-strip::-webkit-scrollbar { height: 0; display: none; }

.indices-strip-items {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.idx-loading {
    color: var(--text-dim);
    font-size: 10px;
    animation: fade-pulse 1.5s ease-in-out infinite;
}

.idx-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-right: 1px solid rgba(30,41,59,.5);
    white-space: nowrap;
    flex-shrink: 0;
}

.idx-chip:last-child { border-right: none; }

.idx-chip-name {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.idx-chip-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.idx-chip-chg {
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.indices-strip-breadth {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-dim);
    padding-left: 8px;
    border-left: 1px solid rgba(30,41,59,.5);
    white-space: nowrap;
}

/* ── Panel Grid ─────────────────────────────────────────────────────── */

.panels {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1.1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    flex: 1;
    overflow: hidden;
    background: var(--border);
}

#panel-movers  { grid-row: 1; grid-column: 1; }
#panel-sectors { grid-row: 2; grid-column: 1; }
#panel-news    { grid-row: 1 / 3; grid-column: 2; }
#panel-stock   { grid-row: 1 / 3; grid-column: 3; }

.panel {
    background: var(--bg-panel);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-wide {
    grid-column: auto;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,140,0,.06) 0%, transparent 100%);
    flex-shrink: 0;
}

.panel-head h2 {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--amber);
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .2; }
}

.badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 2px 8px;
    border-radius: 2px;
    background: rgba(0,230,118,.1);
    color: var(--green);
    border: 1px solid rgba(0,230,118,.2);
}

.panel-body {
    flex: 1;
    padding: 10px 14px;
    overflow: hidden;
}

.panel-body.scrollable {
    overflow-y: auto;
}

.panel-body.scrollable::-webkit-scrollbar { width: 4px; }
.panel-body.scrollable::-webkit-scrollbar-track { background: transparent; }
.panel-body.scrollable::-webkit-scrollbar-thumb {
    background: var(--border-bright);
    border-radius: 2px;
}

.loading-placeholder {
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    padding: 30px 0;
    animation: fade-pulse 1.5s ease-in-out infinite;
}

@keyframes fade-pulse {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

/* ── (Index card styles removed — now in indices-strip above) ─────── */

/* ── Movers ─────────────────────────────────────────────────────────── */

.tab-group {
    display: flex;
    gap: 2px;
}

.tab {
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s;
}

.tab.active {
    background: rgba(255,140,0,.15);
    color: var(--amber);
    border-color: var(--amber-dim);
}

.movers-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: 100%;
}

.movers-col {
    display: flex;
    flex-direction: column;
}

.movers-col-head {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}

.mover-row {
    display: grid;
    grid-template-columns: 70px 1fr 58px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(30,41,59,.2);
    cursor: pointer;
    transition: background .15s;
    font-size: 12px;
}

.mover-row:hover { background: var(--bg-hover); border-radius: 3px; }

.mover-sym {
    font-weight: 600;
    color: var(--amber);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mover-price {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 8px;
    color: var(--text-dim);
}

.mover-change {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── News ───────────────────────────────────────────────────────────── */

.news-tab {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s;
}

.news-tab.active {
    background: rgba(255,140,0,.15);
    color: var(--amber);
    border-color: var(--amber-dim);
}

/* ── Watchlist Panel ─────────────────────────────────────────────────── */

.wl-add-wrap {
    position: relative;
    margin-left: auto;
    margin-right: 8px;
}

#wl-input {
    width: 120px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: 10px;
    padding: 4px 8px;
    outline: none;
    transition: border-color .2s, width .2s;
}

#wl-input:focus {
    border-color: var(--amber-dim);
    width: 160px;
}

#wl-input::placeholder { color: var(--text-dim); font-size: 10px; }

.wl-table-wrap {
    flex-shrink: 0;
    max-height: 50%;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
}

.wl-table-wrap::-webkit-scrollbar { width: 4px; }
.wl-table-wrap::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.wl-table-empty {
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
    padding: 18px 10px;
}

.wl-row {
    display: grid;
    grid-template-columns: 90px 1fr 90px 72px 28px;
    align-items: center;
    padding: 5px 12px;
    font-size: 11px;
    border-bottom: 1px solid rgba(30,41,59,.25);
    cursor: pointer;
    transition: background .12s;
}

.wl-row:hover { background: var(--bg-hover); }
.wl-row.wl-row-active { background: rgba(255,140,0,.08); border-left: 2px solid var(--amber); }

.wl-row-sym {
    font-weight: 600;
    color: var(--amber);
    letter-spacing: .5px;
}

.wl-row-name {
    color: var(--text-secondary);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wl-row-price {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.wl-row-chg {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wl-row-rm {
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
    transition: color .15s, background .15s;
    line-height: 1;
}

.wl-row-rm:hover {
    color: var(--red);
    background: rgba(255,61,61,.12);
}

.wl-suggest {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius);
    margin-top: 3px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
}

.wl-suggest.visible { display: block; }

.wl-suggest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 11px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}

.wl-suggest-item:last-child { border-bottom: none; }
.wl-suggest-item:hover { background: var(--bg-hover); }

.wl-suggest-item .wl-s-sym {
    font-weight: 600;
    color: var(--amber);
    min-width: 75px;
}

.wl-suggest-item .wl-s-name {
    color: var(--text-secondary);
    font-size: 10px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 6px;
}

.wl-suggest-item .wl-s-price {
    font-variant-numeric: tabular-nums;
    margin-left: 8px;
    font-size: 10px;
}

.wl-suggest-item.already {
    opacity: .4;
    pointer-events: none;
}

/* wire row: TAG | TIME | SOURCE | HEADLINE */

.wire-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 0;
    border-bottom: 1px solid rgba(30,41,59,.25);
    cursor: pointer;
    transition: background .15s;
    font-size: 11px;
    line-height: 1.35;
}

.wire-row:hover { background: var(--bg-hover); }

.wire-row.wire-new {
    animation: wire-flash .8s ease-out;
}

@keyframes wire-flash {
    0%   { background: rgba(255,140,0,.18); }
    100% { background: transparent; }
}

.wire-tag {
    flex-shrink: 0;
    width: 58px;
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .7px;
    padding: 2px 0;
}

.wire-tag-just-in {
    color: #fff;
    background: var(--red);
    border-radius: 2px;
    margin: 0 4px;
    animation: tag-pulse 1.8s ease-in-out infinite;
}

@keyframes tag-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .6; }
}

.wire-tag-breaking {
    color: var(--red);
}

.wire-time {
    flex-shrink: 0;
    width: 60px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding-right: 8px;
}

.wire-time-fresh { color: var(--amber); }
.wire-time-warm  { color: var(--text-secondary); }
.wire-time-old   { color: var(--text-dim); }

.wire-src {
    flex-shrink: 0;
    width: 68px;
    font-size: 9px;
    color: var(--cyan);
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 6px;
}

.wire-title {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wire-chips {
    display: inline;
    margin-left: 4px;
}

.wire-chip {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 3px;
    vertical-align: middle;
    background: rgba(255,140,0,.12);
    color: var(--amber);
    border: 1px solid rgba(255,140,0,.2);
    cursor: pointer;
}

.wire-chip:hover { background: rgba(255,140,0,.25); }

.wire-sent-bullish { color: var(--green) !important; }
.wire-sent-bearish { color: var(--red) !important; }

.wire-row-bullish {
    background: linear-gradient(90deg, rgba(0,230,118,.08), transparent 46%);
    border-left-color: rgba(0,230,118,.5);
}

.wire-row-bearish {
    background: linear-gradient(90deg, rgba(255,61,61,.08), transparent 46%);
    border-left-color: rgba(255,61,61,.5);
}

.wire-sent-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 1px 5px;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .8px;
    flex-shrink: 0;
}

.wire-sent-chip-bullish {
    color: var(--green);
    border: 1px solid rgba(0,230,118,.24);
    background: rgba(0,230,118,.08);
}

.wire-sent-chip-bearish {
    color: var(--red);
    border: 1px solid rgba(255,61,61,.24);
    background: rgba(255,61,61,.08);
}

.wire-impact-high {
    display: inline-flex;
    align-items: center;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .8px;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 5px;
    flex-shrink: 0;
    align-self: center;
    background: rgba(255,140,0,.18);
    color: var(--amber);
    border: 1px solid rgba(255,140,0,.3);
}

.news-empty {
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
    padding: 24px 0;
}

.news-source {
    font-size: 9px;
    color: var(--cyan);
    letter-spacing: .5px;
    margin-top: 3px;
}

.news-bullet {
    color: var(--amber);
    flex-shrink: 0;
    padding-top: 2px;
}

/* ── Stock Detail ───────────────────────────────────────────────────── */

.stock-hero {
    padding: 12px 14px;
    flex-shrink: 0;
}

.stock-prompt {
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    padding: 20px;
}

.stock-top {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.stock-company {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.stock-price-big {
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stock-change-big {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stock-ohlv {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.stock-ohlv span { font-variant-numeric: tabular-nums; }
.stock-ohlv .label { color: var(--text-dim); margin-right: 4px; }

#chart-container {
    flex: 1;
    min-height: 0;
    padding: 0 8px 8px;
}

.chart-controls { display: flex; gap: 2px; }

.chart-btn {
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s;
}

.chart-btn.active {
    background: rgba(66,165,245,.15);
    color: var(--blue);
    border-color: var(--blue);
}

/* ── Sectors ────────────────────────────────────────────────────────── */

.sector-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(30,41,59,.3);
}

.sector-name {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    min-width: 80px;
    color: var(--text-secondary);
}

.sector-bar-bg {
    flex: 1;
    height: 16px;
    background: rgba(30,41,59,.5);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: stretch;
}

.sector-bar-half {
    height: 100%;
    transition: width .6s ease-out;
}

.sector-bar-neg {
    margin-left: auto;
    background: rgba(255,61,61,.45);
    border-radius: 2px 0 0 2px;
}

.sector-bar-pos {
    background: rgba(0,230,118,.45);
    border-radius: 0 2px 2px 0;
}

.sector-bar-bg::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,.1);
}

.sector-pct {
    font-size: 12px;
    font-weight: 600;
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Global Markets View ────────────────────────────────────────────── */

.global-view {
    flex: 1;
    display: none;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding: 10px 16px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-bright) transparent;
}

.global-view::-webkit-scrollbar { width: 5px; }
.global-view::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }

.gm-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 8px 0;
}

.gm-status {
    font-family: var(--font-head);
    font-size: 9px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gm-status.streaming {
    color: #00e676;
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.25);
}

.gm-status.streaming::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00e676;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5); }
    50% { opacity: 0.6; box-shadow: 0 0 6px 2px rgba(0, 230, 118, 0.3); }
}

.gm-status.polling {
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}

.gm-updated {
    font-size: 9px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.gm-heatmap-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,140,0,.08), transparent 24%),
        radial-gradient(circle at 84% 12%, rgba(56,189,248,.07), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)),
        var(--bg-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.gm-heatmap-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gm-heatmap-kicker {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--amber);
}

.gm-heatmap-title {
    margin-top: 4px;
    font-family: var(--font-head);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--text-primary);
}

.gm-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gm-heatmap-legend-label,
.gm-heatmap-legend-text {
    font-size: 9px;
    font-family: var(--font-data);
    color: var(--text-dim);
}

.gm-heatmap-legend-swatch {
    width: 16px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
}

.gm-heatmap-legend-swatch.is-down {
    background: rgba(239, 68, 68, 0.58);
}

.gm-heatmap-legend-swatch.is-flat {
    background: rgba(125, 211, 252, 0.16);
}

.gm-heatmap-legend-swatch.is-up {
    background: rgba(34, 197, 94, 0.58);
}

.gm-heatmap {
    position: relative;
    min-height: clamp(280px, 36vw, 480px);
    aspect-ratio: 2528 / 1239;
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(66, 153, 225, 0.05), transparent 44%),
        radial-gradient(circle at 16% 22%, rgba(255,140,0,.05), transparent 28%),
        linear-gradient(180deg, rgba(7,11,19,.84), rgba(6,10,18,.96));
    border: 1px solid rgba(255,255,255,.05);
}

.gm-map-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.gm-world-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.gm-world-svg #ocean {
    fill: transparent !important;
    stroke: none !important;
}

.gm-world-svg .landxx,
.gm-world-svg .limitxx,
.gm-world-svg .coastxx {
    fill: rgba(125, 136, 152, 0.09) !important;
    stroke: rgba(214, 223, 235, 0.14) !important;
    stroke-width: .8 !important;
    vector-effect: non-scaling-stroke;
    transition: fill .16s ease, stroke .16s ease, opacity .16s ease;
}

.gm-world-svg .circlexx,
.gm-world-svg .subxx,
.gm-world-svg .noxx {
    display: none;
}

.gm-world-svg [data-market] path,
.gm-world-svg [data-market] polygon,
.gm-world-svg [data-market] circle,
.gm-world-svg [data-market] ellipse {
    fill: var(--gm-fill) !important;
    stroke: var(--gm-stroke) !important;
    stroke-width: var(--gm-stroke-width, 1.3) !important;
    opacity: .98;
}

.gm-world-svg [data-market] .circlexx,
.gm-world-svg [data-market] .subxx,
.gm-world-svg [data-market] .noxx {
    display: block;
    opacity: 1;
}

.gm-market-overlay {
    pointer-events: none;
}

.gm-market-badge {
    pointer-events: none;
}

.gm-market-link {
    fill: none;
    stroke: rgba(255,255,255,0.16);
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 4 5;
}

.gm-market-badge-bg {
    fill: rgba(8,12,20,.72);
    stroke: var(--gm-badge-stroke);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.24));
}

.gm-market-badge-code,
.gm-market-badge-pct {
    pointer-events: none;
    user-select: none;
    font-family: var(--font-head);
    paint-order: stroke fill;
    stroke: rgba(6, 10, 18, 0.84);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.gm-market-badge-code {
    fill: rgba(228, 235, 244, 0.74);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}

.gm-market-badge-pct {
    fill: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .25px;
}

.gm-loading {
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
    padding: 40px 0;
    animation: fade-pulse 1.5s ease-in-out infinite;
}

.gm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
}

.gm-section {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.gm-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(255,140,0,.06) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
}

.gm-section-title {
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--amber);
}

.gm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-data);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.gm-table thead th {
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-dim);
    padding: 6px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    background: rgba(12,16,24,.6);
}

.gm-table thead th:first-child {
    text-align: left;
}

.gm-table tbody td {
    padding: 7px 12px;
    text-align: right;
    border-bottom: 1px solid rgba(30,41,59,.2);
    color: var(--text-secondary);
    vertical-align: top;
}

.gm-table tbody td:first-child {
    text-align: left;
}

.gm-name-cell {
    text-align: left !important;
}

.gm-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gm-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 11px;
}

.gm-name-meta,
.gm-market-chip-countdown {
    font-size: 9px;
    line-height: 1.35;
    color: var(--text-dim);
}

.gm-market-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
        rgba(15, 23, 42, 0.26);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        0 8px 20px rgba(0,0,0,0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.gm-market-chip-state {
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.gm-market-chip-countdown {
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gm-market-chip.is-open {
    border-color: rgba(0, 230, 118, 0.22);
    background:
        linear-gradient(180deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.05)),
        rgba(15, 23, 42, 0.24);
}

.gm-market-chip.is-open .gm-market-chip-state,
.gm-market-chip.is-open .gm-market-chip-countdown {
    color: var(--green);
}

.gm-market-chip.is-closed {
    border-color: rgba(255, 99, 132, 0.2);
    background:
        linear-gradient(180deg, rgba(255, 99, 132, 0.16), rgba(255, 99, 132, 0.05)),
        rgba(15, 23, 42, 0.24);
}

.gm-market-chip.is-closed .gm-market-chip-state,
.gm-market-chip.is-closed .gm-market-chip-countdown {
    color: #ff7b8f;
}

.gm-market-chip.is-closed .gm-market-chip-countdown {
    animation: gm-session-pulse 1.8s ease-in-out infinite;
}

.gm-market-chip.is-holiday {
    border-color: rgba(125, 211, 252, 0.22);
    background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.05)),
        rgba(15, 23, 42, 0.24);
}

.gm-market-chip.is-holiday .gm-market-chip-state,
.gm-market-chip.is-holiday .gm-market-chip-countdown {
    color: #7dd3fc;
}

.gm-market-chip.is-unknown .gm-market-chip-state,
.gm-market-chip.is-unknown .gm-market-chip-countdown,
.gm-name-meta {
    color: var(--text-dim);
}

@keyframes gm-session-pulse {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 0 rgba(255, 123, 143, 0);
    }
    50% {
        opacity: 0.72;
        text-shadow: 0 0 12px rgba(255, 123, 143, 0.35);
    }
}

.gm-table tbody tr {
    transition: background .12s;
}

.gm-table tbody tr:hover {
    background: var(--bg-hover);
}

.gm-table tbody tr:last-child td {
    border-bottom: none;
}

.gm-price {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.gm-chg {
    font-weight: 600;
    white-space: nowrap;
}

/* ── Color Utilities ────────────────────────────────────────────────── */

.up   { color: var(--green) !important; }
.down { color: var(--red)   !important; }
.flat { color: var(--text-dim) !important; }

/* ── Orderbook-style price flash ───────────────────────────────────── */

.flash-green {
    animation: flash-g .8s ease-out;
}

.flash-red {
    animation: flash-r .8s ease-out;
}

@keyframes flash-g {
    0%   { background: rgba(0,230,118,.35); box-shadow: inset 0 0 0 1px rgba(0,230,118,.4); }
    40%  { background: rgba(0,230,118,.12); }
    100% { background: transparent; box-shadow: none; }
}

@keyframes flash-r {
    0%   { background: rgba(255,61,61,.35); box-shadow: inset 0 0 0 1px rgba(255,61,61,.4); }
    40%  { background: rgba(255,61,61,.12); }
    100% { background: transparent; box-shadow: none; }
}

.flash-green-text {
    animation: flash-gt .8s ease-out;
}

.flash-red-text {
    animation: flash-rt .8s ease-out;
}

@keyframes flash-gt {
    0%   { text-shadow: 0 0 8px rgba(0,230,118,.7); }
    100% { text-shadow: none; }
}

@keyframes flash-rt {
    0%   { text-shadow: 0 0 8px rgba(255,61,61,.7); }
    100% { text-shadow: none; }
}

/* ── Responsive: Tablet ────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .panels {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }
    #panel-movers  { grid-row: auto; grid-column: 1; }
    #panel-sectors { grid-row: auto; grid-column: 2; }
    #panel-news    { grid-row: auto; grid-column: 1 / -1; }
    #panel-stock   { grid-row: auto; grid-column: 1 / -1; }

    .mutual-view {
        flex-direction: column;
        overflow-y: auto;
    }

    .mf-sidebar {
        width: 100%;
        min-width: 0;
    }

    .mf-stage {
        min-height: 640px;
    }

    .mf-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(360px, 1fr);
    }

    .mf-hero,
    #mf-benchmark-block,
    #mf-range-block,
    .mf-stats,
    .mf-chart-shell {
        grid-column: 1;
        grid-row: auto;
    }

    .mf-chart-shell {
        min-height: 420px;
    }
}

/* ── Mobile Bottom Nav (hidden on desktop) ─────────────────────────── */

.mobile-nav { display: none; }

/* ── Nav Tabs ───────────────────────────────────────────────────────── */

.nav-tabs {
    display: flex;
    gap: 2px;
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
}

.nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}

.nav-tab:hover { color: var(--text-primary); border-color: var(--text-dim); }
.nav-tab.active {
    background: rgba(0,230,118,.1);
    color: var(--green);
    border-color: rgba(0,230,118,.3);
}

/* ── View Toggle ───────────────────────────────────────────────────── */

.terminal[data-view="global"] .panels,
.terminal[data-view="global"] .indices-strip { display: none !important; }
.terminal[data-view="global"] .global-view { display: flex !important; }

.terminal[data-view="mutual"] .panels,
.terminal[data-view="mutual"] .indices-strip { display: none !important; }
.terminal[data-view="mutual"] .mutual-view { display: flex !important; }

.terminal[data-view="fii"] .panels,
.terminal[data-view="fii"] .indices-strip { display: none !important; }
.terminal[data-view="fii"] .fii-view { display: flex !important; }

/* ── Options View ──────────────────────────────────────────────────── */

.options-view {
    flex: 1;
    display: none;
    flex-direction: column;
    overflow: hidden;
    padding: 0 6px 6px;
}

.oc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.oc-sym-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oc-sym-btn {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all .2s;
}

.oc-sym-btn:hover { color: var(--text-primary); }
.oc-sym-btn.active {
    background: rgba(0,120,255,.12);
    color: var(--blue);
    border-color: rgba(0,120,255,.35);
}

.oc-stock-input {
    font-family: var(--font-data);
    font-size: 11px;
    width: 100px;
    padding: 4px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    outline: none;
}

.oc-stock-input:focus { border-color: var(--blue); }

.oc-info-group {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.oc-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.oc-badge-label {
    font-family: var(--font-head);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.oc-badge-val {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.oc-expiry-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.oc-expiry-label {
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-dim);
}

.oc-expiry-select {
    font-family: var(--font-data);
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}

.oc-ts {
    font-family: var(--font-data);
    font-size: 10px;
    color: var(--text-dim);
    margin-left: 8px;
}

/* ── Option Chain Table ────────────────────────────────────────────── */

.oc-table-wrap {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.oc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-data);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.oc-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.oc-table thead tr:first-child th {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
}

.oc-th-ce { text-align: center; color: var(--green) !important; }
.oc-th-pe { text-align: center; color: var(--red) !important; }
.oc-th-strike { text-align: center; }

.oc-table thead tr:nth-child(2) th {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .8px;
    padding: 4px 8px;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border);
    color: var(--text-dim);
    text-align: right;
}

.oc-table tbody td {
    padding: 3px 8px;
    text-align: right;
    border-bottom: 1px solid rgba(255,255,255,.03);
    color: var(--text-secondary);
    white-space: nowrap;
}

.oc-row:hover td { background: rgba(255,255,255,.03); }

.oc-strike {
    text-align: center !important;
    font-weight: 700;
    color: var(--text-primary) !important;
    background: var(--bg-surface);
    border-left: 2px solid var(--border);
    border-right: 2px solid var(--border);
    position: sticky;
    left: 0;
}

.oc-atm td { background: rgba(0,120,255,.06) !important; }
.oc-atm .oc-strike {
    background: rgba(0,120,255,.15) !important;
    color: var(--blue) !important;
    border-left-color: var(--blue);
    border-right-color: var(--blue);
}

.oc-itm { background: rgba(255,255,255,.02); }

.oc-ltp { font-weight: 600; }
.oc-ltp.up { color: var(--green) !important; }
.oc-ltp.down { color: var(--red) !important; }

td.up { color: var(--green) !important; }
td.down { color: var(--red) !important; }

td.oc-ce,
td.oc-pe {
    position: relative;
}

.oc-oi-bar {
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 0;
    background: rgba(0,230,118,.08);
    border-radius: 2px;
    pointer-events: none;
    max-width: 100%;
}

.oc-oi-bar-pe {
    background: rgba(255,61,61,.08);
    left: 0;
    right: auto;
}

td.oc-ce span,
td.oc-pe span {
    position: relative;
    z-index: 1;
}

.oc-empty {
    text-align: center !important;
    color: var(--text-dim);
    padding: 40px 0 !important;
    font-size: 12px;
}

/* ── Mutual Funds View ─────────────────────────────────────────────── */

.mutual-view {
    flex: 1;
    display: none;
    position: relative;
    gap: 16px;
    min-height: 0;
    overflow: hidden;
    padding: 12px 16px 16px;
    background:
        radial-gradient(circle at 8% 0%, rgba(38,198,218,.12), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(255,140,0,.1), transparent 34%),
        linear-gradient(135deg, rgba(6,10,16,.92), rgba(8,13,22,.98));
}

.mutual-view::before {
    content: "";
    position: absolute;
    inset: 12px 16px 16px;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: .22;
    -webkit-mask-image: radial-gradient(circle at 68% 48%, #000, transparent 76%);
    mask-image: radial-gradient(circle at 68% 48%, #000, transparent 76%);
}

.mf-sidebar {
    position: relative;
    z-index: 1;
    width: clamp(304px, 25vw, 368px);
    min-width: 304px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background:
        radial-gradient(circle at 16% 0%, rgba(255,140,0,.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        rgba(10,15,24,.76);
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.mf-sidebar::after,
.mf-chart-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,.11), transparent 26%, transparent 70%, rgba(38,198,218,.08));
    opacity: .32;
}

.mf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 0;
}

.mf-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.mf-search-icon {
    position: absolute;
    left: 14px;
    color: rgba(38,198,218,.86);
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

.mf-input {
    width: 100%;
    height: 42px;
    padding: 0 13px 0 38px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(5,9,16,.7);
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 15px;
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.mf-input:focus {
    border-color: rgba(38,198,218,.42);
    background: rgba(7,12,21,.88);
    box-shadow: 0 0 0 3px rgba(38,198,218,.08), 0 12px 30px rgba(0,0,0,.22);
}

.mf-input::placeholder {
    color: var(--text-dim);
}

.mf-suggest {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: min(420px, 58vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(38,198,218,.08), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
        rgba(8,13,22,.98);
    box-shadow: 0 24px 54px rgba(0,0,0,.46);
    z-index: 80;
    contain: content;
}

.mf-suggest.visible {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mf-suggest-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 12px;
    background: rgba(10,15,24,.82);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: border-color .14s ease, transform .14s ease, background .14s ease;
}

.mf-suggest-item:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(38,198,218,.3);
    background: rgba(14,22,34,.96);
}

.mf-suggest-item.already,
.mf-suggest-item:disabled {
    opacity: .66;
    cursor: default;
}

.mf-suggest-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mf-suggest-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.mf-suggest-nav {
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.mf-suggest-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mf-kicker,
.mf-control-label,
.mf-stat-label,
.mf-hero-kicker {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: rgba(148,163,184,.74);
}

.mf-title {
    margin-top: 4px;
    font-family: var(--font-head);
    font-size: clamp(21px, 2.1vw, 28px);
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--text-primary);
    text-shadow: 0 12px 34px rgba(38,198,218,.12);
}

.mf-status {
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.13);
    background: rgba(255,255,255,.035);
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.3;
    font-family: var(--font-data);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mf-status.is-ready {
    color: #9fe8c5;
    border-color: rgba(16,185,129,.3);
    background: rgba(16,185,129,.1);
}

.mf-status.is-pending {
    color: #f7c57a;
    border-color: rgba(255,140,0,.24);
    background: rgba(255,140,0,.08);
}

.mf-status.is-muted {
    color: var(--text-secondary);
}

.mf-selection-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.mf-selection-bar .mf-status {
    grid-column: 1 / -1;
    min-width: 0;
}

.mf-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(148,163,184,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: var(--text-secondary);
    font-family: var(--font-data);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}

.mf-select-all input,
.mf-select-toggle input {
    accent-color: #26c6da;
}

.mf-action-btn {
    height: 32px;
    border: 1px solid rgba(148,163,184,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    color: var(--text-secondary);
    font-family: var(--font-data);
    font-size: 10px;
    line-height: 1;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.mf-action-btn:hover,
.mf-select-all:hover {
    color: var(--text-primary);
    border-color: rgba(38,198,218,.28);
    background: rgba(38,198,218,.08);
    transform: translateY(-1px);
}

.mf-holding-card.chart-selected {
    box-shadow: inset 0 0 0 1px rgba(79,209,197,.2), 0 16px 38px rgba(38,198,218,.06);
}

.mf-holding-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mf-select-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(148,163,184,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: var(--text-secondary);
    font-family: var(--font-data);
    font-size: 10px;
    cursor: pointer;
    user-select: none;
}

.mf-remove {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}

.mf-remove:hover {
    color: var(--red);
    border-color: rgba(255,61,61,.24);
    background: rgba(255,61,61,.06);
}

.mf-stat-card {
    position: relative;
    overflow: hidden;
    flex: 1 0 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 54px;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.11);
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(8,13,22,.72);
}

.mf-stat-card::after {
    content: "";
    position: absolute;
    inset: auto 10px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(38,198,218,.4), transparent);
    opacity: .45;
}

.mf-stat-value {
    font-family: var(--font-data);
    font-size: clamp(12px, .9vw, 16px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.mf-holdings {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 2px 3px 4px 0;
    contain: layout paint;
}

.mf-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    padding: 14px;
    border: 1px dashed rgba(148,163,184,.18);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
    color: var(--text-secondary);
    text-align: center;
    font-size: 11px;
    line-height: 1.45;
}

.mf-holding-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 13px 12px 15px;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.1);
    background:
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
        rgba(11,17,27,.84);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    content-visibility: auto;
    contain-intrinsic-size: 112px;
}

.mf-holding-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 999px;
    background: rgba(148,163,184,.22);
    transition: background .16s ease, box-shadow .16s ease;
}

.mf-holding-card:hover {
    transform: translateY(-1px);
    border-color: rgba(38,198,218,.22);
    background:
        linear-gradient(135deg, rgba(38,198,218,.08), rgba(255,255,255,.025)),
        rgba(12,19,31,.94);
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.mf-holding-card.active {
    border-color: rgba(255,140,0,.38);
    box-shadow: inset 0 0 0 1px rgba(255,140,0,.1), 0 20px 44px rgba(255,140,0,.08);
    background:
        linear-gradient(135deg, rgba(255,140,0,.14), rgba(255,255,255,.025)),
        rgba(14,20,31,.96);
}

.mf-holding-card.active::before {
    background: var(--amber);
    box-shadow: 0 0 18px rgba(255,140,0,.42);
}

.mf-holding-card.chart-selected:not(.active)::before {
    background: var(--cyan);
    box-shadow: 0 0 16px rgba(38,198,218,.36);
}

.mf-holding-top,
.mf-holding-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mf-holding-name {
    flex: 1;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.42;
}

.mf-holding-value {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.mf-holding-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mf-holding-chip,
.mf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.12);
    background: rgba(255,255,255,.045);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-data);
}

.mf-holding-chip.muted {
    color: var(--text-dim);
}

.mf-holding-date {
    font-size: 10px;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}

.mf-stage {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    min-height: 0;
}

.mf-detail {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    contain: layout paint;
}

.mf-detail.is-empty {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.mf-hero,
.mf-chart-shell {
    position: relative;
    border: 1px solid rgba(148,163,184,.14);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(79,209,197,.12), transparent 36%),
        radial-gradient(circle at top left, rgba(255,140,0,.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
        rgba(9,14,23,.86);
    box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
}

.mf-hero {
    grid-column: 1;
    grid-row: 1;
    padding: 14px;
    overflow: hidden;
}

.mf-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.mf-hero-copy {
    flex: 1 1 34%;
    max-width: 38%;
    min-width: 0;
}

.mf-hero-name {
    margin-top: 4px;
    font-family: var(--font-head);
    font-size: clamp(16px, 1.15vw, 20px);
    font-weight: 700;
    line-height: 1.12;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mf-hero-meta {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mf-hero-controls {
    flex: 1 1 60%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 3px;
    scrollbar-width: none;
}

.mf-hero-controls::-webkit-scrollbar {
    display: none;
}

.mf-inline-chip-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.mf-inline-chip-row.benchmark {
    padding-right: 8px;
    border-right: 1px solid rgba(148,163,184,.14);
}

.mf-hero-controls .mf-chip {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 9px;
    white-space: nowrap;
}

.mf-hero-value {
    min-width: 132px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.mf-hero-value-label {
    font-size: 10px;
    letter-spacing: 1.4px;
    color: var(--text-dim);
    font-family: var(--font-head);
    text-transform: uppercase;
}

.mf-hero-value-number {
    font-family: var(--font-data);
    font-size: clamp(22px, 2vw, 31px);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.mf-hero-value-change {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
}

.mf-control-block {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    border: 1px solid rgba(148,163,184,.11);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
        rgba(8,13,22,.66);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

#mf-benchmark-block {
    grid-row: 2;
}

#mf-range-block {
    grid-row: 3;
}

#mf-benchmark-block,
#mf-range-block {
    display: none !important;
}

.mf-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.mf-chip {
    min-height: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        rgba(15,23,42,.42);
    cursor: pointer;
    transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease;
}

.mf-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(255,140,0,.22);
    color: var(--text-primary);
}

.mf-chip.active {
    border-color: rgba(255,140,0,.46);
    color: #ffd7a3;
    background:
        linear-gradient(180deg, rgba(255,140,0,.2), rgba(255,140,0,.07)),
        rgba(18,20,28,.94);
    box-shadow: inset 0 0 0 1px rgba(255,140,0,.08), 0 10px 24px rgba(255,140,0,.08);
}

.mf-custom-range {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    padding: 8px;
    border: 1px solid rgba(148,163,184,.1);
    border-radius: 14px;
    background: rgba(5,9,16,.5);
    transition: border-color .14s ease, background .14s ease;
}

.mf-hero > .mf-custom-range {
    display: none;
    margin-top: 10px;
}

.mf-hero > .mf-custom-range.is-active {
    display: flex;
}

.mf-custom-range.is-active {
    border-color: rgba(255,140,0,.34);
    background: rgba(255,140,0,.045);
}

.mf-custom-range-label,
.mf-date-field span {
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.mf-custom-range-label {
    align-self: center;
    padding: 0 4px;
    color: var(--text-secondary);
}

.mf-date-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mf-date-field input {
    height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 7px;
    outline: none;
    background: rgba(15,23,42,.66);
    color: var(--text-primary);
    color-scheme: dark;
    font-family: var(--font-data);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.mf-date-field input:focus {
    border-color: rgba(255,140,0,.48);
    box-shadow: 0 0 0 2px rgba(255,140,0,.08);
}

.mf-date-separator {
    align-self: center;
    color: var(--text-dim);
    font-family: var(--font-data);
    font-size: 9px;
    text-transform: uppercase;
}

.mf-date-btn {
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 7px;
    background: rgba(255,255,255,.035);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.mf-date-btn:hover {
    border-color: rgba(255,140,0,.3);
    color: var(--text-primary);
}

.mf-date-btn.primary {
    border-color: rgba(255,140,0,.38);
    background: rgba(255,140,0,.1);
    color: var(--amber);
}

.mf-date-error {
    align-self: center;
    min-height: 1em;
    color: #ff7b78;
    font-family: var(--font-data);
    font-size: 9px;
}

@media (max-width: 700px) {
    .mf-custom-range {
        width: 100%;
    }

    .mf-custom-range-label {
        width: 100%;
    }

    .mf-date-field {
        flex: 1 1 130px;
    }

    .mf-date-field input {
        min-width: 0;
        width: 100%;
    }
}

.mf-stats {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.mf-stats::-webkit-scrollbar {
    display: none;
}

.mf-chart-shell {
    grid-column: 1;
    grid-row: 3;
    align-self: stretch;
    min-height: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    contain: layout paint;
}

.mf-detail.is-empty .mf-chart-shell {
    grid-column: 1;
    grid-row: 1;
    min-height: 100%;
}

.mf-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mf-chart-title {
    font-family: var(--font-head);
    font-size: 13px;
    letter-spacing: .9px;
    color: var(--text-primary);
}

.mf-chart-note {
    font-size: 10px;
    color: var(--text-dim);
    text-align: right;
}

.mf-chart {
    position: relative;
    flex: 1;
    min-height: 430px;
    border-radius: 17px;
    border: 1px solid rgba(148,163,184,.08);
    background:
        radial-gradient(circle at 50% 0%, rgba(38,198,218,.06), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
        rgba(5,9,16,.78);
    overflow: hidden;
}

.mf-chart-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
    background: linear-gradient(180deg, rgba(8,12,20,.3), rgba(8,12,20,.7));
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 1100px) {
    .mutual-view {
        flex-direction: column;
        overflow-y: auto;
    }

    .mf-sidebar {
        width: 100%;
        min-width: 0;
        max-height: 360px;
    }

    .mf-stage {
        min-height: 640px;
    }

    .mf-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(360px, 1fr);
    }

    .mf-hero,
    #mf-benchmark-block,
    #mf-range-block,
    .mf-stats,
    .mf-chart-shell {
        grid-column: 1;
        grid-row: auto;
    }

    .mf-chart-shell {
        min-height: 420px;
    }
}

/* ── FII / DII Flows View ──────────────────────────────────────────── */

.fii-view {
    flex: 1;
    display: none;
    min-height: 0;
    overflow: hidden;
    padding: 10px 16px 16px;
}

.fii-shell {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.fii-head,
.fii-chart-shell,
.fii-table-shell,
.fii-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
        radial-gradient(circle at top right, rgba(38,198,218,.08), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        rgba(12,16,24,.92);
}

.fii-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
}

.fii-kicker {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--amber);
}

.fii-title {
    margin-top: 4px;
    font-family: var(--font-head);
    font-size: 24px;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.fii-source {
    max-width: 46%;
    color: var(--text-secondary);
    font-family: var(--font-data);
    font-size: 11px;
    text-align: right;
    line-height: 1.4;
}

.fii-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
}

.fii-card {
    position: relative;
    overflow: hidden;
    padding: 16px;
    min-height: 142px;
}

.fii-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--border-bright);
}

.fii-card.is-positive::before { background: var(--green); }
.fii-card.is-negative::before { background: var(--red); }

.fii-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fii-card-label {
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: var(--text-secondary);
}

.fii-card-date {
    color: var(--text-dim);
    font-size: 10px;
    white-space: nowrap;
}

.fii-card-net {
    margin-top: 14px;
    font-family: var(--font-data);
    font-size: clamp(24px, 3.8vw, 42px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}

.fii-card.is-positive .fii-card-net { color: var(--green); }
.fii-card.is-negative .fii-card-net { color: var(--red); }
.fii-card.is-neutral .fii-card-net { color: var(--text-primary); }

.fii-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.fii-mini-stat {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.05);
    background: rgba(8,12,20,.58);
}

.fii-mini-label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: var(--text-dim);
}

.fii-mini-value {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.fii-chart-shell {
    flex: none;
    padding: 14px;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.fii-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.fii-chart-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#fii-chart-note {
    color: var(--text-dim);
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2px;
    text-transform: none;
}

.fii-chart-meta,
.fii-ranges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fii-range {
    padding: 4px 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 5px;
    background: rgba(8,12,20,.64);
    color: var(--text-dim);
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}

.fii-range:hover,
.fii-range.is-active {
    border-color: rgba(255,140,0,.55);
    background: rgba(255,140,0,.12);
    color: var(--amber);
}

.fii-series-toggles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 11px 0 8px;
}

.fii-series-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-family: var(--font-data);
    font-size: 10px;
    cursor: pointer;
    user-select: none;
}

.fii-series-toggle input {
    width: 12px;
    height: 12px;
    accent-color: var(--amber);
}

.fii-series-swatch {
    width: 20px;
    height: 3px;
    border-radius: 999px;
}

.fii-series-swatch.is-fii {
    background: linear-gradient(90deg, rgba(255,77,79,.92) 0 48%, rgba(0,230,118,.92) 52% 100%);
}

.fii-series-swatch.is-dii {
    background: linear-gradient(90deg, rgba(255,77,79,.46) 0 48%, rgba(0,230,118,.46) 52% 100%);
}

.fii-series-swatch.is-nifty {
    background: #7dd3fc;
}

.fii-chart {
    position: relative;
    flex: none;
    height: 340px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.04);
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
        rgba(8,12,20,.78);
    overflow: hidden;
}

.fii-flow-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.fii-flow-grid,
.fii-flow-zero,
.fii-flow-crosshair {
    vector-effect: non-scaling-stroke;
}

.fii-flow-grid {
    stroke: rgba(142,160,184,.1);
    stroke-width: 1;
}

.fii-flow-zero {
    stroke: rgba(255,255,255,.24);
    stroke-width: 1;
}

.fii-flow-axis {
    fill: #64748b;
    font-family: var(--font-data);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.fii-flow-axis.is-date {
    fill: #74849a;
    font-size: 8px;
}

.fii-flow-bars.is-positive { fill: rgba(0,230,118,.82); }
.fii-flow-bars.is-negative { fill: rgba(255,77,79,.82); }
.fii-flow-bars.is-dii { opacity: .48; }

.fii-nifty-line {
    fill: none;
    stroke: #7dd3fc;
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.fii-flow-crosshair {
    stroke: rgba(255,140,0,.7);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.fii-flow-tooltip {
    position: absolute;
    z-index: 3;
    min-width: 188px;
    padding: 10px;
    border: 1px solid rgba(255,140,0,.38);
    border-radius: 8px;
    background: rgba(7,11,18,.94);
    box-shadow: 0 14px 34px rgba(0,0,0,.34);
    color: var(--text-secondary);
    font-family: var(--font-data);
    font-size: 10px;
    pointer-events: none;
}

.fii-flow-tooltip-date {
    margin-bottom: 7px;
    color: var(--text-primary);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
}

.fii-flow-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding-top: 4px;
    font-variant-numeric: tabular-nums;
}

.fii-flow-tooltip-value.is-positive { color: var(--green); }
.fii-flow-tooltip-value.is-negative { color: var(--red); }

.fii-chart-insights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.fii-insight {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 8px;
    background: rgba(8,12,20,.56);
}

.fii-insight-label,
.fii-insight-note {
    display: block;
    color: var(--text-dim);
    font-size: 8px;
    letter-spacing: .8px;
}

.fii-insight-label {
    font-family: var(--font-head);
    font-weight: 800;
}

.fii-insight-value {
    display: block;
    overflow: hidden;
    margin: 6px 0 4px;
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fii-insight.is-positive .fii-insight-value { color: var(--green); }
.fii-insight.is-negative .fii-insight-value { color: var(--red); }

.fii-chart-placeholder,
.fii-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--text-dim);
    font-size: 12px;
    text-align: center;
}

.fii-chart-placeholder {
    position: absolute;
    inset: 0;
    padding: 20px;
}

.fii-table-shell {
    max-height: 210px;
    overflow: auto;
}

.fii-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-data);
    font-size: 11px;
}

.fii-table th,
.fii-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.045);
    text-align: right;
}

.fii-table th:first-child,
.fii-table td:first-child {
    text-align: left;
}

.fii-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(12,16,24,.96);
    color: var(--text-dim);
    font-family: var(--font-head);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.fii-net-cell {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fii-net-cell.is-positive { color: var(--green); }
.fii-net-cell.is-negative { color: var(--red); }
.fii-net-cell.is-neutral { color: var(--text-secondary); }

/* ── News LLM queue badge (bottom-right) ───────────────────────────── */

.news-llm-stack {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 60;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(145deg, rgba(17, 24, 39, 0.96) 0%, rgba(12, 16, 24, 0.98) 100%);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    pointer-events: none;
    user-select: none;
}

.news-llm-stack-kicker {
    color: var(--text-dim);
    font-size: 9px;
}

.news-llm-stack-count {
    font-family: var(--font-data);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-primary);
    min-width: 1.2em;
    text-align: center;
}

.news-llm-stack-suffix {
    color: var(--text-dim);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.news-llm-stack--busy {
    border-color: rgba(255, 140, 0, 0.45);
    box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.12), 0 4px 24px rgba(0, 0, 0, 0.45);
}

.news-llm-stack--busy .news-llm-stack-count {
    color: var(--amber);
    animation: news-llm-pulse 1.4s ease-in-out infinite;
}

@keyframes news-llm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.news-llm-stack--off {
    opacity: 0.72;
}

.news-llm-stack--off .news-llm-stack-count {
    color: var(--text-dim);
    animation: none;
}

.news-llm-stack--off .news-llm-stack-suffix {
    text-transform: none;
    letter-spacing: 0.02em;
}

/* ── Responsive: Mobile ────────────────────────────────────────────── */

@media (max-width: 700px) {
    body {
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
    }

    .terminal {
        height: 100vh;
        height: 100dvh;
    }

    /* ── Header: compact ──────────────────────────────────────────── */

    .header {
        height: auto;
        padding: 0 10px;
        gap: 8px;
        min-height: 42px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .header-left {
        min-width: 0;
        gap: 6px;
        flex-wrap: wrap;
        flex: 1 1 auto;
    }

    .logo-text { display: none; }
    .logo-icon { font-size: 16px; }

    .market-badge {
        font-size: 8px;
        padding: 2px 6px;
    }

    .gift-nifty {
        margin-left: 0;
        padding: 0;
        gap: 4px;
        border-left: none;
    }

    .gift-label { font-size: 7px; }
    .gift-price { font-size: 11px; }
    .gift-pts, .gift-pct { font-size: 9px; }

    .nav-tabs {
        display: flex;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        overflow-x: auto;
        padding-bottom: 6px;
    }

    .nav-tab {
        flex: 0 0 auto;
        font-size: 8px;
        padding: 4px 8px;
        white-space: nowrap;
    }

    .header-center { display: none; }

    .header-right {
        min-width: auto;
        gap: 6px;
        align-self: center;
    }

    .update-label { display: none; }
    .clock { font-size: 13px; }
    .clock-label { font-size: 8px; }

    /* ── Indices strip: compact on mobile ─────────────────────────── */

    .indices-strip {
        height: 30px;
        padding: 0 8px;
        gap: 0;
    }

    .idx-chip {
        gap: 4px;
        padding: 0 8px;
    }

    .idx-chip-name { font-size: 7px; }
    .idx-chip-price { font-size: 10px; }
    .idx-chip-chg { font-size: 9px; }

    .indices-strip-breadth { display: none; }

    /* ── Panels: single-panel view ────────────────────────────────── */

    .panels {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        gap: 0;
        background: var(--bg-deep);
    }

    .panel {
        display: none;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        flex: 1;
    }

    .panel.mobile-active {
        display: flex !important;
    }

    .panel-wide { grid-column: unset; }

    .panel-head {
        padding: 6px 10px;
    }

    .panel-head h2 {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .panel-body {
        padding: 8px 10px;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Movers: full width ───────────────────────────────────────── */

    .movers-split {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .mover-row {
        grid-template-columns: 60px 1fr 52px;
        font-size: 11px;
        padding: 5px 0;
    }

    .mover-sym { font-size: 10px; }

    /* ── News: allow title to wrap ────────────────────────────────── */

    .wire-row {
        flex-wrap: wrap;
        padding: 6px 0;
        gap: 2px;
    }

    .wire-tag { width: 48px; font-size: 7px; }
    .wire-time { width: 48px; font-size: 9px; padding-right: 4px; }
    .wire-src { width: 54px; font-size: 8px; padding-right: 4px; }

    .wire-title {
        white-space: normal;
        flex-basis: 100%;
        padding-left: 48px;
        font-size: 11px;
        line-height: 1.4;
        margin-top: 2px;
    }

    .news-tab {
        font-size: 8px;
        padding: 3px 6px;
        letter-spacing: .5px;
    }

    .tab-group { gap: 3px; flex-wrap: wrap; }

    /* ── Watchlist: compact ────────────────────────────────────────── */

    .wl-table-wrap { max-height: 45%; }

    .wl-row {
        grid-template-columns: 70px 1fr 70px 58px 24px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .wl-add-wrap { margin-right: 0; }

    #wl-input {
        width: 90px;
        font-size: 9px;
        padding: 3px 6px;
    }
    #wl-input:focus { width: 120px; }

    .stock-top { flex-direction: column; gap: 4px; }
    .stock-price-big { font-size: 22px; }
    .stock-change-big { font-size: 14px; }
    .stock-ohlv { flex-wrap: wrap; gap: 10px; font-size: 10px; }

    #chart-container { padding: 0 4px 4px; }

    .chart-btn { font-size: 9px; padding: 3px 6px; }

    /* ── Sectors: compact ──────────────────────────────────────────── */

    .sector-row { gap: 6px; padding: 6px 0; }
    .sector-name { font-size: 10px; min-width: 60px; }
    .sector-pct { font-size: 11px; min-width: 48px; }

    /* ── Global Markets: stack on mobile ──────────────────────────── */

    .gm-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .gm-heatmap-shell {
        padding: 12px;
        gap: 10px;
    }

    .gm-heatmap-head {
        flex-direction: column;
        align-items: stretch;
    }

    .gm-heatmap-title {
        font-size: 18px;
    }

    .gm-heatmap-legend {
        justify-content: flex-start;
    }

    .gm-heatmap {
        min-height: 240px;
    }

    .gm-market-badge-code {
        font-size: 8px;
    }

    .gm-market-badge-pct {
        font-size: 12px;
    }

    .gm-table { font-size: 10px; }
    .gm-table thead th { font-size: 7px; padding: 5px 8px; }
    .gm-table tbody td { padding: 6px 8px; font-size: 10px; }

    .mutual-view {
        padding: 8px 10px 10px;
        gap: 10px;
        overflow-y: auto;
    }

    .mutual-view::before {
        display: none;
    }

    .mf-sidebar {
        padding: 12px;
        gap: 10px;
        border-radius: 18px;
    }

    .mf-title {
        font-size: 18px;
    }

    .mf-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mf-selection-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mf-selection-bar .mf-status {
        grid-column: 1 / -1;
    }

    .mf-select-all,
    .mf-action-btn {
        justify-content: center;
        width: 100%;
    }

    .mf-detail {
        gap: 10px;
    }

    .mf-hero,
    .mf-control-block,
    .mf-chart-shell {
        border-radius: 18px;
    }

    .mf-holding-top,
    .mf-holding-foot,
    .mf-chart-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .mf-hero {
        padding: 14px;
    }

    .mf-control-block {
        padding: 11px;
    }

    .mf-hero-name {
        font-size: 16px;
    }

    .mf-hero-copy {
        flex-basis: 38%;
    }

    .mf-hero-controls {
        flex-basis: 58%;
    }

    .mf-hero-value {
        min-width: 0;
        align-items: flex-start;
    }

    .mf-stats {
        margin-right: -2px;
    }

    .mf-stat-card {
        flex-basis: 128px;
        min-height: 52px;
    }

    .mf-chart-shell {
        min-height: 340px;
        padding: 10px;
    }

    .mf-chart-note {
        text-align: left;
    }

    .mf-chart {
        min-height: 300px;
    }

    .fii-view {
        padding: 8px 10px 10px;
        overflow-y: auto;
    }

    .fii-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }

    .fii-title {
        font-size: 20px;
    }

    .fii-source {
        max-width: none;
        text-align: left;
    }

    .fii-cards {
        grid-template-columns: 1fr;
    }

    .fii-card {
        min-height: 126px;
        padding: 14px;
    }

    .fii-card-net {
        font-size: 26px;
    }

    .fii-chart {
        height: 280px;
    }

    .fii-chart-head,
    .fii-chart-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .fii-chart-insights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fii-series-toggles {
        gap: 8px 12px;
    }

    .fii-table th,
    .fii-table td {
        padding: 8px;
        font-size: 10px;
    }

    /* ── Mobile Bottom Nav ─────────────────────────────────────────── */

    .news-llm-stack {
        right: 10px;
        bottom: 62px;
    }

    .mobile-nav {
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        height: 52px;
        background: linear-gradient(180deg, #0f1520 0%, #080c14 100%);
        border-top: 1px solid var(--border);
        flex-shrink: 0;
        padding: 0 4px;
        z-index: 50;
    }

    .mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--text-dim);
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        transition: all .2s;
        min-width: 48px;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-btn.active {
        color: var(--amber);
    }

    .mobile-nav-btn.active .mobile-nav-icon {
        color: var(--amber);
        text-shadow: 0 0 8px rgba(255,140,0,.4);
    }

    .mobile-nav-icon {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-nav-label {
        font-family: var(--font-head);
        font-size: 8px;
        font-weight: 600;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    /* ── Options view: mobile ──────────────────────────────────────── */

    .oc-toolbar {
        flex-wrap: wrap;
        padding: 6px 8px;
        gap: 8px;
    }

    .oc-sym-group { flex-wrap: wrap; }
    .oc-sym-btn { font-size: 8px; padding: 3px 8px; }
    .oc-stock-input { width: 80px; font-size: 10px; }

    .oc-info-group {
        gap: 6px;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .oc-badge-val { font-size: 11px; }
    .oc-badge-label { font-size: 6px; }

    .oc-table { font-size: 9px; }
    .oc-table thead tr:first-child th { font-size: 8px; padding: 4px 4px; }
    .oc-table thead tr:nth-child(2) th { font-size: 7px; padding: 3px 4px; }
    .oc-table tbody td { padding: 2px 4px; font-size: 9px; }

    /* ── Search overlay on mobile ──────────────────────────────────── */

    .search-results {
        position: fixed;
        top: 42px;
        left: 0;
        right: 0;
        margin-top: 0;
        border-radius: 0;
        max-height: 60vh;
    }
}