/* ============================================================
   POMSERA THEME FOR PUFFERPANEL
   A monochrome, editorial, ultra-dynamic reskin of PufferPanel's
   Vuetify chrome — built entirely as a CSS overlay. No app logic,
   templates, or behavior is touched; this file only restyles.
   ============================================================ */

/* ---------- FONTS (self-hosted Proxima Nova) ---------- */

@font-face{font-family:"Proxima Nova";src:url("/fonts/pomsera/ProximaNova-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("/fonts/pomsera/ProximaNova-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("/fonts/pomsera/ProximaNova-RegularItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("/fonts/pomsera/ProximaNova-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("/fonts/pomsera/ProximaNova-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("/fonts/pomsera/ProximaNova-Extrabold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("/fonts/pomsera/ProximaNova-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}

/* ---------- TOKENS ---------- */

:root{
  --ink-1000:#000; --ink-900:#0a0a0a; --ink-800:#1d1d1f; --ink-700:#2c2c2e;
  --ink-600:#424245; --ink-500:#6e6e73; --ink-400:#86868b; --ink-300:#b0b0b5;
  --ink-200:#d2d2d7; --ink-150:#e3e3e6; --ink-100:#f5f5f7; --ink-50:#fafafa; --ink-0:#fff;

  --pp-success:#3f9142; --pp-warning:#b8873a; --pp-error:#c1453f; --pp-info:#5b6b78;

  --hairline:var(--ink-200); --hairline-soft:var(--ink-150); --hairline-strong:var(--ink-300);
  --hairline-inverse:rgba(255,255,255,.12);

  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.10);
  --shadow-lg:0 24px 60px rgba(0,0,0,.16);
  --shadow-focus:0 0 0 4px rgba(0,0,0,.12);

  --font-sans:"Proxima Nova",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --ease-standard:cubic-bezier(.32,.08,.24,1);
  --ease-emphasized:cubic-bezier(.2,0,0,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-bounce-soft:cubic-bezier(.22,1.28,.36,1);
  --dur-fast:160ms; --dur-base:280ms; --dur-slow:520ms;
  --pp-drawer-mini-width:80px;
}

@media(prefers-color-scheme:dark){}

/* ---------- MOTION KEYFRAMES ---------- */

@keyframes pp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pp-rise-big{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pp-fade{from{opacity:0}to{opacity:1}}
@keyframes pp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,145,66,.45)}50%{box-shadow:0 0 0 6px rgba(63,145,66,0)}}
@keyframes pp-pulse-error{0%,100%{box-shadow:0 0 0 0 rgba(193,69,63,.45)}50%{box-shadow:0 0 0 6px rgba(193,69,63,0)}}
@keyframes pp-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pp-pop{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes pp-bounce-in{0%{opacity:0;transform:translateY(24px) scale(.92)}55%{opacity:1;transform:translateY(-4px) scale(1.015)}100%{transform:translateY(0) scale(1)}}
@keyframes pp-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes pp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pp-spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pp-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pp-cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pp-glow{0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 22px rgba(255,255,255,.18)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- BASE / TYPOGRAPHY ---------- */

html,body,.v-application{font-family:var(--font-sans)!important}
.v-application{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:0}

html,body{
  margin:0;
  background:var(--ink-1000);
  overflow-x:hidden;
  max-width:100vw;
}
#app,.v-application,.v-application--wrap{overflow-x:hidden;max-width:100vw}

.theme--light.v-application{background:var(--ink-50)!important;color:var(--ink-800)!important}
.theme--dark.v-application{background:var(--ink-1000)!important;color:var(--ink-0)!important}

::selection{background:var(--ink-1000);color:var(--ink-0)}
.theme--dark ::selection{background:#fff;color:#000}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:var(--radius-pill);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-400);background-clip:padding-box}
.theme--dark ::-webkit-scrollbar-thumb{background:var(--ink-600);background-clip:padding-box}
.theme--dark ::-webkit-scrollbar-thumb:hover{background:var(--ink-500);background-clip:padding-box}

:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:4px}
.theme--dark :focus-visible{box-shadow:0 0 0 4px rgba(255,255,255,.25)}

/* Vuetify's typography utility classes hardcode Roboto with !important —
   this is the actual reason Proxima Nova wasn't reaching most UI text. */
.caption,.display-1,.display-2,.display-3,.display-4,.headline,.overline,
.subtitle-1,.subtitle-2,.title,
.text-body-1,.text-button,.text-caption,.text-h1,.text-h2,.text-h3,.text-h4,.text-h5,.text-h6,
.text-overline,.text-subtitle-1,.text-subtitle-2,
.text-sm-body-1,.text-sm-button,.text-sm-h1,.text-sm-h2,.text-sm-h3,.text-sm-h4,.text-sm-h5,.text-sm-h6,.text-sm-overline,.text-sm-subtitle-1,.text-sm-subtitle-2,
.text-md-body-1,.text-md-button,.text-md-h1,.text-md-h2,.text-md-h3,.text-md-h4,.text-md-h5,.text-md-h6,.text-md-overline,.text-md-subtitle-1,.text-md-subtitle-2,
.text-lg-body-1,.text-lg-button,.text-lg-h1,.text-lg-h2,.text-lg-h3,.text-lg-h4,.text-lg-h5,.text-lg-h6,.text-lg-overline,.text-lg-subtitle-1,.text-lg-subtitle-2,
.text-xl-body-1,.text-xl-button,.text-xl-h1,.text-xl-h2,.text-xl-h3,.text-xl-h4,.text-xl-h5,.text-xl-h6,.text-xl-overline,.text-xl-subtitle-1,.text-xl-subtitle-2,
.v-btn,.v-tab,.v-chip,.v-list-item__title,.v-list-item__subtitle,.v-card__title,.v-card__subtitle,
.v-data-table,.v-text-field,.v-select,.v-label,.v-tooltip__content,.v-alert,input,textarea,select,button{
  font-family:var(--font-sans)!important;
}

.v-application .display-4,.v-application .display-3{font-weight:800!important;letter-spacing:-.045em!important;line-height:1.02!important}
.v-application .display-2,.v-application .display-1{font-weight:700!important;letter-spacing:-.03em!important;line-height:1.08!important}
.v-application .headline{font-weight:700!important;letter-spacing:-.02em!important}
.v-application .title{font-weight:600!important;letter-spacing:-.01em!important}
.v-application .subtitle-1,.v-application .subtitle-2{color:var(--ink-500)!important}
.v-application .overline{letter-spacing:.18em!important;font-weight:700!important;color:var(--ink-400)!important}
.v-application .caption{color:var(--ink-400)!important}

a{transition:opacity var(--dur-fast) var(--ease-standard)}
a:hover{opacity:.62}

/* ---------- PAGE ENTRANCE MOTION ---------- */

.v-main{animation:pp-fade var(--dur-slow) var(--ease-standard)}
.v-card,.v-sheet.v-sheet--outlined,.v-list{animation:pp-rise var(--dur-base) var(--ease-standard) both}

/* ---------- APP BAR / TOOLBAR (theme-responsive) ----------
   The app-bar carries a hardcoded `dark` prop in the template, so IT locally
   always has .theme--dark regardless of the real theme setting — any rule
   written as ".theme--dark .selector-inside-bar" was matching that permanent
   local scope, not the real toggle. Everything below is anchored to
   ".theme--light.v-application" / ".theme--dark.v-application" specifically
   (the root element, whose class *does* track the real setting) so it
   actually flips with the toggle. */

html body .theme--light.v-application .v-app-bar.v-toolbar,
html body .theme--light.v-application .v-app-bar.v-toolbar.v-sheet{
  background-color:rgba(255,255,255,.92)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline)!important;
  box-shadow:none!important;
  color:var(--ink-800)!important;
}
html body .theme--dark.v-application .v-app-bar.v-toolbar,
html body .theme--dark.v-application .v-app-bar.v-toolbar.v-sheet{
  background-color:rgba(10,10,10,.9)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hairline-inverse)!important;
  box-shadow:none!important;
  color:rgba(255,255,255,.86)!important;
}
.theme--light.v-application .v-app-bar.v-toolbar .v-icon,
.theme--light.v-application .v-app-bar.v-toolbar .v-btn{color:var(--ink-700)!important}
.theme--dark.v-application .v-app-bar.v-toolbar .v-icon,
.theme--dark.v-application .v-app-bar.v-toolbar .v-btn{color:rgba(255,255,255,.86)!important}

.v-toolbar__title{
  text-indent:-9999px;
  overflow:hidden;
  white-space:nowrap;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:auto 26px;
  min-width:190px;
  height:26px;
  flex:0 0 auto;
  transition:transform var(--dur-base) var(--ease-bounce),filter var(--dur-base) var(--ease-standard);
}
.theme--light.v-application .v-toolbar__title{background-image:url("/img/pomsera/pomsera-wordmark-black.png")}
.theme--dark.v-application .v-toolbar__title{background-image:url("/img/pomsera/pomsera-wordmark-white.png")}
.theme--light.v-application .v-toolbar__title:hover{transform:scale(1.05);filter:drop-shadow(0 0 8px rgba(0,0,0,.25))}
.theme--dark.v-application .v-toolbar__title:hover{transform:scale(1.05);filter:drop-shadow(0 0 10px rgba(255,255,255,.35))}

/* ---------- DARK MODE / LIGHT MODE TOGGLE — animated sun ⇄ moon slider ----------
   Replaces the plain "mdi-lightbulb" icon button with a proper pill switch.
   Click handler / accessibility are untouched — this only restyles the
   existing v-btn; the lightbulb glyph is just visually hidden. The globe
   (language) button sits right next to it and shares the "hold still on
   hover" treatment — neither should lift/rotate like a normal toolbar icon. */
.v-btn:has(.mdi-lightbulb),
.v-btn:has(.mdi-earth){
  transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)!important;
}
.v-btn:has(.mdi-lightbulb):hover,
.v-btn:has(.mdi-earth):hover{transform:none!important;box-shadow:none!important}
.v-btn:has(.mdi-earth):hover .v-icon{transform:none!important}

/* "Help us translate PufferPanel" — the Crowdin link at the bottom of the
   language-selection overlay. Hide the link and the row it sits in so it
   doesn't leave an empty gap behind. */
a[href="https://crowdin.com/project/pufferpanel"]{display:none!important}
.v-row:has(> .v-col > a[href="https://crowdin.com/project/pufferpanel"]){display:none!important}

.v-btn:has(.mdi-lightbulb){
  width:52px!important;
  height:26px!important;
  min-width:52px!important;
  padding:0!important;
  border-radius:var(--radius-pill)!important;
  background:var(--ink-150)!important;
  border:1px solid var(--hairline)!important;
  box-shadow:none!important;
  position:relative;
  overflow:visible!important;
}
/* Vuetify's internal .v-btn__content wrapper only shrinks to fit the icon
   (~24x24) and sits centered inside the button — it does NOT stretch to
   the full pill. Since it's itself position:relative, that small centered
   box was the actual coordinate frame the icon was sliding inside, not the
   52x26 track, which is why the slide was invisible. Force it to span the
   whole track so the icon's absolute positioning means what it looks like
   it should mean. */
.v-btn:has(.mdi-lightbulb) .v-btn__content{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
}
.theme--dark.v-application .v-btn:has(.mdi-lightbulb){
  background:var(--ink-800)!important;
  border-color:var(--hairline-inverse)!important;
}

/* Third rebuild: stop hand-drawing shapes with pseudo-elements — that kept
   producing subtly-wrong crescents. The app already ships the full
   Material Design Icons webfont, which has real sun/moon glyphs. Swap the
   existing icon's glyph via `content` (mdi-weather-sunny ⇄
   mdi-moon-waning-crescent, real codepoints pulled straight from the
   font's own stylesheet) and let that icon itself be the sliding knob —
   real, correct icon shapes, one moving element, no cross-layer geometry
   to get wrong. Track inner width is 50px (52px box − 1px border ×2); a
   20px knob at a 4px inset mirrors exactly via a 22px translate. */
.v-btn:has(.mdi-lightbulb) .v-icon.mdi-lightbulb{
  opacity:1!important;
  position:absolute!important;
  top:2px!important;left:4px!important;
  width:20px!important;height:20px!important;
  min-width:20px!important;
  margin:0!important;
  border-radius:50%!important;
  background:#000!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  line-height:20px!important;
  transition:transform var(--dur-slow) var(--ease-bounce),background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)!important;
}
.v-btn:has(.mdi-lightbulb) .mdi-lightbulb::before{content:"\F0599"!important}
.theme--dark.v-application .v-btn:has(.mdi-lightbulb) .v-icon.mdi-lightbulb{
  transform:translateX(22px)!important;
  background:#fff!important;
  color:#000!important;
}
.theme--dark.v-application .v-btn:has(.mdi-lightbulb) .mdi-lightbulb::before{content:"\F0F65"!important}

/* ---------- NAVIGATION DRAWER (inverted, editorial) ---------- */

html body .v-navigation-drawer,
html body .v-navigation-drawer.v-sheet,
html body .v-navigation-drawer .v-list,
html body .v-navigation-drawer .v-sheet{
  background-color:var(--ink-1000)!important;
  color:rgba(255,255,255,.86)!important;
  border-color:var(--hairline-inverse)!important;
}
.v-navigation-drawer{
  border-right:1px solid var(--hairline-inverse)!important;
  transition:width var(--dur-slow) var(--ease-emphasized),
             min-width var(--dur-slow) var(--ease-emphasized),
             max-width var(--dur-slow) var(--ease-emphasized),
             transform var(--dur-slow) var(--ease-emphasized)!important;
}
.v-navigation-drawer .v-navigation-drawer__content{
  transition:width var(--dur-slow) var(--ease-emphasized)!important;
}
.v-navigation-drawer .v-list-item{
  border-radius:var(--radius-sm);
  margin:2px 8px;
  transition:background var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-bounce),
             opacity var(--dur-fast) var(--ease-standard);
  width:calc(100% - 16px);
  animation:pp-rise var(--dur-base) var(--ease-bounce-soft) both;
}
.v-navigation-drawer .v-list-item:hover{transform:translateX(6px)}
.v-navigation-drawer .v-list-item:nth-of-type(1){animation-delay:.02s}
.v-navigation-drawer .v-list-item:nth-of-type(2){animation-delay:.06s}
.v-navigation-drawer .v-list-item:nth-of-type(3){animation-delay:.10s}
.v-navigation-drawer .v-list-item:nth-of-type(4){animation-delay:.14s}
.v-navigation-drawer .v-list-item:nth-of-type(5){animation-delay:.18s}
.v-navigation-drawer .v-list-item:nth-of-type(6){animation-delay:.22s}
.v-navigation-drawer .v-list-item:nth-of-type(7){animation-delay:.26s}
.v-navigation-drawer .v-list-item:nth-of-type(8){animation-delay:.30s}
.v-navigation-drawer .v-list-item:nth-of-type(9){animation-delay:.34s}
.v-navigation-drawer .v-list-item:nth-of-type(10){animation-delay:.38s}
.v-navigation-drawer .v-list-item__icon{
  transform-origin:center;
}
.v-navigation-drawer .v-list-item:nth-of-type(1) .v-list-item__icon{animation-delay:0s}
.v-navigation-drawer .v-list-item:nth-of-type(2) .v-list-item__icon{animation-delay:.15s}
.v-navigation-drawer .v-list-item:nth-of-type(3) .v-list-item__icon{animation-delay:.30s}
.v-navigation-drawer .v-list-item:nth-of-type(4) .v-list-item__icon{animation-delay:.45s}
.v-navigation-drawer .v-list-item:nth-of-type(5) .v-list-item__icon{animation-delay:.60s}
.v-navigation-drawer .v-list-item:nth-of-type(6) .v-list-item__icon{animation-delay:.75s}
.v-navigation-drawer .v-list-item:nth-of-type(7) .v-list-item__icon{animation-delay:.90s}
.v-navigation-drawer .v-list-item:nth-of-type(8) .v-list-item__icon{animation-delay:1.05s}
.v-navigation-drawer .v-list-item:nth-of-type(9) .v-list-item__icon{animation-delay:1.20s}
.v-navigation-drawer .v-list-item:nth-of-type(10) .v-list-item__icon{animation-delay:1.35s}
.v-navigation-drawer .v-list-item__icon .v-icon{
  transition:transform var(--dur-base) var(--ease-bounce)!important;
  display:inline-block;
}
.v-navigation-drawer .v-list-item:hover .v-list-item__icon .v-icon{transform:none}
.v-navigation-drawer .v-list-item--active .v-list-item__icon{animation:none}
.v-navigation-drawer .v-list-item--active{transition:background var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-bounce)}
.v-navigation-drawer .v-list-item__title,
.v-navigation-drawer .v-list-item__content,
.v-navigation-drawer .v-list-item__subtitle,
.v-navigation-drawer .v-subheader,
.v-navigation-drawer a{color:rgba(255,255,255,.86)!important}
.v-navigation-drawer .v-list-item__subtitle{color:rgba(255,255,255,.55)!important}
.v-navigation-drawer .v-list-item__icon .v-icon,
.v-navigation-drawer .v-icon{color:rgba(255,255,255,.55)!important}
.v-navigation-drawer .v-list-item:hover{background:transparent!important}
.v-navigation-drawer .v-list-item::before,
.v-navigation-drawer .v-list-group__header::before,
.v-navigation-drawer .v-list-group__header__prepend-icon::before,
.v-navigation-drawer .v-list-item__icon::before{
  background:transparent!important;
  opacity:0!important;
}
.v-navigation-drawer .v-list-item--active{
  background:transparent!important;
  box-shadow:none;
}
.v-navigation-drawer .v-list-group--active,
.v-navigation-drawer .v-list-group--active > .v-list-group__header,
.v-navigation-drawer .v-list-group--active > .v-list-group__header:hover,
.v-navigation-drawer .v-list-group--active > .v-list-group__items{
  background:transparent!important;
  box-shadow:none!important;
}
.v-navigation-drawer .v-list-item--active .v-list-item__icon,
.v-navigation-drawer .v-list-item--active .v-icon,
.v-navigation-drawer .v-list-item--active .v-list-item__title{color:#fff!important;font-weight:600}
.v-navigation-drawer .v-list-group--active > .v-list-group__header .v-list-group__header__prepend-icon,
.v-navigation-drawer .v-list-group--active > .v-list-group__header .v-list-group__header__prepend-icon .v-icon,
.v-navigation-drawer .v-list-group--active > .v-list-group__header .v-list-item__icon,
.v-navigation-drawer .v-list-group--active > .v-list-group__header .v-list-item__icon .v-icon{
  color:#fff!important;
}
.v-navigation-drawer .v-divider{border-color:var(--hairline-inverse)!important}
.v-navigation-drawer .v-list-item--disabled,
.v-navigation-drawer .v-list-item--disabled *{color:rgba(255,255,255,.3)!important}

html body .v-navigation-drawer.v-navigation-drawer--mini-variant{
  width:var(--pp-drawer-mini-width)!important;
  min-width:var(--pp-drawer-mini-width)!important;
  max-width:var(--pp-drawer-mini-width)!important;
  transition:width var(--dur-slow) var(--ease-emphasized),
             min-width var(--dur-slow) var(--ease-emphasized),
             max-width var(--dur-slow) var(--ease-emphasized)!important;
}
html body .v-navigation-drawer.v-navigation-drawer--mini-variant .v-navigation-drawer__content{
  width:var(--pp-drawer-mini-width)!important;
  overflow-x:hidden;
}
html body .v-navigation-drawer.v-navigation-drawer--mini-variant .v-list-item{
  width:calc(100% - 16px);
  min-height:44px;
  margin:2px 8px;
  padding:0 16px!important;
  justify-content:flex-start;
  transition:background var(--dur-fast) var(--ease-standard),
             opacity var(--dur-fast) var(--ease-standard)!important;
}
html body .v-navigation-drawer.v-navigation-drawer--mini-variant .v-list-item__icon{
  justify-content:flex-start;
  min-width:24px!important;
  width:24px!important;
  margin:0!important;
  transition:none!important;
}
html body .v-navigation-drawer.v-navigation-drawer--mini-variant .v-list-item__content{
  flex:0 0 0!important;
  max-width:0!important;
  opacity:0;
  padding:0!important;
  transition:max-width var(--dur-base) var(--ease-emphasized),
             opacity var(--dur-fast) var(--ease-standard)!important;
}
html body .v-navigation-drawer.v-navigation-drawer--mini-variant .v-list-item:hover{transform:none}

@media(min-width:960px){
  html body:has(.v-navigation-drawer.v-navigation-drawer--mini-variant:not(.v-navigation-drawer--temporary)) .v-main{
    padding-left:var(--pp-drawer-mini-width)!important;
    transition:padding-left var(--dur-slow) var(--ease-emphasized)!important;
  }
}

html body .theme--light.v-application .v-navigation-drawer,
html body .theme--light.v-application .v-navigation-drawer.v-sheet,
html body .theme--light.v-application .v-navigation-drawer .v-list,
html body .theme--light.v-application .v-navigation-drawer .v-sheet{
  background-color:rgba(255,255,255,.96)!important;
  color:var(--ink-800)!important;
  border-color:var(--hairline)!important;
}
.theme--light.v-application .v-navigation-drawer{
  border-right:1px solid var(--hairline)!important;
}
.theme--light.v-application .v-navigation-drawer .v-list-item__title,
.theme--light.v-application .v-navigation-drawer .v-list-item__content,
.theme--light.v-application .v-navigation-drawer .v-list-item__subtitle,
.theme--light.v-application .v-navigation-drawer .v-subheader,
.theme--light.v-application .v-navigation-drawer a{
  color:var(--ink-700)!important;
}
.theme--light.v-application .v-navigation-drawer .v-list-item__subtitle{
  color:var(--ink-500)!important;
}
.theme--light.v-application .v-navigation-drawer .v-list-item__icon .v-icon,
.theme--light.v-application .v-navigation-drawer .v-icon{
  color:var(--ink-500)!important;
}
.theme--light.v-application .v-navigation-drawer .v-list-item--active .v-list-item__icon,
.theme--light.v-application .v-navigation-drawer .v-list-item--active .v-icon,
.theme--light.v-application .v-navigation-drawer .v-list-item--active .v-list-item__title{
  color:var(--ink-1000)!important;
  font-weight:700;
}
.theme--light.v-application .v-navigation-drawer .v-list-group--active > .v-list-group__header .v-list-group__header__prepend-icon,
.theme--light.v-application .v-navigation-drawer .v-list-group--active > .v-list-group__header .v-list-group__header__prepend-icon .v-icon,
.theme--light.v-application .v-navigation-drawer .v-list-group--active > .v-list-group__header .v-list-item__icon,
.theme--light.v-application .v-navigation-drawer .v-list-group--active > .v-list-group__header .v-list-item__icon .v-icon{
  color:var(--ink-1000)!important;
}
.theme--light.v-application .v-navigation-drawer .v-divider{
  border-color:var(--hairline)!important;
}
.theme--light.v-application .v-navigation-drawer .v-list-item--disabled,
.theme--light.v-application .v-navigation-drawer .v-list-item--disabled *{
  color:var(--ink-300)!important;
}

/* ---------- BUTTONS ---------- */

.v-btn{
  border-radius:var(--radius-sm)!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  transition:background-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-bounce),
             transform var(--dur-base) var(--ease-bounce),
             opacity var(--dur-fast) var(--ease-standard)!important;
}
.v-btn:hover{transform:translateY(-3px) scale(1.035)}
.v-btn:active{transform:scale(.94) translateY(0)!important;transition-duration:80ms!important}
.v-btn--rounded,.v-btn--fab{border-radius:var(--radius-pill)!important}
.v-btn--fab:hover{transform:scale(1.12) rotate(8deg)}
.v-btn:not(.v-btn--outlined):not(.v-btn--text):not(.v-btn--icon).v-btn--is-elevated,
.v-btn:not(.v-btn--outlined):not(.v-btn--text):not(.v-btn--icon){box-shadow:none!important}
.v-btn:not(.v-btn--outlined):not(.v-btn--text):not(.v-btn--icon):hover{box-shadow:var(--shadow-md)!important}

.v-btn.primary,.v-btn.v-btn--has-bg.primary{
  background-color:var(--ink-800)!important;
  border-color:var(--ink-800)!important;
}
.v-btn.primary:hover{background-color:var(--ink-700)!important}
.theme--dark .v-btn.primary,.theme--dark .v-btn.v-btn--has-bg.primary{
  background-color:#fff!important;
  border-color:#fff!important;
  color:#000!important;
}
.theme--dark .v-btn.primary:hover{background-color:var(--ink-150)!important}
.v-btn.v-btn--outlined{border:1px solid var(--hairline-strong)!important}
.v-btn.v-btn--outlined:hover{background:var(--ink-100)!important}
.theme--dark .v-btn.v-btn--outlined{border:1px solid var(--hairline-inverse)!important}
.theme--dark .v-btn.v-btn--outlined:hover{background:rgba(255,255,255,.08)!important}
.theme--dark .v-btn--text:hover::before,
.theme--dark .v-btn--icon:hover::before{opacity:.1!important;background:#fff!important}
.v-btn--text:hover::before{opacity:.05!important}
.v-btn__content .v-icon{transition:transform var(--dur-base) var(--ease-bounce)}
.v-btn:hover .v-btn__content .v-icon{transform:scale(1.15)}
.v-btn--icon:hover{transform:scale(1.18) rotate(-8deg)}

/* ---------- SERVER CONTROLS ---------- */

.pp-server-controls{
  padding-left:0!important;
}
.pp-server-controls .v-slide-group__content{
  align-items:center;
  gap:6px;
}
.pp-server-controls .v-btn{
  height:30px!important;
  min-width:0!important;
  padding:0 10px!important;
  margin-right:0!important;
  border:1px solid #000!important;
  border-radius:var(--radius-xs)!important;
  background:#000!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:uppercase!important;
  transition:none!important;
  transform:none!important;
}
.pp-server-controls .v-btn:hover,
.pp-server-controls .v-btn:active,
.pp-server-controls .v-btn:focus{
  background:#000!important;
  color:#fff!important;
  box-shadow:none!important;
  transform:none!important;
  transition:none!important;
}
.pp-server-controls .v-btn::before{
  opacity:0!important;
}
.pp-server-controls .v-icon{
  margin-right:5px!important;
  font-size:15px!important;
  color:currentColor!important;
  transition:none!important;
  transform:none!important;
}
.pp-server-controls .v-btn:hover .v-icon,
.pp-server-controls .v-btn:active .v-icon,
.pp-server-controls .v-btn:focus .v-icon{
  transform:none!important;
}
.theme--dark .pp-server-controls .v-btn{
  border-color:#fff!important;
  background:#fff!important;
  color:#000!important;
}
.theme--dark .pp-server-controls .v-btn:hover,
.theme--dark .pp-server-controls .v-btn:active,
.theme--dark .pp-server-controls .v-btn:focus{
  background:#fff!important;
  color:#000!important;
}

/* ---------- CARDS ---------- */

.v-card{
  border-radius:var(--radius-md)!important;
  border:1px solid var(--hairline);
  box-shadow:var(--shadow-sm)!important;
  transition:box-shadow var(--dur-base) var(--ease-bounce),transform var(--dur-base) var(--ease-bounce);
  animation:pp-rise-big var(--dur-slow) var(--ease-bounce-soft) both;
}
.v-card:hover{box-shadow:var(--shadow-lg)!important;transform:translateY(-6px) scale(1.012)}
.theme--dark .v-card{
  border-color:var(--hairline-inverse)!important;
  background-color:var(--ink-900)!important;
  color:rgba(255,255,255,.9)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.4)!important;
}
.theme--dark .v-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.5)!important}
.v-card__title{font-weight:700!important;letter-spacing:-.01em}
.v-card__subtitle{color:var(--ink-500)!important}
.theme--dark .v-card__subtitle{color:var(--ink-300)!important}
.v-card:nth-of-type(3n+1){animation-delay:.03s}
.v-card:nth-of-type(3n+2){animation-delay:.09s}
.v-card:nth-of-type(3n+3){animation-delay:.15s}

/* ---------- DATA TABLES ---------- */

.v-sheet:has(.v-data-table){
  background:transparent!important;
  box-shadow:none!important;
}
.v-data-table{border-radius:var(--radius-md)!important;overflow:hidden}
.v-data-table > .v-data-table__wrapper > table > thead > tr > th{
  font-weight:700!important;
  text-transform:none!important;
  letter-spacing:.02em;
  color:var(--ink-500)!important;
  border-bottom:1px solid var(--hairline)!important;
}
.v-data-table > .v-data-table__wrapper > table > tbody > tr{
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-bounce);
  animation:pp-rise var(--dur-base) var(--ease-standard) both;
}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover{background:var(--ink-100)!important;transform:scale(1.004)}
.v-data-table > .v-data-table__wrapper > table > tbody > tr > td{border-bottom:1px solid var(--hairline-soft)!important}
.theme--dark .v-data-table{background-color:var(--ink-900)!important}
.theme--dark .v-data-table > .v-data-table__wrapper > table > thead > tr > th{
  color:var(--ink-300)!important;
  border-bottom:1px solid var(--hairline-inverse)!important;
}
.theme--dark .v-data-table > .v-data-table__wrapper > table > tbody > tr:hover{background:rgba(255,255,255,.06)!important}
.theme--dark .v-data-table > .v-data-table__wrapper > table > tbody > tr > td{
  border-bottom:1px solid var(--hairline-inverse)!important;
  color:rgba(255,255,255,.85);
}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:nth-of-type(1){animation-delay:.02s}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:nth-of-type(2){animation-delay:.05s}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:nth-of-type(3){animation-delay:.08s}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:nth-of-type(4){animation-delay:.11s}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:nth-of-type(5){animation-delay:.14s}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:nth-of-type(6){animation-delay:.17s}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:nth-of-type(7){animation-delay:.20s}
.v-data-table > .v-data-table__wrapper > table > tbody > tr:nth-of-type(8){animation-delay:.23s}

/* ---------- SERVER LIST IMAGES ---------- */

.pp-server-list-item{
  min-height:86px!important;
  gap:14px;
}
.pp-server-image-frame{
  position:relative;
  width:82px;
  height:58px;
  flex:0 0 82px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.pp-server-image-tile{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 36%),
    linear-gradient(135deg,var(--ink-800),var(--ink-1000));
  background-size:cover;
  background-position:center;
  color:rgba(255,255,255,.78);
  font-size:24px;
  font-weight:800;
}
.pp-server-image-tile--has-image{
  color:transparent;
}
.pp-server-list-item .v-list-item__avatar{
  margin-left:0!important;
}
.pp-server-list-item .v-list-item__title,
.v-main .v-list a.v-list-item[href*="/server/"] .v-list-item__title{
  font-size:20px!important;
  font-weight:500!important;
  line-height:1.25!important;
  text-transform:uppercase!important;
}
.pp-server-list-item .v-list-item__title *,
.v-main .v-list a.v-list-item[href*="/server/"] .v-list-item__title *{
  font-weight:500!important;
  text-transform:uppercase!important;
}

/* ---------- FORMS ---------- */

/* Remove the reveal-password (eye) toggle everywhere a password field
   appears — login, registration, and elsewhere. Hiding the icon/button
   removes the ability to click it; the field simply stays masked. */
.v-input__icon:has(.mdi-eye),
.v-input__icon:has(.mdi-eye-off),
.v-input__append-inner:has(.mdi-eye),
.v-input__append-inner:has(.mdi-eye-off){
  display:none!important;
}

.v-text-field .v-input__slot,.v-select .v-input__slot{border-radius:var(--radius-sm)!important}
.v-text-field--outlined .v-input__slot fieldset{border-color:var(--hairline)!important;transition:border-color var(--dur-fast) var(--ease-standard)}
.v-text-field--outlined.v-input--is-focused .v-input__slot fieldset{border-color:var(--ink-800)!important;border-width:1px!important}
.v-input--is-focused{border-radius:var(--radius-sm)}
.v-label{font-weight:500}
.v-text-field .v-input__control{transition:opacity var(--dur-fast) var(--ease-standard)}
.theme--dark .v-text-field .v-input__slot,.theme--dark .v-select .v-input__slot{background:rgba(255,255,255,.06)!important}
.theme--dark .v-text-field--outlined .v-input__slot fieldset{border-color:var(--hairline-inverse)!important}
.theme--dark .v-text-field--outlined.v-input--is-focused .v-input__slot fieldset{border-color:#fff!important}
.theme--dark .v-label,.theme--dark input,.theme--dark textarea{color:rgba(255,255,255,.9)!important}

/* ---------- DIALOGS / MENUS ---------- */

.v-dialog{border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-lg)!important;animation:pp-bounce-in var(--dur-slow) var(--ease-bounce) both}
.v-dialog > .v-card{border-radius:var(--radius-lg)!important;animation:none!important}
.v-menu__content{border-radius:var(--radius-sm)!important;box-shadow:var(--shadow-md)!important;border:1px solid var(--hairline);animation:pp-pop var(--dur-base) var(--ease-bounce) both;transform-origin:top left}
.v-overlay--active .v-overlay__scrim{background:var(--ink-1000)!important;transition:opacity var(--dur-base) var(--ease-standard)}
.theme--dark .v-menu__content{border-color:var(--hairline-inverse)!important;background:var(--ink-900)!important;box-shadow:0 16px 40px rgba(0,0,0,.5)!important}
.theme--dark .v-overlay--active .v-overlay__scrim{background:#000!important;opacity:.75!important}

#langs .v-btn.pp-language-button{
  justify-content:flex-start!important;
}
#langs .v-btn.pp-language-button .v-btn__content{
  width:100%;
  justify-content:flex-start!important;
  gap:20px;
}
.pp-language-flag{
  width:24px;
  height:16px;
  flex:0 0 24px;
  display:inline-block;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12);
  background:linear-gradient(135deg,var(--ink-200),var(--ink-50));
}
.theme--dark .pp-language-flag{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.35);
}
.pp-language-label{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- CHIPS / TABS / BADGES ---------- */

.v-chip{
  border-radius:var(--radius-pill)!important;
  font-weight:600!important;
  transition:transform var(--dur-fast) var(--ease-bounce),box-shadow var(--dur-fast) var(--ease-bounce)!important;
  animation:pp-pop var(--dur-base) var(--ease-bounce) both;
}
.v-chip:not(.v-chip--outlined){background:var(--ink-100)!important;color:var(--ink-800)!important}
.v-chip:hover{transform:scale(1.08) translateY(-2px);box-shadow:var(--shadow-sm)!important}
.theme--dark .v-chip:not(.v-chip--outlined){background:rgba(255,255,255,.12)!important;color:#fff!important}
.theme--dark .v-chip--outlined{border-color:var(--hairline-inverse)!important;color:#fff!important}
.v-tabs-bar{background:transparent!important}
.v-tab{text-transform:none!important;font-weight:600!important;letter-spacing:0!important;transition:color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-bounce)!important}
.v-tab:hover{transform:translateY(-2px)}
.v-tabs-slider{background-color:var(--ink-800)!important;height:2px;transition:left var(--dur-base) var(--ease-bounce),width var(--dur-base) var(--ease-bounce)!important}
.theme--dark .v-tabs-slider{background-color:#fff!important}

/* ---------- ALERTS (muted, hairline accent instead of solid fill) ---------- */

.v-alert{border-radius:var(--radius-sm)!important;border:1px solid var(--hairline)!important;box-shadow:none!important;animation:pp-rise var(--dur-base) var(--ease-bounce-soft) both}
.theme--dark .v-alert{border-color:var(--hairline-inverse)!important;background:var(--ink-900)!important;color:rgba(255,255,255,.9)!important}
.v-alert.success--text,.v-alert.v-alert--colored-border.success--text{border-left:3px solid var(--pp-success)!important}
.v-alert.warning--text,.v-alert.v-alert--colored-border.warning--text{border-left:3px solid var(--pp-warning)!important}
.v-alert.error--text,.v-alert.v-alert--colored-border.error--text{border-left:3px solid var(--pp-error)!important}
.v-alert.info--text,.v-alert.v-alert--colored-border.info--text{border-left:3px solid var(--pp-info)!important}

/* ---------- PROGRESS / LOADERS ---------- */

.v-progress-linear{border-radius:var(--radius-pill)!important;overflow:hidden;position:relative}
.v-progress-linear__background{opacity:.10!important}
.v-progress-linear__determinate,.v-progress-linear__indeterminate{transition:width var(--dur-slow) var(--ease-bounce-soft)}
.v-progress-linear::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:200% 100%;
  animation:pp-shimmer 1.6s linear infinite;
}
.v-progress-circular{color:var(--ink-800)!important}

/* ---------- STATUS DOTS (server-status) — the one place motion signals life ---------- */

.server-status,[class*="server-status"]{position:relative;transition:transform var(--dur-base) var(--ease-bounce)}
.server-status.success,.server-status .success{animation:pp-pulse 1.8s var(--ease-standard) infinite}
.server-status.error,.server-status .error{animation:pp-pulse-error 1.8s var(--ease-standard) infinite}
.server-status:hover{transform:scale(1.3)}

/* ---------- MISC INTERACTIVE POLISH ---------- */

.v-input--switch__track,.v-input--selection-controls__input{transition:transform var(--dur-fast) var(--ease-bounce)!important}
.v-input--selection-controls__ripple{transition:transform var(--dur-base) var(--ease-bounce)!important}
.v-input--is-label-active .v-input--selection-controls__input{transform:scale(1.1)}
.v-badge__badge{animation:pp-pop var(--dur-base) var(--ease-bounce) both}
.vts{animation:pp-bounce-in var(--dur-base) var(--ease-bounce) both}
.v-expansion-panel{transition:box-shadow var(--dur-base) var(--ease-standard)}
.v-expansion-panel-header__icon .v-icon{transition:transform var(--dur-base) var(--ease-bounce)!important}
.v-list-item__action .v-icon,.v-list-item__avatar .v-icon{transition:transform var(--dur-base) var(--ease-bounce)}
.v-list-item:hover .v-list-item__action .v-icon{transform:scale(1.15)}

/* ---------- SERVER FILE MANAGER ---------- */

.pp-file-manager{
  overflow:hidden;
  border:1px solid var(--hairline)!important;
  border-radius:var(--radius-md)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:var(--shadow-sm)!important;
}
.theme--dark .pp-file-manager{
  border-color:var(--hairline-inverse)!important;
  background:rgba(10,10,10,.76)!important;
}
.pp-file-manager .v-card__title{
  min-height:46px;
  padding:10px 12px!important;
  border-bottom:1px solid var(--hairline-soft);
}
.theme--dark .pp-file-manager .v-card__title{
  border-bottom-color:var(--hairline-inverse);
}
.pp-file-manager .v-card__title > span.flex-grow-1{
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.pp-file-manager .v-card__title .v-btn{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  margin-left:2px;
}
.pp-file-manager .v-card__title .v-icon{
  font-size:18px!important;
}
.pp-file-manager .v-card__subtitle{
  margin:10px 12px 0;
  padding:7px 10px;
  border:1px solid var(--hairline-soft);
  border-radius:var(--radius-sm);
  background:var(--ink-50);
  color:var(--ink-600)!important;
  font-family:var(--font-mono)!important;
  font-size:12px!important;
  line-height:1.35!important;
  white-space:nowrap;
  overflow-x:auto;
}
.theme--dark .pp-file-manager .v-card__subtitle{
  border-color:var(--hairline-inverse);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.68)!important;
}
.pp-file-manager .v-card__text{
  padding:10px 12px 14px!important;
}
.pp-file-manager .v-list{
  margin-bottom:12px;
  overflow:hidden;
  border:1px solid var(--hairline-soft);
  border-radius:var(--radius-sm);
  background:transparent!important;
  animation:none!important;
}
.theme--dark .pp-file-manager .v-list{
  border-color:var(--hairline-inverse);
}
.pp-file-manager .v-list-item{
  min-height:44px!important;
  padding:0 8px!important;
  border-bottom:1px solid var(--hairline-soft);
}
.pp-file-manager .v-list-item:last-child{
  border-bottom:0;
}
.theme--dark .pp-file-manager .v-list-item{
  border-bottom-color:var(--hairline-inverse);
}
.pp-file-manager .v-list-item:hover{
  background:var(--ink-100)!important;
}
.theme--dark .pp-file-manager .v-list-item:hover{
  background:rgba(255,255,255,.06)!important;
}
.pp-file-manager .v-list-item__avatar{
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  margin:6px 10px 6px 0!important;
}
.pp-file-manager .v-list-item__avatar .v-icon{
  font-size:20px!important;
  color:var(--ink-600)!important;
}
.theme--dark .pp-file-manager .v-list-item__avatar .v-icon{
  color:rgba(255,255,255,.68)!important;
}
.pp-file-manager .v-list-item__title{
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.25!important;
  text-transform:none!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pp-file-manager .v-list-item__subtitle{
  margin-top:2px!important;
  color:var(--ink-500)!important;
  font-size:11px!important;
  line-height:1.25!important;
}
.theme--dark .pp-file-manager .v-list-item__subtitle{
  color:rgba(255,255,255,.52)!important;
}
.pp-file-manager .v-list-item__action{
  align-self:center!important;
  gap:2px;
  margin:0!important;
}
.pp-file-manager .v-list-item__action .v-btn{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
}
.pp-file-manager .v-list-item__action .v-icon{
  font-size:18px!important;
}
.pp-file-manager .v-file-input{
  margin-top:12px!important;
  font-size:12px!important;
}
.pp-file-manager .v-file-input .v-input__slot{
  min-height:40px!important;
  border:1px solid var(--hairline-soft)!important;
  border-radius:var(--radius-sm)!important;
  background:var(--ink-50)!important;
}
.theme--dark .pp-file-manager .v-file-input .v-input__slot{
  border-color:var(--hairline-inverse)!important;
  background:rgba(255,255,255,.05)!important;
}
.pp-file-manager .v-btn.v-btn--block{
  height:40px!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:0!important;
}

/* ---------- CONSOLE (terminal-card treatment) ---------- */

.console{
  background:var(--ink-1000)!important;
  color:#e6e6e6!important;
  font-family:var(--font-mono)!important;
  font-size:12px!important;
  line-height:1.42!important;
  border-radius:var(--radius-md);
  border:1px solid var(--hairline-inverse);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),var(--shadow-md);
  padding-top:32px!important;
  position:relative;
  height:68vh!important;
  min-height:520px!important;
}
.console::before{
  content:"Server's Virtual Console";
  position:sticky;
  top:0;
  z-index:3;
  height:31px;
  display:flex;
  align-items:center;
  margin:-32px -4px 1px;
  padding-left:74px;
  background:
    radial-gradient(circle at 19px 15px,#ff5f56 0 5px,transparent 5.5px),
    radial-gradient(circle at 37px 15px,#ffbd2e 0 5px,transparent 5.5px),
    radial-gradient(circle at 55px 15px,#27c93f 0 5px,transparent 5.5px),
    var(--ink-1000);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(255,255,255,.68);
  pointer-events:none;
  transition:color var(--dur-fast) var(--ease-standard);
}
.console:hover::before{color:rgba(255,255,255,.88)}
.pp-console-shell{
  position:relative;
}
.pp-console-shell .console::before{
  content:none!important;
}
.pp-console-header{
  position:absolute;
  top:1px;
  left:1px;
  right:1px;
  z-index:5;
  height:31px;
  display:flex;
  align-items:center;
  padding-left:74px;
  border-radius:calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
  background:
    radial-gradient(circle at 19px 15px,#ff5f56 0 5px,transparent 5.5px),
    radial-gradient(circle at 37px 15px,#ffbd2e 0 5px,transparent 5.5px),
    radial-gradient(circle at 55px 15px,#27c93f 0 5px,transparent 5.5px),
    var(--ink-1000);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  pointer-events:none;
}
.console::after{
  content:"";position:absolute;bottom:10px;right:14px;width:8px;height:16px;
  background:#e6e6e6;animation:pp-cursor-blink 1s step-end infinite;
}
.consoleLine{
  font-family:var(--font-mono);
  font-size:12px!important;
  line-height:1.42!important;
  animation:pp-fade var(--dur-fast) var(--ease-standard) both;
}

body.pp-server-page .v-main h1:first-of-type{
  text-transform:uppercase!important;
}

@media(max-width:700px){
  .console{
    height:60vh!important;
    min-height:420px!important;
  }
}

/* ---------- LOGIN SCREEN ----------
   Rebuilt per playbook.md: paper-white canvas, no gradients/glow, hairline
   card instead of a shadow, pill buttons + pill inputs, single black CTA.
   No dedicated login route/class exists in the app — the login form is
   just a v-card with a password field sitting in the normal page flow, so
   :has() detects that card. A bare "has a password field" check also
   matched the Account page's own change-password card once logged in, so
   everything here is gated behind "the nav drawer has no populated list
   items" (i.e. logged out) — an authenticated settings page is never
   touched no matter what password fields it contains. */

/* The language picker (globe icon) opens via Vuetify's <v-overlay>, which
   gets a low z-index (~5-6) set dynamically by Vuetify's JS. The login
   card is position:fixed with z-index:20 so it can float above the app
   shell, which incidentally also put it above that overlay. Only boost
   the overlay above the card while logged out — leaves normal in-app
   overlay/dialog stacking completely untouched. */
body:not(:has(.v-navigation-drawer .v-list-item)) .v-overlay{
  z-index:9999!important;
}

/* The logged-out login screen is intentionally fixed. Hide and disable
   the global theme/language controls there; both remain available inside
   the app after signing in. */
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]) .v-app-bar .v-btn:has(.mdi-lightbulb),
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]) .v-app-bar .v-btn:has(.mdi-earth){
  display:none!important;
  pointer-events:none!important;
}

/* Match the top login header to the central login box: dark translucent
   glass, same blur, same soft border language, floating over the space
   scene instead of reading as a separate light/dark toolbar. */
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]) .v-app-bar.v-toolbar,
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]) .v-app-bar.v-toolbar.v-sheet{
  background:rgba(13,16,28,.58)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.32)!important;
  color:rgba(255,255,255,.92)!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]) .v-app-bar.v-toolbar .v-icon,
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]) .v-app-bar.v-toolbar .v-btn{
  color:rgba(255,255,255,.86)!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]) .v-app-bar.v-toolbar .v-toolbar__title{
  background-image:url("/img/pomsera/pomsera-wordmark-white.png")!important;
}

@keyframes pp-field-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pp-runner-slide{from{transform:translateX(-110%)}to{transform:translateX(210%)}}

#pp-login-runner{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#020409;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms var(--ease-standard);
}
body.pp-login-loading #pp-login-runner{
  opacity:1;
  pointer-events:auto;
}
.pp-login-runner__panel{
  width:min(340px,84vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.pp-login-runner__mark{
  width:min(196px,60vw);
  height:32px;
  background:url("/img/pomsera/pomsera-wordmark-white.png") no-repeat center/contain;
}
.pp-login-runner__pill{
  width:100%;
  height:6px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  overflow:hidden;
  position:relative;
}
.pp-login-runner__pill::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:34%;
  border-radius:var(--radius-pill);
  background:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.34);
  animation:pp-runner-slide 1.18s var(--ease-emphasized) infinite;
}
.pp-login-runner__text{
  font-family:var(--font-sans)!important;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:0;
  color:rgba(255,255,255,.72);
}
body.pp-login-ready #pp-login-runner{
  opacity:0;
  pointer-events:none;
}

/* The animated deep-space scene (nebulae, star parallax, black hole with
   accretion disk and lensing) is rendered by /js/pomsera-space.js on a
   fixed canvas at z-index:-1. Here we only guarantee the page behind it is
   space-black and that Vuetify's opaque app wrapper doesn't paint over the
   canvas. Same logged-out gating as everything else in this section. */
/* Stacking subtlety: because html has its own background in this theme,
   body's background does NOT propagate to the document canvas — it paints
   in normal-flow order, i.e. ON TOP of negative-z-index children like the
   space canvas. So the dark base color must live on html, with body and
   the Vuetify app wrapper both transparent, for the canvas to show. */
html:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]){
  background:#020409!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]){
  background:transparent!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)):has(.v-card:not(.v-dialog .v-card) input[type="password"]) .v-application{
  background:transparent!important;
}

/* Dark glassmorphism panel floating over the space scene: translucent
   near-black fill, backdrop blur, thin light border, deep soft shadow. */
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]){
  position:fixed!important;
  top:50%!important;left:50%!important;
  margin:0!important;
  width:min(400px,92vw)!important;
  max-width:400px!important;
  z-index:20;
  padding:8px 8px 24px!important;
  transform:translate(-50%,-50%)!important;
  background:rgba(13,16,28,.58)!important;
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.65)!important;
  animation:pp-bounce-in 760ms var(--ease-bounce) both;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]):hover{
  transform:translate(-50%,-50%)!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.65)!important;
}
/* Replace whatever heading renders the word "Login" with the wordmark,
   whichever of Vuetify's title classes the template happens to use. */
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-card__title,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .headline,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .title{
  text-indent:-9999px!important;
  overflow:visible!important;
  white-space:nowrap;
  background:url("/img/pomsera/pomsera-wordmark-white.png") no-repeat center/contain;
  width:100%!important;
  min-height:56px;
  margin:16px 0 12px;
  animation:pp-fade 640ms var(--ease-standard) both;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-toolbar{
  background:transparent!important;box-shadow:none!important;
  height:auto!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-toolbar .v-toolbar__title{
  background-image:url("/img/pomsera/pomsera-wordmark-white.png")!important;
  width:100%!important;
  min-width:0!important;
  height:64px!important;
  margin:0 auto;
}

/* The card is dark glass in both themes, so every descendant gets light
   text regardless of the light/dark setting. Blanket rule; the more
   specific rules below (muted labels/icons, black CTA text) win on top of
   it via their own higher specificity. */
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]),
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) *{
  color:rgba(255,255,255,.92)!important;
}

/* Pill inputs + pill CTA, straight out of the playbook's component vocabulary.
   Vuetify's raw text-field (underline artifacts, cramped height, off-center
   icons) is what was reading as "ugly" — this suppresses all of that and
   rebuilds it as a clean, generously-sized pill field. */
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input{
  animation:pp-field-in var(--dur-base) var(--ease-bounce-soft) both;
  margin-top:0!important;
  margin-bottom:2px!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__control{
  min-height:52px!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__slot{
  border-radius:var(--radius-pill)!important;
  background:rgba(255,255,255,.07)!important;
  padding:0 22px!important;
  min-height:52px!important;
  margin-bottom:6px!important;
  box-shadow:inset 0 0 0 1px transparent!important;
  transition:box-shadow var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__slot::before,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__slot::after{
  display:none!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-text-field--outlined .v-input__slot fieldset{
  border-radius:var(--radius-pill)!important;
  border-color:rgba(255,255,255,.14)!important;
  transition:border-color var(--dur-base) var(--ease-standard)!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-text-field--outlined.v-input--is-focused .v-input__slot fieldset{
  border-color:rgba(255,255,255,.14)!important;
  border-width:1px!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input--is-focused .v-input__slot{
  box-shadow:none!important;
  background:rgba(255,255,255,.11)!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) input:focus-visible,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input:focus-visible,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__slot:focus-visible,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn:focus-visible{
  outline:none!important;
  box-shadow:none!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) input{
  font-size:15px!important;
  caret-color:#fff!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #14182a inset!important;
  -webkit-text-fill-color:#fff!important;
  caret-color:#fff!important;
}
/* Kill the outlined field's border-notch mechanism entirely (it was
   computing the notch gap for a rectangular field, not our pill, which is
   what let the label drift/overlap the border as it floated). The label is
   pinned as a small static caption above the pill instead — it never
   animates or migrates into the border, so it can't "move out of the box". */
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-text-field--outlined fieldset legend{
  width:0!important;
}
/* Label stays INSIDE the pill, vertically centered exactly like a normal
   placeholder — no floating, no scaling, no migrating into the border.
   The only motion allowed is a fade-out once you focus or start typing,
   so it behaves like a placeholder without ever leaving the box. */
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-label{
  position:absolute!important;
  top:50%!important;
  left:0!important;
  transform:translateY(-50%)!important;
  color:rgba(255,255,255,.42)!important;
  font-size:15px!important;
  font-weight:400!important;
  max-width:none!important;
  opacity:1;
  transition:opacity var(--dur-fast) var(--ease-standard)!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input--is-focused .v-label,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input--is-label-active .v-label{
  opacity:0!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__prepend-inner,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__append-inner{
  margin-top:0!important;
  align-self:center!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__prepend-inner .v-icon,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input__append-inner .v-icon{
  color:rgba(255,255,255,.42)!important;
  transition:color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-bounce)!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input--is-focused .v-input__prepend-inner .v-icon,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input--is-focused .v-input__append-inner .v-icon{
  color:#fff!important;
  transform:scale(1.12);
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-messages{
  padding-left:20px!important;
  font-size:12px!important;
  color:rgba(255,255,255,.5)!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-text-field__details{
  margin-bottom:2px!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input:nth-of-type(1){animation-delay:.10s}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input:nth-of-type(2){animation-delay:.18s}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-input:nth-of-type(3){animation-delay:.26s}

/* CTA: the one bright element on the glass — white pill, black label.
   The .v-btn__content color rules out-rank the blanket white-text rule
   above (same prefix + more compound selectors), so the label stays black. */
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn.primary,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn[type="submit"]{
  border-radius:var(--radius-pill)!important;
  background-color:#fff!important;
  color:#0a0a0a!important;
  height:44px!important;
  width:100%;
  animation:pp-field-in var(--dur-base) var(--ease-bounce-soft) .34s both;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn.primary .v-btn__content,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn[type="submit"] .v-btn__content,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn.primary .v-btn__content *,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn[type="submit"] .v-btn__content *{
  color:#0a0a0a!important;
}
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn.primary:hover,
body:not(:has(.v-navigation-drawer .v-list-item)) .v-card:not(.v-dialog .v-card):has(input[type="password"]) .v-btn[type="submit"]:hover{
  background-color:#e9eaef!important;
}

/* ---------- TOOLTIPS ---------- */

.v-tooltip__content{
  background:var(--ink-800)!important;
  border-radius:var(--radius-xs)!important;
  font-weight:500;
  opacity:1!important;
  animation:pp-pop var(--dur-fast) var(--ease-bounce) both;
}

/* ---------- STAT CHARTS (CPU / MEMORY) ---------- */

/* Card behaves like a stat tile: overline label, live value, chart.
   Hover-lift is disabled here so the crosshair/tooltip stays steady. */
.pp-chart-card:hover{transform:none!important;box-shadow:var(--shadow-sm)!important}
.theme--dark .pp-chart-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.4)!important}

.pp-chart-card .v-card__title{
  padding-top:12px;
  padding-bottom:0;
  font-size:12px!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.14em!important;
  color:var(--ink-500)!important;
}
.theme--dark .pp-chart-card .v-card__title{color:var(--ink-400)!important}

.pp-chart-card .v-card__text{position:relative;padding-top:36px;padding-bottom:6px}

/* Live current-value readout (populated by pomsera-charts.js) */
.pp-chart-now{
  position:absolute;
  top:0;
  left:16px;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.2;
  color:var(--ink-900);
  pointer-events:none;
  animation:pp-fade var(--dur-base) var(--ease-standard) both;
}
.theme--dark .pp-chart-now{color:var(--ink-0)}

/* SVG text: theme sans, quiet and small */
.pp-chart-card .apexcharts-text,
.pp-chart-card .apexcharts-text tspan{
  font-family:var(--font-sans)!important;
  font-size:11px;
}

/* Single series — a one-swatch legend restates the title; hide it
   (also set in config, this covers the first paint) */
.pp-chart-card .apexcharts-legend{display:none!important}

/* Tooltip chrome: hairline card, soft shadow, value leads */
.apexcharts-tooltip{
  border-radius:var(--radius-sm)!important;
  font-family:var(--font-sans)!important;
  box-shadow:var(--shadow-md)!important;
  backdrop-filter:blur(10px);
}
.apexcharts-tooltip.apexcharts-theme-light{
  background:rgba(255,255,255,.94)!important;
  border:1px solid var(--hairline)!important;
}
.apexcharts-tooltip.apexcharts-theme-dark{
  background:rgba(22,22,24,.92)!important;
  border:1px solid var(--hairline-inverse)!important;
}
.apexcharts-tooltip-title{
  background:transparent!important;
  border-bottom:1px solid var(--hairline)!important;
  font-family:var(--font-sans)!important;
  font-size:11px!important;
  font-weight:600!important;
  padding:6px 10px 4px!important;
}
.apexcharts-theme-dark .apexcharts-tooltip-title{border-bottom-color:var(--hairline-inverse)!important}
.apexcharts-tooltip-series-group{padding:4px 10px 4px!important}
.apexcharts-tooltip-text-y-value{font-weight:700!important}


/* Breathing room between the stacked CPU / Memory cards */
.row.pp-chart-row + .row.pp-chart-row{margin-top:14px}

/* ---------- EZ COMMAND TAB (Vintage Story) ---------- */

/* Panel row is a plain div injected after the tab bar; shown only in EZ mode.
   In EZ mode every real tab row is hidden but the tab bar stays. */
.pp-ez-row{display:none;width:100%;margin:12px 0 0;animation:pp-rise var(--dur-base) var(--ease-standard) both}
body.pp-ez-active .pp-ez-row{display:block}
body.pp-ez-active .v-main .container:has(.pp-ez-tabbar) > .row:not(.pp-ez-tabbar){display:none!important}

/* The slide-group measured its content before our button existed, so it
   clips the extra width. Let the tab strip wrap instead of cropping. */
.pp-ez-tabbar .v-slide-group__wrapper{overflow:visible!important;contain:none!important}
.pp-ez-tabbar .v-slide-group__content{flex-wrap:wrap;row-gap:6px}

/* injected tab button */
.pp-ez-tab{margin-left:4px;flex:0 0 auto}
.pp-ez-tab .v-icon{margin-left:8px;font-size:18px}
.pp-ez-tab--active{background:rgba(0,0,0,.08)!important;border-radius:var(--radius-pill)}
.theme--dark .pp-ez-tab--active{background:rgba(255,255,255,.14)!important}
body.pp-ez-active .pp-ez-tabbar .v-btn--active:not(.pp-ez-tab){opacity:.5}

/* the panel — themed via variables so it follows light/dark */
.pp-ez-panel{
  --ez-bg:var(--ink-0);
  --ez-border:var(--hairline);
  --ez-text:var(--ink-800);
  --ez-title:var(--ink-1000);
  --ez-muted:var(--ink-500);
  --ez-faint:var(--ink-400);
  --ez-chip-bg:var(--ink-50);
  --ez-chip-text:var(--ink-800);
  --ez-input-bg:var(--ink-0);
  --ez-input-bg-focus:var(--ink-0);
  --ez-input-border-focus:var(--ink-600);
  --ez-preview-bg:var(--ink-100);
  --ez-preview-text:var(--ink-600);
  --ez-invert-bg:var(--ink-1000);
  --ez-invert-text:var(--ink-0);
  --ez-shadow:var(--shadow-sm);
  background:var(--ez-bg);
  border:1px solid var(--ez-border);
  border-radius:var(--radius-md);
  box-shadow:var(--ez-shadow);
  color:var(--ez-text);
  padding:20px 22px 24px;
  overflow:visible;
}
.theme--dark .pp-ez-panel{
  --ez-bg:var(--ink-900);
  --ez-border:var(--hairline-inverse);
  --ez-text:rgba(255,255,255,.9);
  --ez-title:var(--ink-0);
  --ez-muted:var(--ink-400);
  --ez-faint:var(--ink-500);
  --ez-chip-bg:rgba(255,255,255,.05);
  --ez-chip-text:rgba(255,255,255,.88);
  --ez-input-bg:rgba(255,255,255,.06);
  --ez-input-bg-focus:rgba(255,255,255,.09);
  --ez-input-border-focus:rgba(255,255,255,.45);
  --ez-preview-bg:rgba(255,255,255,.04);
  --ez-preview-text:var(--ink-200);
  --ez-invert-bg:var(--ink-0);
  --ez-invert-text:var(--ink-1000);
  --ez-shadow:0 2px 8px rgba(0,0,0,.4);
}

.pp-ez-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:2px}
.pp-ez-title{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ez-title)}
.pp-ez-sub{font-size:12px;color:var(--ez-muted)}

.pp-ez-status{min-height:18px;font-size:12px;color:var(--ez-muted);margin:4px 0 2px;font-family:var(--font-mono)}
.pp-ez-status--ok{color:var(--pp-success)}
.pp-ez-status--err{color:var(--pp-error)}
.pp-ez-status--warn{color:var(--pp-warning)}

.pp-ez-section{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ez-muted);margin:18px 0 8px;padding-top:14px;
  border-top:1px solid var(--ez-border);
}

/* quick actions */
.pp-ez-quick{display:flex;flex-direction:column;gap:10px}
.pp-ez-quick-group{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pp-ez-quick-label{flex:0 0 92px;font-size:12px;color:var(--ez-faint);font-weight:600}
.pp-ez-quick-row{display:flex;gap:8px;flex-wrap:wrap}

.pp-ez-chip{
  border:1px solid var(--ez-border);
  border-radius:var(--radius-pill);
  background:var(--ez-chip-bg);
  color:var(--ez-chip-text);
  font:600 12.5px/1 var(--font-sans);
  padding:9px 16px;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-bounce);
}
.pp-ez-chip:hover{background:var(--ez-invert-bg);border-color:var(--ez-invert-bg);color:var(--ez-invert-text);transform:translateY(-1px)}
.pp-ez-chip:active{transform:translateY(0) scale(.97)}
.pp-ez-chip--history{font-family:var(--font-mono);font-weight:400;font-size:12px}

/* builder */
.pp-ez-builder{display:flex;flex-direction:column;gap:12px}
.pp-ez-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.pp-ez-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.pp-ez-field--grow{grid-column:span 2}
.pp-ez-field-label{font-size:11px;color:var(--ez-muted);font-weight:600;letter-spacing:.02em}
.pp-ez-field input,.pp-ez-field select,.pp-ez-custom{
  height:42px;
  border:1px solid var(--ez-border);
  border-radius:var(--radius-pill);
  background:var(--ez-input-bg);
  color:var(--ez-text);
  font:400 13.5px/1 var(--font-sans);
  padding:0 16px;
  outline:none;
  width:100%;
  transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);
}
.pp-ez-field input:focus,.pp-ez-field select:focus,.pp-ez-custom:focus{
  border-color:var(--ez-input-border-focus);
  background:var(--ez-input-bg-focus);
}
.pp-ez-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888890' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:36px}
.pp-ez-field select option{background:var(--ez-bg);color:var(--ez-text)}

.pp-ez-builder-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp-ez-preview{
  flex:1 1 260px;
  font:400 13px/1.4 var(--font-mono);
  color:var(--ez-preview-text);
  background:var(--ez-preview-bg);
  border:1px dashed var(--ez-border);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  overflow-x:auto;white-space:nowrap;
}
.pp-ez-preview--incomplete{color:var(--ez-faint)}

.pp-ez-btn{
  border:1px solid var(--ez-border);
  border-radius:var(--radius-pill);
  font:700 13px/1 var(--font-sans);
  padding:0 22px;height:42px;cursor:pointer;
  transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-bounce);
}
.pp-ez-btn--primary{background:var(--ez-invert-bg);color:var(--ez-invert-text);border-color:var(--ez-invert-bg)}
.pp-ez-btn--primary:hover{opacity:.85}
.pp-ez-btn--primary:active{transform:scale(.97)}

/* custom + history */
.pp-ez-customrow{display:flex;gap:10px;flex-wrap:wrap}
.pp-ez-custom{flex:1 1 260px;font-family:var(--font-mono)!important;font-size:13px!important}
.pp-ez-history{display:flex;gap:8px;flex-wrap:wrap}
.pp-ez-empty{font-size:12px;color:var(--ez-faint)}

@media (max-width:700px){
  .pp-ez-panel{padding:16px 14px 18px}
  .pp-ez-quick-label{flex-basis:100%}
  .pp-ez-field--grow{grid-column:span 1}
}