:root {
    --ink:#172d29;
    --muted:#75827d;
    --green:#176d54;
    --green-soft:#e7f2eb;
    --line:#e2e8e3;
    --paper:#f6f8f4;
    --white:#fff;
    --red:#a43535;
    --amber:#9a6b16;
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    font-size:14px;
    background:var(--paper);
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
}
button,input,textarea,select {
    font:inherit;
}
button,a,input,textarea,select {
    -webkit-tap-highlight-color:transparent;
}
button {
    cursor:pointer;
    border:1px solid var(--line);
    background:var(--white);
    border-radius:8px;
    padding:10px 14px;
    color:var(--ink);
    font-weight:600;
    transition:background .15s;
}
button:hover {
    background:var(--green-soft);
}
button:disabled {
    opacity:.5;
    cursor:wait;
}
button.primary {
    background:var(--green);
    border-color:var(--green);
    color:white;
}
button.primary:hover {
    background:#10523f;
}
button.danger {
    color:var(--red);
}
a {
    color:inherit;
    text-decoration:none;
}
input,select,textarea {
    border:1px solid #d9e0d9;
    background:var(--white);
    border-radius:8px;
    padding:11px 12px;
    color:var(--ink);
    max-width:100%;
}
input:focus,select:focus,textarea:focus {
    outline:2px solid #94bdaa;
    outline-offset:2px;
}
label {
    font-size:12px;
    font-weight:600;
    display:block;
    margin:18px 0 8px;
}
small {
    color:var(--muted);
    font-size:11px;
}
h1,h2,h3,p {
    margin-top:0;
}
h1 {
    font-size:29px;
    letter-spacing:-1px;
    margin-bottom:0;
    font-weight:650;
}
h2 {
    font-size:19px;
    font-weight:650;
    letter-spacing:-.3px;
}
p {
    line-height:1.7;
    color:#63736c;
}
.eyebrow {
    font-size:10px;
    letter-spacing:1.5px;
    font-weight:700;
    color:var(--muted);
    display:block;
    margin-bottom:12px;
}
.brand {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:15px;
    font-weight:800;
    letter-spacing:1px;
}
.brand small {
    font-size:8px;
    align-self:flex-end;
    padding-bottom:9px;
    letter-spacing:1px;
}
.brand-icon {
    width:34px;
    height:36px;
    background:var(--green);
    color:#fff;
    border-radius:9px 9px 9px 2px;
    display:grid;
    place-items:center;
    font-size:22px;
    font-style:italic;
}
.workspace {
    display:grid;
    grid-template-columns:240px 1fr;
    min-height:100vh;
}
aside {
    background:var(--white);
    border-right:1px solid var(--line);
    padding:32px 20px 18px;
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
}
aside .brand {
    margin:0 8px 54px;
}
.sidebar-caption {
    font-size:9px;
    font-weight:700;
    letter-spacing:1.6px;
    color:#9aa59e;
    margin:0 14px 15px;
}
nav {
    display:grid;
    gap:7px;
}
nav button {
    border:none;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    padding:13px 14px;
    font-weight:500;
    color:#67756e;
    font-size:12px;
}
nav button span {
    font-size:18px;
    width:18px;
    color:#83928a;
}
nav button.active {
    background:var(--green-soft);
    color:var(--green);
    font-weight:700;
}
nav button.active span {
    color:var(--green);
}
.sidebar-bottom {
    margin-top:auto;
    padding-top:25px;
    display:flex;
    align-items:center;
    gap:9px;
    border-top:1px solid var(--line);
}
.avatar {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f1e9d8;
    color:#7a6949;
}
.sidebar-bottom strong {
    font-size:11px;
    display:block;
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sidebar-bottom small {
    font-size:9px;
}
.sidebar-bottom button {
    border:0;
    padding:6px;
    margin-left:auto;
}
main {
    min-width:0;
    padding:35px 40px 18px;
    max-width:1800px;
    width:100%;
    margin:auto;
}
header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}
.header-actions {
    display:flex;
    gap:13px;
    align-items:center;
}
.header-actions button {
    font-size:11px;
}
.badge {
    display:inline-block;
    padding:5px 9px;
    background:#eef1ed;
    color:#66776b;
    border-radius:6px;
    font-size:10px;
    font-weight:650;
    white-space:nowrap;
}
.badge.success,.badge.applied,.badge.approved,.badge.online {
    color:#246a4a;
    background:#e4f1e6;
}
.badge.error,.badge.failed,.badge.rejected {
    color:#a34242;
    background:#fae8e8;
}
.badge.warning,.badge.pending,.badge.processing,.badge.expired {
    color:#9a6c28;
    background:#fcf1da;
}
.intro {
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin:5px 0 22px;
}
.intro h2 {
    font-size:21px;
    margin-bottom:5px;
}
.intro p {
    font-size:12px;
    margin:0;
}
.cards {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-bottom:24px;
}
.card,.panel {
    background:var(--white);
    border:1px solid var(--line);
    border-radius:12px;
}
.card {
    padding:22px;
}
.card .label {
    font-size:11px;
    color:var(--muted);
    margin-bottom:16px;
    display:block;
}
.card .value {
    font-size:26px;
    font-weight:650;
    letter-spacing:-.8px;
    display:block;
    margin-bottom:10px;
}
.card small {
    font-size:10px;
}
.card.featured {
    background:#1e5546;
    color:white;
    border-color:#1e5546;
}
.card.featured .label,.card.featured small {
    color:#b7d1c3;
}
.panel {
    padding:23px;
    margin-bottom:20px;
    overflow:hidden;
}
.panel-heading {
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center;
    margin-bottom:20px;
}
.panel-heading h2 {
    margin:0;
    font-size:15px;
}
.panel-heading small {
    display:block;
    margin-top:5px;
}
.two-col {
    display:grid;
    grid-template-columns:1.65fr 1fr;
    gap:20px;
}
.toolbar {
    display:flex;
    gap:10px;
    align-items:end;
    flex-wrap:wrap;
    margin-bottom:20px;
}
.toolbar input {
    min-width:170px;
}
.toolbar label {
    margin-top:0;
    font-size:10px;
}
.toolbar button {
    padding:11px 14px;
}
.table-wrap {
    overflow:auto;
}
table {
    border-collapse:collapse;
    width:100%;
    text-align:left;
    font-size:12px;
}
th {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#8b968e;
    padding:12px;
    border-bottom:1px solid var(--line);
    font-weight:600;
    white-space:nowrap;
}
td {
    padding:15px 12px;
    border-bottom:1px solid #edf0eb;
    vertical-align:top;
    line-height:1.6;
}
tr:last-child td {
    border-bottom:0;
}
td small {
    display:block;
    font-size:10px;
}
td .actions {
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}
td button {
    font-size:10px;
    padding:6px 9px;
}
td code {
    font-size:10px;
    word-break:break-all;
}
.empty {
    text-align:center;
    padding:45px 16px;
    color:#929d95;
}
.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:16px;
    border-top:1px solid var(--line);
    font-size:11px;
    color:var(--muted);
}
.pagination div {
    display:flex;
    gap:6px;
}
.pagination button {
    padding:6px 10px;
    font-size:11px;
}
.chart {
    height:190px;
    display:flex;
    align-items:flex-end;
    gap:5px;
    border-bottom:1px solid var(--line);
    margin:24px 0 10px;
    padding-top:12px;
    overflow-x:auto;
}
.chart-column {
    flex:1;
    min-width:20px;
    max-width:65px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:end;
    align-items:center;
    gap:6px;
}
.chart-bar {
    width:70%;
    background:#438169;
    border-radius:4px 4px 0 0;
    min-height:3px;
}
.chart-column small {
    font-size:8px;
    padding-bottom:4px;
}
.metric-row {
    display:flex;
    justify-content:space-between;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:12px;
}
.metric-row:last-child {
    border-bottom:0;
}
.metric-row span {
    color:var(--muted);
}
.note {
    font-size:11px;
    color:var(--muted);
    line-height:1.7;
    margin-bottom:0;
}
.log-message {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    max-width:680px;
    font-family:Consolas,monospace;
    font-size:11px;
}
.log-source {
    font-size:10px;
    color:var(--muted);
}
.feature-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:19px 0;
    border-bottom:1px solid var(--line);
    gap:20px;
}
.feature-row:last-child {
    border:0;
}
.feature-row h3 {
    font-size:13px;
    margin-bottom:6px;
}
.feature-row p {
    font-size:11px;
    margin-bottom:0;
}
.feature-row button {
    font-size:11px;
}
.review-history {
    max-width:310px;
    font-size:11px;
}
.review-history summary {
    cursor:pointer;
    color:var(--green);
    font-size:10px;
}
.review-history p {
    white-space:pre-wrap;
    margin:8px 0;
    font-size:10px;
}
footer {
    display:flex;
    justify-content:space-between;
    margin-top:28px;
    color:#9aa399;
    font-size:9px;
    letter-spacing:.3px;
}
#notice {
    border:1px solid #d7e5d8;
    background:#e9f3e9;
    padding:13px 16px;
    border-radius:8px;
    margin-bottom:18px;
    font-size:12px;
    line-height:1.6;
}
#notice.error {
    background:#fff0eb;
    border-color:#f0d2c8;
    color:#984b3a;
}
.login-shell {
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
}
.login-intro {
    background:#194c3e;
    color:white;
    padding:65px 12%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.login-intro .brand {
    margin-bottom:95px;
}
.login-intro .brand-icon {
    background:#e0eeb9;
    color:#214e3d;
}
.login-intro .brand small {
    color:#b7cdbb;
}
.login-intro .eyebrow {
    color:#abc3ad;
}
.login-intro h1 {
    font-size:62px;
    line-height:1.08;
    letter-spacing:-3px;
    margin:16px 0 25px;
}
.login-intro p {
    color:#b1c9bb;
    max-width:330px;
    font-size:14px;
}
.login-footer {
    color:#92b29f;
    font-size:11px;
    margin-top:80px;
}
.login-form {
    max-width:420px;
    padding:40px;
    width:100%;
    align-self:center;
    justify-self:center;
}
.login-form h2 {
    font-size:27px;
    letter-spacing:-1px;
    margin-top:20px;
}
.login-form p {
    font-size:12px;
}
.login-form input {
    width:100%;
    margin:2px 0 18px;
    font-family:Consolas,monospace;
    font-size:12px;
}
.login-form .primary {
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:14px;
    font-size:12px;
}
.login-form small {
    display:block;
    margin-top:35px;
    line-height:1.6;
}
#login-error,#review-error {
    color:var(--red);
    font-size:12px;
    margin-top:15px;
}
dialog {
    width:min(520px,94vw);
    padding:28px;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--ink);
    box-shadow:0 25px 100px #0d231e30;
}
dialog::backdrop {
    background:#0a211b75;
}
dialog .dialog-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}
dialog h2 {
    margin:0;
}
dialog p {
    font-size:12px;
}
dialog input,dialog textarea {
    width:100%;
}
dialog button.primary {
    width:100%;
}
dialog .dialog-heading button {
    border:0;
    font-size:20px;
    padding:2px 9px;
}
.loading {
    padding:80px;
    text-align:center;
    color:var(--muted);
}
[hidden] {
    display:none!important;
}
@media(min-width:1500px) {
    main {
        padding:40px 60px;
    }
}
@media(max-width:1100px) {
    .workspace {
        grid-template-columns:205px 1fr;
    }
    main {
        padding:28px 24px;
    }
    .cards {
        grid-template-columns:repeat(2,1fr);
    }
    .two-col {
        grid-template-columns:1fr;
    }
    .brand {
        font-size:12px;
    }
    aside {
        padding:25px 12px;
    }
}
@media(max-width:720px) {
    .workspace {
        display:block;
    }
    aside {
        position:static;
        height:auto;
        padding:18px;
        border:0;
        border-bottom:1px solid var(--line);
    }
    aside .brand {
        margin:0 0 18px;
    }
    .sidebar-caption,.sidebar-bottom {
        display:none;
    }
    nav {
        display:flex;
        overflow:auto;
        gap:4px;
    }
    nav button {
        white-space:nowrap;
        padding:9px 12px;
        font-size:11px;
    }
    nav button span {
        display:none;
    }
    main {
        padding:22px 16px;
    }
    header {
        align-items:start;
        gap:10px;
    }
    h1 {
        font-size:24px;
    }
    .header-actions {
        flex-direction:column;
        align-items:end;
        gap:7px;
    }
    .cards {
        gap:10px;
    }
    .card {
        padding:17px;
    }
    .card .value {
        font-size:23px;
    }
    .panel {
        padding:17px;
    }
    .intro {
        display:block;
    }
    .login-shell {
        display:block;
    }
    .login-intro {
        padding:35px;
    }
    .login-intro .brand {
        margin-bottom:35px;
    }
    .login-intro h1 {
        font-size:40px;
    }
    .login-intro p,.login-footer {
        display:none;
    }
    .login-form {
        padding:35px 28px;
        margin:auto;
    }
    .toolbar {
        gap:8px;
    }
    .toolbar input {
        min-width:120px;
    }
    .toolbar label input {
        width:135px;
    }
    footer {
        gap:15px;
        line-height:1.6;
    }
    .eyebrow {
        font-size:8px;
    }
    .log-message {
        min-width:230px;
    }
}
@media(max-width:720px) {
    .sidebar-bottom {
        display:flex;
        margin-top:14px;
        padding-top:12px;
    }
    .sidebar-bottom strong {
        max-width:220px;
    }
    .sidebar-bottom small {
        font-size:10px;
    }
    .intro>.badge {
        align-self:flex-start;
    }
}
.intro>.badge {
    align-self:flex-start;
}

.theme-toggle { position:fixed; top:12px; right:18px; z-index:20; font-size:11px; padding:6px 11px; box-shadow:0 2px 10px #0001; }
aside .brand { margin-bottom:24px; }
nav { overflow-y:auto; min-height:0; padding-right:3px; }
nav button { flex-shrink:0; padding:10px 14px; }
.sidebar-bottom { flex-shrink:0; margin-top:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; margin-bottom:18px; }
.form-grid label { margin:0; min-width:0; }
.form-grid input,.form-grid select,.form-grid textarea { display:block; width:100%; margin-top:8px; }
.duration-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
form[data-form] > label input:not([type=checkbox]), form[data-form] > label textarea { display:block; width:100%; margin:8px 0 16px; }
form[data-form] { margin-top:12px; }
form[data-form] > .primary { margin:12px 0; }
form[data-form] h3, #manage-body > h3 { margin-top:25px; font-size:14px; }
#premium-results { margin-top:22px; }
#manage-dialog { width:min(820px,95vw); max-height:90vh; }
#manage-error { color:var(--red); font-size:12px; margin:12px 0 0; }
#manage-dialog input[type=checkbox] { width:auto; }
#manage-dialog table { table-layout:fixed; }
#manage-dialog td { overflow-wrap:anywhere; }
#manage-dialog .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.header-value { word-break:break-all; font-size:10px; }
.message-preview { white-space:pre-wrap; max-width:450px; max-height:130px; overflow:auto; overflow-wrap:anywhere; }
[data-form=pricing] input { width:150px; }
#content h3 { font-size:14px; }
:root[data-theme=dark] { color-scheme:dark; --ink:#dce9e2; --muted:#9aada3; --green:#4caa85; --green-soft:#203c31; --line:#30433a; --paper:#101b17; --white:#182720; --red:#ff9a92; --amber:#f0c675; }
[data-theme=dark] p,[data-theme=dark] nav button { color:#a9bdb1; }
[data-theme=dark] input,[data-theme=dark] textarea,[data-theme=dark] select { border-color:var(--line); }
[data-theme=dark] td { border-color:var(--line); }
[data-theme=dark] th,[data-theme=dark] footer,[data-theme=dark] .sidebar-caption { color:#91a398; }
[data-theme=dark] .badge { background:#2b3b32; color:#c3d4c7; }
[data-theme=dark] .badge.success,[data-theme=dark] .badge.applied,[data-theme=dark] .badge.approved,[data-theme=dark] .badge.online { background:#20432f; color:#a2e3b7; }
[data-theme=dark] .badge.error,[data-theme=dark] .badge.failed,[data-theme=dark] .badge.rejected { background:#482e2e; color:#ffb5ab; }
[data-theme=dark] .badge.warning,[data-theme=dark] .badge.pending,[data-theme=dark] .badge.processing,[data-theme=dark] .badge.expired { background:#483d25; color:#f6d08f; }
[data-theme=dark] #notice { background:#203d2d; color:#d5ecdc; border-color:#3c664c; }
[data-theme=dark] #notice.error { background:#452a25; color:#ffc4b6; border-color:#764c40; }
[data-theme=dark] .avatar { background:#493f2e; color:#efdab0; }
[data-theme=dark] button.primary { background:#287553; border-color:#287553; }
[data-theme=dark] .login-intro { background:#123b2e; }
[data-theme=dark] .card.featured { background:#215b45; border-color:#356e58; }
[data-theme=dark] .card.featured .label,[data-theme=dark] .card.featured small { color:#c2dbcc; }
[data-theme=dark] .login-intro p { color:#b1c9bb; }
@media(max-width:720px) { nav { overflow-x:auto; overflow-y:hidden; } .theme-toggle { top:10px; right:12px; } .form-grid { grid-template-columns:1fr; } .duration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #manage-dialog { padding:20px; } aside .brand { margin-right:80px; } }

dialog { background:var(--white); }
#manage-body details { margin-bottom:18px; }
#manage-body summary { cursor:pointer; color:var(--green); font-size:12px; font-weight:600; padding:10px 0; }
.badge.empty { padding:5px 9px; }
.nav-group { min-width:0; }
.nav-group h2 { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); font-weight:600; margin:0; padding:12px 12px 6px; }
.nav-group button { width:100%; font-size:12px; padding:9px 14px; margin:2px 0; }
nav { gap:3px; }
.panel > summary { cursor:pointer; font-size:13px; font-weight:600; }
.finance-controls .toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:12px; }
.finance-controls label { margin:0; min-width:0; }
.finance-controls input,.finance-controls select { width:100%; min-width:0; margin-top:6px; }
.finance-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; }
.finance-toolbar > div { display:flex; flex-wrap:wrap; gap:8px; }
.finance-toolbar button { font-size:11px; }
.finance-chart { height:210px; display:flex; overflow-x:auto; gap:5px; padding-top:8px; }
.finance-column { min-width:22px; flex:1; text-align:center; }
.finance-column small { font-size:9px; }
.finance-bars { height:165px; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.finance-bars i { display:block; width:10px; border-radius:3px 3px 0 0; background:var(--green); }
.finance-bars .cost-bar { background:var(--amber); }
.income-dot,.cost-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-left:8px; }
.cost-dot { background:var(--amber); }
#finance-projection { display:grid; gap:8px; font-size:12px; }
#finance-projection strong { font-size:26px; }
.negative { color:var(--red); }
.header-actions { flex-wrap:wrap; justify-content:flex-end; }
#live-toggle { font-size:10px; color:var(--green); }
#live-toggle[aria-pressed=false] { color:var(--muted); }
@media(max-width:1100px) { .finance-controls .toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) {
    .nav-group { display:contents; }
    .nav-group h2 { display:none; }
    .nav-group button { width:auto; }
    .finance-controls .toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .finance-controls .toolbar input { width:100%; min-width:0; }
    .finance-toolbar { align-items:flex-start; flex-direction:column; }
    .header-actions { gap:6px; }
}
.picker-toolbar { display:flex; gap:8px; margin-bottom:14px; }
.picker-toolbar input { flex:1; min-width:0; }
.picker-toolbar select { max-width:180px; }
.user-picker { max-height:380px; overflow:auto; }
.user-picker th { position:sticky; top:0; background:var(--white); z-index:1; }
.user-picker td { padding-top:10px; padding-bottom:10px; }
.user-picker input[type=checkbox] { width:16px; height:16px; accent-color:var(--green); cursor:pointer; }
.picker-pagination,.selection-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; }
.selection-bar { border-top:1px solid var(--line); font-size:12px; }
.selected-users { flex:1; min-width:0; }
.selected-users summary { cursor:pointer; }
#premium-selection-list { max-height:180px; overflow:auto; margin-top:8px; }
#premium-selection-list > div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 0; }
#premium-selection-list span { overflow-wrap:anywhere; }
#premium-selection-list small { color:var(--muted); }
#premium-selection-list button { padding:5px 8px; font-size:10px; }
.manual-targets { margin:6px 0 22px; }
.manual-targets summary,.grant-history summary { cursor:pointer; font-size:12px; color:var(--muted); }
.manual-targets label { display:block; margin-top:12px; }
.manual-targets textarea { width:100%; display:block; margin-top:8px; }
.premium-editor .duration-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.duration-grid input { width:100%; display:block; margin-top:6px; }
.header-row,.header-columns { display:grid; grid-template-columns:minmax(120px,1fr) minmax(150px,2fr) 65px; gap:8px; align-items:center; margin-bottom:8px; }
.header-row input { width:100%; min-width:0; font-family:monospace; font-size:11px; }
.header-row button { padding:8px; font-size:11px; }
.header-row small,.header-columns { color:var(--muted); font-size:10px; }
.header-row input[readonly] { opacity:.65; }
.cookie-editor { display:flex; gap:8px; margin:8px 0 14px; }
.cookie-editor input { flex:1; min-width:0; font-family:monospace; }
.cookie-editor button { flex-shrink:0; }
.editor-footer { display:flex; justify-content:space-between; gap:12px; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
@media(max-width:720px) {
    .picker-toolbar { flex-wrap:wrap; }
    .picker-toolbar input { flex-basis:100%; }
    .picker-toolbar select { flex:1; max-width:none; }
    .premium-editor .duration-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .header-columns { display:none; }
    .header-row { grid-template-columns:minmax(0,1fr) 65px; padding:10px 0; border-bottom:1px solid var(--line); }
    .header-row [data-header-name] { grid-column:1; }
    .header-row [data-header-value] { grid-column:1; grid-row:2; }
    .header-row button,.header-row small { grid-column:2; grid-row:1 / 3; }
}

.finance-advanced { grid-column:1 / -1; }
.finance-advanced > summary { font-size:11px; color:var(--muted); cursor:pointer; padding:5px 0; }
.finance-advanced .form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin:14px 0 0; }
@media(max-width:720px) { .finance-advanced .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .nav-group h2 { display:none; } }