.video-surface *{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
.video-surface button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.video-surface input,.video-surface textarea{ font: inherit; color: inherit; }
.video-surface .hidden{ display: none !important; }
.video-surface .pub{ display: flex; flex-direction: column; min-height: 100vh; }
.video-surface .pub .media{ position: relative; background: var(--video-tone-11); height: 48vh; transition: height var(--dur-m) var(--ease); overflow: hidden; flex: none; }
.video-surface .pub.kb .media{ height: 72px; }
.video-surface .pub .media video{ width: 100%; height: 100%; object-fit: contain; display: block; background: var(--video-tone-11); }
.video-surface .pub .media .m-cover{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.video-surface .pub .media .m-tools{ position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.video-surface .pub .media .m-tools button{ height: 30px; padding: 0 12px; border-radius: 15px; background: var(--video-tone-9); color: var(--video-tone-12); font-size: 13px; backdrop-filter: blur(10px); }
.video-surface .pub .media .m-dur{ position: absolute; left: 10px; bottom: 10px; color: var(--video-tone-12); font-size: 12px; background: var(--video-tone-9); padding: 3px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.video-surface .pub.kb .media .m-tools,.video-surface .pub.kb .media .m-dur{ display: none; }
.video-surface .pub .frames{ position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: var(--video-tone-8); backdrop-filter: blur(12px); transform: translateY(100%); transition: transform var(--dur-m) var(--ease); display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.video-surface .pub .frames.on{ transform: none; }
.video-surface .pub .frames .strip{ flex: 1; position: relative; height: 44px; display: flex; overflow: hidden; border-radius: 6px; }
.video-surface .pub .frames .strip canvas{ height: 44px; flex: 1; object-fit: cover; }
.video-surface .pub .frames .strip .handle{ position: absolute; top: -2px; bottom: -2px; width: 4px; background: var(--video-tone-12); border-radius: 2px; box-shadow: 0 0 0 1px var(--video-tone-7); left: 0; pointer-events: none; }
.video-surface .pub .frames button{ color: var(--video-tone-12); font-size: 13px; height: 30px; padding: 0 10px; }
.video-surface .pub .frames button.ok{ background: var(--green); border-radius: 15px; }
.video-surface .pub .form{ flex: 1; background: var(--bg); }
.video-surface .pub .body{ display: block; width: 100%; min-height: 120px; padding: 14px 16px 6px; border: 0; background: transparent; resize: none; outline: none; font-size: 16px; line-height: 1.5; }
.video-surface .pub .body::placeholder{ color: var(--dim); }
.video-surface .pub .count{ text-align: right; padding: 0 16px 8px; font-size: 12px; color: var(--dim); min-height: 20px; }
.video-surface .pub .count.warn{ color: var(--danger); }
.video-surface .pub .row{ display: flex; align-items: center; height: 52px; padding: 0 16px; gap: 10px; }
.video-surface .pub .row + .row{ border-top: .5px solid var(--line); }
.video-surface .pub .row .lab{ flex: 1; font-size: 15px; }
.video-surface .pub .row .val{ color: var(--dim); font-size: 14px; max-width: 55%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-surface .pub .row .chev{ color: var(--dim); font-size: 18px; }
.video-surface .pub .row.disabled{ opacity: .4; pointer-events: none; }
.video-surface .pub .rows{ margin-top: 4px; background: var(--card); }
.video-surface .pub .footer{ position: sticky; bottom: 0; display: flex; gap: 10px; padding: 10px 16px calc(10px + var(--safe-b)); background: var(--glass); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border-top: .5px solid var(--line); }
.video-surface .pub .footer .draft{ color: var(--dim); font-size: 14px; padding: 0 8px; }
.video-surface .pub .footer .go{ flex: 1; height: 44px; border-radius: 22px; background: linear-gradient(180deg, var(--green-hi), var(--green)); color: var(--video-tone-12); font-size: 16px; font-weight: 500; box-shadow: 0 1px 0 var(--video-tone-6); transition: transform 80ms; }
.video-surface .pub .footer .go:active{ transform: scale(.97); filter: brightness(.92); }
.video-surface .pub .footer .go:disabled{ opacity: .5; }
.video-surface .sheet-mask{ position: fixed; inset: 0; background: var(--video-tone-10); z-index: 40; opacity: 0; transition: opacity var(--dur-m); }
.video-surface .sheet-mask.on{ opacity: 1; }
.video-surface .sheet{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--card); border-radius: var(--r-page) var(--r-page) 0 0; padding: 8px 0 calc(12px + var(--safe-b)); transform: translateY(100%); transition: transform var(--dur-m) var(--ease); box-shadow: 0 -8px 24px var(--video-tone-4); }
.video-surface .sheet.on{ transform: none; }
.video-surface .sheet .grab{ width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 10px; }
.video-surface .sheet h3{ font-size: 15px; font-weight: 600; padding: 4px 16px 10px; }
.video-surface .sheet .opt{ display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 16px; }
.video-surface .sheet .opt .cb{ width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--dim); display: grid; place-items: center; transition: all var(--dur-s); }
.video-surface .sheet .opt.on .cb{ background: var(--green); border-color: var(--green); }
.video-surface .sheet .opt .cb svg{ width: 14px; height: 14px; stroke: var(--video-tone-12); stroke-width: 2.5; fill: none; opacity: 0; }
.video-surface .sheet .opt.on .cb svg{ opacity: 1; }
.video-surface .sheet .opt .n{ flex: 1; }
.video-surface .sheet .opt .s{ font-size: 12px; color: var(--dim); }
.video-surface .sheet .sec{ font-size: 12px; color: var(--dim); padding: 10px 16px 4px; }
.video-surface .sheet .done{ margin: 8px 16px 0; height: 44px; border-radius: 22px; background: var(--green); color: var(--video-tone-12); width: calc(100% - 32px); font-weight: 500; }
.video-surface .detail{ background: var(--bg); min-height: 100vh; }
.video-surface .player{ position: relative; background: var(--video-tone-11); width: 100%; max-height: 70vh; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.video-surface .player video{ width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.video-surface .player .poster{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--video-tone-11); pointer-events: none; transition: opacity var(--dur-s); }
.video-surface .player .poster.off{ opacity: 0; }
.video-surface .player .spin{ position: absolute; width: 32px; height: 32px; border: 2.5px solid var(--video-tone-2); border-top-color: var(--video-tone-12); border-radius: 50%; animation: spin .8s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.video-surface .player .big{ position: absolute; width: 56px; height: 56px; border-radius: 50%; background: var(--video-tone-3); display: grid; place-items: center; pointer-events: none; transition: opacity var(--dur-s), transform var(--dur-s); }
.video-surface .player .big svg{ width: 24px; height: 24px; fill: var(--video-tone-12); margin-left: 3px; }
.video-surface .player .big.off{ opacity: 0; transform: scale(.8); }
.video-surface .player .err{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--video-tone-12); font-size: 13px; background: var(--video-tone-9); }
.video-surface .player .err button{ background: var(--video-tone-0); padding: 6px 14px; border-radius: 15px; color: var(--video-tone-12); }
.video-surface .ctl{ position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 12px 10px; background: linear-gradient(transparent, var(--video-tone-5)); display: flex; align-items: center; gap: 10px; color: var(--video-tone-12); font-size: 12px; font-variant-numeric: tabular-nums; transition: opacity var(--dur-s); }
.video-surface .ctl.off{ opacity: 0; pointer-events: none; }
.video-surface .ctl .bar{ flex: 1; height: 24px; display: flex; align-items: center; touch-action: none; }
.video-surface .ctl .bar .track{ position: relative; width: 100%; height: 3px; background: var(--video-tone-2); border-radius: 2px; }
.video-surface .ctl .bar .buf{ position: absolute; left: 0; top: 0; bottom: 0; background: var(--video-tone-1); border-radius: 2px; }
.video-surface .ctl .bar .fill{ position: absolute; left: 0; top: 0; bottom: 0; background: var(--video-tone-12); border-radius: 2px; }
.video-surface .ctl .bar .knob{ position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--video-tone-12); transform: translate(-50%, -50%); }
.video-surface .ctl button{ width: 32px; height: 32px; display: grid; place-items: center; }
.video-surface .ctl button svg{ width: 20px; height: 20px; fill: var(--video-tone-12); }
.video-surface .player:fullscreen,.video-surface .player:-webkit-full-screen{ max-height: none; height: 100%; }
.video-surface .player:fullscreen video,.video-surface .player:-webkit-full-screen video{ max-height: none; height: 100%; }
.video-surface .detail .body{ padding: 14px 16px; font-size: 16px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.video-surface .detail .meta{ padding: 0 16px 16px; font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.video-surface .detail .meta .av{ width: 22px; height: 22px; border-radius: 50%; background: var(--sub); }
.video-surface .detail .state{ margin: 0 16px 12px; padding: 10px 12px; border-radius: var(--r-card); background: var(--sub); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.video-surface .detail .state.bad{ color: var(--danger); }
.video-surface .detail .state .sp{ flex: 1; }
.video-surface .detail .state button{ color: var(--green); font-weight: 500; }
.video-surface .detail .state button.del{ color: var(--danger); }
.video-surface .hidden{display:none!important}.video-surface .pub{min-height:calc(100dvh - 48px)}
.video-surface .pub>.nav{display:none}.video-sheet-host{height:auto!important;max-height:80dvh!important;margin:auto 0 0!important;width:100%;max-width:100%;padding:0;overflow:auto}.video-sheet-host .sheet{position:relative;transform:none}.video-sheet-host .sheet-mask{display:none}
#dialog.video-compose>#dialog-body{padding:0}#dialog.video-compose{height:100dvh;max-height:100dvh}#dialog.video-compose .pub .media{max-height:48dvh}#dialog.video-compose .pub.kb .media{height:72px}
.video-surface .player .ctl{box-sizing:border-box}.video-card-badge{position:absolute;left:8px;right:8px;bottom:8px;display:flex;justify-content:space-between;color:var(--card);text-shadow:0 1px 3px var(--ink);pointer-events:none}
.video-card-state{position:absolute;inset:0;display:grid;place-content:center;background:var(--video-tone-9);color:var(--card);font-size:13px}.video-state{padding:12px 16px;color:var(--muted);font-size:14px}.video-state button{color:var(--green);text-decoration:underline}.video-drafts-link{display:block;padding:12px;color:var(--green)}

/* Batch52 preview fix1: explicit mobile preview controls, independent from cover extraction. */
.video-surface .pub .media .m-tools{top:10px;bottom:auto;z-index:3}
.video-surface .pub .media .m-dur{top:10px;bottom:auto;z-index:2}
.video-surface .pub .preview-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--video-tone-9);color:var(--video-tone-12);z-index:2}
.video-surface .pub .preview-controls button{min-width:44px;min-height:44px;color:inherit;flex:none;font-size:14px}
.video-surface .pub .preview-controls .preview-play{font-size:22px}
.video-surface .pub .preview-seek{min-width:0;flex:1;height:44px;accent-color:var(--green)}
.video-surface .pub .preview-time{font-size:12px;font-variant-numeric:tabular-nums}
.video-surface .pub .frames{z-index:4}
.video-surface .pub .frames .strip{background:var(--video-tone-9)}
.video-surface .pub .media-status{padding:6px 16px;font-size:12px;line-height:1.5;color:var(--dim);flex:none}
.video-surface .pub.kb .preview-controls{display:none}

/* Batch57: full-width flight action in publishing form. */
.video-surface .pub button.row.r-flight{width:100%;box-sizing:border-box;text-align:left}