html.omc-open, html.omc-open body { overflow: hidden !important; }
.omc-shell { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #fff; background: #16161c; font-family: "Microsoft YaHei", system-ui, sans-serif; }
.omc-head { display: flex; align-items: baseline; justify-content: space-between; padding: max(20px, env(safe-area-inset-top)) 24px 12px; }
.omc-head strong { font-size: 18px; font-weight: 650; }
.omc-head span { color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .04em; }
.omc-stage { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px 24px; overflow: hidden; }
.omc-frame { position: relative; width: min(76vw, 620px); aspect-ratio: var(--omc-ratio, 1); overflow: hidden; background: #0b0b0e; touch-action: none; cursor: grab; user-select: none; box-shadow: 0 18px 70px rgba(0,0,0,.34); }
.omc-frame:active { cursor: grabbing; }
.omc-circle { --omc-ratio: 1; max-height: min(66vh, 620px); }
.omc-poster { --omc-ratio: 9 / 20; width: min(38vw, 310px); max-height: 68vh; }
.omc-image { position: absolute; left: 50%; top: 50%; max-width: none !important; max-height: none !important; object-fit: fill; transform-origin: center center; pointer-events: none; translate: -50% -50%; will-change: transform; }
.omc-guide { position: absolute; inset: 0; pointer-events: none; border: 1.5px solid rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.omc-circle .omc-guide { border-radius: 50%; box-shadow: 0 0 0 9999px rgba(16,16,21,.48), inset 0 0 0 1px rgba(0,0,0,.14); }
.omc-poster .omc-guide { border-color: rgba(220,176,93,.96); }
.omc-safe { position: absolute; z-index: 2; left: 0; right: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: rgba(255,255,255,.84); font-size: 10px; letter-spacing: .06em; background: rgba(12,12,16,.32); border-color: rgba(255,255,255,.4); border-style: dashed; }
.omc-safe-top { top: 0; height: 12%; border-width: 0 0 1px; }
.omc-safe-bottom { bottom: 0; height: 10%; border-width: 1px 0 0; }
.omc-controls { padding: 10px max(24px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.omc-controls > p { margin: 0 0 12px; text-align: center; color: rgba(255,255,255,.64); font-size: 13px; }
.omc-zoom { width: min(620px, 100%); margin: 0 auto 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.omc-zoom input { accent-color: #d9aa57; }
.omc-reset { border: 0; border-radius: 16px; padding: 7px 13px; color: #eee; background: rgba(255,255,255,.12); }
.omc-actions { display: flex; justify-content: space-between; align-items: center; width: min(720px, 100%); margin: auto; }
.omc-actions button { border: 0; min-width: 96px; min-height: 44px; padding: 0 24px; border-radius: 24px; font-size: 16px; color: #fff; background: transparent; }
.omc-actions .omc-save { background: linear-gradient(135deg, #e2b25d, #b97822); box-shadow: 0 8px 28px rgba(189,126,37,.28); }
.omc-actions .omc-save:disabled { opacity: .58; }
@media (max-width: 640px) { .omc-head { padding-inline: 18px; } .omc-stage { padding-inline: 14px; } .omc-frame { width: min(92vw, 560px); } .omc-poster { width: min(52vw, 290px); } .omc-controls { padding-inline: 18px; } }