/* =========================================================================
   ClipFactory redesign — global shell (sidebar layout + design tokens).
   Loaded AFTER style.css so it overrides the old top-nav layout. Screen
   interiors are reskinned one at a time; until then they keep style.css.
   Design source: design_handoff_clipfactory (dark, Geologica, hi-fi).
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Surfaces */
  --cf-bg: #08090b;
  --cf-sidebar-bg: #0a0b0c;
  --cf-surface: #0d0e10;
  --cf-surface-2: #0c0d0f;
  --cf-surface-3: #0f1012;
  --cf-input: #121315;
  --cf-chip: #16181b;
  --cf-chip-2: #1c1e22;
  /* Borders */
  --cf-border: #1a1c1f;
  --cf-border-2: #1f2126;
  --cf-divider: #16171a;
  --cf-border-active: #2a2d31;
  --cf-row: #131416;
  /* Text */
  --cf-text: #ededed;
  --cf-text-2: #cdd1d6;
  --cf-text-3: #9a9fa6;
  --cf-text-4: #7a7f86;
  --cf-muted: #6b7077;
  --cf-disabled: #52565d;
  --cf-faint: #43474d;
  /* Accents */
  --cf-white: #fff;
  --cf-green: #5fd08a;
  --cf-green-2: #4caf6e;
  --cf-green-soft: rgba(76,175,110,.12);
  --cf-blue: #5b9bd5;
  --cf-blue-2: #2a6fdb;
  --cf-blue-border: #3a5e8c;
  --cf-amber: #e8a33d;
  --cf-red: #e5484d;
  --cf-red-2: #e5747a;
  /* Metrics */
  --cf-radius-btn: 10px;
  --cf-radius-card: 14px;
  --cf-sidebar-w: 248px;
}

/* ── Global resets (override style.css body/layout for the shell) ───────── */
/* Kill the native number-input spinners everywhere — the design never shows
   them and they look out of place on dark custom inputs. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: 'Geologica', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.01em;
  line-height: 1.5;
}
/* Neutralise old sticky-footer flex-column body layout. */
body.cf-app { display: block; overflow: hidden; min-height: 0; }
body.cf-app::before { display: none; }   /* drop old grain; shell has its own */

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: #23252a; border-radius: 6px; border: 2px solid var(--cf-bg); }
::-webkit-scrollbar-thumb:hover { background: #33363c; }
::-webkit-scrollbar-track { background: transparent; }

/* Subtle film grain over everything (opt-in via .cf-app).
   NOTE: no mix-blend-mode here — a blend mode on a fixed, full-viewport layer
   forces the browser to re-composite the ENTIRE screen every frame, which made
   the whole app janky during the .cf-content fade + on scroll/hover. A plain
   low-opacity overlay looks the same and stays on its own cheap layer. */
body.cf-app > .cf-grain::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .022;
}

@keyframes cfFadeSlideIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes cfSpin { to { transform: rotate(360deg); } }
@keyframes cfPulseRing { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes cfIndet { 0% { left: -35%; width: 35%; } 60% { left: 100%; width: 45%; } 100% { left: 100%; width: 35%; } }

/* ── App layout ────────────────────────────────────────────────────────── */
.cf-app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.cf-sidebar {
  width: var(--cf-sidebar-w); flex: none; display: flex; flex-direction: column;
  padding: 20px 14px 14px; background: var(--cf-sidebar-bg);
  border-right: 1px solid var(--cf-divider);
}
.cf-logo { display: flex; align-items: center; gap: 11px; padding: 2px 8px 24px; }
.cf-logo-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none; object-fit: cover; display: block;
  border: 1px solid #2f3237;
  box-shadow: 0 0 0 3px rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.5), 0 0 18px rgba(255,255,255,.05);
}

/* ── Processing stepper (movie detail) ─────────────────────────────────── */
.cf-proc { border: 1px solid var(--cf-border); border-radius: 16px; background: var(--cf-surface); padding: 24px 26px; margin-bottom: 24px; }
.cf-proc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.cf-proc-spin { width: 18px; height: 18px; border: 2.4px solid rgba(255,255,255,.18); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: cfSpin 1s linear infinite; flex: none; }
.cf-proc-label { font-size: 13.5px; font-weight: 700; }
.cf-proc-hint { font-size: 12px; color: var(--cf-muted); margin-left: auto; }
.cf-steps { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.cf-step { display: flex; align-items: center; flex: 1; }
.cf-step:last-child { flex: none; }
.cf-step-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.cf-step-circle-wrap { position: relative; width: 46px; height: 46px; }
.cf-step-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #fff; animation: cfPulseRing 1.6s ease-out infinite; }
.cf-step-circle { position: relative; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cf-step-circle svg { width: 19px; height: 19px; }
.cf-step-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.cf-step-line { flex: 1; height: 2px; margin: 0 6px 22px; background: #1c1e21; position: relative; overflow: hidden; border-radius: 2px; }
.cf-step-line > span { position: absolute; inset: 0; background: #fff; width: 0; transition: width .4s; }
.cf-step.done .cf-step-circle { background: #2f7d3a; border: 1.5px solid #2f7d3a; color: #fff; }
.cf-step.done .cf-step-lbl { color: var(--cf-text-2); }
.cf-step.active .cf-step-circle { background: #fff; border: 1.5px solid #fff; color: #000; }
.cf-step.active .cf-step-lbl { color: #fff; }
.cf-step.pending .cf-step-circle { background: var(--cf-chip); border: 1.5px solid #23262b; color: var(--cf-disabled); }
.cf-step.pending .cf-step-lbl { color: var(--cf-disabled); }
.cf-proc-bar { position: relative; height: 5px; border-radius: 3px; background: #16181b; overflow: hidden; }
.cf-proc-bar > span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg,#3a3d42,#fff); animation: cfIndet 2s ease-in-out infinite; }
.cf-logo-word { font-weight: 900; font-size: 17px; letter-spacing: -.03em; color: #fff; }

.cf-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; margin: 0 -4px; padding: 0 4px; }
/* Auto-hiding sidebar scrollbar: invisible at rest, fades in while scrolling
   (JS toggles .cf-scrolling), then fades out after idle.
   WebKit/Chrome/Edge/Safari: custom thin thumb, no native arrows. NOTE: we must
   NOT set `scrollbar-width` here — in modern Chrome that disables ::-webkit-*
   styling and falls back to the ugly native scrollbar. */
.cf-nav-scroll::-webkit-scrollbar { width: 6px; }
.cf-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.cf-nav-scroll::-webkit-scrollbar-thumb { background: transparent; border: none; border-radius: 6px; transition: background .35s ease; }
.cf-nav-scroll.cf-scrolling::-webkit-scrollbar-thumb { background: #2a2d31; }
/* Firefox (no ::-webkit-scrollbar support): thin dark, no auto-hide. */
@supports not selector(::-webkit-scrollbar) {
  .cf-nav-scroll { scrollbar-width: none; }
  .cf-nav-scroll.cf-scrolling { scrollbar-width: thin; scrollbar-color: #2a2d31 transparent; }
}
.cf-nav-label { font-size: 10px; font-weight: 600; letter-spacing: .16em; color: var(--cf-faint); padding: 2px 10px 10px; }
.cf-nav-label + .cf-nav { margin-bottom: 0; }
.cf-nav-label:not(:first-child) { padding-top: 20px; }
.cf-nav { display: flex; flex-direction: column; gap: 2px; }

.cf-nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 9px;
  cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--cf-text-4);
  background: transparent; position: relative; transition: all .14s ease;
  text-decoration: none; white-space: nowrap;
}
.cf-nav-item:hover { background: #141517; color: var(--cf-text-2); }
.cf-nav-item svg { width: 16px; height: 16px; flex: none; stroke-width: 1.7; }
.cf-nav-item .cf-nav-bar { position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px; border-radius: 2px; background: transparent; }
.cf-nav-item.active { color: #fff; background: #141517; }
.cf-nav-item.active .cf-nav-bar { background: #fff; }
.cf-nav-item .cf-lock { width: 13px; height: 13px; margin-left: auto; stroke: var(--cf-disabled); stroke-width: 1.9; }
.cf-nav-item.locked { color: var(--cf-text-4); }

/* ── Plan plate ────────────────────────────────────────────────────────── */
.cf-plan { margin-top: 14px; border: 1px solid var(--cf-border); border-radius: 13px; padding: 14px; background: var(--cf-surface); }
.cf-plan-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cf-plan-tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.cf-plan-tag.paid {
  display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 6px;
  background: var(--cf-chip); border: 1px solid #23262b; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; color: #fff;
}
.cf-plan-usedcap { font-size: 12px; font-weight: 600; color: var(--cf-text-3); }
.cf-plan-bar { height: 5px; border-radius: 3px; background: #191b1e; overflow: hidden; }
.cf-plan-bar > span { display: block; height: 100%; border-radius: 3px; }
.cf-plan-cta {
  display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 9px;
  background: #fff; color: #000; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-top: 13px;
  text-decoration: none; transition: filter .14s ease;
}
.cf-plan-cta:hover { filter: brightness(.94); color: #000; }
.cf-plan-cta.outline { background: transparent; border: 1px solid var(--cf-border-2); color: var(--cf-text-3); height: 34px; font-size: 12px; font-weight: 600; }
.cf-plan-cta.outline:hover { border-color: #2c2e32; color: #fff; filter: none; }
.cf-plan-renew { margin-left: auto; font-size: 11.5px; color: var(--cf-muted); }

/* ── User row ──────────────────────────────────────────────────────────── */
.cf-userrow { display: flex; align-items: center; gap: 9px; padding: 13px 6px 2px; margin-top: 12px; border-top: 1px solid #141518; }
.cf-avatar { width: 28px; height: 28px; border-radius: 50%; background: #26282c; flex: none; border: 1px solid #2c2e32; object-fit: cover; }
.cf-userrow-meta { min-width: 0; flex: 1; }
.cf-userrow-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cf-text); }
.cf-userrow-mail { font-size: 10.5px; color: #5e636a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-userrow-out { width: 15px; height: 15px; stroke: #5e636a; stroke-width: 1.7; cursor: pointer; flex: none; }
.cf-userrow-out:hover { stroke: #cdd1d6; }

/* ── Main column + topbar ──────────────────────────────────────────────── */
.cf-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cf-topbar { display: flex; align-items: center; padding: 0 32px; height: 56px; flex: none; border-bottom: 1px solid #141518; }
.cf-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; position: relative; }
.cf-docs-btn {
  display: flex; align-items: center; gap: 7px; height: 33px; padding: 0 13px; border-radius: 9px;
  border: 1px solid var(--cf-chip-2); color: #8b9098; font-size: 12.5px; font-weight: 500;
  cursor: pointer; text-decoration: none; transition: all .14s ease;
}
.cf-docs-btn:hover { border-color: #2c2e32; color: #e5e5e5; }
.cf-docs-btn svg { width: 13px; height: 13px; stroke-width: 1.8; }
.cf-lang { display: flex; align-items: center; height: 33px; border: 1px solid var(--cf-chip-2); border-radius: 9px; overflow: hidden; font-size: 12px; font-weight: 600; }
.cf-lang a { padding: 0 11px; line-height: 33px; color: #5e636a; cursor: pointer; text-decoration: none; transition: color .14s ease; }
.cf-lang a:hover { color: #cdd1d6; }
.cf-lang a.active { background: var(--cf-chip); color: #fff; }

/* Content scroll area — screens set their own max-width/padding. Until a
   screen is reskinned it inherits this default padded, centred wrap. */
.cf-content { flex: 1; overflow: auto; animation: cfFadeSlideIn .3s ease-out; }
/* Default wrap for screens not yet reskinned — gives old templates sane
   padding/centering. Reskinned screens override block content_class with
   "cf-screen-raw" and supply their own <section> max-width. */
.cf-page { padding: 34px 32px 60px; max-width: 1240px; margin: 0 auto; }
.cf-screen-raw { display: contents; }
.cf-screen { padding: 34px 32px 60px; }
.cf-screen h1 { font-size: 30px; font-weight: 900; letter-spacing: -.035em; margin: 0; }

/* ── Footer (inside main, restyled) ────────────────────────────────────── */
body.cf-app .site-footer { border-top: 1px solid var(--cf-divider); margin-top: 0; padding: 0 32px; height: 48px; display: flex; align-items: center; flex-shrink: 0; background: var(--cf-sidebar-bg); }
body.cf-app .site-footer-inner { display: flex; align-items: center; width: 100%; max-width: none; margin: 0; padding: 0; }
body.cf-app .footer-brand { font-size: 12px; color: var(--cf-muted); }
body.cf-app .footer-socials { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Reset the old chip look — clean glyph-only icons with a subtle hover pad. */
body.cf-app .footer-social { width: 30px; height: 30px; padding: 0; border: none; background: none; border-radius: 8px; color: #5e636a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .14s ease, background .14s ease; }
body.cf-app .footer-social:hover { color: #cdd1d6; background: var(--cf-chip); }
body.cf-app .footer-social svg { width: 16px; height: 16px; display: block; }

/* ── Global styled dropdown (replaces native <select> everywhere) ─────────
   Enhanced by static/js/dropdown.js. Design: Dropdown.dc.html variant B
   (accent bar left on the active row). The native <select> is hidden but kept
   in the DOM for form submission. */
.cf-dd-native { display: none !important; }
.cf-dd { position: relative; width: 100%; }
.cf-dd-trigger {
    display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 13px;
    border-radius: 10px; background: var(--cf-input); border: 1px solid var(--cf-border-2);
    cursor: pointer; transition: border-color .15s ease;
}
.cf-dd.open .cf-dd-trigger { border-color: #3a3d42; }
.cf-dd.disabled .cf-dd-trigger { cursor: not-allowed; background: #0e0f11; }
.cf-dd-text { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--cf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-dd.disabled .cf-dd-text { color: #4a4d52; }
.cf-dd-chev { flex: none; color: var(--cf-text-4); transition: transform .18s ease; }
.cf-dd.open .cf-dd-chev { transform: rotate(180deg); }
/* Optional inline label prefix (data-dd-label), e.g. "Провайдер  Fireworks ⌄" */
.cf-dd-pre { flex: none; width: 86px; font-size: 11.5px; color: var(--cf-text-4); }
.cf-dd-pre + .cf-dd-text { font-weight: 600; }

.cf-dd-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 200;
    background: var(--cf-surface-3); border: 1px solid var(--cf-border-2); border-radius: 14px;
    padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.7);
    max-height: 264px; overflow-y: auto; display: none;
}
.cf-dd.open .cf-dd-panel { display: block; }
.cf-dd-item {
    position: relative; display: flex; align-items: center; gap: 10px; height: 40px;
    padding: 0 13px; border-radius: 9px; cursor: pointer; background: transparent;
    transition: background .12s ease;
}
.cf-dd-item:hover { background: #17191c; }
.cf-dd-item.disabled { opacity: .4; cursor: not-allowed; }
.cf-dd-bar { position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: transparent; }
.cf-dd-item.sel .cf-dd-bar { background: #fff; }
.cf-dd-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: #c4c8ce; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-dd-item.sel { background: var(--cf-chip); }
.cf-dd-item.sel .cf-dd-label { color: #fff; font-weight: 600; }
.cf-dd-check { flex: none; display: none; }
.cf-dd-item.sel .cf-dd-check { display: flex; }
.cf-dd-panel::-webkit-scrollbar { width: 8px; }
.cf-dd-panel::-webkit-scrollbar-thumb { background: #26282c; border-radius: 8px; border: 2px solid var(--cf-surface-3); }

/* ── Styled confirmation dialog (replaces native confirm(); all hx-confirm
   routes here via app.js htmx:confirm hook) ───────────────────────────── */
.cf-confirm { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cf-confirm.hidden { display: none; }
.cf-confirm-backdrop { position: absolute; inset: 0; background: rgba(4,5,7,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cf-confirm-box { position: relative; width: 400px; max-width: 100%; border: 1px solid #23252a; border-radius: 18px; background: #0c0d0f; box-shadow: 0 30px 80px rgba(0,0,0,.6); padding: 26px 24px 22px; text-align: center; }
.cf-confirm-icon { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 13px; background: rgba(229,72,77,.12); color: var(--cf-red); display: flex; align-items: center; justify-content: center; }
.cf-confirm-box p { margin: 0 0 22px; font-size: 14.5px; font-weight: 500; color: var(--cf-text); line-height: 1.5; }
.cf-confirm-actions { display: flex; gap: 10px; }
.cf-confirm-yes, .cf-confirm-no { flex: 1; height: 44px; border-radius: 11px; font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .14s ease; }
.cf-confirm-yes { border: none; background: var(--cf-red); color: #fff; }
.cf-confirm-yes:hover { filter: brightness(1.06); }
.cf-confirm-no { border: 1px solid var(--cf-border-2); background: none; color: var(--cf-text-3); font-weight: 600; }
.cf-confirm-no:hover { border-color: var(--cf-border-active); color: #fff; }

/* ── Real brand platform icons (badge = brand colour + white glyph) ──────
   Used everywhere a platform is shown (setup, schedule, …). The container
   supplies the size + border-radius; .cf-plat-<name> supplies colour + glyph
   (SVG via the platform_icon macro / window.PLATFORM_SVG). */
.cf-plat { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.cf-plat svg { width: 58%; height: 58%; display: block; }
.cf-plat-instagram { background: linear-gradient(135deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); color: #fff; }
.cf-plat-tiktok { background: #010101; color: #fff; }
.cf-plat-youtube { background: #ff0000; color: #fff; }