@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/plex-sans-latin-400.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/plex-sans-latin-500.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/plex-sans-latin-600.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/plex-sans-latin-700.woff2') format('woff2');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/plex-sans-latin-ext-400.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/plex-sans-latin-ext-500.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/plex-sans-latin-ext-600.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/plex-sans-latin-ext-700.woff2') format('woff2');
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/plex-sans-cyrillic-400.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/plex-sans-cyrillic-500.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/plex-sans-cyrillic-600.woff2') format('woff2');
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/plex-sans-cyrillic-ext-400.woff2') format('woff2');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/plex-sans-cyrillic-ext-500.woff2') format('woff2');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/plex-sans-cyrillic-ext-600.woff2') format('woff2');
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
:root {
--petrol-950: #083946;
--petrol-900: #0d4758;
--petrol-700: #176477;
--petrol-500: #2e7f8e;
--petrol-300: #79adb5;
--petrol-200: #acd0d5;
--petrol-100: #d5e8ea;
--petrol-050: #e5f1f2;
--c-primary:             var(--petrol-700);
--c-primary-hover:       var(--petrol-900);
--c-primary-active:      var(--petrol-950);
--c-primary-soft:        var(--petrol-050);
--c-primary-soft-strong: var(--petrol-100);
--c-notice-border:       #c9dde1;
--c-notice-text:         #506b7e;
--c-primary-border:      var(--petrol-200);
--c-primary-muted:       #527b82;
--c-primary-text:        var(--petrol-900);
--petrol-700-rgb:  23, 100, 119;
--petrol-950-rgb:  8, 57, 70;
--c-primary-ring:  rgba(var(--petrol-700-rgb), .18);
--c-primary-shade: rgba(var(--petrol-950-rgb), .16);
--c-primary-wash: #f7fafa;
--widget-head-bg:     var(--c-primary-wash);
--widget-head-border: #dce8e9;
--widget-head-title:  #183743;
--c-text:           #0d253d;
--c-text-secondary: #62718a;
--c-text-muted:     #62718a;
--c-bg:             #ffffff;
--c-on-accent:      #ffffff;
--c-bg-alt:         #f6f9fc;
--c-border:         #e3e8ee;
--c-border-strong:  #d3dae4;
--c-dark:           var(--petrol-950);
--c-brand-a: #8a3ffc;
--c-brand-b: #533afd;
--c-success:      #1d8756;
--c-success-soft: #e6f4ed;
--c-danger:       #e71658;
--c-danger-soft:  #fdeaf1;
--c-warning:      #9b6829;
--c-warning-soft: #fdf3e4;
--c-success-on-soft: #1a7d4f;
--c-danger-on-soft:  #d41451;
--c-text-secondary-on-wash: #5e6d85;
--c-info:      #2f6fed;
--c-info-soft: #e9f0fe;
--impact-up:   #509d83;
--impact-down: #c7657e;
--chart-category-1:  #1000fe;
--chart-category-2:  #01945a;
--chart-category-3:  #feb701;
--chart-category-4:  #0081e8;
--chart-category-5:  #fd2e3e;
--chart-category-6:  #fd7e08;
--chart-category-7:  #967cbf;
--chart-category-8:  #e94f9d;
--chart-category-9:  #a67c52;
--chart-category-10: #7c8aa8;
--chart-category-1-s1: #6b61fe;  --chart-category-1-s2: #0b00ad;  --chart-category-1-s3: #aea8ff;
--chart-category-2-s1: #62bd99;  --chart-category-2-s2: #01653d;  --chart-category-2-s3: #a9dbc7;
--chart-category-3-s1: #fed262;  --chart-category-3-s2: #ad7c01;  --chart-category-3-s3: #ffe7a9;
--chart-category-4-s1: #61b1f1;  --chart-category-4-s2: #00589e;  --chart-category-4-s3: #a8d4f7;
--chart-category-5-s1: #fe7d87;  --chart-category-5-s2: #ac1f2a;  --chart-category-5-s3: #feb8bd;
--chart-category-6-s1: #feaf66;  --chart-category-6-s2: #ac5605;  --chart-category-6-s3: #fed3ab;
--chart-category-7-s1: #beaed7;  --chart-category-7-s2: #665482;  --chart-category-7-s3: #dbd2e9;
--chart-category-8-s1: #f192c2;  --chart-category-8-s2: #9e366b;  --chart-category-8-s3: #f8c3de;
--chart-category-9-s1: #c8ae94;  --chart-category-9-s2: #715438;  --chart-category-9-s3: #e1d2c4;
--chart-category-10-s1: #aeb6c9;  --chart-category-10-s2: #545e72;  --chart-category-10-s3: #d2d7e1;
--chart-category-1-soft:  #eeecff;
--chart-category-2-soft:  #e5f6ef;
--chart-category-3-soft:  #fff6d6;
--chart-category-4-soft:  #e7f4ff;
--chart-category-5-soft:  #ffecef;
--chart-category-6-soft:  #fff0e1;
--chart-category-7-soft:  #f2eefa;
--chart-category-8-soft:  #fdecf5;
--chart-category-9-soft:  #f5efe8;
--chart-category-10-soft: #eef1f6;
--chart-category-1-tint:  #dad8ff;
--chart-category-2-tint:  #bee4d5;
--chart-category-3-tint:  #fed773;
--chart-category-4-tint:  #c0e0f9;
--chart-category-5-tint:  #ffd0d3;
--chart-category-6-tint:  #ffe2c7;
--chart-category-7-tint:  #e0d8ec;
--chart-category-8-tint:  #f9d0e5;
--chart-category-9-tint:  #e6dace;
--chart-category-10-tint: #d7dce5;
--chart-category-1-ink:  #1000b8;
--chart-category-2-ink:  #006b40;
--chart-category-3-ink:  #765300;
--chart-category-4-ink:  #005fae;
--chart-category-5-ink:  #b71927;
--chart-category-6-ink:  #a94d00;
--chart-category-7-ink:  #624b8b;
--chart-category-8-ink:  #a62669;
--chart-category-9-ink:  #73502f;
--chart-category-10-ink: #52617d;
--chart-time-current: #1261ff;
--chart-time-prev-1:  #7047eb;
--chart-time-prev-2:  #16a05d;
--chart-time-prev-3:  #f47a13;
--chart-time-prev-4:  #d94c8a;
--chart-time-prev-5:  #089fc1;
--chart-grid:          #e3e8ee;
--chart-grid-strong:   #d3dae4;
--chart-axis-label:    #64748d;
--chart-focus-fill:    #eef6f9;
--chart-focus-line:    #bcd9e2;
--chart-focus-ink:     #1c3a52;
--chart-tooltip-bg:    #0d253d;
--chart-tooltip-text:  #ffffff;
--chart-tooltip-muted: #d7e0ea;
--chart-project:      var(--petrol-700);
--chart-project-soft: var(--petrol-050);
--chart-project-ink:  var(--petrol-900);
--chart-other:        #94a3bd;
--chart-other-ink:    #475569;
--chart-project-tint: var(--petrol-200);
--chart-project-1: var(--petrol-500);
--chart-project-2: var(--petrol-900);
--chart-project-3: var(--petrol-300);
--chart-remaining: var(--petrol-200);
--chart-inactive-opacity: .24;
--chart-hover-opacity:    .82;
--chart-selected-opacity: 1;
--chart-area-opacity:     .10;
--c-chart-1:  var(--chart-category-1);
--c-chart-2:  var(--chart-category-2);
--c-chart-3:  var(--chart-category-3);
--c-chart-4:  var(--chart-category-4);
--c-chart-5:  var(--chart-category-5);
--c-chart-6:  var(--chart-category-6);
--c-chart-7:  var(--chart-category-7);
--c-chart-8:  var(--chart-category-8);
--c-chart-9:  var(--chart-category-9);
--c-chart-10: var(--chart-category-10);
--s-2:  2px;
--s-4:  4px;
--s-8:  8px;
--s-12: 12px;
--s-16: 16px;
--s-24: 24px;
--s-32: 32px;
--s-64: 64px;
--r-4:  4px;
--r-6:  6px;
--r-8:  8px;
--r-10: 10px;
--dash-rail: clamp(360px, 35%, 384px);
--r-12: 12px;
--r-16: 16px;
--r-pill: 9999px;
--shadow-1: 0 1px 3px rgba(0, 55, 112, 0.08);
--shadow-2: 0 8px 24px rgba(0, 55, 112, 0.08), 0 2px 6px rgba(0, 55, 112, 0.04);
--fs-micro:   11px;
--fs-caption: 12px;
--fs-body:    13px;
--fs-base:    14px;
--fs-lg:      15px;
--fs-title:   16px;
--fs-h2:      18px;
--fs-h1:      24px;
--fs-display: 34px;
--fs-no-zoom: 16px;
--font: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
--header-h: 64px;
--content-max: 1200px;
--sort-both: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 1 7 5H1z'/%3E%3Cpath d='M4 11 1 7h6z'/%3E%3C/svg%3E");
--sort-up:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 3 7.5 9h-7z'/%3E%3C/svg%3E");
--sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 9 .5 3h7z'/%3E%3C/svg%3E");
}
[data-color-slot="0"]  { --series-color: var(--chart-project);     --series-soft: var(--chart-project-soft);     --series-tint: var(--chart-project-tint);     --series-ink: var(--chart-project-ink); }
[data-color-slot="0"][data-accent-step="1"] { --series-color: var(--chart-project-1); }
[data-color-slot="0"][data-accent-step="2"] { --series-color: var(--chart-project-2); }
[data-color-slot="0"][data-accent-step="3"] { --series-color: var(--chart-project-3); }
[data-color-slot="1"][data-accent-step="1"] { --series-color: var(--chart-category-1-s1); }
[data-color-slot="1"][data-accent-step="2"] { --series-color: var(--chart-category-1-s2); }
[data-color-slot="1"][data-accent-step="3"] { --series-color: var(--chart-category-1-s3); }
[data-color-slot="2"][data-accent-step="1"] { --series-color: var(--chart-category-2-s1); }
[data-color-slot="2"][data-accent-step="2"] { --series-color: var(--chart-category-2-s2); }
[data-color-slot="2"][data-accent-step="3"] { --series-color: var(--chart-category-2-s3); }
[data-color-slot="3"][data-accent-step="1"] { --series-color: var(--chart-category-3-s1); }
[data-color-slot="3"][data-accent-step="2"] { --series-color: var(--chart-category-3-s2); }
[data-color-slot="3"][data-accent-step="3"] { --series-color: var(--chart-category-3-s3); }
[data-color-slot="4"][data-accent-step="1"] { --series-color: var(--chart-category-4-s1); }
[data-color-slot="4"][data-accent-step="2"] { --series-color: var(--chart-category-4-s2); }
[data-color-slot="4"][data-accent-step="3"] { --series-color: var(--chart-category-4-s3); }
[data-color-slot="5"][data-accent-step="1"] { --series-color: var(--chart-category-5-s1); }
[data-color-slot="5"][data-accent-step="2"] { --series-color: var(--chart-category-5-s2); }
[data-color-slot="5"][data-accent-step="3"] { --series-color: var(--chart-category-5-s3); }
[data-color-slot="6"][data-accent-step="1"] { --series-color: var(--chart-category-6-s1); }
[data-color-slot="6"][data-accent-step="2"] { --series-color: var(--chart-category-6-s2); }
[data-color-slot="6"][data-accent-step="3"] { --series-color: var(--chart-category-6-s3); }
[data-color-slot="7"][data-accent-step="1"] { --series-color: var(--chart-category-7-s1); }
[data-color-slot="7"][data-accent-step="2"] { --series-color: var(--chart-category-7-s2); }
[data-color-slot="7"][data-accent-step="3"] { --series-color: var(--chart-category-7-s3); }
[data-color-slot="8"][data-accent-step="1"] { --series-color: var(--chart-category-8-s1); }
[data-color-slot="8"][data-accent-step="2"] { --series-color: var(--chart-category-8-s2); }
[data-color-slot="8"][data-accent-step="3"] { --series-color: var(--chart-category-8-s3); }
[data-color-slot="9"][data-accent-step="1"] { --series-color: var(--chart-category-9-s1); }
[data-color-slot="9"][data-accent-step="2"] { --series-color: var(--chart-category-9-s2); }
[data-color-slot="9"][data-accent-step="3"] { --series-color: var(--chart-category-9-s3); }
[data-color-slot="10"][data-accent-step="1"] { --series-color: var(--chart-category-10-s1); }
[data-color-slot="10"][data-accent-step="2"] { --series-color: var(--chart-category-10-s2); }
[data-color-slot="10"][data-accent-step="3"] { --series-color: var(--chart-category-10-s3); }
[data-color-slot="1"]  { --series-color: var(--chart-category-1);  --series-soft: var(--chart-category-1-soft);  --series-tint: var(--chart-category-1-tint);  --series-ink: var(--chart-category-1-ink); }
[data-color-slot="2"]  { --series-color: var(--chart-category-2);  --series-soft: var(--chart-category-2-soft);  --series-tint: var(--chart-category-2-tint);  --series-ink: var(--chart-category-2-ink); }
[data-color-slot="3"]  { --series-color: var(--chart-category-3);  --series-soft: var(--chart-category-3-soft);  --series-tint: var(--chart-category-3-tint);  --series-ink: var(--chart-category-3-ink); }
[data-color-slot="4"]  { --series-color: var(--chart-category-4);  --series-soft: var(--chart-category-4-soft);  --series-tint: var(--chart-category-4-tint);  --series-ink: var(--chart-category-4-ink); }
[data-color-slot="5"]  { --series-color: var(--chart-category-5);  --series-soft: var(--chart-category-5-soft);  --series-tint: var(--chart-category-5-tint);  --series-ink: var(--chart-category-5-ink); }
[data-color-slot="6"]  { --series-color: var(--chart-category-6);  --series-soft: var(--chart-category-6-soft);  --series-tint: var(--chart-category-6-tint);  --series-ink: var(--chart-category-6-ink); }
[data-color-slot="7"]  { --series-color: var(--chart-category-7);  --series-soft: var(--chart-category-7-soft);  --series-tint: var(--chart-category-7-tint);  --series-ink: var(--chart-category-7-ink); }
[data-color-slot="8"]  { --series-color: var(--chart-category-8);  --series-soft: var(--chart-category-8-soft);  --series-tint: var(--chart-category-8-tint);  --series-ink: var(--chart-category-8-ink); }
[data-color-slot="9"]  { --series-color: var(--chart-category-9);  --series-soft: var(--chart-category-9-soft);  --series-tint: var(--chart-category-9-tint);  --series-ink: var(--chart-category-9-ink); }
[data-color-slot="10"] { --series-color: var(--chart-category-10); --series-soft: var(--chart-category-10-soft); --series-tint: var(--chart-category-10-tint); --series-ink: var(--chart-category-10-ink); }
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
margin: 0;
font-family: var(--font);
font-weight: 400;
font-size: var(--fs-lg);
line-height: 1.5;
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.num,
td.num,
th.num,
.money,
input[type='number'],
input[inputmode='decimal'] {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
h1, h2, h3, h4 {
margin: 0 0 var(--s-12);
font-weight: 600;
color: var(--c-text);
}
h1 { font-size: var(--fs-h1); line-height: 1.25; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.3;  letter-spacing: -0.01em; }
h3 { font-size: var(--fs-title); line-height: 1.35; }
h4 { font-size: var(--fs-base); line-height: 1.35; font-weight: 500; }
.bpanel-head h2,
.empty h2,
.project-title { font-size: var(--fs-title); line-height: 1.35; }
p { margin: 0 0 var(--s-12); }
a {
color: var(--c-primary);
text-decoration: none;
transition: color .15s ease;
}
a:hover { color: var(--c-primary-hover); }
hr {
border: 0;
border-top: 1px solid var(--c-border);
margin: var(--s-24) 0;
}
small, .small { font-size: var(--fs-body); }
.muted     { color: var(--c-text-secondary); }
.muted-sm  { color: var(--c-text-muted); font-size: var(--fs-body); }
.strong    { font-weight: 500; }
.nowrap    { white-space: nowrap; }
.text-center { text-align: center; }
.text-danger  { color: var(--c-danger); }
.mt-8  { margin-top: var(--s-8); }
.mt-16 { margin-top: var(--s-16); }
.mt-24 { margin-top: var(--s-24); }
.mb-0  { margin-bottom: 0; }
.mb-16 { margin-bottom: var(--s-16); }
.mb-24 { margin-bottom: var(--s-24); }
:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
border-radius: var(--r-4);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.container {
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-24);
}
.container-narrow { max-width: 720px; }
.container-wide   { max-width: 1440px; }
.page      { padding: var(--s-32) 0 var(--s-64); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-16); flex-wrap: wrap; margin-bottom: var(--s-24); }
.page-head h1 { margin: 0; }
.page-head-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
margin-right: .4em;
color: var(--c-primary);
vertical-align: -.08em;
}
.page-head-icon svg { width: 100%; height: 100%; }
.page-head .subtitle { color: var(--c-text-secondary); margin: var(--s-4) 0 0; }
.stack   { display: flex; flex-direction: column; gap: var(--s-16); }
.row     { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); flex-wrap: wrap; }
.spacer  { flex: 1 1 auto; }
.grid { display: grid; gap: var(--s-16); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--c-border);
}
.app-header-inner {
height: var(--header-h);
display: flex;
align-items: center;
gap: var(--s-24);
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--s-24);
}
.wordmark {
display: inline-flex;
align-items: center;
gap: var(--s-8);
font-size: 17px;
font-weight: 400;
letter-spacing: -0.5px;
color: var(--c-text);
white-space: nowrap;
}
.wordmark .logo-mark { box-shadow: none; }
.wordmark:hover { color: var(--c-text); }
.wordmark b { font-weight: 500; }
.app-nav { display: flex; align-items: center; gap: var(--s-4); }
.app-nav a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 var(--s-12);
border-radius: var(--r-6);
color: var(--c-text-secondary);
font-size: var(--fs-base);
transition: background .15s ease, color .15s ease;
}
.app-nav a:hover { background: var(--c-bg-alt); color: var(--c-text); }
.app-nav a.is-active { color: var(--c-primary); background: var(--c-primary-soft); font-weight: 400; }
.dropdown { position: relative; }
.dropdown-toggle {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-height: 36px;
padding: 0 var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-6);
background: var(--c-bg);
color: var(--c-text);
font: inherit;
font-size: var(--fs-base);
cursor: pointer;
transition: border-color .15s ease, box-shadow .15s ease;
}
.dropdown-toggle:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-1); }
.dropdown-toggle::after {
content: '';
width: 6px; height: 6px;
border-right: 1.5px solid var(--c-text-secondary);
border-bottom: 1.5px solid var(--c-text-secondary);
transform: rotate(45deg) translateY(-2px);
}
.dropdown-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 240px;
padding: var(--s-4);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
box-shadow: var(--shadow-2);
z-index: 50;
}
.dropdown-menu[hidden] { display: none; }
.dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-8);
width: 100%;
min-height: 40px;
padding: var(--s-8) var(--s-12);
border: 0;
border-radius: var(--r-8);
background: none;
color: var(--c-text);
font: inherit;
font-size: var(--fs-base);
text-align: left;
cursor: pointer;
}
.dropdown-item:hover { background: var(--c-bg-alt); color: var(--c-text); }
.dropdown-item.is-current { color: var(--c-primary); }
.dropdown-item .check { color: var(--c-primary); }
.dropdown-divider { height: 1px; margin: var(--s-4) 0; background: var(--c-border); }
.dropdown-label { padding: var(--s-8) var(--s-12) var(--s-4); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-8);
min-height: 40px;
padding: var(--s-8) var(--s-16);
border: 1px solid transparent;
border-radius: var(--r-pill);
font: inherit;
font-size: var(--fs-base);
font-weight: 400;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-accent); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-on-accent); }
.btn-secondary { background: var(--c-bg); border-color: var(--c-border); color: var(--c-text); }
.btn-secondary:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-1); color: var(--c-text); }
.btn-ghost { background: transparent; color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary-soft); }
.btn-outline-primary {
background: var(--c-bg);
border-color: var(--c-primary-border);
color: var(--c-primary);
border-radius: var(--r-8);
}
.btn-outline-primary:hover {
background: var(--c-primary-soft);
border-color: var(--c-primary);
color: var(--c-primary-hover);
}
.btn-danger { background: var(--c-bg); border-color: var(--c-border); color: var(--c-danger); }
.btn-danger:hover { background: var(--c-danger-soft); border-color: var(--c-danger-on-soft); color: var(--c-danger-on-soft); }
.btn-danger-solid { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-on-accent); }
.btn-danger-solid:hover { background: #d01a55; border-color: #d01a55; color: var(--c-on-accent); }
.btn-sm { min-height: 32px; padding: var(--s-4) var(--s-12); font-size: var(--fs-body); }
.btn-lg { min-height: 48px; padding: var(--s-12) var(--s-24); font-size: var(--fs-title); }
.btn-block { width: 100%; }
.btn-icon {
min-height: 32px;
width: 32px;
padding: 0;
border-radius: var(--r-6);
background: transparent;
border-color: transparent;
color: var(--c-text-secondary);
}
.btn-icon:hover { background: var(--c-bg-alt); color: var(--c-text); }
.card {
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
box-shadow: var(--shadow-1);
}
.card-body   { padding: var(--s-24); }
.card-body-sm{ padding: var(--s-16); }
.card-foot {
padding: var(--s-16) var(--s-24);
border-top: 1px solid var(--c-border);
background: var(--c-bg-alt);
border-radius: 0 0 var(--r-12) var(--r-12);
}
.panel { background: var(--c-bg-alt); border-radius: var(--r-12); padding: var(--s-24); }
.table-wrap { width: 100%; overflow-x: auto; }
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-base);
}
.table th {
padding: var(--s-8) var(--s-12);
text-align: left;
font-size: var(--fs-caption);
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--c-text-muted);
border-bottom: 1px solid var(--c-border);
white-space: nowrap;
}
.table td {
padding: var(--s-12);
border-bottom: 1px solid var(--c-border);
vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-clickable:hover { background: var(--c-bg-alt); cursor: pointer; }
.table .num, .table th.num { text-align: right; }
.table th[data-sort-ready="1"] { padding: 0; }
.th-sort {
display: inline-flex;
align-items: center;
gap: 6px;
width: 100%;
padding: var(--s-8) var(--s-12);
border: 0;
background: none;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
cursor: pointer;
border-radius: var(--r-8);
transition: color .15s ease, background .15s ease;
}
.table th.num .th-sort { justify-content: flex-end; }
.th-sort:hover { color: var(--c-text); background: var(--c-bg-alt); }
.th-sort:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.th-sort-arrow {
flex: none;
width: 8px;
height: 12px;
opacity: .45;
background: currentColor;
-webkit-mask: var(--sort-both) center / 8px 12px no-repeat;
mask: var(--sort-both) center / 8px 12px no-repeat;
}
.th-sort:hover .th-sort-arrow { opacity: .75; }
th[aria-sort="ascending"] .th-sort,
th[aria-sort="descending"] .th-sort { color: var(--c-primary); }
th[aria-sort="ascending"] .th-sort-arrow,
th[aria-sort="descending"] .th-sort-arrow { opacity: 1; }
th[aria-sort="ascending"] .th-sort-arrow {
-webkit-mask: var(--sort-up) center / 8px 12px no-repeat;
mask: var(--sort-up) center / 8px 12px no-repeat;
}
th[aria-sort="descending"] .th-sort-arrow {
-webkit-mask: var(--sort-down) center / 8px 12px no-repeat;
mask: var(--sort-down) center / 8px 12px no-repeat;
}
.table tfoot td {
padding: var(--s-12);
border-top: 1px solid var(--c-border-strong);
font-weight: 500;
background: var(--c-bg-alt);
}
.table-compact td { padding: var(--s-8) var(--s-12); }
.row-actions { display: flex; gap: var(--s-4); justify-content: flex-end; flex-wrap: wrap; }
.field { margin-bottom: var(--s-16); }
.label {
display: block;
margin-bottom: var(--s-4);
font-size: var(--fs-body);
font-weight: 400;
color: var(--c-text);
}
.input, .select, .textarea {
display: block;
width: 100%;
min-height: 44px;
padding: var(--s-8) var(--s-12);
border: 1px solid var(--c-border-strong);
border-radius: var(--r-6);
background: var(--c-bg);
color: var(--c-text);
font: inherit;
font-size: var(--fs-lg);
transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover, .select:hover { border-color: #b9c3d1; }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.input:disabled, .select:disabled, .input[readonly] {
background: var(--c-bg-alt);
color: var(--c-text-secondary);
cursor: not-allowed;
}
.input.is-invalid { border-color: var(--c-danger); }
.input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(234, 34, 97, .14); }
.select {
appearance: none;
padding-right: var(--s-32);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--s-12) center;
}
.textarea { min-height: 96px; resize: vertical; }
.hint  { margin-top: var(--s-4); font-size: var(--fs-caption); color: var(--c-text-secondary); }
.error { margin-top: var(--s-4); font-size: var(--fs-caption); color: var(--c-danger); }
.switch-field-sm { gap: var(--s-8); }
.switch-field-sm .switch { width: 34px; height: 18px; }
.switch-field-sm .switch-knob { top: 3px; left: 3px; width: 12px; height: 12px; }
.switch-field-sm input:checked + .switch .switch-knob { transform: translateX(16px); }
.switch-field-sm .switch-field-text { font-size: var(--fs-caption); color: var(--c-text-secondary); }
.switch-field-sm input:checked ~ .switch-field-text { color: var(--c-primary); }
.addb-name-typed { flex-wrap: nowrap; }
.addb-type { flex: 0 0 auto; margin-left: auto; }
.addb-row > .addb-name-typed { grid-column: 1 / 3; }
.brow-type { position: relative; flex: none; margin-left: var(--s-8); }
.brow-type .switch-field-text { white-space: nowrap; }
.brow-type .save-state { position: absolute; top: 100%; right: 0; margin-top: 2px; }
@media (max-width: 640px) {
.brow-name:has(.brow-type) { flex-wrap: wrap; }
.brow-type {
flex-basis: 100%;
margin-left: calc(32px + var(--s-8));
margin-top: var(--s-4);
}
.brow-type .save-state { position: static; margin: 0 0 0 var(--s-8); }
}
.drawer-src { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
.drawer-src .drawer-name { min-width: 0; }
.drawer-type { margin-left: auto; }
.drawer-type-badge { margin-left: auto; }
@media (max-width: 640px) {
.drawer-type,
.addb-type .switch-field {
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.drawer-src { gap: var(--s-8); flex-wrap: nowrap; }
.drawer-src .drawer-name { flex: 1 1 auto; }
td.drawer-input-cell { width: 112px; }
.drawer-type .switch-field-text,
.addb-type .switch-field-text {
font-size: var(--fs-caption);
line-height: 1.2;
white-space: nowrap;
}
}
.calc-field {
display: flex;
align-items: center;
min-height: 44px;
margin: 0;
padding: var(--s-8) var(--s-12);
border-radius: var(--r-6);
background: var(--c-bg-alt);
color: var(--c-text);
font-size: var(--fs-base);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.checkbox { display: flex; align-items: flex-start; gap: var(--s-8); font-size: var(--fs-base); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--c-primary); flex: none; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-16); }
.form-actions { display: flex; gap: var(--s-8); align-items: center; flex-wrap: wrap; margin-top: var(--s-16); }
.amount-field { position: relative; }
.amount-field .currency-symbol {
position: absolute;
left: var(--s-12);
top: 50%;
transform: translateY(-50%);
color: var(--c-text-muted);
font-size: var(--fs-base);
pointer-events: none;
}
.amount-field .input { padding-left: 30px; text-align: right; }
.input-reveal { position: relative; }
.input-reveal .input { padding-right: 44px; }
.input-reveal-btn {
position: absolute;
right: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 100%;
padding: 0;
border: 0;
background: none;
color: var(--c-text-secondary);
cursor: pointer;
}
.input-reveal-btn:hover { color: var(--c-text); }
.input-reveal-btn:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: -2px;
border-radius: var(--r-6);
}
.input-reveal-btn svg { width: 20px; height: 20px; }
.input-reveal-btn .reveal-slash { display: none; }
.input-reveal-btn.is-revealed .reveal-slash { display: block; }
.hint.is-danger { color: var(--c-danger); }
[data-register-form] .form-row { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) {
[data-register-form] .form-row { grid-template-columns: 1fr; }
}
.is-age-blocked .checkbox { opacity: .55; cursor: not-allowed; }
.code-input {
font-size: var(--fs-h1);
letter-spacing: .35em;
text-align: center;
font-variant-numeric: tabular-nums;
padding-left: var(--s-16);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--s-4);
padding: 2px var(--s-8);
border-radius: var(--r-pill);
font-size: var(--fs-caption);
line-height: 18px;
white-space: nowrap;
background: var(--c-bg-alt);
color: var(--c-text-secondary);
border: 1px solid var(--c-border);
}
.badge[title] { cursor: help; }
.badge-success { background: var(--c-success-soft); color: var(--c-success-on-soft); border-color: transparent; }
.badge-danger  { background: var(--c-danger-soft);  color: var(--c-danger-on-soft);  border-color: transparent; }
.badge-warning { background: var(--c-warning-soft); color: var(--c-warning); border-color: transparent; }
.badge-primary { background: var(--c-primary-soft); color: var(--c-primary); border-color: transparent; }
.badge-dark    { background: var(--c-dark); color: var(--c-on-accent); border-color: transparent; }
.badge-mark {
display: inline-flex;
width: 12px;
height: 12px;
}
.badge-mark svg { display: block; width: 12px; height: 12px; }
.badge-bare {
padding: 0;
border-color: transparent;
background: none;
}
.count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--r-pill);
background: var(--c-danger);
color: var(--c-on-accent);
font-size: var(--fs-micro);
font-variant-numeric: tabular-nums;
}
.alert {
display: flex;
gap: var(--s-12);
padding: var(--s-12) var(--s-16);
border-radius: var(--r-8);
border: 1px solid var(--c-border);
background: var(--c-bg-alt);
font-size: var(--fs-base);
margin-bottom: var(--s-16);
}
.alert-danger  { background: var(--c-danger-soft);  border-color: transparent; color: #9c1642; }
.alert-warning { background: var(--c-warning-soft); border-color: transparent; color: #6f4a1d; }
.alert-info    { background: var(--c-primary-soft); border-color: transparent; color: var(--c-primary-text); }
.flash-stack { position: sticky; top: calc(var(--header-h) + var(--s-16)); z-index: 30; }
.has-js .flash-stack {
position: fixed;
top: calc(var(--header-h) + var(--s-16));
right: var(--s-24);
z-index: 60;
width: min(380px, calc(100vw - var(--s-32)));
pointer-events: none;
}
.has-js .flash { pointer-events: auto; box-shadow: var(--shadow-2); }
@keyframes flash-slide-in {
from { opacity: 0; transform: translateX(calc(100% + var(--s-24))); }
55%  { opacity: 1; }
to   { opacity: 1; transform: none; }
}
.has-js .flash { animation: flash-slide-in .52s cubic-bezier(.18, .89, .32, 1.22) both; }
.has-js .flash:nth-child(2) { animation-delay: .08s; }
.has-js .flash:nth-child(3) { animation-delay: .16s; }
.has-js .flash:nth-child(n + 4) { animation-delay: .24s; }
.has-js .flash.is-closing {
animation: none;
opacity: 0;
transform: translateX(calc(100% + var(--s-24)));
}
.has-js .flash { transition: opacity .26s ease-in, transform .26s ease-in; }
.flash {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) 32px;
align-items: center;
gap: var(--s-8);
min-height: 52px;
margin-bottom: var(--s-12);
padding: 9px 10px;
border: 1px solid transparent;
border-radius: var(--r-10);
transition: opacity .18s ease, transform .18s ease;
}
.flash.is-closing { opacity: 0; transform: translateY(-4px); }
@keyframes flash-slide-in-calm {
from { opacity: 0; transform: translateX(14px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.has-js .flash {
animation: flash-slide-in-calm .2s ease-out both;
animation-delay: 0s;
}
.has-js .flash.is-closing { transform: translateX(14px); }
.has-js .flash { transition: opacity .16s ease-in, transform .16s ease-in; }
}
.flash-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--r-8);
background: rgba(255, 255, 255, .76);
}
.flash-icon svg { width: 17px; height: 17px; }
.flash-copy {
min-width: 0;
margin: 0;
font-size: var(--fs-body);
line-height: 1.45;
}
.flash-copy strong { font-weight: 600; }
.flash-close {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 0;
border-radius: var(--r-8);
background: transparent;
cursor: pointer;
transition: color .18s ease, background .18s ease;
}
.flash-close svg { width: 16px; height: 16px; }
.flash-close:hover { background: rgba(255, 255, 255, .72); }
.flash-close { display: none; }
.has-js .flash-close { display: grid; }
@media (max-width: 767px) {
.has-js .flash-stack {
left: var(--s-12);
right: var(--s-12);
width: auto;
top: calc(var(--header-h) + var(--s-8));
}
}
.flash-success {
border-color: #cce7d9;
background: var(--c-success-soft);
color: #185f43;
}
.flash-success .flash-icon  { color: var(--c-success); }
.flash-success .flash-copy strong { color: #124e37; }
.flash-success .flash-close { color: #39745a; }
.flash-success .flash-close:hover { color: #124e37; }
.flash-danger {
border-color: #f6cede;
background: var(--c-danger-soft);
color: #9c1642;
}
.flash-danger .flash-icon  { color: var(--c-danger); }
.flash-danger .flash-copy strong,
.flash-danger .flash-close:hover { color: #7d1136; }
.flash-danger .flash-close { color: #a8446a; }
.flash-warning {
border-color: #f0dcbc;
background: var(--c-warning-soft);
color: #6f4a1d;
}
.flash-warning .flash-icon  { color: var(--c-warning); }
.flash-warning .flash-copy strong,
.flash-warning .flash-close:hover { color: #5a3b16; }
.flash-warning .flash-close { color: #856436; }
.flash-info {
border-color: var(--c-notice-border);
background: var(--c-primary-soft);
color: var(--c-notice-text);
}
.flash-info .flash-icon  { color: var(--c-primary); }
.flash-info .flash-copy strong,
.flash-info .flash-close:hover { color: var(--c-primary-text); }
.flash-info .flash-close { color: var(--c-primary-hover); }
@media (max-width: 760px) {
.flash {
grid-template-columns: 30px minmax(0, 1fr) 30px;
padding: 9px;
}
.flash-icon, .flash-close { width: 30px; height: 30px; }
.flash-copy { font-size: var(--fs-caption); }
}
.empty {
padding: var(--s-64) var(--s-24);
text-align: center;
color: var(--c-text-secondary);
}
.empty h3 { color: var(--c-text); margin-bottom: var(--s-8); }
.empty p  { max-width: 480px; margin: 0 auto var(--s-16); }
.project-card { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-16) var(--s-24); border: 1px solid var(--c-border); border-radius: var(--r-12); background: var(--c-bg); box-shadow: var(--shadow-1); }
.project-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.project-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-12); }
.project-metric .k { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.project-metric .v { font-variant-numeric: tabular-nums; font-size: var(--fs-lg); }
.amount-cell { width: 180px; }
.amount-cell .input { text-align: right; min-height: 40px; }
.amount-field { position: relative; }
.save-state {
position: absolute;
right: calc(100% + var(--s-8));
top: 50%;
transform: translateY(-50%);
width: 64px;
text-align: right;
font-size: var(--fs-micro);
line-height: 1.2;
color: var(--c-text-muted);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.save-state.is-visible { opacity: 1; }
.save-state.is-saved   { color: var(--c-success); }
.save-state.is-error   { color: var(--c-danger); }
.input.is-saving { border-color: var(--c-primary); }
.input.is-saved  { border-color: var(--c-success); }
.input.is-error  { border-color: var(--c-danger); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-16); margin-top: var(--s-16); }
.modal-backdrop {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-24);
background: rgba(13, 37, 61, .45);
backdrop-filter: blur(2px);
}
.modal-backdrop[hidden] { display: none; }
.modal {
width: 100%;
max-width: 520px;
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
overflow-y: auto;
scrollbar-gutter: stable;
background: var(--c-bg);
border-radius: var(--r-16);
box-shadow: var(--shadow-2);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-24) var(--s-24) var(--s-8); }
.modal-head h3 { margin: 0; }
.modal-body { padding: var(--s-8) var(--s-24) var(--s-24); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s-8); padding: var(--s-16) var(--s-24); border-top: 1px solid var(--c-border); background: var(--c-bg-alt); border-radius: 0 0 var(--r-16) var(--r-16); }
.auth-page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--c-bg-alt);
}
.auth-main {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-32) var(--s-24);
}
.auth-card {
width: 100%;
max-width: 440px;
padding: var(--s-32);
background: var(--c-bg);
border-radius: var(--r-16);
box-shadow: var(--shadow-2);
}
.auth-card h1 { font-size: var(--fs-h1); letter-spacing: -0.5px; margin-bottom: var(--s-8); }
.auth-card .lead { color: var(--c-text-secondary); margin-bottom: var(--s-24); }
.auth-foot { text-align: center; margin-top: var(--s-24); font-size: var(--fs-base); color: var(--c-text-secondary); }
.auth-topbar { padding: var(--s-24); }
.auth-links { margin-top: var(--s-16); font-size: var(--fs-base); }
.auth-links + .auth-links { margin-top: var(--s-8); }
.btn-link {
padding: 0;
border: 0;
background: none;
color: var(--c-primary);
font: inherit;
cursor: pointer;
text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }
.btn-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-4); }
.auth-foot-sep {
padding-top: var(--s-24);
border-top: 1px solid var(--c-border);
}
.otp-boxes {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--s-8);
}
.otp-box {
width: 100%;
height: 48px;
padding: 0;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--c-text);
font-size: 20px;
font-variant-numeric: tabular-nums;
text-align: center;
}
.otp-box:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.otp-boxes.is-invalid .otp-box { border-color: var(--c-danger); }
.otp-source {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 480px) {
.otp-boxes { gap: 6px; }
.otp-box { font-size: var(--fs-h2); }
}
.qr-box {
display: flex;
justify-content: center;
padding: var(--s-16);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
}
.qr-box svg { display: block; width: 220px; height: 220px; }
.secret-box {
padding: var(--s-12);
border-radius: var(--r-8);
background: var(--c-bg-alt);
border: 1px solid var(--c-border);
font-variant-numeric: tabular-nums;
letter-spacing: .08em;
font-size: var(--fs-base);
text-align: center;
word-break: break-all;
}
.steps { counter-reset: step; margin: 0 0 var(--s-24); padding: 0; list-style: none; }
.steps li { counter-increment: step; position: relative; padding-left: var(--s-32); margin-bottom: var(--s-8); font-size: var(--fs-base); color: var(--c-text-secondary); }
.steps li::before {
content: counter(step);
position: absolute;
left: 0; top: 1px;
width: 20px; height: 20px;
border-radius: var(--r-pill);
background: var(--c-primary-soft);
color: var(--c-primary);
font-size: var(--fs-micro);
display: flex; align-items: center; justify-content: center;
}
.landing-header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 10;
}
.landing-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-16);
max-width: var(--content-max);
margin: 0 auto;
padding: var(--s-24);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-12); color: var(--c-text); }
.brand:hover { color: var(--c-text); }
.logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
border-radius: 22%;
background: linear-gradient(135deg, var(--c-brand-a) 0%, var(--c-brand-b) 100%);
box-shadow: 0 4px 10px rgba(83, 58, 253, .28);
}
.brand-name { font-size: 19px; font-weight: 600; letter-spacing: -0.4px; }
.landing-footer .brand-name { font-size: var(--fs-title); }
.hero {
position: relative;
padding: 128px var(--s-24) var(--s-64);
overflow: hidden;
background:
radial-gradient(55% 60% at 0% 0%,    rgba(229, 241, 242, .9)  0%, rgba(229, 241, 242, 0) 60%),
radial-gradient(60% 70% at 100% 30%, rgba(172, 208, 213, .70) 0%, rgba(172, 208, 213, 0) 65%),
radial-gradient(45% 45% at 85% 0%,   rgba(213, 232, 234, .9)  0%, rgba(213, 232, 234, 0) 60%),
linear-gradient(115deg, #f4fafa 0%, #edf6f7 45%, #e5f1f2 100%);
}
.hero-decor { position: absolute; inset: 0; pointer-events: none; }
.decor-dots {
position: absolute;
width: 72px;
height: 96px;
background-image: radial-gradient(circle, rgba(var(--petrol-700-rgb), .32) 1.6px, transparent 1.6px);
background-size: 16px 16px;
}
.decor-dots-left  { left: 6%;  top: 110px; }
.decor-dots-right { right: 6%; top: 96px; }
.decor-ring {
position: absolute;
width: 340px;
height: 340px;
border: 1px solid rgba(var(--petrol-700-rgb), .20);
border-radius: 50%;
}
.decor-ring-left  { left: -170px;  top: 150px; }
.decor-ring-right { right: -170px; top: 120px; }
.decor-badge {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--c-primary-soft);
color: var(--c-primary);
box-shadow: var(--shadow-1);
}
.decor-badge-left  { left: 12%;  top: 220px; }
.decor-badge-right {
right: 12%;
top: 210px;
background: #e2f4ea;
color: var(--c-success);
}
.hero-inner { position: relative; max-width: 780px; margin: 0 auto; text-align: center; }
.eyebrow-badge {
display: inline-flex;
align-items: center;
gap: var(--s-8);
padding: 6px var(--s-16);
border-radius: var(--r-pill);
background: rgba(var(--petrol-700-rgb), .10);
border: 1px solid rgba(var(--petrol-700-rgb), .16);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-primary);
}
.hero h1 {
margin: var(--s-24) 0 var(--s-16);
font-size: 60px;
line-height: 1.08;
letter-spacing: -1.8px;
font-weight: 700;
}
@media (max-width: 640px) { .hero-br { display: none; } }
.hero h1 .grad {
background: linear-gradient(100deg, var(--petrol-950) 0%, var(--c-primary) 45%, var(--petrol-300) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero .subheadline {
max-width: 640px;
margin: 0 auto var(--s-32);
font-size: 17px;
line-height: 1.65;
color: #4a5670;
}
.hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--s-16); flex-wrap: wrap; }
.landing-header .btn, .hero-actions .btn { border-radius: var(--r-12); }
.hero-actions .btn-secondary { background: var(--c-bg); }
.mockup-wrap { position: relative; max-width: 1010px; margin: var(--s-64) auto 0; }
.mockup {
border-radius: var(--r-16);
border: 1px solid rgba(13, 37, 61, .06);
background: var(--c-bg);
box-shadow: 0 24px 60px rgba(var(--petrol-950-rgb), .16), 0 4px 14px rgba(var(--petrol-950-rgb), .08);
overflow: hidden;
}
.mockup-bar {
display: flex;
align-items: center;
gap: var(--s-8);
padding: var(--s-12) var(--s-16);
border-bottom: 1px solid var(--c-border);
background: var(--c-bg-alt);
}
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-border-strong); }
.mockup-body { padding: var(--s-24); }
.mockup-caption { margin-top: var(--s-24); text-align: center; font-size: var(--fs-base); color: var(--c-text-secondary); }
.sidebar-nav-guest { flex: none; margin-bottom: var(--s-8); }
.sidebar-link.is-locked { color: var(--c-text-muted); }
.sidebar-link.is-locked:hover { color: var(--c-text-secondary); background: var(--c-bg-alt); }
.sidebar-link.is-locked .sidebar-icon { color: var(--c-text-muted); }
.sidebar-lock {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
margin-left: auto;
border-radius: 7px;
color: var(--c-text-secondary);
background: var(--c-bg-alt);
}
.sidebar-locked-note {
margin: 7px var(--s-12) 0;
color: var(--c-text-muted);
font-size: var(--fs-micro);
line-height: 1.4;
}
.guest-card {
position: relative;
overflow: hidden;
margin-top: auto;
border-radius: 14px;
padding: 18px;
color: var(--c-on-accent);
background: var(--petrol-900);
box-shadow: 0 12px 30px rgba(var(--petrol-950-rgb), .16);
}
.guest-card::before {
content: "";
position: absolute;
right: -40px;
top: -48px;
width: 124px;
height: 124px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 50%;
}
.guest-card::after {
content: "";
position: absolute;
right: 19px;
top: 23px;
width: 38px;
height: 38px;
background-image: radial-gradient(circle, rgba(255, 255, 255, .26) 1.4px, transparent 1.5px);
background-size: 8px 8px;
}
.guest-card > * { position: relative; z-index: 1; }
.guest-card-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 10px;
color: #d9f1f2;
background: rgba(255, 255, 255, .11);
}
.guest-card-title {
color: var(--c-on-accent);
margin: 15px 0 7px;
max-width: 180px;
font-size: 19px;
font-weight: 600;
line-height: 1.22;
letter-spacing: -.025em;
}
.guest-card-text {
margin: 0;
color: #c4dde2;
font-size: var(--fs-caption);
line-height: 1.5;
}
.guest-card-cta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-8);
width: 100%;
min-height: 42px;
margin-top: 17px;
border-radius: 9px;
color: var(--petrol-900);
background: var(--c-bg);
font-size: var(--fs-body);
font-weight: 600;
box-shadow: 0 5px 14px rgba(3, 30, 39, .18);
transition: transform .12s ease, box-shadow .16s ease;
}
.guest-card-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(3, 30, 39, .24); }
.guest-card-cta:active { transform: translateY(0); }
.guest-card-login {
display: block;
margin-top: var(--s-12);
color: #d9eef1;
font-size: var(--fs-caption);
text-align: center;
text-decoration: underline;
text-underline-offset: 3px;
}
.guest-card-login:hover { color: var(--c-on-accent); }
.guest-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 13px 4px 0;
color: var(--c-text-muted);
font-size: var(--fs-micro);
}
.guest-trust svg { flex: none; color: var(--c-success); }
.has-rail .guest-card { padding: var(--s-12) var(--s-8); display: grid; justify-items: center; }
.has-rail .guest-card::before,
.has-rail .guest-card::after,
.has-rail .guest-card-cta-text,
.has-rail .guest-card-title,
.has-rail .guest-card-text,
.has-rail .guest-card-login,
.has-rail .sidebar-locked-note { display: none; }
.has-rail .guest-card-cta { width: 42px; min-height: 42px; margin-top: var(--s-8); padding: 0; }
.has-rail .guest-trust { margin: var(--s-8) 0 0; }
.has-rail .guest-trust-text { display: none; }
.has-rail .guest-trust svg { margin: 0 auto; }
.has-rail .sidebar-lock {
position: absolute;
right: 6px;
bottom: 6px;
width: 17px;
height: 17px;
border: 2px solid var(--c-bg);
border-radius: 6px;
}
.has-rail .sidebar-link.is-locked { position: relative; }
@media (max-width: 768px) {
.is-demo-guest .sidebar,
.is-demo-guest .shell-scrim { display: none; }
.is-demo-guest .shell { grid-template-columns: minmax(0, 1fr); }
}
.topbar-demo-chip {
display: none;
flex: none;
border-radius: 999px;
padding: 3px 9px;
color: var(--c-primary);
background: var(--c-primary-soft);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
}
@media (max-width: 768px) {
.topbar-demo-chip { display: inline-flex; align-items: center; order: 2; flex: none; }
}
.mk-project-card { padding: var(--s-16); }
.mk-months {
display: flex;
align-items: center;
gap: var(--s-8);
margin-bottom: var(--s-16);
padding: var(--s-8) var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
}
.mk-month {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 0;
overflow: hidden;
padding: 4px var(--s-8);
border-radius: var(--r-8);
line-height: 1.25;
}
.mk-month .k { display: block; font-size: 10px; color: var(--c-text-secondary); }
.mk-month .v {
display: block;
font-size: var(--fs-caption);
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--c-text);
}
.mk-month.is-current { background: var(--c-primary-soft); }
.mk-month.is-current .k,
.mk-month.is-current .v { color: var(--c-primary); }
.mk-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-8); }
.mk-panel-note { font-size: 10px; color: var(--c-text-secondary); white-space: nowrap; }
.mk-project-head { display: flex; align-items: flex-start; gap: var(--s-8); margin-bottom: var(--s-12); }
.mk-project-icon {
display: grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
border-radius: var(--r-8);
background: var(--c-bg-alt);
}
.mk-project-icon img { width: 22px; height: 22px; }
.mk-project-title { flex: 1; min-width: 0; }
.mk-project-go { flex: none; color: var(--c-text-muted); font-size: var(--fs-body); }
.mk-project-kind {
display: block;
font-size: 9px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-primary);
}
.mk-project-name { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--c-text); }
.mk-project-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-8);
margin-bottom: 6px;
font-size: var(--fs-micro);
color: var(--c-text-secondary);
}
.mk-project-row .num { font-variant-numeric: tabular-nums; color: var(--c-text); }
.mk-project-row .num.is-plus  { color: var(--c-success); }
.mk-project-row .num.is-minus { color: var(--c-danger); }
.mk-project-row .num.is-big   { font-size: var(--fs-lg); font-weight: 600; color: var(--c-primary); }
.mk-project-progress { margin: var(--s-12) 0; }
.mk-project-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.mk-project-facts > div {
padding: 6px var(--s-8);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
}
.mk-project-facts .k { display: block; font-size: 9px; color: var(--c-text-secondary); }
.mk-project-facts .v { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--c-text); }
.mk-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-16); }
.mk-panel { border: 1px solid var(--c-border); border-radius: var(--r-12); padding: var(--s-16) var(--s-24); }
.mk-title {
margin: 0 0 var(--s-16);
font-size: var(--fs-body);
font-weight: 600;
color: var(--c-text);
}
.mk-alloc { display: flex; align-items: center; gap: var(--s-24); }
.mk-donut {
position: relative;
width: 156px;
height: 156px;
flex: none;
border-radius: 50%;
}
.mk-donut::before {
content: '';
position: absolute;
inset: 22px;
border-radius: 50%;
background: var(--c-bg);
}
.mk-donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-align: center;
}
.mk-donut-center .k { font-size: 10px; color: var(--c-text-muted); }
.mk-donut-center .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.mk-rows { flex: 1; min-width: 0; }
.mk-bar { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-12); font-size: var(--fs-caption); }
.mk-bar:last-child { margin-bottom: 0; }
.mk-bar .alloc-icon { flex: none; width: 22px; height: 22px; }
.mk-months-track { display: flex; flex: 1; min-width: 0; align-items: center; }
.mk-month-text { min-width: 0; }
.mk-month-node {
position: relative;
flex: none;
width: 7px;
height: 7px;
margin-left: auto;
border: 1.5px solid var(--c-border-strong);
border-radius: 50%;
background: var(--c-bg);
}
.mk-month-node::before {
content: "";
position: absolute;
top: 50%;
right: calc(100% + 5px);
width: 120px;
height: 1px;
background: var(--c-border);
}
.mk-month.is-current .mk-month-node { border-color: var(--c-primary); background: var(--c-primary); }
.mk-months-btn {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
color: var(--c-text-muted);
font-size: var(--fs-body);
line-height: 1;
}
.mockup .mrail { margin-top: var(--s-12); }
.mockup .mrail-head { margin-bottom: 6px; }
.mockup .mrail-caption { font-size: 9px; }
.mockup .mrail-percent { font-size: var(--fs-lg); }
.mockup .mrail-track { height: 16px; }
.mockup .mrail-dot { top: 2px; width: 11px; height: 11px; margin-left: -5.5px; border-width: 2.5px; }
.mockup .mrail-line,
.mockup .mrail-paid { top: 6px; height: 3px; }
.mockup .mrail-labels { font-size: 9px; }
.mk-bar .name { flex: 1; min-width: 0; color: var(--c-text); line-height: 1.25; }
.mk-bar .val { width: 56px; text-align: right; font-variant-numeric: tabular-nums; flex: none; }
.mk-bar .pct { width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text-muted); flex: none; }
.features { padding: var(--s-64) 0; }
.feature-card { padding: var(--s-24); border: 1px solid var(--c-border); border-radius: var(--r-12); background: var(--c-bg); }
.feature-icon {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
margin-bottom: var(--s-16);
border-radius: var(--r-8);
background: var(--c-primary-soft);
color: var(--c-primary);
}
.feature-card h3 { margin-bottom: var(--s-8); }
.feature-card p { margin: 0; color: var(--c-text-secondary); font-size: var(--fs-base); }
.accent-card {
position: relative;
display: flex;
align-items: center;
gap: var(--s-24);
margin-top: var(--s-32);
padding: var(--s-24) var(--s-32);
border: 1px solid var(--c-border);
border-radius: var(--r-16);
background: var(--c-bg);
overflow: hidden;
}
.accent-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex: none;
border-radius: 14px;
background: linear-gradient(135deg, var(--petrol-500) 0%, var(--c-primary) 100%);
box-shadow: 0 6px 14px rgba(var(--petrol-700-rgb), .28);
}
.accent-check {
position: absolute;
right: -4px;
bottom: -4px;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: #e8842c;
border: 2px solid var(--c-bg);
}
.accent-text { margin: 0; font-size: var(--fs-h2); line-height: 1.55; letter-spacing: -0.2px; color: var(--c-text); }
.accent-text b { color: var(--c-primary); font-weight: 600; }
.accent-dots { right: var(--s-24); top: 50%; transform: translateY(-50%); width: 88px; height: 56px; opacity: .5; }
.landing-footer { padding: var(--s-24) 0; border-top: 1px solid var(--c-border); background: var(--c-bg); }
.landing-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); flex-wrap: wrap; font-size: var(--fs-base); color: var(--c-text-secondary); }
.landing-footer a { color: var(--c-text-secondary); }
.landing-footer a:hover { color: var(--c-primary); }
.error-page {
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 0;
background: var(--c-bg-alt);
}
.err-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-16);
padding: var(--s-24) var(--s-32);
}
.err-main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-16);
padding: var(--s-16) var(--s-24) var(--s-64);
text-align: center;
}
.err-art { width: min(520px, 90vw); height: auto; margin-bottom: var(--s-8); }
.err-main h1 {
max-width: 15ch;
margin: 0;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -1px;
}
.err-lead { max-width: 46ch; margin: 0; color: var(--c-text-secondary); font-size: 17px; }
.err-main .btn { margin-top: var(--s-8); }
.err-divider {
display: flex;
align-items: center;
gap: var(--s-16);
width: min(760px, 100%);
margin: var(--s-32) 0 0;
color: var(--c-text-muted);
font-size: var(--fs-base);
}
.err-divider::before,
.err-divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }
.err-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--s-16);
width: min(760px, 100%);
margin-top: var(--s-16);
}
.err-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
padding: var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
color: var(--c-text);
font-weight: 500;
text-decoration: none;
transition: border-color .15s ease, transform .15s ease;
}
.err-card:hover { border-color: var(--c-primary); transform: translateY(-1px); color: var(--c-primary); }
.err-card span { color: var(--c-primary); }
@media (max-width: 768px) {
.err-top { padding: var(--s-16); }
.err-main h1 { font-size: 30px; }
.err-lead { font-size: var(--fs-lg); }
}
@media (max-width: 1024px) {
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-cols { grid-template-columns: 1fr; }
.hero h1 { font-size: 44px; letter-spacing: -1.1px; }
}
@media (max-width: 768px) {
body { font-size: var(--fs-lg); }
.container { padding: 0 var(--s-16); }
.page { padding: var(--s-24) 0 var(--s-32); }
h1 { font-size: 26px; letter-spacing: -0.5px; }
h2 { font-size: 20px; }
.hero { padding: 104px var(--s-16) var(--s-32); }
.hero h1 { font-size: var(--fs-display); letter-spacing: -0.8px; }
.hero .subheadline { font-size: var(--fs-title); }
.hero-actions .btn { width: 100%; }
.grid-3 { grid-template-columns: 1fr; }
.mk-month:nth-of-type(1),
.mk-month:nth-of-type(2) { display: none; }
.mk-alloc { flex-direction: column; align-items: stretch; gap: var(--s-16); }
.mk-donut { align-self: center; }
.app-header-inner { padding: 0 var(--s-16); gap: var(--s-12); }
.app-nav { display: none; }
.app-nav.is-open {
display: flex;
position: absolute;
top: var(--header-h);
left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--s-8);
background: var(--c-bg);
border-bottom: 1px solid var(--c-border);
box-shadow: var(--shadow-2);
}
.app-nav.is-open a { min-height: 44px; border-radius: var(--r-8); }
.nav-toggle { display: inline-flex !important; }
.is-admin .app-header-inner { min-width: 0; }
.is-admin .app-header-inner > * { min-width: 0; }
.is-admin .wordmark { flex: 0 1 auto; overflow: hidden; }
.is-admin .wordmark > span {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-width: 0;
font-size: 0;
}
.is-admin .wordmark > span > b { display: none; }
.is-admin .wordmark > span > .badge { font-size: var(--fs-micro); }
.is-admin .app-header-inner form { flex: 0 0 auto; }
.card-body { padding: var(--s-16); }
.auth-card { padding: var(--s-24); box-shadow: var(--shadow-1); }
.alloc-table {
max-height: none;
overflow: visible;
}
.table-cards thead { display: none; }
.table-cards tbody tr {
display: block;
margin-bottom: var(--s-12);
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
}
.table-cards tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-16);
padding: var(--s-4) 0;
border: 0;
text-align: right;
min-width: 0;
overflow-wrap: anywhere;
}
.table-cards tbody td::before {
content: attr(data-label);
flex: none;
font-size: var(--fs-caption);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--c-text-muted);
text-align: left;
}
.table-cards tbody td:empty { display: none; }
.row-go-cell { display: none; }
.table-cards .row-actions { justify-content: flex-end; width: 100%; }
.table-cards tfoot td { display: flex; justify-content: space-between; }
.table-cards[data-sortable] thead {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
margin-bottom: var(--s-12);
}
.table-cards[data-sortable] thead tr { display: contents; }
.table-cards[data-sortable] thead th { display: none; border-bottom: 0; padding: 0; }
.table-cards[data-sortable] thead th[data-sort-ready="1"] { display: block; }
.table-cards[data-sortable] .th-sort {
width: auto;
padding: 6px var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
}
.table-cards[data-sortable] th[aria-sort="ascending"] .th-sort,
.table-cards[data-sortable] th[aria-sort="descending"] .th-sort {
border-color: var(--c-primary);
background: var(--c-primary-soft);
}
.save-state {
right: 0;
top: calc(100% + 2px);
transform: none;
}
.dropdown-menu { min-width: 220px; }
.modal { max-width: none; }
}
.nav-toggle { display: none; }
.page-dashboard { background: #f7f8fb; }
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: none;
border-radius: var(--r-8);
}
.stat-icon.is-income    { background: var(--c-info-soft); color: var(--c-info); }
.stat-icon.is-remaining { background: #e6f6ee; color: #1e8e5a; }
.stat-icon.is-spent     { background: #fdeaf1; color: #ea2261; }
.stat-icon.is-balance   { background: var(--c-primary-soft); color: var(--c-primary); }
.modal-wide { max-width: 620px; }
.stat-cell-click {
position: relative;
cursor: pointer;
border-radius: var(--r-12);
background: var(--c-bg);
transition:
transform .2s cubic-bezier(.2, .7, .3, 1),
box-shadow .2s cubic-bezier(.2, .7, .3, 1);
}
.stat-cell-click.is-accent {
background: var(--c-primary-soft);
transition:
transform .2s cubic-bezier(.2, .7, .3, 1),
box-shadow .2s cubic-bezier(.2, .7, .3, 1);
}
.stat-cell-click:hover,
.stat-cell-click:focus-visible {
z-index: 2;
transform: translateY(-4px);
box-shadow:
0 14px 30px rgba(var(--petrol-950-rgb), .16),
0 4px 10px rgba(var(--petrol-950-rgb), .08),
inset 0 0 0 1px var(--c-primary-border);
outline: none;
}
.stat-cell-click:active {
transform: translateY(-1px);
box-shadow:
0 6px 14px rgba(var(--petrol-950-rgb), .14),
inset 0 0 0 1px var(--c-primary-border);
transition-duration: .08s;
}
.stat-cell-click .stat-icon { transition: transform .2s cubic-bezier(.2, .7, .3, 1); }
.stat-cell-click:hover .stat-icon { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
.stat-cell-click,
.stat-cell-click .stat-icon { transition: box-shadow .15s ease; }
.stat-cell-click:hover,
.stat-cell-click:focus-visible,
.stat-cell-click:active { transform: none; }
.stat-cell-click:hover .stat-icon { transform: none; }
}
.month-picker { margin: 0; }
.select-inline {
width: auto;
min-width: 116px;
min-height: 34px;
padding: var(--s-4) var(--s-32) var(--s-4) var(--s-12);
font-size: var(--fs-body);
border-color: var(--c-border);
}
.dash-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--s-16);
align-items: start;
}
.dash-main { display: grid; gap: var(--s-16); min-width: 0; }
.dash-side { position: sticky; top: calc(var(--header-h) + var(--s-16)); min-width: 0; }
.dash-cols > *,
.dash-main > * { min-width: 0; }
.alloc-table {
--alloc-row-h: 40px;
--alloc-rows: 10;
max-height: calc(var(--alloc-row-h) * var(--alloc-rows));
overflow-y: auto;
}
.alloc {
display: grid;
grid-template-columns: minmax(200px, 0.6fr) 1.4fr;
gap: var(--s-24);
padding: var(--s-24);
align-items: center;
}
.alloc > * { min-width: 0; }
.donut-box { position: relative; width: 100%; height: 300px; }
.donut-box canvas { max-width: 100%; }
.donut-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
}
.donut-center-value {
max-width: 118px;
font-size: 21px;
line-height: 1.2;
letter-spacing: -0.5px;
font-variant-numeric: tabular-nums;
font-feature-settings: 'ss01', 'tnum';
}
.donut-center-note {
display: flex;
flex-direction: column;
max-width: 118px;
margin: var(--s-4) 0 0;
font-size: var(--fs-caption);
line-height: 1.25;
color: var(--c-text-muted);
}
.donut-center-share {
font-size: var(--fs-base);
color: var(--c-text-secondary);
font-variant-numeric: tabular-nums;
}
.table-alloc { font-size: var(--fs-body); }
.table-alloc td { padding: 10px var(--s-12); }
.table-alloc tbody td:first-child { display: flex; align-items: center; gap: var(--s-8); }
.table-alloc tfoot td { background: var(--c-bg-alt); border-top: 1px solid var(--c-border); }
.alloc-amount { position: relative; }
.alloc-amount.is-editable {
cursor: text;
border-radius: var(--r-6);
transition: background .15s ease, box-shadow .15s ease;
}
.alloc-amount.is-editable:hover,
.alloc-amount.is-editable:focus-visible {
background: var(--c-bg-alt);
box-shadow: inset 0 0 0 1px var(--c-border-strong);
outline: none;
}
.alloc-amount.is-editable:hover .alloc-amount-text { text-decoration: underline dotted; }
.alloc-amount.is-editing .alloc-amount-text { visibility: hidden; }
.table-alloc tbody tr.is-editing { background: var(--c-primary-soft); }
.alloc-edit {
position: absolute;
top: 50%;
right: -22px;
transform: translateY(-50%);
z-index: 3;
display: flex;
align-items: center;
}
.alloc-field { position: relative; display: block; }
.alloc-currency {
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
font-size: var(--fs-base);
color: var(--c-text-muted);
pointer-events: none;
}
.alloc-input {
width: 152px;
height: 36px;
padding: 0 12px 0 26px;
border: 1.5px solid var(--c-primary-border);
border-radius: var(--r-8);
background: var(--c-bg);
font-size: var(--fs-base);
font-variant-numeric: tabular-nums;
text-align: right;
box-shadow: 0 1px 2px rgba(var(--petrol-950-rgb), .05);
}
.alloc-input:focus {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-ring);
outline: none;
}
.alloc-input:disabled { opacity: .6; }
.alloc-amount.is-error .alloc-input { border-color: var(--c-danger); }
.alloc-edit[data-error]::after {
content: attr(data-error);
position: absolute;
top: calc(100% + 3px);
right: 0;
padding: 2px 7px;
border-radius: var(--r-6);
background: var(--c-bg);
box-shadow: 0 4px 12px rgba(var(--petrol-950-rgb), .14);
white-space: nowrap;
font-size: var(--fs-micro);
font-weight: 400;
color: var(--c-danger);
}
.table-overview { font-size: var(--fs-body); }
.table-overview th { padding: var(--s-8) 10px; }
.ov-value {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
white-space: nowrap;
position: relative;
}
.ov-value.is-better { color: var(--c-success); }
.ov-value.is-worse  { color: var(--c-danger); }
.ov-arrow { flex: 0 0 auto; }
.table-overview .ov-value.is-better .num.is-negative,
.table-overview .ov-value.is-worse .num.is-negative { color: inherit; }
.table-overview td {
padding: 10px;
white-space: nowrap;
}
.table-overview .num.is-negative { color: var(--c-danger); }
.table-overview th.is-current,
.table-overview td.is-current { background: var(--c-primary-wash); }
.table-overview .ov-month-head.is-current { color: var(--c-primary); }
.table-overview td.is-empty,
.table-overview .ov-month-head.is-empty { color: var(--c-text-muted); }
.table-overview .ov-add {
display: flex;
justify-content: center;
min-height: 0;
margin-top: 1px;
padding: 1px 6px;
border-radius: var(--r-6);
font-size: var(--fs-micro);
line-height: 1.2;
font-weight: 500;
white-space: nowrap;
}
@media (max-width: 768px) {
.table-overview .ov-add {
display: inline-flex;
min-height: 44px;
margin-top: var(--s-4);
padding: var(--s-4) var(--s-12);
font-size: var(--fs-body);
}
}
.ov-income-head {
display: inline-flex;
align-items: center;
gap: var(--s-8);
}
.table-overview .ov-avg-head,
.table-overview .ov-avg-cell { background: var(--c-primary-soft); }
.table-overview .ov-avg-cell { color: var(--c-primary); font-weight: 500; }
.table-overview .ov-avg-cell .num.is-negative { color: var(--c-danger-on-soft); }
.table-overview.is-flipped {
--ov-label: 190px;
--ov-avg: 92px;
table-layout: fixed;
width: calc(var(--ov-label) + var(--ov-avg) + var(--ov-cols) * ((100% - var(--ov-label) - var(--ov-avg)) / 6));
min-width: 100%;
}
.table-overview.is-flipped .ov-corner,
.table-overview.is-flipped .ov-rowhead { width: var(--ov-label); }
.table-overview.is-flipped .ov-avg-head,
.table-overview.is-flipped .ov-avg-cell { width: var(--ov-avg); }
.table-overview.is-flipped .ov-avg-head,
.table-overview.is-flipped .ov-avg-cell {
position: sticky;
left: var(--ov-label);
z-index: 2;
}
.table-overview.is-flipped .ov-avg-head { z-index: 3; }
.table-overview.is-flipped .ov-month-head,
.table-overview.is-flipped .ov-avg-head {
width: calc((100% - var(--ov-label, 190px)) / var(--ov-cols));
}
.table-overview.is-flipped .ov-corner,
.table-overview.is-flipped .ov-rowhead {
text-transform: none;
letter-spacing: normal;
color: var(--c-text);
position: sticky;
left: 0;
z-index: 2;
background: var(--c-bg);
text-align: left;
padding: 10px;
font-size: var(--fs-body);
font-weight: 600;
line-height: 1.5;
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
}
.table-overview.is-flipped .ov-head-inner { align-items: center; }
.table-overview.is-flipped .ov-head-text {
overflow: visible;
text-overflow: clip;
white-space: normal;
word-break: keep-all;
overflow-wrap: break-word;
}
.table-overview.is-flipped .ov-corner { z-index: 3; }
.table-overview.is-flipped .ov-row-income .ov-rowhead,
.table-overview.is-flipped .ov-row-total .ov-rowhead,
.table-overview.is-flipped .ov-row-remaining .ov-rowhead {
background: var(--c-bg-alt);
text-transform: uppercase;
letter-spacing: .05em;
font-size: var(--fs-caption);
font-weight: 500;
color: var(--c-text-muted);
}
.table-overview.is-flipped .ov-corner {
text-transform: uppercase;
letter-spacing: .05em;
font-size: var(--fs-caption);
font-weight: 400;
color: var(--c-text-muted);
}
.table-overview.is-flipped .ov-row-income,
.table-overview.is-flipped .ov-row-total,
.table-overview.is-flipped .ov-row-remaining { background: var(--c-bg-alt); font-weight: 500; }
.table-overview.is-flipped .ov-month-head { white-space: nowrap; }
.table-overview.is-flipped .ov-row-group:hover { background: var(--c-bg-alt); }
.table-overview.is-flipped .ov-month-head,
.table-overview.is-flipped .ov-avg-head { scroll-snap-align: start; }
.ov-wrap { scrollbar-width: none; }
.ov-wrap::-webkit-scrollbar { width: 0; height: 0; }
.ov-month-nav {
display: inline-flex;
align-items: center;
gap: var(--s-4);
min-height: 32px;
padding: var(--s-4) var(--s-8);
border: 1px solid var(--c-primary-border);
border-radius: var(--r-8);
background: var(--c-bg);
}
.ov-month-nav[hidden],
.ov-month-nav-btn[hidden] { display: none; }
.ov-month-nav-label {
font-size: var(--fs-caption);
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--c-primary);
}
.ov-month-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: var(--r-6);
background: transparent;
color: var(--c-primary);
cursor: pointer;
}
.ov-month-nav-btn:hover:not(:disabled) { background: var(--c-primary-soft); }
.ov-month-nav-btn:disabled { opacity: .35; cursor: default; }
.ov-year-nav { margin: 0; }
.ov-year-nav .ov-month-nav-label {
display: inline-flex;
align-items: center;
min-height: 24px;
}
.ov-avg-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-right: var(--s-8);
border-radius: var(--r-8);
background: var(--c-bg);
vertical-align: middle;
}
.ov-avg-label {
font-size: var(--fs-caption);
letter-spacing: .05em;
text-transform: uppercase;
vertical-align: middle;
}
.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
.side-card .card-body { padding: var(--s-16); }
.pcard-list { display: grid; gap: var(--s-16); }
.pcard {
border: 1px solid var(--c-border);
border-radius: var(--r-12);
overflow: hidden;
background: var(--c-bg);
}
.pcard-body { padding: var(--s-12) var(--s-16) var(--s-16); }
.pcard-mini { display: none; }
.pcard.is-collapsed .pcard-mini {
display: flex;
align-items: center;
gap: var(--s-8);
padding: 0 var(--s-16) var(--s-12);
}
.pcard-mini-track {
flex: 1 1 auto;
height: 5px;
border-radius: 3px;
background: var(--c-border);
overflow: hidden;
}
.pcard-mini-fill {
display: block;
height: 100%;
border-radius: 3px;
background: var(--c-primary);
}
.pcard-mini-pct {
flex: 0 0 auto;
color: var(--c-primary);
font-size: var(--fs-caption);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.landing-flashes { position: relative; z-index: 30; padding-top: 92px; margin-bottom: -76px; }
.feedback-head { align-items: flex-start; gap: var(--s-12); }
.feedback-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: none;
border-radius: var(--r-12);
background: var(--c-primary-soft);
color: var(--c-primary);
}
.linklike {
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--c-text-secondary);
cursor: pointer;
transition: color .15s ease;
}
.linklike:hover { color: var(--c-primary); }
.support-msg {
display: block;
max-width: 340px;
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--c-primary);
text-align: left;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.support-msg:hover { color: var(--c-primary-hover); text-decoration: underline; }
.support-full { white-space: pre-wrap; overflow-wrap: break-word; margin: 0; }
tr.is-fresh td { background: var(--c-primary-soft); }
.support-status.is-new         { border-color: var(--c-primary-border); color: var(--c-primary); }
.support-status.is-in_progress { border-color: #ecd4a8; color: var(--c-warning); }
.support-status.is-completed   { border-color: #b7e0cb; color: var(--c-success); }
.feedback-success { max-width: 440px; position: relative; }
.feedback-success-close {
position: absolute;
top: var(--s-12);
right: var(--s-12);
z-index: 1;
}
.feedback-success-body {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-8);
text-align: center;
padding: var(--s-32) var(--s-24) var(--s-24);
}
.feedback-success-body p { max-width: 360px; color: var(--c-text-secondary); }
.feedback-success-body .btn { margin-top: var(--s-8); min-width: 140px; }
.feedback-success-timer { margin: 0; }
.success-orb {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--c-success-soft);
color: var(--c-success-on-soft);
margin-bottom: var(--s-8);
}
.feedback-message { max-width: 460px; }
.drawer-backdrop { justify-content: flex-end; padding: 0; }
.drawer {
max-width: 660px;
width: 100%;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
border-radius: var(--r-16) 0 0 var(--r-16);
display: flex;
flex-direction: column;
}
.drawer form { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.drawer .modal-body { flex: 1 1 auto; overflow-y: auto; }
.drawer .modal-foot { border-radius: 0 0 0 var(--r-16); }
.drawer-note {
padding: var(--s-12) var(--s-16);
border-radius: var(--r-8);
background: var(--c-primary-soft);
font-size: var(--fs-body);
color: var(--c-text-secondary);
margin-bottom: var(--s-16);
}
.drawer-note b { color: var(--c-primary); font-weight: 500; }
.copy-source { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-12); }
.copy-source-label { flex: none; font-weight: 500; color: var(--c-primary); }
.copy-source .select { flex: 1 1 180px; min-width: 0; background-color: var(--c-bg); }
.drawer-card {
border: 1px solid var(--c-border);
border-radius: var(--r-12);
padding: var(--s-16);
margin-bottom: var(--s-16);
}
.drawer-title { margin: 0 0 var(--s-12); font-size: var(--fs-lg); font-weight: 500; }
.drawer-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
@media (min-width: 769px) {
.drawer-table { table-layout: fixed; }
.drawer-table th.num, .drawer-table td.num { width: 104px; }
.drawer-table:has(.drawer-row-delete) th.num,
.drawer-table:has(.drawer-row-delete) td.num { width: 140px; }
.drawer-table td:first-child { overflow-wrap: anywhere; }
}
@media (max-width: 768px) {
.drawer-table th.num, .drawer-table td.num { min-width: 76px; }
.drawer-table td.drawer-input-cell .input { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
.drawer-table th[data-prefill-short],
.drawer-table td[data-prefill-ref],
.drawer-table td[data-prefill-total] { display: none; }
}
.drawer-table th {
padding: var(--s-4) var(--s-8);
font-size: var(--fs-micro);
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--c-text-muted);
text-align: left;
border-bottom: 1px solid var(--c-border);
}
.drawer-table th.num { text-align: right; }
.drawer-table td { padding: var(--s-8); border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.drawer-table td.num, .drawer-table th.num { text-align: right; }
.drawer-name {
display: flex;
align-items: center;
gap: var(--s-8);
min-width: 0;
}
.drawer-name-text { min-width: 0; overflow-wrap: break-word; }
.drawer-table tfoot td { padding: var(--s-8); font-weight: 500; border-bottom: 0; }
[data-drawer-total],
[data-drawer-rest] { overflow-wrap: anywhere; }
.drawer-limit-note {
margin-top: var(--s-8);
color: var(--c-danger);
font-size: var(--fs-body);
overflow-wrap: anywhere;
}
.drawer-input-cell { width: 170px; }
.drawer-input-cell .input { min-height: 38px; font-size: var(--fs-base); }
.drawer-add {
display: inline-flex;
align-items: center;
gap: var(--s-4);
margin-top: var(--s-8);
font-size: var(--fs-body);
}
button.drawer-add {
padding: 0;
border: 0;
background: none;
color: var(--c-primary);
font: inherit;
font-size: var(--fs-body);
cursor: pointer;
}
button.drawer-add:hover { text-decoration: underline; }
.empty-orb {
display: flex;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
margin: 0 auto var(--s-16);
border-radius: 50%;
background: var(--c-primary-soft);
color: var(--petrol-500);
}
@media (max-width: 768px) {
.drawer { border-radius: 0; max-width: none; }
.drawer-input-cell { width: 120px; }
}
.icon-picker {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s-8);
}
.icon-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: var(--s-8) var(--s-4);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--c-text-secondary);
font: inherit;
font-size: var(--fs-micro);
cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.icon-option:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.icon-option.is-selected {
border-color: var(--c-primary);
background: var(--c-primary-soft);
color: var(--c-primary);
}
@media (max-width: 480px) {
.icon-picker { grid-template-columns: repeat(3, 1fr); }
}
.pcard-rows { margin: 0; }
.pcard-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-12);
padding: 7px 0;
border-bottom: 1px solid var(--c-border);
font-size: var(--fs-body);
}
.pcard-rows .pcard-row:last-child { border-bottom: 0; }
.pcard-row dt { color: var(--c-text-secondary); }
.pcard-row dd { margin: 0; text-align: right; }
.pcard-row dd.is-paid { color: var(--c-success); }
.pcard-row dd.is-due  { color: var(--c-danger); }
.pcard-actions {
display: flex;
gap: var(--s-8);
}
.pcard-actions .btn {
flex: 1 1 0;
min-width: 0;
gap: var(--s-4);
padding-left: var(--s-8);
padding-right: var(--s-8);
font-size: var(--fs-body);
}
.btn-soft {
background: var(--c-primary-soft);
border-color: transparent;
color: var(--c-primary);
border-radius: var(--r-8);
min-height: 38px;
}
.btn-soft:hover { background: var(--c-primary-soft-strong); color: var(--c-primary-hover); }
.demo-first { margin-top: var(--s-12); }
.demo-first .hint { margin-top: var(--s-8); }
.bpanel-limit {
margin-top: var(--s-8);
padding: var(--s-8) var(--s-12);
border-left: 3px solid var(--c-warning);
border-radius: var(--r-4);
background: #fffaf1;
max-width: 68ch;
}
.app-footer {
border-top: 1px solid var(--c-border);
background: var(--c-bg);
padding: var(--s-24) 0;
}
.app-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-16);
flex-wrap: wrap;
font-size: var(--fs-body);
color: var(--c-text-secondary);
}
.app-footer a { color: var(--c-text-secondary); }
.app-footer a:hover { color: var(--c-primary); }
.app-footer-links { display: flex; gap: var(--s-24); }
@media (max-width: 1100px) {
.dash-cols { grid-template-columns: 1fr; }
.dash-side { position: static; }
.pcard-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
.alloc { grid-template-columns: 1fr; padding: var(--s-16); }
}
@media (max-width: 768px) {
.table-alloc tbody td:first-child { justify-content: space-between; }
.table-alloc tfoot td { display: flex; justify-content: space-between; }
.table-alloc tfoot td:first-child::before { content: none; }
.drawer-input-cell { width: 124px; }
.drawer-input-cell .input { min-height: 34px; font-size: var(--fs-body); }
.copy-source { flex-direction: column; align-items: stretch; gap: var(--s-8); }
.copy-source .select { flex: none; }
.table-cards .alloc-edit { right: 0; gap: 6px; }
.table-cards .alloc-input { width: 118px; }
.app-footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s-8); }
}
.btn-soft {
background: var(--c-primary-soft);
border-color: transparent;
color: var(--c-primary);
}
.btn-soft:hover {
background: var(--c-primary-soft-strong);
border-color: transparent;
color: var(--c-primary);
}
.month-nav { flex-wrap: wrap; gap: var(--s-8); }
.budgets-table {
border-collapse: separate;
border-spacing: 0;
}
.budgets-table thead th { border-bottom: 1px solid var(--c-border); }
.budgets-table tbody td { border-bottom: 1px solid var(--c-border); }
.budgets-table tbody tr:last-child td { border-bottom: 0; }
.budget-row.is-open {
position: relative;
cursor: pointer;
transition:
transform .2s cubic-bezier(.2, .7, .3, 1),
box-shadow .2s cubic-bezier(.2, .7, .3, 1);
}
.budget-row.is-open td { background: var(--c-bg); }
.budget-row.is-open:hover,
.budget-row.is-open:focus-within {
z-index: 2;
transform: translateY(-2px);
box-shadow:
0 10px 24px rgba(16, 24, 40, .10),
0 2px 6px rgba(16, 24, 40, .05);
}
.budget-row.is-open:active {
transform: translateY(0);
box-shadow: 0 4px 10px rgba(16, 24, 40, .10);
transition-duration: .08s;
}
.budget-row.is-open:hover td,
.budget-row.is-open:focus-within td {
background: var(--c-bg);
border-bottom-color: transparent;
}
.budget-row.is-open:hover td:first-child,
.budget-row.is-open:focus-within td:first-child { border-radius: var(--r-12) 0 0 var(--r-12); }
.budget-row.is-open:hover td:last-child,
.budget-row.is-open:focus-within td:last-child { border-radius: 0 var(--r-12) var(--r-12) 0; }
.budget-row.is-open a.strong { text-decoration: none; }
.row-go-cell { width: 44px; padding-left: 0; text-align: right; }
.row-go {
display: inline-flex;
color: var(--c-text-muted);
opacity: 0;
transform: translateX(-4px);
transition: opacity .15s ease, transform .15s ease;
}
.budget-row.is-open:hover .row-go,
.budget-row.is-open:focus-within .row-go { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.row-go { transition: opacity .15s ease; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.budget-row.is-open { transition: box-shadow .15s ease; }
.budget-row.is-open:hover,
.budget-row.is-open:focus-within,
.budget-row.is-open:active { transform: none; }
}
.budget-row.is-missing td { opacity: .45; }
.budget-row.is-missing td[data-label="Status"] { opacity: 1; }
.budget-row.is-missing .strong { font-weight: 400; color: var(--c-text-muted); }
.budget-row.is-missing { cursor: default; }
.addb { max-width: 640px; }
.addb-body { padding-top: var(--s-8); }
.addb-title { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; margin: 0; }
.addb-month {
width: auto;
min-width: 160px;
height: 34px;
padding: 0 26px 0 8px;
border-color: transparent;
border-bottom-color: var(--c-border);
border-radius: var(--r-8) var(--r-8) 0 0;
background-color: transparent;
font-size: 17px;
font-weight: 600;
color: var(--c-primary);
}
.addb-month:hover { background-color: var(--c-bg-alt); }
.addb-setup {
display: flex;
align-items: center;
gap: var(--s-16);
padding-bottom: var(--s-12);
border-bottom: 1px solid var(--c-border);
}
.addb-setup .field { flex: 1 1 240px; max-width: 320px; margin: 0; }
.addb-tabs {
display: flex;
gap: var(--s-4);
margin-bottom: var(--s-16);
padding: var(--s-4);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg-alt);
}
.addb-tab {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-8);
min-height: 40px;
padding: 0 var(--s-12);
border-radius: var(--r-8);
color: var(--c-text-secondary);
font-weight: 600;
cursor: pointer;
}
.addb-tab input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.addb-tab:has(input:checked) {
background: var(--c-bg);
color: var(--c-primary);
box-shadow: var(--shadow-1);
}
.addb-tab:hover:not(:has(input:checked)) { color: var(--c-primary); }
.addb-tab.is-off {
opacity: .5;
cursor: not-allowed;
}
.addb-tab.is-off:hover { color: var(--c-text-secondary); }
.addb-tab:focus-within {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
}
.addb-source { position: relative; }
.addb-source .label {
position: absolute;
top: 7px;
left: 13px;
z-index: 1;
margin: 0;
color: var(--c-text-muted);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
pointer-events: none;
}
.addb-source-select { min-height: 52px; padding-top: 20px; padding-bottom: var(--s-4); }
.addb-source:has(.addb-source-select:disabled) .label { color: var(--c-text-muted); opacity: .6; }
.addb-section { margin-top: var(--s-16); }
.addb-section + .addb-section { margin-top: var(--s-24); }
.addb-section-title {
display: flex;
align-items: center;
min-height: 24px;
margin: 0 0 var(--s-4);
padding-bottom: var(--s-8);
border-bottom: 1px solid var(--c-border);
color: var(--c-text-muted);
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
}
.addb-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px;
gap: var(--s-8);
align-items: center;
min-height: 44px;
border-bottom: 1px solid var(--c-border);
}
.addb-name { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.addb-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addb-total { font-weight: 600; border-bottom: 0; background: var(--c-bg-alt); }
.addb-total .addb-name { padding-left: var(--s-8); }
.addb-total-value { padding-right: var(--s-12); text-align: right; }
.addb-foot { justify-content: flex-end; padding: var(--s-12) var(--s-24); }
.addb-actions { display: flex; gap: var(--s-8); }
@media (max-width: 640px) {
.addb-row { grid-template-columns: minmax(0, 1fr) 120px; }
.addb-setup { flex-wrap: wrap; align-items: flex-start; }
.addb-setup .field { max-width: none; flex-basis: 100%; }
.addb-actions { width: 100%; }
.addb-actions .btn { flex: 1 1 0; }
}
.budgets-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-8);
margin-bottom: var(--s-12);
}
.budgets-search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 260px;
max-width: 340px;
color: var(--c-text-muted);
}
.budgets-search svg { position: absolute; left: 12px; pointer-events: none; }
.budgets-search .input { width: 100%; padding-left: 38px; }
.budgets-toolbar-right {
display: flex;
align-items: center;
gap: var(--s-12);
margin-left: auto;
}
.result-meta { color: var(--c-text-muted); font-size: var(--fs-caption); }
.budgets-sort { display: none; }
.sort-head a {
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
text-decoration: none;
}
.sort-head a:hover { color: var(--c-text); }
.sort-head.is-current a { color: var(--c-text); }
.sort-arrow { font-size: var(--fs-micro); }
.sort-idle { opacity: .35; }
.sort-head.num a { justify-content: flex-end; }
.actions-cell { width: 64px; text-align: right; }
.actions-cell form { display: inline-flex; }
.row-delete {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--r-8);
color: var(--c-text-muted);
background: none;
cursor: pointer;
transition: color .15s ease, background-color .15s ease;
}
.row-delete:hover,
.row-delete:focus-visible {
color: var(--c-danger-on-soft);
background: var(--c-danger-soft);
}
.cell-total { display: block; }
.cell-parts {
display: block;
margin-top: 2px;
color: var(--c-text-muted);
font-size: var(--fs-micro);
font-weight: 400;
}
.created-cell { color: var(--c-text-secondary); font-size: var(--fs-body); white-space: nowrap; }
.table-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-16);
padding: var(--s-12) var(--s-16);
border-top: 1px solid var(--c-border);
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.table-legend { display: inline-flex; align-items: center; gap: 7px; }
.table-legend svg { flex: none; color: var(--c-primary); }
.table-pages { white-space: nowrap; }
.modal-icon {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: var(--r-8);
}
.modal-icon.is-danger { color: var(--c-danger-on-soft); background: var(--c-danger-soft); }
@media (max-width: 1100px) {
.budgets-table .created-cell { display: none; }
}
@media (max-width: 900px) {
.budgets-sort { display: block; flex: 1 1 100%; }
.budgets-sort .select { width: 100%; }
.budgets-search { max-width: none; flex: 1 1 100%; }
.budgets-search-go { display: none; }
.budgets-toolbar-right {
flex-wrap: wrap;
width: 100%;
margin-left: 0;
}
.result-meta { flex: 1 1 100%; }
.budgets-table .created-cell { display: flex; }
.budgets-table .actions-cell { width: auto; }
.budgets-table tbody td { flex-wrap: wrap; row-gap: 0; }
.budgets-table .cell-total { text-align: right; }
.budgets-table .cell-parts { flex: 1 0 100%; margin-top: 0; text-align: right; }
.budgets-table .row-go-cell { display: none; }
.table-foot { flex-direction: column; align-items: flex-start; gap: var(--s-8); }
}
.pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-4);
margin-top: var(--s-16);
}
.page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 var(--s-8);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
font-size: var(--fs-base);
color: var(--c-text-secondary);
text-decoration: none;
background: var(--c-bg);
transition: border-color .15s ease, color .15s ease, background .15s ease;
}
a.page-link:hover {
border-color: var(--c-primary);
color: var(--c-primary);
background: var(--c-primary-soft);
}
.page-link.is-current {
border-color: var(--c-primary);
background: var(--c-primary);
color: var(--c-on-accent);
}
.page-link.is-disabled { opacity: .4; }
.has-js .month-go { display: none; }
.month-nav .month-picker { display: flex; align-items: center; gap: var(--s-8); margin: 0; }
.month-nav .select-inline { min-height: 32px; font-weight: 500; }
.month-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: var(--s-16);
margin-bottom: var(--s-24);
}
.mstat {
padding: var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
box-shadow: var(--shadow-1);
}
.mstat .stat-icon { margin-bottom: var(--s-12); }
.mstat.is-accent { background: var(--c-primary-soft); border-color: var(--c-primary-border); }
.mstat-value.is-accent { color: var(--c-primary); font-weight: 600; }
.mstat-value.is-accent.is-negative { color: var(--c-danger); }
.month-stats .mstat-row { display: flex; align-items: flex-start; gap: var(--s-12); }
.month-stats .mstat-text { min-width: 0; }
.month-stats .stat-icon { margin-bottom: 0; }
@media (max-width: 768px) {
.month-stats .mstat-row { display: block; }
.month-stats .stat-icon { margin-bottom: var(--s-8); }
}
.mstat-label { margin: 0; font-size: var(--fs-body); color: var(--c-text-secondary); }
.mstat-value {
margin-top: var(--s-4);
font-size: 21px;
line-height: 1.2;
letter-spacing: -0.5px;
font-variant-numeric: tabular-nums;
font-feature-settings: 'ss01', 'tnum';
}
.mstat-value.is-negative { color: var(--c-danger); }
.mstat-note { margin: var(--s-4) 0 0; font-size: var(--fs-caption); color: var(--c-text-muted); }
.stat-icon.is-rate { background: var(--c-warning-soft); color: var(--c-warning); }
.tab-a0 { --acc: var(--c-info);    --acc-soft: var(--c-info-soft); }
.tab-a1 { --acc: var(--c-primary); --acc-soft: var(--c-primary-soft); }
.tab-a2 { --acc: var(--c-success); --acc-soft: var(--c-success-soft); }
.tab-a3 { --acc: var(--c-warning); --acc-soft: var(--c-warning-soft); }
.tab-a4 { --acc: var(--c-dark);    --acc-soft: var(--petrol-050); }
.tabs-card { padding: 0; overflow: hidden; }
.tabs {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
padding: 0 var(--s-8);
border-bottom: 1px solid var(--c-border);
background: var(--c-bg-alt);
}
.tab {
padding: var(--s-12) var(--s-16);
border-bottom: 2px solid transparent;
font-size: var(--fs-base);
color: var(--c-text-secondary);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.tab:hover { color: var(--c-text); }
.tab.is-active {
color: var(--acc);
border-bottom-color: var(--acc);
font-weight: 500;
}
.tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.tab-panel[hidden] { display: none; }
.panel-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-16);
padding: var(--s-16) var(--s-24);
background: var(--acc-soft, var(--c-bg-alt));
border-bottom: 1px solid var(--c-border);
}
.panel-title { flex: 1 1 220px; }
.panel-title h3 { margin: 0; font-size: 17px; color: var(--acc); }
.panel-title p  { margin: 2px 0 0; }
@media (max-width: 768px) {
.month-nav { width: 100%; }
.month-nav .month-picker { flex: 1 1 auto; }
.month-nav .select-inline { width: 100%; }
.month-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tabs { overflow-x: auto; flex-wrap: nowrap; }
.panel-head { padding: var(--s-16); }
}
.project-title { display: flex; align-items: center; gap: var(--s-4); }
.star-form { display: inline-flex; flex: none; }
.project-plan {
margin: var(--s-12) 0 0;
padding-top: var(--s-12);
border-top: 1px solid var(--c-border);
font-size: var(--fs-body);
color: var(--c-text-secondary);
}
.project-plan strong { color: var(--c-text); font-weight: 600; }
.star {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--r-pill);
background: transparent;
font-size: var(--fs-h2);
line-height: 1;
color: var(--c-border-strong);
cursor: pointer;
transition: color .15s ease, background .15s ease, transform .1s ease;
}
button.star:hover { background: var(--c-warning-soft); color: #e0a72e; }
button.star:active { transform: scale(.92); }
.star:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.star.is-on { color: #c18b0e; }
.pcalc-sticky { background: var(--c-bg); }
.tabs-card:has(.pcalc-sticky) { overflow: clip; }
@media (min-width: 768px) and (min-height: 640px) {
.pcalc-sticky {
position: sticky;
bottom: 0;
z-index: 3;
margin: 0 calc(-1 * var(--pcalc-pad));
padding: var(--s-12) var(--pcalc-pad) var(--s-4);
border-top: 1px solid var(--c-border);
box-shadow: 0 -6px 16px -12px rgba(13, 37, 61, .35);
}
}
.pcalc-edit {
width: 100%;
max-width: 140px;
padding: 4px var(--s-8);
border: 1px solid transparent;
border-radius: var(--r-8);
background: var(--c-success-soft);
color: var(--c-success-on-soft);
font: inherit;
font-size: var(--fs-body);
font-variant-numeric: tabular-nums;
text-align: right;
}
.pcalc-edit:hover  { border-color: var(--c-border-strong); }
.pcalc-edit:focus  { outline: none; border-color: var(--c-primary); background: var(--c-bg); }
.pcalc-edit.is-manual { border-color: var(--c-primary); font-weight: 600; }
.pcalc-more td { padding: 0; }
.pcalc-more-btn {
display: flex;
align-items: center;
gap: var(--s-8);
width: 100%;
padding: var(--s-12) var(--s-16);
border: 0;
background: none;
color: var(--c-primary);
font: inherit;
font-size: var(--fs-body);
cursor: pointer;
}
.pcalc-more-btn:hover { background: var(--c-bg-alt); }
.pcalc-more-chevron { display: inline-block; font-size: var(--fs-title); line-height: 1; }
.pcalc-more-chevron.is-up { transform: rotate(180deg); }
.th-sort {
display: inline-flex;
align-items: center;
gap: var(--s-4);
color: inherit;
text-decoration: none;
}
.th-sort:hover { color: var(--c-primary); text-decoration: underline; }
.th-sort:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.th-sort-arrow { font-size: var(--fs-micro); line-height: 1; opacity: .75; }
.switch-form { display: inline-flex; flex: none; }
.switch {
position: relative;
display: inline-flex;
align-items: center;
flex: none;
width: 40px;
height: 22px;
padding: 0;
border: 0;
border-radius: var(--r-pill);
background: var(--c-border-strong);
cursor: pointer;
transition: background .15s ease;
}
.switch:hover { background: var(--c-text-muted); }
.switch.is-on { background: var(--c-primary); }
.switch.is-on:hover { background: var(--c-primary-active); }
.switch:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.switch-knob {
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--c-bg);
box-shadow: 0 1px 2px rgba(13, 37, 61, .3);
transition: transform .15s ease;
}
.switch.is-on .switch-knob { transform: translateX(18px); }
.switch-field { display: flex; align-items: center; gap: var(--s-12); cursor: pointer; }
.switch-field input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch-field .switch { pointer-events: none; }
.switch-field input:checked + .switch { background: var(--c-primary); }
.switch-field input:checked + .switch .switch-knob { transform: translateX(18px); }
.switch-field input:focus-visible + .switch { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.switch-field-text { font-size: var(--fs-base); line-height: 1.4; }
.move-form { display: inline-flex; gap: 2px; }
.project-card[draggable="true"] { cursor: grab; }
.project-card.is-dragging { opacity: .45; }
.project-card.is-drop-target { box-shadow: 0 -3px 0 0 var(--c-primary); }
.warn-flag {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 32px;
height: 32px;
border-radius: var(--r-8);
background: var(--c-danger-soft);
color: var(--c-danger-on-soft);
cursor: help;
}
.warn-flag svg { display: block; }
.backfill-box {
display: flex;
align-items: flex-start;
gap: var(--s-12);
margin: 0 0 var(--s-16);
padding: var(--s-16);
border: 1px solid var(--c-danger);
border-radius: var(--r-12);
background: var(--c-danger-soft);
}
.backfill-box .warn-flag { background: var(--c-bg); }
.backfill-box-text { flex: 1 1 auto; min-width: 0; }
.backfill-box-text h4 { margin: 0 0 var(--s-4); font-size: var(--fs-lg); }
.backfill-box-text p { margin: 0; font-size: var(--fs-body); color: var(--c-text-secondary); }
.backfill-box-actions {
display: flex;
align-items: center;
gap: var(--s-8);
margin-top: var(--s-12);
flex-wrap: wrap;
}
.backfill-box-actions form { display: inline-flex; }
@media (max-width: 640px) {
.backfill-box { flex-direction: column; }
}
.preset-caption {
margin: var(--s-16) 0 var(--s-4);
font-size: var(--fs-caption);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--c-text-secondary);
}
.bulk-caption {
display: flex;
align-items: center;
gap: var(--s-8);
}
[data-repeat-add] { margin-top: var(--s-8); }
html:not(.has-js) [data-repeat-add] { display: none; }
.start-card { padding: var(--s-64) var(--s-24); text-align: center; }
.start-art { margin-bottom: var(--s-16); }
.start-card h2 { margin: 0 0 var(--s-8); font-size: 22px; }
.start-card > .muted { max-width: 460px; margin: 0 auto var(--s-24); }
.start-actions { justify-content: center; flex-wrap: wrap; }
.start-note {
display: inline-flex;
align-items: center;
gap: var(--s-8);
margin: var(--s-16) 0 0;
font-size: var(--fs-body);
color: var(--c-success);
}
.wizard-steps {
display: flex;
flex-wrap: wrap;
gap: var(--s-24);
margin: 0 0 var(--s-16);
padding: 0;
list-style: none;
}
.wizard-step {
display: flex;
align-items: center;
gap: var(--s-8);
font-size: var(--fs-base);
color: var(--c-text-muted);
}
.wizard-step a { color: var(--c-text-secondary); }
.wizard-step.is-current { color: var(--c-text); font-weight: 500; }
.wizard-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: none;
border-radius: var(--r-pill);
background: var(--c-bg-alt);
border: 1px solid var(--c-border);
font-size: var(--fs-caption);
}
.wizard-step.is-current .wizard-num { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-accent); }
.wizard-step.is-done .wizard-num { background: var(--c-success-soft); border-color: transparent; color: var(--c-success-on-soft); }
.wizard-card { padding: 0; overflow: hidden; }
.wizard-body { padding: var(--s-24); }
.wizard-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
padding: var(--s-16) var(--s-24);
border-top: 1px solid var(--c-border);
background: var(--c-bg-alt);
}
.wizard-checks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--s-8) var(--s-16);
margin-bottom: var(--s-8);
}
.wizard-body > .copy-source { margin-bottom: var(--s-12); }
@media (max-width: 768px) {
.start-card { padding: var(--s-32) var(--s-16); }
.wizard-steps { gap: var(--s-12); }
.wizard-foot { flex-direction: column-reverse; align-items: stretch; }
}
.demo-notice {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-12);
min-height: 72px;
margin-bottom: var(--s-16);
padding: var(--s-12) 14px var(--s-12) var(--s-12);
border: 1px solid var(--c-notice-border);
border-radius: var(--r-12);
background: var(--c-primary-soft);
box-shadow: 0 3px 10px rgba(13, 37, 61, .04);
}
.demo-notice-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--r-10);
color: var(--c-primary);
background: rgba(255, 255, 255, .72);
}
.demo-notice-icon svg { width: 19px; height: 19px; }
.demo-notice-copy { min-width: 0; line-height: 1.42; }
.demo-notice-title {
display: flex;
align-items: center;
gap: var(--s-8);
margin: 0 0 2px;
font-size: var(--fs-base);
font-weight: 600;
letter-spacing: -.01em;
color: var(--c-text);
}
.demo-notice-tag {
border-radius: var(--r-pill);
padding: 3px 7px;
background: var(--c-bg);
color: var(--c-primary);
font-size: var(--fs-caption);
font-weight: 600;
line-height: 1.2;
letter-spacing: .055em;
text-transform: uppercase;
}
.demo-notice-copy p {
margin: 0;
color: var(--c-notice-text);
font-size: var(--fs-caption);
}
.demo-notice-copy strong { color: var(--c-text); font-weight: 500; }
.demo-notice-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 38px;
padding: 0 13px;
border: 1px solid #b9d1d6;
border-radius: var(--r-8);
background: rgba(255, 255, 255, .72);
color: var(--c-primary-hover);
font-size: var(--fs-caption);
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.demo-notice-action svg { width: 15px; height: 15px; }
.demo-notice-action:hover { border-color: var(--c-primary-soft-strong); background: var(--c-bg); }
.demo-notice-action:active { transform: translateY(1px); }
@media (max-width: 760px) {
.demo-notice { grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: var(--s-12); }
.demo-notice-icon { width: 36px; height: 36px; }
.demo-notice-title { flex-wrap: wrap; }
.demo-notice-copy p { font-size: var(--fs-caption); }
.demo-notice-action { grid-column: 1 / -1; width: 100%; margin-top: 1px; background: var(--c-bg); }
}
.page h1,
.page h2,
.page h3 { font-weight: 600; }
.mstat-label { font-weight: 500; color: var(--c-text); }
.preset-caption { font-weight: 600; }
@media print {
.app-header, .btn, .row-actions, .flash-stack { display: none !important; }
body { background: var(--c-bg); }
.card { box-shadow: none; border-color: #ccc; }
}
.phead {
display: flex;
align-items: flex-start;
gap: var(--s-16);
margin-bottom: var(--s-24);
}
.phead-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
flex: none;
border: 1px solid var(--c-border);
border-radius: var(--r-16);
background: var(--c-bg);
}
.phead-text { flex: 1 1 auto; min-width: 0; }
.phead-title {
display: flex;
align-items: center;
gap: var(--s-12);
flex-wrap: wrap;
}
.phead-title h1 { margin: 0; }
.phead-sub {
display: flex;
align-items: center;
gap: var(--s-8);
margin: var(--s-8) 0 0;
font-size: var(--fs-body);
}
.phead-dot { color: var(--c-text-muted); }
.phead-actions {
display: flex;
align-items: center;
gap: var(--s-8);
flex: none;
}
.phead-actions .btn-primary { display: inline-flex; align-items: center; gap: var(--s-8); }
.dropdown-item.is-danger { color: var(--c-danger); }
.pshow-stats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.stat-icon.is-target { background: var(--c-primary-soft); color: var(--c-primary); }
.stat-icon.is-share  { background: var(--c-warning-soft); color: var(--c-warning); }
.pprogress-card { padding: var(--s-24); margin-bottom: var(--s-24); }
.pprogress-mark {
position: absolute;
inset: 0;
border-radius: 50%;
cursor: default;
}
.pprogress-mark:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pprogress-tip {
position: absolute;
left: 50%;
bottom: calc(100% + 12px);
z-index: 5;
display: none;
flex-direction: column;
gap: 2px;
width: max-content;
max-width: 260px;
padding: var(--s-12) var(--s-16);
transform: translateX(-50%);
border-radius: var(--r-12);
background: #12182a;
color: var(--c-on-accent);
font-size: var(--fs-body);
line-height: 1.5;
text-align: left;
box-shadow: var(--shadow-2);
}
.pprogress-mark:hover .pprogress-tip,
.pprogress-mark:focus .pprogress-tip,
.pprogress-mark:focus-within .pprogress-tip { display: flex; }
.pprogress-tip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
border: 6px solid transparent;
border-top-color: #12182a;
}
.pprogress-tip-sub { color: #9aa6c4; }
.pprogress-legend {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--s-8);
font-size: var(--fs-body);
color: var(--c-text-secondary);
}
.pprogress-legend .is-center { text-align: center; }
.pprogress-legend .is-right  { text-align: right; }
.pdetails { padding: var(--s-8) var(--s-24) var(--s-16); }
.pdetail {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: var(--s-12);
padding: var(--s-12) 0;
border-bottom: 1px solid var(--c-border);
}
.pdetails .pdetail:last-child { border-bottom: 0; }
.pdetail-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--r-8);
background: var(--c-bg-alt);
color: var(--c-primary);
}
.pdetail-label { color: var(--c-text-secondary); font-size: var(--fs-base); }
.pdetail-value { font-size: var(--fs-base); text-align: right; }
.pdetail-dot   { color: var(--c-text-muted); margin: 0 var(--s-4); }
.pfilter { display: flex; align-items: center; gap: var(--s-8); }
@media (max-width: 768px) {
.phead { flex-wrap: wrap; }
.phead-icon { width: 56px; height: 56px; }
.phead-actions { flex: 1 1 100%; }
.phead-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
.pprogress-tip { left: 0; transform: none; max-width: 220px; }
.pprogress-tip::after { left: 10px; }
.pdetail { grid-template-columns: 36px 1fr; }
.pdetail-value { grid-column: 2; text-align: left; }
}
.pcalc { --pcalc-pad: var(--s-24); padding: var(--pcalc-pad); }
.pcalc-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-16);
padding: var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
}
.pcalc-fact { display: flex; align-items: center; gap: var(--s-12); }
.pcalc-fact-value { font-size: var(--fs-h2); font-weight: 500; }
.pcalc-controls {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-16);
flex-wrap: wrap;
margin: var(--s-24) 0 var(--s-16);
}
.pcalc-controls .field { margin: 0; max-width: 260px; flex: 1 1 220px; }
.pcalc-quick { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.pcalc-table th { vertical-align: bottom; }
.pcalc-head-sub { font-size: var(--fs-caption); font-weight: 400; color: var(--c-primary); }
.pcalc-head-sub.is-potential { color: var(--c-success); }
.pcalc-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: 1px solid var(--c-primary);
border-radius: 50%;
color: var(--c-primary);
font-size: var(--fs-caption);
}
.pcalc-num.is-off { border-color: var(--c-border); color: var(--c-text-muted); }
.pcalc-chip {
display: inline-block;
min-width: 110px;
padding: var(--s-4) var(--s-12);
border-radius: var(--r-8);
background: var(--c-primary-soft);
text-align: right;
font-variant-numeric: tabular-nums;
}
.pcalc-chip.is-potential { background: var(--c-success-soft); color: var(--c-success-on-soft); }
.pcalc-dash { color: var(--c-text-muted); }
.pcalc-marker td {
padding: var(--s-12) 0;
text-align: center;
font-size: var(--fs-body);
}
.pcalc-marker span {
display: inline-flex;
align-items: center;
gap: var(--s-8);
padding: 0 var(--s-12);
color: var(--c-primary);
}
.pcalc-marker span::before,
.pcalc-marker span::after {
content: '';
width: 120px;
border-top: 1px dashed currentColor;
opacity: .5;
}
.pcalc-marker.is-potential span { color: var(--c-success); }
@keyframes pcalc-in {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: none; }
}
.pcalc-row.is-new,
.pcalc-marker.is-new { animation: pcalc-in .18s ease-out both; }
@media (prefers-reduced-motion: reduce) {
.pcalc-row.is-new,
.pcalc-marker.is-new { animation: none; }
}
.pcalc-legend {
display: flex;
gap: var(--s-24);
flex-wrap: wrap;
padding: var(--s-12) 0 var(--s-24);
font-size: var(--fs-body);
color: var(--c-text-secondary);
}
.pcalc-legend .dot {
display: inline-block;
width: 8px;
height: 8px;
margin-right: var(--s-4);
border-radius: 50%;
background: var(--c-primary);
}
.pcalc-legend .dot.is-potential { background: var(--c-success); }
.pcalc-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-16);
padding: var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
}
.pcalc-card { display: flex; align-items: center; gap: var(--s-12); }
.pcalc-card-value { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pcalc-card-value.is-better { color: var(--c-success); }
.pcalc-card-value.is-worse  { color: var(--c-warning); }
.pcalc-note { margin-top: var(--s-16); }
.pcalc-apply { margin-top: var(--s-16); text-align: right; }
@media (max-width: 768px) {
.pcalc { --pcalc-pad: var(--s-16); }
.pcalc-facts,
.pcalc-summary { grid-template-columns: 1fr; }
.pcalc-marker span::before,
.pcalc-marker span::after { width: 40px; }
}
.row-icon {
display: inline-block;
width: 1.35em;
margin-right: 2px;
font-size: var(--fs-lg);
line-height: 1;
text-align: center;
font-style: normal;
}
.icon-picker[data-fill-radio] {
display: block;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
}
.icon-picker-summary {
display: flex;
align-items: center;
gap: var(--s-8);
padding: var(--s-8) var(--s-12);
cursor: pointer;
list-style: none;
user-select: none;
}
.icon-picker-summary::-webkit-details-marker { display: none; }
.icon-picker-current {
min-width: 24px;
font-size: var(--fs-h2);
line-height: 1;
text-align: center;
}
.icon-picker-caption { color: var(--c-text-secondary); font-size: var(--fs-body); }
.icon-picker-summary::after {
content: '▾';
margin-left: auto;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.icon-picker[open] > .icon-picker-summary::after { content: '▴'; }
.icon-picker-body {
max-height: 240px;
overflow-y: auto;
padding: 0 var(--s-12) var(--s-12);
border-top: 1px solid var(--c-border);
}
.icon-picker-group {
margin: var(--s-12) 0 var(--s-4);
color: var(--c-text-secondary);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: .04em;
}
.icon-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
gap: var(--s-4);
}
.icon-picker-grid .icon-option {
position: relative;
padding: var(--s-4);
font-size: var(--fs-h2);
}
.icon-picker-grid .icon-option input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.icon-option-mark { line-height: 1.4; }
.icon-picker-grid .icon-option:has(input:checked) {
border-color: var(--c-primary);
background: var(--c-primary-soft);
}
.icon-picker-grid .icon-option:has(input:focus-visible) {
outline: 2px solid var(--c-primary);
outline-offset: 1px;
}
@media (max-width: 480px) {
.icon-picker-body { max-height: 200px; }
}
.modal-narrow { max-width: 520px; }
.demo-gate-surface { cursor: pointer; }
.demo-gate-text {
margin: 0;
color: var(--c-text-secondary);
font-size: var(--fs-base);
line-height: 1.55;
}
.demo-gate-foot {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
align-items: center;
justify-content: space-between;
}
.demo-gate-actions { display: flex; gap: var(--s-8); }
.topbar-demo-cta { display: none; white-space: nowrap; }
@media (max-width: 768px) {
.topbar-demo-cta { display: inline-flex; order: 3; flex: none; }
}
@media (max-width: 560px) {
.demo-gate-foot { flex-direction: column-reverse; align-items: stretch; }
.demo-gate-actions { flex-direction: column-reverse; }
.demo-gate-foot .btn { width: 100%; }
}
.confirm-card { max-width: 420px; padding: var(--s-24); }
.ip-value {
display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 20px;
letter-spacing: .02em;
color: var(--c-text);
}
.access-code-input {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--fs-h2);
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
}
.wiz2-page { display: block; }
.wiz2 {
--w-primary:        #0a49fc;
--w-primary-hover:  #0a3fd6;
--w-primary-soft:   #eff4ff;
--w-primary-line:   #b9cdfe;
--w-success:        #25b888;
--w-success-soft:   #e6f7f1;
--w-star:           #d4861c;
--w-danger:         #e0464c;
--w-danger-soft:    #fdecec;
--w-text:    #0d253d;
--w-text-2:  #4c5171;
--w-muted:   #6b7488;
--w-border:  #e3e8ef;
--w-line:    #eef1f6;
--w-canvas:  #fcfcfd;
--w-ease: cubic-bezier(0.22, 1, 0.36, 1);
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--header-h));
color: var(--w-text);
}
.wiz2-skip {
position: absolute;
left: -9999px;
z-index: 20;
}
.wiz2-skip:focus {
left: var(--s-16);
top: var(--s-8);
padding: var(--s-8) var(--s-12);
background: var(--c-bg);
border: 1px solid var(--w-primary);
border-radius: var(--r-8);
}
.wiz2 :focus-visible {
outline: 2px solid var(--w-primary);
outline-offset: 2px;
}
.wiz2-sr {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.wiz2-shell {
flex: 1 1 auto;
display: grid;
grid-template-columns: 264px minmax(0, 1fr) 336px;
gap: var(--s-24);
align-items: start;
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: var(--s-24) var(--s-24) 96px;
}
.wiz2-rail { position: sticky; top: calc(var(--header-h) + var(--s-24)); }
.wiz2-rail-list { list-style: none; margin: 0; padding: 0; }
.wiz2-rail-item { position: relative; padding-bottom: var(--s-32); }
.wiz2-rail-item:last-child { padding-bottom: 0; }
.wiz2-rail-item:not(:last-child)::before {
content: '';
position: absolute;
left: 19px;
top: 44px;
bottom: 8px;
width: 2px;
background: var(--w-border);
}
.wiz2-rail-item.is-complete:not(:last-child)::before { background: var(--w-success); }
.wiz2-rail-btn {
display: flex;
align-items: flex-start;
gap: var(--s-16);
width: 100%;
padding: 0;
border: 0;
background: none;
text-align: left;
cursor: default;
border-radius: var(--r-8);
font: inherit;
}
.wiz2-rail-item.is-complete .wiz2-rail-btn { cursor: pointer; }
.wiz2-bullet {
position: relative;
flex: none;
display: grid;
place-items: center;
width: 40px; height: 40px;
border: 2px solid var(--w-border);
border-radius: 50%;
background: var(--c-bg);
color: var(--w-muted);
font-size: var(--fs-lg);
transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wiz2-bullet-tick { position: absolute; opacity: 0; color: var(--c-on-accent); }
.wiz2-rail-item.is-active .wiz2-bullet {
background: var(--w-primary);
border-color: var(--w-primary);
color: var(--c-on-accent);
}
.wiz2-rail-item.is-complete .wiz2-bullet {
background: var(--w-success);
border-color: var(--w-success);
color: var(--c-on-accent);
}
.wiz2-rail-item.is-complete .wiz2-bullet-num { opacity: 0; }
.wiz2-rail-item.is-complete .wiz2-bullet-tick { opacity: 1; transition: opacity .16s var(--w-ease); }
.wiz2-rail-item.is-error .wiz2-bullet { border-color: var(--w-danger); color: var(--w-danger); }
.wiz2-rail-text { display: block; padding-top: 6px; }
.wiz2-rail-title { display: block; font-size: var(--fs-lg); font-weight: 500; color: var(--w-text); }
.wiz2-rail-item.is-future .wiz2-rail-title { color: var(--w-muted); font-weight: 400; }
.wiz2-rail-hint { display: block; margin-top: 2px; font-size: var(--fs-body); color: var(--w-muted); }
.wiz2-rail-item.is-active .wiz2-rail-hint { color: var(--w-primary); }
.wiz2-mini { display: none; margin-bottom: var(--s-16); }
.wiz2-mini-label { margin: 0 0 var(--s-8); font-size: var(--fs-base); color: var(--w-muted); }
.wiz2-mini-step { color: var(--w-primary); font-weight: 500; }
.wiz2-mini-dot { margin: 0 6px; }
.wiz2-mini-title { color: var(--w-text-2); }
.wiz2-mini-track { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.wiz2-mini-seg {
position: relative;
flex: 1 1 0;
height: 4px;
border-radius: var(--r-pill);
background: var(--w-border);
transition: background .14s ease;
}
.wiz2-mini-seg.is-active { background: var(--w-primary); }
.wiz2-mini-seg.is-complete { background: var(--w-success); }
.wiz2-mini-num,
.wiz2-mini-tick { display: none; }
.wiz2-main { min-width: 0; }
.wiz2-card {
border: 1px solid var(--w-border);
border-radius: var(--r-16);
background: var(--c-bg);
padding: var(--s-32);
}
.wiz2-panel { display: block; }
.wiz2-panel[hidden] { display: none; }
.wiz2-eyebrow { margin: 0 0 var(--s-8); font-size: var(--fs-base); font-weight: 500; color: var(--w-primary); }
.wiz2-title {
margin: 0 0 var(--s-12);
font-size: var(--fs-display);
line-height: 1.12;
font-weight: 600;
letter-spacing: -1px;
color: var(--w-text);
}
.wiz2-title:focus { outline: none; }
.wiz2-title:focus-visible { outline: 2px solid var(--w-primary); outline-offset: 4px; }
.wiz2-lead { margin: 0; font-size: var(--fs-title); line-height: 1.5; color: var(--w-text-2); max-width: 62ch; }
.wiz2-body {
margin-top: var(--s-24);
padding-top: var(--s-24);
border-top: 1px solid var(--w-line);
}
.wiz2-field + .wiz2-field { margin-top: var(--s-24); }
.wiz2-label { display: block; margin-bottom: var(--s-8); font-size: var(--fs-base); font-weight: 500; color: var(--w-text); }
.wiz2-help { margin: var(--s-8) 0 0; font-size: var(--fs-base); color: var(--w-muted); }
.wiz2-input {
width: 100%;
min-height: 48px;
padding: 0 var(--s-16);
border: 1px solid var(--w-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--w-text);
font: inherit;
font-size: var(--fs-lg);
transition: border-color .12s ease, box-shadow .12s ease;
}
.wiz2-input::placeholder { color: var(--w-muted); }
.wiz2-input-hint::placeholder { font-weight: 600; }
.wiz2-input:hover { border-color: var(--w-primary-line); }
.wiz2-input[aria-invalid='true'] { border-color: var(--w-danger); }
.wiz2-err {
margin: var(--s-8) 0 0;
font-size: var(--fs-base);
color: var(--w-danger);
}
.wiz2-empty { margin: var(--s-16) 0 0; font-size: var(--fs-lg); color: var(--w-muted); }
.wiz2-note {
display: flex;
align-items: flex-start;
gap: var(--s-8);
margin: var(--s-16) 0 0;
padding: var(--s-12) var(--s-16);
border-radius: var(--r-8);
background: var(--w-primary-soft);
color: var(--w-text-2);
font-size: var(--fs-base);
line-height: 1.45;
}
.wiz2-note svg { flex: none; margin-top: 1px; color: var(--w-primary); }
.wiz2-alert {
margin-top: var(--s-16);
padding: var(--s-12) var(--s-16);
border: 1px solid var(--w-danger);
border-radius: var(--r-8);
background: var(--w-danger-soft);
color: var(--w-text);
font-size: var(--fs-lg);
}
.wiz2-segment { display: flex; }
.wiz2-seg { flex: 1 1 0; min-width: 0; }
.wiz2-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz2-seg-face {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-8);
min-height: 56px;
padding: 0 var(--s-12);
border: 1px solid var(--w-border);
background: var(--c-bg);
color: var(--w-text);
font-size: var(--fs-lg);
cursor: pointer;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.wiz2-seg:first-child .wiz2-seg-face { border-radius: var(--r-8) 0 0 var(--r-8); }
.wiz2-seg:last-child  .wiz2-seg-face { border-radius: 0 var(--r-8) var(--r-8) 0; }
.wiz2-seg + .wiz2-seg .wiz2-seg-face { border-left-width: 0; }
.wiz2-seg-face:hover { background: var(--w-canvas); }
.wiz2-seg input:checked + .wiz2-seg-face {
position: relative;
z-index: 1;
border-color: var(--w-primary);
border-left-width: 1px;
background: var(--w-primary-soft);
color: var(--w-primary);
font-weight: 500;
}
.wiz2-seg input:focus-visible + .wiz2-seg-face {
outline: 2px solid var(--w-primary);
outline-offset: -2px;
}
.wiz2-seg-sym {
display: none;
place-items: center;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--w-border);
color: var(--w-text-2);
font-size: var(--fs-body);
font-weight: 600;
}
.wiz2-seg input:checked + .wiz2-seg-face .wiz2-seg-sym {
display: grid;
background: var(--w-primary);
color: var(--c-on-accent);
}
.wiz2-segment-sm .wiz2-seg-face { min-height: 44px; font-size: var(--fs-base); }
.wiz2-segment-sm .wiz2-seg-sym { display: none; }
.wiz2-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-12); }
.wiz2-icon input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz2-icon-face {
display: grid;
place-items: center;
height: 64px;
border: 1px solid var(--w-border);
border-radius: var(--r-8);
background: var(--c-bg);
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: background .12s ease, border-color .12s ease;
}
.wiz2-icon-face:hover { background: var(--w-canvas); border-color: var(--w-primary-line); }
.wiz2-icon input:checked + .wiz2-icon-face {
border-color: var(--w-primary);
background: var(--w-primary-soft);
box-shadow: inset 0 0 0 1px var(--w-primary);
}
.wiz2-icon input:focus-visible + .wiz2-icon-face { outline: 2px solid var(--w-primary); outline-offset: 2px; }
.wiz2-year {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 420px;
min-height: 56px;
padding: 0 var(--s-8);
border: 1px solid var(--w-primary-line);
border-radius: var(--r-8);
}
.wiz2-year-value { font-size: 17px; font-weight: 500; }
.wiz2-year-btn {
display: grid;
place-items: center;
width: 40px; height: 40px;
border: 0;
border-radius: var(--r-8);
background: none;
color: var(--w-text);
cursor: pointer;
transition: background .12s ease;
}
.wiz2-year-btn:hover:not(:disabled) { background: var(--w-canvas); }
.wiz2-year-btn:disabled { color: var(--w-border); cursor: default; }
.wiz2-months {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-12);
max-width: 520px;
margin-top: var(--s-16);
}
.wiz2-month {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 88px;
padding: var(--s-8);
border: 1px solid var(--w-border);
border-radius: var(--r-12);
background: var(--c-bg);
color: var(--w-text);
font: inherit;
font-size: var(--fs-title);
cursor: pointer;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.wiz2-month:hover:not([aria-disabled='true']) { border-color: var(--w-primary-line); background: var(--w-canvas); }
.wiz2-month.is-selected {
border-color: var(--w-primary);
background: var(--w-primary-soft);
color: var(--w-primary);
font-weight: 500;
}
.wiz2-month[aria-disabled='true'] {
background: #f4f6f9;
border-color: #e6eaf0;
color: var(--w-text-2);
cursor: default;
}
.wiz2-month-note { font-size: var(--fs-caption); color: var(--w-muted); }
.wiz2-month-tick {
position: absolute;
top: 8px; right: 8px;
width: 18px; height: 18px;
opacity: 0;
transition: opacity .12s ease;
}
.wiz2-month.is-selected .wiz2-month-tick { opacity: 1; color: var(--w-primary); }
.wiz2-month[aria-disabled='true'] .wiz2-month-tick { opacity: 1; color: #9aa6bb; }
.wiz2-hint-row {
display: flex;
align-items: center;
gap: var(--s-8);
margin: 0 0 var(--s-16);
font-size: var(--fs-base);
color: var(--w-text-2);
}
.wiz2-hint-star { color: var(--w-muted); font-size: 17px; }
.wiz2-rows { list-style: none; margin: 0; padding: 0; }
.wiz2-row {
display: flex;
align-items: center;
gap: var(--s-12);
padding: var(--s-12) 0;
border-bottom: 1px solid var(--w-line);
}
.wiz2-row.is-dragging { box-shadow: var(--shadow-1); background: var(--c-bg); }
.wiz2-grip {
flex: none;
display: grid;
place-items: center;
width: 28px; height: 40px;
border: 0;
background: none;
color: #b4bccb;
cursor: grab;
}
.wiz2-pick-host { position: relative; flex: none; }
.wiz2-pick-btn {
display: grid;
place-items: center;
width: 44px; height: 44px;
padding: 0;
border: 1px solid var(--w-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--w-text-2);
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
.wiz2-pick-btn:hover { border-color: var(--w-primary-line); background: var(--w-canvas); }
.wiz2-pick-btn[aria-expanded='true'] { border-color: var(--w-primary); color: var(--w-primary); }
.wiz2-pick-panel {
position: absolute;
z-index: 30;
top: calc(100% + 6px);
left: 0;
display: grid;
gap: var(--s-4);
max-height: 300px;
padding: var(--s-8);
overflow-y: auto;
border: 1px solid var(--w-border);
border-radius: var(--r-12);
background: var(--c-bg);
box-shadow: var(--shadow-2);
}
.wiz2-pick-item {
display: flex;
align-items: center;
gap: var(--s-8);
min-height: 40px;
padding: 0 var(--s-8);
border: 1px solid transparent;
border-radius: var(--r-6);
background: none;
color: var(--w-text);
font: inherit;
font-size: var(--fs-base);
text-align: left;
cursor: pointer;
white-space: nowrap;
}
.wiz2-pick-item:hover { background: var(--w-canvas); }
.wiz2-pick-item.is-on { border-color: var(--w-primary); background: var(--w-primary-soft); color: var(--w-primary); }
.wiz2-pick-item .wiz2-ico { flex: none; color: inherit; }
.wiz2-pick-panel.is-bare {
grid-template-columns: repeat(4, 44px);
gap: var(--s-4);
max-height: none;
}
.wiz2-pick-panel.is-emoji {
grid-template-columns: repeat(8, 40px);
max-height: 320px;
overflow-y: auto;
}
.wiz2-pick-panel.is-emoji .wiz2-pick-item {
width: 40px;
height: 40px;
}
.wiz2-ico-emoji {
display: grid;
place-items: center;
font-size: 18px;
line-height: 1;
}
.wiz2-pick-panel.is-bare .wiz2-pick-item {
justify-content: center;
width: 44px;
height: 44px;
min-height: 0;
padding: 0;
}
.wiz2-ico { width: 22px; height: 22px; display: block; }
.income-icon {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.wiz2-row-name {
flex: 1 1 auto;
min-width: 0;
border: 1px solid transparent;
border-radius: var(--r-6);
background: none;
padding: var(--s-8);
font: inherit;
font-size: var(--fs-lg);
color: var(--w-text);
}
.wiz2-row-name:hover { border-color: var(--w-border); }
.wiz2-row-name:focus { border-color: var(--w-primary); outline: none; }
.wiz2-chip {
flex: none;
min-height: 36px;
padding: 0 var(--s-12);
border: 1px solid var(--w-primary-line);
border-radius: var(--r-6);
background: var(--c-bg);
color: var(--w-primary);
font: inherit;
font-size: var(--fs-base);
cursor: pointer;
transition: background .12s ease;
}
.wiz2-chip:hover { background: var(--w-primary-soft); }
.wiz2-star {
flex: none;
display: grid;
place-items: center;
width: 40px; height: 40px;
border: 0;
border-radius: var(--r-6);
background: none;
color: #9aa6bb;
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: color .14s ease, transform .14s var(--w-ease);
}
.wiz2-star[aria-pressed='true'] { color: var(--w-star); }
.wiz2-star.is-just-set { transform: scale(1.04); }
.wiz2-row-sep { flex: none; width: 1px; height: 24px; background: var(--w-line); }
.wiz2-del {
flex: none;
display: grid;
place-items: center;
width: 40px; height: 40px;
border: 0;
border-radius: var(--r-6);
background: none;
color: var(--w-danger);
cursor: pointer;
transition: background .12s ease;
}
.wiz2-del:hover { background: var(--w-danger-soft); }
.wiz2-move {
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
transition: opacity .12s ease;
}
.wiz2-row:hover .wiz2-move,
.wiz2-row:focus-within .wiz2-move { opacity: 1; }
.wiz2-move button {
width: 24px; height: 19px;
border: 1px solid var(--w-border);
border-radius: var(--r-4);
background: var(--c-bg);
color: var(--w-text-2);
font-size: var(--fs-caption);
line-height: 1;
cursor: pointer;
}
.wiz2-move button:disabled { opacity: .4; cursor: default; }
.wiz2-add {
display: flex;
align-items: center;
gap: var(--s-12);
padding-top: var(--s-16);
}
.wiz2-add .wiz2-input { flex: 1 1 auto; }
.wiz2-add .wiz2-segment { flex: none; width: 220px; }
.wiz2-add .wiz2-btn { flex: none; }
.wiz2-add-row { padding-top: var(--s-16); }
.wiz2-cloud {
margin-top: var(--s-16);
padding-top: var(--s-16);
border-top: 1px solid var(--w-border);
}
.wiz2-cloud-title {
margin: 0 0 var(--s-8);
font-size: var(--fs-caption);
font-weight: 600;
color: var(--c-text-secondary);
}
.wiz2-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.wiz2-chip {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-height: 32px;
padding: var(--s-4) var(--s-12) var(--s-4) var(--s-8);
border: 1px solid var(--w-border);
border-radius: 18px;
background: var(--c-bg);
color: var(--c-text);
cursor: pointer;
}
.wiz2-chip:hover:not(:disabled) { border-color: var(--c-primary); background: var(--c-primary-soft); }
.wiz2-chip-ico { display: inline-flex; align-items: center; flex: 0 0 auto; font-size: 15px; line-height: 1; }
.wiz2-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.wiz2-chip-plus { color: var(--c-primary); font-weight: 700; }
.wiz2-chip.is-off { opacity: .45; cursor: default; }
.wiz2-chip.is-off .wiz2-chip-plus { color: var(--c-text-muted); }
.wiz2-checks { list-style: none; margin: var(--s-16) 0 0; padding: 0; }
.wiz2-check {
display: flex;
align-items: center;
gap: var(--s-12);
min-height: 52px;
padding: var(--s-4) 0;
border-bottom: 1px solid var(--w-line);
}
.wiz2-check input[type='checkbox'] {
flex: none;
width: 20px; height: 20px;
accent-color: var(--w-primary);
cursor: pointer;
}
.wiz2-check-name {
flex: 1 1 auto;
min-width: 0;
padding: var(--s-8);
border: 1px solid transparent;
border-radius: var(--r-6);
background: none;
font: inherit;
font-size: var(--fs-lg);
color: var(--w-text);
}
.wiz2-check-name:hover { border-color: var(--w-border); }
.wiz2-check-name:focus { border-color: var(--w-primary); outline: none; }
.wiz2-check.is-on .wiz2-check-name { font-weight: 500; }
.wiz2-check .wiz2-pick-btn { width: 40px; height: 40px; }
.wiz2-money + .wiz2-money { margin-top: var(--s-32); }
.wiz2-money-head {
display: flex;
align-items: center;
gap: var(--s-12);
margin: 0 0 var(--s-12);
font-size: 19px;
font-weight: 500;
}
.wiz2-tray { color: var(--w-text); }
.wiz2-amounts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--w-line); }
.wiz2-amount {
display: flex;
align-items: center;
gap: var(--s-16);
min-height: 60px;
padding: var(--s-8) 0;
border-bottom: 1px solid var(--w-line);
}
.wiz2-amount-ico {
flex: none;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--w-border);
border-radius: var(--r-8);
color: var(--w-muted);
}
.wiz2-amount-name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.wiz2-amount-field {
flex: none;
display: flex;
align-items: center;
gap: var(--s-8);
width: 220px;
min-height: 44px;
padding: 0 var(--s-12);
border: 1px solid var(--w-border);
border-radius: var(--r-8);
background: var(--c-bg);
transition: border-color .12s ease;
}
.wiz2-amount-field:focus-within { border-color: var(--w-primary); }
.wiz2-amount-field input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: none;
font: inherit;
font-size: var(--fs-lg);
text-align: right;
color: var(--w-text);
font-variant-numeric: tabular-nums;
font-feature-settings: 'ss01', 'tnum';
}
.wiz2-amount-field input:focus { outline: none; }
.wiz2-amount-cur { flex: none; font-size: var(--fs-base); color: var(--w-muted); }
.wiz2-panel { position: relative; }
.wiz2-draft {
display: flex;
align-items: center;
gap: var(--s-8);
margin: 0;
font-size: var(--fs-base);
color: var(--w-success);
white-space: nowrap;
}
.wiz2-draft.is-saving { color: var(--w-muted); }
.wiz2-draft.is-failed { color: var(--w-danger); }
@media (min-width: 901px) {
.wiz2-draft { position: absolute; top: 0; right: 0; }
}
.wiz2-summary {
position: sticky;
top: calc(var(--header-h) + var(--s-24));
max-height: calc(100vh - var(--header-h) - var(--s-64));
max-height: calc(100dvh - var(--header-h) - var(--s-64));
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--w-border);
border-radius: var(--r-16);
background: var(--c-bg);
padding: var(--s-24);
}
.wiz2-sum-trigger { display: none; }
.wiz2-sum-head {
margin: 0 0 var(--s-16);
padding-bottom: var(--s-16);
border-bottom: 1px solid var(--w-line);
font-size: 17px;
font-weight: 500;
}
.wiz2-sum-list { list-style: none; margin: 0; padding: 0; }
.wiz2-sum-item { display: flex; align-items: flex-start; gap: var(--s-12); padding: var(--s-12) 0; }
.wiz2-sum-icon {
flex: none;
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--w-primary-soft);
font-size: var(--fs-h2);
line-height: 1;
}
.wiz2-sum-text { flex: 1 1 auto; min-width: 0; }
.wiz2-sum-label { display: block; font-size: var(--fs-lg); font-weight: 500; overflow-wrap: anywhere; }
.wiz2-sum-value { display: block; margin-top: 2px; font-size: var(--fs-lg); color: var(--w-text-2); overflow-wrap: anywhere; }
.wiz2-sum-sub { margin: var(--s-4) 0 0; padding-left: 18px; font-size: var(--fs-base); color: var(--w-text-2); }
.wiz2-sum-sub li { overflow-wrap: anywhere; }
.wiz2-sum-review {
flex: none;
align-self: flex-start;
margin-top: 10px;
border: 0;
background: none;
color: var(--w-primary);
font: inherit;
font-size: var(--fs-base);
cursor: pointer;
padding: 0;
}
.wiz2-sum-review:hover { text-decoration: underline; }
.wiz2-sum-note {
margin: var(--s-16) 0 0;
padding-top: var(--s-16);
border-top: 1px solid var(--w-line);
font-size: var(--fs-base);
line-height: 1.5;
color: var(--w-text-2);
}
.wiz2-actions {
position: sticky;
bottom: 0;
z-index: 5;
border-top: 1px solid var(--w-border);
background: var(--c-bg);
padding-bottom: env(safe-area-inset-bottom);
}
.wiz2-actions-inner {
display: flex;
align-items: center;
gap: var(--s-12);
max-width: 1400px;
margin: 0 auto;
padding: var(--s-16) var(--s-24);
}
.wiz2-actions-gap { flex: 1 1 auto; }
.wiz2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-8);
min-height: 48px;
padding: 0 var(--s-24);
border: 1px solid transparent;
border-radius: var(--r-8);
font: inherit;
font-size: var(--fs-lg);
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.wiz2-btn:active:not(:disabled) { transform: translateY(1px); transition-duration: .06s; }
.wiz2-btn:disabled { cursor: default; opacity: .55; transform: none; }
.wiz2-btn-primary { background: var(--w-primary); color: var(--c-on-accent); }
.wiz2-btn-primary:hover:not(:disabled) { background: var(--w-primary-hover); color: var(--c-on-accent); }
.wiz2-btn-ghost { border-color: var(--w-border); background: var(--c-bg); color: var(--w-text); }
.wiz2-btn-ghost:hover { background: var(--w-canvas); color: var(--w-text); }
.wiz2-btn-danger { background: var(--w-danger); color: var(--c-on-accent); }
.wiz2-btn-danger:hover { background: #c93a40; color: var(--c-on-accent); }
.wiz2-spinner {
width: 16px; height: 16px;
border: 2px solid rgba(255, 255, 255, .45);
border-top-color: var(--c-bg);
border-radius: 50%;
animation: wiz2-spin 700ms linear infinite;
}
@keyframes wiz2-spin { to { transform: rotate(360deg); } }
.wiz2-confirm {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
padding: var(--s-24);
background: rgba(13, 37, 61, .45);
}
.wiz2-confirm[hidden] { display: none; }
.wiz2-confirm-box {
width: min(520px, 100%);
padding: var(--s-24);
border-radius: var(--r-16);
background: var(--c-bg);
box-shadow: var(--shadow-2);
}
.wiz2-confirm-box h2 { margin: 0 0 var(--s-8); font-size: 20px; font-weight: 600; }
.wiz2-confirm-box p { margin: 0; font-size: var(--fs-lg); color: var(--w-text-2); line-height: 1.5; }
.wiz2-confirm-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--s-12);
margin-top: var(--s-24);
}
.wiz2-confirm-actions .wiz2-btn { flex: 0 0 auto; white-space: nowrap; }
.wiz2-panel.is-leaving { animation: wiz2-out 90ms var(--w-ease) forwards; }
.wiz2-panel.is-entering { animation: wiz2-in 180ms var(--w-ease); }
.wiz2-panel.is-entering-back { animation: wiz2-in-back 180ms var(--w-ease); }
@keyframes wiz2-out     { to   { opacity: 0; transform: translateX(-6px); } }
@keyframes wiz2-in      { from { opacity: 0; transform: translateX(6px); } }
@keyframes wiz2-in-back { from { opacity: 0; transform: translateX(-6px); } }
.wiz2-row.is-new,
.wiz2-check.is-new { animation: wiz2-row-in 180ms var(--w-ease); }
@keyframes wiz2-row-in { from { opacity: 0; transform: translateY(6px); } }
.wiz2-row.is-going,
.wiz2-check.is-going { animation: wiz2-row-out 160ms var(--w-ease) forwards; }
@keyframes wiz2-row-out { to { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 900px) {
.wiz2-shell {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-16);
padding: var(--s-16) var(--s-16) 24px;
}
.wiz2-rail { display: none; }
.wiz2-mini { display: block; }
.wiz2-card { border: 0; border-radius: 0; padding: 0; }
.wiz2-title { font-size: 30px; }
.wiz2-eyebrow { display: none; }
.wiz2-icons { grid-template-columns: repeat(3, 1fr); }
.wiz2-icon-face { height: 72px; font-size: 28px; }
.wiz2-months { grid-template-columns: repeat(3, 1fr); max-width: none; }
.wiz2-year { max-width: none; }
.wiz2-row {
flex-wrap: wrap;
padding: var(--s-12);
border: 1px solid var(--w-border);
border-bottom: 1px solid var(--w-border);
border-radius: var(--r-12);
}
.wiz2-row + .wiz2-row { margin-top: var(--s-8); }
.wiz2-row-name { flex: 1 1 140px; }
.wiz2-pick-panel {
left: 0;
min-width: 220px;
max-width: calc(100vw - 48px);
}
.wiz2-pick-panel.is-bare { min-width: 0; }
.wiz2-add {
flex-direction: column;
align-items: stretch;
margin-top: var(--s-16);
padding: var(--s-12);
border: 1px solid var(--w-border);
border-radius: var(--r-12);
}
.wiz2-add .wiz2-segment,
.wiz2-amount {
flex-wrap: wrap;
padding: var(--s-12);
border: 1px solid var(--w-border);
border-radius: var(--r-12);
}
.wiz2-amounts { border-top: 0; }
.wiz2-amount + .wiz2-amount { margin-top: var(--s-8); }
.wiz2-amount-field { width: 180px; }
.wiz2-summary { position: static; max-height: none; overflow: hidden; padding: 0; border-radius: var(--r-12); }
.wiz2-sum-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
width: 100%;
min-height: 60px;
padding: var(--s-12) var(--s-16);
border: 0;
background: var(--c-bg);
font: inherit;
text-align: left;
color: var(--w-text);
cursor: pointer;
}
.wiz2-sum-trigger-title { font-size: var(--fs-lg); font-weight: 500; }
.wiz2-sum-trigger-sub { color: var(--w-text-2); font-size: var(--fs-lg); }
.wiz2-sum-trigger-sub:not(:empty)::before { content: ' · '; }
.wiz2-chevron { flex: none; transition: transform 160ms var(--w-ease); }
.wiz2-sum-trigger[aria-expanded='true'] .wiz2-chevron { transform: rotate(180deg); }
.wiz2-sum-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 180ms var(--w-ease);
}
.wiz2-sum-body > * { min-height: 0; }
.wiz2-summary.is-open .wiz2-sum-body { grid-template-rows: 1fr; }
.wiz2-sum-inner { overflow: hidden; padding: 0 var(--s-16) var(--s-16); }
.wiz2-sum-head { display: none; }
.wiz2-actions-inner { padding: var(--s-12) var(--s-16); }
.wiz2-btn { flex: 1 1 0; padding: 0 var(--s-16); }
.wiz2-actions-inner > :last-child { margin-left: 0; }
}
@media (max-width: 380px) {
.wiz2-months { grid-template-columns: repeat(2, 1fr); }
.wiz2-icons { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.wiz2-amount-field { width: 100%; }
.wiz2-amount-name { flex: 1 1 100%; }
.wiz2-btn { font-size: var(--fs-base); padding: 0 var(--s-12); }
}
@media (prefers-reduced-motion: reduce) {
.wiz2 *,
.wiz2 *::before,
.wiz2 *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.wiz2-spinner {
animation-duration: 1400ms !important;
animation-iteration-count: infinite !important;
border-top-color: rgba(255, 255, 255, .8);
}
}
:root {
--sidebar-w:      272px;
--sidebar-rail-w:  72px;
--topbar-h:        64px;
}
.shell { display: flex; align-items: stretch; min-height: 100vh; }
.shell-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.sidebar {
flex: none;
width: var(--sidebar-w);
position: sticky;
top: 0;
align-self: flex-start;
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-16) var(--s-12) var(--s-12);
background: var(--c-bg);
border-right: 1px solid var(--c-border);
overflow-y: auto;
overscroll-behavior: contain;
z-index: 45;
}
.sidebar-head {
display: flex;
align-items: center;
gap: var(--s-8);
min-height: 40px;
padding: 0 var(--s-8) var(--s-16);
}
.sidebar-head .wordmark { flex: 1 1 auto; min-width: 0; font-size: var(--fs-title); }
.sidebar-collapse,
.sidebar-close {
display: none;
flex: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: var(--r-6);
background: none;
color: var(--c-text-muted);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.sidebar-collapse:hover,
.sidebar-close:hover { background: var(--c-bg-alt); color: var(--c-text); }
.has-js .sidebar-collapse { display: inline-flex; }
.sidebar-nav { display: flex; flex-direction: column; gap: var(--s-2); }
.sidebar-link {
display: flex;
align-items: center;
gap: var(--s-12);
width: 100%;
min-height: 44px;
padding: 0 var(--s-12);
border: 0;
border-left: 3px solid transparent;
border-radius: var(--r-8);
background: none;
color: var(--c-text-secondary);
font: inherit;
font-size: var(--fs-base);
font-weight: 400;
text-align: left;
cursor: pointer;
list-style: none;
transition: background .15s ease, color .15s ease;
}
.sidebar-link::-webkit-details-marker { display: none; }
.sidebar-link:hover { background: var(--c-bg-alt); color: var(--c-text); }
.sidebar-link.is-active {
border-left-color: var(--c-primary);
border-radius: 0 var(--r-8) var(--r-8) 0;
background: var(--c-primary-soft);
color: var(--c-primary);
font-weight: 600;
}
.sidebar-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
color: currentColor;
}
.sidebar-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-caret { flex: none; display: inline-flex; color: var(--c-text-muted); transition: transform .15s ease; }
.sidebar-group[open] > .sidebar-link .sidebar-caret { transform: rotate(180deg); }
.sidebar-sep { height: 1px; margin: var(--s-12) var(--s-8); background: var(--c-border); }
.sidebar-sub { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) 0 0; }
.sidebar-sublink {
display: flex;
align-items: center;
gap: var(--s-12);
width: 100%;
min-height: 40px;
padding: 0 var(--s-12) 0 var(--s-32);
border: 0;
border-radius: var(--r-8);
background: none;
color: var(--c-text-secondary);
font: inherit;
font-size: var(--fs-base);
text-align: left;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.sidebar-sublink:hover { background: var(--c-bg-alt); color: var(--c-text); }
.sidebar-sublink.is-current { color: var(--c-primary); font-weight: 500; }
.sidebar-sublink .sidebar-icon { width: 20px; margin-left: calc(var(--s-32) * -1 + var(--s-12)); }
.sidebar-sublink .check { flex: none; color: var(--c-primary); }
.sidebar-foot { margin-top: auto; padding-top: var(--s-12); }
.has-rail .sidebar { width: var(--sidebar-rail-w); padding-left: var(--s-8); padding-right: var(--s-8); }
.has-rail .sidebar-text,
.has-rail .sidebar-caret,
.has-rail .sidebar-sub,
.has-rail .count-badge { display: none; }
.has-rail .sidebar-link,
.has-rail .sidebar-sublink { justify-content: center; padding: 0; gap: 0; }
.has-rail .sidebar-sublink { padding-left: 0; }
.has-rail .sidebar-sublink .sidebar-icon { margin-left: 0; }
.has-rail .sidebar-head { flex-direction: column; gap: var(--s-8); padding-bottom: var(--s-12); }
.has-rail .sidebar-head .wordmark { flex: none; justify-content: center; }
.has-rail .sidebar-collapse { transform: rotate(180deg); }
.topbar {
position: sticky;
top: 0;
z-index: 40;
display: flex;
align-items: center;
gap: var(--s-12);
min-height: var(--topbar-h);
padding: var(--s-8) var(--s-24);
background: rgba(255, 255, 255, .92);
backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--c-border);
}
.topbar-title {
display: inline-flex;
align-items: center;
gap: var(--s-8);
font-size: var(--fs-title);
color: var(--c-text);
white-space: nowrap;
}
.topbar-icon { display: inline-flex; color: var(--c-text-muted); }
.crumbs {
display: flex;
align-items: center;
gap: var(--s-8);
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
.crumb { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.crumb + .crumb::before {
content: '';
flex: none;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--c-border-strong);
border-bottom: 1.5px solid var(--c-border-strong);
transform: rotate(-45deg);
}
.crumb [aria-current='page'] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.crumb a {
color: var(--c-text-secondary);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color .15s ease;
}
.crumb a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.crumb a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 768px) {
.topbar-title.is-nested {
display: inline-flex;
order: 5;
flex: 1 1 100%;
font-size: var(--fs-body);
}
.topbar-title.is-nested .topbar-icon { display: none; }
}
.shell-scrim { display: none; }
@media (max-width: 1279px) {
.sidebar { width: var(--sidebar-rail-w); padding-left: var(--s-8); padding-right: var(--s-8); }
.sidebar-text,
.sidebar-caret,
.sidebar-sub,
.sidebar .count-badge { display: none; }
.sidebar-link,
.sidebar-sublink { justify-content: center; padding: 0; gap: 0; }
.sidebar-sublink .sidebar-icon { margin-left: 0; }
.sidebar-head { justify-content: center; padding-bottom: var(--s-12); }
.has-js .sidebar-collapse { display: none; }
.guest-card { display: grid; justify-items: center; padding: var(--s-12) var(--s-8); }
.guest-card::before,
.guest-card::after,
.guest-card-title,
.guest-card-text,
.guest-card-login,
.guest-card-cta-text,
.guest-trust-text,
.sidebar-locked-note { display: none; }
.guest-card-cta { width: 42px; min-height: 42px; margin-top: var(--s-8); padding: 0; }
.guest-trust { margin: var(--s-8) 0 0; }
.sidebar-link.is-locked { position: relative; }
.sidebar-lock {
position: absolute;
right: 6px;
bottom: 6px;
width: 17px;
height: 17px;
margin-left: 0;
border: 2px solid var(--c-bg);
border-radius: 6px;
}
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: min(288px, 84vw);
padding: var(--s-16) var(--s-12);
transform: translateX(-100%);
transition: transform .2s ease;
box-shadow: var(--shadow-2);
}
.sidebar.is-open { transform: none; }
.sidebar .sidebar-text,
.sidebar .sidebar-caret,
.sidebar[open] .sidebar-sub,
.sidebar .sidebar-group[open] .sidebar-sub,
.sidebar .count-badge { display: revert; }
.sidebar .sidebar-text { display: block; }
.sidebar .sidebar-caret { display: inline-flex; }
.sidebar .sidebar-link,
.sidebar .sidebar-sublink { justify-content: flex-start; gap: var(--s-12); padding: 0 var(--s-12); }
.sidebar .sidebar-sublink { padding-left: var(--s-32); }
.sidebar .sidebar-sublink .sidebar-icon { margin-left: calc(var(--s-32) * -1 + var(--s-12)); }
.sidebar .sidebar-head { justify-content: space-between; padding-bottom: var(--s-16); }
.sidebar-close { display: inline-flex; }
.has-js .sidebar-collapse { display: none; }
.shell-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 44;
background: rgba(13, 37, 61, .38);
}
.shell-scrim[hidden] { display: none; }
.topbar { padding: var(--s-8) var(--s-16); }
.topbar-title { font-size: var(--fs-lg); }
}
@media (max-width: 768px) {
html:not(.has-js) .sidebar {
position: static;
width: auto;
height: auto;
transform: none;
box-shadow: none;
border-right: 0;
border-bottom: 1px solid var(--c-border);
}
html:not(.has-js) .shell { flex-direction: column; }
html:not(.has-js) .nav-toggle,
html:not(.has-js) .sidebar-close { display: none !important; }
}
.alloc-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-right: var(--s-8);
border-radius: 50%;
background: var(--series-tint, var(--c-bg-alt));
color: var(--series-ink, var(--c-text-secondary));
}
.alloc-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.alloc-icon .row-icon { width: auto; height: auto; background: none; border-radius: 0; color: inherit; }
.table-alloc td:first-child { display: flex; align-items: center; gap: var(--s-8); }
.alloc-name { min-width: 0; overflow-wrap: anywhere; }
.alloc-proj {
flex: none;
align-self: center;
margin-left: -5px;
padding: 0 4px;
border-radius: var(--r-4);
background: var(--petrol-100);
color: var(--petrol-900);
font-size: var(--fs-caption);
font-weight: 600;
line-height: 16px;
white-space: nowrap;
cursor: help;
}
.table-alloc { table-layout: fixed; }
.table-alloc .alloc-col-amount { width: 108px; }
.table-alloc .alloc-col-share  { width: 100px; }
.table-alloc tbody td:first-child { flex-wrap: nowrap; align-items: center; }
.alloc-name { flex: 1 1 auto; min-width: 0; }
.pcard { border: 1px solid var(--c-border); border-radius: var(--r-12); background: var(--c-bg); }
.pcard + .pcard { margin-top: var(--s-12); }
.radar-modes { display: inline-flex; gap: var(--s-8); flex-wrap: wrap; }
.radar-mode {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-height: 36px;
padding: 0 var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--c-text-secondary);
font: inherit;
font-size: var(--fs-base);
cursor: pointer;
transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.radar-mode:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.radar-mode.is-active {
border-color: var(--c-primary);
background: var(--c-primary-soft);
color: var(--c-primary);
}
.radar-bullet { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.radar-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); margin: 0; padding: 0; list-style: none; }
.radar-chip {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-height: 34px;
padding: 0 var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: none;
font: inherit;
font-size: var(--fs-base);
text-align: left;
color: var(--c-text-secondary);
cursor: pointer;
}
.radar-chip.is-off {
color: var(--c-text-secondary);
text-decoration: line-through;
opacity: 0.72;
}
.radar-chip[aria-disabled="true"] { cursor: default; }
.radar-total { display: flex; flex-direction: column; gap: var(--s-8); }
.radar-total-label { margin: 0; font-size: var(--fs-lg); color: var(--c-text); }
.radar-total-row { display: flex; align-items: center; gap: var(--s-16); }
.radar-total-cell { display: flex; flex-direction: column; gap: 2px; }
.radar-total-month { font-size: var(--fs-body); color: var(--c-text-secondary); }
.radar-total-value { font-size: 20px; font-variant-numeric: tabular-nums; }
.radar-total-arrow { color: var(--c-text-muted); }
.radar-total-diff { margin: 0; font-size: var(--fs-lg); }
.radar-total-diff.is-down { color: var(--c-success); }
.radar-total-diff.is-up   { color: var(--c-danger); }
.radar-canvas { position: relative; height: 420px; min-width: 0; }
.radar-tip {
position: absolute;
z-index: 5;
width: 220px;
pointer-events: none;
}
.radar-tip {
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
box-shadow: var(--shadow-2);
}
.radar-tip::before {
content: '';
position: absolute;
top: 50%;
right: 100%;
width: 24px;
height: 1px;
background: var(--c-border-strong);
}
.radar-tip.is-left::before { right: auto; left: 100%; }
.radar-tip[hidden] { display: none; }
.radar-tip-title { margin: 0 0 var(--s-8); font-weight: 500; }
.radar-tip-state {
display: flex;
align-items: center;
gap: var(--s-8);
min-height: 28px;
margin: 0 0 var(--s-12);
padding: 0 var(--s-8);
border-radius: var(--r-8);
background: var(--c-bg-alt);
color: var(--c-text-secondary);
font-size: var(--fs-micro);
line-height: 1.4;
}
.radar-tip-state-dot {
width: 13px;
height: 13px;
border-radius: 50%;
flex: none;
background: var(--c-border);
}
.radar-tip-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-4); }
.radar-tip-rows li { display: flex; justify-content: space-between; gap: var(--s-16); font-variant-numeric: tabular-nums; }
.radar-tip-change {
margin: var(--s-8) 0 0;
padding-top: var(--s-8);
border-top: 1px solid var(--c-border);
font-size: var(--fs-body);
color: var(--c-text-secondary);
}
@media (max-width: 768px) {
.radar-canvas { height: 280px; }
}
.dash-tabs { display: none; }
@media (max-width: 1023px) {
.dash-tabs {
display: flex;
gap: var(--s-4);
margin-bottom: var(--s-16);
padding-bottom: var(--s-2);
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid var(--c-border);
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
flex: none;
min-height: 44px;
padding: 0 var(--s-16);
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: var(--c-text-secondary);
font: inherit;
font-size: var(--fs-lg);
white-space: nowrap;
cursor: pointer;
transition: color .15s ease, border-color .15s ease;
}
.dash-tab:hover { color: var(--c-text); }
.dash-tab.is-active {
border-bottom-color: var(--c-primary);
background: var(--c-primary-soft);
border-radius: var(--r-8) var(--r-8) 0 0;
color: var(--c-primary);
font-weight: 500;
}
.has-js .dash-tabs-on [data-dash-tab]:not(.is-shown) { display: none; }
.dash-cols { display: block; }
.dash-side { width: auto; }
}
.topbar-logo,
.topbar-portfolio { display: none; }
.topbar-logo { align-items: center; gap: var(--s-8); color: var(--c-text); white-space: nowrap; }
.topbar-logo-text { font-size: var(--fs-lg); font-weight: 600; }
.topbar-logo-text b { font-weight: 500; }
.topbar-logo .logo-mark { box-shadow: none; }
@media (max-width: 768px) {
.topbar { flex-wrap: wrap; gap: var(--s-8); row-gap: var(--s-8); padding: var(--s-12) var(--s-12); }
.topbar-logo    { display: inline-flex; order: 1; flex: 1 1 auto; min-width: 0; }
.topbar-title   { display: none; }
.topbar .spacer { display: none; }
.topbar-portfolio { display: block; order: 2; flex: none; }
.nav-toggle       { order: 4; flex: none; }
.topbar > .btn:not(.nav-toggle),
.month-pick { order: 5; }
.topbar-portfolio .dropdown-toggle { max-width: 40vw; padding-left: var(--s-8); padding-right: var(--s-8); }
.topbar-logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-portfolio .dropdown-toggle span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (max-width: 768px) {
.table-overview { display: block; }
.table-overview thead { display: none; }
.table-overview tbody,
.table-overview tfoot { display: block; }
.table-overview tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-8) var(--s-16);
padding: var(--s-16);
margin-bottom: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
}
.table-overview td {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
border: 0;
text-align: left;
}
.table-overview td::before {
content: attr(data-label);
font-size: var(--fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.table-overview td:empty { display: none; }
.table-overview tr.is-average { background: var(--c-primary-soft); border-color: transparent; }
.table-overview tr.is-current { border-color: var(--c-primary); }
.table-wrap:has(.table-overview) { overflow: visible; }
}
.skip-link {
position: fixed;
top: var(--s-8);
left: var(--s-8);
z-index: 60;
padding: var(--s-8) var(--s-16);
border: 1px solid var(--c-primary);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--c-primary);
font-size: var(--fs-lg);
min-height: 44px;
display: inline-flex;
align-items: center;
transform: translateY(-200%);
transition: transform .15s ease;
}
.skip-link:focus { transform: none; }
#main-content:focus { outline: none; }
@media (max-width: 768px) {
.sidebar-head          { order: 0; }
.pfz                   { order: 1; }
.sidebar-sep-portfolio { order: 2; }
.sidebar-nav           { order: 3; }
.sidebar-sep-account   { order: 4; }
.sidebar-account       { order: 5; }
.sidebar-foot          { order: 6; }
}
@media (max-width: 768px) {
.input,
.select,
.textarea,
.select-inline,
input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
select,
textarea { font-size: var(--fs-no-zoom); }
.select-inline { min-width: 132px; }
}
@media (max-width: 768px) {
.topbar .nav-toggle {
min-width: 44px;
min-height: 44px;
padding: 0;
}
.sidebar-close {
width: 44px;
height: 44px;
margin-right: calc(var(--s-8) * -1);
}
.sidebar-sublink { min-height: 44px; }
.topbar > .btn:not(.nav-toggle) { min-height: 44px; }
.topbar-logo { min-height: 44px; }
.sidebar-head .wordmark { min-height: 44px; }
.topbar-portfolio .dropdown-toggle { min-height: 44px; }
.btn-sm { min-height: 44px; }
}
.pcard-row dd { white-space: nowrap; }
.alloc-cols { display: flex; gap: 0; }
.alloc-col {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: var(--s-4);
padding: 0 var(--s-12);
border: 0;
background: none;
color: var(--c-text-secondary);
font: inherit;
font-size: var(--fs-body);
cursor: pointer;
transition: color .15s ease;
}
.alloc-col:hover { color: var(--c-text); }
.alloc-col:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-6); }
.alloc-col.is-asc, .alloc-col.is-desc { color: var(--c-primary); }
.alloc-col { white-space: nowrap; }
.alloc-col[data-sort-col='1'] { width: 108px; }
.alloc-col[data-sort-col='2'] { width: 100px; }
.alloc-col-arrow { width: 8px; height: 8px; }
.alloc-col.is-asc  .alloc-col-arrow,
.alloc-col.is-desc .alloc-col-arrow {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.alloc-col.is-asc  .alloc-col-arrow { border-bottom: 5px solid currentColor; }
.alloc-col.is-desc .alloc-col-arrow { border-top: 5px solid currentColor; }
.table-alloc tbody td { border-bottom: 0; }
.table-alloc tbody tr { border-radius: var(--r-8); }
.table-alloc tbody tr:hover td { background: var(--c-bg-alt); }
.table-alloc tbody tr:hover td:first-child { border-radius: var(--r-8) 0 0 var(--r-8); }
.table-alloc tbody tr:hover td:last-child  { border-radius: 0 var(--r-8) var(--r-8) 0; }
.dash-cols { grid-template-columns: minmax(0, 1fr) 460px; }
.radar-modes {
gap: 0;
padding: 3px;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg-alt);
}
.radar-mode {
min-height: 30px;
padding: 0 var(--s-12);
border: 0;
border-radius: var(--r-6);
background: none;
font-size: var(--fs-body);
}
.radar-mode:hover { background: none; }
.radar-mode.is-active {
background: var(--c-bg);
border: 0;
box-shadow: var(--shadow-1);
}
.page-dashboard .card-body { padding: var(--s-16); }
.alloc { gap: var(--s-16); padding: var(--s-16); }
.donut-box { height: 250px; }
.donut-center-value { font-size: 19px; }
.table-alloc td { padding: 7px var(--s-8); }
.table-alloc tbody td:first-child { gap: var(--s-8); }
.alloc-icon { width: 26px; height: 26px; }
.radar-canvas { height: 260px; }
.page-dashboard .demo-notice { margin-bottom: var(--s-12); }
.dash-cols { grid-template-columns: minmax(0, 1fr) var(--dash-rail); }
.alloc { grid-template-columns: minmax(220px, 0.85fr) 1.5fr; }
@media (max-width: 1439px) {
.table-alloc .alloc-col-amount { width: 100px; }
.table-alloc .alloc-col-share  { width: 92px; }
.alloc-col[data-sort-col='1'] { width: 100px; }
.alloc-col[data-sort-col='2'] { width: 92px; }
}
.alloc-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow-wrap: normal;
}
@media (min-width: 1366px) and (max-width: 1439px) {
.table-alloc tbody td:first-child .alloc-proj { display: none; }
}
@media (max-width: 768px) {
.table-alloc tbody td:first-child .alloc-proj { display: none; }
}
.radar-tip-change {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-12);
}
.radar-tip-change-label { color: var(--c-text-secondary); }
.radar-tip-change-value { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.radar-tip-change-value.is-down { color: var(--c-success); }
.radar-tip-change-value.is-up   { color: var(--c-danger); }
.radar-tip-change-value.is-flat { color: var(--c-text-secondary); }
.radar {
--radar-h: 320px;
display: grid;
grid-template-columns: minmax(0, 1fr) 236px;
grid-template-rows: auto var(--radar-h);
grid-template-areas:
'bar   bar'
'chart aside';
gap: var(--s-16) var(--s-24);
align-items: start;
}
.radar-bar {
grid-area: bar;
display: grid;
grid-template-columns: max-content max-content 1fr;
grid-template-areas: 'first second view';
align-items: end;
gap: var(--s-12) var(--s-24);
margin: calc(var(--s-16) * -1) calc(var(--s-16) * -1) 0;
padding: var(--s-12) var(--s-16);
background: var(--c-bg-alt);
border-bottom: 1px solid var(--c-border);
}
.radar-pane > .radar-group:nth-child(1) { grid-area: first; }
.radar-pane > .radar-group:nth-child(2) { grid-area: second; }
.radar-group.is-view { grid-area: view; justify-self: end; }
.radar-pane { display: contents; }
.radar-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.radar-group-label {
font-size: var(--fs-caption);
font-weight: 500;
color: var(--c-text-secondary);
}
.radar-select {
width: auto;
min-width: 148px;
min-height: 40px;
padding-top: 0;
padding-bottom: 0;
font-size: var(--fs-base);
}
.radar-modes { display: inline-flex; flex-wrap: nowrap; }
.radar-canvas { grid-area: chart; position: relative; height: var(--radar-h, 300px); min-width: 0; }
.radar-aside {
grid-area: aside;
padding-left: var(--s-24);
border-left: 1px solid var(--c-border);
align-self: stretch;
min-height: 0;
overflow-y: auto;
overscroll-behavior: auto;
}
.radar-legend-title,
.radar-tip-title {
margin: 0 0 var(--s-12);
font-size: var(--fs-lg);
font-weight: 600;
color: var(--c-text);
}
.radar-chips {
display: flex;
flex-direction: column;
gap: var(--s-8);
}
.radar-chip {
min-height: 0;
padding: 0;
border: 0;
font-size: var(--fs-base);
color: var(--c-text);
}
.radar-chip:hover { color: var(--c-primary); }
.radar-chip.is-off:hover { color: var(--c-text); }
.radar-note {
margin: var(--s-12) 0 0;
font-size: var(--fs-body);
line-height: 1.4;
color: var(--c-text-secondary);
}
.radar-tip {
position: static;
width: auto;
padding: 0;
border: 0;
background: none;
box-shadow: none;
pointer-events: none;
}
.radar-tip-rows li { font-size: var(--fs-base); }
.radar-tip-change { margin-top: var(--s-8); padding-top: var(--s-8); flex-wrap: wrap; }
.radar-tip-change-label { white-space: nowrap; }
.radar-tip-change-value { margin-left: auto; }
.radar-total { margin-top: var(--s-16); padding-top: var(--s-16); border-top: 1px solid var(--c-border); }
@media (max-width: 1439px) {
.radar {
--radar-h: 320px;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto var(--radar-h) auto;
grid-template-areas:
'bar'
'chart'
'aside';
}
.radar-aside {
padding: var(--s-16) 0 0;
border-left: 0;
border-top: 1px solid var(--c-border);
align-self: auto;
min-height: auto;
overflow: visible;
}
.radar-chips { flex-direction: row; flex-wrap: wrap; gap: var(--s-8) var(--s-24); }
}
@media (max-width: 768px) {
.radar-bar {
grid-template-columns: 1fr;
grid-template-areas: 'view' 'first' 'second';
align-items: stretch;
}
.radar-group { align-items: stretch; }
.radar-group.is-view { justify-self: stretch; }
.radar-select { width: 100%; min-width: 0; }
.radar-modes { display: flex; }
.radar-mode { flex: 1 1 0; justify-content: center; }
.radar-chips { flex-direction: column; gap: var(--s-8); }
.radar { --radar-h: 280px; }
}
.mflow-flow { display: grid; place-items: center; }
.mflow-flow svg { width: 48px; height: 39px; overflow: visible; }
.mflow-line {
fill: none;
stroke-width: 3.333;
stroke-linecap: round;
}
.mflow-line.is-spending  { stroke: var(--mflow-spending); }
.mflow-line.is-remaining { stroke: var(--mflow-remaining); }
.mflow-arrowhead {
fill: none;
stroke-width: 3.333;
stroke-linecap: round;
stroke-linejoin: round;
}
.mflow-arrowhead.is-spending  { stroke: var(--mflow-spending); }
.mflow-arrowhead.is-remaining { stroke: var(--mflow-remaining); }
.mflow-stop-income   { stop-color: var(--mflow-income); }
.mflow-stop-spending { stop-color: var(--mflow-spending); }
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
flex-wrap: nowrap;
min-width: 0;
min-height: 48px;
padding-block: var(--s-8);
padding-inline: 14px;
border-bottom: 1px solid var(--widget-head-border);
background: var(--widget-head-bg);
}
.card-head-title {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-width: 0;
}
.card-head > h2,
.card-head > h3,
.card-head-title > h2 {
display: block;
overflow: hidden;
min-width: 0;
margin: 0;
color: var(--widget-head-title);
font-size: var(--fs-lg);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-head-actions {
display: flex;
align-items: center;
flex: 0 0 auto;
flex-wrap: nowrap;
gap: var(--s-8);
}
.card-head .select-inline { min-height: 32px; }
.card-head {
border-radius: calc(var(--r-12) - 1px) calc(var(--r-12) - 1px) 0 0;
}
@media (max-width: 767px) {
.card-head {
gap: var(--s-12);
padding-inline: var(--s-12);
}
.card-head { flex-wrap: wrap; }
.card-head > h2,
.card-head > h3,
.card-head-title > h2 { white-space: normal; overflow: visible; }
.card-head .btn-sm { min-height: 44px; }
}
@media (forced-colors: active) {
.card-head {
border-bottom-color: CanvasText;
background: Canvas;
}
}
.table-overview {
table-layout: fixed;
width: 100%;
}
.table-overview {
min-width: calc(206px + var(--ov-cols, 2) * min(72px, 26px + var(--ov-chars, 7) * 9px));
}
.table-overview th,
.table-overview td { padding-inline: var(--s-8); }
.table-overview th:first-child  { width: 106px; }
.table-overview th:nth-child(2) { width: 100px; }
.table-overview td {
overflow: hidden;
text-overflow: ellipsis;
}
.ov-head-inner {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
min-width: 0;
vertical-align: middle;
}
.ov-head-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ov-head-icon {
display: inline-flex;
flex: 0 0 auto;
}
.ov-head-icon .pcard-icon {
width: 14px;
height: 14px;
border-radius: 3px;
}
.table-overview th:first-child,
.table-overview td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: var(--c-bg);
box-shadow: 1px 0 0 var(--c-border);
}
.table-overview thead th:first-child { background: var(--c-bg); z-index: 3; }
.table-overview tbody tr.is-average td:first-child { background: var(--c-primary-soft); }
.table-overview tbody tr.is-current td:first-child { background: var(--c-primary-wash); }
@media (max-width: 768px) {
.table-overview { table-layout: auto; }
.table-overview { min-width: 0; }
.table-overview th,
.table-overview td,
.table-overview th:first-child,
.table-overview td:first-child {
position: static;
overflow: visible;
box-shadow: none;
background: none;
}
.ov-head-inner { display: inline; }
}
.modal-backdrop.is-flipping {
perspective: 1200px;
display: block;
padding: 0;
}
.modal-backdrop.is-spinning .modal { overflow: hidden; }
.flip-shell {
position: fixed;
z-index: 1;
transform-origin: center;
transform-style: preserve-3d;
will-change: transform, width, height;
}
.flip-face {
position: absolute;
inset: 0;
overflow: hidden;
border: 1px solid var(--c-border);
border-radius: inherit;
background: var(--c-bg);
box-shadow: 0 24px 70px rgba(var(--petrol-950-rgb), .22),
0 4px 14px rgba(var(--petrol-950-rgb), .10);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.flip-front { pointer-events: none; }
.flip-back { transform: rotateY(180deg); }
.flip-back > .modal {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
border-radius: inherit;
box-shadow: none;
overflow-y: auto;
}
@media (prefers-reduced-motion: reduce) {
.flip-shell { transition: none !important; }
}
.modal-backdrop.drawer-backdrop.is-turning {
perspective: 1800px;
perspective-origin: 100% 50%;
}
.drawer-backdrop.is-turning .drawer {
transform-origin: 100% 50%;
transform-style: preserve-3d;
backface-visibility: hidden;
overflow: hidden;
will-change: transform, filter;
}
.drawer-backdrop.is-turning .drawer::before {
content: '';
position: absolute;
z-index: 5;
top: 0;
bottom: 0;
left: 0;
width: 18px;
pointer-events: none;
background: linear-gradient(90deg,
rgba(13, 37, 61, .18),
rgba(13, 37, 61, .055) 24%,
rgba(255, 255, 255, .48) 72%,
transparent);
}
.drawer-shadow {
position: absolute;
top: 2%;
right: 0;
width: min(690px, calc(100vw - 88px));
height: 96%;
border-radius: 18px 0 0 18px;
background: rgba(13, 37, 61, .22);
filter: blur(24px);
opacity: 0;
pointer-events: none;
}
@media (max-width: 720px) {
.drawer { max-width: calc(100vw - 22px); }
.drawer-shadow { width: calc(100vw - 12px); }
}
@media (max-width: 480px) {
.drawer-backdrop.is-turning { perspective: 1100px; }
.drawer { max-width: 100vw; border-radius: 0; }
.drawer .modal-foot { border-radius: 0; }
.drawer-backdrop.is-turning .drawer::before { width: 10px; }
}
.month-link {
color: inherit;
text-decoration: underline dotted;
text-decoration-color: var(--c-border-strong);
text-underline-offset: 3px;
}
.month-link:hover { color: var(--c-primary); text-decoration: underline solid; }
.month-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 3px; }
.mrail { margin-top: var(--s-16); }
.mrail-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-12);
margin-bottom: 9px;
}
.mrail-caption {
color: var(--c-text-secondary);
font-size: var(--fs-caption);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .045em;
}
.mrail-percent {
color: var(--c-primary);
font-size: var(--fs-h2);
font-weight: 600;
font-variant-numeric: tabular-nums lining-nums;
}
.mrail-track {
position: relative;
height: 22px;
margin: 2px 7px 0;
}
.mrail-line,
.mrail-paid {
position: absolute;
top: 9px;
height: 4px;
border-radius: 3px;
}
.mrail-line { left: 0; right: 0; background: var(--c-border); }
.mrail-paid { left: 0; background: var(--c-primary); }
.mrail-dot {
position: absolute;
top: 4px;
width: 14px;
height: 14px;
margin-left: -7px;
border: 3px solid var(--c-bg);
border-radius: 50%;
background: var(--c-border-strong);
box-shadow: 0 0 0 1px var(--c-border-strong);
}
.mrail-dot.is-start { left: 0; background: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.mrail-dot.is-now   { background: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); z-index: 1; }
.mrail-dot.is-end   { left: 100%; }
.mrail-dot.is-end.is-on { background: var(--c-success); box-shadow: 0 0 0 1px var(--c-success); }
.mrail.is-complete .mrail-paid,
.mrail.is-complete .mrail-dot.is-start,
.mrail.is-complete .mrail-dot.is-now { background: var(--c-success); }
.mrail.is-complete .mrail-dot.is-start,
.mrail.is-complete .mrail-dot.is-now { box-shadow: 0 0 0 1px var(--c-success); }
.mrail.is-complete .mrail-percent { color: var(--c-success); }
.mrail-img { position: absolute; inset: 0; pointer-events: none; }
.mrail-marks {
position: absolute;
top: 0;
bottom: 0;
right: 9px;
z-index: 2;
}
.mrail-mark {
position: absolute;
top: 0;
bottom: 0;
width: min(var(--mrail-slot, 18px), 18px);
transform: translateX(-50%);
padding: 0;
border: 0;
border-radius: var(--r-6);
background: none;
cursor: pointer;
}
.mrail-mark::before {
content: "";
position: absolute;
left: 50%;
top: 6px;
width: 1px;
height: 10px;
margin-left: -.5px;
border-radius: 1px;
background: var(--c-border-strong);
}
.mrail-mark:hover::before,
.mrail-mark:focus-visible::before,
.mrail-mark.is-on::before {
top: 2px;
width: 3px;
height: 18px;
margin-left: -1.5px;
background: var(--c-primary);
}
.mrail-mark:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.mrail-mark.is-year::before {
top: 3px;
width: 2px;
height: 16px;
margin-left: -1px;
background: var(--c-text-secondary);
}
.mrail-mark.is-year:hover::before,
.mrail-mark.is-year:focus-visible::before,
.mrail-mark.is-year.is-on::before { background: var(--c-primary); }
.mrail-year {
position: absolute;
bottom: calc(100% - 2px);
transform: translateX(-50%);
color: var(--c-text-secondary);
font-size: var(--fs-caption);
font-weight: 600;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
pointer-events: none;
}
.mrail-track:has(.mrail-year) { margin-top: 13px; }
.mrail-tip {
display: none;
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
width: 186px;
padding: 8px 10px;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
box-shadow: var(--shadow-2);
color: var(--c-text);
font-size: var(--fs-caption);
line-height: 1.35;
text-align: left;
white-space: normal;
z-index: 5;
pointer-events: none;
}
.mrail-tip b { display: block; font-weight: 600; }
.mrail-tip span { display: block; margin-top: 2px; color: var(--c-text-secondary); }
.mrail-mark:hover .mrail-tip,
.mrail-mark:focus-visible .mrail-tip,
.mrail-mark.is-on .mrail-tip { display: block; }
.mrail-mark.is-flip-left .mrail-tip { left: auto; right: -6px; transform: none; }
.mrail-mark.is-flip-right .mrail-tip { left: -6px; right: auto; transform: none; }
.mrail-note {
display: none;
margin: var(--s-8) 0 0;
padding: 9px 11px;
border-radius: var(--r-8);
background: var(--c-primary-soft);
color: var(--c-text-secondary);
font-size: var(--fs-caption);
line-height: 1.35;
}
.mrail-note b { display: block; color: var(--c-text); font-weight: 600; }
@media (pointer: coarse) {
.mrail-mark { width: min(var(--mrail-slot, 22px), 22px); }
.mrail-mark:hover .mrail-tip { display: none; }
.mrail-mark.is-on .mrail-tip { display: block; }
.mrail:not(.mrail-compact) .mrail-note { display: block; }
.mrail:not(.mrail-compact) .mrail-mark.is-on .mrail-tip { display: none; }
}
.mrail-labels {
display: flex;
justify-content: space-between;
gap: var(--s-8);
margin-top: 3px;
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.mrail-now {
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
}
.mrail-none {
margin: var(--s-16) 0 0;
padding: var(--s-12);
border-radius: var(--r-8);
background: var(--c-bg-alt);
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.pcard { overflow: hidden; }
.pcard-identity {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 40px;
align-items: center;
gap: 11px;
padding: var(--s-12) var(--s-16);
background: var(--c-primary-soft);
}
.pcard-avatar {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 11px;
background: var(--c-bg);
}
.pcard-naming { min-width: 0; }
.pcard-type {
display: flex;
align-items: center;
gap: var(--s-8);
margin-bottom: 3px;
color: var(--c-primary);
font-size: var(--fs-micro);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .055em;
}
.pcard-link {
display: block;
max-width: 100%;
color: var(--c-text);
font-size: 17px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.015em;
text-decoration: none;
}
.pcard-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.pcard-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }
.pcard-link-text {
display: block;
max-height: 2.5em;
overflow: hidden;
}
.pcard-link-end { white-space: nowrap; }
.pcard-link svg {
display: inline-block;
vertical-align: -2px;
transition: transform .15s ease;
}
.pcard-link:hover svg { transform: translateX(3px); }
.pcard-collapse { display: none; }
.has-js .pcard-collapse {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--r-8);
color: var(--c-text-secondary);
background: transparent;
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.has-js .pcard-collapse:hover { background: rgba(255, 255, 255, .78); color: var(--c-primary); }
.has-js .pcard-collapse:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.pcard-collapse svg { transition: transform .2s ease; }
.pcard-collapse[aria-expanded='false'] svg { transform: rotate(180deg); }
.pcard-body { padding: var(--s-16); }
.pcard-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-8);
margin-top: var(--s-16);
}
.pcard-fact {
min-width: 0;
padding: 11px 12px;
border-radius: var(--r-8);
background: var(--c-bg-alt);
}
.pcard-fact span {
display: block;
margin-bottom: 4px;
color: var(--c-text-secondary);
font-size: var(--fs-micro);
}
.pcard-fact strong {
display: block;
font-size: var(--fs-body);
font-weight: 500;
font-variant-numeric: tabular-nums lining-nums;
}
.pcard-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-top: var(--s-16);
}
.pcard-actions .pcard-open { grid-column: 1 / -1; min-height: 44px; }
.pcard-actions .btn { min-height: 38px; }
.pcard-edit-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--s-12);
border: 0;
padding: 4px 0;
color: var(--c-text-secondary);
background: transparent;
font-size: var(--fs-caption);
text-decoration: none;
cursor: pointer;
}
.pcard-edit-link:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.pcard-edit-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 3px; }
.pcard-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.pcard-footer a { color: var(--c-primary); text-decoration: none; }
.pcard-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pcard-empty { display: grid; gap: var(--s-12); justify-items: start; }
.pcard-empty p { margin: 0; color: var(--c-text-secondary); }
.pcard.is-done .pcard-identity { background: var(--c-bg-alt); }
.pcard.is-done .pcard-type { color: var(--c-text-secondary); }
@media (max-width: 480px) {
.pcard-actions { grid-template-columns: 1fr; }
.pcard-actions .btn { min-height: 44px; }
.pcard-facts { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
.pcard-link svg,
.pcard-collapse svg { transition: none; }
}
.bboard {
--mflow-income:    var(--c-info);
--mflow-spending:  #d91f59;
--mflow-remaining: #147a4a;
display: grid;
grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) 52px minmax(0, 1fr);
align-items: stretch;
margin-bottom: var(--s-16);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
box-shadow: var(--shadow-1);
}
.bboard-tile {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
grid-template-rows: auto auto;
align-content: center;
column-gap: var(--s-12);
row-gap: 6px;
min-height: 96px;
min-width: 0;
padding: var(--s-16) 20px;
}
.bboard-icon {
grid-row: 1 / 3;
align-self: center;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: var(--r-8);
}
.bboard-icon.is-income    { background: #eaf2ff; color: var(--mflow-income); }
.bboard-icon.is-spending  { background: #fff0f4; color: var(--mflow-spending); }
.bboard-icon.is-remaining { background: #e9f8f0; color: var(--mflow-remaining); }
.bboard-name {
align-self: end;
color: var(--c-text-secondary);
font-size: var(--fs-body);
font-weight: 500;
}
.bboard-value {
align-self: start;
min-width: 0;
font-size: var(--fs-h1);
font-weight: 500;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bboard-value.is-income    { color: var(--mflow-income); }
.bboard-value.is-spending  { color: var(--mflow-spending); }
.bboard-value.is-remaining { color: var(--mflow-remaining); }
.bboard-value.is-negative  { color: var(--mflow-spending); }
.bwork {
display: grid;
grid-template-columns: 224px minmax(0, 1fr);
align-items: stretch;
overflow: hidden;
}
.brail {
display: grid;
align-content: start;
gap: 7px;
padding: var(--s-16) var(--s-12);
border-right: 1px solid var(--c-border);
background: var(--c-primary-wash);
}
.brail-item {
display: grid;
gap: 3px;
width: 100%;
min-height: 58px;
padding: var(--s-8) var(--s-12);
border: 0;
border-radius: var(--r-8);
background: transparent;
color: var(--c-text-secondary);
font: inherit;
text-align: left;
cursor: pointer;
}
.brail-item:hover { background: #eef4f5; }
.brail-item.is-active {
background: var(--c-primary-soft);
color: var(--c-primary-text);
}
.brail-item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.brail-name  { font-size: var(--fs-base); font-weight: 500; }
.brail-count { font-size: var(--fs-caption); color: var(--c-text-muted); }
.brail-item.is-active .brail-count { color: var(--c-text-secondary-on-wash); }
.bpanel { min-width: 0; }
.bpanel[hidden] { display: none; }
.bpanel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-16);
padding: 20px var(--s-24) var(--s-16);
border-bottom: 1px solid var(--c-border);
}
.bpanel-head h3 { margin: 0; font-size: var(--fs-h2); }
.btable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.btable th,
.btable td { padding: var(--s-12); vertical-align: middle; }
.btable th:first-child,
.btable td:first-child { padding-left: var(--s-24); }
.btable th:last-child,
.btable td:last-child  { padding-right: var(--s-24); }
.btable thead th {
padding-top: var(--s-12);
padding-bottom: 6px;
color: var(--c-text-muted);
font-size: var(--fs-caption);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .055em;
text-align: left;
}
.btable th.num, .btable td.num { text-align: right; }
.btable tbody td { border-top: 1px solid var(--c-border); }
.btable tbody tr:hover td { background: var(--c-primary-wash); }
.btable th:nth-child(1) { width: 38%; }
.btable th:nth-child(2) { width: 190px; }
.btable th:nth-child(3) { width: 116px; }
.btable th:nth-child(4) { width: auto; }
@media (min-width: 1400px) {
.btable th:nth-child(1) { width: 380px; }
}
.brow-name {
display: flex;
align-items: center;
gap: var(--s-8);
min-width: 0;
}
.brow-name .strong {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.brow-name .badge { flex: none; }
.brow-name .row-icon {
width: 32px;
height: 32px;
border-radius: var(--r-8);
background: var(--c-primary-soft);
color: var(--c-primary-text);
}
.brow-name .row-icon-emoji { font-size: var(--fs-title); }
.btable .amount-cell .amount-field { display: block; }
.btable .amount-cell .input { min-height: 40px; }
.brow-actions { display: flex; justify-content: flex-start; gap: 2px; }
.brow-del { display: flex; }
.brow-act {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 0;
border-radius: var(--r-8);
background: transparent;
color: var(--c-text-secondary);
cursor: pointer;
}
.brow-act:hover { background: var(--c-primary-soft); color: var(--c-primary-text); }
.brow-act.is-danger:hover { background: var(--c-danger-soft); color: var(--c-danger-on-soft); }
.brow-act:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.btable tfoot td {
border-top: 1px solid var(--c-border);
padding-top: var(--s-16);
padding-bottom: 20px;
font-weight: 500;
}
.bempty {
display: grid;
justify-items: center;
gap: var(--s-16);
padding: 40px var(--s-24);
text-align: center;
}
.bempty p { margin: 0; color: var(--c-text-secondary); }
.dropdown-item.is-danger { color: var(--c-danger); }
.dropdown-item.is-danger:hover { background: var(--c-danger-soft); color: var(--c-danger-on-soft); }
.info-pop { position: relative; margin-right: auto; }
.info-pop-btn {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border: 1px solid var(--c-border-strong);
border-radius: 50%;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
font-style: italic;
line-height: 1;
cursor: pointer;
list-style: none;
user-select: none;
}
.info-pop-btn::-webkit-details-marker { display: none; }
.info-pop-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.info-pop-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.info-pop[open] > .info-pop-btn { border-color: var(--c-primary); color: var(--c-primary); }
.info-pop:not([open]) > .info-pop-body { display: none; }
.info-pop-body {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 5;
width: 280px;
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
box-shadow: var(--shadow-2);
color: var(--c-text-secondary);
font-size: var(--fs-body);
line-height: 1.45;
}
.info-pop-body b { color: var(--c-primary); font-weight: 500; }
@media (max-width: 560px) {
.info-pop-body { width: min(280px, calc(100vw - 48px)); }
}
.row-icon {
display: inline-grid;
place-items: center;
flex: none;
line-height: 1;
}
.row-icon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.row-icon-emoji { font-size: var(--fs-lg); }
.row-icon-project img { display: block; border-radius: var(--r-4); }
.drawer-name .row-icon {
width: 26px;
height: 26px;
border-radius: var(--r-6);
background: var(--c-primary-soft);
color: var(--c-primary-text);
}
.drawer-name .row-icon-emoji { font-size: var(--fs-base); }
.drawer-narrow { max-width: 460px; }
.drawer-delete {
display: flex;
align-items: center;
gap: var(--s-8);
margin-top: var(--s-24);
padding: 0;
border: 0;
background: transparent;
color: var(--c-danger);
font: inherit;
font-size: var(--fs-body);
cursor: pointer;
}
.drawer-delete:hover { text-decoration: underline; text-underline-offset: 3px; }
.drawer-delete[hidden] { display: none; }
.drawer-delete:focus-visible { outline: 2px solid var(--c-danger); outline-offset: 3px; border-radius: var(--r-4); }
@media (max-width: 1120px) {
.bwork { grid-template-columns: 180px minmax(0, 1fr); }
.brail { padding: var(--s-12) var(--s-8); }
.btable th, .btable td { padding: var(--s-8); }
.btable th:first-child, .btable td:first-child { padding-left: var(--s-16); }
.btable th:last-child,  .btable td:last-child  { padding-right: var(--s-16); }
.btable th:nth-child(1) { width: 34%; }
.btable th:nth-child(2) { width: 150px; }
.btable th:nth-child(3) { width: 84px; }
.bpanel-head { padding: var(--s-16) var(--s-16) var(--s-12); }
.btable .amount-cell .input { padding-left: 26px; font-size: var(--fs-body); }
}
@media (max-width: 760px) {
.bboard { grid-template-columns: 1fr 1fr; }
.bboard-flow { display: none; }
.bboard-tile { min-height: 78px; padding: var(--s-12); }
.bboard-tile.is-remaining { grid-column: 1 / -1; border-top: 1px solid var(--c-border); }
.bboard-value { font-size: 20px; }
.bwork { display: block; }
.brail {
grid-template-columns: 1fr 1fr;
padding: var(--s-8);
border-right: 0;
border-bottom: 1px solid var(--c-border);
}
.brail-item { min-height: 50px; }
.bpanel-head { padding: var(--s-16) var(--s-16) var(--s-12); }
.btable, .btable tbody, .btable tfoot, .btable tr, .btable td { display: block; }
.btable thead { display: none; }
.btable tr {
display: grid;
grid-template-columns: minmax(0, 1fr) 124px 48px 92px;
align-items: center;
gap: 6px;
padding: var(--s-8) var(--s-16);
}
.btable td.brow-actions { display: flex; align-items: center; justify-content: flex-end; }
.btable tbody tr { border-top: 1px solid var(--c-border); }
.btable td,
.btable tbody td,
.btable tfoot td { border: 0; padding: 0; min-width: 0; max-width: 100%; }
.btable td:first-child, .btable td:last-child { padding: 0; }
.btable tfoot tr {
grid-template-columns: minmax(0, 1fr) 124px 48px 34px;
border-top: 1px solid var(--c-border);
padding-top: var(--s-12);
padding-bottom: var(--s-16);
}
.btable .brow-del { display: flex; }
.btable tbody tr {
grid-template-columns: minmax(0, 1fr) 48px 148px;
grid-template-areas:
"name   name  name"
"amount share actions";
row-gap: var(--s-8);
}
.btable tbody td[data-label="Source"],
.btable tbody td[data-label="Category"] { grid-area: name; }
.btable tbody td[data-label="Amount"] { grid-area: amount; }
.btable tbody td[data-label="% of income"] { grid-area: share; }
.btable tbody td.brow-actions { grid-area: actions; }
.btable tbody tr.brow-note-row { display: block; }
.brow-name .row-icon { width: 28px; height: 28px; }
.btable .amount-cell .input { min-height: 40px; font-size: var(--fs-body); }
.btable .save-state {
right: 0;
left: auto;
top: 100%;
width: auto;
margin-top: 1px;
transform: none;
font-size: var(--fs-caption);
white-space: nowrap;
}
.drawer-narrow { max-width: 100%; }
.drawer-narrow.drawer { border-radius: 0; }
}
@media (max-width: 560px) {
.btable .brow-name .badge { display: none; }
.btable tr, .btable tfoot tr { grid-template-columns: minmax(0, 1fr) 112px 46px 92px; }
}
@media (max-width: 760px) {
.brow-act { width: 44px; height: 44px; }
.btable tr, .btable tfoot tr { grid-template-columns: minmax(0, 1fr) 118px 44px 92px; }
}
@media (max-width: 560px) and (pointer: coarse) {
.btable tr, .btable tfoot tr { grid-template-columns: minmax(0, 1fr) 100px 44px 92px; }
}
.inc-picker {
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
gap: 6px;
}
.inc-picker .icon-option { padding: 6px; color: var(--c-text-secondary); }
.inc-picker .icon-option:has(input:checked) { color: var(--c-primary-text); }
.inc-picker .icon-option-mark { display: grid; place-items: center; min-height: 24px; }
.legal-page { padding: 120px 0 var(--s-64); }
.legal-page h1 { margin: 0 0 var(--s-8); font-size: var(--fs-display); letter-spacing: -0.6px; }
.legal-page .legal-updated {
margin: 0 0 var(--s-24);
font-size: var(--fs-body);
color: var(--c-text-secondary);
}
.legal-page .lead { margin-bottom: var(--s-32); }
.legal-page h2 {
margin: var(--s-32) 0 var(--s-12);
font-size: 20px;
letter-spacing: -0.2px;
}
.legal-page h3 {
margin: var(--s-24) 0 var(--s-8);
font-size: var(--fs-lg);
color: var(--c-text-secondary);
}
.legal-page p,
.legal-page li { line-height: 1.65; }
.legal-page p { margin: 0 0 var(--s-12); }
.legal-page ul { margin: 0 0 var(--s-12); padding-left: var(--s-24); }
.legal-page li { margin-bottom: var(--s-8); }
.legal-page strong { font-weight: 600; }
@media (max-width: 768px) {
.legal-page { padding: 176px 0 var(--s-32); }
.legal-page h1 { font-size: 27px; }
.legal-page h2 { margin-top: var(--s-24); font-size: var(--fs-h2); }
}
@media (hover: hover) {
.table-overview tbody tr:hover td { background: var(--c-primary-wash); }
.table-overview tbody tr.is-average:hover td,
.table-overview tbody tr.is-current:hover td { background: inherit; }
}
@media (max-width: 768px) {
.brow-act {
width: 44px;
height: 44px;
}
.has-js .pcard-collapse {
width: 44px;
height: 44px;
}
.radar-select {
min-height: 44px;
font-size: var(--fs-no-zoom);
}
}
@media (max-width: 900px) {
.sidebar-head      { order: -3; }
.pfz               { order: -2; }
.sidebar-sep-portfolio { order: -1; }
}
@media (min-width: 1280px) and (max-width: 1365px) {
.alloc { grid-template-columns: 1fr; }
.alloc-chart { max-width: 320px; margin: 0 auto; }
}
.pcard-link,
.pcard-edit-link,
.pcard-footer a,
.app-footer-links a {
position: relative;
}
.pcard-link::after,
.pcard-edit-link::after,
.pcard-footer a::after,
.app-footer-links a::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 36px;
transform: translateY(-50%);
}
@media (min-width: 1024px) and (max-width: 1100px) {
.dash-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--dash-rail);
}
.dash-side { position: sticky; }
}
@media (max-width: 480px) {
.dash-tabs { gap: 0; }
.dash-tab {
padding: 0 var(--s-8);
font-size: var(--fs-base);
}
}
@media (max-width: 360px) {
.dash-tab { padding: 0 6px; font-size: var(--fs-body); }
}
@media (max-width: 768px) {
.topbar > .btn:not(.nav-toggle) { flex: none; }
}
@media (max-width: 1023px) {
.mflow-flow { align-self: center; height: 26px; }
.mflow-flow svg { width: 26px; height: 22px; transform: none; }
}
@media (max-width: 767px) {
.alloc {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-16);
padding: var(--s-16);
}
.donut-box { height: 260px; }
}
@media (max-width: 1023px) {
.table-alloc.table-cards {
display: block;
width: 100%;
table-layout: auto;
}
.table-alloc.table-cards > colgroup { display: none; }
.table-alloc.table-cards > thead { display: none; }
.table-alloc.table-cards > tbody,
.table-alloc.table-cards > tfoot { display: block; }
.table-alloc.table-cards tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 0 var(--s-12);
margin: 0;
padding: var(--s-8) 0;
border: 0;
border-bottom: 1px solid var(--c-border);
border-radius: 0;
}
.table-alloc.table-cards tbody tr:last-child { border-bottom: 0; }
.table-alloc.table-cards tbody td {
display: flex;
align-items: center;
gap: var(--s-8);
min-width: 0;
padding: 0;
border: 0;
text-align: left;
}
.table-alloc.table-cards tbody td::before { content: none; }
.table-alloc.table-cards tbody td:nth-child(2),
.table-alloc.table-cards tbody td:nth-child(3) {
justify-content: flex-end;
text-align: right;
}
.table-alloc.table-cards tbody td:nth-child(2) { width: 84px; }
.table-alloc.table-cards tbody td:nth-child(3) { width: 50px; }
.table-alloc.table-cards tbody td:first-child { min-width: 0; }
.table-alloc tbody td:first-child .alloc-proj { display: inline-flex; }
.dash-tabs-on .alloc-cols { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.alloc {
grid-template-columns: minmax(240px, 0.8fr) 1.2fr;
gap: var(--s-16);
align-items: center;
}
.donut-box { height: 280px; }
}
.alloc-edit-link { display: none; }
@media (max-width: 1023px) {
.dash-tabs-on .alloc-edit-link {
display: inline-flex;
align-items: center;
gap: var(--s-4);
min-height: 44px;
color: var(--c-primary);
font-size: var(--fs-base);
font-weight: 500;
white-space: nowrap;
}
.dash-tabs-on .alloc-edit-link:hover { text-decoration: underline; }
}
[data-dash-tab='months'] {
container-type: inline-size;
container-name: ovm;
}
.ovm { display: none; }
@media (max-width: 1279px) {
.ovm { display: grid; gap: var(--s-8); }
[data-dash-tab='months'] .table-wrap { display: none; }
.ovm-row {
padding: var(--s-12) var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
}
.ovm-row.is-average { background: var(--c-primary-soft); border-color: transparent; }
.ovm-row.is-current { border-color: var(--c-primary); }
.ovm-row.is-empty { color: var(--c-text-secondary); }
.ovm-head {
display: flex;
align-items: center;
gap: var(--s-12);
min-height: 44px;
margin: 0;
font-size: var(--fs-lg);
cursor: pointer;
}
.ovm-head::-webkit-details-marker { display: none; }
.ovm-head { list-style: none; }
.ovm-row.is-average .ovm-head,
.ovm-row.is-empty .ovm-head { cursor: default; }
.ovm-month { flex: 1 1 auto; min-width: 0; font-weight: 500; display: inline-flex; align-items: center; gap: var(--s-8); }
.ovm-row.is-current .ovm-month { color: var(--c-primary); }
.ovm-row.is-average .ovm-month {
font-size: var(--fs-caption);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--c-primary);
}
.ovm-sum { display: contents; }
.ovm-head .ovm-cell { display: none; }
.ovm-head .ovm-cell.is-total-cell {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0;
flex: none;
}
.ovm-head .ovm-cell.is-total-cell dt { display: none; }
.ovm-head .ovm-cell.is-total-cell dd { flex-direction: column; align-items: flex-end; gap: 0; }
.ovm-head .ovm-cell.is-total-cell .ovm-value { font-weight: 600; }
.ovm-caret { flex: none; display: inline-flex; color: var(--c-text-secondary); transition: transform .15s ease; }
.ovm-row[open] .ovm-caret { transform: rotate(180deg); }
.ovm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-12);
margin: var(--s-12) 0 0;
padding-top: var(--s-12);
border-top: 1px solid var(--c-border);
}
.ovm-row.is-average .ovm-grid { margin-top: var(--s-8); border-top-color: rgba(255, 255, 255, .6); }
.ovm-cell { display: grid; gap: 2px; min-width: 0; }
.ovm-cell dt {
font-size: var(--fs-micro);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.ovm-cell dd { margin: 0; display: flex; align-items: baseline; gap: var(--s-8); flex-wrap: wrap; }
.ovm-value { font-size: 17px; font-weight: 600; }
.ovm-open {
display: inline-flex;
align-items: center;
gap: var(--s-4);
min-height: 44px;
color: var(--c-primary);
font-size: var(--fs-base);
}
.ovm-row .ov-add { margin-top: var(--s-8); }
}
@container ovm (max-width: 559px) {
.ovm-row.is-average .ovm-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-8) var(--s-12);
align-items: start;
}
.ovm-row.is-average .ovm-month { grid-column: 1 / -1; }
.ovm-row.is-average .ovm-head .ovm-cell {
display: grid;
gap: 2px;
align-items: start;
}
.ovm-row.is-average .ovm-head .ovm-cell dt { display: block; }
.ovm-row.is-average .ovm-head .ovm-cell.is-total-cell {
align-items: stretch;
flex-direction: column;
}
.ovm-row.is-average .ovm-head .ovm-cell dd { flex-direction: row; align-items: baseline; }
}
@container ovm (min-width: 560px) {
.ovm-row { padding: var(--s-8) var(--s-16); }
.ovm-head {
display: grid;
grid-template-columns: minmax(120px, 1fr) repeat(4, minmax(90px, 1fr));
align-items: center;
gap: var(--s-12);
cursor: default;
}
.ovm-caret { display: none; }
.ovm-head .ovm-cell {
display: grid;
gap: 0;
justify-items: end;
text-align: right;
}
.ovm-head .ovm-cell dt { display: none; }
.ovm-row.is-average .ovm-head .ovm-cell dt { display: block; }
.ovm-head .ovm-cell dd { justify-content: flex-end; gap: var(--s-4); }
.ovm-row > .ovm-grid,
.ovm-open { display: none; }
}
@media (max-width: 480px) {
.pcard-actions { grid-template-columns: 1fr 1fr; }
.pcard-actions .btn { min-height: 44px; }
}
@media (max-width: 1023px) {
.dash-tabs-on .radar {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas:
'bar'
'legend'
'chart'
'tip';
gap: var(--s-16);
}
.dash-tabs-on .radar-aside {
display: contents;
}
.dash-tabs-on .radar-legend { grid-area: legend; }
.dash-tabs-on .radar-tip { grid-area: tip; }
.dash-tabs-on .radar-bar {
grid-template-columns: 1fr 1fr;
grid-template-areas:
'view    view'
'first   second';
align-items: start;
gap: var(--s-12);
}
.dash-tabs-on .radar-select { width: 100%; min-width: 0; }
.dash-tabs-on .radar-modes { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.dash-tabs-on .radar-legend-title { margin-bottom: var(--s-8); }
.dash-tabs-on .radar-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-8);
}
.dash-tabs-on .radar-chip { min-height: 44px; }
.dash-tabs-on .radar-tip {
position: static;
width: auto;
max-width: none;
transform: none;
}
.dash-tabs-on .radar-tip::before { display: none; }
.dash-tabs-on .radar-aside {
padding-left: 0;
border-left: 0;
}
.dash-tabs-on .radar-canvas { height: 340px; }
}
@media (min-width: 560px) and (max-width: 1023px) {
.dash-tabs-on .radar-modes { display: inline-flex; width: auto; }
.dash-tabs-on .radar-select { max-width: 260px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
.alloc {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
}
.alloc-chart { width: min(320px, 100%); }
.alloc-table { width: 100%; }
.dash-side .card-head { flex-wrap: wrap; }
.dash-side .card-head > h2 { white-space: normal; overflow: visible; }
}
.month-pick {
position: relative;
margin: 0;
min-width: 0;
}
.month-pick-toggle {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--s-8);
min-height: 42px;
min-width: 168px;
max-width: 260px;
padding: 0 var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--c-text);
font-size: var(--fs-base);
list-style: none;
cursor: pointer;
}
.month-pick-toggle::-webkit-details-marker { display: none; }
.month-pick-toggle:hover { border-color: var(--c-primary); }
.month-pick[open] .month-pick-toggle { border-color: var(--c-primary); color: var(--c-primary); }
.month-pick-cal { color: var(--c-text-muted); }
.month-pick[open] .month-pick-cal { color: inherit; }
.month-pick-label {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.month-pick-toggle svg { flex: none; }
.month-pick-caret { transition: transform .15s ease; }
.month-pick[open] .month-pick-caret { transform: rotate(180deg); }
.month-pick-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
min-width: 220px;
max-width: calc(100vw - var(--s-24));
padding: var(--s-4);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
box-shadow: var(--shadow-2, 0 12px 32px rgba(13, 37, 61, .12));
text-align: left;
display: flex;
flex-direction: column;
}
.month-pick-list {
max-height: min(50vh, 320px);
flex: 0 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.month-pick-action { justify-content: flex-start; }
.month-pick-action svg { color: var(--c-text-muted); }
.month-pick-action:hover svg { color: var(--c-primary); }
@media (max-width: 1023px) {
.month-pick { margin-left: auto; }
.month-pick-toggle {
min-height: 44px;
min-width: 0;
max-width: min(62vw, 260px);
font-size: var(--fs-lg);
}
.month-pick-menu { max-height: min(70vh, 520px); }
.month-pick-list { max-height: min(52vh, 420px); }
.month-pick-menu .dropdown-item { min-height: 44px; white-space: nowrap; }
}
@media (max-width: 768px) {
.topbar-portfolio { position: static; }
.topbar-portfolio .dropdown-menu {
left: var(--s-12);
right: var(--s-12);
width: auto;
min-width: 0;
max-height: min(60vh, 420px);
overflow-y: auto;
overscroll-behavior: contain;
}
.topbar-portfolio .dropdown-menu .dropdown-item { min-height: 44px; }
.topbar-logo { order: 0; flex: 0 1 auto; margin-right: auto; }
.topbar-portfolio { order: 2; }
.nav-toggle       { order: 4; }
}
html:not(.has-js) .radar-fs-btn { display: none; }
.radar-fs-btn {
flex: none;
gap: var(--s-8);
min-height: 44px;
white-space: nowrap;
}
@media (max-width: 767px) {
.radar-fs-btn { gap: 0; min-width: 44px; padding-inline: var(--s-8); }
.radar-fs-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
.modal-radar {
width: min(1240px, 96vw);
max-width: none;
height: min(760px, 92vh);
display: flex;
flex-direction: column;
overflow: hidden;
}
.radar-modal-head {
display: flex;
align-items: center;
gap: var(--s-16);
flex-wrap: nowrap;
}
.radar-modal-title-row { display: flex; align-items: center; gap: var(--s-8); flex: none; }
.radar-modal-bar { flex: 1 1 auto; min-width: 0; }
.radar-modal-bar .radar-bar {
margin: 0;
padding: 0;
border-bottom: 0;
background: none;
grid-template-columns: max-content max-content 1fr;
gap: var(--s-8) var(--s-16);
align-items: center;
}
.radar-modal-bar .radar-group-label { display: none; }
.radar-modal-bar .radar-select { min-height: 36px; }
.radar-modal-bar .radar-group.is-view { display: none; }
.radar-modal-close { flex: none; }
.radar-modal-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--s-24);
align-items: stretch;
min-height: 0;
flex: 1 1 auto;
padding: var(--s-16) var(--s-24);
}
.radar-modal-chart {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: var(--s-8);
min-width: 0;
min-height: 0;
}
.radar-modal-canvas { min-height: 0; }
.radar-modal-canvas .radar-canvas { height: 100%; }
.radar-modal-legend { border-top: 1px solid var(--c-border); padding-top: var(--s-8); }
.radar-modal-legend .radar-legend-title { display: none; }
.radar-modal-legend .radar-note { display: none; }
.radar-modal-legend .radar-chips {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-4) var(--s-16);
}
.radar-modal-side {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: var(--s-16);
align-content: start;
min-width: 0;
min-height: 0;
padding-left: var(--s-24);
border-left: 1px solid var(--c-border);
}
.radar-modal-tip .radar-tip {
position: static;
width: auto;
max-width: none;
padding: 0;
border: 0;
box-shadow: none;
transform: none;
}
.radar-modal-tip .radar-tip::before { display: none; }
.radar-modal-ranges { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.radar-modal-ranges h4 {
margin: 0 0 var(--s-8);
font-size: var(--fs-lg);
font-weight: 600;
}
.radar-range-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--s-8);
align-content: start;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.radar-range-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-12);
font-size: var(--fs-base);
}
.radar-range-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-range-value { flex: none; color: var(--c-text-secondary); font-variant-numeric: tabular-nums; }
.radar-modal-foot {
flex: none;
justify-content: flex-start;
border-top: 1px solid var(--c-border);
}
.radar-modal-esc { font-size: var(--fs-body); color: var(--c-text-muted); }
@media (max-width: 1100px) {
.radar-modal-head { flex-wrap: wrap; }
.radar-modal-bar { flex: 1 1 100%; order: 3; }
.radar-modal-bar .radar-bar { grid-template-columns: max-content max-content 1fr; }
.radar-modal-body { grid-template-columns: minmax(0, 1fr); }
.radar-modal-side {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--c-border);
padding-top: var(--s-12);
grid-template-rows: auto;
}
.radar-modal-ranges { display: none; }
.radar-modal-canvas { min-height: 300px; }
.radar-modal-body { overflow-y: auto; }
}
@media (max-width: 767px) {
.radar-fs-btn { display: none; }
}
.radar-modal-tip .radar-tip.is-idle { user-select: none; }
.radar-modal-tip .radar-tip-change {
line-height: 20px;
min-height: calc(20px * 2 + var(--s-12) * 2 + 1px);
align-content: flex-start;
}
.radar-modal-tip .radar-tip.is-idle .radar-tip-change { border-top-color: transparent; }
.acct {
display: flex;
flex-direction: column;
gap: var(--s-24);
}
.acct-nav {
display: flex;
flex-direction: row;
gap: var(--s-4);
padding: var(--s-8);
background: var(--c-bg);
border: 1px solid var(--c-border);
border-radius: var(--r-16);
flex-wrap: nowrap;
overflow-x: auto;
}
.acct-nav-item {
flex: none;
display: flex;
align-items: center;
gap: var(--s-8);
min-height: 44px;
padding: 0 var(--s-12);
border-radius: var(--r-8);
color: var(--c-text-secondary);
font-size: var(--fs-base);
white-space: nowrap;
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.acct-nav-item:hover { background: var(--c-bg-alt); color: var(--c-text); }
.acct-nav-item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.acct-nav-item.is-active {
background: var(--c-primary-soft);
color: var(--c-primary);
font-weight: 500;
}
.acct-icon { flex: none; }
.acct-nav-status.is-active { background: var(--c-danger-soft); color: var(--c-danger-on-soft); }
.acct-body { display: flex; flex-direction: column; gap: var(--s-16); }
.acct-panel { display: flex; flex-direction: column; gap: var(--s-16); }
.acct-panel[hidden] { display: none; }
.acct-identity {
display: flex;
align-items: center;
gap: var(--s-16);
padding: var(--s-24);
}
.acct-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 72px;
height: 72px;
border-radius: var(--r-pill);
background: var(--c-dark);
color: var(--c-on-accent);
font-size: var(--fs-h1);
font-weight: 600;
letter-spacing: .02em;
}
.acct-identity-text { flex: 1 1 auto; min-width: 0; }
.acct-identity-text h2 { margin: 0; font-size: 20px; }
.acct-identity-text p  { margin: 2px 0 var(--s-8); }
.acct-identity-action  { flex: none; }
.acct-duo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-16);
align-items: start;
}
.acct-list { margin: 0; }
.acct-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--s-8) var(--s-16);
padding: var(--s-12) 0;
border-bottom: 1px solid var(--c-border);
}
.acct-row:first-child { padding-top: 0; }
.acct-row:last-child  { padding-bottom: 0; border-bottom: 0; }
.acct-row dt { flex: 1 1 220px; min-width: 0; font-weight: 500; }
.acct-row dt .muted-sm { display: block; font-weight: 400; }
.acct-row dd { margin: 0; min-width: 0; color: var(--c-text-secondary); }
.acct-row-action { flex: none; }
.acct-row > :last-child { margin-left: auto; }
.acct-lead { margin: 0 0 var(--s-16); }
.acct-more {
display: inline-block;
margin-top: var(--s-16);
color: var(--c-primary);
font-size: var(--fs-base);
text-decoration: none;
}
.acct-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.acct-note {
display: flex;
align-items: center;
gap: var(--s-8);
margin-top: var(--s-16);
padding-top: var(--s-16);
border-top: 1px solid var(--c-border);
}
.acct-note svg { flex: none; color: var(--c-success); }
.acct-danger .card-head .acct-icon { color: var(--c-danger); }
.acct-freeze {
display: flex;
align-items: center;
gap: var(--s-16);
flex-wrap: wrap;
}
.acct-freeze-text { flex: 1 1 260px; min-width: 0; }
.acct-freeze-text p:first-child { margin: 0 0 var(--s-4); }
.acct-device { display: inline-flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
@media (max-width: 1024px) {
.acct-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.acct-sessions thead { display: none; }
.acct-sessions tbody tr {
display: block;
margin-bottom: var(--s-12);
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
}
.acct-sessions tbody tr:last-child { margin-bottom: 0; }
.acct-sessions tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-16);
padding: var(--s-4) 0;
border: 0;
text-align: right;
}
.acct-sessions tbody td::before {
content: attr(data-label);
flex: none;
font-size: var(--fs-caption);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--c-text-muted);
text-align: left;
}
.acct-sessions tbody td:empty { display: none; }
.acct-sessions tbody td form { width: 100%; }
.acct-sessions tbody td .btn { width: 100%; }
}
@media (max-width: 767px) {
.acct { gap: var(--s-16); }
.acct-nav { padding: var(--s-4); }
.acct-nav-item { min-height: 48px; padding: 0 var(--s-8); }
.acct-identity { padding: var(--s-16); }
.acct-freeze .btn { width: 100%; }
}
@media (max-width: 480px) {
.acct-identity { flex-direction: column; align-items: flex-start; }
.acct-avatar { width: 56px; height: 56px; font-size: 19px; }
.acct-identity-action { width: 100%; justify-content: center; }
.acct-row dt { flex: 1 1 120px; }
}
.hdr-back { display: inline-flex; align-items: center; gap: var(--s-8); }
.hdr-back svg { flex: none; }
.hdr-account { display: inline-flex; align-items: center; gap: var(--s-8); }
.hdr-initials {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 28px;
height: 28px;
border-radius: var(--r-pill);
background: var(--c-dark);
color: var(--c-on-accent);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .02em;
}
@media (max-width: 767px) {
.hdr-back .hdr-wide,
.hdr-account .hdr-wide { display: none; }
.hdr-back { padding-inline: var(--s-8); }
}
@media (min-width: 768px) {
.hdr-initials { display: none; }
}
.lock h1 { margin: var(--s-12) 0 var(--s-8); font-size: 26px; }
.lock h2 { margin: 0 0 var(--s-16); font-size: 17px; }
.lock-lead { margin: 0 0 var(--s-24); color: var(--c-text-secondary); }
.lock-chip {
display: inline-flex;
align-items: center;
gap: var(--s-8);
padding: 5px var(--s-12);
border-radius: var(--r-pill);
background: var(--c-warning-soft);
color: var(--c-warning);
font-size: var(--fs-body);
font-weight: 500;
}
.lock-dot {
width: 7px;
height: 7px;
border-radius: var(--r-pill);
background: currentColor;
}
.lock-panel {
display: flex;
align-items: flex-start;
gap: var(--s-16);
padding: var(--s-20, 20px) var(--s-24);
border-radius: var(--r-12);
background: var(--c-bg-alt);
border: 1px solid var(--c-border);
}
.lock-panel-icon { flex: none; color: var(--c-text-secondary); margin-top: 2px; }
.lock-panel-body { flex: 1 1 auto; min-width: 0; }
.lock-panel-body p { margin: 0 0 var(--s-4); }
.lock-panel-title { font-size: var(--fs-title); font-weight: 600; }
.lock-count { font-size: var(--fs-h1); font-weight: 600; line-height: 1.2; }
.lock-progress {
display: block;
width: 100%;
height: 6px;
margin: var(--s-12) 0 var(--s-8);
border: 0;
border-radius: var(--r-pill);
background: var(--c-border);
appearance: none;
-webkit-appearance: none;
}
.lock-progress::-webkit-progress-bar {
border-radius: var(--r-pill);
background: var(--c-border);
}
.lock-progress::-webkit-progress-value {
border-radius: var(--r-pill);
background: var(--c-primary);
}
.lock-progress::-moz-progress-bar {
border-radius: var(--r-pill);
background: var(--c-primary);
}
.lock-scale {
display: flex;
justify-content: space-between;
gap: var(--s-16);
margin: 0;
font-size: var(--fs-body);
color: var(--c-text-secondary);
}
.lock-note {
display: flex;
align-items: flex-start;
gap: var(--s-8);
margin: var(--s-16) 0 0;
color: var(--c-warning);
font-size: var(--fs-base);
}
.lock-note svg { flex: none; margin-top: 2px; }
.lock-rule {
margin: var(--s-24) 0;
border: 0;
border-top: 1px solid var(--c-border);
}
.lock-verdict { margin: var(--s-24) 0 var(--s-8); }
.lock-signout { margin-top: var(--s-16); text-align: center; }
.restore-status {
display: flex;
align-items: center;
gap: var(--s-8);
flex-wrap: wrap;
}
.restore-status .select-inline { flex: 1 1 120px; min-width: 0; }
.restore-status .btn { flex: none; }
@media (max-width: 1024px) {
.restore-table thead { display: none; }
.restore-table tbody tr {
display: block;
margin-bottom: var(--s-12);
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
}
.restore-table tbody tr:last-child { margin-bottom: 0; }
.restore-table tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-16);
padding: var(--s-4) 0;
border: 0;
text-align: right;
}
.restore-table tbody td::before {
content: attr(data-label);
flex: none;
font-size: var(--fs-caption);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--c-text-muted);
text-align: left;
}
.restore-table tbody td:empty { display: none; }
.restore-table tbody td[data-label="Message"],
.restore-table tbody td[data-label="Status"] {
display: block;
text-align: left;
}
.restore-table tbody td[data-label="Message"]::before,
.restore-table tbody td[data-label="Status"]::before {
display: block;
margin-bottom: var(--s-4);
}
.restore-table .support-msg { text-align: left; }
}
.page:has(.ipc-grid) .container-narrow { max-width: 1180px; }
.ipc-breadcrumb {
display: flex;
gap: var(--s-8);
margin: 0 0 var(--s-8);
font-size: var(--fs-base);
color: var(--c-text-secondary);
}
.ipc-breadcrumb .strong { color: var(--c-text); }
.ipc-grid {
display: grid;
grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
gap: var(--s-24);
align-items: start;
}
.ipc-side {
display: flex;
flex-direction: column;
gap: var(--s-24);
}
.ipc-summary { padding: var(--s-24); }
.ipc-address {
display: flex;
align-items: flex-start;
gap: var(--s-16);
}
.ipc-address .label { display: block; margin-bottom: 2px; }
.ipc-address .ip-value { display: block; }
.ipc-address .badge { margin-top: var(--s-8); }
.ipc-globe {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 1px solid var(--c-border);
border-radius: 50%;
color: var(--c-dark);
}
.ipc-globe svg { width: 28px; height: 28px; }
.ipc-count {
margin: var(--s-16) 0 0;
padding-bottom: var(--s-16);
border-bottom: 1px solid var(--c-border);
}
.ipc-facts {
margin: 0;
padding: 0;
list-style: none;
}
.ipc-facts li {
display: flex;
align-items: center;
gap: var(--s-12);
padding: var(--s-12) 0;
font-size: var(--fs-base);
}
.ipc-facts li + li { border-top: 1px solid var(--c-border); }
.ipc-facts li:last-child { padding-bottom: 0; }
.ipc-fact-icon {
flex: 0 0 auto;
display: inline-flex;
color: var(--c-dark);
}
.ipc-fact-icon svg { width: 20px; height: 20px; }
.ipc-proxy {
display: flex;
align-items: flex-start;
gap: var(--s-12);
padding: var(--s-16);
border: 1px solid var(--c-warning-soft);
border-radius: var(--r-12);
background: var(--c-warning-soft);
color: var(--c-warning);
}
.ipc-proxy strong { display: block; margin-bottom: var(--s-4); }
.ipc-proxy .muted-sm { margin: 0; color: inherit; }
.ipc-proxy .ipc-fact-icon { color: inherit; margin-top: 2px; }
.ipc-verify { padding: var(--s-24); }
.ipc-verify h2 { margin: 0 0 var(--s-24); font-size: 20px; }
.ipc-steps {
margin: 0;
padding: 0;
list-style: none;
}
.ipc-step {
position: relative;
display: flex;
gap: var(--s-16);
padding-bottom: var(--s-24);
}
.ipc-step:last-child { padding-bottom: 0; }
.ipc-step + .ipc-step::before { content: none; }
.ipc-step:not(:last-child)::after {
content: '';
position: absolute;
left: 15px;
top: 36px;
bottom: 0;
width: 2px;
background: var(--c-border);
}
.ipc-step-num {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1.5px solid var(--c-dark);
border-radius: 50%;
color: var(--c-dark);
font-size: var(--fs-base);
font-weight: 500;
background: var(--c-bg);
position: relative;
z-index: 1;
}
.ipc-step-body { flex: 1 1 auto; min-width: 0; }
.ipc-step-body h3 { margin: 4px 0 var(--s-8); font-size: var(--fs-title); }
.ipc-step-body .btn { margin-top: var(--s-4); }
.ipc-code-status { margin-top: var(--s-12); }
.code-boxes {
display: flex;
align-items: center;
gap: var(--s-8);
max-width: 420px;
}
.code-box {
flex: 1 1 0;
min-width: 0;
height: 52px;
padding: 0;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--c-text);
font-size: var(--fs-h2);
font-variant-numeric: tabular-nums;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
}
.code-box:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.code-dash { color: var(--c-text-secondary); user-select: none; }
.code-source {
position: absolute;
width: 1px;
height: 1px;
min-height: 0;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.ipc-note {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-8);
margin: var(--s-32) 0 0;
color: var(--c-text-secondary);
font-size: var(--fs-base);
text-align: center;
}
@media (max-width: 900px) {
.ipc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
.ipc-summary, .ipc-verify { padding: var(--s-16); }
.code-boxes { gap: 6px; }
.code-box { height: 48px; font-size: var(--fs-title); letter-spacing: 1px; }
.ipc-step { gap: var(--s-12); }
}
.brow-note { position: relative; }
.brow-note .brow-note-dot { display: none; }
.brow-note.has-note {
background: var(--c-warning-soft);
color: var(--c-warning);
}
.brow-note.has-note .brow-note-dot {
display: block;
position: absolute;
top: 4px;
right: 4px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-warning);
box-shadow: 0 0 0 1px var(--c-bg);
}
.brow-note.is-static { cursor: default; }
.brow-note-row > td { padding: 0; }
.note-editor {
display: block;
padding: var(--s-12) var(--s-16) var(--s-12) var(--s-32);
background: var(--c-bg-alt);
border-top: 1px solid var(--c-border);
}
.note-editor-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-12);
margin-bottom: var(--s-8);
}
.note-editor-title { font-size: var(--fs-body); }
.note-editor-body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--s-8);
align-items: end;
}
.note-editor-actions { display: flex; gap: var(--s-8); }
.note-text {
width: 100%;
min-height: 58px;
resize: vertical;
font: inherit;
line-height: 1.4;
}
.note-editor-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
margin-top: var(--s-4);
color: var(--c-text-secondary);
font-size: var(--fs-micro);
}
.note-count { font-variant-numeric: tabular-nums; }
.note-delete {
border: 0;
background: none;
padding: 0;
color: var(--c-danger);
font: inherit;
font-size: var(--fs-micro);
cursor: pointer;
visibility: hidden;
}
.note-editor.is-editing .note-delete,
.alloc-note-pop.is-editing .note-delete { visibility: visible; }
.note-delete:hover { text-decoration: underline; }
.note-error {
margin: var(--s-8) 0 0;
color: var(--c-danger);
font-size: var(--fs-micro);
}
@media (max-width: 760px) {
.btable tr.brow-note-row,
.btable tr.brow-note-row > td,
.drawer-table tr.drawer-note-row,
.drawer-table tr.drawer-note-row > td {
display: block;
width: 100%;
max-width: 100%;
}
.btable tr.brow-note-row > td { border: 0; }
}
@media (max-width: 700px) {
.note-editor { padding-left: var(--s-16); }
.note-editor-body { grid-template-columns: minmax(0, 1fr); }
.note-editor-actions { justify-content: flex-end; }
.note-editor-actions { flex-wrap: wrap; }
}
.alloc-cat { position: relative; }
.alloc-note-corner {
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 14px;
}
.alloc-note-corner::after {
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 7px solid var(--c-warning);
border-left: 7px solid transparent;
}
.alloc-note-corner:hover .alloc-note-tip { display: block; }
.alloc-cat.has-note { cursor: pointer; }
.alloc-cat.has-note:hover .alloc-name { border-bottom: 1px dotted var(--c-warning); }
.alloc-add-note {
margin-left: auto;
border: 0;
border-radius: var(--r-12);
padding: 2px var(--s-8);
background: var(--c-bg);
color: var(--c-primary);
font: inherit;
font-size: var(--fs-micro);
white-space: nowrap;
opacity: 0;
pointer-events: none;
cursor: pointer;
}
tr:hover .alloc-add-note,
.alloc-add-note:focus-visible { opacity: 1; pointer-events: auto; }
.alloc-cat { position: relative; }
.alloc-add-note {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
tr:hover .alloc-name { margin-right: 78px; }
@media (max-width: 760px) {
.alloc-add-note { display: none; }
}
.alloc-body { position: relative; }
.alloc-note-pop {
position: absolute;
z-index: 30;
width: 310px;
max-width: calc(100% - var(--s-24));
padding: var(--s-16);
background: var(--c-bg);
border: 1px solid var(--c-border-strong);
border-radius: var(--r-12);
box-shadow: var(--shadow-2);
}
.alloc-note-pop .note-editor-actions {
display: flex;
justify-content: flex-end;
gap: var(--s-8);
margin-top: var(--s-8);
}
.note-editor-context { margin: 0 0 var(--s-8); font-size: var(--fs-micro); }
.note-editor-label { margin: 0 0 var(--s-4); font-size: var(--fs-caption); font-weight: 600; }
@media (max-width: 700px) {
.alloc-note-pop {
position: fixed;
left: var(--s-12);
right: var(--s-12);
bottom: var(--s-12);
top: auto;
width: auto;
max-width: none;
}
}
.ov-has-note { position: relative; }
.ov-has-note::after {
content: "";
position: absolute;
top: 0;
right: 0;
border-top: 7px solid var(--c-warning);
border-left: 7px solid transparent;
}
.ov-has-note .ov-value {
border-bottom: 1px dotted var(--c-warning);
padding-bottom: 1px;
}
.ov-has-note:hover,
.ov-has-note:focus-visible,
.ov-has-note.is-open { background: #fffaf1; }
.ov-note-tip {
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 60;
width: 230px;
padding: var(--s-12);
background: var(--c-bg);
border: 1px solid var(--c-border-strong);
border-radius: var(--r-8);
box-shadow: var(--shadow-2);
text-align: left;
white-space: normal;
font-variant-numeric: normal;
font-weight: 400;
}
.ov-has-note:hover .ov-note-tip,
.ov-has-note:focus-visible .ov-note-tip,
.ov-has-note.is-open .ov-note-tip { display: block; }
.ov-note-tip b { display: block; margin-bottom: var(--s-4); font-size: var(--fs-caption); }
.ov-note-tip .ov-note-text {
display: block;
color: var(--c-text);
font-size: var(--fs-caption);
line-height: 1.4;
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 40vh;
overflow-y: auto;
}
.ov-note-tip small { display: block; margin-top: var(--s-8); color: var(--c-text-secondary); font-size: var(--fs-micro); }
@media (max-width: 700px) {
.ov-note-tip {
left: var(--s-12) !important;
right: var(--s-12);
width: auto;
max-width: calc(100vw - 24px);
}
}
.spent-note-flag {
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
margin-left: var(--s-4);
border-radius: var(--r-4);
background: var(--c-warning-soft);
color: var(--c-warning);
vertical-align: middle;
cursor: help;
}
.addb-row { grid-template-columns: minmax(0, 1fr) 34px 150px; }
.addb-row > .amount-field,
.addb-row > .addb-total-value { grid-column: 3; }
.addb-note {
position: relative;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border: 0;
border-radius: var(--r-6);
background: none;
color: var(--c-text-secondary);
cursor: pointer;
}
.addb-note:hover { background: var(--c-bg-alt); color: var(--c-primary); }
.drawer-name .addb-note { flex: 0 0 auto; margin-left: auto; }
.addb-note.has-note { background: var(--c-warning-soft); color: var(--c-warning); }
.addb-note .addb-note-dot { display: none; }
.addb-note.has-note .addb-note-dot {
display: block;
position: absolute;
top: 3px;
right: 3px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-warning);
box-shadow: 0 0 0 1px var(--c-bg);
}
.addb-note-editor,
.drawer-note-row > td {
padding: var(--s-8) 0 var(--s-12);
}
.addb-note-label {
display: block;
margin-bottom: var(--s-4);
color: var(--c-text-secondary);
font-size: var(--fs-micro);
font-weight: 600;
}
.addb-note-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
margin-top: var(--s-4);
color: var(--c-text-secondary);
font-size: var(--fs-micro);
}
.addb-note-foot .note-delete { visibility: visible; }
@media (max-width: 640px) {
.addb-row { grid-template-columns: minmax(0, 1fr) 32px 104px; }
}
.addb-note-caret {
display: grid;
place-items: center;
margin-left: -2px;
transition: transform .15s ease;
}
.addb-note[aria-expanded="true"] .addb-note-caret { transform: rotate(180deg); }
.addb-note[aria-expanded="true"] {
background: var(--c-bg-alt);
color: var(--c-primary);
}
.addb-note {
display: inline-flex;
align-items: center;
gap: 1px;
width: auto;
min-width: 30px;
padding: 0 2px;
}
.addb-note-done { margin-left: var(--s-8); }
.addb-note-foot { justify-content: flex-start; gap: var(--s-8); }
.addb-note-foot .note-count { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
.addb-note-caret { transition-duration: .01ms; }
}
.addb-copy,
.addb-fresh { display: block; }
.addb-fresh-error {
margin: 0 0 var(--s-12);
padding: var(--s-8) var(--s-12);
border-radius: var(--r-8);
background: var(--c-danger-soft);
color: var(--c-danger-on-soft);
font-size: var(--fs-base);
}
.addb-frow {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px 34px;
gap: var(--s-8);
align-items: center;
min-height: 44px;
border-bottom: 1px solid var(--c-border);
}
.addb-frow.addb-total { border-bottom: 0; background: var(--c-bg-alt); font-weight: 600; }
.addb-frow.addb-total .addb-name { padding-left: var(--s-8); }
.addb-fresh-head { display: flex; align-items: center; gap: var(--s-12); }
.addb-fresh-head > :last-child { margin-left: auto; }
.addb-fresh-count { color: var(--c-text-muted); font-size: var(--fs-micro); text-transform: none; letter-spacing: 0; }
.addb-fresh-add { text-transform: none; letter-spacing: 0; }
.addb-fresh-name {
min-width: 0;
width: 100%;
height: 30px;
padding: 0 var(--s-4);
border: 0;
border-bottom: 1px dashed var(--c-border-strong);
border-radius: var(--r-4);
background: none;
font-weight: 600;
}
.addb-fresh-name:hover { background: var(--c-bg-alt); }
.addb-fresh-name:focus { background: var(--c-bg); border-bottom-style: solid; }
.addb-fresh-remove {
width: 30px;
height: 30px;
justify-self: end;
border: 0;
border-radius: var(--r-6);
background: none;
color: var(--c-text-secondary);
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.addb-fresh-remove:hover { background: var(--c-danger-soft); color: var(--c-danger-on-soft); }
.addb-fresh-empty {
margin: 0;
padding: var(--s-8);
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.addb-chips {
margin-top: var(--s-12);
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-10);
background: var(--c-bg-alt);
}
.addb-chips-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); }
.addb-chips-head b { display: block; font-size: var(--fs-caption); }
.addb-chips-cloud {
--chip-row-h: 32px;
--chip-rows: 8;
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
max-height: calc(var(--chip-row-h) * var(--chip-rows) + var(--s-8) * (var(--chip-rows) - 1));
margin-top: var(--s-8);
overflow-y: auto;
overscroll-behavior: contain;
}
.addb-chip {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-height: 32px;
padding: var(--s-4) var(--s-12) var(--s-4) var(--s-8);
border: 1px solid var(--c-border);
border-radius: 18px;
background: var(--c-bg);
color: var(--c-text);
cursor: pointer;
}
.addb-chip:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.addb-chip-ico { display: inline-flex; align-items: center; flex: 0 0 auto; }
.addb-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.addb-chip-plus { color: var(--c-primary); font-weight: 700; }
.addb-chip.is-taken { opacity: .45; pointer-events: none; }
.addb-chip-more { cursor: help; background: none; border-style: dashed; }
@media (max-width: 640px) {
.addb-frow { grid-template-columns: minmax(0, 1fr) 104px 32px; }
.addb-chips-head { flex-direction: column; align-items: flex-start; }
.addb-chip-text { max-width: 180px; }
.addb-chips-cloud { max-height: none; overflow-y: visible; }
}
.apop {
display: flex;
flex-direction: column;
max-width: 760px;
height: min(720px, calc(100vh - 48px));
height: min(720px, calc(100dvh - 48px));
overflow: hidden;
}
.pcard-alloc { white-space: nowrap; }
.apop-head { flex: 0 0 auto; gap: var(--s-12); padding: var(--s-16) var(--s-16) var(--s-12); border-bottom: 1px solid var(--c-border); }
.apop-icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border-radius: var(--r-10); background: var(--c-primary-soft); }
.apop-icon .pcard-icon { display: block; }
.apop-title { flex: 1 1 auto; min-width: 0; }
.apop-title h3 { overflow: hidden; font-size: var(--fs-title); text-overflow: ellipsis; white-space: nowrap; }
.apop-sub { margin: 2px 0 0; color: var(--c-text-muted); font-size: var(--fs-micro); }
.apop-filter { flex: 0 0 auto; min-width: 118px; min-height: 34px; }
.apop-close { flex: 0 0 auto; }
.apop-facts-slot { flex: 0 0 auto; }
.apop-facts { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-16); padding: var(--s-12) var(--s-16); background: var(--c-primary-soft); border-bottom: 1px solid var(--c-primary-border); }
.apop-fact { flex: 1 1 auto; min-width: 92px; max-width: 170px; }
.apop-fact-label { display: block; color: var(--c-text-secondary); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.apop-fact-value { display: block; margin-top: 2px; font-size: var(--fs-body); white-space: nowrap; }
.apop-fact-value.is-paid { color: var(--c-success); }
.apop-fact-value.is-due { color: var(--c-danger); }
.apop-body { flex: 1 1 auto; min-height: 120px; padding: 0; overflow: auto; }
.apop-body .table-wrap { overflow: visible; }
.apop-body table { margin: 0; }
.apop-body .table th { padding: var(--s-8); font-size: var(--fs-micro); }
.apop-body .table td { padding: var(--s-8); }
.apop-body .table th:first-child,
.apop-body .table td:first-child { padding-left: var(--s-16); }
.apop-body .table th:last-child,
.apop-body .table td:last-child { padding-right: var(--s-16); }
.apop-body thead th { position: sticky; top: 0; z-index: 1; background: var(--c-bg); }
.apop-body .empty { padding: var(--s-32) var(--s-16); }
.apop-wait { margin: 0; padding: var(--s-32) var(--s-16); color: var(--c-text-muted); text-align: center; }
.apop-foot { flex: 0 0 auto; }
.apop-open { display: inline-flex; align-items: center; gap: var(--s-8); }
@media (max-width: 720px) {
.apop-backdrop { padding: 0; }
.apop {
max-width: none;
max-height: 100vh;
max-height: 100dvh;
height: 100vh;
height: 100dvh;
border-radius: 0;
}
.apop-head { flex-wrap: wrap; }
.apop-title { flex: 1 1 100%; order: 2; }
.apop-filter { flex: 1 1 calc(50% - var(--s-8)); order: 3; min-width: 0; }
.apop-facts { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}
@media (max-width: 768px) {
.table-cards[data-sortable] th[aria-sort="ascending"] .th-sort,
.table-cards[data-sortable] th[aria-sort="descending"] .th-sort { border-color: var(--c-primary); background: var(--c-primary-soft); }
}
.ov-head .th-sort { min-width: 0; }
.ov-head .th-sort-label { min-width: 0; overflow: hidden; }
.abnew-lead {
margin: 0 0 var(--s-16);
color: var(--c-text-secondary);
font-size: var(--fs-body);
line-height: 1.45;
}
.abnew-tag {
margin-left: var(--s-8);
padding: 1px 6px;
font-size: var(--fs-caption);
font-weight: 800;
letter-spacing: .05em;
vertical-align: middle;
}
.badge-new {
background: #edf1ff;
color: #3352c4;
border-color: transparent;
font-weight: 700;
letter-spacing: .03em;
}
.row-approve {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--r-8);
color: var(--c-text-muted);
background: none;
cursor: pointer;
transition: color .15s ease, background-color .15s ease;
}
.row-approve:hover,
.row-approve:focus-visible {
color: #178653;
background: #e5f5ed;
}
.btn-success {
border: 1px solid #157a4c;
background: #178653;
color: var(--c-on-accent);
}
.btn-success:hover,
.btn-success:focus-visible {
border-color: #10633d;
background: #126f45;
color: var(--c-on-accent);
}
.dropdown-item.is-success { color: #178653; }
.dropdown-item.is-success:hover,
.dropdown-item.is-success:focus-visible { background: #e5f5ed; color: #126f45; }
.sidebar-link .count-badge { margin-left: auto; }
.sidebar-dot { display: none; }
.sidebar-link { position: relative; }
@media (max-width: 1279px) {
.sidebar-link .count-badge { display: none; }
.sidebar-link .sidebar-dot {
display: block;
position: absolute;
top: 8px;
right: 18px;
width: 8px;
height: 8px;
border: 2px solid var(--c-bg);
border-radius: 50%;
background: var(--c-danger);
}
}
.has-rail .sidebar-link .count-badge { display: none; }
.has-rail .sidebar-link .sidebar-dot {
display: block;
position: absolute;
top: 8px;
right: 18px;
width: 8px;
height: 8px;
border: 2px solid var(--c-bg);
border-radius: 50%;
background: var(--c-danger);
}
.drawer-table-edit tfoot td.num { padding-right: 13px; }
.page-head-title {
display: flex;
align-items: baseline;
gap: var(--s-12);
flex-wrap: wrap;
}
.approve-mode { margin-top: var(--s-12); }
.approve-source { margin: var(--s-8) 0 0 26px; }
.num-locked {
cursor: help;
text-decoration: underline dotted var(--c-border-strong);
text-underline-offset: 3px;
}
.fflow-wrap {
container-type: inline-size;
container-name: fflow;
margin-bottom: var(--s-12);
}
.fflow {
--ff-pink:        #da175f;
--ff-orange:      #dc6b30;
--ff-spend-bg:    #fcf3f6;
--ff-spend-grid:  #eadfe3;
--ff-net-bg:      var(--c-primary-soft);
--ff-net-line:    var(--c-primary);
--ff-net-fill:    #68b4c1;
--ff-up:          var(--impact-up);
--ff-down:        var(--impact-down);
--ff-zero:        #9fb1bd;
--ff-neutral:     #8d7d5c;
--ff-income:      #2668ec;
--ff-income-line: #735bd4;
--ff-avg:         #9aabba;
--ff-muted:       #607285;
--ff-green:       #168653;
--ff-ease: cubic-bezier(.16, 1, .3, 1);
--ff-time: .22s;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
overflow: hidden;
background: var(--c-bg);
box-shadow: var(--shadow-1);
}
.fflow-widget {
position: relative;
min-width: 0;
padding: 14px 18px 8px;
}
.fflow-widget.is-spending { background: var(--ff-spend-bg); }
.fflow-widget.is-net      { background: var(--ff-net-bg); }
.fflow-widget.is-net::before {
content: '';
position: absolute;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(
to bottom,
var(--c-border) 0 40px,
transparent 40px 78px,
var(--c-border) 78px 100%
);
pointer-events: none;
}
.fflow-metrics {
display: grid;
grid-template-columns: 132px 86px minmax(0, 1fr);
align-items: center;
min-height: 58px;
padding-right: 118px;
}
.fflow-metrics.is-single {
display: block;
padding-left: 82px;
}
.fflow-zone {
position: relative;
display: block;
min-width: 0;
padding: 6px 9px;
margin: -6px -9px;
background: transparent;
color: inherit;
text-decoration: none;
isolation: isolate;
}
a.fflow-zone { cursor: pointer; }
a.fflow-zone:hover,
a.fflow-zone:focus-visible { background: transparent; outline: none; }
a.fflow-zone:focus-visible { box-shadow: 0 0 0 3px rgba(23, 107, 124, .18); border-radius: 8px; }
.fflow-zone-label,
.fflow-zone-title {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
line-height: 1.3;
}
.fflow-zone-title { font-size: var(--fs-caption); font-weight: 600; }
.is-spending .fflow-zone.is-primary .fflow-zone-name { color: var(--ff-pink); }
.is-net .fflow-zone.is-primary .fflow-zone-name      { color: var(--ff-net-line); }
.fflow-zone-label,
.fflow-zone-name {
position: relative;
width: max-content;
max-width: 100%;
}
.fflow-zone-label::after,
.fflow-zone-name::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background: currentColor;
opacity: .65;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--ff-time) var(--ff-ease);
}
a.fflow-zone:hover .fflow-zone-label::after,
a.fflow-zone:focus-visible .fflow-zone-label::after,
a.fflow-zone:hover .fflow-zone-name::after,
a.fflow-zone:focus-visible .fflow-zone-name::after { transform: scaleX(1); }
.fflow-zone-label,
.fflow-zone-title,
.fflow-zone-value,
.fflow-value,
.fflow-delta {
transition: transform var(--ff-time) var(--ff-ease), color .18s ease;
}
a.fflow-zone:hover .fflow-zone-label,
a.fflow-zone:focus-visible .fflow-zone-label,
a.fflow-zone:hover .fflow-zone-title,
a.fflow-zone:focus-visible .fflow-zone-title,
a.fflow-zone:hover .fflow-delta,
a.fflow-zone:focus-visible .fflow-delta { transform: translateX(2px); }
.fflow-mini-icon { display: grid; place-items: center; width: 14px; height: 14px; color: var(--ff-income); }
.fflow-mini-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.fflow-cue {
display: inline-grid;
place-items: center;
flex: none;
width: 18px;
height: 18px;
border: 1px solid var(--c-border-strong, #c7d8e1);
border-radius: 6px;
background: rgba(255, 255, 255, .72);
color: var(--c-primary);
transition: transform var(--ff-time) var(--ff-ease), border-color .18s ease, background .18s ease;
}
.fflow-cue svg {
width: 11px;
height: 11px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.fflow-zone.is-income .fflow-cue { position: absolute; right: 6px; top: 6px; }
.fflow-zone.is-income .fflow-zone-label { padding-right: 22px; }
a.fflow-zone:hover .fflow-cue,
a.fflow-zone:focus-visible .fflow-cue {
transform: translate(2px, -2px);
border-color: currentColor;
background: var(--c-bg);
}
.fflow-zone-value,
.fflow-value {
display: block;
font-variant-numeric: tabular-nums;
transform-origin: left center;
}
.fflow-zone-value {
margin-top: 2px;
color: var(--ff-income);
font-size: var(--fs-h2);
font-weight: 550;
}
.fflow-value {
margin-top: 1px;
font-size: 28px;
font-weight: 550;
letter-spacing: -.02em;
line-height: 1.15;
}
a.fflow-zone:hover .fflow-zone-value,
a.fflow-zone:focus-visible .fflow-zone-value { transform: translateX(2px) scale(1.05); }
a.fflow-zone:hover .fflow-value,
a.fflow-zone:focus-visible .fflow-value { transform: scale(1.05); }
.fflow-value.is-spending { color: var(--ff-pink); }
.fflow-value.is-net      { color: var(--ff-net-line); }
.fflow-value.is-negative { color: var(--c-danger); }
.fflow-delta {
display: block;
margin-top: 1px;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
font-variant-numeric: tabular-nums;
}
.fflow-zone.is-primary .fflow-delta { color: var(--c-text-secondary-on-wash); }
.fflow-delta.is-spend {
position: relative;
white-space: nowrap;
line-height: 1.05;
}
.fflow-spend-count {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transform: translateY(-3px);
transition: opacity .18s ease, transform var(--ff-time) var(--ff-ease);
}
.fflow-spend-rate { display: block; transition: transform var(--ff-time) var(--ff-ease); }
a.fflow-zone:hover .fflow-spend-count,
a.fflow-zone:focus-visible .fflow-spend-count { opacity: 1; transform: none; }
a.fflow-zone:hover .fflow-spend-rate,
a.fflow-zone:focus-visible .fflow-spend-rate { transform: translateY(11px); }
.fflow-zone-more {
display: grid;
gap: 1px;
margin-top: 4px;
color: var(--c-primary);
font-size: var(--fs-caption);
line-height: 1.25;
white-space: nowrap;
opacity: 0;
transform: translateY(-2px);
transition: opacity .18s ease, transform var(--ff-time) var(--ff-ease);
}
a.fflow-zone:hover .fflow-zone-more,
a.fflow-zone:focus-visible .fflow-zone-more { opacity: 1; transform: none; }
.fflow-period {
position: absolute;
top: 12px;
right: 14px;
z-index: 2;
display: flex;
gap: 6px;
align-items: center;
}
.fflow-period-select {
height: 28px;
min-width: 0;
padding: 0 26px 0 11px;
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
background-color: var(--c-bg);
background-position: right 9px center;
box-shadow: 0 1px 2px rgba(0, 55, 112, .06);
color: var(--c-text);
font-size: var(--fs-micro);
font-weight: 500;
cursor: pointer;
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.fflow-period-select:hover {
border-color: var(--c-border-strong);
box-shadow: 0 2px 6px rgba(0, 55, 112, .1);
}
.fflow-period-select:focus,
.fflow-period-select:focus-visible {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-ring);
}
span.fflow-period-select {
display: inline-flex;
align-items: center;
}
@media (pointer: coarse) {
.fflow-period-select {
height: 34px;
padding: 0 30px 0 13px;
background-position: right 11px center;
font-size: var(--fs-no-zoom);
}
}
.fflow-arrow { display: grid; place-items: center; }
.fflow-arrow svg { width: 78px; height: 30px; overflow: visible; }
.fflow-arrow-line,
.fflow-arrow-head,
.fflow-bridge-left,
.fflow-bridge-right {
fill: none;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.fflow-arrow-line.is-in   { stroke: var(--ff-income-line); }
.fflow-arrow-head.is-spending { stroke: var(--ff-pink); }
.fflow-bridge {
position: absolute;
z-index: 3;
left: 50%;
top: 40px;
width: 108px;
height: 38px;
transform: translateX(-50%);
pointer-events: auto;
cursor: default;
}
.fflow-bridge svg { width: 100%; height: 100%; overflow: visible; }
.fflow-bridge-left  { stroke: var(--ff-pink); }
.fflow-bridge-right { stroke: var(--c-success); }
.fflow-bridge-dot   { fill: var(--ff-neutral); }
.fflow-bridge-value {
position: absolute;
left: 50%;
top: 31px;
color: var(--ff-green);
font-size: var(--fs-caption);
font-weight: 600;
line-height: 1;
white-space: nowrap;
opacity: 0;
transform: translate(-50%, -3px);
transition: opacity .18s ease, transform var(--ff-time) var(--ff-ease);
}
.fflow-bridge-value.is-negative { color: var(--c-danger); }
.fflow-bridge:hover .fflow-bridge-value { opacity: 1; transform: translate(-50%, 0); }
.fflow-chart { position: relative; margin-top: 2px; }
.fflow-svg {
display: block;
width: 100%;
height: auto;
aspect-ratio: 520 / 142;
}
.fflow-grid { stroke: #e6edf2; stroke-width: 1; fill: none; }
.is-spending .fflow-grid { stroke: var(--ff-spend-grid); }
.fflow-axis { fill: var(--ff-muted); font-size: var(--fs-caption); }
.fflow-month.is-off { display: none; }
.fflow-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fflow-line.is-spending { stroke: var(--ff-orange); }
.fflow-line.is-net      { stroke: var(--ff-net-line); }
.fflow-area.is-spending { fill: url(#fflow-spend-fill); }
.fflow-area.is-net      { fill: url(#fflow-net-fill); }
.fflow-fill-top.is-spending    { stop-color: var(--ff-orange);   stop-opacity: .22; }
.fflow-fill-bottom.is-spending { stop-color: var(--ff-orange);   stop-opacity: .02; }
.fflow-fill-top.is-net         { stop-color: var(--ff-net-fill); stop-opacity: .30; }
.fflow-fill-bottom.is-net      { stop-color: var(--ff-net-fill); stop-opacity: .02; }
.fflow-average { fill: none; stroke: var(--ff-avg); stroke-width: 1.2; stroke-dasharray: 4 4; }
.fflow-point { fill: var(--c-bg); stroke-width: 2; }
.fflow-point.is-spending { stroke: var(--ff-orange); }
.fflow-point.is-net      { stroke: var(--ff-net-line); }
.fflow-bar.is-positive { fill: var(--ff-up); }
.fflow-bar.is-negative { fill: var(--ff-down); }
.fflow-zero { fill: none; stroke: var(--ff-zero); stroke-width: 1; stroke-dasharray: 3 3; }
.fflow-hit { fill: transparent; cursor: crosshair; }
.fflow-hit:focus { outline: none; }
.fflow-hit:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.fflow-tip {
position: absolute;
z-index: 4;
min-width: 104px;
padding: 6px 8px;
border: 1px solid var(--c-border);
border-radius: 7px;
background: var(--c-bg);
box-shadow: 0 6px 16px rgba(0, 55, 112, .16);
pointer-events: none;
transform: translate(-50%, -108%);
white-space: nowrap;
}
.fflow-tip-month { display: block; color: var(--ff-muted); font-size: var(--fs-caption); }
.fflow-tip-value { display: block; font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
.fflow-tip-extra { display: block; color: var(--c-success); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.fflow-tip-extra.is-negative { color: var(--c-danger); }
.fflow-legend {
display: flex;
justify-content: flex-end;
gap: 11px;
min-height: 13px;
margin: 0;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.fflow-key { display: flex; align-items: center; gap: 4px; }
.fflow-key i { width: 12px; height: 2px; border-radius: 1px; background: var(--ff-orange); }
.fflow-key i.is-net { background: var(--ff-net-line); }
.fflow-key.is-avg i { height: 0; border-top: 1px dashed var(--ff-avg); background: none; }
.fflow-key.is-bar i { height: 7px; border-radius: 2px; background: var(--ff-up); }
.fflow-hint,
.fflow-empty {
margin: 0;
color: var(--ff-muted);
font-size: var(--fs-caption);
}
.fflow-empty { padding: 34px 0; text-align: center; }
@container fflow (max-width: 900px) {
.fflow { grid-template-columns: minmax(0, 1fr); }
.fflow-widget.is-net      { grid-area: 1 / 1; }
.fflow-widget.is-spending { grid-area: 2 / 1; }
.fflow-widget.is-net::before { display: none; }
.fflow-widget.is-spending { border-top: 1px solid var(--c-border); }
.fflow-metrics.is-single { padding-left: 0; }
.fflow-bridge { display: none; }
}
@container fflow (max-width: 560px) {
.fflow-widget { padding: 12px 11px 7px; }
.fflow-period { top: 10px; right: 11px; }
.fflow-metrics {
grid-template-columns: 102px 58px minmax(0, 1fr);
padding-top: 24px;
padding-right: 0;
}
.fflow-axis { font-size: var(--fs-caption); }
.fflow-line { stroke-width: 3.4; }
.fflow-average { stroke-width: 1.9; }
.fflow-point { stroke-width: 3; }
.fflow-month.is-alt { display: none; }
.fflow-arrow svg { width: 54px; }
.fflow-zone-value { font-size: 17px; }
.fflow-value { font-size: 23px; }
.fflow-zone-title { font-size: var(--fs-micro); }
.fflow-delta { font-size: var(--fs-caption); }
}
@container fflow (max-width: 370px) {
.fflow-metrics {
grid-template-columns: 92px 46px minmax(0, 1fr);
}
.fflow-arrow svg { width: 44px; }
.fflow-value { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
.fflow-zone-label,
.fflow-zone-title,
.fflow-zone-value,
.fflow-value,
.fflow-delta,
.fflow-zone-label::after,
.fflow-zone-name::after,
.fflow-cue,
.fflow-zone-more,
.fflow-spend-count,
.fflow-spend-rate,
.fflow-bridge-value { transition: none; }
a.fflow-zone:hover .fflow-zone-label,
a.fflow-zone:focus-visible .fflow-zone-label,
a.fflow-zone:hover .fflow-zone-title,
a.fflow-zone:focus-visible .fflow-zone-title,
a.fflow-zone:hover .fflow-delta,
a.fflow-zone:focus-visible .fflow-delta,
a.fflow-zone:hover .fflow-zone-value,
a.fflow-zone:focus-visible .fflow-zone-value,
a.fflow-zone:hover .fflow-value,
a.fflow-zone:focus-visible .fflow-value,
a.fflow-zone:hover .fflow-cue,
a.fflow-zone:focus-visible .fflow-cue { transform: none; }
}
.modal.modal-nw {
width: 100%;
max-width: 756px;
}
.nwp,
.nwh-chart-panel {
--nwp-line:     var(--c-primary);
--nwp-fill:     #68b4c1;
--nwp-up:       var(--impact-up);
--nwp-down:     var(--impact-down);
--nwp-zero:     #b6c4ce;
--nwp-grid:     #e7edf2;
--nwp-muted:    #65798c;
--nwp-meter-w:   52px;
--nwp-meter-gap: 7px;
--nwp-cell-x: 12px;
--nwp-plot:  300px;
--nwp-pad-t: 10px;
position: relative;
display: grid;
gap: var(--s-12);
}
.nwp-period {
position: absolute;
z-index: 2;
top: -46px;
right: calc(32px + var(--s-12));
display: flex;
align-items: center;
gap: 6px;
}
.nwp-period-label {
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.nwp-period .select-inline {
min-width: 0;
min-height: 30px;
height: 30px;
padding: 0 28px 0 12px;
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
background-position: right 10px center;
box-shadow: 0 1px 2px rgba(0, 55, 112, .06);
font-size: var(--fs-caption);
font-weight: 500;
cursor: pointer;
transition: border-color .16s ease, box-shadow .16s ease;
}
.nwp-period .select-inline:hover {
border-color: var(--c-border-strong);
box-shadow: 0 2px 6px rgba(0, 55, 112, .1);
}
.nwp-period .select-inline:focus,
.nwp-period .select-inline:focus-visible {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.nwp-summary {
display: grid;
grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
border: 1px solid var(--c-border);
border-radius: var(--r-12);
overflow: hidden;
}
.nwp-cell {
min-height: 82px;
padding: 13px 15px;
border-left: 1px solid var(--c-border);
}
.nwp-cell.is-lead {
border-left: 0;
background: var(--c-primary-soft);
}
.nwp-label {
display: block;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.nwp-value {
display: block;
margin-top: 6px;
font-size: 21px;
font-weight: 550;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.nwp-cell.is-lead .nwp-value { color: var(--c-primary); font-size: 25px; }
.nwp-note {
display: block;
margin-top: 2px;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
font-variant-numeric: tabular-nums;
}
.nwp-value.is-positive, .nwp-note.is-positive { color: var(--c-success); }
.nwp-value.is-negative, .nwp-note.is-negative { color: var(--c-danger); }
.nwp-cell.is-lead .nwp-value.is-negative { color: var(--c-danger); }
.nwp-panel {
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
}
.nwp-panel-head {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 8px 14px;
border-bottom: 1px solid var(--c-border);
}
.nwp-panel-head h4 { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.nwp-modes {
display: flex;
margin-left: auto;
padding: 2px;
border: 1px solid var(--c-border);
border-radius: 8px;
background: #f4f7f9;
}
.nwp-modes button {
height: 28px;
padding: 0 10px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
cursor: pointer;
}
.nwp-modes button.is-active {
background: var(--c-bg);
color: var(--c-primary);
box-shadow: 0 1px 3px rgba(0, 55, 112, .1);
}
.nwp-modes button:focus-visible { outline: 3px solid var(--c-primary-ring); outline-offset: -1px; }
.nwp-chart {
--nwp-gut-l: 48px;
--nwp-gut-r: 12px;
position: relative;
padding: var(--nwp-pad-t) var(--nwp-gut-r) 26px var(--nwp-gut-l);
}
.nwp-chart .nwp-months,
.nwp-chart .nwp-dots,
.nwp-chart .nwh-stem-dots {
left: var(--nwp-gut-l);
right: var(--nwp-gut-r);
}
.nwp-svg {
display: block;
width: 100%;
height: var(--nwp-plot);
clip-path: inset(0 0 calc(var(--nwp-cut, 0) * 100%) 0);
margin-bottom: calc(var(--nwp-plot) * var(--nwp-cut, 0) * -1);
}
.nwp-tick {
position: absolute;
left: 0;
width: 42px;
margin-top: -6px;
color: var(--nwp-muted);
font-size: var(--fs-caption);
text-align: right;
font-variant-numeric: tabular-nums;
}
.nwp-months {
position: absolute;
bottom: 6px;
height: 14px;
}
.nwp-month {
position: absolute;
transform: translateX(-50%);
color: var(--nwp-muted);
font-size: var(--fs-caption);
white-space: nowrap;
}
.nwp-month.is-off { display: none; }
.nwp-grid { fill: none; stroke: var(--nwp-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nwp-zero { fill: none; stroke: var(--nwp-zero); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.nwp-line {
fill: none;
stroke: var(--nwp-line);
stroke-width: 2.4;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.nwp-area { fill: url(#nwp-fill); }
.nwp-fill-top    { stop-color: var(--nwp-fill); stop-opacity: .30; }
.nwp-fill-bottom { stop-color: var(--nwp-fill); stop-opacity: .02; }
.nwp-dots {
position: absolute;
top: var(--nwp-pad-t);
height: var(--nwp-plot);
pointer-events: none;
}
.nwp-dots i {
position: absolute;
box-sizing: border-box;
width: 9px;
height: 9px;
margin: -4.5px 0 0 -4.5px;
border: 2px solid var(--nwp-line);
border-radius: 50%;
background: var(--c-bg);
transition: transform .12s ease;
}
.nwp-dots i.is-active { transform: scale(1.6); }
.fflow-point {
transform-box: fill-box;
transform-origin: center;
transition: transform .12s ease;
}
.fflow-point.is-active { transform: scale(1.6); }
.nwp-bar.is-positive { fill: var(--nwp-up); }
.nwp-bar.is-negative { fill: var(--nwp-down); }
.nwp-chart.is-net .nwp-bars,
.nwp-chart.is-impact .nwp-line,
.nwp-chart.is-impact .nwp-area,
.nwp-chart.is-impact .nwp-dots { display: none; }
.nwp-chart.is-net .nwp-zero { display: none; }
.nwp-chart.is-impact .nwp-tick,
.nwp-chart.is-impact .nwp-grid { display: none; }
.nwp-chart.is-net .nwp-svg {
clip-path: inset(0 0 28% 0);
margin-bottom: calc(var(--nwp-plot) * -0.28);
}
.nwp-chart.is-impact .nwp-svg {
clip-path: inset(50% 0 calc(var(--nwp-cut, 0) * 100%) 0);
margin-top: calc(var(--nwp-plot) * -0.5);
}
.nwp-chart.is-net ~ .nwp-legend .nwp-key.is-bar,
.nwp-chart.is-impact ~ .nwp-legend .nwp-key.is-line { display: none; }
.nwp-legend {
display: flex;
gap: 14px;
margin: 0;
padding: 0 14px 10px 48px;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.nwp-key { display: flex; align-items: center; gap: 5px; }
.nwp-key i { width: 13px; height: 2px; border-radius: 1px; background: var(--nwp-line); }
.nwp-key.is-bar i { height: 7px; border-radius: 2px; background: var(--nwp-up); }
.nwp-drivers h4 { margin: 0 0 8px; font-size: var(--fs-body); font-weight: 600; }
.nwp-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.nwp-table th {
height: 31px;
padding: 0 var(--nwp-cell-x);
border-bottom: 1px solid var(--c-border);
color: var(--nwp-muted);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .05em;
text-align: left;
text-transform: uppercase;
}
.nwp-table th.num, .nwp-table td.num { text-align: right; }
.nwp-table td {
height: 36px;
padding: 0 var(--nwp-cell-x);
border-bottom: 1px solid var(--c-border);
}
.nwp-table tr:last-child td { border-bottom: 0; }
.nwp-table td.strong { font-weight: 600; }
.nwp-impact { font-weight: 600; }
.nwp-impact.is-positive { color: var(--c-success); }
.nwp-impact.is-negative { color: var(--c-danger); }
.nwp-meter {
display: inline-block;
width: var(--nwp-meter-w);
height: 3px;
margin-left: var(--nwp-meter-gap);
border-radius: 3px;
background: #dce5e9;
vertical-align: middle;
overflow: hidden;
}
.nwp-meter i { display: block; height: 100%; }
.nwp-table { --nwp-meter-w: 36px; }
.nwp-table td[data-label="Impact"],
.nwp-table th:nth-child(5) { white-space: nowrap; }
.nwp-meter i.is-positive { background: var(--nwp-up); }
.nwp-meter i.is-negative { background: var(--nwp-down); }
.nwp-draw td {
height: 30px;
color: var(--c-text-secondary);
font-size: var(--fs-micro);
}
.nwp-table .nwh-ms-row td[data-label="Impact"] {
padding-right: calc(var(--nwp-cell-x) + var(--nwp-meter-w) + var(--nwp-meter-gap));
}
.nwp-draw td.num {
padding-right: calc(var(--nwp-cell-x) + var(--nwp-meter-w) + var(--nwp-meter-gap));
}
.nwp-draw-arrow { margin-right: 4px; color: var(--nwp-muted); }
.nwp-empty {
margin: 0;
padding: 40px 0;
color: var(--nwp-muted);
font-size: var(--fs-caption);
text-align: center;
}
@media (max-width: 820px) {
.nwp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nwp-cell:nth-child(3) { border-left: 0; }
.nwp-cell:nth-child(n + 3) { border-top: 1px solid var(--c-border); }
.nwp { --nwp-plot: 250px; --nwp-cell-x: 8px; --nwp-meter-w: 40px; }
.nwp-table { min-width: max-content; }
}
@media (max-width: 610px) {
.nwp { --nwp-meter-w: 0px; --nwp-meter-gap: 0px; }
.nwp-meter { display: none; }
}
@media (max-width: 560px) {
.nwp-period {
position: static;
justify-content: flex-end;
}
.nwp-period-label { display: inline; }
.nwp-cell { min-height: 72px; padding: 10px 11px; }
.nwp-value { font-size: 19px; }
.nwp-cell.is-lead .nwp-value { font-size: 21px; }
.nwp-panel-head { flex-wrap: wrap; }
.nwp-modes { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.nwp { --nwp-plot: 220px; --nwp-pad-t: 8px; }
.nwp-chart { --nwp-gut-l: 40px; --nwp-gut-r: 6px; }
.nwp-legend { padding-left: 40px; }
.nwp-drivers { overflow: visible; }
.nwp-table, .nwp-table tbody, .nwp-table tr, .nwp-table td { display: block; }
.nwp-table { min-width: 0; }
.nwp-table thead { display: none; }
.nwp-table tbody tr {
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: 8px;
padding: 10px 11px;
border: 1px solid var(--c-border);
border-radius: 10px;
}
.nwp-table td {
height: auto;
min-height: 40px;
padding: 4px 0;
border: 0;
text-align: left;
}
.nwp-table td.num { text-align: left; }
.nwp-table td:nth-child(even) { text-align: right; }
.nwp-table td:nth-child(even) .nwp-meter { margin-left: 0; }
.nwp-table td::before {
content: attr(data-label);
display: block;
margin-bottom: 2px;
color: var(--nwp-muted);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}
.nwp-table tbody tr.nwp-draw {
display: flex;
justify-content: space-between;
margin: -6px 0 8px;
padding: 6px 11px 8px;
border-top: 0;
border-radius: 0 0 10px 10px;
}
.nwp-table tr.nwp-draw td.num { padding-right: 0; }
.nwp-table tr.nwp-draw td { min-height: 0; }
.nwp-table tr.nwp-draw td::before { content: none; }
.nwp-table tr.nwp-draw td:empty { display: none; }
.nwp-table tbody tr:has(+ tr.nwp-draw) {
margin-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.nwp-table tbody tr.nwp-draw:has(+ tr.nwp-draw) {
margin-bottom: 0;
border-radius: 0;
}
}
:root {
--rb-ease: cubic-bezier(.16, 1, .3, 1);
}
.is-counting {
animation: rb-value 620ms var(--rb-ease);
}
@keyframes rb-value {
0%   { opacity: .42; filter: blur(1.1px); }
70%  { opacity: .9;  filter: blur(.2px); }
100% { opacity: 1;   filter: none; }
}
@keyframes rb-wipe {
0%   { clip-path: inset(0 100% 0 0); opacity: .05; filter: blur(1.4px); }
40%  { opacity: .55; }
100% { clip-path: inset(0); opacity: 1; filter: none; }
}
@keyframes rb-draw {
from { stroke-dashoffset: 760; opacity: .2; }
to   { stroke-dashoffset: 0;   opacity: 1; }
}
@keyframes rb-grow {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}
.fflow-wrap.is-rebuilding .fflow-widget.is-spending .fflow-chart {
animation: rb-wipe 780ms 40ms var(--rb-ease) both;
}
.fflow-wrap.is-rebuilding .fflow-widget.is-net .fflow-chart {
animation: rb-wipe 780ms 190ms var(--rb-ease) both;
}
.fflow-wrap.is-rebuilding .fflow-line {
stroke-dasharray: 760;
animation: rb-draw 840ms 190ms var(--rb-ease) both;
}
.fflow-wrap.is-rebuilding .fflow-bar {
transform-box: view-box;
transform-origin: center 82px;
animation: rb-grow-bar 700ms 250ms var(--rb-ease) both;
}
@keyframes rb-grow-bar {
from { transform: scaleY(0); }
to   { transform: scaleY(1); }
}
#alloc-body.is-rebuilding .alloc-chart {
animation: rb-fade 700ms 160ms var(--rb-ease) both;
}
@keyframes rb-fade {
from { opacity: .18; }
to   { opacity: 1; }
}
#alloc-body.is-rebuilding tbody tr {
animation: rb-wipe 520ms var(--rb-ease) both;
}
#alloc-body.is-rebuilding tbody tr:nth-child(1) { animation-delay: 280ms; }
#alloc-body.is-rebuilding tbody tr:nth-child(2) { animation-delay: 350ms; }
#alloc-body.is-rebuilding tbody tr:nth-child(3) { animation-delay: 420ms; }
#alloc-body.is-rebuilding tbody tr:nth-child(4) { animation-delay: 490ms; }
#alloc-body.is-rebuilding tbody tr:nth-child(5) { animation-delay: 560ms; }
#alloc-body.is-rebuilding tbody tr:nth-child(n + 6) { animation-delay: 610ms; }
[data-year-table].is-rebuilding tbody tr {
animation: rb-wipe 540ms var(--rb-ease) both;
}
[data-year-table].is-rebuilding tbody tr:nth-child(1) { animation-delay: 300ms; }
[data-year-table].is-rebuilding tbody tr:nth-child(2) { animation-delay: 380ms; }
[data-year-table].is-rebuilding tbody tr:nth-child(3) { animation-delay: 460ms; }
[data-year-table].is-rebuilding tbody tr:nth-child(4) { animation-delay: 540ms; }
[data-year-table].is-rebuilding tbody tr:nth-child(5) { animation-delay: 620ms; }
[data-year-table].is-rebuilding tbody tr:nth-child(n + 6) { animation-delay: 680ms; }
[data-dash-tab="compare"].is-rebuilding .radar-canvas {
animation: rb-fade 760ms 320ms var(--rb-ease) both;
}
[data-dash-tab="compare"].is-rebuilding .radar-legend {
animation: rb-wipe 560ms 460ms var(--rb-ease) both;
}
#projects-body.is-rebuilding .pcard {
animation: rb-wipe 460ms var(--rb-ease) both;
}
#projects-body.is-rebuilding .pcard:nth-child(1) { animation-delay: 220ms; }
#projects-body.is-rebuilding .pcard:nth-child(2) { animation-delay: 280ms; }
#projects-body.is-rebuilding .pcard:nth-child(n + 3) { animation-delay: 340ms; }
#projects-body.is-rebuilding .pcard-mini-fill {
transform-origin: left center;
animation: rb-grow 780ms 380ms var(--rb-ease) both;
}
body.is-month-loading::before,
body.is-month-settling::before {
content: "";
position: fixed;
z-index: 9999;
top: 0;
left: 0;
height: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(90deg, var(--c-primary), #4fb3c4);
box-shadow: 0 0 9px rgba(23, 107, 124, .55);
pointer-events: none;
}
body.is-month-loading::before {
animation: rb-bar 1100ms cubic-bezier(.1, .8, .2, 1) both;
}
body.is-month-settling::before {
animation: rb-bar-done 320ms ease-out both;
}
@keyframes rb-bar {
0%   { width: 0;   opacity: 1; }
55%  { width: 62%; }
100% { width: 86%; opacity: 1; }
}
@keyframes rb-bar-done {
0%   { width: 86%; opacity: 1; }
70%  { width: 100%; opacity: 1; }
100% { width: 100%; opacity: 0; }
}
body.is-month-loading { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
.fflow-wrap.is-rebuilding .fflow-chart {
animation-name: rb-wipe-calm !important;
}
#alloc-body.is-rebuilding .alloc-chart,
#alloc-body.is-rebuilding tbody tr,
[data-year-table].is-rebuilding tbody tr,
[data-dash-tab="compare"].is-rebuilding .radar-canvas,
[data-dash-tab="compare"].is-rebuilding .radar-legend,
#projects-body.is-rebuilding .pcard {
animation-name: rb-calm !important;
}
.is-counting,
.fflow-wrap.is-rebuilding .fflow-line,
.fflow-wrap.is-rebuilding .fflow-bar,
#projects-body.is-rebuilding .pcard-mini-fill {
animation: none !important;
}
body.is-month-loading::before {
width: 100%;
animation: none !important;
}
body.is-month-settling::before {
width: 100%;
animation: rb-calm-out 280ms linear both !important;
}
}
@keyframes rb-calm {
from { opacity: .12; }
to   { opacity: 1; }
}
@keyframes rb-wipe-calm {
0%   { clip-path: inset(0 100% 0 0); opacity: .08; }
40%  { opacity: .6; }
100% { clip-path: inset(0); opacity: 1; }
}
@keyframes rb-calm-out {
from { opacity: 1; }
to   { opacity: 0; }
}
.nwh-summary {
display: grid;
grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
margin-bottom: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
overflow: hidden;
}
.nwh-metric {
min-height: 88px;
padding: var(--s-12) var(--s-16);
border-left: 1px solid var(--c-border);
}
.nwh-metric.is-lead {
border-left: 0;
background: var(--c-primary-soft);
}
.nwh-metric.is-lead .nwh-metric-label,
.nwh-metric.is-lead .nwh-metric-note { color: var(--c-text-secondary-on-wash); }
.nwh-metric-label {
display: block;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.nwh-metric-value {
display: block;
margin-top: var(--s-4);
font-size: var(--fs-h1);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
.nwh-metric.is-lead .nwh-metric-value { font-size: 28px; }
.nwh-metric-value.is-positive { color: var(--c-success); }
.nwh-metric-value.is-negative { color: var(--c-danger); }
.nwh-metric-note {
display: block;
margin-top: var(--s-4);
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.nwh-history {
display: grid;
grid-template-columns: minmax(0, 1fr) 250px;
margin-bottom: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
overflow: hidden;
}
.nwh-chart-panel {
min-width: 0;
--nwp-plot: 260px;
}
.nwh-panel-head {
display: flex;
align-items: center;
gap: var(--s-8);
min-height: 48px;
padding: var(--s-8) var(--s-16);
border-bottom: 1px solid var(--c-border);
}
.nwh-panel-head h2 { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.nwh-range { color: var(--c-text-secondary); font-size: var(--fs-caption); }
.nwh-year { margin-left: auto; display: flex; align-items: center; gap: var(--s-8); }
.nwh-year .select-inline,
.nwh-impact .select-inline {
min-width: 0;
min-height: 32px;
height: 32px;
padding: 0 28px 0 12px;
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
background-position: right 10px center;
font-size: var(--fs-caption);
font-weight: 500;
cursor: pointer;
}
.nwh-chart {
--nwp-gut-r: 14px;
padding: var(--nwp-pad-t) var(--nwp-gut-r) 26px var(--nwp-gut-l);
}
.nwh-chart-empty {
padding: 48px 16px;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
text-align: center;
}
.nwh-chart-empty p { margin: 0 0 var(--s-4); }
.nwh-insights {
border-left: 1px solid var(--c-border);
background: var(--c-bg-alt);
}
.nwh-insights .nwh-panel-head { background: var(--c-bg); }
.nwh-insight-list { padding: var(--s-4) var(--s-16) var(--s-12); }
.nwh-insight {
padding: var(--s-12) 0;
border-bottom: 1px solid var(--c-border);
}
.nwh-insight:last-child { border-bottom: 0; }
.nwh-insight-label { color: var(--c-text-secondary); font-size: var(--fs-caption); }
.nwh-insight strong {
display: block;
margin-top: 3px;
font-size: var(--fs-base);
font-variant-numeric: tabular-nums;
}
.nwh-insight p { margin: 2px 0 0; color: var(--c-text-secondary); font-size: var(--fs-caption); }
.nwh-archive { padding: 0; overflow: hidden; }
.nwh-archive-head {
display: flex;
align-items: center;
gap: var(--s-8);
padding: var(--s-12) var(--s-16);
border-bottom: 1px solid var(--c-border);
}
.nwh-archive-head h2 { margin: 0; font-size: var(--fs-base); font-weight: 600; }
.nwh-count { color: var(--c-text-secondary); font-size: var(--fs-caption); }
.nwh-search { position: relative; margin-left: auto; width: min(320px, 45%); }
.nwh-search-icon {
position: absolute;
top: 50%;
left: 11px;
width: 15px;
height: 15px;
color: var(--c-text-secondary);
transform: translateY(-50%);
pointer-events: none;
}
.nwh-search .input {
width: 100%;
height: 34px;
padding-left: 32px;
font-size: var(--fs-caption);
}
.nwh-controls {
display: flex;
align-items: center;
gap: var(--s-12);
padding: var(--s-8) var(--s-16);
border-bottom: 1px solid var(--c-border);
background: var(--c-bg-alt);
}
.nwh-compare { display: flex; align-items: center; gap: var(--s-8); min-width: 0; }
.nwh-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
min-width: 0;
}
.nwh-chips-empty { color: var(--c-text-secondary); font-size: var(--fs-micro); }
.nwh-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 4px 0 10px;
border: 1px solid var(--c-primary-border);
border-radius: var(--r-pill);
background: var(--c-primary-soft);
color: var(--c-primary-text);
font-size: var(--fs-micro);
white-space: nowrap;
}
.nwh-chip button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: inherit;
cursor: pointer;
}
.nwh-chip button:hover { background: rgba(var(--petrol-700-rgb), .12); }
.nwh-compare .btn[disabled] {
border-color: var(--c-border);
background: var(--c-bg);
color: var(--c-text-secondary);
cursor: not-allowed;
opacity: 1;
}
.nwh-impact { margin-left: auto; }
.nwh-empty { padding: 40px var(--s-16); text-align: center; }
.nwh-empty p { margin: 0 0 var(--s-12); color: var(--c-text-secondary); font-size: var(--fs-caption); }
.nwh-table { font-variant-numeric: tabular-nums; }
.nwh-table th {
height: 34px;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}
.nwh-table td { height: 44px; }
.nwh-year-row td {
height: 30px;
padding-top: 0;
padding-bottom: 0;
background: var(--c-bg-alt);
color: var(--c-text-secondary);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .04em;
}
.nwh-month { color: inherit; font-weight: 600; text-decoration: none; }
.nwh-month:hover { color: var(--c-primary); text-decoration: underline; }
.nwh-impact-value { font-weight: 600; }
.nwh-impact-value.is-plus  { color: var(--c-success); }
.nwh-impact-value.is-minus { color: var(--c-danger); }
.nwh-meter {
display: inline-block;
width: 52px;
height: 3px;
margin-left: 7px;
border-radius: 3px;
background: var(--c-border);
vertical-align: middle;
overflow: hidden;
}
.nwh-meter i { display: block; height: 100%; }
.nwh-meter i.is-plus  { background: var(--impact-up); }
.nwh-meter i.is-minus { background: var(--impact-down); }
.nwh-status {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--fs-micro);
white-space: nowrap;
}
.nwh-status-icon { display: inline-flex; width: 14px; height: 14px; }
.nwh-status-icon svg { width: 100%; height: 100%; }
.nwh-status.is-ok    { color: var(--c-success); }
.nwh-status.is-over  { color: var(--c-danger); }
.nwh-status.is-empty { color: var(--c-text-secondary); }
.nwh-status.is-new   { color: var(--c-primary); }
.nwh-expand-cell { width: 44px; text-align: right; }
.nwh-expand {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--r-8);
color: var(--c-text-secondary);
transition: transform .18s ease, color .18s ease, background .18s ease;
}
.nwh-expand:hover { background: var(--c-bg-alt); color: var(--c-primary); }
.nwh-expand[aria-expanded="true"] { transform: rotate(180deg); color: var(--c-primary); }
.nwh-row.is-picked > td { background: var(--c-primary-soft); }
.nwh-row.is-picked > td:first-child { box-shadow: inset 3px 0 0 var(--c-primary); }
.nwh-row.is-open > td { background: var(--c-primary-wash); }
.nwh-detail-row[hidden] { display: none; }
.nwh-detail-row > td {
height: auto;
padding: 0;
background: var(--c-bg-alt);
}
.nwh-detail {
display: grid;
grid-template-columns: 1.1fr 1fr 1fr;
gap: var(--s-24);
padding: var(--s-16) var(--s-16) var(--s-16) var(--s-16);
}
.nwh-detail-section h3 { margin: 0 0 var(--s-8); font-size: var(--fs-micro); font-weight: 600; }
.nwh-detail-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px var(--s-12);
margin: 0;
color: var(--c-text-secondary);
font-size: var(--fs-micro);
}
.nwh-detail-grid dt { margin: 0; }
.nwh-detail-grid dd { margin: 0; text-align: right; }
.nwh-detail-grid b { color: var(--c-text); font-variant-numeric: tabular-nums; }
.nwh-detail-grid b.is-plus  { color: var(--c-success); }
.nwh-detail-grid b.is-minus { color: var(--c-danger); }
.nwh-category {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px var(--s-12);
margin-bottom: 7px;
font-size: var(--fs-micro);
}
.nwh-category-name { color: var(--c-text-secondary); }
.nwh-category-sum { font-variant-numeric: tabular-nums; }
.nwh-category-track {
grid-column: 1 / -1;
height: 4px;
border-radius: 3px;
background: var(--c-border);
overflow: hidden;
}
.nwh-category-track i {
display: block;
height: 100%;
background: var(--c-primary);
opacity: .55;
}
.nwh-category.is-rest .nwh-category-track i { opacity: .28; }
.nwh-note {
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
font-size: var(--fs-micro);
}
.nwh-note strong { display: block; margin-bottom: 3px; }
.nwh-note p { margin: 0; color: var(--c-text-secondary); }
.nwh-pagination {
display: flex;
align-items: center;
gap: var(--s-12);
padding: var(--s-12) var(--s-16);
border-top: 1px solid var(--c-border);
}
.nwh-page-info { color: var(--c-text-secondary); font-size: var(--fs-caption); }
.nwh-pagination .pagination { margin: 0 0 0 auto; }
.nwh-pagination .page-link.is-gap { border: 0; background: none; cursor: default; }
.modal.modal-nwh-compare { width: min(760px, calc(100vw - 32px)); max-width: none; }
.nwh-compare-grid {
display: grid;
grid-template-columns: repeat(var(--nwh-compare-cols, 2), minmax(0, 1fr));
gap: var(--s-16);
}
.nwh-compare-month {
min-width: 0;
padding-right: var(--s-16);
border-right: 1px solid var(--c-border);
}
.nwh-compare-month:last-child { border-right: 0; padding-right: 0; }
.nwh-compare-month h4 { margin: 0 0 var(--s-8); font-size: var(--fs-body); }
.nwh-compare-stat { margin-bottom: var(--s-8); }
.nwh-compare-stat span { display: block; color: var(--c-text-secondary); font-size: var(--fs-caption); }
.nwh-compare-stat b {
display: block;
font-size: var(--fs-base);
font-variant-numeric: tabular-nums;
}
.nwh-compare-stat b.is-plus  { color: var(--c-success); }
.nwh-compare-stat b.is-minus { color: var(--c-danger); }
@media (max-width: 1023px) {
.nwh-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nwh-metric:nth-child(3) { border-left: 0; }
.nwh-metric:nth-child(n + 3) { border-top: 1px solid var(--c-border); }
.nwh-history { grid-template-columns: 1fr; }
.nwh-chart-panel { --nwp-plot: 230px; }
.nwh-insights { border-left: 0; border-top: 1px solid var(--c-border); }
.nwh-insight-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-16); }
.nwh-insight { border-bottom: 0; }
}
@media (max-width: 768px) {
.nwh-summary { grid-template-columns: 1fr 1fr; }
.nwh-metric { min-height: 76px; padding: 11px; }
.nwh-metric-value { font-size: 20px; }
.nwh-metric.is-lead .nwh-metric-value { font-size: 22px; }
.nwh-chart-panel { --nwp-plot: 200px; }
.nwh-chart { --nwp-gut-l: 40px; --nwp-gut-r: 8px; padding: var(--nwp-pad-t) var(--nwp-gut-r) 24px var(--nwp-gut-l); }
.nwh-insight-list { grid-template-columns: 1fr; }
.nwh-insight { padding: var(--s-8) 0; border-bottom: 1px solid var(--c-border); }
.nwh-insight:last-child { border-bottom: 0; }
.nwh-archive-head { flex-wrap: wrap; }
.nwh-search { width: 100%; margin-left: 0; }
.nwh-controls { flex-wrap: wrap; }
.nwh-impact { margin-left: 0; width: 100%; }
.nwh-impact .select-inline { width: 100%; }
.nwh-year-row { margin: var(--s-16) 0 var(--s-8); padding: 0; border: 0; }
.nwh-year-row td { padding: 0; background: none; text-align: left; }
.nwh-year-row td::before { content: none; }
.nwh-detail-row[hidden] { display: none !important; }
.nwh-row.is-open { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nwh-detail-row {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.nwh-detail { grid-template-columns: 1fr; gap: var(--s-16); padding: var(--s-4) 0 0; }
.nwh-table tbody .nwh-detail-row > td {
display: block;
padding: 0;
background: none;
text-align: left;
}
.nwh-table tbody .nwh-detail-row > td::before { content: none; }
.nwh-expand-cell { width: auto; }
.nwh-meter { display: none; }
.nwh-table tbody tr.nwh-row {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--s-12);
}
.nwh-table tbody td { height: auto; }
.nwh-row > td:nth-child(1) { order: 1; grid-column: 1 / -1; }
.nwh-row > td:nth-child(5) { order: 2; grid-column: 1 / -1; }
.nwh-row > td:nth-child(6) { order: 3; grid-column: 1 / -1; }
.nwh-row > td:nth-child(2) { order: 4; }
.nwh-row > td:nth-child(3) { order: 5; }
.nwh-row > td:nth-child(4) { order: 6; }
.nwh-row > td:nth-child(7) { order: 7; }
.nwh-row > td:nth-child(8) { order: 8; grid-column: 1 / -1; }
.nwh-table tbody .nwh-row > td:nth-child(2),
.nwh-table tbody .nwh-row > td:nth-child(3),
.nwh-table tbody .nwh-row > td:nth-child(4),
.nwh-table tbody .nwh-row > td:nth-child(7) {
display: block;
padding: 6px 0 2px;
font-size: var(--fs-caption);
text-align: left;
}
.nwh-table tbody .nwh-row > td:nth-child(2)::before,
.nwh-table tbody .nwh-row > td:nth-child(3)::before,
.nwh-table tbody .nwh-row > td:nth-child(4)::before,
.nwh-table tbody .nwh-row > td:nth-child(7)::before {
display: block;
margin-bottom: 1px;
font-size: var(--fs-caption);
}
.nwh-row > td:nth-child(1) .nwh-month,
.nwh-row > td:nth-child(6),
.nwh-row .nwh-impact-value { font-size: var(--fs-lg); }
.nwh-pagination { flex-wrap: wrap; }
.nwh-pagination .pagination { margin-left: 0; }
.nwh-compare-grid { grid-template-columns: 1fr; }
.nwh-compare-month { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--c-border); padding-bottom: var(--s-12); }
.nwh-compare-month:last-child { border-bottom: 0; }
}
@media (pointer: coarse) {
.nwh-expand { width: 44px; height: 44px; }
.nwh-chip { height: 32px; }
.nwh-chip button { width: 26px; height: 26px; }
}
@media (max-width: 520px) {
.nwh-summary { grid-template-columns: 1fr; }
.nwh-metric:nth-child(n + 2) { border-left: 0; border-top: 1px solid var(--c-border); }
.nwh-compare { flex-wrap: wrap; width: 100%; }
.nwh-chips { width: 100%; }
}
.pfz {
border-top: 1px solid var(--c-border);
padding: var(--s-12) var(--s-12) var(--s-12);
}
.pfz-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--s-4) var(--s-8);
}
.pfz-title {
display: flex;
align-items: center;
gap: var(--s-8);
font-size: var(--fs-base);
font-weight: 600;
color: var(--c-text);
}
.pfz-title-icon { display: inline-flex; }
.pfz-title-icon svg { width: 18px; height: 18px; }
.pfz-count {
font-size: var(--fs-micro);
font-weight: 500;
color: var(--c-text-secondary);
background: var(--c-bg-alt);
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
padding: 2px 7px;
font-variant-numeric: tabular-nums;
}
.pfz-list {
max-height: 268px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--c-border-strong) transparent;
padding-right: 3px;
}
.pfz-list::-webkit-scrollbar { width: 6px; }
.pfz-list::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 6px; }
.pfz-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
align-items: center;
min-height: 50px;
border-radius: var(--r-8);
transition: background-color .18s ease;
}
.pfz-row:hover { background: var(--c-bg-alt); }
.pfz-row:hover .pfz-type { --pfz-icon-bg: var(--c-bg); }
.pfz-row.is-current { background: var(--c-primary-soft); }
.pfz-row.is-current .pfz-meta { color: var(--c-text-secondary-on-wash); }
.pfz-row.is-current:hover { background: #dceced; }
.pfz-switch-form { margin: 0; min-width: 0; }
.pfz-demo {
width: 30px;
height: 30px;
display: grid;
place-items: center;
color: var(--c-warning, #b7791f);
}
.pfz-demo svg { width: 16px; height: 16px; }
.pfz-switch {
width: 100%;
min-width: 0;
border: 0;
font: inherit;
background: transparent;
padding: 7px 4px 7px 8px;
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
gap: 9px;
align-items: center;
text-align: left;
cursor: pointer;
color: inherit;
}
.pfz-type {
--pfz-icon-bg: var(--c-bg);
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--c-text-secondary);
}
.pfz-type svg { width: 16px; height: 16px; }
.is-current .pfz-type { border-color: #bad6da; color: var(--c-primary); --pfz-icon-bg: var(--c-bg); }
.pfz-copy { min-width: 0; }
.pfz-name {
display: block;
font-size: var(--fs-base);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.is-current .pfz-name { font-weight: 600; color: var(--c-primary); }
.pfz-meta {
display: block;
margin-top: 2px;
font-size: var(--fs-micro);
color: var(--c-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pfz-cog {
width: 30px;
height: 30px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--c-text-secondary);
display: grid;
place-items: center;
text-decoration: none;
}
.pfz-cog:hover { background: var(--c-bg); color: var(--c-primary); }
.pfz-cog svg { width: 16px; height: 16px; }
.pfz-perm {
justify-self: center;
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--c-text-muted);
}
.pfz-actions {
display: grid;
grid-template-columns: 1fr 36px;
gap: 7px;
margin-top: var(--s-8);
padding-top: var(--s-8);
border-top: 1px solid var(--c-border);
}
.pfz-manage {
display: grid;
place-items: center;
height: 38px;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: var(--c-primary);
font-size: var(--fs-body);
font-weight: 600;
text-decoration: none;
}
.pfz-manage:hover { border-color: #9fcbd2; background: #f8fcfc; color: var(--c-primary-hover); }
.pfz-add {
display: grid;
place-items: center;
height: 38px;
border: 0;
border-radius: var(--r-8);
background: var(--c-primary);
color: var(--c-on-accent);
text-decoration: none;
}
.pfz-add:hover { background: var(--c-primary-hover); color: var(--c-on-accent); }
.pfz-add svg { width: 17px; height: 17px; }
@media (max-height: 720px) {
.pfz-list { max-height: 210px; }
.pfz-row { min-height: 46px; }
.pfz { padding-top: var(--s-8); }
}
@media (pointer: coarse) {
.pfz-cog,
.pfz-demo { width: 44px; height: 44px; }
.pfz-row { grid-template-columns: minmax(0, 1fr) 48px; }
}
.modal-access { max-width: 560px; }
.pfz-msg {
margin: 0 0 var(--s-16);
padding: 9px 12px;
border-radius: var(--r-8);
background: var(--c-success-soft);
color: var(--c-text);
font-size: var(--fs-body);
line-height: 1.4;
}
.pfz-msg.is-error { background: var(--c-danger-soft); color: var(--c-danger-on-soft); }
.pfz-link-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 6px;
align-items: center;
}
.pfz-link-row .btn { white-space: nowrap; }
.pfz-link-row input[readonly] {
background: var(--c-bg-alt);
color: var(--c-text-secondary);
}
.pfz-link-row .input-reveal { min-width: 0; }
.pfz-shared-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-8);
}
.pfz-member-count {
font-size: var(--fs-caption);
font-weight: 500;
color: var(--c-text-muted);
}
.pfz-members { display: grid; gap: 6px; }
.pfz-members:empty { display: none; }
.pfz-member {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto 34px;
gap: var(--s-8);
align-items: center;
padding: 7px 9px;
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
}
.pfz-avatar {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--c-primary-soft);
color: var(--c-primary-text);
font-size: var(--fs-caption);
font-weight: 600;
}
.pfz-member-copy { display: grid; min-width: 0; }
.pfz-member-copy strong { font-size: var(--fs-body); font-weight: 600; }
.pfz-member-copy span {
overflow: hidden;
font-size: var(--fs-micro);
color: var(--c-text-muted);
text-overflow: ellipsis;
white-space: nowrap;
}
.pfz-member-perm {
width: auto;
height: 32px;
padding: 0 26px 0 9px;
font-size: var(--fs-caption);
}
.pfz-member-remove {
display: grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: var(--r-8);
background: none;
color: var(--c-text-muted);
cursor: pointer;
}
.pfz-member-remove:hover { background: var(--c-danger-soft); color: var(--c-danger-on-soft); }
.pfz-member-remove svg { width: 16px; height: 16px; }
.pfz-member-remove:disabled { opacity: .5; cursor: default; }
.pfz-invite {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 6px;
margin-top: var(--s-8);
}
.pfz-invite .select { width: auto; }
.pfz-confirm {
margin-top: var(--s-16);
padding: var(--s-16);
border: 1px solid var(--c-warning);
border-radius: var(--r-12);
background: var(--c-warning-soft);
}
.pfz-warning {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
font-size: var(--fs-body);
line-height: 1.45;
color: var(--c-text);
}
.pfz-warning-icon { color: var(--c-warning); }
.pfz-warning-icon svg { width: 20px; height: 20px; }
.pfz-confirm-actions {
display: flex;
justify-content: flex-end;
gap: var(--s-8);
margin-top: var(--s-12);
}
@media (max-width: 520px) {
.pfz-link-row,
.pfz-invite { grid-template-columns: 1fr; }
.pfz-invite .select,
.pfz-link-row .btn { width: 100%; }
.pfz-member {
grid-template-columns: 34px minmax(0, 1fr) 34px;
row-gap: 6px;
}
.pfz-avatar        { grid-area: 1 / 1; }
.pfz-member-copy   { grid-area: 1 / 2; }
.pfz-member-remove { grid-area: 1 / 3; }
.pfz-member-perm   { grid-area: 2 / 2 / 3 / 4; width: 100%; }
}
.access-card { margin-bottom: var(--s-24); }
.access-row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--s-12);
}
.access-row .field { flex: 1 1 220px; margin: 0; }
.access-row:not(:has(.field)) { flex-wrap: nowrap; }
.access-row:not(:has(.field)) .select { flex: 0 1 auto; min-width: 0; }
.tfa-col { width: 1%; white-space: nowrap; }
.tfa-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--c-success);
border: 2px solid var(--c-success);
}
.tfa-dot.is-off { background: var(--c-danger); border-color: var(--c-danger); }
@media (max-width: 768px) {
.tfa-dot { vertical-align: middle; }
.tfa-col { width: auto; }
}
.account-actions { display: none; }
@media (min-width: 769px) {
.account-actions {
display: inline-flex;
align-items: center;
gap: var(--s-4);
margin-left: calc(var(--s-8) - var(--s-12));
}
.account-action {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--r-10);
background: transparent;
color: var(--c-text-muted);
cursor: pointer;
transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}
.account-action-icon { display: inline-flex; }
.account-action:hover {
border-color: var(--c-border-strong);
background: var(--c-bg-alt);
color: var(--petrol-900);
}
.account-action:focus-visible {
border-color: var(--c-border-strong);
color: var(--petrol-900);
}
.account-action.is-current {
background: var(--petrol-050);
color: var(--c-primary);
}
.account-action-form { display: inline-flex; margin-left: var(--s-8); }
.account-action-form::before {
content: "";
align-self: center;
width: 1px;
height: 22px;
margin-right: var(--s-8);
background: var(--c-border);
}
.account-action-out { color: var(--c-danger); }
.account-action-out:hover,
.account-action-out:focus-visible {
border-color: var(--c-danger-soft);
background: var(--c-danger-soft);
color: var(--c-danger-on-soft);
}
.account-action-count {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border: 2px solid var(--c-bg);
border-radius: var(--r-pill);
background: var(--c-danger);
color: var(--c-on-accent);
font-size: var(--fs-micro);
line-height: 12px;
font-variant-numeric: tabular-nums;
}
.account-action::after {
content: attr(data-hint);
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
padding: 5px var(--s-8);
border-radius: var(--r-8);
background: var(--c-dark);
color: var(--c-on-accent);
font-size: var(--fs-micro);
line-height: 1.2;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform: translateY(-3px);
transition: opacity .12s ease, transform .12s ease;
}
.account-action:hover::after,
.account-action:focus-visible::after { opacity: 1; transform: none; }
.sidebar-account,
.sidebar-sep-account { display: none; }
}
@media (min-width: 769px) and (max-width: 1023px) {
.account-action::after { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
}
@media (pointer: coarse) {
.account-action { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.account-action,
.account-action::after { transition: none; }
}
@media (max-width: 768px) {
.topbar:not(.topbar-guest) { row-gap: 0; }
.topbar-logo { order: 0; flex: 0 1 auto; margin-right: auto; }
.topbar .nav-toggle { order: 1; flex: none; margin-left: 0; }
.topbar:not(.topbar-guest)::after {
content: "";
order: 4;
width: 100%;
height: 0;
}
.topbar:not(.topbar-guest) .topbar-portfolio {
order: 5;
flex: 1 1 0;
min-width: 0;
margin-top: var(--s-8);
}
.topbar:not(.topbar-guest) > .btn:not(.nav-toggle),
.topbar:not(.topbar-guest) .month-pick {
order: 6;
flex: none;
margin-top: var(--s-8);
}
.topbar:not(.topbar-guest) .topbar-portfolio .dropdown-toggle {
display: flex;
align-items: center;
gap: var(--s-8);
width: 100%;
max-width: none;
}
.topbar-portfolio-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar-portfolio-type { display: inline-flex; flex: none; color: var(--c-text-muted); }
.topbar-portfolio-type svg { width: 16px; height: 16px; }
.topbar-portfolio .badge { flex: none; margin-left: auto; }
}
.topbar-portfolio-menu {
width: min(320px, calc(100vw - var(--s-24)));
padding: 0;
overflow: hidden;
}
.pfz-menu { border-top: 0; padding: var(--s-8); }
.pfz-menu .pfz-head { padding-bottom: var(--s-8); }
.pfz-menu .pfz-list { max-height: min(46vh, 320px); }
#feedback-modal .modal-head { padding-bottom: var(--s-4); }
#feedback-modal .modal-body {
padding-top: var(--s-8);
padding-bottom: var(--s-12);
}
#feedback-modal .field { margin-bottom: var(--s-12); }
#feedback-modal .field:last-child { margin-bottom: 0; }
#feedback-modal .textarea { min-height: 76px; }
#feedback-modal .modal-foot { padding: var(--s-12) var(--s-24); }
@media (max-width: 768px) {
.shell:has(.topbar-portfolio:not([hidden])) .sidebar .pfz,
.shell:has(.topbar-portfolio:not([hidden])) .sidebar .sidebar-sep-portfolio { display: none; }
}
@media (max-height: 620px) {
#feedback-modal .feedback-head p { display: none; }
#feedback-modal .field { margin-bottom: var(--s-8); }
#feedback-modal .field .hint { display: none; }
#feedback-modal .textarea { min-height: 56px; }
#feedback-modal .modal-head { padding-top: var(--s-16); }
#feedback-modal .modal-body { padding-bottom: var(--s-8); }
#feedback-modal .modal-foot { padding: var(--s-8) var(--s-24); }
}
.month-pick-item {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-8);
margin-bottom: 2px;
border: 1px solid transparent;
}
.month-pick-item:last-child { margin-bottom: 0; }
.month-pick-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mpick-mark {
width: 26px;
height: 16px;
display: grid;
place-items: center;
border-radius: 4px;
font-size: var(--fs-micro);
font-weight: 800;
letter-spacing: .02em;
line-height: 1;
}
.mpick-mark svg { display: block; width: 11px; height: 11px; }
.mpick-mark-ok    { background: none; color: #178653; }
.month-pick-item.is-current .mpick-mark-ok { color: var(--c-success-soft); }
.mpick-mark-empty { background: var(--c-bg-alt); color: var(--c-text-secondary); }
.mpick-mark-over  { background: #fff0f4; color: #e32646; }
.mpick-mark-new   { background: none; color: #24476a; font-size: var(--fs-micro); letter-spacing: .045em; }
.mpick-mark-none { background: none; }
.month-pick-item.is-none {
border-color: #b4c1c9;
border-style: dashed;
background: none;
color: #677988;
}
.month-pick-item.is-none:hover,
.month-pick-item.is-none:focus-visible {
border-color: #6f9fac;
background: #e8f2f3;
color: #526b7d;
}
.mpick-add {
display: flex;
align-items: center;
gap: var(--s-4);
opacity: 0;
pointer-events: none;
white-space: nowrap;
transition: opacity .15s ease;
}
.mpick-add-mark {
width: 16px;
height: 16px;
display: grid;
place-items: center;
border: 1px solid var(--c-primary);
border-radius: 50%;
background: var(--c-bg);
color: var(--c-primary);
font-size: var(--fs-caption);
font-style: normal;
font-weight: 700;
}
.mpick-add-text {
padding: 2px var(--s-8);
border: 1px solid var(--c-primary);
border-radius: 6px;
background: var(--c-bg);
color: var(--c-primary);
font-size: var(--fs-caption);
font-weight: 600;
}
.month-pick-item.is-none:hover .mpick-add,
.month-pick-item.is-none:focus-visible .mpick-add { opacity: 1; }
@media (max-width: 760px) {
.mpick-add { display: none; }
}
.month-pick-item.is-none.is-current { border-color: var(--c-primary); color: var(--c-primary); }
.month-pick-item.is-current:not(.is-new):not(.is-none) {
background: var(--c-primary);
border-color: var(--c-primary-hover);
color: var(--c-bg);
}
.month-pick-item.is-new {
border-color: #829ce1;
background: #edf1ff;
color: #24476a;
animation: mpick-new-blink .98s ease-in-out infinite;
}
.month-pick-item.is-new:hover,
.month-pick-item.is-new:focus-visible { animation-play-state: paused; }
@keyframes mpick-new-blink {
0%, 100% { background-color: #edf1ff; border-color: #829ce1; }
50%      { background-color: #c4d2f9; border-color: #6582d3; }
}
@media (prefers-reduced-motion: reduce) {
.month-pick-item.is-new { animation-duration: 2.1s; }
}
.ctxbar {
--ctx-ink:    #76551b;
--ctx-strong: #9a6700;
--ctx-bg:     #fff4d6;
--ctx-line:   #ead8a5;
--ctx-raise:  #fffaf0;
display: flex;
align-items: center;
gap: var(--s-12);
min-height: 38px;
padding: 0 var(--s-24);
background: var(--ctx-bg);
border-bottom: 1px solid var(--ctx-line);
color: var(--ctx-ink);
font-size: var(--fs-caption);
overflow: hidden;
transition: min-height .19s cubic-bezier(.2, .8, .2, 1);
}
.ctxbar-icon { flex: none; display: grid; place-items: center; color: var(--ctx-strong); }
.ctxbar-icon svg { display: block; }
.ctxbar-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ctxbar-text strong { font-weight: 600; }
.ctxbar-badge {
flex: none;
padding: 3px var(--s-8);
border: 1px solid #e3cf94;
border-radius: var(--r-pill);
background: var(--ctx-raise);
color: var(--ctx-ink);
font-size: var(--fs-micro);
font-weight: 600;
white-space: nowrap;
}
.ctxbar-action {
flex: none;
padding: 3px var(--s-8);
border-radius: var(--r-6);
color: var(--ctx-ink);
font-size: var(--fs-micro);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.ctxbar-action:hover { background: var(--ctx-raise); color: var(--ctx-strong); }
.ctxbar-toggle {
flex: none;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 0;
border-radius: var(--r-6);
background: transparent;
color: var(--ctx-ink);
cursor: pointer;
}
.ctxbar-toggle:hover { background: var(--ctx-raise); }
.ctxbar-toggle svg { display: block; width: 15px; height: 15px; }
.ctxbar.is-collapsed {
min-height: 25px;
font-size: var(--fs-micro);
}
.ctxbar.is-collapsed .ctxbar-text,
.ctxbar.is-collapsed .ctxbar-badge,
.ctxbar.is-collapsed .ctxbar-action { display: none; }
.ctxbar.is-collapsed::after {
content: attr(data-short);
flex: 1 1 auto;
font-weight: 600;
}
.ctxbar.is-collapsed .ctxbar-toggle { height: 23px; }
.ctxbar.is-collapsed .ctxbar-toggle svg { transform: rotate(180deg); }
@media (max-width: 768px) {
.ctxbar {
flex-wrap: wrap;
row-gap: 2px;
padding: var(--s-8) var(--s-16);
}
.ctxbar-text {
order: 1;
flex: 1 1 100%;
white-space: normal;
overflow: visible;
}
.ctxbar-icon   { order: 0; }
.ctxbar-toggle { order: 0; margin-left: auto; }
.ctxbar-badge  { order: 2; }
.ctxbar-action { order: 3; }
.ctxbar.is-collapsed { flex-wrap: nowrap; padding: 0 var(--s-16); }
}
@media (prefers-reduced-motion: reduce) {
.ctxbar { transition: none; }
}
.modal-access-details { max-width: 480px; }
.adet-owner {
display: flex;
align-items: center;
gap: var(--s-12);
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg-alt);
}
.adet-avatar {
flex: none;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--c-primary-soft);
color: var(--c-primary);
font-weight: 600;
}
.adet-owner-copy { display: grid; min-width: 0; }
.adet-owner-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adet-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-12);
margin: var(--s-16) 0 0;
}
.adet-fact {
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
}
.adet-fact dt { color: var(--c-text-secondary); font-size: var(--fs-micro); }
.adet-fact dd { margin: 2px 0 0; font-weight: 600; }
.adet-note {
margin: var(--s-16) 0 0;
color: var(--c-text-secondary);
font-size: var(--fs-body);
}
@media (max-width: 560px) {
.adet-facts { grid-template-columns: minmax(0, 1fr); }
}
.pf-table th:last-child,
.pf-table td:last-child { text-align: right; }
.pf-name { font-weight: 600; }
.pf-sub {
display: block;
margin-top: 1px;
color: var(--c-text-secondary);
font-size: var(--fs-micro);
}
.pf-access-cell {
padding: 4px 6px;
display: flex;
align-items: center;
gap: var(--s-8);
}
.pf-demo-mark {
display: inline-flex;
align-items: center;
flex: none;
color: var(--c-warning, #b7791f);
}
.pf-access {
--pfz-icon-bg: var(--c-bg);
display: flex;
align-items: center;
gap: var(--s-8);
width: 100%;
padding: 6px 7px;
border-radius: 9px;
color: var(--c-text);
text-align: left;
transition: background .15s ease;
}
.pf-access:hover { background: var(--c-primary-soft); color: var(--c-text); }
.pf-access:hover { --pfz-icon-bg: var(--c-primary-soft); }
.pf-access:focus-visible { outline: 3px solid var(--c-primary-ring); outline-offset: -1px; }
.pf-access-icon { flex: none; display: grid; place-items: center; color: var(--c-primary); }
.pf-access-icon svg { display: block; }
.pf-access-copy { min-width: 0; display: grid; }
.pf-access-copy strong {
font-size: var(--fs-body);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pf-access-copy span { color: var(--c-text-secondary); font-size: var(--fs-micro); }
.pf-access-chevron {
flex: none;
margin-left: auto;
color: var(--c-text-muted);
transition: transform .18s ease, color .18s ease;
}
.pf-access:hover .pf-access-chevron { color: var(--c-primary); transform: translateX(2px); }
.pf-access.is-fixed { cursor: default; }
.pf-access.is-fixed:hover { background: none; }
.pf-access.is-fixed .pf-access-icon { color: var(--c-text-muted); }
.pf-row-external .pf-access-icon { color: var(--c-text-secondary); }
@media (max-width: 768px) {
.pf-access-cell { padding: 0; }
.pf-access { padding: 8px 0; }
.pf-table td:last-child { text-align: left; }
}
.notif-zone { position: relative; display: inline-flex; }
.notif-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-10);
color: var(--c-text-muted);
text-decoration: none;
}
.notif-bell[aria-expanded="true"] {
background: var(--petrol-050);
color: var(--c-primary);
}
.notif-count[hidden] { display: none; }
.notif-pop {
position: absolute;
z-index: 60;
top: calc(100% + var(--s-8));
right: 0;
width: 390px;
max-height: calc(100vh - 76px);
max-height: calc(100dvh - 76px);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
border: 1px solid var(--c-border);
border-radius: var(--r-14, 14px);
background: var(--c-bg);
box-shadow: 0 18px 44px rgba(19, 45, 70, .19);
}
.notif-pop[hidden] { display: none; }
.notif-pop-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--s-12);
padding: var(--s-12) var(--s-16);
border-bottom: 1px solid var(--c-border);
}
.notif-pop-title strong { display: block; font-size: var(--fs-lg); }
.notif-pop-sub {
display: block;
margin-top: 3px;
color: var(--c-text-muted);
font-size: var(--fs-micro);
}
.notif-pop-list {
min-height: 0;
max-height: 420px;
overflow-y: auto;
overscroll-behavior: contain;
}
.notif-pop-foot {
display: grid;
place-items: center;
height: 46px;
border-top: 1px solid var(--c-border);
color: var(--c-primary);
font-size: var(--fs-caption);
font-weight: 600;
text-decoration: none;
}
.notif-pop-foot:hover,
.notif-pop-foot:focus-visible { background: var(--c-bg-alt); }
.notif-item {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: var(--s-12);
align-items: start;
width: 100%;
min-height: 56px;
padding: 13px var(--s-16);
border: 0;
border-bottom: 1px solid var(--c-border);
background: var(--petrol-050);
color: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--c-bg-alt); }
.notif-item.is-read { background: var(--c-bg); }
.notif-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: var(--r-10);
background: var(--c-bg);
color: var(--c-primary);
}
.notif-item.is-read .notif-icon {
background: var(--c-bg-alt);
color: var(--c-text-muted);
}
.notif-item-title { display: block; font-size: var(--fs-body); font-weight: 600; }
.notif-item-body {
margin: 4px 0 0;
color: var(--c-text-muted);
font-size: var(--fs-micro);
line-height: 1.45;
}
.notif-item-time {
color: var(--c-text-muted);
font-size: var(--fs-caption);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.notif-dot {
align-self: center;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-primary);
box-shadow: 0 0 0 3px var(--petrol-050);
}
.notif-item.is-read .notif-dot { display: none; }
.notif-skeleton { display: grid; gap: var(--s-8); padding: var(--s-16); }
.notif-skeleton-row {
height: 44px;
border-radius: var(--r-10);
background: linear-gradient(90deg, var(--c-bg-alt) 25%, var(--c-border) 37%, var(--c-bg-alt) 63%);
background-size: 400% 100%;
animation: notif-shimmer 1.4s ease infinite;
}
@keyframes notif-shimmer {
from { background-position: 100% 0; }
to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.notif-skeleton-row { animation: none; background: var(--c-bg-alt); }
}
.notif-blank {
display: grid;
justify-items: center;
gap: var(--s-4);
padding: 44px var(--s-16);
text-align: center;
}
.notif-blank svg { width: 28px; height: 28px; color: var(--c-text-muted); }
.notif-blank strong { font-size: var(--fs-body); }
.notif-blank p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-micro); }
@media (max-width: 768px) {
.topbar .account-actions {
display: inline-flex;
align-items: center;
order: 0;
margin-left: 0;
}
.topbar .account-actions > :not(.notif-zone) { display: none; }
.notif-bell { width: 44px; height: 44px; }
.notif-count {
position: absolute;
top: 4px;
right: 4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border: 2px solid var(--c-bg);
border-radius: var(--r-pill);
background: var(--c-danger);
color: var(--c-on-accent);
font-size: var(--fs-micro);
line-height: 12px;
font-variant-numeric: tabular-nums;
}
.notif-pop {
position: fixed;
top: calc(var(--topbar-h) - 8px);
right: 10px;
width: min(348px, 100vw - 20px);
max-height: calc(100dvh - 66px);
}
.notif-pop-list { max-height: none; }
}
.notif-item-wide {
grid-template-columns: 40px minmax(0, 1fr) 148px 8px;
align-items: center;
padding: 15px var(--s-16);
}
.notif-item-wide .notif-icon { width: 38px; height: 38px; }
.notif-meta { text-align: right; }
.notif-meta .notif-item-time { display: block; font-size: var(--fs-micro); }
.notif-category {
display: block;
margin-top: 4px;
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.notif-group {
display: flex;
align-items: center;
height: 36px;
margin: 0;
padding: 0 var(--s-16);
border-top: 1px solid var(--c-border);
background: var(--c-bg-alt);
color: var(--c-text-muted);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.notif-group:first-child { border-top: 0; }
.notif-group + .notif-item { border-top: 0; }
.notif-history { padding: 0; overflow: hidden; }
.notif-head-action { margin-left: auto; }
.notif-filters { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-12); }
.notif-filter {
display: inline-flex;
align-items: center;
gap: var(--s-4);
height: 36px;
padding: 0 13px;
border-radius: var(--r-10);
color: var(--c-text-secondary);
font-size: var(--fs-body);
text-decoration: none;
}
.notif-filter:hover { background: var(--c-bg-alt); }
.notif-filter.is-current {
background: var(--petrol-050);
color: var(--c-primary);
font-weight: 600;
}
.notif-filter-count {
border-radius: var(--r-pill);
padding: 1px 6px;
background: var(--c-primary);
color: var(--c-on-accent);
font-size: var(--fs-micro);
font-variant-numeric: tabular-nums;
}
.notif-more { margin: var(--s-16) 0 0; text-align: center; }
@media (max-width: 640px) {
.notif-item-wide {
grid-template-columns: 34px minmax(0, 1fr) 8px;
align-items: start;
padding: 14px var(--s-12);
}
.notif-item-wide .notif-icon { width: 34px; height: 34px; }
.notif-meta {
grid-column: 2;
display: flex;
gap: var(--s-8);
margin-top: 4px;
text-align: left;
}
.notif-meta .notif-item-time,
.notif-category { display: inline; margin: 0; font-size: var(--fs-caption); }
.notif-item-wide .notif-dot { grid-column: 3; grid-row: 1 / 3; align-self: start; margin-top: 6px; }
.notif-group { padding: 0 var(--s-12); }
}
.month-pick-label-short { display: none; }
@media (max-width: 360px) {
.month-pick-label { display: none; }
.month-pick-label-short { display: inline; }
.topbar-portfolio .badge { display: none; }
}
.sidebar svg { width: 18px; height: 18px; stroke-width: 1.8; }
.sidebar .logo-mark svg {
width: var(--logo-mark-size, 30px);
height: var(--logo-mark-size, 30px);
stroke-width: 22;
}
@media (max-width: 760px) {
:root { --fs-micro: var(--fs-caption); }
}
@media (max-width: 760px) and (pointer: coarse) {
.btn,
.select,
.select-inline,
.dropdown-toggle,
.row-delete,
.star,
.btn-icon,
.amt-switch-btn {
min-height: 44px;
}
.row-delete,
.star,
.btn-icon,
.hdr-back,
.amt-switch-btn {
min-width: 44px;
}
.month-nav .select-inline,
.card-head .select-inline,
.nwh-year .select-inline,
.nwh-impact .select-inline {
min-height: 44px;
height: auto;
}
.switch { position: relative; }
.switch::after {
content: '';
position: absolute;
inset: -11px -2px;
}
.switch-field { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 768px) {
.budgets-table tbody tr {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-areas:
"mon mon mon act act"
"sta sta cre cre ..."
"inc inc spe spe rem";
align-items: start;
gap: var(--s-4) var(--s-8);
padding: var(--s-12);
}
.budgets-table tbody td[data-label="Month"]     { grid-area: mon; }
.budgets-table tbody td.actions-cell            { grid-area: act; }
.budgets-table tbody td[data-label="Status"]    { grid-area: sta; }
.budgets-table tbody td.created-cell            { grid-area: cre; }
.budgets-table tbody td[data-label="Income"]    { grid-area: inc; }
.budgets-table tbody td[data-label="Spending"]  { grid-area: spe; }
.budgets-table tbody td[data-label="Remaining"] { grid-area: rem; }
.budgets-table tbody td[data-label="Month"]::before,
.budgets-table tbody td[data-label="Status"]::before,
.budgets-table tbody td.actions-cell::before { content: none; }
.budgets-table tbody td[data-label="Month"] {
justify-content: flex-start;
padding-top: 0;
font-size: var(--fs-title);
}
.budgets-table tbody td[data-label="Status"] { justify-content: flex-start; }
.budgets-table tbody tr { position: relative; }
.budgets-table tbody td { border-bottom: 0; }
.budgets-table tbody td.actions-cell {
position: absolute;
top: var(--s-4);
right: var(--s-8);
width: auto;
padding: 0;
justify-content: flex-end;
background: none;
}
.budgets-table tbody td[data-label="Income"],
.budgets-table tbody td[data-label="Spending"],
.budgets-table tbody td[data-label="Remaining"] {
flex-direction: column;
align-items: flex-start;
gap: 0;
text-align: left;
}
.budgets-table tbody td[data-label="Income"]::before,
.budgets-table tbody td[data-label="Spending"]::before,
.budgets-table tbody td[data-label="Remaining"]::before {
order: 2;
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-micro);
}
.budgets-table .cell-total { order: 1; text-align: left; font-size: var(--fs-lg); }
.budgets-table .cell-parts { order: 3; flex: none; margin-top: 0; text-align: left; }
.budgets-table tbody td.created-cell {
justify-content: flex-end;
gap: var(--s-4);
font-size: var(--fs-micro);
color: var(--c-text-secondary);
}
.budgets-table tbody td.created-cell::before {
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-micro);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-property:
opacity, color, background-color, border-color,
box-shadow, outline-color, fill, stroke !important;
animation-iteration-count: 1 !important;
}
html { scroll-behavior: auto; }
}
.rel-year { margin-bottom: var(--s-24); }
.rel-year-head {
display: flex; align-items: baseline; gap: var(--s-12);
padding: var(--s-8) 0; cursor: pointer; list-style: none;
}
.rel-year-head::-webkit-details-marker { display: none; }
.rel-year-head::before {
content: '▸'; color: var(--c-text-muted); font-size: var(--fs-body);
transition: transform .15s ease;
}
.rel-year[open] > .rel-year-head::before { transform: rotate(90deg); }
.rel-year-title { font-size: 17px; font-weight: 600; }
.rel-list { padding: 0; }
.rel-row { padding: var(--s-16) var(--s-24); border-bottom: 1px solid var(--c-border); }
.rel-row:last-child { border-bottom: 0; }
.rel-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); }
.rel-row-meta { margin-top: var(--s-4); }
.rel-tag {
font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: var(--fs-body); font-weight: 600; color: var(--c-text);
text-decoration: none; padding: 2px 8px; border-radius: 6px;
background: var(--c-bg-alt); border: 1px solid var(--c-border);
}
.rel-tag:hover { border-color: var(--c-primary); color: var(--c-primary); }
.rel-tag-lg { font-size: var(--fs-base); vertical-align: middle; margin-right: var(--s-8); }
.rel-title { font-weight: 500; color: var(--c-text); text-decoration: none; }
.rel-title:hover { color: var(--c-primary); }
.rel-date { white-space: nowrap; }
.rel-head-badges { margin-top: var(--s-8); }
.rel-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-12); }
.rel-counters { display: flex; gap: var(--s-16); margin: 0; }
.rel-counters > div { text-align: center; min-width: 64px; }
.rel-counters dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); }
.rel-counters dd { margin: 0; font-size: 22px; font-weight: 600; }
.rel-changes { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.rel-modules { border-right: 1px solid var(--c-border); background: var(--c-bg-alt); padding: var(--s-16); }
.rel-modules-list { display: flex; flex-direction: column; gap: var(--s-4); }
.rel-modules-select { display: none; }
.rel-module {
display: flex; justify-content: space-between; align-items: center;
min-height: 36px; padding: 6px 10px; border-radius: 8px;
color: var(--c-text-secondary); text-decoration: none;
}
.rel-module b { font-weight: 500; color: var(--c-text-muted); }
.rel-module:hover { background: var(--c-bg); color: var(--c-text); }
.rel-module.is-active { background: var(--c-primary-soft); color: var(--c-primary); }
.rel-module.is-active b { color: var(--c-primary); }
.rel-cards { padding: var(--s-16) var(--s-24); display: flex; flex-direction: column; gap: var(--s-16); }
.rel-card { padding: var(--s-16); border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-bg); }
.rel-card-title { margin: var(--s-8) 0; font-size: 17px; }
.rel-card-facts { margin: 0; display: flex; flex-direction: column; gap: var(--s-8); }
.rel-card-facts > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-12); align-items: baseline; }
.rel-card-facts dt { color: var(--c-text-muted); font-size: var(--fs-body); }
.rel-card-facts dd { margin: 0; min-width: 0; }
.rel-areas { margin: var(--s-8) 0 0; line-height: 1.7; }
.rel-area { color: var(--c-text); text-decoration: none; border-bottom: 1px dashed var(--c-border); }
.rel-area:hover { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.rel-area.is-active { color: var(--c-primary); font-weight: 500; }
.rel-area-n { color: var(--c-text-muted); font-size: var(--fs-micro); }
.rel-card-area { margin: 0 0 var(--s-8); }
.rel-card-area b { color: var(--c-text); font-weight: 500; }
.rel-known { padding: var(--s-16); border-left: 3px solid var(--c-warning); background: var(--c-warning-soft); border-radius: 8px; }
.rel-known h3 { margin: 0 0 var(--s-4); font-size: var(--fs-base); }
.rel-tech { padding: var(--s-16) var(--s-24); }
.rel-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-16); margin-bottom: var(--s-24); }
.rel-tech-block h3 { margin: 0 0 var(--s-8); font-size: var(--fs-base); }
.rel-tech-block .table td:first-child { color: var(--c-text-secondary); }
.rel-plain-list { margin: 0 0 var(--s-12); padding-left: var(--s-16); }
.rel-plain-list li { margin: 2px 0; }
.rel-context {
margin: 0; padding: var(--s-12); max-height: 480px; overflow: auto;
font-size: var(--fs-body); line-height: 1.45; white-space: pre-wrap;
background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 8px;
}
@media (max-width: 768px) {
.rel-row { padding: var(--s-12) var(--s-16); }
.rel-head-side { align-items: flex-start; }
.rel-changes { grid-template-columns: minmax(0, 1fr); }
.rel-modules { border-right: 0; border-bottom: 1px solid var(--c-border); }
.rel-modules-list { display: none; }
.rel-modules-select { display: block; }
.rel-cards { padding: var(--s-12) var(--s-16); }
.rel-card-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.rel-card-facts { gap: var(--s-12); }
.rel-tech { padding: var(--s-12) var(--s-16); }
}
.app-nav .nav-group { display: inline-flex; }
.nav-group-toggle {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-height: 36px;
padding: 0 var(--s-12);
border: 0;
border-radius: var(--r-6);
background: none;
color: var(--c-text-secondary);
font: inherit;
font-size: var(--fs-base);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.nav-group-toggle::after {
content: '';
width: 5px; height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
}
.nav-group-toggle:hover { background: var(--c-bg-alt); color: var(--c-text); }
.nav-group-toggle.is-active { color: var(--c-primary); background: var(--c-primary-soft); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.nav-group-menu { left: 0; right: auto; min-width: 200px; }
.nav-group-menu .dropdown-item.is-active { color: var(--c-primary); font-weight: 500; }
@media (max-width: 768px) {
.app-nav.is-open .nav-group { display: block; }
.app-nav.is-open .nav-group-toggle { display: none; }
.app-nav.is-open .nav-group-menu,
.app-nav.is-open .nav-group-menu[hidden] {
display: block !important;
position: static;
width: auto;
min-width: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
.app-nav.is-open .nav-group-menu .dropdown-item {
width: auto;
min-height: 44px;
border-radius: var(--r-8);
}
}
.rel-shot-links {
display: inline-flex;
flex-wrap: wrap;
gap: var(--s-8);
margin-left: var(--s-8);
vertical-align: baseline;
}
.rel-shot-link {
display: inline-flex;
align-items: center;
gap: var(--s-4);
padding: 1px var(--s-8);
border: 1px solid var(--c-border);
border-radius: var(--r-6);
font-size: var(--fs-caption);
color: var(--c-primary);
text-decoration: none;
white-space: nowrap;
}
.rel-shot-link::before { content: '⛶'; opacity: .7; }
.rel-shot-link:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.rel-shot-link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.rel-shot-body { padding: 0; }
.rel-shot-body img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
border-radius: 0 0 var(--r-8) var(--r-8);
}
.rel-card-num {
display: inline-block;
margin-right: var(--s-8);
padding: 0 var(--s-4);
border-radius: var(--r-6);
background: var(--c-bg-alt);
color: var(--c-text-secondary);
font-size: var(--fs-caption);
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.profile-cell { display: inline-flex; align-items: center; gap: var(--s-4); }
.btn-icon-sm {
min-width: 24px;
min-height: 24px;
padding: 0;
font-size: var(--fs-caption);
line-height: 1;
}
.profile-edit {
opacity: 0;
color: var(--c-text-secondary);
transition: opacity .15s ease, color .15s ease;
}
tr:hover .profile-edit,
.profile-edit:focus-visible { opacity: 1; }
.profile-edit:hover { color: var(--c-primary); }
@media (hover: none), (pointer: coarse) {
.profile-edit { opacity: 1; }
}
.modal-shot {
max-width: min(1680px, 96vw);
width: min(1680px, 96vw);
}
.rel-shot-body {
padding: 0;
max-height: calc(100dvh - 180px);
overflow: auto;
background: var(--c-bg-alt);
}
.rel-shot-body img {
display: block;
width: auto;
max-width: none;
height: auto;
margin: 0 auto;
}
.rel-shot-body img[data-narrow] { max-width: 100%; }
.rel-shot-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
padding: var(--s-8) var(--s-16);
border-top: 1px solid var(--c-border);
}
.bsw {
display: flex;
align-items: center;
gap: var(--s-4);
flex: none;
min-width: 0;
}
.bsw-arrow {
width: 24px;
height: 24px;
flex: none;
display: grid;
place-items: center;
border: 1px solid transparent;
border-radius: 6px;
background: none;
color: var(--c-text-muted);
cursor: pointer;
}
.bsw-arrow:hover { color: var(--c-primary); border-color: #729aa5; }
.bsw-arrow[aria-disabled='true'] { opacity: .35; pointer-events: none; }
.bsw-track {
display: flex;
align-items: center;
gap: var(--s-4);
margin: 0;
padding: 0;
padding-inline-start: 0;
list-style: none;
}
.bsw-item { padding: 0; margin: 0; display: flex; }
.bsw-tab {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 32px;
min-width: 68px;
padding: 0 8px;
border: 1px solid var(--c-border);
border-radius: 6px;
background: var(--c-bg);
color: var(--c-text);
font-size: var(--fs-caption);
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.bsw-mark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 11px;
height: 12px;
font-size: var(--fs-micro);
font-weight: 800;
letter-spacing: .02em;
line-height: 1;
}
.bsw-mark svg { display: block; width: 11px; height: 11px; }
.bsw-mark-ok { color: #178653; }
.bsw-tab.is-empty { background: #f6f9fc; border-color: #e3e8ee; color: #62718a; }
.bsw-mark-empty { color: #62718a; }
.bsw-tab.is-over { background: #fff0f4; border-color: #fbd5e0; color: #e32646; }
.bsw-mark-over { color: #e32646; }
.bsw-tab.is-ok { background: var(--c-bg); }
.bsw-tab.is-none {
position: relative;
background: none;
border: 1px dashed #b4c1c9;
color: #9aa8b3;
}
.bsw-mark-none { display: none; }
.bsw-mark-new { color: inherit; }
.bsw-tab:hover,
.bsw-tab:focus-visible {
background: #f5fafb;
border-color: #729aa5;
}
.bsw-tab:focus-visible,
.bsw-arrow:focus-visible,
.bsw-cal-toggle:focus-visible { outline: 3px solid rgba(23, 100, 119, .22); outline-offset: 2px; }
.bsw-tab.is-current,
.bsw-tab.is-current:hover {
background: var(--c-primary);
border-color: #0d5261;
color: var(--c-bg);
}
.bsw-tab.is-current .bsw-mark-over { color: #ffd7e1; }
.bsw-tab.is-current .bsw-mark-empty { color: #cfdde6; }
.bsw-tab.is-current .bsw-mark-ok { color: var(--c-success-soft); }
.bsw-tab.is-today .bsw-name { text-decoration: underline; text-underline-offset: 3px; }
.bsw-tab.is-none:hover::after,
.bsw-tab.is-none:focus-visible::after {
content: '+ Add budget';
position: absolute;
top: 36px;
left: 0;
z-index: 40;
padding: 5px 8px;
border-radius: 5px;
background: var(--c-dark);
color: var(--c-on-accent);
font-size: var(--fs-micro);
font-weight: 600;
white-space: nowrap;
}
.bsw-tab.is-new {
background: #edf1ff;
border-color: #829ce1;
color: #24476a;
animation: bsw-new-blink .98s ease-in-out infinite;
}
.bsw-tab.is-new:hover,
.bsw-tab.is-new:focus-visible { animation-play-state: paused; }
@keyframes bsw-new-blink {
0%, 100% { background-color: #edf1ff; border-color: #829ce1; color: #24476a; }
50%      { background-color: #567cf0; border-color: #244fc4; color: var(--c-on-accent); }
}
@media (prefers-reduced-motion: reduce) {
.bsw-tab.is-new { animation: bsw-new-calm 2.1s ease-in-out infinite; }
}
@keyframes bsw-new-calm {
0%, 100% { background-color: #edf1ff; border-color: #829ce1; }
50%      { background-color: #c4d2f9; border-color: #6582d3; }
}
.bsw-cal { position: relative; flex: none; }
.bsw-cal-toggle {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid var(--c-border);
border-radius: 6px;
background: var(--c-bg);
color: var(--c-primary);
cursor: pointer;
list-style: none;
}
.bsw-cal-toggle::-webkit-details-marker { display: none; }
.bsw-cal-toggle:hover { border-color: #729aa5; background: #f5fafb; }
.bsw-cal[open] .bsw-cal-toggle { border-color: var(--c-primary); background: #eaf4f6; }
.bsw-cal-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 60;
width: 420px;
max-width: calc(100vw - var(--s-16) * 2);
padding: var(--s-16);
border: 1px solid var(--c-border);
border-radius: 10px;
background: var(--c-bg);
box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
}
.bsw-cal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-12); }
.bsw-cal-title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.bsw-cal-sub { margin: 3px 0 0; font-size: var(--fs-caption); color: var(--c-text-secondary); }
.bsw-cal-year { display: flex; align-items: center; gap: var(--s-4); }
.bsw-cal-y { font-size: var(--fs-body); font-weight: 600; min-width: 38px; text-align: center; }
.bsw-cal-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s-8);
margin: var(--s-16) 0;
}
.bsw-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 62px;
padding: var(--s-8) var(--s-4);
border: 1px solid var(--c-border);
border-radius: 8px;
background: var(--c-bg);
color: var(--c-text);
text-decoration: none;
text-align: center;
}
.bsw-cell .bsw-name { font-size: var(--fs-body); font-weight: 600; }
.bsw-cell-state { font-size: var(--fs-micro); color: inherit; opacity: .75; }
.bsw-cell.is-empty { background: #f6f9fc; border-color: #e3e8ee; color: #62718a; }
.bsw-cell.is-over { background: #fff0f4; border-color: #fbd5e0; color: #e32646; }
.bsw-cell.is-none { background: none; border: 1px dashed #b4c1c9; color: #9aa8b3; }
.bsw-cell.is-new { background: #edf1ff; border-color: #829ce1; color: #24476a; }
.bsw-cell:hover, .bsw-cell:focus-visible { border-color: #729aa5; background: #f5fafb; }
.bsw-cell:focus-visible { outline: 3px solid rgba(23, 100, 119, .22); outline-offset: 2px; }
.bsw-cell.is-current,
.bsw-cell.is-current:hover {
border-color: var(--c-primary);
box-shadow: inset 0 0 0 1px var(--c-primary);
}
.bsw-cell.is-today .bsw-name { text-decoration: underline; text-underline-offset: 3px; }
.bsw-cal-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-8);
padding-top: var(--s-12);
border-top: 1px solid var(--c-border);
}
.bsw-cal-link {
color: var(--c-primary);
font-size: var(--fs-caption);
text-decoration: none;
}
.bsw-cal-link:hover { text-decoration: underline; }
@media (max-width: 1023px) {
.bsw { display: none; }
}
@media (min-width: 1024px) {
.month-pick { display: none; }
}
.amt {
font-variant-numeric: tabular-nums;
white-space: nowrap;
position: relative;
}
.amt.is-hidden > [aria-hidden] {
letter-spacing: .08em;
position: relative;
top: .12em;
}
.amt.is-rolling {
display: inline-flex;
align-items: flex-start;
height: 1.12em;
overflow: hidden;
vertical-align: bottom;
}
.amt.is-rolling .roll-static,
.amt.is-rolling .roll-digit { height: 1.12em; line-height: 1.12em; }
.amt.is-rolling .roll-digit {
display: flex;
flex-direction: column;
will-change: transform;
--steps: 0;
}
.amt.is-rolling .roll-digit span { flex: 0 0 1.12em; height: 1.12em; line-height: 1.12em; }
.amt.is-rolling .roll-digit.up   { transform: translateY(calc(var(--steps) * -1.12em)); }
.amt.is-rolling .roll-digit.down { transform: translateY(0); }
.amt.is-rolling .roll-digit.up   { animation: slot-up   1320ms cubic-bezier(.45, .02, .16, 1) both; }
.amt.is-rolling .roll-digit.down { animation: slot-down 1320ms cubic-bezier(.45, .02, .16, 1) both; }
.amt.is-rolling > :nth-child(2)  { animation-delay: 14ms; }
.amt.is-rolling > :nth-child(3)  { animation-delay: 28ms; }
.amt.is-rolling > :nth-child(4)  { animation-delay: 42ms; }
.amt.is-rolling > :nth-child(5)  { animation-delay: 56ms; }
.amt.is-rolling > :nth-child(6)  { animation-delay: 70ms; }
.amt.is-rolling > :nth-child(7)  { animation-delay: 84ms; }
.amt.is-rolling > :nth-child(8)  { animation-delay: 98ms; }
.amt.is-rolling > :nth-child(9)  { animation-delay: 112ms; }
.amt.is-rolling > :nth-child(10) { animation-delay: 126ms; }
.amt.is-rolling > :nth-child(11) { animation-delay: 140ms; }
.amt.is-rolling > :nth-child(12) { animation-delay: 154ms; }
@keyframes slot-up {
0%   { transform: translateY(0); filter: blur(0); }
18%  { filter: blur(.12px); }
48%  { filter: blur(.48px); }
76%  { filter: blur(.18px); }
100% { transform: translateY(calc(var(--steps) * -1.12em)); filter: blur(0); }
}
@keyframes slot-down {
0%   { transform: translateY(calc(var(--steps) * -1.12em)); filter: blur(0); }
18%  { filter: blur(.12px); }
48%  { filter: blur(.48px); }
76%  { filter: blur(.18px); }
100% { transform: translateY(0); filter: blur(0); }
}
.amt-switch { display: flex; align-items: center; }
.amt-switch-btn {
display: inline-flex;
align-items: center;
gap: var(--s-8);
min-height: 40px;
padding: 0 var(--s-8);
border: 0;
border-radius: var(--r-6);
background: none;
color: var(--c-text-secondary);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.amt-switch-btn:hover { background: var(--c-bg-alt); color: var(--c-text); }
.amt-switch-btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.amt-switch-icon { display: inline-flex; }
.amt-switch-track {
position: relative;
width: 34px; height: 18px;
border-radius: 9px;
background: var(--c-border);
transition: background .15s ease;
}
.amt-switch-knob {
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--c-bg);
box-shadow: 0 1px 2px rgba(13, 37, 61, .25);
transition: transform .15s ease;
}
.amt-switch-btn[aria-checked="true"] { color: var(--c-primary); }
@keyframes amt-eye-blink {
0%,  44% { color: var(--c-primary); }
56%, 94% { color: var(--c-danger); }
100%     { color: var(--c-primary); }
}
.amt-switch-btn[aria-checked="true"] .amt-switch-icon {
animation: amt-eye-blink 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.amt-switch-btn[aria-checked="true"] .amt-switch-icon {
animation-iteration-count: infinite !important;
}
}
.amt-switch-btn[aria-checked="true"] .amt-switch-track { background: var(--c-primary); }
.amt-switch-btn[aria-checked="true"] .amt-switch-knob  { transform: translateX(16px); }
.amt-switch-btn[aria-disabled="true"] {
color: var(--c-text-secondary);
cursor: not-allowed;
}
.amt-switch-btn[aria-disabled="true"]:hover {
background: transparent;
color: var(--c-text-secondary);
}
.amt-switch-btn[aria-disabled="true"] .amt-switch-icon {
animation: none !important;
}
@media (max-width: 768px) {
.amt-switch-btn { padding: 0 var(--s-4); gap: var(--s-4); }
.amt-switch-track { width: 30px; }
.amt-switch-btn[aria-checked="true"] .amt-switch-knob { transform: translateX(12px); }
}
.drawer-add-zone {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--s-8);
margin-top: var(--s-12);
}
.add-row { flex: 1 1 100%; }
.add-row-summary {
gap: var(--s-4);
cursor: pointer;
list-style: none;
}
.add-row-summary::-webkit-details-marker { display: none; }
.add-row-body {
display: flex;
flex-direction: column;
gap: var(--s-12);
margin-top: var(--s-12);
padding: var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg-alt);
}
.add-row-onetime { margin: 0; }
.add-row-foot {
display: flex;
justify-content: flex-end;
gap: var(--s-8);
}
.add-row-error { margin: 0; color: var(--c-danger); }
.drawer-open-btn { margin-right: auto; }
.add-row-line {
display: flex;
align-items: flex-end;
gap: var(--s-12);
}
.add-row-icon   { flex: 0 0 auto; }
.add-row-name   { flex: 1 1 auto; min-width: 0; }
.add-row-amount { flex: 0 0 128px; }
@media (max-width: 768px) {
.add-row-line { flex-wrap: wrap; }
.add-row-name { flex: 1 1 0; }
.add-row-amount { flex: 1 1 100%; }
.add-row-foot { flex-wrap: wrap; }
.add-row-foot .btn { flex: 1 1 auto; justify-content: center; }
}
@media (pointer: coarse) {
.add-row-summary { min-height: 44px; align-items: center; display: inline-flex; }
}
.drawer-input-cell {
position: relative;
white-space: nowrap;
}
.drawer-input-cell .amount-field {
display: inline-flex;
vertical-align: middle;
}
.drawer-row-delete {
width: 30px;
height: 30px;
margin-left: 6px;
vertical-align: middle;
border: 0;
border-radius: var(--r-6);
background: none;
color: var(--c-text-secondary);
font-size: 17px;
line-height: 1;
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.drawer-row-delete:hover,
.drawer-row-delete:focus-visible {
background: var(--c-danger-soft);
color: var(--c-danger-on-soft);
}
.drawer-table td.drawer-input-cell:has(.drawer-row-delete) { padding-right: 44px; }
.drawer-input-cell .drawer-row-delete {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
margin-left: 0;
}
.icon-picker-open {
display: flex;
align-items: center;
gap: var(--s-8);
padding: var(--s-8) var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
color: inherit;
cursor: pointer;
}
.icon-picker-open:hover { border-color: var(--c-border-strong, var(--c-text-muted)); }
.icon-picker-modal {
display: block;
padding: 0;
background: transparent;
backdrop-filter: none;
}
.modal-backdrop.icon-picker-modal { perspective: none; }
.icon-picker-modal .modal {
position: fixed;
width: min(300px, 92vw);
max-width: none;
margin: 0;
border-radius: var(--r-16);
box-shadow: 0 18px 40px rgba(13, 37, 61, .18);
display: flex;
flex-direction: column;
overflow: hidden;
}
.icon-picker-modal .modal.is-right {
border-radius: 0 var(--r-16) var(--r-16) 0;
}
.icon-picker-modal .icon-picker-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
max-height: none;
border-top: 0;
padding-top: var(--s-8);
}
.icon-picker-modal .modal-head,
.icon-picker-modal .icon-picker-note { flex: none; }
.icon-picker-head { align-items: flex-start; gap: var(--s-12); }
.icon-picker-head-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.icon-picker-title {
order: 1;
margin: 0;
font-size: var(--fs-title);
line-height: 1.25;
}
.icon-picker-kicker {
order: 2;
margin: 2px 0 0;
font-size: var(--fs-caption);
color: var(--c-text-secondary);
}
.icon-picker-close { margin-left: auto; flex: none; }
.icon-picker-modal .icon-picker-grid {
grid-template-columns: repeat(5, 1fr);
gap: var(--s-8);
}
.icon-picker-modal .icon-picker-grid .icon-option {
display: grid;
place-items: center;
aspect-ratio: 1;
padding: 0;
border: 1px solid transparent;
border-radius: var(--r-12);
background: var(--c-bg-alt);
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
.icon-picker-modal .icon-picker-grid .icon-option:hover {
background: var(--c-primary-soft);
}
.icon-picker-modal .icon-picker-grid .icon-option:has(input:checked) {
border-color: var(--c-primary);
background: var(--c-primary-soft);
box-shadow: inset 0 0 0 1px var(--c-primary);
}
.icon-picker-modal .icon-picker-grid .icon-option:focus-within {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
}
.icon-picker-note {
margin: 0;
padding: var(--s-12) var(--s-16) var(--s-16);
font-size: var(--fs-caption);
line-height: 1.45;
color: var(--c-text-secondary);
}
.icon-picker-modal.is-centred {
display: flex;
padding: var(--s-24);
background: rgba(13, 37, 61, .45);
}
.icon-picker-modal.is-centred .modal,
.icon-picker-modal.is-centred .modal.is-right {
position: relative;
left: auto !important;
top: auto !important;
width: 100%;
max-width: 480px;
max-height: calc(100dvh - 48px) !important;
border-radius: var(--r-16);
transform-origin: 50% 50%;
}
@media (max-width: 767px) {
.icon-picker-modal { display: flex; padding: var(--s-24); background: rgba(13, 37, 61, .45); }
.icon-picker-modal .modal,
.icon-picker-modal .modal.is-right {
position: relative;
left: auto !important;
top: auto !important;
width: 100%;
max-height: calc(100dvh - 48px) !important;
border-radius: var(--r-16);
transform-origin: 50% 50%;
}
}
:root {
--ms-in:            #3468ef;
--ms-in-soft:       #e8efff;
--ms-goal:          #967cbf;
--ms-goal-soft:     #ede8f4;
--ms-out:           #d52d5b;
--ms-out-soft:      #ffe7ef;
--ms-in-text:       #2a58cf;
--ms-goal-text:     #665482;
--ms-out-text:      #bd1e4b;
--nwbar-free:   var(--petrol-500);
--nwbar-goals:  var(--ms-goal);
--nwbar-crypto: var(--ms-in);
}
.ms-head {
display: grid;
gap: var(--s-16);
}
.ms-head-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-16);
}
.ms-head-actions {
display: flex;
align-items: center;
gap: var(--s-8);
flex: none;
}
.ms-title {
margin: 0;
font-size: var(--fs-h1);
line-height: 1.2;
}
.ms-metrics {
display: grid;
grid-template-columns: minmax(360px, 1.3fr) repeat(4, minmax(0, 1fr));
padding: 0;
}
.ms-metric:first-child { border-radius: var(--r-12) 0 0 var(--r-12); }
.ms-metric {
display: grid;
align-content: start;
gap: 3px;
padding: var(--s-16);
border-left: 1px solid var(--c-border);
}
.ms-metric:first-child { border-left: 0; }
.ms-metric.is-lead { background: var(--c-primary-soft); }
.ms-metric.is-lead .ms-metric-label { color: var(--c-primary-muted); }
.ms-metric.is-lead .nwbar { margin-top: 6px; }
.ms-metric.is-lead .nwbar-legend { gap: 4px var(--s-12); }
.ms-metric-label {
font-size: var(--fs-caption);
color: var(--c-text-muted);
}
.ms-metric-value { font-size: var(--fs-h2); line-height: 1.2; }
.ms-metric.is-lead .ms-metric-value { font-size: var(--fs-h1); }
.ms-metric-value.is-in  { color: var(--c-success); }
.ms-metric-value.is-out { color: var(--c-danger); }
.ms-metric-note {
font-size: var(--fs-caption);
color: var(--c-text-muted);
}
.ms-archive {
padding: 0;
overflow: hidden;
}
.ms-archive-head {
display: flex;
align-items: center;
gap: var(--s-12);
flex-wrap: wrap;
padding: var(--s-16);
border-bottom: 1px solid var(--c-border);
}
.ms-archive-head h2 { margin: 0; font-size: var(--fs-title); }
.ms-search {
position: relative;
margin-left: auto;
min-width: 220px;
}
.ms-search .input { padding-left: 34px; }
.ms-search-icon {
position: absolute;
left: 10px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
color: var(--c-text-muted);
pointer-events: none;
}
.ms-controls {
display: flex;
align-items: center;
gap: var(--s-12);
flex-wrap: wrap;
padding: var(--s-12) var(--s-16);
border-bottom: 1px solid var(--c-border);
background: var(--c-bg-alt);
}
.ms-filters {
display: flex;
gap: var(--s-8);
flex-wrap: wrap;
}
.ms-year > * {
padding-top: var(--s-16);
border-bottom: 1px solid var(--c-border);
font-weight: 650;
}
.ms-table .ms-year-name {
display: flex;
align-items: baseline;
gap: var(--s-12);
text-align: left;
font-size: var(--fs-body);
letter-spacing: 0;
text-transform: none;
color: var(--c-text);
}
.ms-year-num { font-weight: 700; }
.ms-year-count { color: var(--c-text-muted); font-weight: 400; }
.ms-name-cell {
display: flex;
align-items: center;
min-width: 0;
}
.ms-icon {
width: 34px;
height: 34px;
flex: none;
display: grid;
place-items: center;
margin-right: var(--s-12);
border-radius: 9px;
font-size: 16px;
line-height: 1;
}
.ms-icon.is-goal { background: var(--ms-goal-soft); }
.ms-icon.is-in   { background: var(--ms-in-soft); }
.ms-icon.is-out  { background: var(--ms-out-soft); }
.ms-name { font-weight: 600; }
.ms-type {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: var(--fs-caption);
white-space: nowrap;
}
.ms-type.is-goal { background: var(--ms-goal-soft); color: var(--ms-goal-text); }
.ms-type.is-in   { background: var(--ms-in-soft);   color: var(--ms-in-text); }
.ms-type.is-out  { background: var(--ms-out-soft);  color: var(--ms-out-text); }
.ms-in  { color: var(--c-success); }
.ms-out { color: var(--c-danger); }
.ms-table th:first-child,
.ms-table td:first-child { padding-left: var(--s-16); }
.ms-table th:last-child,
.ms-table td:last-child { padding-right: var(--s-16); }
.ms-th-act, .ms-act-cell { width: 100px; text-align: right; }
.ms-act-cell {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
}
.ms-act-cell .brow-act,
.ms-act-cell .drawer-row-delete { flex: none; }
.ms-empty { padding: 40px var(--s-16); text-align: center; }
.ms-empty-note {
max-width: 52ch;
margin: 6px auto 0;
color: var(--c-text-secondary);
}
.ms-name-row {
display: flex;
align-items: stretch;
gap: var(--s-8);
}
.ms-icon-field .icon-picker-summary,
.ms-icon-field .icon-picker-open { height: 100%; }
.ms-icon-field { flex: 0 0 auto; margin: 0; }
.ms-name-row .input { flex: 1 1 0; min-width: 0; }
.ms-type-field { border: 0; margin: 0 0 var(--s-16); padding: 0; }
.drawer-add-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-12);
margin-top: var(--s-12);
flex-wrap: wrap;
}
.drawer-add-row > .drawer-add-zone { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.drawer-ms-btn {
flex: none;
border-color: var(--c-info);
color: var(--c-info);
}
.drawer-ms-btn:hover {
border-color: var(--c-info);
background: var(--c-info-soft);
color: var(--c-info);
}
.modal-backdrop[data-ms-stashed] { display: none; }
.modal-backdrop { perspective: 1400px; }
.modal-backdrop[data-ms-lock] .ms-dir-btn {
opacity: .45;
pointer-events: none;
}
.modal-backdrop[data-ms-lock="in"]  .ms-dir-btn.is-in,
.modal-backdrop[data-ms-lock="out"] .ms-dir-btn.is-out {
opacity: 1;
}
.ms-dir { position: relative; }
.ms-dir-radio {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.ms-dir-switch {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-12);
}
.ms-dir-btn {
display: flex;
align-items: center;
gap: var(--s-12);
min-height: 64px;
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-12, 12px);
background: var(--c-bg);
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
.ms-dir-btn:hover { border-color: var(--c-border-strong, #c7d8e1); }
.ms-dir-icon {
display: grid;
place-items: center;
flex: none;
width: 40px;
height: 40px;
border-radius: 10px;
}
.ms-dir-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.ms-dir-text { display: grid; gap: 2px; min-width: 0; }
.ms-dir-name { font-weight: 600; }
.ms-dir-note {
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.ms-dir-sign {
margin-left: auto;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ms-dir-btn.is-in  .ms-dir-icon { background: var(--c-success-soft); color: var(--c-success); }
.ms-dir-btn.is-out .ms-dir-icon { background: var(--c-danger-soft);  color: var(--c-danger); }
.ms-dir-btn.is-in  .ms-dir-sign { color: var(--c-success); }
.ms-dir-btn.is-out .ms-dir-sign { color: var(--c-danger); }
#ms-type-asset_sale:checked ~ .ms-dir-switch .ms-dir-btn.is-in {
border: 2px solid var(--c-success);
padding: calc(var(--s-12) - 1px);
background: var(--c-success-soft);
}
#ms-type-big_purchase:checked ~ .ms-dir-switch .ms-dir-btn.is-out {
border: 2px solid var(--c-danger);
padding: calc(var(--s-12) - 1px);
background: var(--c-danger-soft);
}
.ms-dir-radio:focus-visible ~ .ms-dir-switch {
outline: 2px solid var(--c-primary);
outline-offset: 2px;
}
.ms-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-12);
}
.nwbar { display: grid; gap: 6px; }
.nwbar-track {
position: relative;
display: flex;
height: 5px;
border-radius: 999px;
background: var(--c-border);
}
.nwbar-track > .nwbar-seg:first-of-type { border-radius: 999px 0 0 999px; }
.nwbar-track > .nwbar-seg:last-of-type  { border-radius: 0 999px 999px 0; }
.nwbar-track > .nwbar-seg:only-of-type  { border-radius: 999px; }
.nwbar-track::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -8px;
bottom: -8px;
}
.nwbar-track:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 4px; }
.nwbar-pop {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
z-index: 4;
display: grid;
gap: 4px;
min-width: 168px;
padding: var(--s-8) var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
box-shadow: var(--shadow-2);
font-size: var(--fs-caption);
line-height: 1.3;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity .12s ease;
pointer-events: none;
}
.nwbar-track:hover .nwbar-pop,
.nwbar-track:focus-visible .nwbar-pop,
.nwbar-track:focus-within .nwbar-pop { opacity: 1; visibility: visible; }
.nwbar-pop-row {
display: grid;
grid-template-columns: 8px 1fr auto;
align-items: center;
gap: 8px;
}
.nwbar-pop-name { color: var(--c-text-secondary); }
.nwbar-pop-sum { font-weight: 600; }
.nwbar-track.is-empty span { width: 100%; background: var(--c-border); }
.nwbar-seg { height: 100%; }
.nwbar-seg.is-free   { background: var(--nwbar-free); }
.nwbar-seg.is-goals  { background: var(--nwbar-goals); }
.nwbar-seg.is-crypto { background: var(--nwbar-crypto); }
.nwbar-legend {
display: flex;
flex-wrap: wrap;
gap: 4px var(--s-16);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--fs-caption);
}
.nwbar-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--c-text-secondary);
}
.nwbar-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: none;
}
.nwbar-dot.is-free   { background: var(--nwbar-free); }
.nwbar-dot.is-goals  { background: var(--nwbar-goals); }
.nwbar-dot.is-crypto { background: var(--nwbar-crypto); }
.nwbar-sum { color: var(--c-text); font-weight: 600; }
.nwbar-none {
margin: 0;
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.nwbar.is-compact { gap: 4px; }
.nwbar.is-compact .nwbar-legend { gap: 2px var(--s-12); line-height: 1.15; }
.nwbar.is-compact .nwbar-pop { bottom: calc(100% + 6px); padding: 6px var(--s-8); gap: 2px; }
.ms-head-text { min-width: 0; }
.ms-archive { margin-top: var(--s-16); }
.ms-clear { flex: none; }
.ms-clear.is-idle { opacity: .5; pointer-events: none; }
.ms-year-group + .ms-year-group .ms-year > * { padding-top: var(--s-24); }
.ms-row td { vertical-align: middle; }
.ms-name-field { margin-bottom: var(--s-16); }
@media (max-width: 767px) {
.ms-head-main { align-items: center; }
.ms-add {
min-width: 44px;
min-height: 44px;
padding: 0 12px;
}
.ms-add-text { display: none; }
.ms-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-metric { border-left: 0; border-top: 1px solid var(--c-border); }
.ms-metric.is-lead { grid-column: 1 / -1; border-top: 0; }
.ms-metric:nth-child(2) { border-right: 1px solid var(--c-border); }
.ms-metric:nth-child(4) { border-right: 1px solid var(--c-border); }
.ms-table .ms-void { display: none; }
.ms-table .ms-year {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px var(--s-12);
margin: var(--s-16) 0 var(--s-8);
padding: 0 0 var(--s-8);
border: 0;
border-bottom: 1px solid var(--c-border);
border-radius: 0;
background: transparent;
}
.ms-table .ms-year > * {
padding: 0;
border: 0;
background: transparent;
}
.ms-table .ms-year > td:empty { display: none; }
.ms-act-cell { width: auto; justify-content: flex-end; }
.ms-act-cell::before { content: none; }
.ms-pair { grid-template-columns: 1fr; }
.ms-dir-switch { grid-template-columns: 1fr; }
}
.nwh-ms-row > td { background: var(--c-bg); }
.nwh-ms-name {
position: relative;
padding-left: 34px !important;
white-space: nowrap;
}
.nwh-ms-link {
position: absolute;
left: 14px;
top: -2px;
width: 10px;
height: 16px;
border-left: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
border-bottom-left-radius: 4px;
}
.nwh-ms-icon {
margin-right: 6px;
font-size: 14px;
}
.nwh-ms-title { font-weight: 600; }
.nwh-ms-date {
margin-left: 8px;
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.nwh-ms-name .ms-type { margin-left: 8px; }
.nwp-table .nwh-ms-name { white-space: normal; }
.nwp-ms-meta {
display: block;
margin-top: 2px;
white-space: nowrap;
}
.nwp-table .nwh-ms-name { padding-left: 24px !important; }
.nwp-table .nwh-ms-link { left: 8px; }
.nwp-table .nwh-ms-name .ms-type { margin-left: 0; }
@media (max-width: 767px) {
.nwh-ms-link { display: none; }
.nwh-ms-name { padding-left: 0 !important; white-space: normal; }
.nwh-ms-row .ms-void { display: none; }
}
.fflow-ms-stem {
stroke: var(--ms-in);
stroke-width: 1.6;
stroke-linecap: round;
}
.fflow-ms-ring {
fill: var(--c-bg);
stroke: var(--ms-in);
stroke-width: 2;
}
.fflow-ms-core {
fill: var(--ms-in);
stroke: none;
}
.fflow-ms-hit {
fill: transparent;
cursor: pointer;
}
.fflow-ms-hit:focus { outline: none; }
.fflow-ms-hit:focus-visible {
outline: 2px solid var(--c-primary);
outline-offset: 1px;
}
.fflow-ms-ring,
.fflow-ms-core {
transform-box: fill-box;
transform-origin: center;
transition: transform .12s ease;
}
.fflow-ms:hover .fflow-ms-ring,
.fflow-ms:hover .fflow-ms-core,
.fflow-ms:focus-within .fflow-ms-ring,
.fflow-ms:focus-within .fflow-ms-core { transform: scale(1.35); }
.fflow-ms.is-goal .fflow-ms-stem,
.fflow-ms.is-goal .fflow-ms-ring { stroke: var(--ms-goal); }
.fflow-ms.is-in   .fflow-ms-stem,
.fflow-ms.is-in   .fflow-ms-ring { stroke: var(--ms-in); }
.fflow-ms.is-out  .fflow-ms-stem,
.fflow-ms.is-out  .fflow-ms-ring { stroke: var(--ms-out); }
.fflow-ms.is-goal .fflow-ms-core { fill: var(--ms-goal); }
.fflow-ms.is-in   .fflow-ms-core { fill: var(--ms-in); }
.fflow-ms.is-out  .fflow-ms-core { fill: var(--ms-out); }
.nwh-stems .nwh-stem {
fill: var(--ms-in);
transition: opacity .15s ease;
}
.nwh-stem.is-goal { fill: var(--ms-goal); }
.nwh-stem.is-in   { fill: var(--ms-in); }
.nwh-stem.is-out  { fill: var(--ms-out); }
.nwh-stem-dots {
position: absolute;
top: var(--nwp-pad-t);
height: var(--nwp-plot);
pointer-events: none;
}
.nwh-stem-dot {
position: absolute;
pointer-events: auto;
width: 11px;
height: 11px;
margin: -5.5px 0 0 -5.5px;
padding: 0;
color: var(--ms-in);
border: 2px solid currentColor;
border-radius: 50%;
background: var(--c-bg);
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.nwh-stem-dot.is-goal { color: var(--ms-goal); }
.nwh-stem-dot.is-in   { color: var(--ms-in); }
.nwh-stem-dot.is-out  { color: var(--ms-out); }
.nwh-stem-dot::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 3px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: currentColor;
}
.nwh-stem-dot:hover,
.nwh-stem-dot:focus-visible {
transform: scale(1.35);
box-shadow: 0 0 0 3px rgba(var(--petrol-700-rgb), .18);
outline: none;
}
.nwh-stem-dot::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
.nwh-stem-pop {
position: absolute;
z-index: 3;
display: grid;
gap: 1px;
min-width: 150px;
padding: var(--s-8) var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg);
box-shadow: var(--shadow-2);
font-size: var(--fs-caption);
line-height: 1.35;
pointer-events: auto;
}
.nwh-stem-pop-head {
display: flex;
align-items: center;
gap: var(--s-8);
}
.nwh-stem-pop-head .ms-icon {
width: 22px;
height: 22px;
margin-right: 0;
border-radius: var(--r-6);
font-size: 12px;
}
.nwh-stem-pop b { font-size: var(--fs-body, 13px); }
.nwh-stem-pop span { color: var(--c-text-muted); }
.nwh-stem-pop strong { margin-top: 2px; color: var(--c-success); }
.nwh-stem-pop.is-negative strong { color: var(--c-danger); }
.nwp-key.is-stem i {
width: 3px;
height: 12px;
border-radius: 2px;
background: var(--ms-in);
}
.msm-card { margin-top: var(--s-24); }
.msm-empty { margin: var(--s-8) 0 0; }
.msm-table {
--msm-label: 200px;
--msm-cols: 12;
table-layout: fixed;
width: 100%;
min-width: calc(var(--msm-label) + var(--msm-cols) * 56px);
}
.msm-table .ov-month-head { width: calc((100% - var(--msm-label)) / var(--msm-cols)); }
.msm-card .table-wrap { padding-left: var(--s-8); padding-right: var(--s-12); }
.msm-table th,
.msm-table td { padding-left: var(--s-8); padding-right: var(--s-8); }
.msm-table .ov-month-head { padding-left: var(--s-4); padding-right: var(--s-4); }
.msm-table .msm-cell { padding-left: var(--s-4); padding-right: var(--s-4); }
.msm-table .msm-rowhead {
width: var(--msm-label);
text-align: left;
}
.msm-table tbody .msm-rowhead {
font-size: var(--fs-body);
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--c-text);
}
.msm-table tbody .msm-rowhead > .ms-icon {
float: left;
margin-right: var(--s-8);
}
.msm-text { display: block; overflow: hidden; }
.msm-text .ms-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.msm-meta {
display: block;
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--fs-caption);
font-weight: 400;
color: var(--c-text-muted);
white-space: nowrap;
}
.msm-cell { vertical-align: middle; }
.msm-pill,
.msm-sum {
display: inline-block;
max-width: 100%;
padding: 2px var(--s-8);
border-radius: var(--r-8);
font-size: var(--fs-caption);
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
}
.msm-pill.is-goal { background: var(--ms-goal-soft); color: var(--ms-goal-text); }
.msm-pill.is-in   { background: var(--ms-in-soft);   color: var(--ms-in-text); }
.msm-pill.is-out  { background: var(--ms-out-soft);  color: var(--ms-out-text); }
.msm-sum.is-in  { background: var(--ms-in-soft);  color: var(--ms-in-text); }
.msm-sum.is-out { background: var(--ms-out-soft); color: var(--ms-out-text); }
.msm-table tfoot .msm-rowhead {
font-weight: 600;
color: var(--c-text-muted);
background: var(--c-bg-alt);
}
@media (max-width: 768px) {
.msm-card { display: none; }
}
.brow-pool {
margin-top: var(--s-16);
padding: var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg-alt);
}
.brow-pool-head {
display: flex;
align-items: center;
gap: var(--s-8);
margin-bottom: var(--s-12);
}
.brow-pool-mark {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 28px;
height: 28px;
border-radius: var(--r-8);
background: var(--c-primary-soft);
}
.brow-pool-mark svg {
width: 15px;
height: 15px;
fill: none;
stroke: var(--c-primary);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.brow-pool-title {
color: var(--c-text);
font-size: var(--fs-base);
}
.brow-pool-count {
margin-left: auto;
padding: 2px var(--s-8);
border: 1px solid var(--c-border);
border-radius: 999px;
background: var(--c-bg);
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.brow-pool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--s-8);
}
.brow-pool-item {
display: flex;
align-items: center;
gap: var(--s-8);
padding: var(--s-8) var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-10);
background: var(--c-bg);
color: var(--c-text);
text-align: left;
cursor: pointer;
}
.brow-pool-item:hover {
border-color: var(--c-primary);
background: var(--c-primary-soft);
}
.brow-pool-ico {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 30px;
height: 30px;
border-radius: var(--r-8);
background: var(--c-bg-alt);
}
.brow-pool-name {
overflow: hidden;
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-body);
text-overflow: ellipsis;
white-space: nowrap;
}
.brow-pool-add {
flex: 0 0 auto;
color: var(--c-primary);
font-size: var(--fs-body);
font-weight: 600;
}
@media (max-width: 768px) {
td.drawer-input-cell { width: 160px; }
.drawer-table td.drawer-input-cell .amount-field .input {
padding-left: 21px;
padding-right: 8px;
min-width: 96px;
min-height: 44px;
}
.drawer-table td.drawer-src {
min-width: 0;
overflow-wrap: anywhere;
}
#income-modal .drawer-table,
#spent-modal .drawer-table {
width: 100%;
table-layout: fixed;
}
}
.field-with-info {
display: flex;
align-items: center;
gap: var(--s-8);
}
.field-with-info .select {
flex: 1 1 auto;
min-width: 0;
}
.btn-info-dot {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--c-border);
border-radius: 50%;
background: var(--c-bg);
color: var(--c-primary);
font-size: var(--fs-base);
font-style: italic;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.btn-info-dot:hover { border-color: var(--c-primary); }
.modal-types { max-width: 880px; }
.ptypes-current {
display: flex;
align-items: center;
gap: var(--s-8);
margin: 0 0 var(--s-16);
padding: var(--s-12);
border-radius: var(--r-8);
background: var(--c-primary-soft);
color: var(--c-primary);
}
.ptypes-current-icon { display: inline-flex; flex: 0 0 auto; }
.ptypes-scroll { overflow-x: auto; }
.ptypes-table { width: 100%; }
.ptypes-table th,
.ptypes-table td { vertical-align: top; text-align: left; }
.ptypes-table th[scope="row"] {
width: 30%;
min-width: 120px;
color: var(--c-text-muted);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .04em;
}
.ptypes-head {
display: inline-flex;
align-items: center;
gap: var(--s-8);
}
.ptypes-note {
display: block;
margin-top: 2px;
color: var(--c-text-muted);
font-size: var(--fs-caption);
font-weight: 400;
line-height: 1.35;
}
.ms-name-link {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--c-border);
text-underline-offset: 3px;
cursor: pointer;
}
.ms-name-link:hover,
.ms-name-link:focus-visible { text-decoration-color: var(--c-primary); }
.pcomp-head { justify-content: flex-end; border-bottom: 0; padding-bottom: 0; }
.pcomp { text-align: center; }
.pcomp-badge-row { display: flex; justify-content: center; }
.pcomp-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg);
}
.pcomp-tick {
position: absolute;
right: -6px;
bottom: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--c-success);
color: var(--c-on-accent);
}
.pcomp-chip {
display: inline-block;
margin: var(--s-12) 0 0;
padding: 4px var(--s-12);
border-radius: 999px;
background: var(--c-success-soft);
color: var(--c-success);
font-size: var(--fs-caption);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.pcomp-title { margin: var(--s-12) 0 4px; }
.pcomp-lead { margin: 0 0 var(--s-16); color: var(--c-text-muted); }
.pcomp-facts {
display: flex;
flex-wrap: wrap;
gap: var(--s-8);
margin-bottom: var(--s-16);
}
.pcomp-fact {
flex: 1 1 120px;
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
}
.pcomp-fact-label {
display: block;
color: var(--c-text-muted);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: .04em;
}
.pcomp-fact-value { display: block; margin-top: 2px; font-weight: 700; }
.pcomp-fact-value.is-good { color: var(--c-success); }
.pcomp-progress {
margin-bottom: var(--s-16);
padding: var(--s-12);
border-radius: var(--r-8);
background: var(--c-bg-alt);
}
.pcomp-progress-head,
.pcomp-progress-foot { display: flex; justify-content: space-between; }
.pcomp-progress-head { margin-bottom: var(--s-8); font-size: var(--fs-caption); }
.pcomp-progress-foot {
margin-top: 4px;
color: var(--c-text-muted);
font-size: var(--fs-caption);
}
.pcomp-bar {
height: 8px;
border-radius: 999px;
background: var(--c-border);
overflow: hidden;
}
.pcomp-bar-fill { display: block; height: 100%; background: var(--c-success); }
.pcomp-note {
display: flex;
gap: var(--s-8);
margin: 0;
padding: var(--s-12);
border-radius: var(--r-8);
background: var(--c-success-soft);
text-align: left;
}
.pcomp-note-tick { color: var(--c-success); font-weight: 700; }
.pcomp-note-text { display: block; color: var(--c-text-muted); font-size: var(--fs-caption); }
.ptypes-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--c-primary);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
vertical-align: baseline;
}
.ptypes-link svg { width: 14px; height: 14px; }
.project-name.is-capped {
text-decoration: underline dotted;
text-decoration-color: var(--c-danger);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
cursor: help;
}
a.project-name.is-capped { text-decoration: underline dotted var(--c-danger); }
.goal-room {
position: fixed;
z-index: 200;
padding: 2px 6px;
border-radius: var(--r-4);
background: var(--c-bg);
box-shadow: 0 1px 4px rgba(16, 24, 40, .12);
color: var(--c-text-muted);
font-size: var(--fs-caption);
white-space: nowrap;
cursor: help;
}
.goal-room.is-over { color: var(--c-danger); font-weight: 600; }
.goal-room.is-fits { color: var(--c-success); font-weight: 600; }
.input.is-over-budget,
.input.num.is-over-budget { border-color: var(--c-danger); }
.btn.is-blocked,
button.is-blocked { opacity: .55; cursor: not-allowed; }
.pform-head .pform-default { margin-right: auto; }
.pform-default { flex: 0 0 auto; }
.pform-default .switch-field-text { white-space: nowrap; }
.pform-idline {
display: flex;
align-items: flex-end;
gap: var(--s-12);
}
.pform-icon { flex: 0 0 auto; }
.pform-name { flex: 1 1 0; min-width: 0; }
.icon-picker-current img,
.icon-option-mark img {
display: block;
width: 28px;
height: 28px;
}
[data-form-mode="create"] [data-only-edit] { display: none; }
.input[type="month"],
.input[type="date"] {
appearance: none;
-webkit-appearance: none;
min-width: 0;
max-width: 100%;
}
.input[type="month"]::-webkit-date-and-time-value,
.input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.input[type="month"]::-webkit-calendar-picker-indicator,
.input[type="date"]::-webkit-calendar-picker-indicator {
width: 18px;
height: 18px;
margin-left: var(--s-8);
}
#project-modal .form-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 768px) {
#project-modal .form-row { gap: var(--s-8); }
#project-modal .form-row .label { font-size: var(--fs-caption); }
}
@media (max-width: 768px) {
#project-modal .pform-when { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
#project-modal .pform-when .select { padding-right: var(--s-24); }
#project-modal .input[type="month"] {
padding-right: var(--s-4);
padding-left: var(--s-8);
}
#project-modal .input[type="month"]::-webkit-calendar-picker-indicator {
width: 14px;
height: 14px;
margin-left: var(--s-4);
}
}
@media (max-width: 768px) {
.pform-head { flex-wrap: wrap; }
.pform-head h3 { flex: 1 1 auto; white-space: nowrap; }
.pform-head .pform-default {
order: 3;
flex-basis: 100%;
margin-right: 0;
}
}
@media (max-width: 768px) {
#project-modal .input[type="month"]::-webkit-calendar-picker-indicator {
width: 12px;
height: 12px;
margin-left: 0;
}
}
@media (max-width: 374px) {
#project-modal .pform-when { grid-template-columns: minmax(0, 1fr); }
}
.pform-status { flex: 0 0 auto; }
.pform-status-badge {
height: 44px;
padding: 0 var(--s-12);
font-size: var(--fs-base);
}
[data-form-status="completed"] .pform-status-badge {
background: var(--c-success-soft);
color: var(--c-success-on-soft);
border-color: transparent;
}
[data-form-status="active"] .pform-status-badge {
background: var(--c-primary-soft);
color: var(--c-primary);
border-color: transparent;
}
.pform-foot .pform-archive { margin-right: auto; }
.pform-archive { color: var(--c-text-secondary); }
.pform-archive:hover { background: var(--c-bg-alt); color: var(--c-text); }
.pform-archive.is-restore { color: var(--c-primary); }
.pform-archive.is-restore:hover { background: var(--c-primary-soft); color: var(--c-primary); }
@media (max-width: 768px) {
.pform-foot { flex-wrap: wrap; }
.pform-foot .pform-archive { flex-basis: 100%; margin-right: 0; }
.pform-status { flex-basis: 100%; }
.pform-status-badge { height: auto; padding: 2px var(--s-8); font-size: var(--fs-caption); }
}
.pcard.is-done .pcard-identity {
background: var(--c-success-soft);
border-bottom: 1px solid var(--c-success-soft);
}
.pcard-avatar { position: relative; }
.pcard-tick {
position: absolute;
right: -4px;
bottom: -4px;
display: grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--c-bg);
background: var(--c-success);
color: var(--c-on-accent);
}
.pcard.is-done .pcard-mini-fill { background: var(--c-success); }
.pcard.is-done .pcard-mini-pct { color: var(--c-success-on-soft); font-weight: 600; }
.parch { padding: var(--s-16) var(--s-24); }
.parch-summary {
display: flex;
align-items: center;
gap: var(--s-8);
cursor: pointer;
font-weight: 600;
list-style: none;
}
.parch-summary::-webkit-details-marker { display: none; }
.parch-summary::after { content: '▾'; color: var(--c-text-secondary); }
.parch[open] .parch-summary::after { content: '▴'; }
.parch-note {
margin: var(--s-12) 0 0;
max-width: 68ch;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.parch-list { margin: var(--s-12) 0 0; padding: 0; list-style: none; }
.parch-row {
display: flex;
align-items: center;
gap: var(--s-12);
padding: var(--s-8) 0;
border-top: 1px solid var(--c-border);
}
.parch-icon { flex: 0 0 auto; display: flex; }
.parch-naming { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.parch-type { color: var(--c-text-secondary); font-size: var(--fs-caption); }
.parch-count { color: var(--c-text-secondary); font-size: var(--fs-caption); white-space: nowrap; }
.parch-form { flex: 0 0 auto; }
@media (max-width: 768px) {
.parch-row { flex-wrap: wrap; }
.parch-naming { flex: 1 1 0; }
.parch-form { margin-left: auto; }
}
.ms-flat { color: var(--c-text); }
.pcomp-chip.is-open {
background: var(--c-bg-alt);
color: var(--c-text-secondary);
}
.pcomp-reopened .pcomp-note {
background: var(--c-bg-alt);
border-color: var(--c-border);
}
.prestart { width: min(560px, 94vw); }
.prestart-head { align-items: flex-start; gap: var(--s-12); }
.prestart-mark {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: var(--r-8);
background: var(--c-danger-soft);
color: var(--c-danger);
font-size: var(--fs-lg);
font-weight: 700;
}
.prestart-heading { flex: 1 1 auto; min-width: 0; }
.prestart-heading h3 { margin: 0; }
.prestart-sub {
margin: var(--s-4) 0 0;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.prestart-amounts {
display: flex;
align-items: center;
gap: var(--s-16);
padding: var(--s-12) var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
background: var(--c-bg-alt);
}
.prestart-amount { flex: 1 1 0; min-width: 0; }
.prestart-amount-label {
display: block;
color: var(--c-text-secondary);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: .04em;
}
.prestart-amount-value {
display: block;
margin-top: 2px;
font-size: var(--fs-h2);
font-variant-numeric: tabular-nums;
}
.prestart-amount-value.is-new { color: var(--c-danger); }
.prestart-arrow { flex: 0 0 auto; color: var(--c-text-secondary); }
.prestart-lead { margin: var(--s-16) 0 var(--s-8); font-weight: 600; }
.prestart-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-8); }
.prestart-item {
display: flex;
align-items: flex-start;
gap: var(--s-12);
padding: var(--s-12);
border: 1px solid var(--c-border);
border-radius: var(--r-8);
}
.prestart-item b { display: block; }
.prestart-note {
display: block;
margin-top: 2px;
color: var(--c-text-secondary);
font-size: var(--fs-caption);
}
.prestart-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: var(--r-6);
font-size: var(--fs-caption);
font-weight: 700;
}
.prestart-icon.is-turn { background: var(--c-primary-soft); color: var(--c-primary); }
.prestart-icon.is-drop { background: var(--c-danger-soft);  color: var(--c-danger); }
.prestart-warn {
margin: var(--s-16) 0 0;
padding: var(--s-12) var(--s-16);
border-left: 3px solid var(--c-warning);
border-radius: var(--r-6);
background: var(--c-warning-soft);
color: var(--c-text);
font-size: var(--fs-caption);
}
.prestart-agree {
display: flex;
align-items: flex-start;
gap: var(--s-12);
margin-top: var(--s-16);
color: var(--c-text-secondary);
font-size: var(--fs-caption);
cursor: pointer;
}
.prestart-agree input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--c-primary); flex: none; }
.prestart-go:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 768px) {
.prestart-amounts { flex-direction: column; align-items: stretch; gap: var(--s-8); }
.prestart-arrow { align-self: center; transform: rotate(90deg); }
.prestart-foot { flex-wrap: wrap; }
.prestart-foot .btn { flex: 1 1 160px; }
}
.modal-remove { max-width: 560px; }
.rmv-head { align-items: flex-start; gap: var(--s-12); }
.rmv-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: var(--r-12);
background: var(--c-bg-alt);
}
.rmv-icon .row-icon { width: 24px; height: 24px; }
.rmv-titles { flex: 1 1 auto; min-width: 0; }
.rmv-kicker {
display: block;
font-size: var(--fs-micro);
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-text-secondary);
}
.rmv-titles h3 { margin: 2px 0 0; }
.rmv-sub { margin: 2px 0 0; font-size: var(--fs-body); color: var(--c-text-secondary); }
.rmv-close { flex: 0 0 auto; }
.rmv-question { margin: 0 0 var(--s-12); font-weight: 600; }
.rmv-tabs {
display: flex;
margin-bottom: var(--s-16);
border-bottom: 1px solid var(--c-border);
}
html:not(.has-js) .rmv-tabs { display: none; }
.rmv-tab {
display: inline-flex;
flex: 1 1 0;
align-items: center;
justify-content: center;
gap: var(--s-8);
padding: var(--s-8) var(--s-8) var(--s-12);
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: none;
font: inherit;
font-weight: 600;
color: var(--c-text-secondary);
cursor: pointer;
}
.rmv-tab.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.rmv-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 var(--s-4);
border-radius: var(--r-pill);
background: var(--c-bg-alt);
font-size: var(--fs-micro);
font-weight: 600;
color: var(--c-text-secondary);
}
.rmv-tab.is-active .rmv-badge { background: var(--c-primary-soft); color: var(--c-primary); }
.rmv-card {
padding: var(--s-16);
border: 1px solid var(--c-border);
border-radius: var(--r-12);
background: var(--c-bg-alt);
}
.rmv-card-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-bottom: var(--s-12);
border-radius: var(--r-8);
background: var(--c-primary-soft);
color: var(--c-primary);
}
.rmv-card-title { display: block; font-size: var(--fs-lg); }
.rmv-card-text { margin: var(--s-4) 0 0; font-size: var(--fs-body); color: var(--c-text-secondary); }
.rmv-card-pill {
display: inline-block;
margin-top: var(--s-12);
padding: 2px var(--s-8);
border-radius: var(--r-pill);
background: var(--c-primary-soft);
font-size: var(--fs-caption);
color: var(--c-primary);
}
.rmv-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rmv-fieldset[hidden] { display: none; }
.rmv-list { border: 1px solid var(--c-border); border-radius: var(--r-12); overflow: hidden; }
.rmv-list-head {
display: flex;
align-items: center;
gap: var(--s-12);
padding: var(--s-8) var(--s-12);
border-bottom: 1px solid var(--c-border);
background: var(--c-bg-alt);
}
.rmv-list-title { font-size: var(--fs-caption); font-weight: 600; color: var(--c-text-secondary); }
.rmv-list-count { font-size: var(--fs-caption); color: var(--c-text-secondary); }
.rmv-year { margin-left: auto; }
.rmv-rows {
--rmv-row: 46px;
max-height: calc(var(--rmv-row) * 12);
overflow-y: auto;
}
.rmv-row {
display: flex;
align-items: center;
gap: var(--s-12);
height: var(--rmv-row);
padding: 0 var(--s-12);
border-bottom: 1px solid var(--c-border);
cursor: pointer;
}
.rmv-row:last-child { border-bottom: 0; }
.rmv-row[hidden] { display: none; }
.rmv-row:hover { background: var(--c-bg-alt); }
.rmv-row input {
display: block;
flex: 0 0 auto;
width: 18px;
height: 18px;
accent-color: var(--c-primary);
cursor: pointer;
}
.rmv-row-name { flex: 1 1 auto; min-width: 0; }
.rmv-row-sum { flex: 0 0 auto; color: var(--c-text-secondary); }
.rmv-warn {
margin: var(--s-12) 0 0;
padding: var(--s-8) var(--s-12);
border-radius: var(--r-8);
background: var(--c-danger-soft);
font-size: var(--fs-body);
color: var(--c-danger-on-soft);
}
.rmv-warn[hidden] { display: none; }
.rmv-rule {
margin: var(--s-16) 0 0;
padding: var(--s-8) var(--s-12);
border-radius: var(--r-8);
background: var(--c-bg-alt);
font-size: var(--fs-body);
color: var(--c-text-secondary);
}
.rmv-foot { align-items: center; }
.rmv-effect { margin-right: auto; font-size: var(--fs-body); color: var(--c-text-secondary); }
@media (max-width: 768px) {
.rmv-rows { max-height: none; }
.rmv-foot { flex-wrap: wrap; }
.rmv-effect { flex: 1 0 100%; margin: 0 0 var(--s-8); }
.rmv-foot .btn { flex: 1 1 140px; }
}