/*
Theme Name: Neon Crest Minimal
Theme URI: https://yourdomain.example
Author: Jamie
Version: 1.0
Description: Clean neon WordPress theme with subtle Minecraft accents.
Text Domain: neon-crest
*/

:root{
  --bg:#0b0f14;
  --card-bg: rgba(255,255,255,0.03);
  --neon-blue:#00d0ff;
  --neon-orange:#ff8a00;
  --muted-green:#6aa84f;
  --glass-border: rgba(255,255,255,0.06);
  --radius:12px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:linear-gradient(180deg,var(--bg) 0%, #071018 100%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  /* Keeps a stray wide element from making the whole page scroll sideways. */
  overflow-x:hidden;
}
img{max-width:100%;height:auto}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.site-main{padding:1.5rem 0}

/* Visually hidden but available to screen readers. */
.screen-reader-text{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 1rem;
  margin:1rem 0;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  border:1px solid var(--glass-border);
  backdrop-filter: blur(6px);
}

/* The auto margin soaks up all slack, so everything after the brand clumps
   against the right edge - which is what parks the clock in the corner. */
.site-header > .brand{margin-right:auto}

/* Brand */
.brand h1{margin:0;font-size:1rem}
.brand p{margin:0;font-size:.8rem;color:rgba(230,238,246,0.7)}

/* Primary navigation */
.nav{display:flex;gap:.25rem;list-style:none;padding:0;margin:0}
.nav a{
  display:block;
  color:inherit;
  text-decoration:none;
  padding:.4rem .6rem;
  border-radius:8px;
}
.nav a:hover{background:rgba(255,255,255,.05)}

/* Burger toggle, shown only on narrow screens. */
.menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--glass-border);
  border-radius:10px;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.menu-toggle__box{display:block;position:relative;width:18px;height:12px}
.menu-toggle__box span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}
.menu-toggle__box span:nth-child(1){top:0}
.menu-toggle__box span:nth-child(2){top:5px}
.menu-toggle__box span:nth-child(3){top:10px}
.site-header.is-menu-open .menu-toggle__box span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.site-header.is-menu-open .menu-toggle__box span:nth-child(2){opacity:0}
.site-header.is-menu-open .menu-toggle__box span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:900px){
  .site-header{flex-wrap:wrap;gap:.75rem}
  /* A zero flex-basis matters here: with an auto basis the brand grows to fill
     the row before the clock and burger are placed, which pushed them onto
     rows of their own on small phones. Basing it at 0 means the brand only
     takes what is genuinely left over. */
  .brand{flex:1 1 0;min-width:0}
  .brand img{max-width:100%}

  /* Row one is brand / clock / burger, row two is the dropped-down menu, so
     the clock lands in the corner on mobile too instead of being pushed
     below the fold. */
  .site-header > .brand{order:1}
  .server-clock--header{order:2}
  .menu-toggle{order:3;display:inline-flex}

  .main-nav{order:4;display:none;flex-basis:100%;width:100%;margin-top:.25rem}
  .site-header.is-menu-open .main-nav{display:block}

  /* "Server Time" is the first thing to go - the time itself carries the
     meaning and the dot already signals it is live. */
  .server-clock--header .server-clock__label{display:none}

  .nav{flex-direction:column;gap:0}
  .nav li{width:100%}
  .nav li + li{border-top:1px solid var(--glass-border)}
}

@media (max-width:480px){
  /* Drop the seconds so the bar cannot crowd the burger on small phones. */
  .server-clock--header{
    gap:.4rem;
    padding:.3rem .45rem;
    font-size:.8rem;
  }
  .server-clock--header .server-clock__ss{display:none}
}

@media (prefers-reduced-motion:reduce){
  .menu-toggle__box span{transition:none}
}

/* Hero */
.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:2rem;
  margin:1rem 0;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  position:relative;
  overflow:hidden;
}
.hero .title{font-size:2rem;margin:0 0 .5rem 0}
.hero .subtitle{color:rgba(230,238,246,0.75)}
.hero__main{flex:1 1 auto;min-width:0}
.hero__actions{margin:1rem 0 0}
.hero__actions .btn + .btn{margin-left:.5rem}
.btn--store{background:linear-gradient(90deg,var(--neon-orange), #ffb36b)}
.hero__aside{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;min-width:220px}
.hero__stat{width:220px;text-align:center}
.hero__stat-value{margin-top:.25rem;font-weight:700}
.hero__stat-value + .small{margin-top:.5rem}

/* Glass card */
.card{
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}

/* Neon button */
.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:10px;
  color:#041018;
  background:linear-gradient(90deg,var(--neon-blue), #66f0ff);
  text-decoration:none;
  font-weight:600;
  box-shadow: 0 0 18px rgba(0,208,255,0.18), inset 0 -2px 6px rgba(0,0,0,0.25);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow: 0 0 28px rgba(0,208,255,0.28); }

/* Neon outline utility */
.neon-outline{ position:relative; }
.neon-outline::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  box-shadow: 0 0 18px rgba(0,208,255,0.12);
  pointer-events:none;
}

/* Pixel accent */
.pixel-accent{
  border:2px solid rgba(255,255,255,0.04);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.01) inset;
  image-rendering: pixelated;
}

/* Cards grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid{grid-template-columns:1fr} }

/* Footer */
.site-footer{
  margin-top:2rem;
  padding:2rem 1rem;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.5));
  color:rgba(230,238,246,0.7);
  font-size:.9rem;
}

/* Footer widget columns */
.footer-widgets{display:grid;gap:1rem;margin-bottom:1.5rem}
.footer-widgets.cols-1{grid-template-columns:1fr}
.footer-widgets.cols-2{grid-template-columns:repeat(2,1fr)}
.footer-widgets.cols-3{grid-template-columns:repeat(3,1fr)}
.footer-widgets.cols-4{grid-template-columns:repeat(4,1fr)}
.footer-widgets .widget{margin:0}
.footer-widgets .widget-title{margin:0 0 .5rem;font-size:1rem}
.footer-widgets ul{list-style:none;padding:0;margin:0}
.footer-widgets li + li{margin-top:.35rem}

/* Footer bar */
.footer-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-links{flex-wrap:wrap}
.footer-credit{margin-top:1rem;font-size:.85rem;color:rgba(230,238,246,0.6)}

/* Live server clock. Shared by the top bar and the footer; which of the two
   actually renders is decided by neoncrest_server_clock(). */
.server-clock{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  font-size:.85rem;
  line-height:1.2;
  white-space:nowrap;
  color:rgba(230,238,246,0.7);
}
.server-clock--footer{margin:.9rem 0 0}
.server-clock--header{
  flex:0 0 auto;
  padding:.35rem .6rem;
  border:1px solid var(--glass-border);
  border-radius:10px;
}
.server-clock__dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--neon-banner-accent,#00d0ff);
  box-shadow:0 0 8px var(--neon-banner-accent,#00d0ff);
  animation:neon-footer-pulse 3s ease-in-out infinite;
}
.server-clock__value{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  letter-spacing:.02em;
  color:#e6eef6;
}
.server-clock__zone{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(230,238,246,0.55);
}

@keyframes neon-footer-pulse{
  0%,100%{opacity:1}
  50%{opacity:.3}
}

@media (prefers-reduced-motion:reduce){
  .server-clock__dot{animation:none}
}

@media (max-width:980px){
  .footer-widgets.cols-3,.footer-widgets.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .footer-widgets{grid-template-columns:1fr}
}

/* Utilities */
.kv{display:flex;gap:.5rem;align-items:center}
.small{font-size:.85rem;color:rgba(230,238,246,0.7)}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* Cursor glow (off by default)
   Decorative light that trails the pointer. Size / colour / brightness come
   from the customizer as CSS variables. */
.neon-glow{
  position:fixed;
  top:0;
  left:0;
  width:var(--neon-glow-size,340px);
  height:var(--neon-glow-size,340px);
  margin:calc(var(--neon-glow-size,340px) / -2) 0 0 calc(var(--neon-glow-size,340px) / -2);
  pointer-events:none;
  z-index:1;
  will-change:transform;
}
.neon-glow__light{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  opacity:var(--neon-glow-opacity,0.45);
  background:radial-gradient(
    circle at 50% 50%,
    rgba(var(--neon-glow-rgb,0,208,255),0.55) 0%,
    rgba(var(--neon-glow-rgb,0,208,255),0.20) 38%,
    rgba(var(--neon-glow-rgb,0,208,255),0) 70%
  );
  box-shadow:0 0 90px 30px rgba(var(--neon-glow-rgb,0,208,255),0.10);
  animation:neon-glow-breathe 7s ease-in-out infinite;
}
.neon-glow--blend .neon-glow__light{mix-blend-mode:screen}

@keyframes neon-glow-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* Hidden where it would be pointless or intrusive. */
@media (prefers-reduced-motion:reduce){
  .neon-glow{display:none}
  .neon-glow__light{animation:none}
}
@media (hover:none) and (pointer:coarse){
  .neon-glow{display:none}
}
@media print{
  .neon-glow{display:none}
}

/* Scroll track
   A neon line drawn down the page beside each section, jogging across at
   every section boundary, with a glowing ball riding the line. The SVG and
   the serpentine path are generated in assets/js/theme.js; only the styling
   lives here. Colours come from the customizer as CSS variables. */
.neon-track{
  position:absolute;
  top:0;
  left:0;
  overflow:visible;
  pointer-events:none;
  z-index:0;
}
.neon-track__line{
  fill:none;
  stroke:var(--neon-track-color,#c9a227);
  stroke-width:var(--neon-track-width,2);
  stroke-linejoin:round;
  stroke-linecap:round;
  opacity:var(--neon-track-opacity,0.55);
}
.neon-track__ball{
  filter:drop-shadow(0 0 5px var(--neon-track-ball,#00d0ff))
         drop-shadow(0 0 16px var(--neon-track-ball,#00d0ff));
}
.neon-track__halo{
  fill:var(--neon-track-ball,#00d0ff);
  opacity:.4;
}
.neon-track__core{fill:#fff}

@media (max-width:900px){
  .neon-track{display:none}
}
@media (prefers-reduced-motion:reduce){
  .neon-track{display:none}
}
@media print{
  .neon-track{display:none}
}

/* Page banner
   Full-width image banner for pages and posts. The image is set per page via
   the Featured Image, with a customizer fallback. Height, darkening and
   accent colour come from the customizer as CSS variables. */
.page-banner{
  position:relative;
  display:flex;
  align-items:center;
  min-height:var(--neon-banner-height,60vh);
  margin:-1.5rem 0 1.5rem;
  padding:5rem 0;
  background-color:var(--bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.page-banner__overlay{
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  pointer-events:none;
  background-color:rgba(7,16,24,var(--neon-banner-overlay,0.6));
  background-image:radial-gradient(120% 90% at 50% 35%, rgba(7,16,24,0) 30%, rgba(7,16,24,0.8) 100%);
}

.page-banner__inner{
  position:relative;
  z-index:1;
  width:100%;
}

.page-banner--center .page-banner__inner{text-align:center}
.page-banner--left .page-banner__inner{text-align:left}

.page-banner__title{
  margin:0 0 .75rem;
  font-size:clamp(2.25rem, 6vw, 4.5rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:#e6eef6;
}

/* Gradient title only where background-clip:text is actually supported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .page-banner__title{
    background-image:linear-gradient(90deg, var(--neon-banner-accent,#00d0ff), #fff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.page-banner__subtitle{
  margin:0;
  font-size:clamp(.8rem, 1.6vw, 1.05rem);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(230,238,246,.92);
}

.page-banner__text{
  max-width:62ch;
  margin:1rem auto 0;
  color:rgba(230,238,246,.78);
  font-size:1.05rem;
}
.page-banner--left .page-banner__text{margin-left:0}

.page-banner__scroll{
  position:absolute;
  bottom:1.25rem;
  left:50%;
  transform:translateX(-50%);
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.page-banner__scroll:hover{
  border-color:var(--neon-banner-accent,#00d0ff);
  box-shadow:0 0 18px rgba(0,208,255,.25);
}
.page-banner__scroll span[aria-hidden]{
  display:block;
  width:9px;
  height:9px;
  margin:0 auto;
  border-right:2px solid var(--neon-banner-accent,#00d0ff);
  border-bottom:2px solid var(--neon-banner-accent,#00d0ff);
  transform:rotate(45deg);
  animation:neon-banner-nudge 2s ease-in-out infinite;
}

@keyframes neon-banner-nudge{
  0%,100%{transform:translateY(0) rotate(45deg)}
  50%{transform:translateY(4px) rotate(45deg)}
}

@media (prefers-reduced-motion:reduce){
  .page-banner__scroll span[aria-hidden]{animation:none}
}
@media (max-width:640px){
  .page-banner{padding:3.5rem 0;min-height:auto}
}
@media print{
  .page-banner{margin:0 0 1rem;padding:0;min-height:auto;background-image:none!important}
  .page-banner__overlay,.page-banner__scroll{display:none}
  .page-banner__title{color:#000}
}

/* Live server status card
   Sits inside the banner. The status line is refreshed over AJAX so it stays
   live even when the page itself is cached. */
.server-card{
  max-width:620px;
  margin:1.75rem auto 0;
  text-align:left;
  border-radius:14px;
  border:1px solid rgba(0,208,255,.18);
  background:linear-gradient(180deg, rgba(0,208,255,.06), rgba(0,208,255,.02)), rgba(7,16,24,.72);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  overflow:hidden;
  backdrop-filter:blur(8px);
}
.page-banner--left .server-card{margin-left:0}

.server-card__status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin:0;
  padding:.6rem 1rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--neon-banner-accent,#00d0ff);
  background:rgba(0,208,255,.06);
  border-bottom:1px solid rgba(0,208,255,.14);
}
.server-card__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}
.server-card__status--loading,
.server-card__status--unknown{color:rgba(230,238,246,.6)}
.server-card__status--offline{color:#ff8f8f}

.server-card__body{padding:1rem 1.1rem 1.1rem}

.server-card__head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin:0 0 .75rem;
}
.server-card__platforms{display:inline-flex;gap:.35rem}
.server-card__platform{display:block;width:26px;height:26px;border-radius:7px}
.server-card__platform--java{background:linear-gradient(150deg,#4cbb63,#1f7a3a)}
.server-card__platform--bedrock{background:linear-gradient(150deg,#5cc9f7,#1b6f9c)}
.server-card__label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(230,238,246,.75);
}

.server-card__address{display:flex;align-items:center;gap:.75rem;margin:0}
.server-card__ip{
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:clamp(1.2rem, 3.4vw, 1.7rem);
  font-weight:800;
  color:#f2f7fb;
}

.server-card__copy{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  flex:0 0 auto;
  padding:.5rem .8rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e6eef6;
  font:inherit;
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.server-card__copy:hover{border-color:rgba(0,208,255,.5);background:rgba(0,208,255,.08)}
.server-card__copy.is-copied{border-color:var(--neon-banner-accent,#00d0ff);color:var(--neon-banner-accent,#00d0ff)}
.server-card__copy-icon{display:block}

.server-card__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.server-card__tag{
  display:inline-flex;
  align-items:center;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  font-size:.78rem;
  font-weight:600;
  color:rgba(230,238,246,.85);
}

.server-card__console{
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
  margin-top:1rem;
  padding:.85rem 1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:#e6eef6;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.server-card__console:hover{border-color:rgba(0,208,255,.45);background:rgba(0,208,255,.06)}
.server-card__console-text{flex:1;font-size:.9rem;font-weight:600;line-height:1.35}
.server-card__console-link{
  display:block;
  margin-top:.15rem;
  font-size:.85rem;
  font-weight:700;
  color:var(--neon-banner-accent,#00d0ff);
}
.server-card__chevron{
  flex:0 0 auto;
  width:9px;
  height:9px;
  border-right:2px solid rgba(230,238,246,.7);
  border-bottom:2px solid rgba(230,238,246,.7);
  transform:rotate(-45deg);
}

/* Console popup */
.server-modal{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:auto;
  max-width:min(640px, calc(100% - 2rem));
  max-height:calc(100% - 2rem);
  margin:auto;
  padding:0;
  border:1px solid rgba(0,208,255,.22);
  border-radius:16px;
  background:#0b1218;
  color:#e6eef6;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  overflow:hidden;
}

/* Only lay the open dialog out as a column, so a closed one stays hidden. */
.server-modal[open]{
  display:flex;
  flex-direction:column;
}
.server-modal::backdrop{background:rgba(4,8,12,.72)}
.server-modal__panel{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:1.75rem 1.5rem 1.5rem;
}
.server-modal__close{
  position:absolute;
  top:.6rem;
  right:.75rem;
  width:34px;
  height:34px;
  line-height:1;
  font-size:1.4rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:transparent;
  color:#e6eef6;
  cursor:pointer;
}
.server-modal__close:hover{border-color:rgba(0,208,255,.5)}
.server-modal__content{
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.server-modal__content h2{font-size:1.05rem;margin:1.25rem 0 .5rem}
.server-modal__content h2:first-child{margin-top:0}
.server-modal__content p,
.server-modal__content li{font-size:.95rem;color:rgba(230,238,246,.85)}
.server-modal__content ol{padding-left:1.25rem}
.server-modal__content li + li{margin-top:.4rem}
.server-modal__content a{color:var(--neon-banner-accent,#00d0ff)}

/* Fallback for browsers without <dialog> support. */
.server-modal.is-open{
  display:block;
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  width:100%;
  max-width:none;
  max-height:none;
  padding:1rem;
  border:0;
  border-radius:0;
  background:rgba(4,8,12,.78);
  overflow:auto;
  z-index:1000;
}
.server-modal.is-open .server-modal__panel{
  max-width:640px;
  margin:6vh auto 0;
  border:1px solid rgba(0,208,255,.22);
  border-radius:16px;
  background:#0b1218;
}

@media (max-width:640px){
  .container{padding:0 1rem}
  .site-main{padding:1rem 0}
  .card{padding:1rem}
  .grid{gap:.75rem}

  .hero{flex-direction:column;align-items:stretch;padding:1.5rem}
  .hero .title{font-size:1.6rem}
  .hero__aside{align-items:stretch;min-width:0}
  .hero__stat{width:100%}
  .hero__actions .btn{display:block;text-align:center}
  .hero__actions .btn + .btn{margin:.5rem 0 0}

  .site-footer{padding:1.5rem 1rem}

  .server-card{margin-top:1.25rem}
  .server-card__address{flex-wrap:wrap}
  .server-card__ip{flex:1 1 100%;font-size:1.15rem}
  .server-card__copy{width:100%;justify-content:center}

  .server-modal{max-width:calc(100% - 1rem);max-height:calc(100% - 1rem)}
  .server-modal__panel{padding:1.5rem 1rem 1rem}
  .server-modal__content h2{font-size:1rem}
  .server-modal__content p,
  .server-modal__content li{font-size:.9rem}
}
@media print{
  .server-modal{display:none}
}