:root{color-scheme:dark;font-family:Inter,"Noto Sans Thai",system-ui,sans-serif;background:#141717;color:#f4f5f5;--cyan:#00b5e6;--muted:#a3aaaa}*{box-sizing:border-box}body{margin:0}a{color:var(--cyan);text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}svg{width:24px;height:24px;flex:none}main{max-width:1180px;margin:auto;padding:32px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:44px}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;color:#fff;letter-spacing:-.6px}.brand small{font-size:10px;letter-spacing:2px;color:var(--muted);margin-left:8px}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:44px;border-radius:12px;background:var(--cyan);color:#fff}.brand-mark svg{width:28px;height:28px}h1{font-size:clamp(26px,4vw,40px);letter-spacing:-1px;margin:12px 0}h2{font-size:24px}p{color:var(--muted);line-height:1.7}.eyebrow{font-size:10px;letter-spacing:2px;color:#7ad7e5;font-weight:600}.create-link,.primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;background:var(--cyan);color:#041f26;border:0;border-radius:10px;font-weight:600}.create-link{background:#252929;color:var(--cyan);font-size:14px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-top:30px}.section-title h2{display:flex;gap:9px;align-items:center}.section-title h2 svg{color:var(--cyan)}.shelf-actions{display:flex;gap:8px}.icon-button{border:0;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:50%}.shelf-actions .icon-button{background:#292d2d}.shorts-shelf{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;scrollbar-width:thin;scrollbar-color:#3a4242 transparent}.short-card{position:relative;flex:0 0 calc((100% - 36px)/4);aspect-ratio:2/3;min-width:170px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#24424a,#182124);scroll-snap-align:start;color:#fff}.short-card video{width:100%;height:100%;object-fit:cover;display:block}.short-card:after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.82));pointer-events:none}.card-duration,.card-play{position:absolute;top:10px;z-index:1;background:#0008;border-radius:5px;padding:3px 6px;font-size:12px}.card-duration{left:10px}.card-play{right:10px;padding:3px;display:flex}.card-play svg{width:19px;height:19px}.card-caption{position:absolute;bottom:17px;left:14px;right:14px;z-index:1}.card-caption strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.4}.card-caption small{display:block;color:#b9c3c3;margin-top:4px}.import-section{border-top:1px solid #343c3c;margin-top:24px;padding-top:30px;max-width:780px}form{padding:24px;border:1px solid #343c3c;background:#1c2121;border-radius:16px}label{display:block;margin:16px 0 8px;color:#dce3e3;font-size:14px}input:not([type=hidden]):not([type=range]):not([type=file]),textarea{width:100%;border:1px solid #414d4d;background:#121818;color:white;border-radius:9px;padding:13px}textarea{resize:vertical}form .primary{margin-top:20px}.error{padding:16px;background:#572b35;border-radius:10px;color:#ffdee5}.empty-state{min-height:45vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;padding:32px}.empty-state h1,.empty-state p{margin:0}.empty-state .brand-mark{height:64px;width:64px}.upload-main{max-width:820px}.drop-zone{padding:32px 20px;border:1px dashed #52737a;border-radius:12px;display:flex;align-items:center;flex-direction:column;gap:12px;background:#17262a;margin-top:0;cursor:pointer}.drop-zone>svg{width:38px;height:38px;color:var(--cyan)}.drop-zone>span{font-size:12px;color:var(--muted)}.drop-zone input{max-width:100%;font-size:13px}.watch-page{background:#090e0f;overflow:hidden}.watch-header{position:absolute;top:0;left:0;width:100%;padding:20px 24px;z-index:5;margin:0;pointer-events:none}.watch-header a{pointer-events:auto}.shorts-stage{height:100dvh;min-height:480px;position:relative;display:flex;justify-content:center;isolation:isolate;overflow:hidden}.ambient{position:absolute;inset:-10%;width:120%;height:120%;filter:blur(65px) brightness(.28);z-index:-2;opacity:.85}.video-frame{height:100%;width:min(56.25dvh,100%);position:relative;background:#000}.video-frame>video{width:100%;height:100%;object-fit:contain;display:block;cursor:pointer}.center-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;background:#0009;backdrop-filter:blur(8px)}.center-play svg{width:36px;height:36px;fill:currentColor}.center-play[hidden]{display:none}.video-caption{position:absolute;bottom:86px;left:18px;right:26px;color:white;text-shadow:0 1px 8px #000;pointer-events:none}.video-caption h1{font-size:17px;line-height:1.4;letter-spacing:0;max-width:100%;overflow-wrap:anywhere}.video-caption .eyebrow{font-size:9px;color:#eee}.video-caption details{pointer-events:auto;background:#0005;border-radius:8px;padding:6px 8px;max-width:90%}.video-caption summary{cursor:pointer;font-size:12px}.video-caption p{color:white;white-space:pre-wrap;max-height:22vh;overflow:auto;font-size:13px;margin:8px 0;overflow-wrap:anywhere}.player-controls{position:absolute;bottom:0;left:0;right:0;padding:12px 14px 20px;display:flex;align-items:center;gap:4px;background:linear-gradient(transparent,#000b)}.player-controls .icon-button{padding:6px}.player-controls svg{width:19px;height:19px}.player-controls #time{font-size:10px;white-space:nowrap;margin-right:auto}.player-controls select{font-size:12px;background:#202525bb;border:0;padding:3px;color:white;border-radius:5px}.player-controls #seek{position:absolute;bottom:5px;left:3%;width:94%;height:5px;accent-color:var(--cyan);cursor:pointer}.social-rail{position:absolute;left:calc(50% + min(28.125dvh,50%) + 12px);bottom:100px;display:flex;flex-direction:column;align-items:center;gap:16px;width:52px}.avatar{width:42px;height:42px;display:grid;place-items:center;font-weight:800;border-radius:50%;background:linear-gradient(140deg,#2ebfcb,#294670);border:2px solid #fff5}.social-button{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;padding:0;color:#fff;font-size:12px;text-align:center}.social-button>svg{background:#414848c9;border-radius:50%;width:40px;height:40px;padding:10px}.social-button[aria-pressed=true]>svg{background:var(--cyan);color:#fff;fill:#ffffff44}.social-button:hover>svg{background:#536464}.social-button.view-count{cursor:default}.clip-nav{position:absolute;right:28px;bottom:44px;display:flex;flex-direction:column;gap:12px;align-items:center}.nav-circle{width:50px;height:50px;background:var(--cyan);display:grid;place-items:center;border-radius:50%;color:#fff}.nav-circle svg{width:30px;height:30px}.nav-circle.disabled{opacity:.25;cursor:default}.clip-nav small{font-size:11px;color:#bdcaca}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#f5f8f8;color:#142125;border-radius:10px;padding:12px 20px;z-index:30;box-shadow:0 6px 30px #0008;max-width:90vw;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:100dvh;width:420px;max-width:100vw;border:0;background:#1b2222;color:#fff;padding:24px;box-shadow:-20px 0 80px #0008}dialog::backdrop{background:#0007}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading h2{margin:0}.muted{font-size:12px;color:var(--muted)}#comment-list{min-height:100px;max-height:42vh;overflow-y:auto;margin:20px 0}.comment{padding:16px 0;border-bottom:1px solid #343c3c;overflow-wrap:anywhere}.comment strong{font-size:14px}.comment p{color:#e4eaea;font-size:14px;white-space:pre-wrap;margin:8px 0}.comment small{font-size:10px;color:var(--muted)}.delete-comment{background:none;border:0;color:#ec8a9d;font-size:12px;margin-left:16px}#comment-form{padding:0;border:0;background:none}#comment-error{color:#ff98ab;font-size:13px}.watch-page>.empty-state{height:100dvh}
@media(min-width:1400px){.social-rail{bottom:120px}.clip-nav{right:6vw}}@media(max-width:800px){main{padding:24px 18px}.short-card{flex-basis:42%}.brand small{display:none}.watch-header{padding:12px 14px}.watch-header .brand{font-size:20px}.watch-header .brand-mark{width:32px;height:34px}.watch-header .create-link{padding:8px 10px}.social-rail{left:auto;right:10px;bottom:122px;gap:12px}.social-button>svg{width:36px;height:36px;padding:8px}.avatar{width:36px;height:36px}.clip-nav{right:12px;bottom:24px;gap:8px}.nav-circle{width:34px;height:34px}.nav-circle svg{width:22px;height:22px}.clip-nav small{display:none}.video-caption{right:65px;bottom:90px}.video-frame{width:100%;max-width:56.25dvh}.player-controls{padding-right:56px}.watch-header{background:linear-gradient(#0008,transparent)}}@media(max-height:640px){.social-rail{gap:7px;bottom:80px}.social-button>svg{height:30px;width:30px;padding:6px}.avatar{display:none}.video-caption .eyebrow{display:none}.watch-header{padding:10px}.video-caption h1{font-size:14px}.watch-header .brand small{display:none}}@media(prefers-reduced-motion:no-preference){.shorts-shelf{scroll-behavior:smooth}.short-card video{transition:transform .3s}.short-card:hover video{transform:scale(1.025)}}