/* ==========================================================================
   Operations UI: seat maps, layout designer, booking screen, trip cards
   ========================================================================== */

/* ---- Bus deck & seats (premium cabin look) ----------------------------- */
.decks { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.deck-box {
    --u: 44px; position: relative; padding: 14px 18px 22px;
    background: radial-gradient(130% 70% at 50% 0%, #FFFFFF 0%, #FFFBF1 52%, #FFF2D6 100%);
    border: 2px solid #F0D592; border-radius: 36px 36px 18px 18px;
    box-shadow: inset 0 -6px 0 #F6E4B8, inset 0 0 0 5px rgba(255, 255, 255, .7), 0 22px 44px -28px rgba(176, 118, 0, .55);
}
.deck-box.upper {
    background: radial-gradient(130% 70% at 50% 0%, #FFFFFF 0%, #F6F8FF 52%, #E9EEFF 100%);
    border-color: #C9D5F5; box-shadow: inset 0 -6px 0 #DCE4FA, inset 0 0 0 5px rgba(255, 255, 255, .7), 0 22px 44px -28px rgba(46, 74, 160, .45);
}
.deck-box::before { /* windscreen glow on the driver deck */
    content: ''; position: absolute; left: 22%; right: 22%; top: -2px; height: 5px; border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, transparent, #FFD166, transparent);
}
.deck-box.upper::before { background: linear-gradient(90deg, transparent, #9DB4F5, transparent); }
.deck-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; padding: 0 0 12px; border-bottom: 2px dashed #EBD6A4; }
.deck-box.upper .deck-head { border-bottom-color: #D3DCF5; }
.deck-head .dl { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bus); background: var(--ink); padding: 5px 11px; border-radius: 99px; }
.deck-box.upper .deck-head .dl { color: #C7D6FF; background: #1E2F6B; }
.deck-head .wheel {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; line-height: 1;
    color: #5B3B00; background: linear-gradient(145deg, #FFE08A, #F0A500); box-shadow: 0 6px 14px -6px rgba(176, 118, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.deck-head .door { font-size: 10px; font-weight: 800; color: #5F74B8; letter-spacing: .12em; display: inline-flex; align-items: center; gap: 4px; }
.seatgrid { display: grid; grid-template-columns: repeat(var(--cols), var(--u)); grid-auto-rows: var(--u); gap: 8px; position: relative; }

.seat-x {
    --acc: #0FA3A3; --acc-soft: #DDF5F3; --acc-line: #9EDBD6; --ink-seat: #0B5E5C;
    grid-column: var(--c); grid-row: var(--r) / span var(--s, 1); position: relative; padding: 6px 0 0; user-select: none;
    border-radius: 12px 12px 8px 8px; border: 1.5px solid var(--acc-line); color: var(--ink-seat);
    background: linear-gradient(180deg, #FFFFFF 0%, var(--acc-soft) 100%);
    font-size: 11px; font-weight: 800; line-height: 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
    box-shadow: 0 2px 0 var(--acc-line), 0 6px 12px -10px rgba(11, 21, 48, .35);
    transition: transform .14s, background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.seat-x::before { /* headrest */
    content: ''; position: absolute; left: 22%; right: 22%; top: 4px; height: 5px; border-radius: 4px; background: var(--acc); opacity: .85;
}
.seat-x::after { /* armrests */
    content: ''; position: absolute; left: -3px; right: -3px; bottom: 7px; height: 14px; border-left: 3px solid var(--acc-line); border-right: 3px solid var(--acc-line); border-radius: 4px; opacity: .9; pointer-events: none;
}
.seat-x .fare { font-size: 8.5px; font-weight: 800; color: var(--acc); letter-spacing: .01em; }
.seat-x.sleeper {
    --acc: #7C3AED; --acc-soft: #F1EAFF; --acc-line: #CDB7FA; --ink-seat: #4C1D95;
    border-radius: 12px; padding-top: 14px;
}
.seat-x.sleeper::before { /* pillow */
    top: 5px; height: 9px; left: 16%; right: 16%; border-radius: 6px; background: #fff; border: 1.5px solid var(--acc-line); opacity: 1;
}
.seat-x.sleeper::after { left: 10%; right: 10%; bottom: 6px; height: 4px; border: 0; border-radius: 3px; background: var(--acc-line); }
.seat-x.ladies { --acc: #E0458F; --acc-soft: #FFEAF4; --acc-line: #F7AFD1; --ink-seat: #A3195B; }
.seat-x .lady { position: absolute; top: 2px; right: 3px; font-size: 9px; color: var(--acc); }
.seat-x:hover:not(.taken):not(:disabled):not(.sel) { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 3px 0 var(--acc), 0 14px 22px -12px var(--acc); }
.seat-x:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 183, 3, .55); }

.seat-x.sel {
    --acc: #7A4A00; --acc-line: #E39A00; color: #3B2300;
    background: linear-gradient(160deg, #FFE08A 0%, #FFB703 48%, #FB8500 100%); border-color: #E08E00;
    box-shadow: 0 3px 0 #C57400, 0 0 0 3px rgba(255, 183, 3, .35), 0 16px 24px -12px rgba(251, 133, 0, .9);
    transform: translateY(-2px);
}
.seat-x.sel::before { background: #7A4A00; opacity: .55; }
.seat-x.sleeper.sel::before { background: #FFF6DC; border-color: #C57400; opacity: 1; }
.seat-x.sel .fare { color: #5B3500; }
.seat-x.sel .lady { color: #7A4A00; }
.seat-x > .tick { display: none; }
.seat-x.sel > .tick {
    position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ink); color: var(--bus); font-size: 11px; font-weight: 900; box-shadow: 0 0 0 2px #fff;
}

.seat-x.taken { cursor: pointer; }
.seat-x.st-confirmed { --acc: #94A3B8; --acc-line: #CBD5E1; color: #64748B; background: linear-gradient(180deg, #EEF2F7, #D9E0EA); border-color: #CBD5E1; box-shadow: none; }
.seat-x.st-confirmed.g-F { --acc: #EC4899; --acc-line: #F9A8D4; color: #BE185D; background: linear-gradient(180deg, #FDF2F8, #FBCFE8); border-color: #F9A8D4; }
.seat-x.st-hold { --acc: #F59E0B; --acc-line: #FCD34D; color: #B45309; background: #FFF8E6; border: 1.5px dashed #F59E0B; box-shadow: none; }
.seat-x.st-blocked { --acc: #A3ACBE; --acc-line: #D4D9E3; background: repeating-linear-gradient(45deg, #F1F3F7 0 5px, #E1E5EC 5px 10px); border-color: #CDD3DF; color: #8E97AD; box-shadow: none; }
.seat-x.st-confirmed:hover, .seat-x.st-hold:hover, .seat-x.st-blocked:hover { filter: brightness(.97); }
.seat-x.sleeper .who { bottom: 13px; }
.seat-x .who { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 8px; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }

.seat-legend { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: 12px; font-weight: 700; color: #4A5578; }
.seat-legend span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.seat-legend i { display: inline-block; width: 16px; height: 16px; border-radius: 5px 5px 4px 4px; border: 1.5px solid #9EDBD6; background: linear-gradient(180deg, #fff, #DDF5F3); }
.seat-legend .lg-sl { border-color: #CDB7FA; background: linear-gradient(180deg, #fff, #F1EAFF); }
.seat-legend .lg-sel { border-color: #E08E00; background: linear-gradient(160deg, #FFE08A, #FFB703 50%, #FB8500); }
.seat-legend .lg-bk { border-color: #CBD5E1; background: linear-gradient(180deg, #EEF2F7, #D9E0EA); }
.seat-legend .lg-f { border-color: #F9A8D4; background: linear-gradient(180deg, #FDF2F8, #FBCFE8); }
.seat-legend .lg-lad { border-color: #F7AFD1; background: linear-gradient(180deg, #fff, #FFEAF4); }
.seat-legend .lg-hold { background: #FFF8E6; border: 1.5px dashed #F59E0B; }
.seat-legend .lg-blk { background: repeating-linear-gradient(45deg, #F1F3F7 0 3px, #E1E5EC 3px 6px); border-color: #CDD3DF; }
@media (max-width: 575.98px) { .deck-box { --u: 36px; padding: 10px 10px 16px; border-radius: 28px 28px 14px 14px; } .seatgrid { gap: 6px; } .seat-x .fare { display: none; } }
@media (prefers-reduced-motion: reduce) { .seat-x { transition: none; } }

/* mini layout preview (cards) */
.mini-deck { --u: 13px; display: inline-block; padding: 8px; border-radius: 12px; background: #F6F7FB; border: 1px solid var(--line-2); }
.mini-deck .seatgrid { gap: 3px; }
.mini-deck .seat-x { padding: 0; border-radius: 3px; border-width: 1px; font-size: 0; cursor: default; box-shadow: none; background: #EFFAF9; border-color: #9EDBD6; }
.mini-deck .seat-x::before, .mini-deck .seat-x::after { display: none; }
.mini-deck .seat-x.sleeper { background: #F1EAFF; border-color: #B79AF5; }
.mini-deck .seat-x.ladies { background: #FFEAF4; border-color: #F7AFD1; }

/* ---- Designer --------------------------------------------------------------- */
.designer .cell { grid-column: var(--c); grid-row: var(--r); border: 1.5px dashed #DCE2EE; border-radius: 9px; background: transparent; cursor: crosshair; padding: 0; }
.designer .cell:hover { border-color: var(--bus); background: var(--bus-50); }
.designer .seat-x { z-index: 1; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tool { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 13.5px; color: #34405E; cursor: pointer; transition: all .15s; }
.tool i { font-size: 18px; }
.tool:hover { border-color: #C9D1E0; }
.tool.active { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 8px 16px -10px rgba(11, 21, 48, .8); }
.tool.active i { color: var(--bus); }
.preset { display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; transition: all .15s; }
.preset:hover { border-color: var(--bus); background: var(--bus-50); }
.preset b { display: block; color: var(--ink); font-size: 14px; }
.preset span { font-size: 12px; color: var(--muted); }
.stat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: var(--line-2); font-weight: 800; font-size: 13px; color: var(--ink); }

/* ---- Bus cards ---------------------------------------------------------------- */
.bus-card { position: relative; height: 100%; border-radius: 22px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.bus-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(11, 21, 48, .45); }
.bus-card .bc-top { padding: 16px 18px 4px; background: linear-gradient(180deg, #F6F8FC, #fff); position: relative; }
.bus-card .bc-art { height: 92px; display: flex; align-items: flex-end; justify-content: center; margin-top: 4px; }
.bus-card .bc-art .bus-svg { width: 210px; }
.bus-card .bc-body { padding: 12px 18px 16px; }
.plate { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; font-size: 14px; letter-spacing: .08em; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 3px 10px 3px 4px; box-shadow: 0 2px 0 var(--ink); }
.plate::before { content: 'IND'; font-size: 8px; letter-spacing: .04em; background: #1A4FA3; color: #fff; border-radius: 4px; padding: 3px 3px; line-height: 1; }
.amen { display: flex; flex-wrap: wrap; gap: 6px; }
.amen span { font-size: 11.5px; font-weight: 700; color: #4A5470; background: var(--line-2); border-radius: 8px; padding: 3px 8px; display: inline-flex; gap: 4px; align-items: center; }
.add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 260px; border-radius: 22px; border: 2px dashed #D3DAE7; color: var(--muted); font-weight: 700; transition: all .2s; text-align: center; padding: 20px; }
.add-card:hover { border-color: var(--bus); background: var(--bus-50); color: var(--ink); }
.add-card .ic { width: 56px; height: 56px; border-radius: 18px; background: var(--bus); color: var(--ink); display: grid; place-items: center; font-size: 28px; }

/* ---- Route strip ---------------------------------------------------------------- */
.route-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.route-strip .rs-stop { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.route-strip .rs-stop::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink-3); background: #fff; }
.route-strip .rs-stop:first-child::before, .route-strip .rs-stop:last-child::before { background: var(--bus); border-color: var(--bus-700); }
.route-strip .rs-stop small { color: var(--muted); font-weight: 600; font-size: 11px; }
.route-strip .rs-line { width: 26px; border-top: 2px dashed #C9D0DE; margin: 0 6px; }

/* stop editor rows */
.stop-row { display: grid; grid-template-columns: 34px minmax(0, 1.4fr) 110px minmax(0, 1.6fr) 96px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.stop-row .sn { width: 30px; height: 30px; border-radius: 10px; background: var(--ink); color: var(--bus); display: grid; place-items: center; font-weight: 800; font-family: var(--display); }
.stop-row:first-child .sn, .stop-row:last-child .sn { background: var(--bus); color: var(--ink); }
.stop-row .acts { display: flex; gap: 4px; justify-content: flex-end; }
@media (max-width: 767.98px) {
    .stop-row { grid-template-columns: 34px 1fr 96px; }
    .stop-row .sp { grid-column: 2 / 4; }
    .stop-row .st { grid-column: 2; }
}

/* fare matrix */
.fare-table td, .fare-table th { padding: 8px 10px; }
.fare-table input { width: 92px; height: 38px; font-size: 14px; padding: 4px 8px; border-radius: 10px; text-align: right; }
.fare-table .pair { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* ---- Booking screen ----------------------------------------------------------- */
.bk-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.bk-toolbar .form-control, .bk-toolbar .form-select { height: 46px; padding-top: 0; padding-bottom: 0; }
.date-chips { display: flex; gap: 6px; }
.date-chips button { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 0 12px; height: 46px; font-weight: 700; font-size: 13px; color: #3B4663; }
.date-chips button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.trip-rail { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 14px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.trip-card { flex: 0 0 210px; scroll-snap-align: start; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 18px; padding: 12px 14px; transition: all .15s; position: relative; }
.trip-card:hover { border-color: #C9D1E0; transform: translateY(-2px); }
.trip-card .tt { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; color: var(--ink); }
.trip-card .tr { font-size: 12.5px; font-weight: 700; color: #3B4663; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-card .tb { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.trip-card .fill { height: 6px; border-radius: 6px; background: var(--line-2); margin-top: 10px; overflow: hidden; }
.trip-card .fill span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3DD186, var(--ok)); }
.trip-card .fill.hot span { background: linear-gradient(90deg, var(--bus), var(--sunset)); }
.trip-card .left { font-size: 11.5px; font-weight: 800; margin-top: 5px; color: var(--ok); }
.trip-card.active { background: var(--ink); border-color: var(--ink); box-shadow: 0 16px 30px -18px rgba(11, 21, 48, .8); }
.trip-card.active .tt { color: var(--bus); }
.trip-card.active .tr { color: #fff; }
.trip-card.active .tb { color: rgba(255, 255, 255, .6); }
.trip-card.active .fill { background: rgba(255, 255, 255, .15); }
.trip-card.departed { opacity: .55; }
.trip-card .badge-dep { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--bad-50); color: var(--bad); border-radius: 6px; padding: 2px 6px; }
.seg-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.seg-bar .form-select { height: 42px; padding-top: 0; padding-bottom: 0; min-width: 150px; }
.seg-bar .fare-tag { margin-left: auto; text-align: right; }
.seg-bar .fare-tag b { display: block; font-family: var(--display); font-size: 22px; line-height: 1; color: var(--ink); }
.seg-bar .fare-tag span { font-size: 11px; color: var(--muted); font-weight: 700; }
.pax-panel { position: sticky; top: 88px; }
.pax-empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.pax-empty .ic { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 20px; background: var(--bus-50); color: var(--bus-700); display: grid; place-items: center; font-size: 30px; }
.pax-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 58px 74px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); animation: riseIn .25s ease; }
.pax-row .sno { height: 38px; border-radius: 10px; background: var(--ink); color: var(--bus); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.pax-row .sno.lad { background: #D63384; color: #fff; }
.pax-row .form-control, .pax-row .form-select { height: 38px; padding: 4px 9px; font-size: 14px; border-radius: 10px; }
.pax-row .fare-in { grid-column: 2 / 5; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.pax-row .fare-in input { width: 96px; height: 32px; font-size: 13px; text-align: right; }
.pax-row .fare-in .rm { margin-left: auto; border: 0; background: transparent; color: var(--bad); font-weight: 700; font-size: 12px; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-chips input { position: absolute; opacity: 0; pointer-events: none; }
.pay-chips label { padding: 8px 14px; border-radius: 11px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .15s; }
.pay-chips input:checked + label { background: var(--ink); color: var(--bus); border-color: var(--ink); }
.pay-chips input:focus-visible + label { box-shadow: 0 0 0 3px rgba(255, 183, 3, .4); }
.total-box { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px; border-top: 2px dashed var(--line); margin-top: 6px; }
.total-box .amt { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--ink); line-height: 1; }
.kbd-hint { font-size: 11.5px; color: var(--muted); }
.kbd-hint kbd { background: var(--line-2); color: var(--ink); border: 1px solid var(--line); font-size: 10.5px; padding: 1px 5px; border-radius: 5px; font-family: var(--font); font-weight: 700; }
.seat-pop { position: absolute; z-index: 30; width: 250px; background: var(--ink); color: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 20px 40px -16px rgba(11, 21, 48, .7); font-size: 13px; animation: riseIn .18s ease; }
.seat-pop .pn { font-family: ui-monospace, Menlo, monospace; color: var(--bus); font-weight: 800; letter-spacing: .08em; }
.seat-pop .x { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: rgba(255, 255, 255, .6); font-size: 18px; }
.seat-pop .btn { padding: .35rem .7rem; font-size: 12.5px; }
.done-ticket { text-align: center; }
.done-ticket .ok { width: 76px; height: 76px; border-radius: 24px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 38px; background: var(--ok-50); color: var(--ok); }
.done-ticket .pnr-big { font-family: ui-monospace, Menlo, monospace; font-size: 30px; font-weight: 800; letter-spacing: .14em; color: var(--ink); background: var(--bus-50); border: 2px dashed var(--bus); border-radius: 14px; padding: 6px 16px; display: inline-block; }

/* ---- Booking detail / tickets ------------------------------------------------ */
.pnr-chip { font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .1em; color: var(--ink); background: var(--bus-50); border: 1.5px dashed var(--bus-700); border-radius: 8px; padding: 2px 8px; font-size: 12.5px; }
.journey-line { display: flex; align-items: center; gap: 14px; }
.journey-line .jc b { display: block; font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.journey-line .jc span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.journey-line .jl { flex: 1; position: relative; border-top: 2px dashed #C9D0DE; }
.journey-line .jl i { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); background: #fff; padding: 0 6px; color: var(--sunset); font-size: 22px; }

/* trips list day pills */
.day-pills { display: inline-flex; gap: 3px; }
.day-pills span { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: var(--line-2); color: #A3ABC0; }
.day-pills span.on { background: var(--ink); color: var(--bus); }
.day-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.day-pick input { position: absolute; opacity: 0; pointer-events: none; }
.day-pick label { width: 50px; text-align: center; padding: 9px 0; border-radius: 11px; border: 1.5px solid var(--line); font-weight: 800; font-size: 13px; cursor: pointer; background: #fff; }
.day-pick input:checked + label { background: var(--ink); color: var(--bus); border-color: var(--ink); }

/* report tabs */
.tabs-x { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tabs-x a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 13px; font-weight: 700; font-size: 14px; color: #3B4663; background: #fff; border: 1px solid var(--line); white-space: nowrap; }
.tabs-x a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabs-x a.active i { color: var(--bus); }
.sum-row td { font-weight: 800; background: #F8F9FC; border-top: 2px solid var(--line) !important; }
.money-pos { color: var(--ok); font-weight: 800; }
.money-neg { color: var(--bad); font-weight: 800; }
.hbar { height: 8px; border-radius: 8px; background: var(--line-2); overflow: hidden; min-width: 80px; }
.hbar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--bus), var(--sunset)); }