
html[data-look="studio"] {
  --sl-pearl: #FBFAFF;
  --sl-sheet: rgba(255, 255, 255, .74);
  --sl-edge: rgba(255, 255, 255, .92);
  --sl-ink: #17152A;
  --sl-ink-2: #5A5775;
  --sl-ink-3: #8E8AA8;
  --sl-hair: rgba(23, 21, 42, .10);
  --sl-hair-2: rgba(23, 21, 42, .055);
  --sl-violet: #8B6CFF;
  --sl-lav: #E6DEFF; --sl-peach: #FFE2D2; --sl-mint: #D6F5EA; --sl-sky: #DAE7FF; --sl-rose: #FFD9EA;
  --sl-glow: 0 24px 60px -18px rgba(108, 86, 210, .22), 0 2px 8px rgba(23, 21, 42, .05);
  --sl-glow-sm: 0 10px 28px -14px rgba(108, 86, 210, .28), 0 1px 3px rgba(23, 21, 42, .05);
  --sl-iri: linear-gradient(100deg, #FF8A5B 0%, #FF5FA2 33%, #8B6CFF 66%, #43C6E8 100%);
  --sl-r: 16px; --sl-r-sm: 10px;
  --sl-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --sl-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sl-gutter: clamp(16px, 3vw, 48px);

  
  --v-paper: var(--sl-pearl);
  --v-paper-2: #F3F0FF;
  --v-card: #fff;
  --v-ink: var(--sl-ink);
  --v-ink-2: var(--sl-ink-2);
  --v-line: var(--sl-hair);
  --v-soft-line: var(--sl-hair);
  --v-cta: var(--sl-ink);
  --v-cta-ink: #fff;
  --v-radius: var(--sl-r);
  --v-radius-sm: var(--sl-r-sm);
  --v-pop: var(--sl-glow-sm);
  --v-pop-sm: 0 1px 2px rgba(23, 21, 42, .06);
  --v-pop-lg: var(--sl-glow);
  --v-wash-yellow: #F1EDFF;
  --v-camera: var(--sl-violet);
  color-scheme: light;
  background: var(--sl-pearl);
}


html[data-look="studio"] body.app,
html[data-look="studio"] body.va-app {
  background: transparent !important; color: var(--sl-ink); font-family: var(--sl-text); -webkit-font-smoothing: antialiased;
}
html[data-look="studio"] body.app::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; display: block !important;
  background:
    radial-gradient(60vw 50vh at 8% -6%, rgba(201, 184, 255, .55), transparent 70%),
    radial-gradient(48vw 44vh at 96% 4%, rgba(255, 214, 196, .55), transparent 72%),
    radial-gradient(56vw 50vh at 88% 104%, rgba(196, 238, 224, .55), transparent 70%),
    radial-gradient(50vw 46vh at 0% 100%, rgba(214, 228, 255, .6), transparent 72%),
    var(--sl-pearl);
}
html[data-look="studio"] :is(h1, h2, h3) { font-family: var(--sl-display); color: var(--sl-ink); }
html[data-look="studio"] .va-app :is(h1, h2) { font-weight: 800; letter-spacing: -.025em; }
html[data-look="studio"] main h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; }
html[data-look="studio"] .va-app h1 i, html[data-look="studio"] .va-app h2 i { color: var(--sl-violet); }
html[data-look="studio"] :focus-visible { outline: 2px solid var(--sl-violet) !important; outline-offset: 2px; }


html[data-look="studio"] .va-app header.nav {
  background: rgba(251, 250, 255, .78) !important; border-bottom: 1px solid var(--sl-hair) !important;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: none;
}
html[data-look="studio"] .va-app .nav a.link {
  font: 600 15px/1 var(--sl-text); color: var(--sl-ink-2); border-radius: 0; background: none !important;
  box-shadow: none !important; padding: 0 2px; margin: 0 10px; border-bottom: 2px solid transparent;
}
html[data-look="studio"] .va-app .nav a.link:hover { color: var(--sl-ink); }
html[data-look="studio"] .va-app .nav a.link[aria-current="page"] { color: var(--sl-ink); border-bottom-color: var(--sl-ink); font-weight: 700; }
html[data-look="studio"] .va-app .nav-end :is(.btn, .konto-plan, [class*=plan]) { border-radius: var(--sl-r-sm) !important; box-shadow: none !important; }
html[data-look="studio"] .va-app .nav-end .btn { background: var(--sl-ink); color: #fff; border: 0; }


html[data-look="studio"] .va-app .btn { border-radius: var(--sl-r-sm) !important; font-family: var(--sl-text); font-weight: 700; }
html[data-look="studio"] .va-app :is(.btn-primary, .btn.btn-primary) {
  background: var(--sl-ink) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 14px 30px -12px rgba(108, 86, 210, .55), 0 2px 6px rgba(23, 21, 42, .12) !important;
}
html[data-look="studio"] .va-app :is(.btn-primary, .btn.btn-primary):not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 18px 36px -12px rgba(108, 86, 210, .65), 0 2px 6px rgba(23, 21, 42, .12) !important; }
html[data-look="studio"] .va-app :is(.btn, .btn-primary):not([disabled]):active { transform: translateY(1px) scale(.99); box-shadow: 0 6px 14px -8px rgba(108, 86, 210, .5) !important; }
html[data-look="studio"] .va-app main .btn:not(.btn-primary):not(.btn-quiet),
html[data-look="studio"] .va-app dialog .btn:not(.btn-primary):not(.btn-quiet) {
  background: rgba(255, 255, 255, .9) !important; color: var(--sl-ink) !important; border: 1px solid var(--sl-hair) !important;
  box-shadow: var(--sl-glow-sm) !important;
}
html[data-look="studio"] .va-app .btn-quiet { color: var(--sl-ink); text-decoration: underline; text-decoration-color: var(--sl-violet); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }


html[data-look="studio"] .va-app :is(.card, .notice) {
  background: var(--sl-sheet) !important; border: 1px solid var(--sl-edge) !important; border-radius: var(--sl-r) !important;
  box-shadow: var(--sl-glow) !important; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
html[data-look="studio"] .va-app .card-flat { box-shadow: var(--sl-glow-sm) !important; }
html[data-look="studio"] .va-app .notice .sign { background: var(--sl-lav); border: 0; }
html[data-look="studio"] .va-app main :is(input[type=text], input[type=search], input[type=email], input[type=url], input:not([type]), select, textarea, .input) {
  background: rgba(255, 255, 255, .92) !important; border: 1px solid var(--sl-hair) !important; border-radius: var(--sl-r-sm) !important;
  box-shadow: inset 0 1px 2px rgba(23, 21, 42, .04) !important; color: var(--sl-ink); font-family: var(--sl-text);
}
html[data-look="studio"] .va-app main :is(input, select, textarea):focus-visible { outline: 2px solid var(--sl-violet) !important; outline-offset: 1px; border-color: transparent !important; }
html[data-look="studio"] .va-app input[type=range] { accent-color: var(--sl-violet); }
html[data-look="studio"] .va-app :is(input[type=checkbox], input[type=radio]) { accent-color: var(--sl-violet); }
html[data-look="studio"] .va-app .tag { background: var(--sl-lav); color: var(--sl-ink); border: 0; border-radius: 6px; font-weight: 700; }
html[data-look="studio"] .va-app .tag-go { background: var(--sl-mint); }
html[data-look="studio"] .va-app .tag-wait { background: var(--sl-peach); }
html[data-look="studio"] .va-app .tag-stop { background: #FFE3E8; }


html[data-look="studio"] .va-guide-who { border: 0 !important; border-radius: 14px !important; box-shadow: var(--sl-glow-sm); }
html[data-look="studio"] .va-guide p { background: var(--sl-sheet); border: 1px solid var(--sl-edge) !important; box-shadow: var(--sl-glow-sm) !important; border-radius: 14px 14px 14px 4px !important; font-weight: 500 !important; color: var(--sl-ink); backdrop-filter: blur(12px); }


html[data-look="studio"] .va-foot { border-top: 1px solid var(--sl-hair) !important; }
html[data-look="studio"] .va-foot a { color: var(--sl-ink-2); }


html[data-look="studio"] .films-topp h1 { font-size: clamp(32px, 3.4vw, 46px); }
html[data-look="studio"] .films-topp p { color: var(--sl-ink-2); }
html[data-look="studio"] .fl-start {
  background: var(--sl-sheet) !important; border: 1px solid var(--sl-edge) !important; border-radius: var(--sl-r) !important;
  box-shadow: var(--sl-glow) !important; backdrop-filter: blur(18px);
}
html[data-look="studio"] .fl-start-steg > li, html[data-look="studio"] .fl-start-steg > div {
  background: rgba(255, 255, 255, .7) !important; border: 1px solid var(--sl-hair-2) !important; border-radius: 12px !important; box-shadow: none !important;
}
html[data-look="studio"] .fl-start-steg :is(li, div) > :is(span, b):first-child:not(:only-child) { border-radius: 8px !important; }
html[data-look="studio"] .films-sidebar { border-right: 1px solid var(--sl-hair) !important; }
html[data-look="studio"] .films-sidebar :is(a, button) { border-radius: var(--sl-r-sm) !important; box-shadow: none !important; }
html[data-look="studio"] .films-sidebar :is(a, button)[aria-current="true"], html[data-look="studio"] .films-sidebar :is(a, button)[aria-current="page"], html[data-look="studio"] .films-sidebar .on {
  background: #fff !important; border: 1px solid var(--sl-hair) !important; box-shadow: var(--sl-glow-sm) !important;
}
html[data-look="studio"] .filmkort {
  background: var(--sl-sheet) !important; border: 1px solid var(--sl-edge) !important; border-radius: var(--sl-r) !important;
  box-shadow: var(--sl-glow-sm) !important; backdrop-filter: blur(14px); transition: transform .15s ease, box-shadow .15s ease;
}
html[data-look="studio"] .filmkort:hover { transform: translateY(-2px); box-shadow: var(--sl-glow) !important; }
html[data-look="studio"] .filmkort :is(img, video, .thumb, .plakat, canvas) { border-radius: 12px; }
html[data-look="studio"] .films-pages .btn { min-width: 40px; }
html[data-look="studio"] :is(.film-meny, .film-context, .films-valt, dialog) {
  background: rgba(255, 255, 255, .96) !important; border: 1px solid var(--sl-hair) !important; border-radius: var(--sl-r) !important; box-shadow: var(--sl-glow) !important;
}
html[data-look="studio"] .va-empty .va-guide-who { box-shadow: var(--sl-glow); }


html[data-look="studio"] .va-app main :is(.lib-kort, .bib-kort, .tile) { border-radius: var(--sl-r) !important; }
html[data-look="studio"] .va-app main :is(nav, aside) a[aria-current="page"],
html[data-look="studio"] .va-app main :is(nav, aside) button[aria-selected="true"] { border-radius: var(--sl-r-sm) !important; }


html[data-look="studio"] .va-app .n9-merke, html[data-look="studio"] .va-app .nav-end a[class*="merke"] { border: 1px solid var(--sl-hair) !important; border-radius: var(--sl-r-sm) !important; background: rgba(255, 255, 255, .8) !important; box-shadow: none !important; }
html[data-look="studio"] .va-app :is(.n9-discord, .n9-tb-knapp, .n9-stripe) { border: 1px solid var(--sl-hair) !important; border-radius: var(--sl-r-sm) !important; box-shadow: var(--sl-glow-sm) !important; }
html[data-look="studio"] .va-app .n9-mobile-nav { background: rgba(255, 255, 255, .92) !important; border-top: 1px solid var(--sl-hair) !important; box-shadow: 0 -8px 24px -16px rgba(108, 86, 210, .3) !important; backdrop-filter: blur(14px); }
html[data-look="studio"] body.va-app .films-sidebar { border-right: 1px solid var(--sl-hair); }
html[data-look="studio"] body.va-app .folder-link { border: 1px solid transparent; border-radius: var(--sl-r-sm); }
html[data-look="studio"] body.va-app .folder-link[aria-current=true] { background: #fff; border-color: var(--sl-hair); box-shadow: var(--sl-glow-sm); }
html[data-look="studio"] body.va-app :is(.films-toolbar input, .films-toolbar select, .film-dialog input, .film-dialog select) { border: 1px solid var(--sl-hair); border-radius: var(--sl-r-sm); background-color: rgba(255, 255, 255, .92); }
html[data-look="studio"] body.va-app :is(.films-actions button, .film-dialog button, .films-pages button, #fl-new, .film-context button) { border: 1px solid var(--sl-hair); border-radius: var(--sl-r-sm); background: rgba(255, 255, 255, .9); box-shadow: none; }
html[data-look="studio"] body.va-app .films-pages { border-top: 1px solid var(--sl-hair); }
html[data-look="studio"] body.va-app .films-pages button[aria-current=page] { background: var(--sl-ink); color: #fff; border-color: var(--sl-ink); }
html[data-look="studio"] body.va-app .film-entry { background: var(--sl-sheet); border: 1px solid var(--sl-edge); border-radius: var(--sl-r); box-shadow: var(--sl-glow-sm); backdrop-filter: blur(14px); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
html[data-look="studio"] body.va-app .film-entry:hover { transform: translateY(-2px); box-shadow: var(--sl-glow); }
html[data-look="studio"] body.va-app .film-entry h3 { font: 700 16px/1.25 var(--sl-display); letter-spacing: -.01em; }
html[data-look="studio"] body.va-app .film-entry .btn:not(.btn-primary) { background: #fff !important; border: 1px solid var(--sl-hair) !important; border-radius: var(--sl-r-sm) !important; }
html[data-look="studio"] body.va-app .film-more { border: 1px solid var(--sl-hair) !important; border-radius: 8px !important; box-shadow: var(--sl-glow-sm) !important; background: rgba(255, 255, 255, .92) !important; }
html[data-look="studio"] body.va-app .film-organise { border-top: 1px solid var(--sl-hair-2); }
html[data-look="studio"] body.va-app :is(.film-dialog, .film-context) { background: #fff; border: 1px solid var(--sl-hair); border-radius: var(--sl-r); box-shadow: var(--sl-glow); }
html[data-look="studio"] body.va-app .film-dialog::backdrop { background: rgba(23, 21, 42, .35); backdrop-filter: blur(4px); }
html[data-look="studio"] body.va-app .film-dialog button[type=submit] { background: var(--sl-ink); color: #fff; }
html[data-look="studio"] body.va-app #fl-sharing-options { border: 1px solid var(--sl-hair); border-radius: var(--sl-r-sm); }
html[data-look="studio"] body.va-app .bib-drop { background: rgba(230, 222, 255, .45); border: 1.5px dashed rgba(139, 108, 255, .55); border-radius: var(--sl-r); }
html[data-look="studio"] body.va-app :is(.wb-innhald a) { border: 1px solid var(--sl-hair); border-radius: var(--sl-r-sm); box-shadow: none; }
html[data-look="studio"] body.va-app .wb-ting { background: var(--sl-sheet); border: 1px solid var(--sl-edge); border-radius: var(--sl-r); box-shadow: var(--sl-glow); }
html[data-look="studio"] .va-app .n9-mobile-nav a { border: 1px solid transparent !important; border-radius: 10px !important; box-shadow: none !important; }
html[data-look="studio"] .va-app .n9-mobile-nav a[aria-current] { background: #fff !important; border-color: var(--sl-hair) !important; box-shadow: var(--sl-glow-sm) !important; }

html[data-look="studio"] body.va-app .bib-delar { border: 1px solid var(--sl-hair) !important; border-radius: 12px !important; background: rgba(255, 255, 255, .7) !important; box-shadow: none !important; padding: 4px !important; }
html[data-look="studio"] body.va-app .bib-delar :is(a, button) { border-radius: 8px !important; border: 0 !important; box-shadow: none !important; }
html[data-look="studio"] body.va-app .bib-delar :is(a, button):is([aria-current], [aria-selected="true"], [aria-pressed="true"], .on) { background: #fff !important; box-shadow: var(--sl-glow-sm) !important; }
html[data-look="studio"] body.va-app :is(.av-kort, .bm-status) { border: 1px solid var(--sl-edge) !important; border-radius: var(--sl-r) !important; background: var(--sl-sheet) !important; box-shadow: var(--sl-glow-sm) !important; }
html[data-look="studio"] body.va-app .bm-status { background: rgba(230, 222, 255, .55) !important; border-radius: var(--sl-r-sm) !important; }
html[data-look="studio"] body.va-app .av-logo { border: 1px dashed rgba(139, 108, 255, .55) !important; border-radius: 12px !important; }

html[data-look="studio"] #set-menu a { border: 1px solid transparent !important; border-radius: var(--sl-r-sm) !important; box-shadow: none !important; }
html[data-look="studio"] #set-menu a[aria-current="page"] { background: #fff !important; border-color: var(--sl-hair) !important; box-shadow: var(--sl-glow-sm) !important; }

html[data-look="studio"] :is(dialog, [role=dialog]) :is(button, .btn, a.btn) { border-radius: var(--sl-r-sm) !important; }
html[data-look="studio"] :is(dialog, [role=dialog]) [role=tablist], html[data-look="studio"] :is(dialog, [role=dialog]) .seg { border-radius: var(--sl-r-sm) !important; }
html[data-look="studio"] :is(dialog, [role=dialog]) { border-radius: 20px !important; }
html[data-look="studio"] :is(dialog, [role=dialog]) :is(article, .plan, [class*=kort]) { border-radius: var(--sl-r) !important; }


@media (max-width: 760px) {
  html[data-look="studio"] main h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-look="studio"] * { transition: none !important; }
}


@media (max-width: 899px) {
  .sx .btn-soft.sm.sm, .sx .bs-btn.bs-btn { min-height: 44px; }
  .sx .top-me.top-me { width: 44px; height: 44px; }
  .sx .top-mark.top-mark { min-height: 44px; min-width: 44px; }
}


html[data-look="studio"].vp-own body.vp {
  --surface: #fff; --surface-2: #F3F0FF; --line: var(--sl-hair); --ground: var(--sl-pearl);
  --v-wash-green: var(--sl-mint); --v-wash-blue: var(--sl-sky); --v-wash-pink: var(--sl-rose); --v-wash-yellow: var(--sl-lav);
  background: transparent; color: var(--sl-ink); font-family: var(--sl-text);
}
html[data-look="studio"].vp-own body.vp::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 8% -6%, rgba(201, 184, 255, .55), transparent 70%),
    radial-gradient(48vw 44vh at 96% 4%, rgba(255, 214, 196, .55), transparent 72%),
    radial-gradient(56vw 50vh at 88% 104%, rgba(196, 238, 224, .55), transparent 70%),
    radial-gradient(50vw 46vh at 0% 100%, rgba(214, 228, 255, .6), transparent 72%),
    var(--sl-pearl);
}
html[data-look="studio"].vp-own body.vp :is(.vp-card, .wt-panel, .wt-welcome, .wt-note) {
  background: var(--sl-sheet); border: 1px solid var(--sl-edge); border-radius: var(--sl-r); box-shadow: var(--sl-glow);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
html[data-look="studio"].vp-own body.vp .v-btn {
  border-radius: var(--sl-r-sm); border: 1px solid var(--sl-ink); background: var(--sl-ink); color: #fff; box-shadow: var(--sl-glow-sm);
}
html[data-look="studio"].vp-own body.vp .v-btn--ghost { background: #fff; color: var(--sl-ink); border-color: var(--sl-hair); box-shadow: none; }
html[data-look="studio"].vp-own body.vp .v-btn:hover { transform: none; box-shadow: var(--sl-glow); }
html[data-look="studio"].vp-own body.vp .v-btn:active { transform: translateY(1px); box-shadow: none; }
html[data-look="studio"].vp-own body.vp .v-chip { border: 1px solid var(--sl-hair); box-shadow: none; }
html[data-look="studio"].vp-own body.vp .vp-disc { box-shadow: 0 0 0 6px rgba(139, 108, 255, .18); border-color: var(--sl-ink); }
html[data-look="studio"].vp-own body.vp :is(.vp-h1, .vp-h2, .vp-h3) { font-family: var(--sl-display); color: var(--sl-ink); letter-spacing: -.02em; }
html[data-look="studio"].vp-own body.vp :is(.vp-lead, .vp-small) { color: var(--sl-ink-2); }
