html {
  font-size: 14px;
}

.app-container.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  padding-top: 24px;
  padding-bottom: 24px;
}

.login-container > .app-content {
  width: 100%;
  max-width: 480px;
  min-height: 0;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* User workspace */
.workspace { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; background: #09090c; color: #f5f3f8; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
.workspace-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 22px 12px 16px; border-right: 1px solid #24232a; background: #121116; }
.workspace-brand { display: flex; align-items: center; gap: 11px; margin: 0 9px 44px; color: #fff !important; font-size: 15px; line-height: 1.05; text-decoration: none; }
.workspace-brand img, .mobile-brand img { width: 35px; height: 35px; object-fit: contain; }
.sidebar-section-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 12px; }
.sidebar-section-title { color: #74727d; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.add-direction-link { display: grid; width: 22px; height: 22px; border-radius: 6px; color: #8e8a97 !important; font-size: 18px; font-weight: 300; line-height: 1; text-decoration: none; place-items: center; }
.add-direction-link:hover, .add-direction-link:focus-visible { background: #25232b; color: #fff !important; outline: none; }
.direction-button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: transparent; color: #d9d7df; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; }
.direction-button:not(button) { cursor: default; }
.direction-button:focus-visible { outline: 2px solid #ff4051; outline-offset: -2px; border-radius: 6px; }
.direction-account-count { min-width: 22px; margin-left: auto; padding: 2px 6px; border-radius: 6px; background: #25232b; color: #aaa6b1; font-size: 11px; text-align: center; }
.direction-button[aria-expanded="true"] .direction-account-count { display: none; }
.direction-button[aria-expanded="false"] svg { margin-left: 0; }
.direction-accounts[hidden] { display: none; }
.direction-button[aria-expanded="false"] svg { transform: rotate(180deg); }
.direction-button .flag { font-size: 19px; line-height: 1; }
.direction-button svg { width: 15px; margin-left: auto; fill: none; stroke: #85828c; stroke-width: 1.7; }
.account-list { display: grid; gap: 4px; }
.account-link { position: relative; display: grid; grid-template-columns: 30px 1fr 8px; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px 6px 15px; border-radius: 9px; color: #b9b7c0 !important; font-size: 13px; text-decoration: none; }
.account-link.active { background: #25232b; color: #fff !important; }
.account-link.active::before { position: absolute; inset: 5px auto 5px -12px; width: 3px; border-radius: 3px; background: #ff0015; content: ""; }
.account-link i { width: 6px; height: 6px; border-radius: 50%; background: #8ec9ff; box-shadow: 0 0 8px #4da9ff; }
.account-link i.warning { background: #f2c84b; box-shadow: none; }
.account-avatar { display: grid; width: 30px; height: 30px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 50%; background: linear-gradient(135deg,#8f0713,#310b0f); color: white; font-size: 12px; font-style: normal; font-weight: 800; place-items: center; }
.avatar-europa { background: radial-gradient(circle at 65% 35%, #f3d563 0 6%, transparent 7%), linear-gradient(135deg,#23699b,#15304f 60%,#dbb840); }
.avatar-lava { background: linear-gradient(135deg,#ffdfb1,#b31823 60%,#511017); }
.avatar-azgi { background: linear-gradient(135deg,#4fd4e7,#275970 55%,#eec265); }
.add-account { display: block; margin: 10px 8px; padding: 8px; border: 1px dashed #37343e; border-radius: 8px; background: transparent; color: #77747f !important; font-size: 12px; text-align: left; text-decoration: none; }
.add-account:hover, .add-account:focus-visible { border-color: #625d6d; color: #c5c1cc !important; outline: none; }
.add-account span { margin-right: 6px; font-size: 16px; }
.sidebar-bottom { display: grid; gap: 7px; margin-top: auto; }
.sidebar-bottom a { display: flex; gap: 10px; padding: 9px 11px; color: #97949f !important; font-size: 12px; text-decoration: none; }
.workspace-main { min-width: 0; padding: 26px 26px 48px; overflow: hidden; }
.administrator-home { display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; min-height: calc(100vh - 74px); }
.administrator-home a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 10px; background: #ff0015; color: #fff; font-weight: 700; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.administrator-home a:hover { background: #d90012; color: #fff; transform: translateY(-1px); }
.administrator-home a:focus-visible { outline: 3px solid #ff9ba4; outline-offset: 3px; }
.workspace-empty { display: grid; min-height: calc(100vh - 100px); color: #77747f; font-size: 13px; place-items: center; }
.mobile-brand { display: none; }
.mobile-direction-navigation { display: none; }
.mobile-direction-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mobile-direction-heading > span { color: #74727d; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.mobile-direction-heading > a,.mobile-add-account { display: inline-flex; align-items: center; gap: 5px; color: #ff6673!important; font-size: 11px; font-weight: 700; text-decoration: none; }
.mobile-direction-heading > a { min-height: 34px; padding: 0 11px; border: 1px solid #52242a; border-radius: 8px; background: #211216; }
.mobile-direction-heading > a:focus-visible,.mobile-add-account:focus-visible { outline: 2px solid #ff4051; outline-offset: 2px; }
.mobile-direction-group { display: grid; gap: 9px; padding: 13px 0; border-bottom: 1px solid #242229; }
.mobile-direction-group:last-child { border-bottom: 0; }
.mobile-direction-group > strong { color: #d9d7df; font-size: 13px; }
.mobile-account-list { display: flex; gap: 7px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.mobile-account-list a { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #29272f; border-radius: 8px; background: #16151a; color: #aaa6b1!important; font-size: 11px; text-decoration: none; }
.mobile-account-list a.active { border-color: #6f343a; background: #29171b; color: #fff!important; }
.mobile-add-account { width: max-content; color: #aaa6b1!important; }
.breadcrumbs { margin-bottom: 18px; color: #716f79; font-size: 11px; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: #4b4951; text-decoration: underline; }
.breadcrumbs span { padding: 0 8px; color: #4b4951; }
.account-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.account-heading { display: flex; align-items: center; gap: 14px; }
.avatar-large { width: 46px; height: 46px; font-size: 17px; }
.account-heading h1 { margin: 0 0 3px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.account-heading p { margin: 0; color: #77747f; font-size: 11px; }
.account-actions { display: flex; align-items: center; gap: 10px; }
.run-badge { padding: 8px 12px; border: 1px solid #263c79; border-radius: 9px; background: #17244d; color: #a9c0ff; font-size: 11px; }
.run-badge i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #84a9ff; }
.icon-button { height: 36px; border: 1px solid #29272f; border-radius: 8px; background: #1a191e; color: #bbb8c2; font-size: 12px; }
.icon-button { padding: 0 12px; }.icon-button span { margin-left: 5px; }
.create-button { display: flex; height: 36px; align-items: center; gap: 6px; padding: 0 15px; border-radius: 8px; background: linear-gradient(135deg,#e60013,#ff2639); box-shadow: 0 7px 24px rgb(255 0 21 / 20%); color: white !important; font-size: 12px; font-weight: 700; text-decoration: none; }
.account-tabs { display: flex; gap: 27px; margin-top: 24px; border-bottom: 1px solid #222027; }
.account-tabs a { position: relative; padding: 0 2px 13px; color: #77747f !important; font-size: 12px; font-weight: 600; text-decoration: none; }
.account-tabs a.active { color: #f1eff4 !important; }.account-tabs a.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #ff0015; content: ""; }
.account-tabs span { display: inline-grid; min-width: 21px; height: 18px; margin-left: 4px; border-radius: 9px; background: #e60013; color: white; font-size: 10px; place-items: center; }
.video-section { padding-top: 22px; }
.status-filters { display: flex; gap: 8px; padding-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.status-filters button { flex: 0 0 auto; padding: 7px 11px; border: 1px solid #28262e; border-radius: 15px; background: #16151a; color: #85828d; font-size: 10px; }
.status-filters button.active { border-color: #3a3741; background: #29272e; color: #fff; }.status-filters b { color: #afabb8; font-weight: 500; }
.video-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; }
.new-video-card, .video-card { min-width: 0; height: 435px; overflow: hidden; border: 1px solid #2d2a33; border-radius: 12px; background: #111014; }
.new-video-card { display: flex; flex-direction: column; align-items: center; justify-content: center; border-style: dashed; color: #aaa6b1 !important; text-decoration: none; }
.new-video-card span { margin-bottom: 11px; color: #dedbe3; font-size: 28px; font-weight: 200; }.new-video-card strong { font-size: 12px; }.new-video-card small { margin-top: 5px; color: #5f5c66; font-size: 9px; }
.video-card { display: flex; flex-direction: column; color: inherit!important; text-decoration: none; transition: border-color .2s,transform .2s,box-shadow .2s; }.video-card:hover { border-color: #6f343a; box-shadow: 0 12px 34px rgb(0 0 0 / 30%); color: inherit; transform: translateY(-2px); }.video-card:focus-visible { border-color: #ff4051; outline: 2px solid #ff4051; outline-offset: 2px; }.video-card[hidden] { display: none; }
.video-result { display: block; flex: 1; width: 100%; min-height: 0; background: #050506; object-fit: contain; }
.video-cover { position: relative; display: grid; flex: 1; min-height: 0; padding: 16px; overflow: hidden; background-size: cover; place-items: start center; }
.video-cover::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 52%,rgb(0 0 0 / 52%)); content: ""; }
.video-cover span { position: relative; z-index: 1; margin-top: 20px; padding: 5px 7px; background: rgb(9 10 12 / 80%); color: #f6f2f0; font-size: 11px; font-weight: 800; line-height: 1.35; text-align: center; }
.video-cover b { position: absolute; z-index: 2; right: 9px; bottom: 8px; font-size: 9px; }
.cover-progress { background: repeating-linear-gradient(135deg,#121116,#121116 10px,#18171c 10px,#18171c 20px); place-items: center; }.cover-progress span { margin: 0; color: #e8e5eb; font-size: 12px; font-weight: 700; }.cover-progress .video-cover-status { right: auto; bottom: 18px; left: 50%; padding: 4px 8px; border-radius: 10px; background: #15264b; color: #8fb1ff; transform: translateX(-50%); }
.cover-one { background: linear-gradient(rgb(15 24 46 / 15%),rgb(6 14 22 / 30%)), url('/img/logo_clear.png') center 65%/110px no-repeat, linear-gradient(155deg,#12223b,#89664c); }
.cover-two { background: linear-gradient(rgb(18 24 28 / 20%),rgb(0 0 0 / 15%)), linear-gradient(165deg,#9cb7bd 0 45%,#415354 46% 52%,#191e22 53%); }
.cover-three { background: linear-gradient(rgb(71 25 20 / 12%),rgb(21 6 10 / 25%)), radial-gradient(circle at 50% 50%,#df3d36 0 18%,transparent 19%), linear-gradient(145deg,#adbb8e,#643837 62%,#211a20); }
.video-info { flex: 0 0 120px; padding: 10px 11px; border-top: 1px solid #29272e; }.video-status { display: inline-block; padding: 3px 7px; border-radius: 9px; font-size: 8px; font-weight: 700; }.video-status.running { background: #15264b; color: #8fb1ff; }.video-status.ready { background: #123d30; color: #69dbab; }
.video-info h2 { margin: 9px 0 4px; overflow: hidden; color: #e8e5eb; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.video-info p { margin: 0; color: #625f69; font-size: 8px; }
.progress { height: 4px; margin-top: 10px; overflow: hidden; border-radius: 4px; background: #25232b; }.progress i { display: block; height: 100%; background: #3f7cff; }.progress.ready i { width: 100%; background: #39ca8b; }
.simple-page { min-height: calc(100vh - 180px); }.back-link { display: inline-block; margin-bottom: 22px; text-decoration: none; }.simple-card { max-width: 700px; padding: 34px; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface); }.simple-card h1 { margin: 5px 0 8px; }.simple-card p { margin-bottom: 28px; color: var(--app-muted); }.simple-card label { display: block; margin: 17px 0 7px; font-size: 13px; font-weight: 600; }.simple-card .btn { margin-top: 22px; }.eyebrow { color: #ff4051; font-size: 11px; font-weight: 800; letter-spacing: .12em; }

/* Standalone video creation page */
.video-create-page { min-height: 100vh; background: radial-gradient(circle at 50% -20%,#2f1014 0,transparent 34%),#09090c; color: #f3f0f6; font-family: Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.video-create-topbar { display: flex; height: 72px; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid #242129; background: rgb(14 13 17 / 88%); }
.video-create-brand { display: flex; align-items: center; gap: 10px; color: #fff!important; font-size: 13px; font-weight: 750; line-height: 1.05; text-decoration: none; }.video-create-brand img { width: 34px; height: 34px; object-fit: contain; }
.video-create-close { display: grid; width: 34px; height: 34px; border-radius: 8px; color: #918c98!important; font-size: 24px; font-weight: 300; line-height: 1; text-decoration: none; place-items: center; }.video-create-close:hover { background: #242129; color: #fff!important; }
.video-create-main { width: min(720px,calc(100% - 32px)); margin: 0 auto; padding: 30px 0 64px; }
.video-create-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; color: #8d8894!important; font-size: 12px; text-decoration: none; }.video-create-back:hover { color: #d9d4df!important; }
.video-create-form { overflow: hidden; border: 1px solid #2b2831; border-radius: 16px; background: linear-gradient(145deg,#19171d,#131217); box-shadow: 0 28px 80px rgb(0 0 0 / 38%); }
.video-create-heading { padding: 28px 30px 22px; border-bottom: 1px solid #29262e; }.video-create-kicker { color: #ff4051; font-size: 9px; font-weight: 800; letter-spacing: .14em; }.video-create-heading h1 { margin: 7px 0 5px; font-size: 24px; letter-spacing: -.025em; }.video-create-heading p { margin: 0; color: #77727e; font-size: 11px; }.video-create-heading p strong { color: #a7a1ad; font-weight: 600; }
.video-create-field { padding: 15px 30px 0; }.video-create-field>label:first-child { display: block; margin-bottom: 7px; color: #ddd8e1; font-size: 11px; font-weight: 700; }.video-create-field>label span { color: #706b77; font-weight: 400; }
.video-create-field input:not([type=file]),.video-create-field textarea { display: block; width: 100%; border: 1px solid #302c35; border-radius: 8px; outline: none; background: #100f13; color: #eeeaf2; font: inherit; font-size: 12px; }.video-create-field input:not([type=file]) { height: 39px; padding: 0 12px; }.video-create-field textarea { min-height: 76px; padding: 10px 12px; line-height: 1.55; resize: vertical; }.video-create-field input::placeholder,.video-create-field textarea::placeholder { color: #625d68; opacity: 1; }.video-create-field input:focus,.video-create-field textarea:focus { border-color: #ff0015; box-shadow: 0 0 0 2px rgb(255 0 21 / 18%); }
.video-create-field>small { display: block; margin-top: 7px; color: #69646f; font-size: 9px; }
.source-list { display: grid; gap: 7px; }.source-row { display: grid; grid-template-columns: 1fr 34px; gap: 7px; }.source-remove { border: 1px solid #302c35; border-radius: 8px; background: #1b191f; color: #7f7985; font-size: 18px; }.source-remove:hover { color: #fff; }.source-add { margin-top: 8px; padding: 0; border: 0; background: transparent; color: #ff6673; font-size: 10px; font-weight: 700; }.source-add span { margin-right: 3px; font-size: 14px; }
.video-dropzone { display: grid!important; min-height: 125px; margin: 0!important; padding: 18px; border: 1px dashed #3a3541; border-radius: 9px; background: #111015; text-align: center; cursor: pointer; place-items: center; align-content: center; transition: border-color .2s,background .2s; }.video-dropzone:hover,.video-dropzone.is-dragging { border-color: #ff0015; background: #201012; }.video-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.video-dropzone svg { width: 22px; margin-bottom: 8px; fill: none; stroke: #b8b2bf; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }.video-dropzone strong { color: #d8d3dd; font-size: 10px; }.video-dropzone>span { max-width: 390px; margin-top: 5px; color: #6e6974; font-size: 9px; font-weight: 400!important; line-height: 1.5; }.video-dropzone output { margin-top: 7px; color: #ff7581; font-size: 9px; }
.video-create-validation { display: block; margin: 6px 30px 0; color: #ff8291; font-size: 10px; }.video-create-field .video-create-validation { margin-right: 0; margin-left: 0; }
.video-create-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 25px; padding: 17px 30px; border-top: 1px solid #29262e; background: #17151b; }.video-create-actions>span { max-width: 280px; color: #69646f; font-size: 9px; line-height: 1.4; }.video-create-actions div { display: flex; align-items: center; gap: 10px; }.video-create-actions a { padding: 9px 12px; color: #aaa4b0!important; font-size: 11px; font-weight: 700; text-decoration: none; }.video-create-actions button { height: 36px; padding: 0 16px; border: 0; border-radius: 8px; background: linear-gradient(135deg,#dc0012,#ff2639); box-shadow: 0 7px 24px rgb(255 0 21 / 24%); color: #fff; font-size: 11px; font-weight: 750; }.video-create-actions button span { margin-left: 5px; }
@media (max-width: 600px) { .video-create-topbar { height: 62px; padding: 0 16px; }.video-create-main { padding-top: 20px; }.video-create-heading,.video-create-field { padding-right: 20px; padding-left: 20px; }.video-create-actions { align-items: stretch; padding: 17px 20px; flex-direction: column; }.video-create-actions>span { max-width: none; }.video-create-actions div { justify-content: flex-end; } }

/* Standalone video details page */
.video-details-page { min-height: 100vh; background: radial-gradient(circle at 50% -20%,#2f1014 0,transparent 34%),#09090c; color: #f3f0f6; font-family: Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.video-details-main { width: min(980px,calc(100% - 32px)); margin: 0 auto; padding: 30px 0 64px; }
.video-details-card { overflow: hidden; border: 1px solid #2b2831; border-radius: 16px; background: linear-gradient(145deg,#19171d,#131217); box-shadow: 0 28px 80px rgb(0 0 0 / 38%); }
.video-details-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 30px 24px; border-bottom: 1px solid #29262e; }.video-details-heading h1 { margin: 7px 0 5px; font-size: 26px; overflow-wrap: anywhere; }.video-details-heading p { margin: 0; color: #77727e; font-size: 11px; }
.video-details-status { flex: 0 0 auto; padding: 7px 11px; border-radius: 16px; font-size: 10px; font-weight: 750; }.video-details-status.running { background: #15264b; color: #8fb1ff; }.video-details-status.ready { background: #123d30; color: #69dbab; }
.video-details-preview { padding: 24px 30px 0; }.video-details-preview video { display: block; width: 100%; max-height: 560px; border-radius: 10px; background: #050506; }
.video-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 24px 30px 30px; }.video-details-section { min-width: 0; padding: 18px; border: 1px solid #2b2831; border-radius: 10px; background: #111015; }.video-details-wide { grid-column: 1/-1; }.video-details-section h2 { margin: 0 0 12px; color: #8f8995; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.video-details-section p { margin: 0; }.video-details-text { color: #ddd8e1; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }.video-details-empty { color: #66616c; font-size: 11px; }
.video-details-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }.video-details-list li { min-width: 0; color: #d8d3dd; font-size: 11px; }.video-details-list a { display: block; overflow: hidden; color: #ff6673!important; text-overflow: ellipsis; white-space: nowrap; }.attachment-list small { display: block; margin-top: 3px; color: #6f6a75; font-size: 9px; overflow-wrap: anywhere; }.video-attachment-card { overflow: hidden; padding: 9px; border: 1px solid #2b2831; border-radius: 8px; background: #0b0a0e; }.video-attachment-media { display: block; width: 100%; max-height: 360px; margin-bottom: 9px; border-radius: 6px; background: #050506; object-fit: contain; }.video-attachment-name { overflow-wrap: anywhere; }
@media (max-width: 650px) { .video-details-heading { padding: 22px 20px; }.video-details-heading h1 { font-size: 21px; }.video-details-preview { padding: 20px 20px 0; }.video-details-grid { grid-template-columns: 1fr; padding: 20px; }.video-details-wide { grid-column: auto; } }

.add-direction-page { padding-top: 18px; }
.add-direction-page .simple-card { max-width: 620px; }
.add-direction-page textarea { resize: vertical; }
.add-direction-page .text-danger { display: block; margin-top: 6px; font-size: 12px; }
.add-direction-actions { display: flex; gap: 10px; }

.add-account-page { padding-top: 18px; }
.add-account-page .simple-card { max-width: 620px; }
.add-account-page textarea { resize: vertical; }
.add-account-page .text-danger { display: block; margin-top: 6px; font-size: 12px; }
.add-account-actions { display: flex; gap: 10px; }

@media (max-width: 1100px) { .video-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); }.new-video-card,.video-card { height: 420px; } }
@media (max-width: 740px) { .workspace { display: block; }.workspace-sidebar { display: none; }.workspace-main { padding: 18px 16px 40px; }.mobile-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font-weight: 700; }.mobile-direction-navigation { display: block; margin-bottom: 24px; padding: 12px; border: 1px solid #29272f; border-radius: 12px; background: #121116; }.account-header { align-items: flex-start; }.account-actions { flex-wrap: wrap; justify-content: flex-end; }.run-badge,.icon-button { display: none; }.video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.new-video-card,.video-card { height: 380px; }.account-heading p { display: none; } }
@media (max-width: 460px) { .video-grid { grid-template-columns: 1fr; }.new-video-card,.video-card { height: 460px; }.breadcrumbs { display: none; }.account-header { margin-top: 4px; }.create-button { width: 38px; padding: 0; justify-content: center; font-size: 0; }.create-button span { font-size: 18px; } }

/* Account settings */
.settings-workspace { background: #09090c; }
.settings-main { padding-top: 18px; }
.settings-header { min-height: 48px; }
.settings-form { position: relative; }
.settings-columns { display: grid; grid-template-columns: minmax(300px, 40%) minmax(480px, 60%); gap: 18px; padding: 20px 0 84px; align-items: start; }
.settings-aside, .settings-content { display: grid; gap: 16px; min-width: 0; }
.settings-card { overflow: hidden; border: 1px solid #29272f; border-radius: 12px; background: linear-gradient(145deg,#151419,#111014); box-shadow: 0 12px 30px rgb(0 0 0 / 18%); }
.settings-card-title { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #29272f; }
.settings-card-title h2 { margin: 0; color: #eeeaf2; font-size: 14px; font-weight: 700; }.settings-card-title span { color: #77737f; }
.information-icon { display: inline-block; width: 12px; height: 12px; object-fit: contain; vertical-align: -2px; }
.compact-card { padding-bottom: 15px; }.compact-card .settings-card-title { margin-bottom: 4px; }
.control-block { display: grid; gap: 7px; padding: 12px 16px 3px; }.control-block label,.setting-field>label { color: #d5d1da; font-size: 11px; font-weight: 700; }
.control-block select { height: 36px; padding: 0 10px; border: 1px solid #29272f; border-radius: 7px; background: #111014; color: #d9d5dd; }.control-block small,.toggle-row small { color: #686570; font-size: 9px; }
.history-bar { display: grid; grid-template-columns: auto 1fr auto; min-height: 70px; align-items: center; gap: 16px; padding: 10px 14px; border: 1px solid #29272f; border-radius: 12px; background: #16151a; color: #77737f; }.history-bar span { color: #ff6673; font-size: 10px; }.history-bar small { font-size: 9px; }.history-bar button { height: 38px; padding: 0 13px; border: 1px solid #29272f; border-radius: 8px; background: #1d1c22; color: #e8e4ec; font-size: 10px; font-weight: 700; }
.settings-history { margin-bottom: 16px; }.settings-history summary { cursor: pointer; list-style: none; }.settings-history summary::-webkit-details-marker { display: none; }.settings-history summary i { color: #ff6673; font-style: normal; transition: transform .2s; }.settings-history[open] summary { border-radius: 12px 12px 0 0; }.settings-history[open] summary i { transform: rotate(180deg); }.history-list { max-height: 420px; overflow: auto; border: 1px solid #29272f; border-top: 0; border-radius: 0 0 12px 12px; background: #121116; }.history-entry { padding: 14px; border-top: 1px solid #29272f; }.history-entry:first-child { border-top: 0; }.history-entry header { display: flex; justify-content: space-between; margin-bottom: 10px; color: #eeeaf2; font-size: 10px; }.history-entry time { color: #77737f; font-weight: 400; }.history-change { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; padding: 7px 0; color: #c9c4ce; font-size: 10px; line-height: 1.4; }.history-change strong { color: #8e8995; }.history-change span { overflow-wrap: anywhere; white-space: pre-wrap; }.history-change .history-old { color: #7d7883; text-decoration: line-through; }.history-arrow { color: #ff6673; }
.settings-fields { padding: 0 14px; }.setting-field { padding: 14px 0; border-bottom: 1px solid #242229; }.setting-field:last-child { border-bottom: 0; }.setting-field>label { display: block; margin-bottom: 7px; }.setting-field>label span { color: #78747e; font-weight: 400; }
.settings-card>p { padding: 0 16px; color: #a9a4af; font-size: 12px; }
.settings-fields fieldset.control-block { min-width: 0; margin: 14px 0; border: 1px solid #29272f; border-radius: 7px; padding: 12px 16px; }
.settings-fields fieldset legend { float: none; width: auto; padding: 0 6px; font-size: 14px; }
.control-block input[type="text"],.control-block input[type="password"] { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #29272f; border-radius: 7px; background: #111014; color: #d9d5dd; }
.editable-wrap { position: relative; }.editable-wrap textarea { width: 100%; min-height: 30px; padding: 2px 30px 2px 0; overflow: hidden; border: 0; outline: none; background: transparent; color: #c5c1ca; font-family: inherit; font-size: 11px; line-height: 1.65; resize: vertical; field-sizing: content; }.editable-wrap textarea::placeholder { color: #64616a; opacity: 1; }.editable-wrap textarea:focus { color: #fff; }.edit-pencil { position: absolute; top: 2px; right: 1px; width: 12px; height: 12px; object-fit: contain; }
.choice-pills { display: flex; flex-wrap: wrap; gap: 7px; }.choice-pills label { position: relative; padding: 8px 12px; border: 1px solid #29272f; border-radius: 7px; color: #b7b3bc; font-size: 10px; cursor: pointer; }.choice-pills label:has(input:checked) { border-color: #e60013; box-shadow: inset 0 0 0 1px #e60013; color: #ffc2c7; }.choice-pills input { position: absolute; opacity: 0; }
.duration-field output { display: inline-block; min-width: 52px; color: #ddd9e1; font-size: 11px; }.duration-field input { width: calc(100% - 60px); accent-color: #ff0015; vertical-align: middle; }.range-labels { display: flex; justify-content: space-between; margin: 3px 0 0 58px; color: #55515c; font-size: 8px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; cursor: pointer; }.toggle-row>span { display: grid; gap: 5px; }.toggle-row b { color: #d5d1da; font-size: 11px; }.toggle-row input { position: absolute; opacity: 0; }.toggle-row i { position: relative; flex: 0 0 30px; height: 17px; border-radius: 12px; background: #35323b; }.toggle-row i::after { position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: white; content: ""; transition: .2s; }.toggle-row input:checked+i { background: #ff0015; }.toggle-row input:checked+i::after { transform: translateX(13px); }
.settings-toast { position: fixed; z-index: 10; top: 16px; left: 50%; padding: 10px 15px; border: 1px solid #235c48; border-radius: 8px; background: #133126; color: #82e5ba; font-size: 11px; transform: translateX(-50%); }
.save-dock { position: fixed; z-index: 5; right: 25px; bottom: 16px; display: flex; align-items: center; gap: 18px; padding: 10px 12px 10px 16px; border: 1px solid #312d38; border-radius: 11px; background: rgb(24 22 29 / 94%); box-shadow: 0 10px 35px #000; backdrop-filter: blur(10px); }.save-dock span { color: #77737f; font-size: 9px; }.save-dock span b { color: #78d9a0; font-weight: 700; }.save-dock span strong { color: #ff8e9c; font-weight: 700; }.save-dock button { min-width: 134px; padding: 9px 14px; border: 0; border-radius: 7px; background: linear-gradient(135deg,#d90012,#ff2639); color: #fff; font-size: 10px; font-weight: 700; }.save-dock button:disabled { cursor: wait; opacity: .7; }
@media (max-width: 1050px) { .settings-columns { grid-template-columns: 1fr; }.settings-aside { grid-template-columns: 1fr 1fr; }.settings-content { grid-column: 1/-1; } }
@media (max-width: 740px) { .settings-main { padding-top: 18px; }.settings-columns,.settings-aside { grid-template-columns: 1fr; }.settings-header .account-actions { display: none; }.history-bar { grid-template-columns: 1fr auto; }.history-bar small { display: none; }.save-dock { right: 12px; bottom: 12px; left: 12px; justify-content: space-between; } }

:root {
  --app-bg: #08090b;
  --app-surface: #151518;
  --app-surface-raised: #1b1b20;
  --app-border: #292a31;
  --app-text: #f7f7fa;
  --app-muted: #92929e;
  --app-accent: #ff0015;
  --app-accent-hover: #ff4051;
}

.site-body {
  margin-bottom: 0;
  background: var(--app-bg);
  color: var(--app-text);
}

.app-navbar {
  border-bottom: 1px solid var(--app-border);
  background: rgb(8 9 11 / 92%);
  box-shadow: 0 8px 30px rgb(0 0 0 / 22%);
}

.app-navbar .navbar-brand {
  color: var(--app-text);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.app-navbar .navbar-brand:hover,
.app-navbar .navbar-brand:focus,
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  color: #ff7581;
}

.app-navbar .nav-link {
  color: #c9c9d0;
}

.app-container {
  padding-top: 38px;
  padding-bottom: 84px;
}

.app-content {
  min-height: calc(100vh - 182px);
  padding: 28px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: var(--app-surface);
  box-shadow: 0 20px 60px rgb(0 0 0 / 24%);
}

.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body h5,
.site-body h6 {
  color: var(--app-text);
}

.site-body .text-muted,
.app-footer {
  color: var(--app-muted) !important;
}

.site-body a:not(.btn):not(.nav-link):not(.navbar-brand) {
  color: #ff5261;
}

.site-body a:not(.btn):hover {
  color: #ff8992;
}

.site-body hr {
  border-color: var(--app-border);
  opacity: 1;
}

.site-body .form-control,
.site-body .form-select,
.site-body .input-group-text {
  border-color: var(--app-border);
  background-color: #101013;
  color: var(--app-text);
}

.site-body .form-control:focus,
.site-body .form-select:focus {
  border-color: var(--app-accent);
  background-color: #101013;
  color: var(--app-text);
  box-shadow: 0 0 0 0.2rem rgb(255 0 21 / 25%);
}

.site-body .form-control:disabled,
.site-body .form-control[readonly] {
  background-color: #202027;
  color: var(--app-muted);
}

.site-body .form-floating > label {
  color: var(--app-muted);
}

.site-body .form-check-input {
  border-color: #50505c;
  background-color: #101013;
}

.site-body .form-check-input:checked {
  border-color: var(--app-accent);
  background-color: var(--app-accent);
}

.site-body .btn-primary,
.site-body .btn-success {
  border-color: transparent;
  background: linear-gradient(90deg, #ff0015 0%, #d90012 100%);
  color: #fff;
  font-weight: 600;
}

.site-body .btn-primary:hover,
.site-body .btn-success:hover {
  border-color: transparent;
  background: linear-gradient(90deg, #ff4051 0%, #e60013 100%);
}

.site-body .nav-pills .nav-link {
  color: #bdbdc7;
}

.site-body .nav-pills .nav-link.active {
  background-color: var(--app-accent);
  color: #fff;
}

.site-body .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: rgb(255 255 255 / 3%);
  --bs-table-striped-color: var(--app-text);
}

.site-body .table-responsive {
  border: 1px solid var(--app-border);
  border-radius: 12px;
}

.site-body .table {
  margin-bottom: 0;
}

.site-body .alert {
  border-color: var(--app-border);
}

.app-footer {
  padding: 22px 0;
  border-top: 1px solid var(--app-border);
  background: #0c0c0f;
}

.auth-body {
  margin: 0;
  background: #08090b;
  color: #f7f7fa;
}

.auth-body > div,
.auth-body main.pb-3 {
  min-height: 100vh;
  padding: 0 !important;
}

.auth-page {
  display: grid;
  min-height: 100vh;
  padding: 40px 24px;
  place-items: center;
}

.auth-card {
  width: min(100%, 402px);
  transform: translateY(-7px);
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 39px;
}

.auth-brand-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.auth-brand h1 {
  margin: 0;
  color: #f7f7fa;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.6px;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-field {
  position: relative;
}

.auth-field input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #292a31;
  border-radius: 10px;
  outline: none;
  background: #151518;
  color: #f7f7fa;
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-field input::placeholder {
  color: #92929e;
  opacity: 1;
}

.auth-field input:focus {
  border-color: #ff0015;
  box-shadow: 0 0 0 2px rgb(255 0 21 / 30%);
}

.auth-field--password input {
  padding-right: 52px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 13px;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 6px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #898995;
  cursor: pointer;
  place-items: center;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: #e2a1a7;
}

.password-toggle svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.auth-submit {
  height: 46px;
  margin-top: 1px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff0015 0%, #d90012 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 150ms ease, transform 150ms ease;
}

.auth-submit:hover {
  filter: brightness(1.12);
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-submit:focus-visible,
.password-toggle:focus-visible,
.auth-register:focus-visible {
  outline: 2px solid #ff5261;
  outline-offset: 3px;
}

.auth-register {
  display: block;
  margin-top: 23px;
  color: #92929e;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.auth-register span {
  color: #ff5261;
  font-weight: 600;
}

.auth-register:hover,
.auth-register:hover span {
  color: #ff7581;
}

@media (max-width: 480px) {
  .auth-page {
    padding-inline: 18px;
  }

  .auth-brand {
    margin-bottom: 32px;
  }

  .auth-brand h1 {
    font-size: 23px;
  }
}

@media (max-width: 767.98px) {
  .app-container {
    padding: 20px 12px 72px;
  }

  .app-content {
    padding: 20px 16px;
    border-radius: 12px;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.account-delete-section { margin-top: auto; padding-top: 24px; }
.account-delete-section button { padding: 10px 14px; border: 1px solid #37313b; border-radius: 8px; background: #1a191e; color: #bbb8c2; font-size: 12px; }
.account-delete-section .account-delete-button { border-color: #63303a; color: #ff5264; }
.account-delete-section button:hover { background: #29232d; }
.account-delete-section button:focus-visible { outline: 2px solid #ff5264; outline-offset: 2px; }
.account-delete-section p { margin: 12px 0; color: #bbb8c2; font-size: 12px; line-height: 1.6; }
.account-delete-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.profile-settings .form-floating > .form-control {
  height: 4rem;
  min-height: 4rem;
}

.profile-settings .form-floating > .form-control:focus,
.profile-settings .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 2rem;
  padding-bottom: .5rem;
}

.profile-settings .form-floating > .form-control:-webkit-autofill {
  padding-top: 2rem;
  padding-bottom: .5rem;
}