[hidden] { display: none !important; }
    body { margin: 0; font-family: Arial, sans-serif; background: #f5f6f8; color: #1f2933; }
    header { background: #1b2a41; color: #fff; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
    header p { margin: 4px 0 0; }
    header button { color: #fff; background: transparent; border-color: #9aa8bc; }
    h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
    main { padding: 20px 24px 28px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
    section { background: #fff; border: 1px solid #d8dee8; border-radius: 8px; overflow: hidden; }
    .head { padding: 12px 14px; border-bottom: 1px solid #d8dee8; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .head h2 { margin: 0; font-size: 16px; }
    button { border: 1px solid #9aa8bc; background: #fff; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
    button.primary { background: #1b2a41; border-color: #1b2a41; color: #fff; }
    button.danger { border-color: #c54949; color: #9d2525; }
    button:disabled { opacity: .55; cursor: wait; }
    input[type="search"], select { border: 1px solid #9aa8bc; background: #fff; border-radius: 6px; padding: 7px 10px; }
    input[type="search"] { min-width: 180px; }
    .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
    .toolbar label { display: flex; align-items: center; gap: 6px; color: #435469; font-size: 12px; }
    .header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .storage-widget { min-width: min(340px, 78vw); color: #e7ebf0; font-size: 12px; }
    .storage-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .storage-widget strong { color: #fff; }
    .mini-button { border-radius: 4px; padding: 3px 6px; font-size: 11px; line-height: 1; }
    .storage-bar, .progress-bar { height: 8px; background: #d8dee8; border-radius: 999px; overflow: hidden; }
    .storage-bar { margin-top: 6px; background: #435469; }
    .storage-bar span, .progress-bar span { display: block; height: 100%; width: 0; background: #3b82f6; transition: width .2s ease; }
    .storage-bar span.is-warning { background: #f59e0b; }
    .storage-bar span.is-danger { background: #dc2626; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 9px 10px; border-bottom: 1px solid #edf0f5; text-align: left; font-size: 13px; vertical-align: middle; }
    th { color: #435469; font-size: 12px; text-transform: uppercase; }
    tr { cursor: pointer; }
    tr:hover, tr.selected { background: #edf5ff; }
    small { color: #56677d; }
    .notes-cell { max-width: 260px; white-space: normal; word-break: break-word; }
    .editable-field { cursor: text; border-bottom: 1px dotted #9aa8bc; }
    img.thumb, video.thumb { width: 150px; height: 90px; object-fit: contain; background: #111827; border: 1px solid #d8dee8; border-radius: 6px; }
    .detail { padding: 14px; }
    .preview { width: 100%; max-height: 260px; object-fit: contain; background: #111827; border: 1px solid #d8dee8; border-radius: 6px; }
    .capture-preview { margin-top: 10px; width: 100%; max-height: 160px; object-fit: contain; background: #eef1f5; border: 1px solid #d8dee8; border-radius: 6px; }
    .meta { display: grid; grid-template-columns: 140px 1fr; gap: 7px 12px; margin-top: 12px; font-size: 13px; }
    .meta div:nth-child(odd) { color: #56677d; }
    .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
    .icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid #9aa8bc; border-radius: 6px; background: #fff; color: #1f2933; text-decoration: none; }
    .icon-button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .stream-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
    .stream-tabs button.active { background: #dcecff; border-color: #4f81bd; }
    .status { color: #435469; font-size: 13px; min-height: 18px; }
    .status.is-error { color: #a12626; }
    .panel-status { padding: 10px 14px; border-bottom: 1px solid #edf0f5; }
    .trash-section { grid-column: 1 / -1; }
    .upload-section, .raw-section { grid-column: 1 / -1; }
    .upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; padding: 14px; }
    .upload-panel { border: 1px solid #d8dee8; border-radius: 8px; padding: 12px; display: grid; gap: 10px; align-content: start; }
    .upload-panel h3 { margin: 0; font-size: 14px; }
    .upload-panel input[type="file"] { max-width: 100%; }
    .upload-progress { display: grid; gap: 8px; padding: 0 14px 14px; }
    .upload-progress .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .raw-file-list { margin: 0; padding-left: 18px; }
    .raw-file-list li { margin: 4px 0; }
    .raw-video-list { display: grid; gap: 12px; margin-top: 12px; }
    .raw-video-list video { width: 100%; max-height: 360px; background: #111827; border: 1px solid #d8dee8; border-radius: 6px; }
    .trash-table tr { cursor: default; }
    .trash-table td:last-child { min-width: 190px; }
    .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .frame-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 10px 0 12px; }
    .frame-panel { border: 1px solid #d8dee8; border-radius: 6px; overflow: hidden; background: #f0f3f8; }
    .frame-panel strong { display: block; padding: 6px 8px; font-size: 12px; color: #435469; background: #fff; }
    .frame-panel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #111827; }
    .frame-panel.is-missing img { opacity: .45; }
    input[type="range"] { flex: 1 1 180px; }
    pre { background: #f0f3f8; border: 1px solid #d8dee8; border-radius: 6px; padding: 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
    .empty { padding: 18px; color: #56677d; }
    .login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #1b2a41; }
    .login-panel { width: min(100%, 380px); display: grid; gap: 12px; padding: 22px; background: #fff; border: 1px solid #d8dee8; border-radius: 8px; }
    .login-panel h1 { margin: 0; font-size: 24px; }
    .login-panel label { display: grid; gap: 6px; color: #435469; font-size: 13px; }
    .login-panel input { border: 1px solid #9aa8bc; border-radius: 6px; padding: 8px 10px; }
    .login-panel p { margin: 0; }
    @media (max-width: 980px) { main { grid-template-columns: 1fr; } }