:root{
  --bg: #f4f7fb;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2d3a66;
  --accent-700: #253054;
  --focus: #7aa2ff;
  --radius: 0;   /* squared */
  --shadow: none;/* flat */
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%;display:block}

/* Containers */
.container{
  max-width:1200px;
  margin-inline:auto;
  padding:0 24px;
}

/* Header (centered) */
.app-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:14px 0;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between; /* ensure right edge alignment */
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}
.brand-mark{flex:0 0 auto}
.brand-title{font-weight:700; letter-spacing:.2px}

/* Nav */
.nav{
  list-style:none;
  display:flex;
  align-items:center;
  gap:18px;
  margin:0;
  padding:0 12px;
  flex:1 1 auto;
}
.nav-link{
  text-decoration:none;
  color:#111827;
}
.nav a:hover, .nav .nav-link:hover{text-decoration:underline}
.nav .muted{ color: var(--muted); }
.nav .divider{
  width:1px; height:22px; background:var(--border);
}

/* Remove bullets/dots in nav and dropdown lists */
.nav, .nav > li,
.dropdown, .dropdown > li{
  list-style:none;
  margin:0;
  padding:0;
}

/* Dropdown specifics (click/keyboard only) */
.has-dropdown{ position:relative; }
.nav .dropdown-toggle{
  background:transparent;
  border:0;
  color:#111827;
  font: inherit;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  padding:0;
}
.nav .dropdown-toggle:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:0;
}
.chev{ transition: transform .15s ease; }
.has-dropdown.open .chev{ transform: rotate(180deg); }

.dropdown{
  position:absolute;
  z-index:1000;
  top:calc(100% + 8px);
  left:0;
  min-width:240px;
  background:#fff;
  border:1px solid var(--border);
  padding:6px 0;
  box-shadow:var(--shadow);
}
.dropdown[hidden]{ display:none !important; }

.dropdown a{
  display:block;
  padding:10px 12px;
  color:#111827;
  text-decoration:none;
  outline:none;
}
.dropdown a:hover,
.dropdown a:focus{ background:#f3f4f6; }

/* Right aligned Login */
.cta-group{
  display:flex; gap:10px;
  margin-left:auto; /* push Login to the far right */
}
.top-rule{height:4px; background:var(--accent)}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font-weight:600; border:1px solid transparent;
  padding:10px 14px; border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow);
  text-decoration:none;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-700); }
.btn-ghost{ background:#fff; border-color:var(--border); color:#111827; }
.btn-ghost:hover{ background:#f3f4f6; }
.w-full{ width:100%; }

/* Links */
a.link{ color: #111827; }
a.link:hover{ text-decoration: underline; }

/* Hero */
.hero{ padding:56px 0; background:linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%); border-bottom:1px solid var(--border); }
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px;
}
@media (max-width: 960px){
  .hero-grid{ grid-template-columns: 1fr; }
}
.hero-title{ margin:0 0 8px 0; font-size: clamp(28px, 4vw, 40px); line-height:1.2 }
.hero-subtitle{ margin:0 0 16px 0; color:var(--muted) }
.hero-ctas{ display:flex; gap:10px; margin:16px 0 12px }
.hero-points{ margin:10px 0 0 18px; color:var(--muted) }
.hero-panel{
  display:flex; flex-direction:column; border:1px solid var(--border); background:#fff;
}
.panel-header{ padding:12px 14px; font-weight:600; border-bottom:1px solid var(--border); background:#f3f4f6 }
.panel-footer{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-top:1px solid var(--border); color:var(--muted) }
.codeblock{
  margin:0; padding:14px; background:#0b1220; color:#d1e7ff; min-height:160px; overflow:auto;
}

/* Trust bar */
.trust{ background:#fff; border-bottom:1px solid var(--border); }
.trust-inner{ display:flex; gap:20px; align-items:center; justify-content:space-between; padding:14px 0; flex-wrap:wrap }
.logo-row{
  list-style:none; display:flex; gap:24px; margin:0; padding:0; color:#374151; font-weight:600; opacity:.7; flex-wrap:wrap
}

/* Sections */
.section{ padding:36px 0 }
.section-alt{ padding:36px 0; background:#f6f8fc; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-header{ margin-bottom:16px }
.section-title{ margin:0 0 4px 0; font-size:1.4rem }
.section-subtitle{ margin:0; color:var(--muted) }

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Product cards */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px }
@media (max-width: 960px){ .card-grid{ grid-template-columns: 1fr; } }
.product{ padding:16px }
.product-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
.badge{ font-size:.75rem; color:#111827; background:#eef2ff; padding:2px 6px; border:1px solid #e0e7ff }
.product .list{ margin:12px 0 16px 18px; color:var(--muted) }
.product-cta{ display:flex; justify-content:flex-end }

/* Tabs */
.tabs{
  display:flex; align-items:center; gap:8px; margin:12px 0 16px 0;
}
.tab{
  border:1px solid var(--border); background:#fff; padding:8px 12px; cursor:pointer; border-radius:var(--radius);
}
.tab.active{ background:#eef2ff; border-color:#e0e7ff; }
.tabs .spacer{ flex:1 }
.billing-switch{ display:flex; align-items:center; gap:10px }
.small{ font-size:.85rem }
.offscreen{ position:absolute; left:-9999px }
.switch{ display:inline-flex; align-items:center }
.switch input{ appearance:none; width:30px; height:18px; border:1px solid var(--border); background:#fff; position:relative; }
.switch input:checked{ background:#eef2ff; border-color:#e0e7ff; }
.switch-ui::before{
  content:""; display:inline-block; width:14px; height:14px; background:#2d3a66; margin-left:2px; margin-top:2px;
}
.switch input:checked + .switch-ui::before{ margin-left:14px }

/* Pricing cards */
.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
@media (max-width: 960px){ .pricing-grid{ grid-template-columns: 1fr; } }
.plan{ padding:16px; display:flex; flex-direction:column; gap:12px }
.plan-name{ margin:0 }
.plan-price{ font-size:1.6rem; display:flex; align-items:baseline; gap:6px }
.money{ font-weight:700 }
.unit{ color:var(--muted) }
.plan-features{ margin:0 0 8px 18px; color:var(--muted) }
.fineprint{ color:var(--muted); margin-top:12px }
.hidden{ display:none }

/* Feature grid */
.feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px }
@media (max-width: 960px){ .feature-grid{ grid-template-columns: 1fr; } }
.feature{ border:1px solid var(--border); background:#fff; padding:16px }

/* FAQ */
.faq{ display:grid; gap:12px }
.qa summary{ cursor:pointer; padding:12px 14px; font-weight:600; list-style:none }
.qa[open] summary{ background:#eef2ff; border-bottom:1px solid var(--border) }
.qa .qa-body{ padding:12px 14px; color:var(--muted) }

/* Final CTA */
.cta-final{ padding:32px 0; background:#fff; border-top:1px solid var(--border) }
.cta-inner{ text-align:center; max-width:800px; margin:0 auto }
.cta-inner h2{ margin:0 0 6px 0 }
.cta-inner p{ margin:0 0 12px 0; color:var(--muted) }

/* Footer */
.app-footer{
  padding:20px 0;
  background:#fff;
  border-top:1px solid var(--border);
}
.footer-content{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.footer-title{ font-weight:700; }
.footer-content a{ color:#111827; text-decoration:none; margin-left:18px }
.footer-content a:hover{ text-decoration:underline }
.muted{ color:var(--muted) }

/* Focus */
a:focus-visible, button:focus-visible, .tab:focus-visible, input:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:0;
}

/* =========================
   Auth (Login/Signup) Styles
   Merged from auth.css
   ========================= */
.auth-page{
  min-height: calc(100dvh - 4px - 64px - 62px); /* viewport minus top-rule, header, footer approx */
  display:grid;
  place-items:center;
  padding:32px 16px;
  background: var(--bg);
}
.auth-section{
  width:100%;
  max-width: 480px;
}

/* Card */
.auth-card{
  border:1px solid var(--border);
  background:#fff;
  padding:20px;
}
.auth-header h1{
  margin:0 0 6px 0;
  font-size:1.5rem;
}
.auth-header .muted{
  margin:0;
}

/* OAuth */
.oauth{ display:grid; gap:10px; margin:16px 0 8px; }
.oauth-btn{ justify-content:flex-start; }
.oauth-icon{ width:18px; display:inline-flex; align-items:center; justify-content:center; margin-right:4px }

/* Divider */
.divider{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:10px;
  color: var(--muted);
  font-size:.9rem;
  margin:8px 0 12px 0;
}
.divider::before, .divider::after{
  content:"";
  height:1px;
  background: var(--border);
  display:block;
}

/* Form */
.auth-form{ display:grid; gap:12px; }
.field{ display:block; }
.field label{ display:block; margin-bottom:6px; font-weight:600; }
.field-row{ display:flex; align-items:center; justify-content:space-between; }
.input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  outline:none;
}
.input:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.error{ color:#b91c1c; font-size:.9rem; min-height:1.1em; margin:4px 0 0 0; }
.form-error{ color:#b91c1c; margin:10px 0 0 0; }

/* Aux row */
.form-aux{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
}
.checkbox{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.checkbox input{ width:16px; height:16px; margin:0; }

/* Footer in card */
.auth-footer{
  border-top:1px solid var(--border);
  margin-top:16px;
  padding-top:12px;
  display:flex;
  gap:8px;
  align-items:center;
}

/* Link-styled button (flat) */
.link-btn{
  border:none;
  background:transparent;
  color:#111827;
  text-decoration:underline;
  padding:0;
  cursor:pointer;
  font: inherit;
}
/* Projects page additions */
.projects-grid{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px){ .projects-grid{ grid-template-columns: 1fr; } }

.project-card{
  display:flex;
  flex-direction:column;
  padding:0; /* we'll let inner blocks handle spacing for clean edges on thumbnail */
  overflow:hidden;
}

.project-thumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  border-bottom:1px solid var(--border);
  background:#f3f4f6;
}

.project-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px 4px 16px;
}
.project-name{ margin:0; font-size:1.05rem; }

.project-desc{
  padding:0 16px;
  color:var(--muted);
  margin:0 0 8px 0;
}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0 16px 12px 16px;
}
.chip{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--border);
  background:#fff;
  font-size:.8rem;
  color:#111827;
}

.project-cta{
  margin-top:auto;
  padding:12px 16px 16px 16px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  border-top:1px solid var(--border);
  background:#fff;
}

/* Ensure SVG data-URL placeholders render nicely */
.project-thumb{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  border-bottom:1px solid var(--border);
  background-color:#fff;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover; /* fill the area while preserving aspect */
}

/* Server status page */
.server-lookup{ margin: 8px 0 16px; }
.lookup-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.lookup-row .input{ min-width: 160px; }
.lookup-row select.input{ min-width: 180px; }

.status-layout{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
}
@media (max-width: 960px){
  .status-layout{ grid-template-columns: 1fr; }
}

.server-summary{ padding: 16px; }
.summary-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.summary-title{ display:flex; align-items:center; gap:10px; }
.summary-actions{ display:flex; gap:10px; align-items:center; }
.kv{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin: 8px 0 12px;
}
@media (max-width: 640px){
  .kv{ grid-template-columns: 1fr; }
}
.kv-row{ display: contents; }
.kv dt{
  font-weight:600;
}
.kv dd{
  margin:0;
  color: var(--muted);
}

.summary-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--border);
}

.status-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:2px 8px; border:1px solid var(--border); background:#fff; font-size:.85rem;
}
.status-badge.online{ border-color:#bbf7d0; background:#ecfdf5; color:#065f46; }
.status-badge.offline{ border-color:#fecaca; background:#fef2f2; color:#7f1d1d; }

.players-card{ padding: 0; overflow:hidden; }
.players-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 16px; border-bottom:1px solid var(--border); background:#fff;
}
.players-table{ width:100%; }
.players-row{
  display:grid;
  grid-template-columns: 1fr 100px 120px;
  gap: 8px;
  padding: 10px 16px;
  border-bottom:1px solid var(--border);
}
.players-header{
  background:#f6f8fc;
  border-bottom:1px solid var(--border);
  font-weight:600;
}
.players-cell{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }