/* Holographic visual system. All decorative layers are CSS/SVG and non-interactive. */
:root {
    --bg: #09090f;
    --panel: #12121c;
    --panel2: #1a1928;
    --line: #ffffff12;
    --text: #f4f2ff;
    --muted: #a09bb4;
    --radius: 22px;
    --holo-violet: #9871ff;
    --holo-ice: #80d9f5;
    --accent-rgb: 185,237,201;
}
body {
    background: radial-gradient(ellipse at 90% 0, #49338014, transparent 45%), var(--bg);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { transition: border-color .18s, background-color .18s, box-shadow .18s; }
button:active:not(:disabled) { transform: translateY(1px); }
.sidebar { background: #0b0b13; border-color: #ffffff0c; }
.space-brand { color: var(--text); font-weight: 600; font-size: 18px; }
.space-topbar { border-color: #ffffff10; }
.space-title small { color: var(--muted); letter-spacing: 1.7px; }
.space-title strong { letter-spacing: -.5px; }
.space-avatar {
    background: linear-gradient(140deg, #ffffff14, transparent), var(--accent-soft);
    border: 1px solid var(--accent-line);
    box-shadow: inset 0 1px 0 #ffffff1c, 0 0 24px var(--accent-soft);
}
.currency-trigger, .header-actions .btn {
    background: linear-gradient(150deg, #ffffff0b, #ffffff02);
    border-color: #ffffff19;
    box-shadow: inset 0 1px 0 #ffffff07;
}
.pagehead h1 { font-weight: 620; letter-spacing: -1px; }
.pagehead p { color: #9690aa; }
.card, .product, .stat, .stock-row, .compact-board .board-column {
    background: linear-gradient(145deg, #ffffff05, transparent 55%), var(--panel);
    border: 1px solid #ffffff13;
    box-shadow: inset 0 1px 0 #ffffff04, 0 10px 35px #00000012;
}
.card { border-radius: 22px; }
.card-head h2 { font-weight: 570; letter-spacing: -.2px; }
.btn, .segmented, .workspace {
    background: linear-gradient(150deg, #ffffff09, #ffffff02), var(--panel);
    border-color: #ffffff17;
}
.btn { border-radius: 11px; }
.btn:hover:not(:disabled), .currency-trigger:hover { border-color: var(--accent-line); background-color: var(--panel2); }
.btn.primary {
    background: linear-gradient(130deg, #ffffff25, transparent 65%), var(--mint);
    color: #171220;
    box-shadow: 0 4px 22px var(--accent-soft), inset 0 1px 0 #ffffff50;
    border-color: #ffffff35;
}
.btn.primary:hover { background: linear-gradient(130deg, #ffffff35, transparent 65%), var(--mint); box-shadow: 0 5px 30px var(--accent-soft); }
input, select, textarea {
    background: #0b0b14;
    border-color: #ffffff18;
    border-radius: 11px;
    box-shadow: inset 0 1px 3px #0003;
}
input::placeholder, textarea::placeholder { color: #777187; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent-line); }
input[type=color] { box-shadow: none; }
.nav button { border: 1px solid transparent; }
.nav button.active {
    border-color: var(--accent-line);
    background: linear-gradient(120deg, var(--accent-soft), #ffffff03);
    box-shadow: inset 0 1px 0 #ffffff12, 0 0 20px var(--accent-soft);
}
.nav button.active .icon { filter: drop-shadow(0 0 5px var(--accent-line)); }
.stat { border-radius: 18px; padding: 21px; }
.stat.main-stat {
    isolation: isolate;
    background: radial-gradient(ellipse at 90% 100%, var(--accent-soft), transparent 75%), #171320;
    color: var(--text); border-color: var(--accent-line);
    box-shadow: inset 0 1px 0 #ffffff15, 0 0 30px var(--accent-soft);
}
.stat.main-stat .stat-label, .stat.main-stat .stat-foot, .stat.main-stat .mini-icon { color: #bcb4cf; }
.stat-value { position: relative; z-index: 1; font-weight: 600; letter-spacing: -1px; }
.main-stat .stat-value { color: var(--mint); text-shadow: 0 0 28px var(--accent-soft); }
.stat-label, .stat-foot { position: relative; z-index: 1; }
.stat-foot { line-height: 1.5; }
.holo-mesh { position: absolute; right: -60px; bottom: -65px; width: 95%; height: 170px; z-index: -1; pointer-events: none; }
.holo-mesh g { fill: none; stroke: var(--mint); stroke-width: .7; animation: hologram-breathe 8s ease-in-out infinite alternate; }
.stat .mini-icon { width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: #ffffff08; }
.stat .mini-icon .icon { width: 17px; height: 17px; }
.holo-chart { padding: 10px 0 0; }
.holo-chart svg { width: 100%; height: 180px; display: block; overflow: visible; }
.chart-grid path { fill: none; stroke: #ffffff0b; stroke-width: 1; stroke-dasharray: 3 7; }
.chart-area { fill: var(--accent-soft); opacity: .65; }
.chart-line-glow { fill: none; stroke: var(--mint); stroke-width: 10; opacity: .15; filter: blur(5px); }
.chart-line { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: trace-reveal .7s ease-out both; }
.chart-point { fill: var(--mint); stroke: var(--panel); stroke-width: 2; }
.chart-dates { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; margin-top: 10px; gap: 12px; }
.chart { background: repeating-linear-gradient(to top, transparent 0, transparent 45px, #ffffff08 46px, #ffffff08 47px); }
.bar { background: linear-gradient(to top, var(--accent-soft), var(--mint)); box-shadow: 0 -3px 14px var(--accent-soft); border-top: 1px solid var(--mint); }
.donut { box-shadow: 0 0 35px var(--accent-soft), inset 0 0 15px #0009; border: 1px solid #ffffff18; }
.donut:after { inset: 17px; background: var(--panel); box-shadow: inset 0 0 25px var(--accent-soft); border: 1px solid #ffffff16; }
.donut-center strong { color: var(--text); font-weight: 600; }
.legend-row .dot { box-shadow: 0 0 8px currentColor; }
.rank-icon, .product-emoji { background: linear-gradient(140deg, #ffffff0b, transparent), var(--accent-soft); border: 1px solid #ffffff0a; }
.track { background: #ffffff0a; height: 4px; }
.track i { background: linear-gradient(90deg, var(--accent-line), var(--mint)); box-shadow: 0 0 10px var(--accent-line); }
.sidebar-note { background: linear-gradient(140deg, #211b32, #12111d); border-color: #ffffff12; }
.avatar { background: linear-gradient(140deg, var(--accent-soft), #262035); color: var(--mint); }
.notice:not(.warn), .pill:not(.warn):not(.bad) { background: var(--accent-soft); border: 1px solid var(--accent-line); }
.recent-row, .category-row, .member-row, th, td { border-color: #ffffff0b; }
.stock-row-actions .btn, .shop-row-actions .btn { background: #ffffff03; border-color: #ffffff11; }
.stock-row-actions .btn:hover, .shop-row-actions .btn:hover { background: var(--accent-soft); }
.shop-item-name, .stock-row-name { letter-spacing: -.12px; }
.shop-item-body > small, .stock-row-body > small { color: #a29bb3; }
.compact-shopcard { background: transparent; border-color: #ffffff0d; box-shadow: none; }
.compact-board .column-title span { border: 1px solid #ffffff14; border-radius: 7px; padding: 3px 7px; min-width: 24px; text-align: center; }
.scan-card { background: radial-gradient(ellipse at 50% 0, #49377825, transparent 70%), var(--panel); }
.scan-card .dropzone { border-color: var(--accent-line); background: radial-gradient(ellipse at 50% 25%, var(--accent-soft), transparent 75%), #0d0c16; }
.scan-icon { position: relative; background: linear-gradient(140deg, var(--accent-soft), #1d172b); border: 1px solid var(--accent-line); box-shadow: 0 0 40px var(--accent-soft), inset 0 1px 0 #ffffff18; }
.scan-icon::before, .scan-icon::after {
    content: ''; position: absolute; pointer-events: none; border: 1px solid var(--accent-line);
    inset: -9px; border-radius: 26px; opacity: .45;
}
.scan-icon::after { inset: -17px; border-radius: 31px; opacity: .2; animation: halo-pulse 5s ease-in-out infinite; }
.scan-card .dropzone h2 { margin-top: 32px; letter-spacing: -.5px; }
dialog { background: #13121e; border-color: #ffffff20; box-shadow: 0 40px 100px #000b, 0 0 70px #7545c011; }
dialog::backdrop { background: #030208bd; backdrop-filter: blur(10px); }
.modal-head { background: #14121f; border-color: #ffffff10; }
.editor-items tr { background: #0c0b14; border-color: #ffffff13; }
.space-choice, .currency-choice { background: #0c0b14; border-color: #ffffff14; }
.extra-fields { border-color: #ffffff13; }
.auth-screen { background: radial-gradient(ellipse at 50% 25%, #6a3bab25, transparent 65%), var(--bg); }
.auth-card { background: linear-gradient(145deg, #21192e, #111019 65%); border-color: #b298df25; box-shadow: 0 20px 100px #0008; }
.auth-card h1 { color: #eee6ff; }
@keyframes panel-appear { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes hologram-breathe { from { opacity: .55; transform: translateY(2px); } to { opacity: .9; transform: translateY(-5px); } }
@keyframes halo-pulse { 0%,100% { opacity: .15; scale: 1; } 50% { opacity: .4; scale: 1.04; } }
@keyframes trace-reveal { from { opacity: .15; } to { opacity: 1; } }
@media (max-width: 760px) {
    .sidebar {
        background: #10101bea; border-color: #ffffff17;
        backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 -12px 35px #0003;
    }
    .nav button.active { background: linear-gradient(145deg, var(--accent-soft), #ffffff03); border-color: var(--accent-line); }
    .stat { padding: 16px; }
    .holo-mesh { width: 150%; right: -70px; bottom: -75px; opacity: .75; }
    .holo-chart svg { height: 170px; }
    .scan-card .dropzone { padding-top: 40px; padding-bottom: 28px; }
    .pagehead h1 { font-size: 27px; }
    .pagehead-add h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.holo-mesh { right: 0; bottom: 0; width: 100%; height: 130px; }
@media(max-width:760px) { .holo-mesh { right: 0; bottom: 0; width: 100%; height: 110px; } }

.overview-stats { grid-template-columns: minmax(0,1.6fr) repeat(3,minmax(0,1fr)); }
.overview-stats .main-stat { min-height: 190px; }
.overview-stats .main-stat .stat-value { font-size: 36px; margin-top: 28px; }
.overview-stats .main-stat .holo-mesh { width: 100%; height: 145px; right: 0; bottom: 0; opacity: .65; }
.holo-mesh g { stroke: #b697ff; }
.overview-stats .main-stat {
    background: radial-gradient(ellipse at 85% 90%, #7553c22b, transparent 65%),
                radial-gradient(ellipse at 10% 0, var(--accent-soft), transparent 75%), #14111f;
}
@media(max-width:1100px) and (min-width:761px) {
    .overview-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .overview-stats .main-stat { grid-column: 1/-1; }
}
@media(max-width:760px) {
    .overview-stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
    .overview-stats .main-stat { grid-column: 1/-1; min-height: 175px; padding: 20px; }
    .overview-stats .main-stat .stat-value { margin: 22px 0 14px; }
    .overview-stats .main-stat .stat-number { font-size: 36px; letter-spacing: -1.4px; }
    .overview-stats .main-stat .stat-currency { display: inline-block; font-size: 12px; margin-top: 8px; }
    .overview-stats .stat:not(.main-stat) { padding: 12px 10px; min-height: 132px; }
    .overview-stats .stat:not(.main-stat) .stat-label { font-size: 10px; padding-right: 0; }
    .overview-stats .stat:not(.main-stat) .mini-icon { display: none; }
    .overview-stats .stat:not(.main-stat) .stat-number { font-size: clamp(13px,3.8vw,18px); letter-spacing: -.6px; }
    .overview-stats .stat:not(.main-stat) .stat-value { font-size: 24px; margin: 15px 0 10px; }
    .overview-stats .stat:not(.main-stat) .stat-foot { font-size: 9px; }
}

/* Intentional alignment for the compact metrics; secondary copy was visual noise. */
.overview-stats .stat:not(.main-stat) {
    display: flex; flex-direction: column; justify-content: flex-start; min-height: 116px;
    padding: 16px; position: relative; isolation: isolate;
}
.overview-stats .stat:not(.main-stat) .stat-label { min-height: 30px; line-height: 1.4; }
.overview-stats .stat:not(.main-stat) .stat-value { margin: 14px 0 0; line-height: 1.3; }
.overview-stats .stat:not(.main-stat) .stat-foot { display: none; }
.overview-stats .stat-currency { line-height: 1.4; }
.metric-signal {
    position: absolute; width: 110px; height: 60px; bottom: 0; right: 0;
    pointer-events: none; opacity: .23; z-index: -1;
}
.metric-signal g { fill: none; stroke: var(--mint); stroke-width: .8; animation: signal-drift 7s ease-in-out infinite alternate; }
.stat:nth-child(3) .metric-signal g { animation-delay: -2s; }
.stat:nth-child(4) .metric-signal g { animation-delay: -4s; }
.period-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 44px; padding: 11px 14px; border-radius: 13px; color: var(--text);
    border: 1px solid #ffffff1b; background: linear-gradient(140deg,#ffffff09,#ffffff02);
    font-size: 12px; cursor: pointer; text-align: left; width: 100%;
}
.period-trigger .icon { width: 13px; height: 13px; rotate: 90deg; }
.period-trigger:hover { border-color: var(--accent-line); }
.period-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.period-option {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 52px; padding: 14px; border: 1px solid #ffffff17;
    background: #0c0b14; border-radius: 12px; text-align: left; font-size: 13px;
}
.period-option.selected { border-color: var(--accent-line); background: var(--accent-soft); color: var(--mint); }
.period-option .icon { width: 16px; height: 16px; }
.scan-card .dropzone { position: relative; isolation: isolate; overflow: hidden; }
.scan-card .dropzone > .holo-mesh { height: 160px; width: 100%; opacity: .15; bottom: 0; z-index: -1; }
.scan-card .dropzone > :not(.holo-mesh) { position: relative; }
.donut::before {
    content: ''; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
    border: 1px dashed var(--accent-line); animation: orbit-turn 65s linear infinite;
}
.chart-point { animation: point-glint 5s ease-in-out infinite; }
.chart-point:nth-child(2n) { animation-delay: -2.5s; }
.chart-line-glow { animation: line-glimmer 7s ease-in-out infinite alternate; }
.scan-icon::before { animation: halo-pulse 7s ease-in-out infinite reverse; }
@keyframes signal-drift { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: translateY(-2px); } }
@keyframes orbit-turn { to { rotate: 360deg; } }
@keyframes point-glint { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes line-glimmer { from { opacity: .08; } to { opacity: .23; } }
@media(max-width:760px) {
    .overview-stats .stat:not(.main-stat) { min-height: 112px; padding: 14px 10px; }
    .overview-stats .stat:not(.main-stat) .stat-label { font-size: 11px; min-height: 30px; }
    .overview-stats .stat:not(.main-stat) .stat-value { margin-top: 10px; }
    .overview-stats .stat:not(.main-stat) .stat-number { font-size: clamp(14px,4vw,19px); }
    .metric-signal { width: 85px; height: 45px; opacity: .2; }
    #dashboard-grid { margin-top: 22px; }
}
@media(prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Fast anchored choices, without a dialog or dimmed page. */
.quick-dropdown {
    position: fixed; z-index: 80; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; background: #181620; border: 1px solid #ffffff24; border-radius: 14px;
    box-shadow: 0 18px 45px #0009, inset 0 1px 0 #ffffff08;
}
.quick-dropdown .period-options,
.quick-dropdown .currency-choices,
.quick-dropdown .choice-list { display: flex; flex-direction: column; gap: 2px; }
.quick-dropdown .period-option,
.quick-dropdown .currency-choice,
.quick-dropdown .space-choice {
    width: 100%; min-height: 42px; border: 1px solid transparent; border-radius: 9px;
    padding: 10px 11px; background: none; box-shadow: none; gap: 9px; font-size: 12px;
}
.quick-dropdown .selected { background: var(--accent-soft); border-color: var(--accent-line); color: var(--mint); }
.quick-dropdown button:hover, .quick-dropdown button:focus-visible { background: #ffffff0b; outline: none; border-color: var(--accent-line); }
.quick-dropdown .space-choice strong { font-size: 12px; line-height: 1.5; font-weight: 500; }
.quick-dropdown .space-symbol { flex: 0 0 25px; width: 25px; height: 25px; background: none; }
.quick-dropdown .space-symbol .icon { width: 20px; height: 20px; }
.quick-dropdown .currency-choice strong { width: 38px; font-size: 12px; }
.quick-dropdown .currency-choice span { font-size: 11px; }
.quick-dropdown .icon { width: 15px; height: 15px; }
.dropdown-footer { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff12; }
.dropdown-footer .btn { width: 100%; min-height: 40px; background: none; border: 0; box-shadow: none; color: var(--mint); }
.startup-mark, .auth-card .startup-mark {
    background: linear-gradient(145deg,#362c49,#17131f);
    color: #d8c5ff; border: 1px solid #b493e75c; border-radius: 16px;
    box-shadow: inset 0 1px 0 #ffffff18, 0 0 35px #9260d51f;
}
.startup-mark .icon { width: 25px; height: 25px; }
.auth-screen .loading { border-color: #393044; border-top-color: #c0a1f1; }
.quick-dropdown { overflow-x: hidden; }

/* Navigation stays mounted. Content never fades out during route/data updates. */
.nav button.active .icon { filter: none; }
.nav button { transition: background-color .15s, border-color .15s, color .15s; }
.chart-line { animation: none; }
/* Category sectors must keep their actual colors, without workspace-tinted overlays. */
.donut { box-shadow: none; border: none; }
.donut::after { background: var(--panel); box-shadow: none; border: 1px solid #ffffff10; }
.donut::before { border-color: #ffffff24; }

.pagehead {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    align-items: center; gap: 9px 16px;
}
.pagehead > :first-child { grid-column: 1; grid-row: 1; min-width: 0; }
.pagehead h1 { margin: 0; }
.pagehead > .controls { grid-column: 2; grid-row: 1; }
.pagehead > .page-description { grid-column: 1/-1; grid-row: 2; margin: 0; max-width: none; }
.stock-preview-quantity {
    display: flex; flex-direction: column; align-items: flex-end; text-align: right;
    flex: 0 0 auto; min-width: 48px; font-variant-numeric: tabular-nums;
}
.stock-preview-quantity > small { width: 100%; text-align: right; }
@media(max-width:760px) {
    .pagehead { gap: 9px 12px; }
    .pagehead .controls { flex: none; max-width: 150px; }
    .pagehead-add .controls { max-width: 44px; margin-top: 0; }
    .expense-toolbar { grid-template-columns: minmax(0,1fr); }
    .expense-toolbar > .btn { justify-self: start; }
}

/* Glow lives outside the category ring, preserving each sector's original color. */
.donut {
    box-shadow: 0 0 20px color-mix(in srgb,var(--mint) 20%,transparent),
                0 0 45px color-mix(in srgb,var(--mint) 10%,transparent);
}
.donut::before {
    inset: -10px;
    border: 1.5px dashed color-mix(in srgb,var(--mint) 65%,transparent);
    outline: 1px solid #ffffff16;
    outline-offset: 4px;
    box-shadow: 0 0 12px color-mix(in srgb,var(--mint) 12%,transparent);
}
.donut::after { box-shadow: none; }

.batch-product {
    grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
    min-width: 0; border: 1px solid var(--line); border-radius: 14px;
    padding: 16px; margin: 0; gap: 14px;
}
.batch-product legend { color: var(--muted); font-size: 12px; padding: 0 7px; }
.batch-product > label.full, .batch-product > .extra-fields { grid-column: 1/-1; }
.batch-product > .btn { justify-self: start; }
@media(max-width:760px) {
    .batch-product { grid-template-columns: minmax(0,1fr); padding: 14px; }
}
.batch-product:only-of-type > [data-action=remove-batch-product] { display: none; }

.category-row > .btn { flex-shrink: 0; }


.catalog-list { border: 1px solid var(--line); border-radius: 20px; padding: 4px 16px; background: var(--panel); }
.catalog-row { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); min-width:0; }
.catalog-row:last-child { border-bottom:0; }
.catalog-row .product-emoji { flex:0 0 38px; width:38px; height:38px; font-size:22px; }
.catalog-info { flex:1; min-width:0; overflow-wrap:anywhere; }
.catalog-info strong { display:block; font-size:13px; }
.catalog-info small { display:block; color:var(--muted); margin-top:5px; font-size:11px; }
.catalog-actions,.budget-actions,.shopping-tools { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.shopping-tools { justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
.budget-plan { display:flex; flex-wrap:wrap; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:14px 0; }
.budget-plan>div:first-child { flex:1; min-width:120px; }
.budget-plan strong { font-size:13px; }
.budget-plan small { display:block; color:var(--muted); margin-top:5px; }
.budget-plan>span { font-size:13px; white-space:nowrap; }
.overall-budget { font-weight:600; }
#budget-allocation { margin-top:16px; line-height:1.7; overflow-wrap:anywhere; }

.budget-row { align-items:flex-start; gap:10px; }
.budget-icon { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; font-size:16px; line-height:1; }
.budget-row .rank-top { min-height:24px; align-items:center; margin-bottom:6px; }

.catalog-add { transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s; }
.catalog-add.added,.catalog-add.added:disabled { background:#99e6b3; border-color:#99e6b3; color:#123723; opacity:1; box-shadow:0 0 12px #99e6b322; }
.catalog-add.added .icon { animation:catalog-check-in .25s ease-out; }
@keyframes catalog-check-in { from { opacity:0; transform:scale(.65); } to { opacity:1; transform:scale(1); } }
.toast.compact { width:max-content; max-width:calc(100vw - 32px); min-width:0; padding:8px 13px; font-size:12px; line-height:1.35; border-radius:12px; }
.expense-add { min-height:34px; padding:8px 12px; font-size:12px; box-shadow:none; }
.expense-count { display:inline-grid; place-items:center; min-width:24px; height:22px; padding:0 7px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:11px; font-weight:500; }
@media(prefers-reduced-motion:reduce) { .catalog-add { transition:none; } .catalog-add.added .icon { animation:none; } }

.color-field { display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; }
.color-field label { width:fit-content; margin:0; }
.color-field input[type=color] { flex:none; width:58px; max-width:58px; cursor:pointer; margin:0; }
.avatar { position:relative; overflow:hidden; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
/* Keep each member and their controls on one row, including narrow screens. */
.member-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; column-gap:8px; }
.member-row .avatar { width:32px; height:32px; grid-column:1; grid-row:1; }
.member-name { display:block; grid-column:2; grid-row:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.member-name small { display:block; margin-top:4px; }
.member-actions { display:flex; grid-column:3; grid-row:1; align-items:center; gap:4px; margin-left:0; max-width:100%; }
.member-actions select { width:100px; min-width:0; max-width:100px; min-height:32px; padding:7px 20px 7px 8px; font-size:11px; }
.member-actions .btn { width:32px; min-width:32px; min-height:32px; padding:7px; }
@media(max-width:380px) { .member-actions select { width:92px; max-width:92px; } }

.compact-shopcard .shop-row-actions { gap:6px; }
.compact-shopcard .shop-row-actions .btn { width:38px; min-width:38px; height:38px; min-height:38px; flex:0 0 38px; padding:8px; }
.compact-shopcard .shop-row-actions .icon { width:21px; height:21px; }
.catalog-actions .btn { width:38px; min-width:38px; height:38px; min-height:38px; padding:8px; }
.catalog-actions .icon { width:21px; height:21px; }

.action-menu-trigger .icon { transform:rotate(90deg); }
.receipt-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.receipt-actions .action-menu-trigger { width:34px; min-width:34px; padding:7px; }
.action-options { display:flex; flex-direction:column; gap:3px; }
.action-options .btn { width:100%; justify-content:flex-start; min-height:40px; box-shadow:none; }
.dropdown-question { margin:8px; font-size:12px; line-height:1.5; }
.bulk-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; }
.bulk-toolbar:empty { display:none; }
.bulk-count { font-size:12px; color:var(--muted); margin-right:auto; }
.bulk-check { width:20px; height:20px; flex:0 0 20px; accent-color:var(--mint); cursor:pointer; }

.expense-table td { border-bottom-color:#ffffff30; }
@media(max-width:760px) { .expense-table tr { border-bottom:1px solid #ffffff30; } .expense-action { grid-column:1/-1; } .receipt-actions { width:100%; } .receipt-actions>.btn:first-child { flex:1; } .expense-action>.receipt-actions { max-width:100%; } }

.overview-stats { grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)); }
@media(max-width:1100px) { .overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .overview-stats .main-stat { grid-column:1/-1; } }

.period-trigger,.period-trigger>span { white-space:nowrap; }
.period-trigger>span { flex:1; min-width:0; }
.period-trigger .icon { flex-shrink:0; }
.period-option>span { white-space:nowrap; }
.expense-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.expense-toolbar .search,.expense-toolbar>.expense-add { height:44px; min-height:44px; box-sizing:border-box; }
.expense-toolbar>.expense-add { justify-self:center; align-self:center; }
@media(max-width:760px) { .expense-toolbar { grid-template-columns:minmax(0,1fr); } .expense-toolbar>.expense-add { justify-self:center; } }
.compact-add-pagehead .add-icon { width:36px; min-width:36px; height:36px; min-height:36px; padding:8px; }
.compact-add-pagehead .add-icon .icon { width:18px; height:18px; }
.compact-add-pagehead>.controls { max-width:36px; }
.product-filters { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.product-filters>.search { width:100%; min-width:0; }
.product-filter-row { display:flex; align-items:center; gap:10px; }
.product-filter-row select { flex:1; min-width:0; width:0; }
.product-filter-row>.btn { flex-shrink:0; min-height:40px; }
.product-filters .bulk-toolbar { margin:0; padding-top:2px; }
.product-filters .bulk-toolbar:empty { display:none; }
input.bulk-check { appearance:none; -webkit-appearance:none; display:grid; place-content:center; width:20px; height:20px; min-height:20px; flex:0 0 20px; padding:0; margin:0; border:1.5px solid #ffffff55; border-radius:5px; background:transparent; box-shadow:none; outline-offset:3px; cursor:pointer; }
input.bulk-check:checked { background:var(--mint); border-color:var(--mint); }
input.bulk-check:checked::after { content:""; width:10px; height:6px; border-left:2px solid #163223; border-bottom:2px solid #163223; transform:translateY(-1px) rotate(-45deg); }
input.bulk-check:focus { box-shadow:none; }
input.bulk-check:focus-visible { outline:2px solid var(--mint); }
.catalog-row:has(.bulk-check:checked) .catalog-info strong,.compact-shopcard:has(.bulk-check:checked) .shop-item-name { color:#817d8b; text-decoration:line-through; text-decoration-thickness:1px; }
.audit-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }

.pagehead.compact-add-pagehead .controls .add-icon { width:36px; min-width:36px; height:36px; min-height:36px; max-height:36px; padding:8px; }

.product-filter-row>.bulk-toggle { flex:0 0 88px; width:88px; min-width:88px; max-width:88px; min-height:42px; padding:8px 10px; white-space:nowrap; }
.product-filters .selection-panel { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:10px 12px 12px; border:1px solid #ffffff12; border-radius:14px; background:#ffffff03; }
.bulk-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.bulk-summary .bulk-count { margin:0; font-size:12px; }
.bulk-summary>.bulk-select-all { min-height:30px; padding:4px 0 4px 8px; border:0; background:transparent; box-shadow:none; font-size:12px; white-space:nowrap; color:var(--mint); }
.bulk-action-row { display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:8px; }
.bulk-action-row>.btn { height:40px; min-height:40px; justify-content:center; white-space:nowrap; }
.bulk-action-row>.bulk-more { width:40px; min-width:40px; padding:8px; }
.shop-item-body>.shop-item-name { cursor:default; }

.bulk-action-row { grid-template-columns:minmax(0,1fr); }
.bulk-summary>.bulk-select-all { min-height:32px; padding:6px 10px; border:1px solid #ffffff18; border-radius:10px; background:transparent; box-shadow:none; color:var(--text); }
.bulk-toggle:focus:not(:focus-visible) { outline:none; box-shadow:none; }
@media(hover:none) { .bulk-toggle:hover { border-color:#ffffff18; background:transparent; box-shadow:none; } }
.expense-toolbar>.btn.expense-add { height:36px; min-height:36px; max-height:36px; padding:7px 12px; }
#expense-form,#expense-form>label { min-width:0; max-width:100%; }
#expense-form input,#expense-form select { min-width:0; max-width:100%; box-sizing:border-box; }
#expense-form input[type=date] { display:block; width:100%; inline-size:100%; min-inline-size:0; max-inline-size:100%; -webkit-appearance:none; appearance:none; }
#expense-form input[type=date]::-webkit-date-and-time-value { min-width:0; text-align:left; }
#expense-form input[type=date]::-webkit-datetime-edit { min-width:0; padding:0; }
.audit-header-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.audit-header-actions>.btn { width:30px; min-width:30px; min-height:30px; padding:6px; }

/* Decorative motion stays behind content and uses only transforms and opacity. */
.stat { isolation:isolate; overflow:hidden; }
.stat .holo-mesh,.stat .metric-signal { z-index:0; }
.stat .mini-icon { z-index:1; }
.stat .metric-signal { width:150px; height:80px; opacity:.36; }
.metric-signal g { transform-origin:center; animation:metric-weave 7s ease-in-out infinite alternate; }
.stat:nth-child(2n) .metric-signal g { animation-duration:9s; animation-delay:-3s; }
.stat .holo-mesh g { animation:hologram-breathe 6s ease-in-out infinite alternate; }
.ambient-card { position:relative; isolation:isolate; overflow:hidden; }
.card-atmosphere { position:absolute; z-index:0; width:min(300px,100%); height:180px; right:0; top:10px; opacity:.2; pointer-events:none; }
.ambient-card>:not(.card-atmosphere) { position:relative; z-index:1; }
.card-atmosphere g { fill:none; stroke:var(--mint); stroke-width:.8; transform-box:fill-box; transform-origin:center; }
.ambient-orbit { animation:ambient-orbit 24s linear infinite; opacity:.65; }
.ambient-waves { animation:ambient-tide 8s ease-in-out infinite alternate; opacity:.7; }
.ambient-particles { fill:var(--mint)!important; animation:ambient-glimmer 4s ease-in-out infinite alternate; }
.atmosphere-waves .ambient-orbit { opacity:.25; }
.atmosphere-rings .ambient-waves { opacity:.3; }
.ambient-card:nth-child(2n) .ambient-waves { animation-delay:-4s; }
.ambient-card:nth-child(3n) .ambient-orbit { animation-direction:reverse; animation-duration:32s; }
.ambient-paused *, .motion-suspended .stat *, .motion-suspended .ambient-card * { animation-play-state:paused!important; }
.cart-flight { position:fixed; z-index:2000; display:grid; place-items:center; border-radius:11px; background:#99e6b3; color:#123723; border:1px solid #baf3cd; box-shadow:0 4px 14px #99e6b344; pointer-events:none; }
.cart-flight .icon { width:21px; height:21px; }
dialog[open]::backdrop { animation:modal-backdrop-in .18s ease-out; }
@keyframes metric-weave { from { opacity:.65; transform:translate(-3px,5px) rotate(-3deg); } to { opacity:1; transform:translate(4px,-4px) rotate(3deg); } }
@keyframes ambient-orbit { to { transform:rotate(360deg); } }
@keyframes ambient-tide { from { transform:translate(-8px,5px); } to { transform:translate(6px,-6px); } }
@keyframes ambient-glimmer { from { opacity:.25; transform:translateY(4px); } to { opacity:.95; transform:translateY(-4px); } }
@keyframes modal-backdrop-in { from { opacity:.65; } to { opacity:1; } }
@media(max-width:760px) { .stat .metric-signal { width:120px; height:65px; } .card-atmosphere { width:250px; opacity:.17; } }
@media(prefers-reduced-motion:reduce) { .cart-flight { display:none; } }

.expense-toolbar { margin-bottom:8px; row-gap:8px; }
.expense-toolbar+.card { margin-top:0; }
.stat>.stat-art { width:min(210px,100%); height:120px; opacity:.32; right:0; bottom:0; }
.stat.main-stat>.main-stat-art { width:min(360px,100%); height:200px; opacity:.38; }
.stat-art g { fill:none; stroke:var(--mint); stroke-width:1; transform-box:fill-box; transform-origin:center; animation:none; }
.stat .stat-art g.stat-prism { animation:prism-tilt 12s ease-in-out infinite alternate; }
.stat .stat-art g.stat-columns { animation:column-float 6s ease-in-out infinite alternate; }
.stat .stat-art g.stat-tiles { animation:tile-sway 9s ease-in-out infinite alternate; }
.stat .stat-art g.stat-hubs { animation:hub-breathe 7s ease-in-out infinite alternate; }
.stat-art .prism-face { fill:var(--accent-soft); }
.stat-art .tile-face { fill:#15121c; }
.stat-art .hub-center { fill:var(--mint); fill-opacity:.25; }
.card-atmosphere .decor-motion { animation:none; }
.card-atmosphere.art-trend .decor-motion { animation:flow-shift 7s ease-in-out infinite alternate; }
.card-atmosphere.art-categories .decor-motion { animation:atom-turn 36s linear infinite; }
.card-atmosphere.art-stores .decor-motion { animation:column-float 10s ease-in-out infinite alternate; }
.card-atmosphere.art-weekdays .decor-motion { animation:calendar-breathe 8s ease-in-out infinite alternate; }
.card-atmosphere.art-weekdays .decor-accent { fill:var(--mint); animation:calendar-light 4s ease-in-out infinite alternate; }
.card-atmosphere.art-recent .decor-motion { animation:paper-drift 11s ease-in-out infinite alternate; }
.card-atmosphere.art-budget .decor-needle { transform-origin:240px 143px; transform-box:view-box; animation:budget-sweep 9s ease-in-out infinite alternate; }
@keyframes prism-tilt { from { transform:rotate(-8deg) scale(.96); opacity:.7; } to { transform:rotate(8deg) scale(1.02); opacity:1; } }
@keyframes column-float { from { transform:translateY(5px); } to { transform:translateY(-5px); } }
@keyframes tile-sway { from { transform:translate(-3px,4px) rotate(-4deg); } to { transform:translate(3px,-4px) rotate(4deg); } }
@keyframes hub-breathe { from { transform:scale(.94); opacity:.65; } to { transform:scale(1.02); opacity:1; } }
@keyframes flow-shift { from { transform:translateX(-7px); opacity:.65; } to { transform:translateX(7px); opacity:1; } }
@keyframes atom-turn { to { transform:rotate(360deg); } }
@keyframes calendar-breathe { from { opacity:.45; } to { opacity:1; } }
@keyframes calendar-light { from { opacity:.1; } to { opacity:.75; } }
@keyframes paper-drift { from { transform:translateY(4px) rotate(-3deg); } to { transform:translateY(-4px) rotate(3deg); } }
@keyframes budget-sweep { from { transform:rotate(-12deg); } to { transform:rotate(12deg); } }