/* Shared CSS artwork: the same palette and pattern power the page and its swatches. */
.hb-art{--hb-base:var(--hb-base-light,#f4f5fb);--hb-a:var(--hb-a-light,#dce3f3);--hb-b:var(--hb-b-light,#d6edee);--hb-line:var(--hb-line-light,#dce1ef);--hb-cloud:#ffffffa6;background-color:var(--hb-base);background-repeat:no-repeat;background-size:cover}
html.dark .hb-art{--hb-base:var(--hb-base-dark,#151b2d);--hb-a:var(--hb-a-dark,#303852);--hb-b:var(--hb-b-dark,#23434a);--hb-line:var(--hb-line-dark,#303a4b);--hb-cloud:#ffffff0b}
.hb-art[data-pattern="gradient"]{background-image:linear-gradient(135deg,var(--hb-a),var(--hb-base) 48%,var(--hb-b))}
.hb-art[data-pattern="mesh"]{background-image:radial-gradient(ellipse at 8% 10%,var(--hb-a),transparent 60%),radial-gradient(ellipse at 92% 80%,var(--hb-b),transparent 65%)}
.hb-art[data-pattern="grid"]{background-image:linear-gradient(var(--hb-line) 1px,transparent 1px),linear-gradient(90deg,var(--hb-line) 1px,transparent 1px);background-size:32px 32px;background-repeat:repeat}
.hb-art[data-pattern="dots"]{background-image:radial-gradient(var(--hb-line) 1.4px,transparent 1.6px);background-size:20px 20px;background-repeat:repeat}
.hb-art[data-pattern="stars"]{background-image:radial-gradient(circle,var(--hb-line) 1px,transparent 1.5px),radial-gradient(circle,var(--hb-a) 1.5px,transparent 2px),linear-gradient(155deg,var(--hb-base),var(--hb-b));background-size:34px 34px,91px 91px,cover;background-position:0 0,18px 12px,center;background-repeat:repeat,repeat,no-repeat}
.hb-art[data-pattern="garden"]{background-image:radial-gradient(ellipse 80% 68% at -22% 110%,var(--hb-a) 65%,transparent 65.4%),radial-gradient(ellipse 48% 85% at 108% 105%,var(--hb-b) 63%,transparent 63.4%),radial-gradient(ellipse 40% 65% at 105% -22%,var(--hb-a) 70%,transparent 70.4%),linear-gradient(145deg,var(--hb-base),var(--hb-base),var(--hb-b))}
.hb-art[data-pattern="sky"]{background-image:radial-gradient(ellipse 29% 9% at 13% 35%,var(--hb-cloud) 98%,transparent),radial-gradient(ellipse 16% 12% at 14% 31%,var(--hb-cloud) 98%,transparent),radial-gradient(ellipse 30% 11% at 84% 65%,var(--hb-cloud) 98%,transparent),radial-gradient(ellipse 18% 15% at 82% 61%,var(--hb-cloud) 98%,transparent),linear-gradient(var(--hb-a),var(--hb-base))}
.hb-art[data-pattern="waves"]{background-image:radial-gradient(ellipse 105% 70% at 25% 128%,var(--hb-b) 80%,transparent 80.3%),radial-gradient(ellipse 110% 65% at 90% 108%,var(--hb-a) 80%,transparent 80.3%),linear-gradient(175deg,var(--hb-base),var(--hb-b))}
.hb-art[data-pattern="sunset"]{background-image:radial-gradient(circle at 76% 28%,var(--hb-b) 0 9%,transparent 9.2%),linear-gradient(155deg,transparent 63%,var(--hb-b) 63.2%),linear-gradient(25deg,var(--hb-a) 32%,transparent 32.2%),linear-gradient(var(--hb-base),var(--hb-a))}
.hb-art[data-pattern="geometry"]{background-image:conic-gradient(from 35deg at 6% 90%,var(--hb-a) 0 85deg,transparent 85.3deg),conic-gradient(from 205deg at 92% 15%,var(--hb-b) 0 82deg,transparent 82.3deg),linear-gradient(120deg,var(--hb-base),var(--hb-base))}
.hb-art[data-pattern="mountains"]{background-image:linear-gradient(145deg,transparent 64%,var(--hb-b) 64.2%),linear-gradient(32deg,var(--hb-a) 36%,transparent 36.2%),linear-gradient(158deg,transparent 53%,var(--hb-line) 53.2%),linear-gradient(25deg,var(--hb-b) 23%,transparent 23.2%),linear-gradient(var(--hb-base),var(--hb-base))}
.hb-art[data-pattern="bamboo"]{background-image:radial-gradient(ellipse 28% 7% at 18% 28%,var(--hb-a) 70%,transparent 71%),radial-gradient(ellipse 21% 5% at 78% 60%,var(--hb-b) 70%,transparent 71%),repeating-linear-gradient(90deg,transparent 0 14%,var(--hb-line) 14.2% 14.8%,transparent 15% 32%,var(--hb-a) 32.2% 33%,transparent 33.2% 50%),linear-gradient(120deg,var(--hb-base),var(--hb-b))}
.hb-art[data-pattern="petals"]{background-image:radial-gradient(ellipse 5px 11px at 20px 20px,var(--hb-a) 95%,transparent),radial-gradient(ellipse 11px 5px at 61px 56px,var(--hb-b) 95%,transparent),radial-gradient(ellipse 5px 9px at 94px 103px,var(--hb-line) 95%,transparent),linear-gradient(150deg,var(--hb-base),var(--hb-b));background-size:128px 128px,128px 128px,128px 128px,cover;background-repeat:repeat,repeat,repeat,no-repeat}
.hb-art[data-pattern="aurora"]{background-image:radial-gradient(ellipse 28% 140% at 18% 80%,var(--hb-a),transparent 76%),radial-gradient(ellipse 24% 120% at 55% -12%,var(--hb-b),transparent 76%),radial-gradient(ellipse 24% 145% at 88% 92%,var(--hb-a),transparent 74%),linear-gradient(125deg,var(--hb-base),var(--hb-line))}
.hb-art[data-pattern="rain"]{background-image:repeating-linear-gradient(112deg,transparent 0 18px,var(--hb-line) 18px 19px,transparent 19px 36px),radial-gradient(ellipse at 14% 12%,var(--hb-a),transparent 66%),linear-gradient(160deg,var(--hb-base),var(--hb-b))}
.hb-art[data-pattern="dunes"]{background-image:radial-gradient(ellipse 95% 45% at -12% 104%,var(--hb-a) 90%,transparent 90.4%),radial-gradient(ellipse 100% 58% at 104% 113%,var(--hb-b) 90%,transparent 90.4%),radial-gradient(ellipse 95% 50% at 12% 120%,var(--hb-line) 90%,transparent 90.4%),linear-gradient(150deg,var(--hb-base),var(--hb-a))}
.hb-art[data-pattern="campus"]{background-image:url('/assets/images/home-campus-2d-day-v3.jpg');background-position:center}
html.dark .hb-art[data-pattern="campus"]{background-image:url('/assets/images/home-campus-2d-night-v3.jpg')}
html[data-home-background]:not([data-home-background="campus"]){--page-ground:var(--hb-base-light,#f4f5fb)!important}
html.dark[data-home-background]:not([data-home-background="campus"]){--page-ground:var(--hb-base-dark,#151b2d)!important}
#home-custom-background{position:fixed;inset:0;min-height:100vh;z-index:0;pointer-events:none;display:none;contain:paint}
@supports(height:100lvh){#home-custom-background{min-height:100lvh}}
html[data-home-background]:not([data-home-background="campus"]) #home-background{display:none!important}
html[data-home-background]:not([data-home-background="campus"]) #home-custom-background{display:block}
html[data-background-motion="off"] #home-background *,html[data-background-motion="off"] #home-background *::before,html[data-background-motion="off"] #home-background *::after,
html[data-home-background]:not([data-home-background="campus"]) #home-background *,html[data-home-background]:not([data-home-background="campus"]) #home-background *::before,html[data-home-background]:not([data-home-background="campus"]) #home-background *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#home-background *,#home-background *::before,#home-background *::after{animation-play-state:paused!important}}

body.home-background-dialog-open{overflow:hidden!important}
#home-background-dialog{--hb-panel:#fff;--hb-panel-soft:#f5f6fb;--hb-text:#20263d;--hb-muted:#5d6780;--hb-border:#dce1ed;--hb-accent:#5546d7;--hb-selected:#f0edff;box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(880px,calc(100% - 32px));max-width:none;height:min(840px,calc(100vh - 32px));height:min(840px,calc(100dvh - 32px));max-height:none;padding:0;border:1px solid var(--hb-border);border-radius:24px;background:var(--hb-panel);color:var(--hb-text);font-family:'Sarabun',sans-serif;box-shadow:0 24px 100px #0f172a40;overflow:hidden}
#home-background-dialog::backdrop{background:#10182780;backdrop-filter:blur(5px)}
html.dark #home-background-dialog{--hb-panel:#171d2e;--hb-panel-soft:#20283d;--hb-text:#f3f4fb;--hb-muted:#b5bfd5;--hb-border:#39435b;--hb-accent:#b6aaff;--hb-selected:#302b50;color-scheme:dark}
#home-background-dialog *{box-sizing:border-box}
#home-background-dialog[open] .hb-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%}
.hb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 28px 18px;border-bottom:1px solid var(--hb-border)}
.hb-eyebrow{display:block;color:var(--hb-accent);font-size:12px;font-weight:700;letter-spacing:.03em;margin-bottom:5px}
.hb-head h2{margin:0;font-size:25px;font-weight:800;line-height:1.4;letter-spacing:-.03em;color:var(--hb-text)}
.hb-head p{margin:5px 0 0;color:var(--hb-muted);font-size:14px;line-height:1.6}
#home-background-dialog button{font:700 14px 'Sarabun',sans-serif;cursor:pointer}
#home-background-dialog button:disabled{opacity:.55;cursor:wait}
#home-background-dialog .hb-close{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid var(--hb-border);border-radius:50%;background:var(--hb-panel-soft);color:var(--hb-text);font:400 26px/1 sans-serif}
.hb-body{padding:20px 28px 24px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#home-background-dialog fieldset{padding:0;margin:0 0 20px;border:0;min-width:0}
#home-background-dialog legend{padding:0;margin:0 0 10px;font-size:15px;font-weight:700;color:var(--hb-text)}
.hb-presets legend small{font-size:12px;font-weight:400;color:var(--hb-muted);margin-left:8px}
.hb-segments{display:flex;gap:5px;max-width:420px;background:var(--hb-panel-soft);padding:4px;border-radius:13px;border:1px solid var(--hb-border)}
.hb-segments label{flex:1;position:relative;cursor:pointer;min-width:0}
.hb-segments span{display:block;padding:9px 12px;min-height:40px;text-align:center;border-radius:9px;font-size:14px;font-weight:700;color:var(--hb-muted)}
.hb-segments input:checked+span{background:var(--hb-panel);color:var(--hb-accent);box-shadow:0 2px 6px #0f172a12}
.hb-segments input,.hb-preset>input{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%)}
.hb-segments label:has(input:focus-visible),.hb-preset:has(input:focus-visible),#home-background-dialog button:focus-visible,#home-background-dialog select:focus-visible,#home-background-dialog input[type="color"]:focus-visible{outline:3px solid var(--hb-accent);outline-offset:3px}
.hb-preview{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:120px;padding:20px;margin-bottom:22px;border:1px solid var(--hb-border);border-radius:16px;overflow:hidden}
#hb-preview-art{position:absolute;inset:0}
.hb-preview-copy{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--hb-panel);padding:10px 14px;border:1px solid var(--hb-border);border-radius:12px;max-width:100%}
.hb-preview-copy>span{font-size:11px;color:var(--hb-muted)}
.hb-preview-copy>strong{font-size:18px;line-height:1.5}
.hb-preview-copy>small{font-size:11px;color:var(--hb-muted);line-height:1.5}
.hb-preview-cards{position:relative;display:flex;gap:7px;opacity:.8}
.hb-preview-cards i{display:block;width:42px;height:50px;background:var(--hb-panel);border:1px solid var(--hb-border);border-radius:10px}
#hb-preset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hb-preset{position:relative;display:flex;flex-direction:column;gap:3px;padding:6px 6px 10px;min-width:0;border:2px solid var(--hb-border);border-radius:14px;background:var(--hb-panel);cursor:pointer}
.hb-preset:hover{border-color:var(--hb-accent)}
.hb-preset:has(input:checked){border-color:var(--hb-accent);background:var(--hb-selected)}
.hb-preset:has(input:checked)::after{content:'✓';position:absolute;top:12px;right:12px;display:grid;place-items:center;width:22px;height:22px;background:#5546d7;border:2px solid #fff;border-radius:50%;color:#fff;font:700 12px/1 sans-serif}
.hb-swatch{display:block;width:100%;height:72px;border-radius:8px;margin-bottom:3px}
.hb-preset strong,.hb-preset small{display:block;padding:0 5px;overflow-wrap:anywhere}
.hb-preset strong{font-size:13px;font-weight:700;line-height:1.5;color:var(--hb-text)}
.hb-preset small{font-size:11px;line-height:1.6;color:var(--hb-muted)}
#hb-custom[hidden]{display:none}
.hb-custom-controls{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px;padding:16px;border-radius:14px;background:var(--hb-panel-soft);border:1px solid var(--hb-border)}
.hb-custom-controls label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;min-width:0}
.hb-custom-controls input,.hb-custom-controls select{min-height:42px;width:100%;border:1px solid var(--hb-border);border-radius:8px;background:var(--hb-panel);color:var(--hb-text);font:400 16px 'Sarabun',sans-serif;padding:5px}
.hb-custom-controls select{padding:6px 10px}
#hb-custom>p{font-size:12px;line-height:1.65;color:var(--hb-muted);margin:8px 0 0}
.hb-motion{display:flex;align-items:flex-start;gap:10px;padding-top:3px;cursor:pointer}
.hb-motion input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:#5546d7}
.hb-motion strong{display:block;font-size:13px;line-height:1.6}
.hb-motion small{display:block;font-size:12px;line-height:1.7;color:var(--hb-muted);margin-top:2px}
.hb-foot{padding:14px 28px 18px;border-top:1px solid var(--hb-border);background:var(--hb-panel)}
#hb-status{font-size:12px;line-height:1.6;color:var(--hb-muted);margin:0 0 10px;min-height:20px}
.hb-actions{display:flex;align-items:center;gap:9px}
.hb-actions button{min-height:42px;padding:9px 17px;border:1px solid var(--hb-border);border-radius:10px;background:var(--hb-panel-soft);color:var(--hb-text)}
.hb-actions .hb-reset{margin-right:auto;background:transparent;color:var(--hb-muted);border-color:transparent;padding-left:0}
.hb-actions .hb-save{background:#5546d7;color:#fff;border-color:#5546d7}
#home-background-notice{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10000;max-width:calc(100% - 28px);padding:12px 18px;border:1px solid #c4b5fd;border-radius:13px;background:#f5f3ff;color:#37306b;box-shadow:0 10px 35px #10182725;font:600 14px/1.5 'Sarabun',sans-serif}
html.dark #home-background-notice{background:#27223e;color:#ede9fe;border-color:#6f639a}
#home-background-notice[hidden]{display:none}
@media(max-width:680px){#hb-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hb-preview-cards{display:none}.hb-head{padding:20px}.hb-body{padding:16px 20px 20px}.hb-foot{padding:12px 20px 16px}}
@media(max-width:480px){#home-background-dialog{width:calc(100% - 16px);height:calc(100vh - 16px);height:calc(100dvh - 16px);border-radius:20px}.hb-head{padding:16px 15px 12px}.hb-head h2{font-size:21px}.hb-head p{font-size:12px}.hb-head{gap:8px}.hb-body{padding:16px 14px}.hb-foot{padding:10px 14px max(12px,env(safe-area-inset-bottom))}#hb-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hb-swatch{height:68px}.hb-preview{min-height:112px;padding:12px}.hb-custom-controls{grid-template-columns:1fr 1fr;padding:12px}.hb-pattern-control{grid-column:1/-1}.hb-actions{flex-wrap:wrap;gap:8px}.hb-actions button{padding:9px 12px}.hb-actions .hb-reset{font-size:12px;padding-right:4px}.hb-segments span{padding:8px}.hb-presets legend small{display:block;margin:3px 0 0}}
@media(max-height:500px){.hb-head{padding:10px 16px}.hb-head p,.hb-eyebrow{display:none}.hb-foot{padding:8px 16px}#hb-status{margin-bottom:5px}.hb-head h2{font-size:20px}}