@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --md-sys-color-primary: #2864a8;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d9ecff;
  --md-sys-color-on-primary-container: #112a43;
  --md-sys-color-secondary: #52677e;
  --md-sys-color-secondary-container: #dcecff;
  --md-sys-color-on-secondary-container: #142c45;
  --md-sys-color-tertiary: #3979a8;
  --md-sys-color-background: #f3f8fc;
  --md-sys-color-surface: #f3f8fc;
  --md-sys-color-surface-container: #edf4fa;
  --md-sys-color-surface-container-low: #f0f6fb;
  --md-sys-color-surface-container-high: #e5eef6;
  --md-sys-color-outline: #74796f;
  --md-sys-color-outline-variant: #c2cfdb;
  --md-sys-color-on-surface: #191d17;
  --md-sys-color-on-surface-variant: #41483e;
  --md-sys-color-error: #ba1a1a;
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --radius-extra-large: 32px;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--md-sys-color-background); }
body { margin: 0; color: var(--md-sys-color-on-surface); background: var(--md-sys-color-background); font-size: 16px; line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.page-width { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

.app-bar { min-height: 76px; display: flex; align-items: center; gap: 28px; padding: 12px max(24px, calc((100vw - 1120px)/2)); border-bottom: 1px solid #dce6ef; background: #f8fbfe; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; color: #20291d; font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.brand b { color: var(--md-sys-color-primary); font-weight: 600; }
.brand-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--md-sys-color-primary); color: white; font-size: 18px; font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.nav-link { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border-radius: 999px; color: #444b41; font-size: 14px; font-weight: 500; white-space: nowrap; }
.nav-link:hover { background: #edf4fb; }
.nav-link.active { color: #1f4e7b; background: #e1effc; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: box-shadow .16s, background .16s, transform .16s; }
.button:hover { box-shadow: 0 2px 6px #17211524; }
.button:active { transform: scale(.98); }
.button:focus-visible, .nav-link:focus-visible, .icon-button:focus-visible, .text-button:focus-visible, input:focus-visible { outline: 3px solid #77aede; outline-offset: 2px; }
.button:disabled { opacity: .62; cursor: wait; }
.button-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.button-filled:hover { background: #245d96; }
.button-tonal { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); }
.button-outlined { border-color: var(--md-sys-color-outline); color: var(--md-sys-color-primary); background: transparent; }
.button-text { color: var(--md-sys-color-primary); background: transparent; }
.button-small { min-height: 42px; padding-inline: 18px; }
.button-wide { width: 100%; }
.icon-button, .text-button { border: 0; color: var(--md-sys-color-primary); background: transparent; cursor: pointer; }

.home-hero { min-height: 530px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 56px; padding-block: 60px 68px; }
.hero-copy { padding-block: 10px; }
.overline, .section-eyebrow { color: #52677e; font-size: 12px; font-weight: 700; letter-spacing: .09em; }
.overline { display: flex; align-items: center; gap: 9px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #4d8b40; }
h1, h2, h3, p { margin-top: 0; }
.hero-copy h1 { margin: 22px 0 16px; font-size: clamp(50px, 6vw, 72px); line-height: 1.04; letter-spacing: -2.8px; font-weight: 500; }
.hero-copy > p { max-width: 480px; margin-bottom: 25px; color: #4d5549; font-size: 17px; line-height: 1.62; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.server-address { width: min(100%, 350px); display: flex; align-items: center; gap: 13px; margin-top: 37px; padding: 14px 14px; border: 1px solid #d7e1eb; border-radius: 17px; background: #fff; }
.server-address-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #2b659d; background: #e6f2ff; font-size: 20px; }
.server-address span:nth-child(2) { display: grid; gap: 1px; flex: 1; }
.server-address small { color: #687064; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.server-address b { font-size: 14px; font-weight: 600; }
.server-address .icon-button { min-width: 40px; min-height: 40px; border-radius: 50%; font-size: 20px; }
.server-address .icon-button:hover { background: #eef5fc; }
.world-art { height: 370px; position: relative; overflow: hidden; isolation: isolate; margin: 0; border-radius: var(--radius-extra-large); background: #27322b; box-shadow: 0 12px 32px #28331e18; }
.spawn-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.world-art::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .17; background-image: linear-gradient(#fff 1px, transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom,black,transparent 78%); }
.art-sun { position: absolute; width: 78px; height: 78px; top: 54px; right: 75px; border-radius: 50%; background: #fff0c9; box-shadow: 0 0 0 18px #fff0c92d,0 0 70px #fff3d17d; }
.art-cloud { position: absolute; height: 12px; border-radius: 12px; background: #ffffff80; }
.cloud-one { width: 76px; top: 92px; left: 54px; }.cloud-two { width: 44px; top: 127px; left: 160px; }
.ridge { position: absolute; right: -12%; bottom: 30px; left: -12%; height: 190px; border-radius: 48% 52% 0 0 / 34% 41% 0 0; }
.ridge-back { bottom: 95px; background: #8ca78a; transform: rotate(-5deg); }
.ridge-middle { bottom: 43px; background: #668264; transform: rotate(5deg); }
.ridge-front { bottom: -62px; background: #3d6447; transform: rotate(-4deg); }
.art-path { position: absolute; bottom: -44px; left: 47%; width: 100px; height: 180px; transform: rotate(17deg); border-radius: 50% 50% 0 0; background: #c7b27d; opacity: .92; }
.art-tree { position: absolute; bottom: 89px; z-index: 2; width: 17px; height: 60px; background: #634e36; }
.art-tree::before,.art-tree::after,.art-tree i { content:""; position:absolute; width:54px; height:55px; left:-18px; top:-39px; border-radius:12px; background:#315a3b; }
.art-tree::after { width:42px; height:42px; left:-12px; top:-61px; background:#416c47; }
.art-tree i { width:12px;height:12px;left:3px;top:6px;background:#6a8350; }
.tree-one { left:17%; transform:scale(.86); }.tree-two { right:20%; transform:scale(1.1); }
.art-sign { position: absolute; z-index: 3; right: 25px; bottom: 22px; padding: 8px 12px; border: 1px solid #ffffff56; border-radius: 999px; color: white; background: #1d3428a8; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.art-sign span { padding-inline: 5px; color: #cce69f; }
.home-next { padding-block: 18px 70px; }
.home-next h2, .join-banner h2 { margin: 8px 0 25px; font-size: clamp(26px,3vw,35px); font-weight: 500; letter-spacing: -.7px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.feature-card { min-height: 185px; padding: 22px 23px; border-radius: 20px; background: var(--md-sys-color-surface-container); }
.feature-number { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 50%; color: #255326; background: #dcecff; font-size: 12px; font-weight: 700; }
.feature-card h3 { margin-bottom: 7px; font-size: 17px; font-weight: 600; }
.feature-card p { max-width: 310px; margin-bottom: 0; color: #535a50; font-size: 14px; line-height: 1.52; }
.join-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 62px; padding: 29px 32px; border-radius: 24px; background: #e2ecdc; }
.join-banner h2 { margin: 6px 0 4px; }.join-banner p { margin: 0; color: #50594c; font-size: 14px; }
.site-footer { border-top: 1px solid #dce6ef; background: #f8fbfe; }
.footer-inner { min-height: 76px; display: flex; align-items: center; gap: 22px; }
.footer-inner > span { margin-right: auto; color: #60685b; font-size: 13px; }
.footer-inner > a:last-child { color: #50614b; font-size: 13px; }
.footer-inner > .creator-pill { display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; border: 1px solid #55585b; border-radius: 999px; background: #34373a; color: #f1f2f3; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.footer-inner > .creator-pill b { color: #ff8a32; font-weight: 800; }
.footer-inner > .creator-pill:hover { background: #45484b; transform: translateY(-1px); }

.narrow-page { max-width: 1010px; min-height: calc(100vh - 152px); padding-block: 28px 72px; }
.back-link { min-height: 44px; display: inline-flex; align-items: center; color: #476347; font-size: 14px; font-weight: 500; }
.page-title { max-width: 700px; padding-block: 22px 28px; }
.page-title h1 { margin: 7px 0 8px; font-size: clamp(36px,5vw,48px); line-height: 1.1; font-weight: 500; letter-spacing: -1.2px; }
.page-title p { max-width: 620px; margin: 0; color: #51584e; font-size: 16px; line-height: 1.55; }
code { font-family: ui-monospace,Consolas,monospace; font-size: .94em; }
.form-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.75fr); gap: 20px; align-items: start; }
.surface-card { border: 1px solid #dce6ef; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px #20291d0c; }
.join-form { padding: 27px; }
.form-section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.step-chip { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #1f4e7b; background: #e5f0fb; font-size: 14px; font-weight: 700; }
.form-section-title h2 { margin: 0; font-size: 19px; font-weight: 600; }.form-section-title p { margin: 1px 0 0; color: #646b61; font-size: 13px; }
.field { display: grid; gap: 7px; margin-bottom: 21px; color: #292e27; font-size: 14px; font-weight: 500; }
.field > span:first-child { font-weight: 600; }.field > span b { color: #a64236; }
.field > small { color: #646b61; font-size: 12px; font-weight: 400; line-height: 1.5; }
.field input:not([type=file]), .field textarea { width: 100%; min-height: 52px; padding: 12px 15px; border: 1px solid #74796f; border-radius: 9px; color: #191d17; background: #fff; font: inherit; }
.field input::placeholder { color: #777d73; opacity: 1; }
.field input:focus, .field textarea:focus { border: 2px solid var(--md-sys-color-primary); outline: none; padding-inline: 14px; }
.verification-choice > label { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid #d8e2ec; border-radius: 12px; background: #fff; line-height: 1.45; }
.verification-choice input[type=radio] { width: 18px !important; height: 18px !important; min-height: 18px !important; flex: 0 0 18px; margin: 1px 0 0; accent-color: var(--md-sys-color-primary); }
.email-prefix-row { display: flex; align-items: center; gap: 9px; }
.email-prefix-row input { flex: 1; min-width: 0; }
.email-prefix-row > span { color: #60685b; font-size: 13px; white-space: nowrap; }
.badge-choice-button { margin: 4px 0 18px; }
.account-card { max-width: 620px; padding: 26px; border: 1px solid #dce6ef; border-radius: 22px; background: #fff; }
.account-card .field { margin-bottom: 18px; }
.account-register-link { margin: 18px 0 0; color: #596254; font-size: 14px; }
.account-register-link a, .text-link { color: var(--md-sys-color-primary); font-weight: 600; }
.account-nav-link { flex: 0 0 auto; }
.account-facts { display: grid; gap: 10px; margin-bottom: 24px; }
.account-facts > div { display: grid; gap: 3px; padding: 13px 15px; border-radius: 13px; background: #f2f7fc; }
.account-facts span { color: #60685b; font-size: 12px; }
.account-facts b { overflow-wrap: anywhere; }
.account-reset-success { margin-top: 14px; color: var(--md-sys-color-primary); font-weight: 600; }
.password-reset-card { margin-top: 26px; padding: 25px; }
.password-reset-card h2 { margin: 0 0 8px; }.password-reset-card > p { color: #60685b; }
.password-reset-card [hidden] { display: none !important; }
.file-input { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; }
.upload-box { min-height: 123px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed #8d9786; border-radius: 16px; color: #355b34; background: #f7fbff; cursor: pointer; }
.upload-box:hover,.upload-box.drag-over { border-color: #2864a8; background: #eef5fc; }
.upload-symbol { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 2px; border-radius: 50%; background: #e4f0fc; font-size: 20px; }
.upload-box b { font-size: 14px; font-weight: 600; }.upload-box small { color: #60685b; font-size: 12px; }
.check-field { display: flex; align-items: flex-start; gap: 11px; margin: 3px 0 17px; color: #454c42; font-size: 13px; line-height: 1.45; }
.check-field input { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: var(--md-sys-color-primary); }
.inline-error { min-height: 0; margin-bottom: 0; color: var(--md-sys-color-error); font-size: 13px; }
.inline-error:not(:empty) { margin-bottom: 12px; }
.privacy-caption,.warning-caption { margin: 13px 0 0; color: #62695f; text-align: center; font-size: 12px; line-height: 1.5; }
.info-card { position: sticky; top: 20px; padding: 24px; border-radius: 22px; background: #eaf3fb; }
.info-icon { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; color: #255326; background: #dcecff; font-size: 17px; font-weight: 700; }
.info-card h2 { margin-bottom: 19px; font-size: 18px; font-weight: 600; }
.timeline { display: grid; gap: 17px; margin: 0 0 19px; padding: 0; list-style: none; counter-reset: steps; }
.timeline li { display: grid; gap: 2px; padding-left: 15px; border-left: 2px solid #95b88c; }
.timeline b { font-size: 13px; font-weight: 600; }.timeline span { color: #555e51; font-size: 12px; line-height: 1.45; }
.text-link { color: #285d91; font-size: 13px; font-weight: 600; }
.success-card { max-width: 620px; margin: 22px auto; padding: 30px; }
.success-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 19px; border-radius: 50%; color: #1d511f; background: #d5efcc; font-size: 24px; }
.success-card h2 { margin: 5px 0 8px; font-size: 27px; font-weight: 600; }.success-card > p { color: #535b50; font-size: 14px; line-height: 1.5; }
.credential-row { display: flex; align-items: center; gap: 12px; padding: 10px 11px 10px 17px; border-radius: 14px; background: #f0f6fb; }
.credential-row code { flex: 1; overflow-wrap: anywhere; color: #1e3f1d; font-size: 17px; font-weight: 700; letter-spacing: .035em; }
.login-example { margin-top: 16px; padding: 14px; border-radius: 13px; color: #34432f !important; background: #eaf3fb; }
.application-code { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 19px 0; padding-top: 15px; border-top: 1px solid #dce6ef; }
.application-code span,.status-code span { color: #62695f; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.application-code code { flex: 1; min-width: 180px; overflow-wrap: anywhere; font-size: 12px; }
.warning-caption { color: #7b4b14; }
.status-page { max-width: 720px; }
.status-lookup { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 13px; padding: 20px; }
.status-lookup .field { margin: 0; }.status-lookup .button { min-width: 140px; }
.status-card { margin-top: 17px; padding: 25px; }
.status-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 50%; color: #275729; background: #e0efff; font-size: 21px; font-weight: 700; }
.status-card h2 { margin: 4px 0 7px; font-size: 24px; font-weight: 600; }.status-card > p { margin-bottom: 0; color: #4f574c; font-size: 14px; }
.server-login-details { display: grid; gap: 12px; margin-top: 17px; padding: 16px; border-radius: 16px; background: #edf4fb; }
.server-login-details div { display: grid; gap: 2px; }.server-login-details span { color: #596254; font-size: 12px; }.server-login-details b { font-size: 15px; font-weight: 600; }.server-login-details p { margin: 2px 0 0; color: #404b3d; font-size: 13px; }
.status-code { display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline; margin-top: 18px; padding-top: 14px; border-top: 1px solid #dce6ef; }.status-code code { overflow-wrap: anywhere; font-size: 12px; }
.help-card { margin-top: 20px; padding: 19px; border-radius: 16px; background: #edf4fa; }.help-card b { font-size: 14px; }.help-card p { margin: 5px 0 0; color: #555d52; font-size: 13px; }
.guide-list { display: grid; gap: 13px; }.guide-step { display: grid; grid-template-columns: 52px 1fr; gap: 15px; padding: 22px; }.guide-number { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; color: #245126; background: #e4f0fc; font-size: 14px; font-weight: 700; }.guide-step h2 { margin: 2px 0 7px; font-size: 17px; font-weight: 600; }.guide-step p { margin: 0; color: #535b50; font-size: 14px; line-height: 1.55; }.notice-card { margin-top: 16px; padding: 20px; border-radius: 18px; background: #f7edda; }.notice-card b { color: #543b18; font-size: 14px; }.notice-card p { margin: 5px 0 0; color: #5f513b; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }.guide-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }

.admin-wrap { width: min(980px,calc(100% - 48px)); margin: 38px auto 70px; min-height: calc(100vh - 190px); }.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 21px; }.admin-head h1 { margin: 5px 0 0; font-size: 31px; font-weight: 500; }.admin-head .section-eyebrow { font-size: 11px; }.admin-card { max-width: 480px; padding: 23px; border-radius: 22px; background: white; border: 1px solid #dce6ef; }.admin-card label { display: grid; gap: 7px; color: #41483e; font-size: 13px; font-weight: 600; }.admin-card input { min-height: 50px; padding: 0 13px; border: 1px solid #74796f; border-radius: 9px; }.admin-card .button { margin-top: 15px; }.admin-list { display: grid; gap: 12px; }.app-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 17px; padding: 17px; border: 1px solid #dce6ef; border-radius: 20px; background: white; }.app-row img { width: 150px; height: 128px; object-fit: cover; border-radius: 13px; background: #edf4fa; }.app-details { color: #51584e; font-size: 13px; line-height: 1.8; }.app-details b { color: #252a23; }.app-details code { color: #62695f; font-size: 11px; overflow-wrap: anywhere; }.badge { display: inline-flex; padding: 4px 9px; border-radius: 999px; color: #294f77; background: #e2effb; font-size: 10px; font-weight: 700; letter-spacing: .05em; }.admin-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }.admin-actions button { min-height: 40px; padding: 0 13px; border: 1px solid #b7c8d9; border-radius: 999px; color: #285d91; background: white; font-size: 12px; font-weight: 600; cursor: pointer; }.admin-actions button.approve,.admin-actions button.sync { color: white; background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }.admin-actions button.reject { color: #9b3830; border-color: #d6b4ad; }.empty-state { padding: 24px; border-radius: 18px; color: #596254; background: white; }.admin-message { margin-top: 10px; color: #285d91; font-size: 13px; }.admin-message.error { color: var(--md-sys-color-error); }

@media (max-width: 760px) {
  .page-width { width: min(100% - 36px,620px); }
  .app-bar { min-height: 66px; flex-wrap: wrap; gap: 8px 13px; padding: 10px 18px 8px; }
  .brand { font-size: 15px; }.brand-icon { width: 33px; height: 33px; }
  .main-nav { order: 3; width: 100%; gap: 2px; margin: 0 -6px; overflow-x: auto; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }.nav-link { min-height: 39px; padding-inline: 12px; font-size: 13px; }
  .app-bar > .button { margin-left: auto; }.button-small { min-height: 39px; padding-inline: 15px; font-size: 13px; }
  .home-hero { grid-template-columns: 1fr; gap: 28px; padding-block: 39px 43px; }
  .hero-copy h1 { margin-top: 16px; font-size: clamp(48px,13vw,64px); letter-spacing: -2px; }
  .hero-copy > p { max-width: 540px; font-size: 16px; }
  .world-art { height: min(68vw,310px); min-height: 220px; border-radius: 25px; }
  .home-next { padding-block: 5px 43px; }.home-next h2 { margin-bottom: 18px; }
  .feature-grid { grid-template-columns: 1fr; gap: 9px; }.feature-card { min-height: 0; display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; padding: 16px; border-radius: 17px; }.feature-number { grid-row: span 2; margin: 1px 0 0; }.feature-card h3 { margin-bottom: 3px; font-size: 16px; }.feature-card p { font-size: 13px; }
  .join-banner { align-items: flex-start; flex-direction: column; margin-bottom: 39px; padding: 22px; border-radius: 20px; }.join-banner h2 { font-size: 24px; }.join-banner .button { width: 100%; }
  .footer-inner { min-height: 72px; flex-wrap: wrap; justify-content: space-between; gap: 5px 15px; padding-block: 13px; }.footer-inner > span { width: 100%; order: 2; font-size: 12px; }.footer-inner > a:last-child { font-size: 12px; }
  .narrow-page { min-height: calc(100vh - 195px); padding-block: 17px 46px; }.page-title { padding-block: 13px 21px; }.page-title h1 { font-size: 37px; }.page-title p { font-size: 15px; }
  .form-layout { grid-template-columns: 1fr; gap: 12px; }.join-form { padding: 20px 17px; border-radius: 21px; }.info-card { position: static; order: 2; padding: 19px; border-radius: 20px; }
  .field { margin-bottom: 18px; }.field input:not([type=file]) { min-height: 54px; font-size: 16px; }.upload-box { min-height: 112px; }.button-wide { min-height: 51px; }
  .success-card { margin-top: 5px; padding: 22px 18px; border-radius: 21px; }.success-card h2 { font-size: 25px; }.credential-row { align-items: stretch; flex-direction: column; }.credential-row .button { width: 100%; }.credential-row code { padding: 4px 2px; }
  .status-lookup { grid-template-columns: 1fr; padding: 17px; }.status-lookup .button { width: 100%; }.status-card { padding: 21px 17px; }.status-page { padding-bottom: 45px; }
  .guide-step { grid-template-columns: 39px 1fr; gap: 12px; padding: 17px 15px; border-radius: 19px; }.guide-number { width: 34px; height: 34px; border-radius: 12px; }.guide-step h2 { font-size: 16px; }.guide-step p { font-size: 13px; }
  .guide-actions { flex-direction: column; }.guide-actions .button { width: 100%; }
  .admin-wrap { width: calc(100% - 36px); margin-top: 22px; }.admin-head { align-items: flex-start; }.admin-head h1 { font-size: 26px; }.app-row { grid-template-columns: 90px 1fr; gap: 12px; padding: 13px; border-radius: 17px; }.app-row img { width: 90px; height: 94px; }.app-details { min-width: 0; font-size: 12px; }.admin-actions { grid-column: 1/-1; justify-content: stretch; }.admin-actions button { flex: 1; }
}
@media (max-width: 380px) {
  .page-width { width: calc(100% - 28px); }.app-bar { padding-inline: 14px; }.nav-link { padding-inline: 9px; font-size: 12px; }.app-bar > .button { padding-inline: 12px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-actions .button { width: 100%; }.server-address { margin-top: 25px; }.page-title h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.footer-inner > a.creator-pill:last-child, .footer-inner > a.creator-pill:last-child:hover { color: #f1f2f3; font-size: 12px; }

.player-profile { display: grid; grid-template-columns: minmax(0,1fr) 230px; align-items: center; gap: 16px; padding: 18px; border-radius: 19px; background: #eaf4ff; }
.player-profile-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.minecraft-head { width: 88px; height: 88px; image-rendering: pixelated; border-radius: 18px; background: #d8eafa; box-shadow: 0 5px 18px #214f7a20; }
.player-profile h2 { margin: 3px 0 5px; font-size: 25px; }
#minecraft-uuid { display: block; max-width: 100%; overflow-wrap: anywhere; color: #53677d; font-size: 11px; }
.skin-viewer-wrap { width: 100%; height: 230px; overflow: hidden; border-radius: 15px; background: radial-gradient(ellipse at 50% 62%,#d8eaff 0%,#eaf4ff 70%); }
#minecraft-skin-viewer { width: 100%; height: 100%; display: block; }
.profile-note { margin: 10px 2px 0; color: #5b6b7c; font-size: 12px; }
.player-stat-section { margin: 26px 0; }
.player-stat-section h2 { margin: 4px 0 14px; font-size: 21px; }
.player-stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.player-stat { display: grid; gap: 4px; min-height: 80px; align-content: center; padding: 13px; border: 1px solid #dce8f3; border-radius: 15px; background: #f7fbff; }
.player-stat span { color: #58697a; font-size: 11px; }
.player-stat b { color: #244f7b; font-size: 19px; }
@media (max-width: 650px) { .player-profile { grid-template-columns: 1fr; }.skin-viewer-wrap { height: 270px; }.player-stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.credits-page { min-height: calc(100vh - 190px); padding-top: 30px; padding-bottom: 70px; }
.credits-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(245px,1fr)); gap: 18px; margin-top: 30px; }
.credit-card { overflow: hidden; border: 1px solid #dce6ef; border-radius: 22px; background: #fff; box-shadow: 0 8px 25px rgb(38 67 96 / 5%); }
.credit-photo { width: 100%; height: 210px; display: grid; place-items: center; object-fit: cover; color: #285d91; background: #eaf3fb; font-size: 52px; font-weight: 700; }.credit-initials { border-radius: 0; }
.credit-content { padding: 19px; }.credit-content h2 { margin: 0 0 5px; font-size: 20px; }.credit-links { display: flex; flex-wrap: wrap; gap: 12px; }.credit-links a { display: inline-block; color: #285d91; font-size: 13px; overflow-wrap: anywhere; }.credit-bio { margin: 12px 0; color: #51584e; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.credits-admin { margin-top: 44px; padding: 24px; border: 1px solid #dce6ef; border-radius: 22px; background: #f8fbfe; }.credits-admin h2 { margin: 5px 0; }.credits-admin .admin-head p { margin: 6px 0; color: #596254; font-size: 13px; }.credits-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 18px; border: 1px solid #dce6ef; border-radius: 17px; background: #fff; }.credits-editor .field { display: grid; gap: 7px; margin: 0; color: #41483e; font-size: 13px; font-weight: 600; }.credits-editor .field:nth-of-type(3),.credits-editor .field:nth-of-type(4),.credits-editor .field:nth-of-type(5),.credit-admin-preview,.credits-form-actions,.credits-editor .admin-message { grid-column: 1 / -1; }.credits-editor input:not([type="checkbox"]),.credits-editor textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #bdc9d5; border-radius: 10px; font: inherit; }.credits-editor textarea { resize: vertical; }.credit-admin-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }.credit-admin-preview img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; }.credit-admin-preview label { display: flex; align-items: center; gap: 8px; color: #535b50; font-size: 13px; }.credits-form-actions { display: flex; flex-wrap: wrap; gap: 9px; }.credits-admin-list { display: grid; gap: 10px; margin-top: 17px; }.credit-admin-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 12px; border: 1px solid #dce6ef; border-radius: 15px; background: #fff; }.credit-admin-row > img,.credit-admin-avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; object-fit: cover; background: #eaf3fb; color: #285d91; font-size: 20px; font-weight: 700; }.credit-admin-row > div:nth-child(2) { display: grid; gap: 3px; overflow-wrap: anywhere; }.credit-admin-row span,.credit-admin-row small { color: #596254; font-size: 12px; }
@media (max-width: 650px) { .credits-admin { padding: 15px; }.credits-editor { grid-template-columns: 1fr; padding: 13px; }.credits-editor .field,.credits-admin .admin-head { min-width: 0; }.credit-admin-row { grid-template-columns: 44px minmax(0,1fr); }.credit-admin-row > img,.credit-admin-avatar { width: 44px; height: 44px; }.credit-admin-row .admin-actions { grid-column: 1 / -1; justify-content: start; } }
.credits-page { padding-top: 40px; }
.credits-page .page-title { max-width: 680px; margin-top: 22px; }
.credits-page .page-title h1 { margin: 10px 0 12px; font-size: clamp(38px,5vw,56px); font-weight: 500; letter-spacing: -1.7px; }
.credits-page .page-title p { max-width: 600px; color: var(--md-sys-color-on-surface-variant); font-size: 17px; line-height: 1.6; }
.credits-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,300px),1fr)); gap: 22px; margin-top: 34px; }
.credit-card { position: relative; min-height: 330px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 28px; background: var(--md-sys-color-surface-container-low); box-shadow: 0 1px 2px rgb(20 44 69 / 10%),0 2px 6px rgb(20 44 69 / 8%); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.credit-card:hover { transform: translateY(-3px); border-color: #9ab7d3; box-shadow: 0 3px 8px rgb(20 44 69 / 12%),0 8px 20px rgb(20 44 69 / 10%); }
.credit-card-top { position: relative; min-height: 128px; display: flex; justify-content: flex-end; padding: 18px; background: linear-gradient(135deg,#d8eaff 0%,#e8f2fc 58%,#e2edf8 100%); }
.credit-card-top::after { position: absolute; right: 48px; bottom: -38px; width: 120px; height: 120px; border: 1px solid rgb(40 100 168 / 10%); border-radius: 50%; content: ""; }
.credit-kicker { z-index: 1; align-self: flex-start; padding: 6px 11px; border-radius: 999px; color: var(--md-sys-color-on-secondary-container); background: rgb(255 255 255 / 68%); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.credit-avatar-wrap { position: absolute; z-index: 2; bottom: -42px; left: 22px; width: 100px; height: 100px; padding: 5px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 50%; background: var(--md-sys-color-surface-container-low); }
.credit-avatar { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.credit-avatar-placeholder { display: grid; place-items: center; color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container); }
.credit-avatar-placeholder svg { width: 54px; height: 54px; fill: currentColor; }
.credit-content { flex: 1; display: flex; flex-direction: column; padding: 55px 22px 21px; }
.credit-content h2 { margin: 0; color: var(--md-sys-color-on-surface); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.25px; overflow-wrap: anywhere; }
.credit-bio { margin: 10px 0 20px; color: var(--md-sys-color-on-surface-variant); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.credit-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }
.credit-chip { min-height: 40px; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 999px; color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface); font-size: 12px; font-weight: 500; transition: background .15s ease,border-color .15s ease; }
.credit-chip:hover { border-color: #7fa6cb; background: var(--md-sys-color-secondary-container); }
.credit-chip svg { width: 18px; height: 18px; flex: 0 0 18px; fill: var(--md-sys-color-primary); }
.credit-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit-chip .credit-external { margin-left: -3px; color: var(--md-sys-color-primary); font-size: 14px; }
.credits-empty { grid-column: 1 / -1; margin: 0; padding: 36px 24px; border: 1px dashed var(--md-sys-color-outline-variant); border-radius: 24px; color: var(--md-sys-color-on-surface-variant); background: var(--md-sys-color-surface-container-low); text-align: center; }
@media (max-width: 600px) { .credits-grid { gap: 15px; }.credit-card { min-height: 0; }.credit-card-top { min-height: 116px; }.credits-page .page-title p { font-size: 15px; } }
.credit-admin-avatar svg { width: 28px; height: 28px; fill: currentColor; }
.credit-card-top::after { content: none; }
.credit-card-top { min-height: 124px; background: linear-gradient(135deg,#dcecff 0%,#eaf3fc 100%); }
.credit-avatar-wrap { bottom: -39px; width: 94px; height: 94px; padding: 4px; box-shadow: 0 2px 5px rgb(25 45 65 / 12%); }
.credit-content { padding-top: 51px; }
.credit-links { align-items: flex-start; gap: 10px; }
.credit-chip { gap: 8px; margin: 0; line-height: 1; }
.credit-chip .credit-icon { width: 20px; height: 20px; display: block; flex: 0 0 20px; align-self: center; fill: var(--md-sys-color-primary); }
.credit-chip > span:not(.credit-external) { display: inline-flex; align-items: center; min-height: 20px; line-height: 1.2; }
.credit-chip .credit-external { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; line-height: 1; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 3px solid #1d5f9e; outline-offset: 3px; box-shadow: 0 0 0 5px rgb(29 95 158 / 18%); }
.field input:focus-visible,.field textarea:focus-visible { outline: 3px solid #1d5f9e; outline-offset: 3px; box-shadow: 0 0 0 5px rgb(29 95 158 / 18%); }