*{box-sizing:border-box}
.syair-page{min-height:100vh;background:#00021f;color:#eef0ff}
.syair-main{width:100%;padding:24px 14px 54px}
.syair-container{width:min(940px,100%);margin:0 auto;padding:14px;border:2px solid #26349d;border-radius:16px;background:#010338;box-shadow:0 0 0 1px #010554,0 18px 50px rgba(0,1,15,.72)}
.syair-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:14px 14px 20px;border-bottom:1px solid rgba(130,145,255,.2)}
.syair-toolbar>div>span{display:block;margin-bottom:5px;color:#9ca8ff;font-size:.72rem;font-weight:900;letter-spacing:.14em}
.syair-toolbar h1{margin:0;color:#fff;font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.15;letter-spacing:-.035em}
.syair-toolbar label{display:grid;gap:7px;min-width:min(310px,100%)}
.syair-toolbar label>span{color:#b9c1e5;font-size:.78rem;font-weight:800}
.syair-toolbar select{width:100%;min-height:48px;padding:0 42px 0 14px;border:1px solid #5868da;border-radius:9px;background:#010554;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.syair-toolbar select:focus-visible,.syair-card a:focus-visible{outline:3px solid #aeb7ff;outline-offset:3px}
.syair-gallery{display:flex;flex-direction:column;gap:16px;padding:16px 14px 14px}
.syair-card{margin:0;overflow:hidden;border:1px solid rgba(124,140,255,.45);border-radius:10px;background:#00021f;box-shadow:0 10px 28px rgba(0,0,0,.32)}
.syair-card a,.syair-card img{display:block;width:100%}
.syair-card img{height:auto;background:#fff}
.syair-empty{margin:0;padding:32px;border:1px dashed #5261ba;border-radius:10px;background:#00021f;color:#aeb8df;text-align:center}
.syair-guide{margin:16px 14px 14px;padding:clamp(24px,5vw,46px);border:1px solid rgba(124,140,255,.45);border-radius:12px;background:linear-gradient(145deg,#010554,#00021f 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.syair-guide h2,.syair-guide h3,.syair-guide h4{color:#fff;line-height:1.2;letter-spacing:-.035em;text-align:center}
.syair-guide h2{margin:0 0 18px;font-size:clamp(1.45rem,4vw,2.15rem)}
.syair-guide h3{margin:30px 0 15px;font-size:clamp(1.2rem,3vw,1.65rem)}
.syair-guide h4{margin:25px 0 13px;font-size:clamp(1.05rem,2.5vw,1.35rem)}
.syair-guide p{max-width:800px;margin:0 auto 16px;color:#c4cbed;font-size:.94rem;line-height:1.8;text-align:center}
.syair-guide p:last-child{margin-bottom:0}
@media(max-width:720px){.syair-main{padding:8px 6px 32px}.syair-container{padding:5px;border-radius:10px}.syair-toolbar{align-items:stretch;flex-direction:column;gap:15px;padding:13px 9px 15px}.syair-toolbar label{min-width:0}.syair-gallery{gap:8px;padding:8px 4px 4px}.syair-card{border-radius:7px}.syair-guide{margin:12px 4px 4px;padding:22px 14px}.syair-guide p{font-size:.86rem;line-height:1.72}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}