@font-face{font-family:Lato;src:url('/assets/Lato-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url('/assets/Lato-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root,[data-theme="dark"]{color-scheme:dark;--bg:#212121;--surface:#2f2f2f;--raised:#353535;--text:#f3f3f3;--line:#555;--subtle-line:#424242;--disabled:#b4b4b4;--accent:#7697f5;--accent-text:#111827;--green:#347a65;--green-text:#f1fff9;--green-line:#4e9b82;--red:#e6a4aa;--glass:rgba(33,33,33,.88);--radius:14px}
[data-theme="light"]{color-scheme:light;--bg:#f4f5fa;--surface:#fff;--raised:#eef0f4;--text:#242628;--line:#a4a8af;--subtle-line:#e1e3e6;--disabled:#696d73;--accent:#365ac7;--accent-text:#fff;--green:#d9f2e7;--green-text:#21634f;--green-line:#83c9b1;--red:#a52636;--glass:rgba(244,245,250,.9)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.45 Lato,-apple-system,BlinkMacSystemFont,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:var(--text)}h1,h2,h3,p{margin:0}h1{font-size:28px;letter-spacing:-.6px}h2{font-size:20px;letter-spacing:-.3px}h3{font-size:15px}button:disabled{cursor:default;color:var(--disabled);border-color:var(--subtle-line)}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:active:not(:disabled),.button:active{transform:translateY(1px)}
.studio-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(14px + env(safe-area-inset-top)) 24px 14px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--subtle-line)}.studio-brand{font-weight:700}.studio-brand span{display:block;font-size:12px;font-weight:400}.theme-picker{display:flex;gap:3px;border:1px solid var(--line);padding:3px;margin:0;border-radius:8px}.theme-picker label{position:relative;cursor:pointer}.theme-picker input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.theme-picker span{display:block;padding:6px 12px;border-radius:5px;font-size:13px}.theme-picker input:checked+span{background:var(--text);color:var(--bg)}.theme-picker input:focus-visible+span{outline:2px solid var(--accent)}
.studio-main{max-width:980px;margin:auto;padding:32px 24px 50px}.intro p{margin-top:8px;max-width:600px}.section-links{display:flex;gap:8px 20px;flex-wrap:wrap;margin:24px 0 32px}.section-links a{text-decoration:underline;text-underline-offset:5px;font-size:14px}.catalog-section{scroll-margin-top:110px;margin-bottom:36px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.section-heading p{font-size:13px}.comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.theme-panel{min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--subtle-line);border-radius:18px;padding:16px}.theme-label{display:block;margin-bottom:12px;font-size:12px;font-weight:700}.sample{max-width:393px;margin:auto}.sample-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}.sample-head h3{font-size:24px;letter-spacing:-.4px}.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text)}
.customer{background:var(--surface);border-radius:var(--radius);overflow:hidden;margin-bottom:10px}.customer>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:16px;cursor:pointer;list-style:none}.customer-name{font-size:17px;font-weight:700;flex:1;min-width:0;overflow-wrap:anywhere;letter-spacing:-.2px}.customer[open] .customer-name{font-size:20px}.customer-age{font-size:12px;white-space:nowrap}.chevron{width:16px;height:16px;transition:transform .16s}.customer[open]>summary>.chevron,.order[open]>summary>.chevron{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}.customer-body{padding:0 16px 4px}.address{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:18px}.address .icon{width:17px;height:17px}.action-row{display:flex;align-items:stretch;justify-content:space-between;gap:8px;margin-bottom:14px}.action-row .button{flex-direction:column;gap:6px;min-width:76px;padding:9px 12px;font-size:13px}.button{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;color:var(--text);background:transparent;text-decoration:none;font-weight:700;line-height:1.3;max-width:100%;white-space:normal}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.button.call{background:var(--green);border-color:var(--green-line);color:var(--green-text)}.button.danger{border-color:var(--red);color:var(--red)}.button.danger-solid{background:var(--red);border-color:var(--red);color:var(--bg)}.order>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;font-weight:700;list-style:none}.order p{font-size:14px;line-height:1.55;padding:4px 0 16px}.since{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;width:100%;min-height:42px;background:none;border:0;border-top:1px solid var(--subtle-line);color:var(--text);font-size:12px;text-align:left}.since .icon{width:16px;height:16px}
.menu-group{border-radius:var(--radius);background:var(--surface);overflow:hidden;margin:12px 0 20px}.menu-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:11px 14px;border:0;color:var(--text);background:none;text-align:left}.menu-row+.menu-row:before{content:'';height:1px;position:absolute;top:0;right:0;left:46px;background:var(--subtle-line)}.menu-row .label{flex:1}.menu-row .chevron{transform:rotate(-90deg)}.menu-row:active{background:var(--raised)}.menu-caption{font-size:13px;font-weight:700;padding-left:14px}.switch{position:relative;width:42px;height:26px;border-radius:16px;background:var(--line);flex:none;transition:background .15s}.switch:after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}.menu-row[aria-checked="true"] .switch{background:var(--accent)}.menu-row[aria-checked="true"] .switch:after{transform:translateX(16px)}.profile-search{margin-bottom:18px}.search{position:relative;display:flex;align-items:center;gap:8px}.search input{width:100%;padding-left:36px}.search>.icon{position:absolute;left:10px;width:17px;height:17px}.empty-search{padding:12px 0;font-size:14px}
.state-grid{display:flex;gap:12px;flex-wrap:wrap}.state{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}.state small{font-size:12px}.busy .icon{animation:spin 1s linear infinite}.pressed{box-shadow:inset 0 0 0 2px var(--text)}.state-note{font-size:13px;margin-top:12px}.notice{border:1px solid var(--subtle-line);border-left:3px solid var(--accent);padding:12px;border-radius:8px;margin-top:16px;font-size:14px}.notice.error{border-left-color:var(--red)}.notice.success{border-left-color:var(--green-line)}.notice strong{display:block;margin-bottom:4px}.empty-state{padding:24px 12px;text-align:center;border:1px solid var(--subtle-line);border-radius:14px;margin-top:16px}.empty-state>.icon{width:28px;height:28px;margin-bottom:8px}.empty-state p{margin-top:6px;font-size:13px}.field{display:grid;gap:7px;margin-bottom:18px;font-size:13px;font-weight:700;max-width:320px}.input,select{width:100%;min-height:34px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--surface);color:var(--text);font-size:15px;font-weight:400}.input::placeholder{color:var(--disabled);opacity:1}.input[aria-invalid="true"]{border-color:var(--red)}.field-error{color:var(--red);font-size:13px;font-weight:400}.upload-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.upload-line span{font-size:13px;overflow-wrap:anywhere}.upload-line input{max-width:100%}.form-actions{display:flex;gap:8px;flex-wrap:wrap}.form-status{font-size:13px;margin-top:12px;min-height:20px}.nav-demo{position:relative;border-radius:14px;overflow:hidden;padding:18px 8px 14px;background:linear-gradient(135deg,var(--surface),var(--bg));min-height:150px}.nav-underlay{font-size:14px;padding:0 8px 20px}.tabbar{position:relative;display:flex;align-items:center;gap:2px;padding:5px;border:1px solid var(--line);border-radius:32px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 4px 16px #0001}.tabbar button{flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;border-radius:26px;background:transparent;color:var(--text);padding:6px 2px;font-size:11px}.tabbar button[aria-pressed="true"]{background:var(--raised);font-weight:700}.tabbar .icon{width:21px;height:21px}.nav-state{display:block;margin-top:12px;text-align:center;font-size:12px}.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.swatch i{display:block;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--swatch)}.swatch span{font-size:12px;display:block;margin-top:6px}.foundations{border-top:1px solid var(--subtle-line);padding-top:24px;scroll-margin-top:110px}.foundation-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.foundation-grid p{font-size:14px;margin-top:6px}.version-note{margin-top:28px;font-size:12px}
dialog{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;max-width:440px;width:calc(100% - 32px)}dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.dialog-head h2{font-size:19px}#dialog-content p{margin:12px 0}#dialog-content .button{margin-top:12px}.toast{position:fixed;z-index:50;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--surface);color:var(--text);padding:12px 18px;border:1px solid var(--line);border-radius:10px;max-width:calc(100% - 32px);width:max-content;box-shadow:0 6px 24px #0004;display:none}.toast.visible{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}html[data-mode="dark"] .theme-panel[data-original-theme="light"],html[data-mode="light"] .theme-panel[data-original-theme="dark"]{display:none}html:not([data-mode="both"]) .comparison{grid-template-columns:minmax(0,440px);justify-content:center}html:not([data-mode="both"]) .studio-main{max-width:760px}
@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){.studio-header{padding-inline:16px;gap:8px}.studio-brand{font-size:13px}.studio-brand span{font-size:10px}.theme-picker span{font-size:12px;padding:7px 9px}.both-option{display:none}.studio-main{padding:24px 16px 40px}.intro h1{font-size:24px}.intro p{font-size:13px}.section-heading{align-items:flex-start;flex-direction:column;gap:4px}.theme-panel{padding:12px;border-radius:16px}.comparison{grid-template-columns:1fr;gap:16px}.foundation-grid{grid-template-columns:1fr}.customer>summary{padding:14px 12px}.customer-body{padding-inline:12px}.customer[open] .customer-name{font-size:18px}.action-row .button{min-width:68px;padding-inline:8px}.theme-label{font-size:11px}.sample-head{margin-bottom:12px}.tabbar button{font-size:10px}.tabbar .icon{width:20px;height:20px}.section-links{gap:12px 16px}.studio-header{backdrop-filter:blur(16px)}.dialog-head{align-items:flex-start}.dialog-head .button{font-size:13px}}