:root{--bg: var(--tg-theme-bg-color, #17212b);--fg: var(--tg-theme-text-color, #f5f5f5);--hint: var(--tg-theme-hint-color, #8d9aa6);--card: var(--tg-theme-secondary-bg-color, #232e3c);--accent: var(--tg-theme-button-color, #3390ec);--accent-fg: var(--tg-theme-button-text-color, #ffffff);--danger: var(--tg-theme-destructive-text-color, #e05c5c);--radius: 16px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.screen{min-height:100%;display:flex;flex-direction:column;padding:16px;padding-top:calc(16px + var(--tg-safe-area-inset-top, 0px));padding-bottom:calc(16px + var(--tg-safe-area-inset-bottom, 0px));gap:16px}.screen--center{justify-content:center;align-items:center;text-align:center}h1{margin:0;font-size:22px;font-weight:650}h2{margin:0;font-size:18px;font-weight:600}p{margin:0}.hint{color:var(--hint);font-size:14px}.error{color:var(--danger)}.mode-list{display:flex;flex-direction:column;gap:12px;flex:1;justify-content:center}.mode-card{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:100%;text-align:left;background:var(--card);color:inherit;border-radius:var(--radius);padding:20px;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:transform .08s ease,opacity .08s ease}.mode-card:active{transform:scale(.985);opacity:.9}.mode-card__title{font-size:20px;font-weight:650}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:12px;padding:12px 20px;font:inherit;font-weight:600;background:var(--accent);color:var(--accent-fg);cursor:pointer}.btn--ghost{background:transparent;color:var(--hint);font-weight:500}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.list{display:flex;flex-direction:column;gap:8px}.row{display:flex;align-items:center;gap:12px;background:var(--card);border:none;border-radius:12px;padding:14px 16px;color:inherit;font:inherit;text-align:left;width:100%}.row--tap{cursor:pointer}.row--tap:active{opacity:.85}.row--on{outline:2px solid var(--accent)}.row__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.row__title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.check{color:var(--accent);font-weight:700}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:999px;padding:7px 14px;background:var(--card);color:var(--hint);font:inherit;font-size:14px;cursor:pointer}.chip--on{background:var(--accent);color:var(--accent-fg)}.input{width:100%;border:none;border-radius:12px;padding:14px 16px;background:var(--card);color:var(--fg);font:inherit}.input::placeholder{color:var(--hint)}.input:focus{outline:2px solid var(--accent)}.link-box{display:block;background:var(--card);border-radius:12px;padding:14px 16px;font-size:13px;word-break:break-all;color:var(--hint)}.btn:disabled{opacity:.45;cursor:default}.btn--danger{color:var(--danger)}.spacer{flex:1}.file-input{display:none}.bar{height:8px;border-radius:999px;background:var(--card);overflow:hidden}.bar__fill{height:100%;background:var(--accent);border-radius:999px;transition:width .2s ease}.bar__fill--pulse{width:40%;animation:slide 1.4s ease-in-out infinite}@keyframes slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}.screen--tight{gap:10px}.player{position:relative;touch-action:pan-y;width:100%;background:#000;border-radius:12px;overflow:hidden;max-height:52vh;display:flex;justify-content:center}.player__video{max-height:52vh;max-width:100%;display:block}.player__canvas{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;pointer-events:none}.timeline{width:100%;height:34px;border-radius:8px;display:block;touch-action:none;cursor:pointer}.controls{display:flex;align-items:center;gap:8px}.controls--wrap{flex-wrap:wrap}.controls__frame{margin-left:auto;font-variant-numeric:tabular-nums}.btn--step{min-width:56px;padding:10px 0;text-align:center;font-variant-numeric:tabular-nums}.btn--small{padding:9px 14px;font-size:14px}.slider{display:flex;flex-direction:column;gap:6px}.slider input{width:100%;accent-color:var(--accent)}
