/* Shared shape and material system. Certificate artwork keeps its own colors. */
:root,[data-palette="rose"]{
 --accent:#A72C65;--accent-hover:#8C2053;--ink:#2D2430;--muted:#746873;
 --line:#E9DEE5;--bg:#FFF9FC;--surface:#FFFFFF;--tint:#FBE5EF;--tint-strong:#F5CCE0;
 --companion:#DEF2F6;--companion-ink:#2D6471;--sidebar:#FFF4F9;--header:#FFFBFD;
 --pink:var(--accent);--rose:var(--tint);--shadow-color:101,40,74;--radius:15px;
 --radius-panel:24px;--radius-modal:28px;--on-accent:#fff;
}
[data-palette="coral"]{
 --accent:#B74030;--accent-hover:#973022;--ink:#382A26;--muted:#7E6B63;
 --line:#EDDED5;--bg:#FFFCF5;--tint:#FFE5DD;--tint-strong:#FFD0BF;
 --companion:#FAEDBA;--companion-ink:#756124;--sidebar:#FFF4ED;--header:#FFFCF7;--shadow-color:121,60,33;
}
[data-palette="lagoon"]{
 --accent:#006F6D;--accent-hover:#005B5A;--ink:#203332;--muted:#617773;
 --line:#D9E8E1;--bg:#F8FCF7;--tint:#D5F2E9;--tint-strong:#AEE4D9;
 --companion:#E6F2A5;--companion-ink:#556621;--sidebar:#EFF9F4;--header:#F8FCF9;--shadow-color:20,90,76;
}
[data-palette="azure"]{
 --accent:#2D51B7;--accent-hover:#213F94;--ink:#263146;--muted:#68758A;
 --line:#DDE4F0;--bg:#F7F9FF;--tint:#E2EAFE;--tint-strong:#C8D8FF;
 --companion:#FFE0C5;--companion-ink:#80542A;--sidebar:#F0F4FF;--header:#FAFBFF;--shadow-color:38,66,133;
}
:root{color:var(--ink);background:var(--bg)}
body{background:var(--bg)}
button,.button{border-color:var(--line);border-radius:var(--radius);color:var(--ink);background:var(--surface);transition:background .18s,box-shadow .18s,transform .18s,border-color .18s}
button:hover,.button:hover{background:var(--tint);border-color:var(--tint-strong)}
button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover,.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
button:active:not(:disabled),.button:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:var(--accent)}
.flat{background:transparent;border-color:transparent}.flat:hover{border-color:transparent}
input,select,textarea{background:var(--surface);border-color:var(--line);border-radius:var(--radius);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input::file-selector-button{border-color:var(--line);border-radius:11px;color:var(--ink)}
.sidebar{background:var(--sidebar);border-color:var(--line)}
.wordmark{padding:2px 10px 28px;letter-spacing:normal}
.wordmark img{display:block;width:156px;max-width:100%;height:auto}
.wordmark span{color:var(--muted);margin-top:13px;font-size:12px}
.mobile-brand{font:inherit;letter-spacing:normal}.mobile-brand img{display:block;width:113px;height:auto}
.nav{gap:7px}.nav button{color:var(--muted);border-radius:16px;min-height:46px}
.nav button:hover{background:var(--tint);color:var(--accent)}
.nav button.active{background:var(--tint);color:var(--accent);box-shadow:inset 0 1px 0 #ffffffc7,0 3px 12px rgba(var(--shadow-color),.055)}
.avatar{background:var(--tint);color:var(--accent);border-radius:13px}
.user-caption,.breadcrumb,.connection,.footnote,.wordmark span,.settings-archive summary{color:var(--muted)}
.breadcrumb>span{color:var(--muted);opacity:.5}
.topbar{background:var(--header);border-color:var(--line)}
.topbar .right{gap:13px}.topbar .icon-button{color:var(--accent);border-radius:50%;background:var(--tint);border:1px solid #ffffffa3}
.topbar .icon-button:hover{background:var(--tint-strong)}
.appearance-trigger .icon{width:19px;height:19px;flex-basis:19px}
.panel,.design-card,.auth-panel{background:var(--surface);border-color:var(--line);border-radius:var(--radius-panel)}
.sale-entry{background:var(--surface);padding:24px;border:1px solid var(--line);border-radius:var(--radius-panel)}
.sale-grid{gap:30px;grid-template-columns:minmax(370px,1fr) minmax(0,1.13fr)}
.sale-entry .field{margin-bottom:21px}
.sale-expiry strong{color:var(--muted)}
.seg,.choices{border-color:var(--line);border-radius:16px;padding:4px;gap:4px;background:var(--bg);overflow:visible}
.seg button,.choices button{border-radius:12px;white-space:nowrap;box-shadow:none;padding:9px 7px}
.seg button+button,.choices button+button{border:0}
.seg button:hover,.choices button:hover{background:var(--tint)}
.seg button.active,.choices button.active{background:var(--surface);color:var(--accent);box-shadow:0 2px 8px rgba(var(--shadow-color),.09),inset 0 0 0 1px var(--line)}
.amount-choices{background:none;border:0;padding:0;gap:8px}
.amount-choices button{border:1px solid var(--line);border-radius:16px;min-height:57px;padding:13px 3px;font-size:16px}
.amount-choices button+button{border:1px solid var(--line)}
.amount-choices button.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 5px 12px rgba(var(--shadow-color),.15)}
.sale-preview{position:relative;background:var(--tint);border:1px solid var(--tint-strong);border-radius:var(--radius-panel);padding:24px}
.preview-heading{color:var(--muted)}
.preview-panel canvas{border-radius:10px;box-shadow:0 12px 28px rgba(var(--shadow-color),.13)}
.preview-note{color:var(--ink)}.preview-note p{color:var(--muted)}
.design-thumb,.editor-preview{background:var(--tint)}
.editor-preview{border-radius:20px}.canvas-slot canvas{border-radius:11px;border-color:var(--line)}
.upload-field{background:var(--bg);border-color:var(--tint-strong);border-radius:16px}
.field-editor{border-color:var(--line);border-radius:13px}
.canvas-slot #editorEmpty,.canvas-slot #editorEmpty span{color:var(--muted)}
.pill{border-radius:9px;padding:5px 8px}
.tablewrap{scrollbar-color:var(--tint-strong) transparent}
th,.format-label,.kpi small,.calendar-week span,.more-menu button>span{color:var(--muted)}
th,td,.detail-stat,.event{border-color:var(--line)}
tbody tr:hover{background:var(--bg)}
.linkbutton{color:var(--accent)}
.filters>button.primary{background:var(--tint);color:var(--accent);border-color:var(--tint-strong)}
.report-table tfoot th,.report-table tfoot td{background:var(--tint);border-color:var(--tint-strong)}
dialog{background:var(--surface);border-radius:var(--radius-modal);border-color:#ffffffb8;box-shadow:0 30px 100px rgba(var(--shadow-color),.23)}
dialog::backdrop{background:#2424384d;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal-head{background:var(--surface);padding:19px 23px;border-color:var(--line)}
.modal-head .icon-button{color:var(--muted);background:var(--bg);border-radius:50%}
.modal-body{scrollbar-color:var(--tint-strong) transparent}
.modal-body::-webkit-scrollbar-thumb{background:var(--tint-strong);border-color:var(--surface)}
.calendar-arrows button{border-radius:50%}
.calendar-presets button{color:var(--accent);background:var(--tint);border-radius:12px}
.calendar-day{border-radius:12px}.calendar-day:hover{background:var(--tint)}
.calendar-day.selected{background:var(--accent);color:#fff}
.calendar-day.in-range{background:var(--tint);color:var(--accent)}
.date-trigger .icon{color:var(--accent)}
.toast{background:var(--ink);border-radius:17px}
summary::marker{color:var(--accent)}
/* Glass belongs to prominent actions and navigation. Text has a stable tint below it. */
.glass-control{position:relative;isolation:isolate;overflow:hidden;background:var(--tint);color:var(--accent);border:1px solid #ffffffb8;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(var(--shadow-color),.12),0 5px 15px rgba(var(--shadow-color),.10);backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35)}
.glass-control:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#ffffff80 0%,#ffffff18 30%,transparent 52%,#ffffff29 100%);pointer-events:none}
.glass-control:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(var(--shadow-color),.1),0 8px 20px rgba(var(--shadow-color),.16)}
button.primary.glass-control,.button.primary.glass-control{background:var(--accent);color:#fff;border-color:color-mix(in srgb,var(--accent) 70%,#fff);box-shadow:inset 0 1px 0 #ffffff75,inset 0 -1px 0 #00000016,0 6px 18px rgba(var(--shadow-color),.20)}
button.primary.glass-control:before,.button.primary.glass-control:before{background:linear-gradient(115deg,#ffffff1a 0%,#ffffff0a 35%,transparent 56%,#ffffff14 100%)}
button.primary.glass-control:hover,.button.primary.glass-control:hover{background:var(--accent-hover)}
.palette-dialog{width:min(540px,calc(100vw - 32px));margin:82px 24px auto auto;max-height:calc(100dvh - 106px)}
.palette-dialog::backdrop{background:#2524350a;backdrop-filter:none;-webkit-backdrop-filter:none}
.appearance-settings{padding:25px 0 29px;border-bottom:1px solid var(--line)}
.appearance-settings>.section-heading{margin-bottom:18px}
.appearance-settings h2{font-size:16px}
.palette-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.palette-option{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;text-align:left;min-width:0;white-space:normal;padding:10px;border:2px solid transparent;border-radius:20px;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.palette-option:hover{background:var(--surface);border-color:var(--tint-strong)}
.palette-option[aria-pressed=true]{border-color:var(--accent);box-shadow:0 4px 16px rgba(var(--shadow-color),.08);background:var(--surface)}
.palette-name{font-size:14px;font-weight:600;margin:13px 4px 3px}
.palette-note{font-size:11px;color:var(--muted);font-weight:400;margin:0 4px 5px}
.palette-sample{display:flex;position:relative;background:var(--sample-surface);border-radius:12px;overflow:hidden;min-height:108px;color:var(--sample-ink)}
.sample-rail{width:28%;background:var(--sample-light);padding:14px 9px;display:flex;flex-direction:column;gap:9px}
.sample-rail i{height:5px;width:75%;border-radius:4px;background:var(--sample-accent);opacity:.25}.sample-rail i:first-child{height:9px;opacity:1;width:50%;margin-bottom:5px}
.sample-content{flex:1;padding:16px 13px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(110deg,var(--sample-surface) 55%,var(--sample-second))}
.sample-line{height:5px;width:70%;border-radius:4px;background:var(--sample-ink);opacity:.55}
.sample-values{height:17px;width:84%;border-radius:7px;background:var(--sample-light);border:1px solid #ffffffb3}
.sample-button{height:23px;width:90%;border-radius:10px;background:linear-gradient(130deg,#ffffff36,transparent),var(--sample-accent);box-shadow:inset 0 1px 0 #ffffff99,0 4px 8px #00000014}
.sample-check{position:absolute;right:7px;top:7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sample-accent);color:var(--sample-on-accent);font-size:12px;visibility:hidden}
.palette-option[aria-pressed=true] .sample-check{visibility:visible}
.palette-dialog .help{margin:16px 0 2px}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){.glass-control:not(.primary){background:color-mix(in srgb,var(--tint) 62%,#ffffff66)}}
@media(min-width:1550px){.sale-grid{gap:38px}.sale-entry{padding:28px}.sale-preview{padding:28px}}
@media(max-width:1150px){.sale-grid{grid-template-columns:minmax(325px,1fr) minmax(0,1fr);gap:22px}.sale-entry{padding:20px}.sale-preview{padding:20px}.wordmark img{width:140px}}
@media(max-width:930px) and (min-width:721px){.sale-grid{grid-template-columns:1fr}.sale-entry,.sale-preview{max-width:none}}
@media(max-width:720px){
 input,select,textarea{font-size:16px}
 .topbar{height:66px;padding:0 20px}.topbar .right{gap:8px}.topbar .connection{display:none}.mobile-brand{display:block}
 .content{padding:24px 18px calc(116px + env(safe-area-inset-bottom))}
 .sale-grid{grid-template-columns:1fr;gap:22px}.sale-entry{padding:19px 17px;border-radius:23px}
 .sale-preview{padding:19px;border-radius:23px}.sale-entry .field{margin-bottom:20px}
 .amount-choices{gap:6px}.amount-choices button{font-size:15px;min-height:54px;border-radius:15px}
 .seg,.choices{border-radius:15px}.seg button,.choices button{border-radius:11px;padding:10px 6px}
 .amount-choices button{border-radius:15px}
 .form-pair{gap:10px}.form-pair .choices button{font-size:12px;padding:10px 5px}
 .mobile-nav{left:14px;right:14px;bottom:calc(10px + env(safe-area-inset-bottom));padding:6px;gap:3px;border:1px solid #ffffffca;border-radius:27px;background:#fffffff2;box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(var(--shadow-color),.16)}
 .mobile-nav button{min-height:53px;border-radius:21px;color:var(--muted);padding:5px;gap:4px}
 .mobile-nav button.active{color:var(--accent);background:var(--tint);box-shadow:inset 0 1px 0 #fff,0 2px 7px rgba(var(--shadow-color),.08)}
 dialog{border-radius:25px}.modal-head{padding:15px 18px}.modal-body{padding:19px}
 .palette-dialog{margin:auto;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.palette-dialog .modal-body{padding:15px}.palette-picker{gap:9px}.palette-option{padding:7px;border-radius:16px}.palette-sample{min-height:88px}
 .palette-name{font-size:12px;margin-top:10px}.palette-note{font-size:11px;line-height:1.4}.sample-content{padding:13px 9px;gap:8px}.sample-rail{padding:12px 7px}
 .sample-button{height:21px}.appearance-settings>.section-heading{align-items:flex-start;gap:12px}
 .appearance-settings .section-heading>.help{font-size:11px;max-width:120px;text-align:right}
 .toast{bottom:calc(95px + env(safe-area-inset-bottom))}
 @supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){.mobile-nav{background:#ffffffb8;backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}}
}
@media(max-width:370px){.content{padding-left:12px;padding-right:12px}.sale-entry{padding:17px 12px}.form-pair{grid-template-columns:1fr}.form-pair .field{margin-bottom:18px}.form-pair .choices button{font-size:13px}.amount-choices button{font-size:14px;min-height:51px}.mobile-nav{left:9px;right:9px}.palette-picker{gap:8px}.palette-name{font-size:11px}.sample-content{padding:13px 7px}.sample-rail{width:23%}}
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){.mobile-nav{background:var(--surface)}}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}button:active:not(:disabled),.button:active{transform:none}}
@media(prefers-reduced-transparency:reduce){.glass-control:not(.primary),.mobile-nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}.glass-control:before{display:none}dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){.glass-control,.mobile-nav{box-shadow:none;border:1px solid ButtonText;background:Canvas}.glass-control:before{display:none}.palette-option[aria-pressed=true]{outline:2px solid Highlight}}

[data-palette="lilac"]{
 --accent:#7045AD;--accent-hover:#59328F;--ink:#32283E;--muted:#766985;
 --line:#E6DDEC;--bg:#FCF9FF;--tint:#EEE3FA;--tint-strong:#DAC4F0;
 --sidebar:#F5EEFC;--header:#FDFBFF;--shadow-color:75,43,108;
}
[data-palette="amber"]{
 --accent:#8D550C;--accent-hover:#754409;--ink:#3B3022;--muted:#7B6D58;
 --line:#EADFCC;--bg:#FFFCF5;--tint:#FBE9C9;--tint-strong:#EFD09A;
 --sidebar:#FCF4E5;--header:#FFFDFA;--shadow-color:105,72,28;
}
[data-palette="velvet"]{
 --accent:#F0A7CC;--accent-hover:#F6BDD9;--ink:#F4ECF2;--muted:#BEB0C2;
 --line:#46394A;--bg:#18151D;--surface:#241F29;--tint:#382C3C;--tint-strong:#63435C;
 --sidebar:#201B25;--header:#1D1922;--shadow-color:0,0,0;--on-accent:#301D2C;
}
[data-palette="midnight"]{
 --accent:#8AD8C8;--accent-hover:#B0E6DA;--ink:#E7F3F1;--muted:#A4BBBD;
 --line:#344A50;--bg:#111E23;--surface:#1A2B30;--tint:#223E41;--tint-strong:#3F6969;
 --sidebar:#15262B;--header:#142329;--shadow-color:0,0,0;--on-accent:#102E2B;
}
[data-theme="dark"]{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
button.primary,.button.primary,button.primary.glass-control,.button.primary.glass-control,.amount-choices button.active,.calendar-day.selected{color:var(--on-accent)}
.toast{color:var(--surface)}
.payment-dialog{width:min(490px,calc(100vw - 24px))}
.import-dialog{width:min(540px,calc(100vw - 24px))}.import-preview-dialog{width:min(780px,calc(100vw - 24px))}
.import-intro{display:grid;gap:16px;margin-bottom:25px}.import-intro p{font-size:14px;line-height:1.6}.import-intro .button{justify-self:start}
.import-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}
.import-summary>div{background:var(--tint);border-radius:16px;padding:15px}.import-summary strong{display:block;font-size:25px}.import-summary span{display:block;font-size:11px;color:var(--muted);margin-top:6px}
.payment-summary{display:flex;flex-direction:column;gap:8px;background:var(--tint);border:1px solid var(--tint-strong);border-radius:20px;padding:22px;margin-bottom:20px}
.payment-summary span{font-size:12px;color:var(--muted);line-height:1.5}
.payment-summary strong{font-size:34px;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.payment-actions{display:flex;gap:10px;margin-top:25px}.payment-actions>*{min-height:47px}.payment-actions>button:first-child{flex:1}.payment-actions>.primary{flex:2}
.calendar-year{display:flex;align-items:center;gap:12px}.calendar-year button{width:36px;padding:5px;min-height:36px;font-size:22px;border:0;background:var(--bg)}
.calendar-year strong{font-size:16px;font-variant-numeric:tabular-nums}
.calendar-jumps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:16px}
.calendar-jumps button{padding:7px 3px;min-height:34px;font-size:12px;background:var(--bg);border-radius:11px}
.calendar-jumps button[aria-pressed=true]{background:var(--tint);border-color:var(--tint-strong);color:var(--accent)}
.calendar-instruction{min-height:34px}
.calendar-selection{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.calendar-selection>div{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;min-width:0}
.calendar-selection span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}.calendar-selection strong{font-size:12px;font-weight:500}
[data-theme="dark"] .nav button.active,[data-theme="dark"] .mobile-nav button.active{box-shadow:inset 0 1px 0 #ffffff12}
[data-theme="dark"] .topbar .icon-button,[data-theme="dark"] dialog{border-color:var(--line)}
[data-theme="dark"] .glass-control:not(.primary){background:color-mix(in srgb,var(--tint) 90%,transparent);border-color:var(--tint-strong);box-shadow:inset 0 1px 0 #ffffff20,0 5px 15px #00000033}
[data-theme="dark"] .glass-control:not(.primary):before{background:linear-gradient(135deg,#ffffff0d,transparent 50%,#ffffff05)}
[data-theme="dark"] dialog::backdrop{background:#00000070}
[data-theme="dark"] .palette-dialog::backdrop{background:#00000020}
[data-theme="dark"] .connection i{background:#8AD8AC}
[data-theme="dark"] input::file-selector-button{background:var(--tint)}
[data-theme="dark"] .pill{color:var(--muted);background:var(--tint)}
[data-theme="dark"] .pill.green{color:#A7D9B7;background:#253C32}
[data-theme="dark"] .pill.amber,[data-theme="dark"] .notice,[data-theme="dark"] .statusbar{color:#EBD09B;background:#413722}
[data-theme="dark"] .error{color:#FFB5B2;background:#462D32}
[data-theme="dark"] .pill.gray{color:var(--muted);background:var(--tint)}
[data-theme="dark"] .mobile-nav{background:color-mix(in srgb,var(--surface) 92%,transparent);border-color:var(--line);box-shadow:inset 0 1px 0 #ffffff12,0 10px 30px #00000050}
@media(max-width:720px){.calendar-selection strong{font-size:11px}.calendar-selection>div{padding:10px}.calendar-jumps{gap:4px}.calendar-jumps button{font-size:11px;min-height:36px}.payment-actions{flex-wrap:wrap}.payment-actions>button{font-size:13px}.payment-actions>.primary{flex-basis:65%}.payment-summary{padding:19px}}
@media(prefers-reduced-transparency:reduce){[data-theme="dark"] .glass-control:not(.primary),[data-theme="dark"] .mobile-nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){.calendar-day.selected,.calendar-jumps button[aria-pressed=true]{outline:2px solid Highlight}[data-theme="dark"] .glass-control,[data-theme="dark"] .mobile-nav{background:Canvas;border-color:ButtonText}}