*,*::before,*::after { box-sizing: border-box; }
:root {
    --color-primary: #1a73e8; --color-primary-d: #0d5bbf;
    --color-success: #34a853; --color-warning: #fbbc04;
    --color-error: #d93025;   --color-bg: #f4f6fb;
    --color-card: #ffffff;    --color-text: #202124;
    --color-muted: #5f6368;   --color-border: #dadce0;
    --radius: 10px; --shadow: 0 4px 14px rgba(0,0,0,.08);
    --shadow-hover: 0 6px 20px rgba(0,0,0,.12);
    --transition: .2s ease;
}
html,body { margin:0; padding:0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px; line-height: 1.6; color: var(--color-text);
    background: var(--color-bg); min-height: 100vh; padding: 24px 16px;
}
.container { max-width: 900px; margin: 0 auto; }
.app-header { text-align: center; margin-bottom: 32px; }
.app-header h1 {
    font-size: 2rem; font-weight: 700; color: var(--color-primary);
    margin: 0 0 8px; letter-spacing: -.02em;
}
.app-header .subtitle { color: var(--color-muted); font-size: .95rem; margin: 0; }
.url-form { margin-bottom: 24px; }
.input-group {
    display: flex; background: var(--color-card);
    border-radius: var(--radius); box-shadow: var(--shadow);
    overflow: hidden; transition: box-shadow var(--transition);
}
.input-group:focus-within { box-shadow: var(--shadow-hover); }
.input-group input[type="url"] {
    flex: 1; min-width: 0; padding: 16px 18px; border: none;
    font-size: 1rem; font-family: inherit; color: var(--color-text);
    background: transparent; outline: none;
}
.input-group input[type="url"]::placeholder { color: #9aa0a6; }
.input-group button {
    flex-shrink: 0; padding: 0 32px; border: none;
    background: var(--color-primary); color: #fff;
    font-size: 1rem; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background var(--transition);
    position: relative; display: flex; align-items: center;
    justify-content: center; min-width: 130px;
}
.input-group button:hover:not(:disabled) { background: var(--color-primary-d); }
.input-group button:disabled { opacity: .7; cursor: wait; }
.btn-loader {
    display: none; width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
    border-radius: 50%; animation: spin .7s linear infinite;
}
.input-group button.loading .btn-text { display: none; }
.input-group button.loading .btn-loader { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert {
    padding: 16px 20px; border-radius: var(--radius);
    margin-bottom: 24px; font-size: .95rem; display: flex; gap: 8px;
    align-items: flex-start; animation: slideIn .3s ease;
}
.alert-error { background: #fce8e6; color: #a50e0e; border: 1px solid #f5c6cb; }
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.result-card {
    background: var(--color-card); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 24px; animation: slideIn .3s ease;
}
.file-info {
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}
.file-name {
    font-size: 1.15rem; font-weight: 600; margin: 0 0 10px;
    word-break: break-word; line-height: 1.4;
}
.file-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
    display: inline-block; padding: 4px 10px; font-size: .78rem;
    font-weight: 600; border-radius: 20px; background: #e8eaed;
    color: var(--color-muted);
}
.badge-info { background: #e8f0fe; color: var(--color-primary); }
.video-container {
    position: relative; padding-bottom: 56.25%; height: 0;
    overflow: hidden; background: #000; border-radius: var(--radius);
    margin-bottom: 20px;
}
.video-container video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; background: #000;
}
.player-status {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; font-size: .9rem; background: rgba(0,0,0,.6);
    padding: 8px 16px; border-radius: 20px; pointer-events: none;
    transition: opacity .3s;
}
.player-status.hidden { opacity: 0; }
.player-status.error { background: rgba(217,48,37,.9); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.btn {
    flex: 1 1 200px; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; padding: 14px 20px;
    border-radius: var(--radius); text-decoration: none;
    font-size: .95rem; font-weight: 600; text-align: center;
    cursor: pointer; border: none;
    transition: transform var(--transition), opacity var(--transition);
}
.btn:hover { transform: translateY(-1px); opacity: .92; }
.btn-play { background: var(--color-success); color: #fff; }
.btn-download { background: var(--color-warning); color: #202124; }
.advanced {
    border-top: 1px solid var(--color-border);
    padding-top: 16px; font-size: .85rem;
}
.advanced summary {
    cursor: pointer; color: var(--color-muted);
    font-weight: 600; padding: 4px 0; user-select: none;
}
.advanced summary:hover { color: var(--color-primary); }
.debug-table {
    width: 100%; border-collapse: collapse;
    margin-top: 12px; table-layout: fixed;
}
.debug-table th, .debug-table td {
    text-align: left; padding: 8px 10px;
    border-bottom: 1px solid #f1f3f4; vertical-align: top;
}
.debug-table th { width: 130px; color: var(--color-muted); font-weight: 600; }
.debug-table code {
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: .78rem; word-break: break-all;
    color: #c5221f; background: #f8f9fa;
    padding: 2px 4px; border-radius: 3px;
}
.app-footer {
    margin-top: 32px; text-align: center;
    color: var(--color-muted); font-size: .8rem; line-height: 1.5;
}
.app-footer p { margin: 4px 0; }
@media (max-width: 600px) {
    body { padding: 16px 10px; }
    .app-header h1 { font-size: 1.5rem; }
    .input-group { flex-direction: column; border-radius: var(--radius); }
    .input-group input[type="url"] {
        border-radius: var(--radius) var(--radius) 0 0;
        border-bottom: 1px solid var(--color-border);
        text-align: center; padding: 14px;
    }
    .input-group button {
        width: 100%; border-radius: 0 0 var(--radius) var(--radius);
        padding: 14px; min-width: 0;
    }
    .result-card { padding: 16px; }
    .actions { flex-direction: column; }
    .btn { flex: 1 1 auto; }
    .debug-table th { width: 90px; font-size: .75rem; }
}