:root {
  --ink: #eaf8ff;
  --muted: #7792a6;
  --muted-strong: #9eb5c5;
  --bg: #06101a;
  --panel: rgba(10, 27, 41, 0.86);
  --panel-solid: #0b1b29;
  --line: rgba(116, 185, 209, 0.14);
  --cyan: #40d9ef;
  --cyan-soft: #8befff;
  --green: #68f0b6;
  --amber: #ffd166;
  --coral: #ff776d;
  --violet: #8c8eff;
  --pink: #ff8fcf;
  --leaf: #9be66f;
  --glass: rgba(7, 25, 36, 0.78);
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% -10%, rgba(255, 143, 207, .13), transparent 36rem),
    linear-gradient(180deg, #071521 0%, #06101a 48%, #050c13 100%);
  font-family: var(--sans);
}

button, input { font: inherit; }
button { color: inherit; }
button:not(:disabled) { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.atmosphere { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 12, 20, .28) 0%, rgba(4, 15, 23, .58) 42%, rgba(3, 10, 16, .94) 100%),
    linear-gradient(90deg, rgba(3, 12, 19, .62), transparent 24%, transparent 76%, rgba(3, 12, 19, .54)),
    url("/dashboard/palworld-realm.png") center top / cover no-repeat;
  filter: saturate(.92) contrast(1.04);
}
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image: linear-gradient(rgba(109, 171, 192, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 171, 192, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.glow { position: absolute; z-index: 1; border-radius: 50%; filter: blur(90px); opacity: .18; }
.glow-one { width: 28rem; height: 28rem; top: 18rem; right: -10rem; background: var(--pink); }
.glow-two { width: 20rem; height: 20rem; bottom: 10%; left: -8rem; background: var(--cyan); }
.terrain-line { position: absolute; left: -10%; width: 120%; height: 25rem; border: 1px solid rgba(100, 194, 208, .06); border-radius: 50%; transform: rotate(-5deg); }
.line-one { bottom: -17rem; }.line-two { bottom: -19rem; transform: rotate(3deg); }

.topbar {
  position: relative;
  z-index: 10;
  min-height: 76px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(3, 14, 23, .9), rgba(7, 24, 33, .74));
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 44px rgba(0, 0, 0, .2);
}

.brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand-copy { display: grid; gap: 3px; }
.brand strong { font-family: var(--display); font-size: 21px; letter-spacing: .08em; line-height: 1; }
.brand strong em { color: var(--cyan); font-style: normal; }
.brand small { color: #587184; font-family: var(--mono); font-size: 9px; letter-spacing: .21em; }
.pal-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid var(--cyan-soft);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(64, 217, 239, .08), 0 0 22px rgba(64, 217, 239, .15);
}
.pal-mark::before, .pal-mark::after { content: ""; position: absolute; background: var(--cyan-soft); }
.pal-mark::before { width: 34px; height: 2px; top: 17px; }
.pal-mark::after { width: 8px; height: 8px; border: 3px solid var(--bg); border-radius: 50%; }
.pal-mark i { position: absolute; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); opacity: .75; }

.topbar-status { display: flex; align-items: center; gap: 22px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .11em; }
.environment, .connection { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.environment i, .connection i, .live-indicator, .refresh-label i, .activity-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.connection.is-offline i { background: var(--coral); box-shadow: 0 0 10px var(--coral); }
.text-button { padding: 7px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--muted-strong); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.text-button:hover { color: var(--ink); border-color: var(--cyan); }

main { position: relative; z-index: 1; width: min(1460px, calc(100% - 40px)); margin: 0 auto; padding: 38px 0 34px; }
.hero { position:relative;display:flex;justify-content:space-between;align-items:end;gap:24px;min-height:190px;margin-bottom:22px;padding:30px 32px;overflow:hidden;border:1px solid rgba(143,220,222,.2);border-radius:16px;background:linear-gradient(100deg,rgba(3,17,27,.91),rgba(6,28,38,.66) 60%,rgba(9,35,43,.42));box-shadow:0 22px 60px rgba(0,0,0,.24);backdrop-filter:blur(10px);}
.hero::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--pink),var(--cyan),var(--leaf));box-shadow:0 0 18px var(--cyan)}
.eyebrow, .overline { margin: 0; color: var(--cyan); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .17em; }
.eyebrow span { color: var(--ink); }.eyebrow i { display: inline-block; width: 18px; height: 1px; margin: 0 8px 3px; background: var(--cyan); }
.hero h1 { margin: 8px 0 4px; font-family: var(--display); font-size: clamp(48px, 6vw, 74px); line-height: .9; letter-spacing: .01em; text-transform: uppercase;background:linear-gradient(90deg,#f6fcff 0%,#a9f4ff 48%,#ffafd9 100%);background-clip:text;-webkit-background-clip:text;color:transparent;text-shadow:0 8px 34px rgba(38,181,201,.15); }
.hero-copy { margin: 13px 0 0; max-width: 690px; color: var(--muted-strong); font-size: 13px; line-height: 1.65; }
.hero-clock { display: grid; justify-items: end; gap: 4px; padding-bottom: 3px; }
.hero-clock span { color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .15em; }
.hero-clock strong { font-family: var(--mono); font-size: 22px; font-weight: 400; letter-spacing: .07em; }

.panel { position: relative; overflow: hidden; border: 1px solid rgba(125, 198, 211, .2); border-radius:14px;background:linear-gradient(145deg,rgba(10,34,46,.88),rgba(5,19,29,.84));box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025);backdrop-filter:blur(14px); }
.panel::before{content:"";position:absolute;z-index:2;top:0;right:10%;left:10%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--pink),transparent);opacity:.6;pointer-events:none}
.panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.035), transparent 24%); }
.command-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); gap: 14px; }
.server-panel { min-height:284px;padding:30px;display:grid;grid-template-columns:1.2fr .7fr;gap:28px;background:radial-gradient(circle at 12% 50%,rgba(64,217,239,.1),transparent 17rem),radial-gradient(circle at 88% 8%,rgba(255,143,207,.09),transparent 17rem),linear-gradient(145deg,rgba(9,35,46,.9),rgba(5,19,29,.86)); }
.server-summary { display: flex; align-items: center; gap: 28px; }
.world-emblem { position: relative; flex: 0 0 auto; width: 142px; height: 142px; display: grid; place-items: center; }
.orbit { position: absolute; inset: 6px; border: 1px solid rgba(120, 230, 236, .3); border-radius: 50%; box-shadow:0 0 28px rgba(64,217,239,.08); }
.orbit::after { content: ""; position: absolute; width: 7px; height: 7px; top: 11px; left: 21px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 14px var(--pink); }
.orbit-one { animation: rotate 16s linear infinite; }.orbit-two { inset: 20px; border-style: dashed; opacity: .45; animation: rotate 11s linear reverse infinite; }
.emblem-core { position: relative; width: 82px; height: 82px; border-radius: 50%; border: 2px solid var(--cyan-soft); background: linear-gradient(180deg, rgba(255,143,207,.3) 0 46%, rgba(74,177,157,.3) 46% 52%, rgba(4,25,32,.82) 52%); box-shadow: inset 0 0 22px rgba(64,217,239,.22), 0 0 34px rgba(255,143,207,.16); }
.emblem-core::before { content:""; position:absolute; left:-2px; right:-2px; top:44%; height:4px; background:var(--cyan-soft); }
.emblem-core i { position:absolute; left:50%; top:44%; width:18px; height:18px; transform:translate(-50%,-42%); border:4px solid #0b2131; border-radius:50%; background:var(--cyan-soft); }
@keyframes rotate { to { transform: rotate(360deg); } }
.server-identity h2 { margin: 7px 0 5px; font-family: var(--display); font-size: 35px; letter-spacing: .02em; }
.endpoint { display: flex; align-items: center; gap: 11px; margin: 0 0 19px; color: var(--muted-strong); font-family: var(--mono); font-size: 12px; }
.endpoint button { border: 1px solid var(--line); border-radius: 2px; background: rgba(64,217,239,.05); color: var(--cyan); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; padding: 5px 7px; }
.version-line { display: flex; gap: 24px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.version-line strong { margin-left: 5px; color: var(--ink); font-weight: 500; }
.health-block { align-self: center; padding: 20px 0 20px 28px; border-left: 1px solid var(--line); }
.status-label { display:block; margin-bottom:10px; color:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.16em; }
.state-pill { display:flex; align-items:center; gap:11px; font-family:var(--display); font-size:27px; letter-spacing:.06em; }
.state-signal { display:grid; place-items:center; width:18px; height:18px; border:1px solid rgba(104,240,182,.4); border-radius:50%; }
.state-signal i { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); animation:pulse 2s infinite; }
.state-pill.is-offline { color:var(--coral); }.state-pill.is-offline .state-signal { border-color:rgba(255,119,109,.4); }.state-pill.is-offline .state-signal i { background:var(--coral); box-shadow:0 0 16px var(--coral); }
.state-pill.is-working { color:var(--amber); }.state-pill.is-working .state-signal i { background:var(--amber); box-shadow:0 0 16px var(--amber); }
@keyframes pulse { 50% { opacity:.35; transform:scale(.72); } }
.health-block p { margin:10px 0 0; max-width:230px; color:var(--muted); font-size:11px; line-height:1.6; }
.server-details { grid-column: 1 / -1; display:grid; grid-template-columns:repeat(3,1fr); padding-top:23px; border-top:1px solid var(--line); }
.server-details div { display:grid; gap:6px; padding-left:18px; border-left:1px solid var(--line); }
.server-details div:first-child { padding-left:0; border-left:0; }
.server-details span { color:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.15em; }.server-details strong { font-family:var(--mono); font-size:11px; font-weight:500; }

.controls-panel { padding:27px 28px;background:linear-gradient(160deg,rgba(12,39,50,.91),rgba(9,22,35,.88)); }
.panel-heading { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.panel-heading h2 { margin:5px 0 0; font-family:var(--display); font-size:24px; letter-spacing:.025em; }.panel-heading.compact h2 { font-size:22px; }
.shield-badge, .release-channel { padding:6px 8px; border:1px solid rgba(104,240,182,.22); border-radius:2px; color:var(--green); background:rgba(104,240,182,.04); font-family:var(--mono); font-size:8px; letter-spacing:.12em; }
.control-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.control-button { min-height:72px; display:flex; align-items:center; gap:13px; padding:13px 15px; border:1px solid var(--line);border-radius:10px;background:rgba(7,19,31,.72); text-align:left; transition:.18s ease; }
.control-button.start { grid-column:1 / -1; border-color:rgba(104,240,182,.2); background:linear-gradient(90deg,rgba(104,240,182,.08),rgba(7,19,31,.72)); }
.control-button:hover:not(:disabled) { transform:translateY(-2px); border-color:rgba(255,143,207,.42); background:linear-gradient(90deg,rgba(64,217,239,.09),rgba(255,143,207,.08));box-shadow:0 10px 24px rgba(0,0,0,.18); }
.control-button:disabled { opacity:.34; cursor:not-allowed; }
.control-button strong { display:block; font-family:var(--display); font-size:16px; letter-spacing:.06em; }.control-button small { display:block; margin-top:2px; color:var(--muted); font-family:var(--mono); font-size:8px; }
.control-icon { flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(64,217,239,.18); border-radius:50%; color:var(--cyan); font-family:var(--mono); font-size:20px; }
.play::after { content:""; margin-left:2px; border-left:8px solid var(--green); border-top:5px solid transparent; border-bottom:5px solid transparent; }
.stop-icon::after { content:""; width:8px; height:8px; background:var(--coral); }
.control-note { display:flex; gap:8px; align-items:start; margin:15px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }.control-note i { flex:0 0 auto; width:5px; height:5px; margin-top:4px; border-radius:50%; background:var(--amber); }

.metric-card { --card-accent:var(--cyan);min-height:162px;padding:22px;border-top-color:var(--card-accent);transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.metric-card:hover{transform:translateY(-2px);border-color:var(--card-accent);background:linear-gradient(145deg,rgba(12,39,51,.93),rgba(6,22,31,.88))}
.players-metric{--card-accent:var(--leaf)}.fps-metric{--card-accent:var(--pink)}.uptime-metric{--card-accent:var(--cyan)}.day-metric{--card-accent:var(--amber)}
.command-grid > .metric-card { margin-top:0; }
.command-grid { grid-auto-flow:row; }
.metric-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.14em; }
.metric-icon { position:relative; width:21px; height:21px; opacity:.75; }
.people-icon::before,.people-icon::after { content:""; position:absolute; border-radius:50%; border:1px solid var(--cyan); }.people-icon::before { width:7px;height:7px;top:1px;left:7px; }.people-icon::after { width:17px;height:8px;bottom:1px;left:2px;border-radius:10px 10px 3px 3px; }
.pulse-icon::after { content:"⌁"; color:var(--cyan); font-size:24px; position:absolute; top:-8px; left:0; transform:rotate(-8deg); }
.clock-icon { border:1px solid var(--cyan); border-radius:50%; }.clock-icon::before { content:""; position:absolute; left:9px; top:4px; width:1px;height:6px;background:var(--cyan);transform-origin:bottom;transform:rotate(-35deg); }
.sun-icon { border:1px solid var(--amber); border-radius:50%; box-shadow:0 0 9px rgba(255,209,102,.25); }
.metric-card > strong { display:block; margin:17px 0 13px; font-family:var(--display); font-size:36px; line-height:.9; letter-spacing:.025em; }.metric-card > strong small { color:var(--muted); font-family:var(--mono); font-size:11px; font-weight:400; }
.metric-card p { display:flex; align-items:center; gap:7px; margin:11px 0 0; color:var(--muted); font-size:9px; }
.meter { height:3px; overflow:hidden; background:rgba(116,185,209,.09); }.meter i { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--leaf),var(--pink)); box-shadow:0 0 8px var(--cyan); }
.sparkline { height:18px; display:flex; align-items:end; gap:3px; }
.sparkline i { flex:1; height:2px; opacity:.15; background:rgba(64,217,239,.18); border-top:1px solid transparent; transition:height .32s ease,opacity .32s ease,background .32s ease; }
.sparkline .spark-level-1{height:10%}.sparkline .spark-level-2{height:20%}.sparkline .spark-level-3{height:30%}.sparkline .spark-level-4{height:40%}.sparkline .spark-level-5{height:50%}.sparkline .spark-level-6{height:60%}.sparkline .spark-level-7{height:70%}.sparkline .spark-level-8{height:80%}.sparkline .spark-level-9{height:90%}.sparkline .spark-level-10{height:100%}
.sparkline i:not(.spark-level-0){opacity:1;border-top-color:var(--cyan)}.sparkline i.is-current{background:rgba(64,217,239,.38);animation:spark-arrival .45s ease-out}
@keyframes spark-arrival{from{opacity:.25;transform:scaleY(.15)}to{opacity:1;transform:scaleY(1)}}
.metric-split { display:flex; justify-content:space-between; color:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.08em; }.metric-split b { color:var(--muted-strong); font-weight:400; }
.world-report { display:flex; align-items:center; justify-content:space-between; min-height:18px; margin-top:17px; padding-top:8px; border-top:1px solid var(--line); color:var(--muted); font-family:var(--mono); font-size:8px; letter-spacing:.08em; }
.world-report span { display:flex; align-items:center; gap:7px; }.world-report span::before { content:""; width:6px; height:6px; border-radius:50%; background:#304769; }
.world-report b { color:var(--muted-strong); font-weight:400; }.world-report.is-live span::before { background:var(--amber); box-shadow:0 0 9px var(--amber); animation:world-report-pulse 1.8s ease-in-out infinite; }.world-report.is-live b { color:var(--amber); }
@keyframes world-report-pulse{50%{opacity:.42;transform:scale(.75)}}

.command-grid { grid-template-columns:repeat(4,1fr); }
.server-panel { grid-column:span 3; }.controls-panel { grid-column:span 1; }
.metric-card { grid-column:span 1; }

.lower-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.75fr); gap:14px; margin-top:14px; }
.players-panel,.update-panel { padding:27px 28px; }.players-panel{background:linear-gradient(145deg,rgba(8,35,42,.9),rgba(7,20,31,.86))}.update-panel{background:radial-gradient(circle at 92% 5%,rgba(255,143,207,.08),transparent 15rem),linear-gradient(145deg,rgba(8,35,42,.9),rgba(7,20,31,.86))}.activity-panel { grid-column:1/-1; padding:0; }
.refresh-label { display:flex;align-items:center;gap:7px;color:var(--green);font-family:var(--mono);font-size:8px;letter-spacing:.12em; }
.player-list { display:grid; }
.player-row { position:relative;z-index:1;display:grid;grid-template-columns:34px minmax(0,1fr) 70px 62px;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line); }
.avatar { width:31px;height:31px;display:grid;place-items:center;border:1px solid rgba(64,217,239,.25);border-radius:50%;background:rgba(64,217,239,.07);color:var(--cyan-soft);font-family:var(--display);font-size:14px; }.a-two{color:#b5f37d;border-color:rgba(181,243,125,.22);background:rgba(181,243,125,.06)}.a-three{color:#d19bff;border-color:rgba(209,155,255,.24);background:rgba(209,155,255,.06)}.a-four{color:#ffb66d;border-color:rgba(255,182,109,.23);background:rgba(255,182,109,.06)}
.player-name strong { display:block;font-size:11px;font-weight:600; }.player-name small { color:var(--muted);font-family:var(--mono);font-size:8px; }
.level,.ping { font-family:var(--mono);font-size:9px;text-align:right; }.level{color:var(--muted-strong)}.ping{color:var(--amber)}.ping.good{color:var(--green)}
.update-panel { border-color:rgba(125,198,211,.2); }
.release-channel { color:var(--cyan);border-color:rgba(64,217,239,.25);background:rgba(64,217,239,.04); }
.update-visual { display:flex;gap:17px;align-items:center;margin-bottom:19px; }.package-mark { flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(64,217,239,.25);background:rgba(64,217,239,.06);transform:rotate(45deg); }.package-mark i { transform:rotate(-45deg);color:var(--cyan);font:normal 23px var(--display); }
.update-visual span { color:var(--cyan);font-family:var(--mono);font-size:8px;letter-spacing:.13em; }.update-visual strong { display:block;margin:4px 0;font-family:var(--display);font-size:24px;letter-spacing:.03em; }.update-visual p { margin:0;color:var(--muted);font-size:10px;line-height:1.45; }
.build-compare { display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;margin:0 0 16px;padding:13px 15px;border:1px solid var(--line);background:rgba(4,14,23,.42); }.build-compare>span{display:grid;gap:4px}.build-compare>span:last-child{text-align:right}.build-compare small{color:var(--muted);font-family:var(--mono);font-size:7px;letter-spacing:.13em}.build-compare strong{font-family:var(--mono);font-size:11px;font-weight:500}.build-compare>i{text-align:center;color:var(--cyan);font-style:normal}
.update-actions { display:grid;grid-template-columns:1fr auto;gap:9px; }.update-button,.check-button { min-height:42px;border:1px solid rgba(64,217,239,.32);background:linear-gradient(90deg,rgba(64,217,239,.16),rgba(64,217,239,.08));font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.09em; }.update-button span{margin-right:8px;color:var(--cyan)}.check-button{padding:0 15px;border-color:var(--line);background:rgba(4,14,23,.42);color:var(--muted-strong);font-size:10px}.update-actions button:hover:not(:disabled){border-color:var(--cyan);background:rgba(64,217,239,.14)}.update-actions button:disabled{opacity:.35;cursor:not-allowed}.update-note{margin:11px 0 0;color:var(--muted);font-size:8px;line-height:1.45}

.activity-heading { padding:24px 28px 0;margin-bottom:18px; }.log-actions { display:flex;align-items:center;gap:8px; }.log-actions button,.log-actions label { min-height:28px;padding:0 9px;display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:rgba(4,14,23,.42);color:var(--muted);font-family:var(--mono);font-size:8px;letter-spacing:.1em; }.log-actions input { position:absolute;opacity:0; }.log-actions label:has(input:checked){color:var(--green);border-color:rgba(104,240,182,.2)}
.log-window { position:relative;z-index:1;min-height:184px;max-height:258px;overflow:auto;padding:10px 28px 12px;background:rgba(2,9,16,.6);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;scrollbar-color:rgba(64,217,239,.25) transparent; }
.log-line { display:grid;grid-template-columns:76px 72px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid rgba(116,185,209,.06);color:#a8bbc8; }.log-line time{color:#486276}.log-tag{font-size:8px;letter-spacing:.07em}.log-tag.system{color:var(--cyan)}.log-tag.player{color:#d19bff}.log-tag.info,.log-tag.server{color:var(--green)}.log-tag.backup{color:var(--amber)}
.log-placeholder { margin:0;padding:12px 0;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.04em; }
.activity-footer { display:flex;justify-content:space-between;padding:12px 28px;color:var(--muted);font-family:var(--mono);font-size:8px;letter-spacing:.1em; }.activity-footer span:first-child{display:flex;align-items:center;gap:7px;color:var(--green)}

.operation-banner { margin-bottom:14px;min-height:62px;display:grid;grid-template-columns:32px 1fr minmax(110px,22%);align-items:center;gap:14px;padding:12px 20px;border:1px solid rgba(255,209,102,.3);border-radius:12px;background:linear-gradient(90deg,rgba(58,46,16,.56),rgba(55,25,54,.42));box-shadow:0 15px 38px rgba(0,0,0,.18);backdrop-filter:blur(12px); }.operation-banner[hidden]{display:none}.operation-spinner{width:24px;height:24px;border:2px solid rgba(255,209,102,.2);border-top-color:var(--amber);border-radius:50%;animation:rotate .8s linear infinite}.operation-banner strong{display:block;font-family:var(--display);font-size:16px;letter-spacing:.05em}.operation-banner span{color:var(--muted-strong);font-size:9px}.operation-progress{height:2px;overflow:hidden;background:rgba(255,209,102,.12)}.operation-progress i{display:block;width:40%;height:100%;background:linear-gradient(90deg,var(--amber),var(--pink));animation:progress 1.5s ease-in-out infinite}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

.site-footer { position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:14px;padding:21px 20px 30px;color:#496173;font-family:var(--mono);font-size:8px;letter-spacing:.1em; }.site-footer i{width:3px;height:3px;border-radius:50%;background:#365163}
.login-layer,.confirm-layer,.update-layer { position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:20px;background:rgba(2,8,14,.82);backdrop-filter:blur(18px); }.login-layer[hidden],.confirm-layer[hidden],.update-layer[hidden]{display:none}.body:not(.locked) .login-layer{display:none}
.login-card,.confirm-card { width:min(430px,100%);padding:36px;border:1px solid rgba(116,226,233,.28);border-radius:16px;background:linear-gradient(145deg,rgba(12,43,53,.96),rgba(16,22,40,.95));box-shadow:0 35px 100px rgba(0,0,0,.55),0 0 60px rgba(64,217,239,.08); }.login-mark{display:grid;margin:0 auto 24px;width:58px;height:58px}.login-card{text-align:center}.login-card h1,.confirm-card h2{margin:8px 0 10px;font-family:var(--display);font-size:36px;letter-spacing:.02em;text-transform:uppercase}.login-card>p:not(.overline),.confirm-card>p:not(.overline){margin:0 auto 25px;color:var(--muted-strong);font-size:11px;line-height:1.65}.login-card label{display:block;margin-bottom:7px;color:var(--muted);font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-align:left}.password-field{display:grid;grid-template-columns:1fr auto;border:1px solid var(--line);border-radius:9px;background:rgba(2,9,16,.58);overflow:hidden}.password-field:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,143,207,.08)}.password-field input{min-width:0;height:48px;padding:0 14px;border:0;outline:0;background:none;color:var(--ink);font-family:var(--mono)}.password-field button{border:0;border-left:1px solid var(--line);background:none;color:var(--cyan);font-family:var(--mono);font-size:8px;letter-spacing:.1em}.login-button{width:100%;height:48px;margin-top:12px;border:1px solid rgba(119,231,235,.44);border-radius:9px;background:linear-gradient(90deg,rgba(64,217,239,.24),rgba(255,143,207,.19));font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.08em}.login-card small{display:block;margin-top:13px;color:#668296;font-size:8px}.login-error{min-height:17px!important;margin:8px 0 0!important;color:var(--coral)!important;text-align:left}
.confirm-card{text-align:center;border-color:rgba(255,209,102,.28)}.confirm-symbol{width:58px;height:58px;margin:0 auto 20px;display:grid;place-items:center;border:1px solid rgba(255,209,102,.28);border-radius:50%;color:var(--amber);font-family:var(--display);font-size:30px}.confirm-impact{display:flex;justify-content:space-between;margin:0 0 21px;padding:12px;border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:8px;letter-spacing:.1em}.confirm-impact strong{color:var(--ink);font-weight:500}.confirm-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:9px}.confirm-actions button{height:44px;border:1px solid var(--line);background:rgba(2,9,16,.42);font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em}.confirm-actions button:last-child{border-color:rgba(255,119,109,.38);background:rgba(255,119,109,.09);color:#ffaaa3}
.update-layer{z-index:60}.update-dialog-card{--update-progress:8%;width:min(520px,100%);padding:38px;border:1px solid rgba(64,217,239,.28);background:linear-gradient(145deg,#0c2232,#07141f);box-shadow:0 35px 100px rgba(0,0,0,.62);text-align:center}.update-dialog-mark{position:relative;width:72px;height:72px;margin:0 auto 23px;display:grid;place-items:center;border:1px solid rgba(64,217,239,.3);border-radius:50%;color:var(--cyan)}.update-dialog-mark b{font-family:var(--display);font-size:32px;font-weight:400}.update-dialog-mark i{position:absolute;inset:-6px;border:2px solid rgba(64,217,239,.12);border-top-color:var(--cyan);border-radius:50%;animation:rotate .9s linear infinite}.update-dialog-card h2{margin:8px 0 10px;font-family:var(--display);font-size:36px;letter-spacing:.02em;text-transform:uppercase}.update-dialog-message{min-height:36px;margin:0 auto 24px;color:var(--muted-strong);font-size:11px;line-height:1.65}.update-stage{padding:15px;border:1px solid var(--line);background:rgba(2,9,16,.5);text-align:left}.update-stage>div:first-child{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-family:var(--mono);font-size:8px;letter-spacing:.12em}.update-stage>div:first-child strong{color:var(--ink);font-weight:500}.update-stage-track{height:4px;margin:13px 0 16px;overflow:hidden;background:rgba(64,217,239,.1)}.update-stage-track i{display:block;width:var(--update-progress);height:100%;background:linear-gradient(90deg,var(--cyan),#68f0b6);box-shadow:0 0 14px rgba(64,217,239,.45);transition:width .45s ease}.update-stage-builds{display:grid;grid-template-columns:1fr 24px 1fr;align-items:end}.update-stage-builds>span{display:grid;gap:4px}.update-stage-builds>span:last-child{text-align:right}.update-stage-builds small{color:var(--muted);font-family:var(--mono);font-size:7px;letter-spacing:.13em}.update-stage-builds strong{font-family:var(--mono);font-size:12px;font-weight:500}.update-stage-builds>i{color:var(--cyan);font-style:normal;text-align:center}.update-dialog-note{margin:14px 0 0;color:var(--muted);font-size:9px;line-height:1.55}.update-return-button{width:100%;height:46px;margin-top:20px;border:1px solid rgba(104,240,182,.38);background:rgba(104,240,182,.1);color:var(--ink);font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.09em}.update-return-button[hidden]{display:none}.update-return-button:hover{border-color:var(--green);background:rgba(104,240,182,.16)}.update-dialog-card.is-complete{--update-progress:100%;border-color:rgba(104,240,182,.32)}.update-dialog-card.is-complete .update-dialog-mark{border-color:rgba(104,240,182,.35);color:var(--green)}.update-dialog-card.is-complete .update-dialog-mark i,.update-dialog-card.is-failed .update-dialog-mark i{display:none}.update-dialog-card.is-failed{border-color:rgba(255,119,109,.32)}.update-dialog-card.is-failed .update-dialog-mark{border-color:rgba(255,119,109,.35);color:var(--coral)}.update-dialog-card.is-failed .update-stage-track i{background:var(--coral);box-shadow:none}.update-dialog-card.is-failed .update-return-button{border-color:rgba(255,119,109,.38);background:rgba(255,119,109,.09)}
.toast { position:fixed;z-index:80;right:22px;bottom:22px;max-width:360px;padding:12px 16px;border:1px solid rgba(64,217,239,.32);border-radius:10px;background:linear-gradient(120deg,#0b2b37,#20172d);box-shadow:0 16px 45px rgba(0,0,0,.4);color:var(--ink);font-size:10px;line-height:1.5;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s ease}.toast.show{opacity:1;transform:none}.toast.error{border-color:rgba(255,119,109,.35);color:#ffb0a9}
body:not(.locked) .login-layer { display:none; }

/* Desktop performance: preserve the visual highlight without live glass repainting. */
.atmosphere {
  position: absolute;
  height: max(100vh, 1100px);
}
.atmosphere::before { filter: none; }
.glow { display: none; }
.topbar, .hero, .panel, .operation-banner {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.topbar { background: linear-gradient(90deg, rgba(3, 14, 23, .98), rgba(7, 24, 33, .94)); }
.hero { background: linear-gradient(100deg, rgba(3, 17, 27, .98), rgba(6, 28, 38, .94) 60%, rgba(9, 35, 43, .91)); }
.panel {
  contain: paint;
  content-visibility: auto;
  contain-intrinsic-size: 300px;
  background: linear-gradient(145deg, rgba(10, 34, 46, .97), rgba(5, 19, 29, .97));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.orbit-one, .orbit-two, .state-signal i, .world-report.is-live span::before { animation: none; }
.control-button {
  transition: transform .1s ease-out, border-color .1s ease-out;
}
.control-button:hover:not(:disabled) {
  transform: translate3d(0, -1px, 0);
  box-shadow: none;
}
.metric-card {
  transition: transform .1s ease-out, border-color .1s ease-out;
}
.metric-card:hover { transform: translate3d(0, -1px, 0); }
.sparkline i { transition: none; }

@media (max-width: 1120px) {
  .command-grid { grid-template-columns:repeat(2,1fr); }.server-panel{grid-column:1/-1}.controls-panel{grid-column:1/-1}.control-grid{grid-template-columns:repeat(3,1fr)}.control-button.start{grid-column:auto}.lower-grid{grid-template-columns:1fr}.activity-panel{grid-column:auto}
}
@media (max-width: 760px) {
  .topbar{min-height:66px}.environment{display:none}.brand small{display:none}.topbar-status{gap:13px}.hero{align-items:start;min-height:0;padding:25px 23px}.hero-clock{display:none}main{width:min(100% - 24px,1460px);padding-top:24px}.hero h1{font-size:46px}.server-panel{grid-template-columns:1fr;padding:23px}.server-summary{gap:18px}.world-emblem{width:95px;height:95px}.emblem-core{width:58px;height:58px}.health-block{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.server-details{grid-template-columns:1fr;gap:12px}.server-details div{padding:0 0 0 12px;border-left:1px solid var(--line)}.controls-panel,.players-panel,.update-panel{padding:22px}.control-grid{grid-template-columns:1fr}.control-button.start{grid-column:auto}.command-grid{grid-template-columns:1fr}.metric-card{grid-column:auto}.player-row{grid-template-columns:32px minmax(0,1fr) 50px}.ping{display:none}.log-actions label{display:none}.log-window{padding:9px 18px}.log-line{grid-template-columns:62px 57px minmax(0,1fr);gap:7px;font-size:9px}.activity-heading{padding:21px 18px 0}.site-footer span:nth-of-type(2),.site-footer i:nth-of-type(2){display:none}.operation-banner{grid-template-columns:28px 1fr}.operation-progress{display:none}
}
@media (max-width: 480px) {
  .brand strong{font-size:17px}.pal-mark{width:33px;height:33px}.pal-mark::before{width:29px;top:14px}.text-button{display:none}.connection>span{font-size:0}.connection>span::after{content:"LIVE";font-size:9px}.server-summary{align-items:start}.world-emblem{display:none}.version-line{gap:13px;flex-wrap:wrap}.panel-heading{align-items:start}.update-actions{grid-template-columns:1fr}.check-button{height:38px}.confirm-actions{grid-template-columns:1fr}.login-card,.confirm-card,.update-dialog-card{padding:27px 22px}.update-dialog-card h2{font-size:30px}
}
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .atmosphere { position: absolute; height: 100svh; }
  .atmosphere::before { filter: none; }
  .glow { display: none; }
  .topbar, .hero, .panel, .operation-banner {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .topbar { background: rgba(3, 15, 24, .97); }
  .panel {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .025);
  }
  .orbit-one, .orbit-two, .state-signal i, .world-report.is-live span::before { animation: none; }
  .control-button:hover:not(:disabled), .metric-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} }

.update-live-output { max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; border: 1px solid #31525a; border-radius: 8px; background: #06151c; color: #b8dadd; font: 12px/1.7 ui-monospace, monospace; text-align: left; }