:root{
    --ink:#211910;
    --muted:#74685c;
    --paper:#f7f2e9;
    --card:#fffdf9;
    --line:#e5dacb;
    --brown:#6d3e18;
    --brown-dark:#3d2411;
    --gold:#c47d13;
    --green:#17825d;
    --red:#b84d45;
    --shadow:0 14px 40px rgba(55,34,16,.09);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans Thai",system-ui,sans-serif;padding-bottom:108px}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.radio-topbar{height:74px;padding:0 max(22px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.08)}
.radio-brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}.radio-brand img{width:43px;height:43px;object-fit:contain}.radio-brand span{display:flex;flex-direction:column;line-height:1.15}.radio-brand strong{font-size:16px}.radio-brand small{margin-top:4px;color:#d9c7b3;font-size:10px}
.radio-nav{display:flex;align-items:center;gap:6px}.radio-nav a,.share-button{padding:9px 11px;border:0;border-radius:9px;background:transparent;color:#f9f1e6;text-decoration:none;font-size:12px;font-weight:600;cursor:pointer}.radio-nav a:hover,.share-button:hover{background:rgba(255,255,255,.1)}.share-button{border:1px solid rgba(255,255,255,.24)}
.radio-shell{width:min(1180px,calc(100% - 28px));margin:22px auto 36px}
.radio-hero{min-height:210px;display:flex;align-items:center;justify-content:space-between;padding:34px 40px;border-radius:25px;background:radial-gradient(circle at 82% 25%,rgba(255,190,64,.26),transparent 34%),linear-gradient(135deg,#3b2413 0%,#70451e 58%,#9a5d1a 100%);color:#fff;overflow:hidden;box-shadow:var(--shadow)}
.eyebrow{margin:0 0 8px;color:#f8c875;font-size:11px;letter-spacing:.12em;font-weight:800}.radio-hero h1{margin:0;font-size:clamp(30px,4vw,52px);line-height:1.08}.radio-hero p:not(.eyebrow){max-width:650px;margin:13px 0 0;color:#f1dfca;font-size:15px}
.hero-signal{position:relative;width:156px;height:156px;flex:0 0 156px;display:grid;place-items:center}.hero-signal span{position:absolute;border:1px solid rgba(255,224,169,.42);border-radius:50%;animation:pulse 2.6s infinite}.hero-signal span:nth-child(1){width:70px;height:70px}.hero-signal span:nth-child(2){width:110px;height:110px;animation-delay:.4s}.hero-signal span:nth-child(3){width:150px;height:150px;animation-delay:.8s}.hero-signal b{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--brown);font-size:11px;letter-spacing:.08em;z-index:1;box-shadow:0 0 30px rgba(255,255,255,.25)}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.95)}50%{opacity:1;transform:scale(1.04)}}
.radio-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:-24px 22px 20px;position:relative;z-index:2}.radio-summary article{padding:17px 20px;border:1px solid var(--line);border-radius:15px;background:var(--card);box-shadow:0 8px 22px rgba(58,35,15,.08)}.radio-summary span{display:block;color:var(--muted);font-size:11px}.radio-summary strong{display:block;margin-top:5px;color:var(--brown);font-size:26px;line-height:1}
.radio-toolbar{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:18px}.search-box{display:flex;align-items:center;gap:9px;height:49px;padding:0 15px;border:1px solid var(--line);border-radius:13px;background:#fff}.search-box span{font-size:23px;color:var(--muted)}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}.playable-toggle{height:49px;padding:0 17px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--brown);font-size:12px;font-weight:700;cursor:pointer}.playable-toggle input{accent-color:var(--brown);width:17px;height:17px}
.province-filter{display:flex;gap:7px;margin:13px 0 20px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}.province-filter button{flex:0 0 auto;padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}.province-filter button:hover,.province-filter button.is-active{border-color:var(--brown);background:var(--brown);color:#fff}
.radio-content{padding:23px;border:1px solid var(--line);border-radius:20px;background:rgba(255,253,249,.84);box-shadow:var(--shadow)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:17px}.section-heading p{margin:0;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.08em}.section-heading h2{margin:2px 0 0;font-size:20px}.section-heading small{color:var(--muted);font-size:10px}
.station-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.station-card{position:relative;display:grid;grid-template-columns:62px 1fr;gap:13px;padding:15px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:.18s ease;overflow:hidden}.station-card:hover{transform:translateY(-2px);border-color:#cda77b;box-shadow:0 10px 25px rgba(78,47,18,.08)}.station-card.is-playing{border-color:var(--green);box-shadow:0 0 0 2px rgba(23,130,93,.1)}.station-image{width:62px;height:62px;border-radius:13px;border:1px solid #eee4d7;background:#f5eee4;object-fit:contain}.station-copy{min-width:0}.station-name{display:block;margin-right:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.station-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;color:var(--muted);font-size:10px}.station-frequency{color:var(--brown);font-weight:800}.status-pill{position:absolute;right:12px;top:12px;padding:4px 7px;border-radius:999px;background:#eeeae5;color:#756b62;font-size:9px;font-weight:800}.status-pill.online{background:#e4f5ed;color:var(--green)}.status-pill.offline{background:#f9e8e6;color:var(--red)}.status-pill.missing{background:#eeeae5;color:#8a8178}
.station-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr auto auto;gap:7px;margin-top:1px}.station-actions button,.station-actions a{height:35px;padding:0 11px;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:10px;font-weight:800;text-decoration:none}.listen-button{border:0;background:var(--brown);color:#fff;cursor:pointer}.listen-button:hover{background:var(--brown-dark)}.listen-button:disabled{background:#d2c9bf;color:#81786f;cursor:not-allowed}.station-detail{border:1px solid var(--line);background:#fff;color:var(--brown)}.station-share{border:1px solid var(--line);background:#fff;color:var(--brown);cursor:pointer}
.radio-loading{min-height:230px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;color:var(--muted)}.radio-loading span{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:load .9s infinite alternate}.radio-loading span:nth-child(2){animation-delay:.2s}.radio-loading span:nth-child(3){animation-delay:.4s}.radio-loading p{flex-basis:100%;margin:0;text-align:center;font-size:12px}@keyframes load{to{transform:translateY(-9px);opacity:.4}}
.radio-error,.empty-state{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.radio-error strong,.empty-state strong{color:var(--ink);font-size:16px}.radio-error p,.empty-state p{margin:5px 0 13px;font-size:11px}.radio-error button{padding:8px 14px;border:0;border-radius:8px;background:var(--brown);color:#fff;font-weight:700;cursor:pointer}.empty-state span{font-size:38px;margin-bottom:8px}
.radio-note{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:17px 20px;border:1px dashed #cfb692;border-radius:14px;color:var(--muted);font-size:11px}.radio-note strong{color:var(--brown);font-size:12px}.radio-footer{width:min(1180px,calc(100% - 28px));margin:0 auto 25px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
.radio-player{position:fixed;left:50%;bottom:14px;z-index:300;width:min(940px,calc(100% - 22px));transform:translateX(-50%);display:grid;grid-template-columns:54px minmax(0,1fr) 46px auto auto auto 34px;align-items:center;gap:11px;padding:10px 12px;border:1px solid rgba(255,255,255,.15);border-radius:17px;background:rgba(33,25,16,.97);color:#fff;box-shadow:0 18px 48px rgba(28,17,8,.32);backdrop-filter:blur(12px)}.radio-player[hidden]{display:none}.radio-player img{width:54px;height:54px;border-radius:12px;background:#fff;object-fit:contain}.player-copy{min-width:0}.player-copy small{display:block;color:#e4b96f;font-size:9px}.player-copy strong,.player-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-copy strong{margin-top:2px;font-size:13px}.player-copy span{margin-top:2px;color:#d7c9ba;font-size:10px}.player-main-button{width:46px;height:46px;border:0;border-radius:50%;background:var(--gold);color:#fff;font-size:16px;cursor:pointer}.volume-control{display:flex;align-items:center;gap:6px}.volume-control span{font-size:12px}.volume-control input{width:90px;accent-color:var(--gold)}.player-share,.player-detail{height:35px;padding:0 11px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:transparent;color:#fff;text-decoration:none;font-size:10px;font-weight:700;cursor:pointer}.player-close{width:32px;height:32px;border:0;background:transparent;color:#fff;font-size:21px;cursor:pointer}.toast{position:fixed;left:50%;bottom:102px;z-index:500;transform:translateX(-50%);padding:9px 14px;border-radius:9px;background:#111;color:#fff;font-size:11px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
@media(max-width:900px){.radio-nav a:nth-child(-n+2){display:none}.station-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.radio-player{grid-template-columns:46px minmax(0,1fr) 43px auto 30px}.radio-player img{width:46px;height:46px}.volume-control,.player-detail{display:none}}
@media(max-width:640px){body{padding-bottom:98px}.radio-topbar{height:64px;padding:0 13px}.radio-brand img{width:37px;height:37px}.radio-brand small{display:none}.radio-nav a{display:none}.radio-nav a:nth-child(3){display:block}.radio-hero{min-height:176px;padding:26px 22px}.radio-hero h1{font-size:32px}.radio-hero p:not(.eyebrow){font-size:12px}.hero-signal{display:none}.radio-summary{grid-template-columns:repeat(2,1fr);margin:-17px 10px 16px}.radio-summary article{padding:13px 15px}.radio-summary strong{font-size:22px}.radio-toolbar{grid-template-columns:1fr}.playable-toggle{height:43px}.station-grid{grid-template-columns:1fr}.radio-content{padding:15px}.section-heading{align-items:start}.section-heading small{max-width:120px;text-align:right}.radio-note,.radio-footer{align-items:flex-start;flex-direction:column}.radio-player{bottom:8px;grid-template-columns:44px minmax(0,1fr) 42px 30px;gap:8px;border-radius:14px}.radio-player img{width:44px;height:44px}.player-share,.volume-control,.player-detail{display:none}.player-main-button{width:42px;height:42px}.toast{bottom:88px}}