:root{color-scheme:light;--ink:#173430;--muted:#536961;--bg:#f3f6f2;--line:#dce5dd;--green:#24685b;--mint:#8acabb;--white:#fff;font-family:Inter,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:2px solid #237765;outline-offset:3px}
.wrap{width:min(1920px,calc(100% - 72px));margin-inline:auto}.top{background:#173c36;color:#fff}.top-inner{height:66px;display:flex;align-items:center;justify-content:space-between}.top strong{display:flex;align-items:center;gap:12px;font-size:17px}.mark{background:#d7f1df;color:#184c3b;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:24px}.pill{padding:5px 13px;border-radius:30px;background:#2d5149;color:#e3f8ea;font-size:13px}
.intro{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:35px 0 24px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:.16em;color:#37665a;margin:0 0 7px}h1{font-size:clamp(34px,5vw,50px);letter-spacing:-.055em;line-height:1.05;margin:0}h2{font-size:19px;letter-spacing:-.025em;margin:0}.intro p:not(.eyebrow),.muted{color:var(--muted);margin:8px 0 0;font-size:14px}.period,.filters label{display:grid;gap:5px;font-size:12px;font-weight:650;color:var(--muted)}select,input[type=search]{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.metrics,.panels{display:grid;gap:16px;margin-bottom:16px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.panels{grid-template-columns:1.45fr 1fr}.metric,.panel{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px 23px;box-shadow:0 2px 4px #18362e05}.metric span{display:block;font-size:13px;font-weight:650;color:var(--muted)}.metric strong{display:block;font-size:clamp(20px,3vw,33px);letter-spacing:-.045em;margin-top:8px;font-variant-numeric:tabular-nums}.metric.balance{background:#e0f3e7;border-color:#c9e6d5}.negative{color:#a03131}
.chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-top:16px}.chart-column{min-width:0;padding:3px 2px 5px;text-align:center;color:var(--muted);font-size:clamp(8px,1vw,11px);border-radius:5px}.chart-column.selected{background:#e5f3e9;color:var(--ink);font-weight:700}.plot{height:128px;position:relative;margin-bottom:6px;background:repeating-linear-gradient(to top,transparent 0,transparent 31px,#edf2ee 31px,#edf2ee 32px)}.plot::after{content:"";position:absolute;bottom:var(--zero);width:100%;left:0;border-top:1px solid #b4c7bd}.bar{position:absolute;width:38%;border-radius:4px 4px 0 0}.bar.income{left:8%;background:var(--green)}.bar.expenses{right:8%;background:var(--mint)}.legend{display:flex;justify-content:center;gap:18px;font-size:12px;color:var(--muted);margin-top:7px}.legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--green);margin-right:5px}.legend .expenses::before{background:var(--mint)}#mix{margin-top:13px;display:grid;gap:9px}.mix-label{display:flex;justify-content:space-between;gap:10px;font-size:12px}.mix-label strong{font-variant-numeric:tabular-nums}.track{height:6px;background:#eef3ef;border-radius:10px;overflow:hidden;margin-top:4px}.track div{height:100%;border-radius:inherit}
.ledger{padding-bottom:15px}.ledger-head,.filters{display:flex;align-items:center;justify-content:space-between;gap:12px}.ledger-head button{border:0;border-radius:9px;background:var(--green);color:#fff;padding:10px 15px;font-weight:650;font-size:13px;white-space:nowrap}nav{display:flex;gap:5px;overflow-x:auto;margin-top:17px;border-bottom:1px solid var(--line)}nav button{white-space:nowrap;background:none;border:0;border-bottom:2px solid transparent;padding:10px 13px;color:var(--muted);font-weight:650;font-size:13px}nav button[aria-pressed=true]{border-color:var(--green);color:#174f40;background:#edf7f0;border-radius:8px 8px 0 0}.filters{margin:12px 0}.filters input{width:min(260px,100%);font-size:13px}#status{font-size:12px;color:var(--muted);text-align:right}.table-scroll{overflow:auto;max-height:55vh;border:1px solid var(--line);border-radius:10px}table{border-collapse:separate;border-spacing:0;width:100%;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}thead{position:sticky;top:0;z-index:2}th,td{padding:8px;border-bottom:1px solid #edf1ed;text-align:right}thead th{background:#edf3ed;color:#36594f}th:first-child{position:sticky;left:0;text-align:left;min-width:148px;max-width:225px;white-space:normal;overflow-wrap:anywhere;background:#fff;box-shadow:1px 0 var(--line)}thead th:first-child{background:#edf3ed}tbody th{font-weight:600}td.detail{text-align:left;color:var(--muted)}td.editable{padding:3px}td input{width:83px;padding:5px 4px;border:1px solid transparent;border-radius:5px;text-align:right;background:transparent;color:var(--ink)}td input:hover,td input:focus{background:#edf7f0;border-color:#b2d2c2}td input[aria-invalid=true]{border-color:#aa3c3c;background:#ffeaea}.subtotal td,.subtotal th{background:#e8f2e9;font-weight:700}.annual{font-weight:700}.empty{text-align:left}footer{font-size:12px;color:var(--muted);padding:19px 0 30px}
@media(max-width:820px){.wrap{width:calc(100% - 32px)}.panels{grid-template-columns:1fr}.metric,.panel{padding:15px}.intro{padding-top:25px}}
@media(max-width:530px){.intro{align-items:start;flex-direction:column}.metrics{gap:6px}.metric{padding:10px 6px}.metric span{font-size:11px}.metric strong{font-size:clamp(11px,3.6vw,18px)}.ledger-head{align-items:start;flex-direction:column}.plot{height:98px}th:first-child{min-width:104px;max-width:140px}.filters input{width:100%}}

[hidden]{display:none!important}
th[aria-haspopup]{cursor:context-menu}
.entry-menu{position:fixed;z-index:5;min-width:155px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 25px #15382e30}
.entry-menu button{display:block;width:100%;border:0;background:#fff;text-align:left;padding:8px 11px;border-radius:6px;color:var(--ink)}
.entry-menu button:hover:not(:disabled),.entry-menu button:focus-visible{background:#edf7f0}
.entry-menu button[data-action=delete]{color:#a03131}
#entry-dialog,#year-dialog{width:min(540px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}
#entry-dialog::backdrop,#year-dialog::backdrop{background:#17343080}
.entry-fields,#entry-months{display:grid;gap:10px}
.entry-fields{margin:14px 0}
#entry-months{grid-template-columns:repeat(4,minmax(0,1fr))}
#entry-form label,#entry-form legend{font-size:12px;font-weight:650;color:var(--muted)}
#entry-form label{display:grid;gap:4px}
#entry-form input,#entry-form select{width:100%;min-width:0;padding:7px 8px;border:1px solid var(--line);border-radius:7px;color:var(--ink);background:white}
#entry-form fieldset{margin:0;border:1px solid var(--line);border-radius:9px}
#entry-error,#year-error{color:#a03131;font-size:13px}
#entry-error:empty,#year-error:empty{display:none}
.entry-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}
.entry-actions button{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:#fff;color:var(--ink)}
.entry-actions button[type=submit]{background:var(--green);color:#fff;border-color:var(--green)}
@media(max-width:410px){#entry-months{grid-template-columns:repeat(3,minmax(0,1fr))}}

.period-closed{--period:#f1f3f6;--period-head:#e1e7ef;--period-border:#c2ccd9}
.period-current{--period:#e3f5e8;--period-head:#c5e8cf;--period-border:#72ae87}
.period-future{--period:#fff5dc;--period-head:#f6e6b8;--period-border:#cfab59}
td[class*="period-"]{background-color:var(--period)}
thead th[class*="period-"]{background-color:var(--period-head);text-align:center}
th[class*="period-"],td[class*="period-"]{border-left:1px solid var(--period-border)}
thead th.period-current,td.period-current{border-inline:2px solid var(--period-border)}
.period-current + .period-future{border-left:0}
td.forecast{color:#6b521d}
#entry-form input:disabled{background:#fff5dc;color:#6b521d;opacity:1}

#year-form label{font-size:12px;font-weight:650;color:var(--muted)}
#new-year{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}

.ledger-actions{display:flex;flex-wrap:wrap;gap:8px}
#bank-open,#statement-open{background:#edf7f0;color:#174f40;border:1px solid #b2d2c2}
#statement-dialog{width:min(980px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}
#statement-dialog::backdrop{background:#17343080}
#statement-setup{max-width:540px}
#statement-setup label{display:grid;gap:4px;font-size:13px;font-weight:650;color:var(--muted)}
#statement-setup input,#statement-review input:not([type=checkbox]){border:1px solid var(--line);border-radius:7px;padding:6px 8px;color:var(--ink);background:white}
.statement-table{max-height:48vh;overflow:auto;margin:10px 0;border:1px solid var(--line);border-radius:8px}
.statement-table th,.statement-table td{text-align:left;position:static;box-shadow:none}
.statement-table tbody th{white-space:normal}
.statement-parts{display:grid;grid-template-columns:auto 57px auto 57px;align-items:center;gap:5px}
.statement-parts input{width:57px}
#statement-error,#statement-unmatched{color:#a03131;font-size:13px}
#statement-error:empty,#statement-unmatched:empty{display:none}

.statement-classification{display:flex;align-items:center;gap:6px}
.statement-classification select{min-width:130px;max-width:220px;padding:6px 8px}
.statement-classification button{padding:5px 8px;background:#edf7f0;color:#174f40;border:1px solid #b2d2c2;border-radius:7px}
#statement-class-dialog{width:min(430px,calc(100% - 24px));border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}
#statement-class-dialog::backdrop{background:#17343080}
#statement-class-name{padding:8px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}

.statement-balance{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:10px}
.statement-balance>*{display:grid;gap:5px;min-width:145px;padding:9px 12px;border:1px solid var(--line);border-radius:8px}
.statement-balance input,#statement-extracted-rows input:not([type=checkbox]){padding:5px 8px;border:1px solid var(--line);border-radius:6px;width:125px;color:var(--ink)}
#statement-balance-message{font-weight:650;font-size:13px}

#statement-unmatched{color:var(--green)}

#statement-form > .entry-actions{position:sticky;bottom:-22px;padding:10px 0 4px;background:#fff;border-top:1px solid var(--line);z-index:3}

.card-purchase th[scope=row]{padding-left:21px;font-weight:500}
.launch-note{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:400}

.card-details-button{display:block;margin-top:5px;padding:3px 6px;border:1px solid #b2d2c2;border-radius:6px;background:#fff;color:var(--green);font-size:11px;font-weight:650;text-align:left}
#card-details{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
#card-details-title{font-size:16px;margin:0 0 10px}
#card-details-empty{margin-bottom:8px}

.card-account th[scope=row]{padding-left:21px;font-weight:500}
#grid.cards-summary .card-account td[class*="period-"]{background-color:var(--white);border-inline:0;border-left:1px solid var(--line)}

#card-edit-dialog{width:min(450px,calc(100% - 24px));border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}
#card-edit-dialog::backdrop{background:#17343080}
#card-edit-form label{display:grid;gap:4px;font-size:13px;font-weight:650;color:var(--muted)}
#card-edit-form input{width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}
#card-edit-error{color:#a03131;font-size:13px}
#card-edit-error:empty{display:none}

.statement-manual-match{display:grid;gap:5px;margin-bottom:7px;white-space:normal}
.statement-manual-match label{font-weight:650}
.statement-manual-match select{max-width:260px}
.statement-manual-match small{color:var(--muted)}

.mix-edit{border:0;background:none;padding:0;color:inherit;text-align:left}
.mix-edit:hover{text-decoration:underline}

.mix-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.mix-heading .period{margin-left:auto}

#grid tbody th:first-child,#card-detail-grid tbody th:first-child{z-index:1}
#grid .classification-heading,#card-detail-grid .classification-heading,
#grid td.detail,#card-detail-grid td.detail{position:sticky;left:var(--launch-width,0px);z-index:1;box-shadow:1px 0 var(--line)}
#grid td.detail,#card-detail-grid td.detail{background:#fff}
#grid .subtotal td.detail,#card-detail-grid .subtotal td.detail{background:#e8f2e9}

#grid thead{z-index:5}
#grid .frozen-total>th,#grid .frozen-total>td{position:sticky;top:var(--total-top);z-index:2}
#grid .frozen-total>th:first-child,#grid .frozen-total>td.detail{z-index:3}

.mix-total{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-weight:650}

#realization-dialog{width:min(560px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}
#realization-dialog::backdrop{background:#17343080}
#realization-rows{max-height:45vh;overflow:auto}
#realization-rows label{display:grid;gap:4px;font-size:13px;font-weight:650;color:var(--muted)}
#realization-rows input{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}
#realization-error{color:#a03131;font-size:13px}
#realization-error:empty{display:none}

#grid .estimated-value,#card-detail-grid .estimated-value,#entry-form .estimated-value,#realization-form .estimated-value{color:#337db4}
.estimated-value::placeholder{color:#337db4;opacity:1}

#quick-edit-dialog{width:min(400px,calc(100% - 24px));border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}
#quick-edit-dialog::backdrop{background:#17343080}
#quick-edit-form label{display:grid;gap:4px;font-size:13px;font-weight:650;color:var(--muted)}
#quick-edit-value{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}
#quick-edit-error{color:#a03131;font-size:13px}
#quick-edit-error:empty{display:none}

.monthly-card-details{margin:4px 0 0 auto;white-space:nowrap}

#card-detail-grid{width:max-content;max-width:100%}
#card-detail-grid th,#card-detail-grid td{padding-inline:10px}
#card-detail-grid th:first-child{min-width:0;max-width:210px}
#card-detail-grid thead th{text-align:center}
#card-detail-grid .parcel-value{text-align:center}
#card-detail-grid td.editable input{width:80px}

#card-detail-grid .parcel-heading,#card-detail-grid .parcel-value{position:sticky;left:var(--launch-width,0px);z-index:1}
#card-detail-grid .parcel-value{background:#fff}
#card-detail-grid .classification-heading,#card-detail-grid td.detail{left:calc(var(--launch-width,0px) + var(--parcel-width,0px))}

#card-search-results{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px}
#card-search-title{font-size:14px;margin:0 0 6px}
#card-search-list{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto}
.card-search-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:5px 0;font-size:12px}
.card-search-row + .card-search-row{border-top:1px solid var(--line)}
.card-search-row small{display:block;color:var(--muted)}

.ledger-head{align-items:flex-start}
.ledger-toolbar{display:grid;gap:6px;flex-shrink:0}
.ledger-toolbar .ledger-actions{justify-content:flex-end}
.ledger-toolbar .ledger-primary{flex-wrap:nowrap}
.ledger-toolbar .ledger-secondary{min-height:36px}
@media(max-width:530px){.ledger-toolbar{width:100%}}

#save-confirm-dialog{width:min(440px,calc(100% - 24px));border:1px solid var(--line);border-radius:16px;padding:22px;margin:auto;color:var(--ink)}
#save-confirm-dialog::backdrop{background:#17343080}
#save-confirm-message{line-height:1.5;overflow-wrap:anywhere}

#save-confirm-field{display:grid;gap:4px;font-size:13px;font-weight:650;color:var(--muted)}
#save-confirm-input{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}

#grid{--value-width:110px;--launch-column:148px;--category-column:132px;--share-width:60px;table-layout:fixed;width:calc(13 * var(--value-width) + var(--launch-column) + var(--category-column) + var(--share-width))}
#grid.without-classification{--category-column:0px}
#grid thead th:first-child{width:var(--launch-column)}
#grid thead .classification-heading{width:var(--category-column)}
#grid thead .amount-heading{width:var(--value-width)}
#grid thead .share-column{width:var(--share-width)}
#grid .share-column{color:#800020}
#grid td.detail{overflow-wrap:anywhere;white-space:normal}
@media(max-width:530px){#grid{--launch-column:104px;--category-column:108px}#grid.without-classification{--category-column:0px}}

.card-accounts-toggle{white-space:normal}

#grid.cards-summary thead th:first-child{text-align:center}

#grid.cards-summary [data-total-value]{font-weight:400}
#grid.cards-summary .ledger-totals>td,#grid.cards-summary .share-column,#grid.cards-summary .annual{font-weight:700}

#grid .annual{border-inline:1px solid #a6b8af}

#grid td.annual{background:#edf4ee}
#grid td.share-column{background:#faf0f3}
#grid thead th.annual,#grid thead th.share-column{text-align:center}
#grid thead th.annual{background:#d6e5da}
#grid thead th.share-column{background:#eed7df}

#bank-dialog{width:min(1080px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}
#bank-dialog::backdrop{background:#17343080}
#bank-form label{display:grid;gap:4px;color:var(--muted);font-weight:650}
#bank-form input:not([type=checkbox]),#bank-form select{border:1px solid var(--line);border-radius:7px;padding:6px 8px;color:var(--ink)}
.bank-category{display:grid;gap:5px}
#bank-error{color:#a03131;font-size:13px}
#bank-error:empty{display:none}

#grid.variables-summary thead th:first-child{text-align:center}

.statement-table .bulk-import,#bank-form .bulk-import{display:flex;align-items:center;gap:4px;white-space:nowrap}

#bank-registered-dialog{width:min(570px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid var(--line);border-radius:16px;padding:22px;color:var(--ink)}
#bank-registered-dialog::backdrop{background:#17343080}
#bank-registered-rows{max-height:50vh;overflow:auto}
#bank-registered-rows label{display:grid;gap:4px;font-size:13px;font-weight:650}
#bank-registered-rows small{color:var(--muted);font-weight:400}
#grid [data-total="income"],#grid [data-total="balance"]{color:#185fa5}
#grid [data-total="expenses"],#grid [data-total="balance"].negative{color:#a03131}
#grid [data-total="income"],#grid [data-total="expenses"]{font-weight:400}
#grid [data-total="balance"]{font-weight:700}
#grid.summary-tab{--share-width:0px}

#grid thead th[rowspan="2"]{text-align:center;vertical-align:middle;background-color:#e8f2e9;border-bottom:3px solid #9aafa5}
#grid .ledger-totals>td{border-bottom:3px solid #9aafa5}
#grid.variables-summary tbody th[scope="row"]{background-color:#e8f2e9}
#grid.classification-totals tbody td.detail{text-align:center;vertical-align:middle}
#grid.classification-totals .classification-heading,#grid.classification-totals tbody td.detail{border-left:1px solid #c2ccd9}
#grid.classification-totals .ledger-totals>td[data-total="income"]{color:inherit;font-weight:700}
dialog label.statement-file-picker{display:grid;gap:6px;min-width:0}
dialog .statement-file-picker input[type="file"]{width:100%;min-width:0;padding:6px;border-radius:10px;background:#f3f7f3;color:var(--muted);cursor:pointer}
dialog .statement-file-picker input::file-selector-button{margin-inline-end:10px;padding:9px 13px;border:0;border-radius:7px;background:var(--green);color:#fff;font:inherit;font-weight:650;cursor:pointer}
dialog .statement-file-picker input:hover::file-selector-button{background:#174d42}
dialog .statement-file-picker input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
dialog .statement-file-picker small{color:var(--muted);font-weight:400}
.row-drag-handle{display:inline-block;margin-inline-end:6px;color:var(--muted);cursor:grab;font-size:15px;line-height:1;user-select:none}
.row-drag-handle:active{cursor:grabbing}
tr.drop-before>th,tr.drop-before>td{box-shadow:inset 0 2px var(--green)}
tr.drop-after>th,tr.drop-after>td{box-shadow:inset 0 -2px var(--green)}
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 52px);
  background: radial-gradient(ellipse at top left, #d4eadb, transparent 54%), #f2f6f2;
}
.login-panel {
  width: min(100%, 460px);
  padding: clamp(22px, 6vw, 42px);
  background: #fff;
  border: 1px solid #d8e4dc;
  border-radius: 24px;
  box-shadow: 0 24px 65px #173d2e16;
}
.login-brand {display:flex;align-items:center;gap:10px;font-weight:750;color:#245847}
.login-brand .mark {display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e0f0e7;color:#215b48}
.login-heading {margin:25px 0 22px}
.login-heading h1 {margin:0;font-size:clamp(25px, 6vw, 34px);letter-spacing:-.04em;line-height:1.15}
.login-heading p,.login-help,.login-setup p {margin:8px 0 0;color:#4d6259;line-height:1.5}
.login-form {display:grid;gap:15px}
.login-form label {display:grid;gap:6px;font-size:14px;font-weight:650}
.login-form input {width:100%;min-height:46px;padding:9px 12px;border:1px solid #a9bdb1;border-radius:10px;background:#fcfdfc;color:inherit;font:inherit}
.login-form input:focus-visible,.login-action:focus-visible,.login-setup summary:focus-visible {outline:3px solid #317762;outline-offset:2px}
.login-help {margin:-7px 0 0;font-size:13px}
.login-action {display:block;width:100%;padding:12px 16px;border:0;border-radius:10px;background:#215b48;color:#fff;text-align:center;text-decoration:none;font:inherit;font-weight:750;cursor:pointer}
.login-action:hover {background:#174635}
.login-alert,.login-setup {margin:0 0 18px;padding:13px;border-radius:12px;overflow-wrap:anywhere}
.login-alert {background:#fff0ed;color:#8c3024;border:1px solid #f1c6bf}
.login-setup {background:#eef6f0;border:1px solid #d6e6dc;font-size:14px}
.login-setup h2 {margin:0;font-size:16px}
.login-qr {display:block;width:180px;height:180px;max-width:100%;margin:10px auto;background:#fff}
.login-recovery {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));gap:8px;list-style:none;margin:0 0 18px;padding:0}
.login-recovery li {padding:8px;text-align:center;background:#eef6f0;border-radius:8px;overflow-wrap:anywhere}
.account-controls{display:flex;align-items:center;gap:12px}
.logout-button{background:transparent;color:inherit;border:1px solid currentColor;border-radius:7px;padding:5px 10px;cursor:pointer}
.mix-label .mix-edit{margin-inline-end:auto}
.mix-row.drop-before{box-shadow:0 -2px var(--green)}
.mix-row.drop-after{box-shadow:0 2px var(--green)}