/* The website's Customize dialog, styled after the app's "Color & atmosphere" panel. customize.js sets the --site-*
   values; this maps them onto the design tokens in style.css. */
.site-personalized{--accent:var(--site-accent);--sky:var(--site-sky);--surface:var(--site-surface);--glass:var(--site-glass);--blur:var(--site-blur);--ink:var(--site-ink);--soft:color-mix(in srgb,var(--site-ink) 80%,var(--site-surface));--page-ink:var(--site-page-ink);--page-soft:color-mix(in srgb,var(--site-page-ink) 84%,var(--site-sky))}
.site-still *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
.site-look-dialog{width:min(760px,calc(100% - 24px));max-height:92dvh;padding:28px 30px;overflow:auto;border:1px solid color-mix(in srgb,var(--surface,#d8eef4) 40%,#fff);border-radius:24px;background:linear-gradient(#ffffff26,#fff0 140px),color-mix(in srgb,var(--sky,#103a4b) 82%,#020f16);color:#eefcff;box-shadow:0 28px 100px #001a4a88,inset 0 1px #ffffff55;font:15px/1.65 'Segoe UI',Tahoma,sans-serif}
.site-look-dialog::backdrop{background:#001427a8;backdrop-filter:blur(8px)}
.site-look-dialog>.look-close{float:right;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;font-size:18px}
.site-look-dialog .eyebrow{color:color-mix(in srgb,var(--accent,#66edcf) 60%,#fff)}
.site-look-dialog h2{margin:6px 0 6px;font-size:32px;line-height:1.15;text-shadow:none}
.site-look-dialog>p{margin:0 0 16px;color:#cfe9ef}
.site-look-dialog canvas{display:block;width:100%;height:200px;object-fit:cover;border:1px solid color-mix(in srgb,var(--accent,#66edcf) 40%,#88c6cf);border-radius:16px;box-shadow:inset 0 0 0 4px #98c5d11c}
.look-section{margin:20px 0 8px;font-size:15px;font-weight:700}
.look-section small{font-size:13px;font-weight:500;color:#bcdde5}
.look-palettes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.look-palettes button{position:relative;padding:10px 6px 9px;border-top:3px solid var(--swatch)!important;font-size:13px}
.look-palettes button[aria-pressed=true]{background:var(--aqua);color:#073e54}
.site-look-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.site-look-fields label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.site-look-fields input,.site-look-fields select{max-width:100%;min-width:0;accent-color:var(--accent,#66edcf)}
.site-look-fields select{padding:9px 10px;border:1px solid #85aaba;border-radius:9px;background:linear-gradient(#f7ffff,#d2e7ec);color:#123347}
.site-look-fields input[type=color]{width:100%;height:40px;padding:3px;border:1px solid #8cbbc7;border-radius:9px;background:#e8faff}
.site-look-fields .site-check{flex-direction:row;align-items:center;gap:10px;font-weight:500}
.look-hint{font-size:13px;color:#bcdde5}
.site-look-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.site-look-actions span{display:flex;flex-wrap:wrap;gap:10px}
#site-look-status{min-height:24px;margin:10px 0 0;font-size:14px;color:#cfe9ef}
.site-look-dialog :focus-visible,.site-customize:focus-visible{outline:3px solid #2ad0e0;outline-offset:3px}
.site-look-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.look-palettes button{min-width:0;white-space:normal}
@media(max-width:560px){.site-look-dialog{padding:20px 16px}.site-look-fields{grid-template-columns:minmax(0,1fr)}.look-palettes{grid-template-columns:repeat(2,minmax(0,1fr))}.site-look-dialog canvas{height:150px}}