:root{--bg:#050713;--panel:rgba(11,16,34,.78);--panel2:rgba(16,24,52,.88);--line:rgba(169,190,255,.16);--text:#f2f7ff;--muted:#a5b3d2;--pink:#ff4fd8;--purple:#a855f7;--blue:#2e7bff;--cyan:#35d3ff;--green:#37f0a1;--yellow:#ffd166;--red:#ff5277;--r:24px;--shadow:0 24px 90px rgba(0,0,0,.5)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 0%,rgba(168,85,247,.30),transparent 24%),radial-gradient(circle at 90% 10%,rgba(46,123,255,.23),transparent 28%),linear-gradient(135deg,#050713,#0a1025 45%,#050713);color:var(--text);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;min-height:100vh}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}textarea{min-height:120px}.bg-noise{position:fixed;inset:0;opacity:.15;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 88%)}.bg-orb{position:fixed;width:420px;height:420px;border-radius:999px;filter:blur(120px);opacity:.28;pointer-events:none}.orb-left{left:-160px;top:180px;background:var(--purple)}.orb-right{right:-130px;top:260px;background:var(--cyan)}
.public-nav{position:sticky;top:16px;z-index:10;max-width:1620px;margin:16px auto 0;display:flex;align-items:center;gap:22px;padding:16px 22px;border:1px solid var(--line);border-radius:22px;background:rgba(5,7,19,.72);backdrop-filter:blur(20px);box-shadow:var(--shadow)}.brand{font-size:28px;font-weight:950;letter-spacing:-.06em}.brand span{color:var(--pink);text-shadow:0 0 24px rgba(255,79,216,.7)}.brand{color:white;text-shadow:0 0 24px rgba(53,211,255,.45)}.public-nav nav{display:flex;gap:8px;flex:1;justify-content:center}.public-nav nav a{padding:10px 13px;border-radius:999px;color:#cfd9ef;font-weight:800}.public-nav nav a.active,.public-nav nav a:hover{color:white;background:rgba(255,255,255,.065);box-shadow:inset 0 -2px 0 var(--purple)}.nav-actions{display:flex;gap:8px;align-items:center}.lang,.menu-btn{border:1px solid var(--line);background:rgba(255,255,255,.06);color:white;border-radius:999px;padding:9px 11px;cursor:pointer;font-weight:900}.lang.active{box-shadow:0 0 18px rgba(53,211,255,.22);border-color:rgba(53,211,255,.45)}.menu-btn{display:none}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:12px;padding:12px 18px;font-weight:950;cursor:pointer}.btn.primary,.primary{background:linear-gradient(135deg,var(--pink),var(--purple) 42%,var(--blue));color:white;box-shadow:0 18px 48px rgba(168,85,247,.26)}.btn.ghost{background:rgba(255,255,255,.055);border:1px solid var(--line);color:white}.btn.subtle{background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--muted)}.btn.big{padding:16px 28px;border-radius:14px}.btn.full{width:100%}
.hero-premium{max-width:1620px;margin:0 auto;min-height:760px;position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:70px 42px 22px;overflow:hidden}.hero-copy{position:relative;z-index:2}.hero-copy h1{font-size:clamp(72px,9vw,136px);line-height:.82;letter-spacing:-.085em;margin:0;color:#dcebff;text-shadow:0 0 40px rgba(53,211,255,.35)}.hero-copy h1 span{color:var(--pink);text-shadow:0 0 42px rgba(255,79,216,.65)}.hero-copy h2{font-size:clamp(34px,4vw,58px);letter-spacing:-.05em;margin:18px 0 14px}.hero-copy p{font-size:18px;line-height:1.7;color:var(--muted);max-width:760px}.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px;max-width:860px;border:1px solid var(--line);border-radius:20px;background:rgba(9,13,28,.64);backdrop-filter:blur(18px);overflow:hidden}.trust-strip div{padding:18px;border-right:1px solid var(--line)}.trust-strip div:last-child{border-right:0}.trust-strip b{font-size:25px;color:#d9c5ff}.trust-strip strong{display:block;margin-top:7px}.trust-strip small{display:block;color:var(--muted);margin-top:3px}
.server-scene{position:absolute;right:0;top:0;bottom:0;width:56%;overflow:hidden;opacity:.95}.server-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050713 0%,rgba(5,7,19,.74) 16%,rgba(5,7,19,.2) 48%,rgba(5,7,19,.2));}.rack-left,.rack-right{position:absolute;top:0;bottom:0;width:48%;opacity:.9}.rack-left{left:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 3px,transparent 3px 38px),repeating-linear-gradient(90deg,rgba(255,79,216,.40) 0 2px,transparent 2px 54px)}.rack-right{right:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 3px,transparent 3px 38px),repeating-linear-gradient(90deg,rgba(53,211,255,.55) 0 2px,transparent 2px 54px)}.corridor-glow{position:absolute;left:31%;right:31%;top:0;bottom:0;background:linear-gradient(to bottom,rgba(255,255,255,.19),transparent 22%),linear-gradient(90deg,rgba(255,79,216,.12),transparent,rgba(53,211,255,.12));clip-path:polygon(24% 0,76% 0,100% 100%,0 100%)}.hero-person{position:absolute;z-index:1;left:57%;bottom:150px;transform:translateX(-50%);width:114px;height:250px;filter:drop-shadow(0 0 28px rgba(255,255,255,.18))}.face{width:68px;height:68px;background:linear-gradient(#f2d6c6,#a5745c);border-radius:50%;margin:0 auto 8px}.suit{width:98px;height:118px;margin:auto;background:linear-gradient(135deg,#d4d8df,#626b7d);border-radius:28px 28px 15px 15px}.pants{width:86px;height:64px;margin:auto;background:linear-gradient(90deg,#424a5c 48%,transparent 48% 52%,#424a5c 52%);border-radius:0 0 15px 15px}
.page{max-width:1620px;margin:0 auto;padding:42px 32px}.section-head{margin-bottom:26px}.section-head.compact{text-align:center;max-width:900px;margin:0 auto 26px}.section-head h1,.section-head h2{font-size:clamp(34px,4vw,62px);letter-spacing:-.055em;line-height:1;margin:8px 0}.section-head p{color:var(--muted);font-size:18px;line-height:1.65}.eyebrow{display:inline-flex;padding:8px 12px;border:1px solid rgba(168,85,247,.35);border-radius:999px;color:#ead8ff;background:rgba(168,85,247,.09);font-size:12px;font-weight:950;letter-spacing:.08em}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.services-grid.all-services,.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);backdrop-filter:blur(18px);overflow:hidden}.card h3{font-size:24px;margin:0 0 10px;letter-spacing:-.03em}.card p{color:var(--muted);line-height:1.6}.service-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:18px;font-size:30px;margin-bottom:18px;background:rgba(255,255,255,.06);border:1px solid var(--line)}.service-icon.purple{color:#f2b6ff;box-shadow:0 0 28px rgba(255,79,216,.2)}.service-icon.blue{color:#bceaff;box-shadow:0 0 28px rgba(53,211,255,.2)}.price{margin:18px 0;color:#dbeaff}.price strong{font-size:34px;color:#fff}.price small{color:var(--muted)}.card-actions{display:flex;gap:10px;margin-top:18px}.register-card{border-color:rgba(168,85,247,.45);background:linear-gradient(180deg,rgba(168,85,247,.13),rgba(255,255,255,.035))}.register-card ul,.plan-card ul,.contact-info ul{list-style:none;padding:0;color:#dce7ff}.register-card li,.plan-card li,.contact-info li{margin:8px 0}.detail-layout,.contact-layout{display:grid;grid-template-columns:1fr 380px;gap:18px;align-items:start}.detail-main h2{margin-top:28px}.detail-hero-icon{font-size:56px}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.feature-list div,.tag-list span{padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.05);color:#dce7ff}.tag-list{display:flex;gap:10px;flex-wrap:wrap}.detail-side{position:sticky;top:110px}.form label{display:block;margin-bottom:13px;color:#dce7ff;font-weight:850}.form input,.form select,.form textarea{width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:white;outline:none}.form option{background:#0b1024}.check{display:flex!important;gap:10px}.check input{width:auto!important}
.admin-body{background:#050713}.admin-shell{display:grid;grid-template-columns:275px minmax(0,1fr);min-height:100vh}.admin-sidebar{border-right:1px solid var(--line);background:rgba(5,7,19,.78);padding:24px;position:sticky;top:0;height:100vh}.admin-brand{display:block;margin-bottom:28px}.admin-sidebar nav{display:grid;gap:8px}.admin-sidebar nav a{padding:13px 14px;border-radius:14px;color:#cfd8ee;font-weight:850}.admin-sidebar nav a.active,.admin-sidebar nav a:hover{background:linear-gradient(135deg,rgba(168,85,247,.28),rgba(46,123,255,.22));color:white}.side-status{position:absolute;left:24px;right:24px;bottom:76px;color:#bcffe2;font-size:13px}.side-status span{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--green);margin-right:8px}.back-public{position:absolute;left:24px;right:24px;bottom:24px;padding:12px;border:1px solid var(--line);border-radius:14px;text-align:center;color:#dce7ff}.admin-main{min-width:0}.admin-top{height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 28px;border-bottom:1px solid var(--line);background:rgba(5,7,19,.62);position:sticky;top:0;z-index:3;backdrop-filter:blur(16px)}.admin-top small{display:block;color:var(--muted);margin-top:3px}.owner-chip{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}.admin-page{padding:28px}.admin-head{margin-bottom:22px}.admin-head h1{font-size:42px;letter-spacing:-.05em;margin:0 0 8px}.admin-head p{color:var(--muted)}.grid{display:grid;gap:16px;margin-bottom:16px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}.kpi{display:flex;justify-content:space-between;align-items:center}.kpi small{display:block;color:var(--muted);text-transform:uppercase;font-weight:900;font-size:11px}.kpi strong{display:block;font-size:32px;margin:7px 0}.kpi span{color:var(--green);font-weight:900;font-size:12px}.kpi b{font-size:36px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px}table{width:100%;border-collapse:collapse;min-width:650px}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;color:#dce7ff}th{font-size:12px;text-transform:uppercase;color:#aebbd5;background:rgba(255,255,255,.045)}.notice{padding:18px;border:1px solid rgba(255,209,102,.35);border-radius:18px;background:rgba(255,209,102,.08);color:#ffe9ae;margin-bottom:16px}.pill{display:inline-flex;padding:7px 10px;border-radius:999px;border:1px solid rgba(55,240,161,.25);background:rgba(55,240,161,.08);color:#bcffe2;font-weight:900}.pill.danger{border-color:rgba(255,82,119,.28);background:rgba(255,82,119,.08);color:#ffc1cc}.mini{padding:7px 10px;border-radius:999px;border:1px solid rgba(53,211,255,.25);background:rgba(53,211,255,.10);color:#bceeff;font-weight:900;cursor:pointer}
@media(max-width:1200px){.hero-premium{grid-template-columns:1fr}.server-scene{position:relative;width:100%;height:440px}.services-grid,.services-grid.all-services,.pricing-grid,.grid.four{grid-template-columns:repeat(2,1fr)}.detail-layout,.contact-layout,.grid.two{grid-template-columns:1fr}.detail-side{position:static}.admin-shell{grid-template-columns:1fr}.admin-sidebar{position:relative;height:auto}.side-status,.back-public{position:static;margin-top:18px}.admin-sidebar nav{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.public-nav{margin:0;border-radius:0;flex-wrap:wrap}.menu-btn{display:block;margin-left:auto}.public-nav nav{display:none;order:3;flex-basis:100%;justify-content:flex-start;flex-wrap:wrap}.public-nav nav.open{display:flex}.nav-actions{width:100%;overflow:auto}.hero-premium{padding:36px 16px}.hero-copy h1{font-size:60px}.trust-strip{grid-template-columns:1fr}.trust-strip div{border-right:0;border-bottom:1px solid var(--line)}.page{padding:28px 16px}.services-grid,.services-grid.all-services,.pricing-grid,.grid.three,.grid.four{grid-template-columns:1fr}.feature-list{grid-template-columns:1fr}.admin-sidebar nav{grid-template-columns:1fr}.admin-page{padding:18px}}


/* V0.2.3 — Nav Cleanup + Console Branding polish */
.public-nav nav {
  max-width: 520px;
}
.public-nav .nav-actions .lang {
  opacity: .72;
  padding: 8px 9px;
}
.public-nav .nav-actions .lang:hover,
.public-nav .nav-actions .lang.active {
  opacity: 1;
}
.public-nav nav a {
  letter-spacing: .01em;
}
@media(max-width:760px){
  .public-nav nav {
    max-width: none;
  }
}


/* V0.2.4 — Admin Modules + SMTP + Dashboard Permissions */
.module-purpose .module-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  font-size: 26px;
  margin-bottom: 14px;
}
.admin-head.small {
  margin-top: 28px;
}
.admin-head.small h1 {
  font-size: 34px;
}
button:disabled,
.btn[disabled] {
  opacity: .58;
  cursor: not-allowed;
  filter: grayscale(.2);
}
.fine-print {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}
.form .btn {
  margin-right: 8px;
  margin-top: 6px;
}


/* V0.2.5 — UI Completion + Translation Pass */

/* Premium purple/blue scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #a855f7 rgba(5,7,19,.86);
}
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-track {
  background: rgba(5,7,19,.9);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff4fd8, #a855f7 52%, #35d3ff);
  border-radius: 999px;
  border: 2px solid rgba(5,7,19,.96);
  box-shadow: 0 0 18px rgba(168,85,247,.45);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff7ee5, #b96cff 52%, #62e0ff);
}

/* Better hero: real asset placeholder instead of raw CSS racks */
.server-scene {
  background-image:
    linear-gradient(90deg, rgba(5,7,19,.18), rgba(5,7,19,.04)),
    url('/assets/img/hero-1uphosting-server-room.svg');
  background-size: cover;
  background-position: center;
  border-left: 1px solid rgba(169,190,255,.12);
}
.server-scene .rack-left,
.server-scene .rack-right,
.server-scene .corridor-glow,
.server-scene .hero-person {
  display: none;
}
.hero-premium:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 40%, rgba(255,79,216,.18), transparent 32%),
    radial-gradient(circle at 78% 30%, rgba(53,211,255,.18), transparent 30%);
  pointer-events: none;
}
.hero-copy h1 {
  text-transform: uppercase;
}
.hero-copy h2 {
  text-shadow: 0 0 24px rgba(255,255,255,.12);
}
.services-grid .card,
.pricing-grid .card {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.services-grid .card:hover,
.pricing-grid .card:hover {
  transform: translateY(-4px);
  border-color: rgba(53,211,255,.35);
  box-shadow: 0 30px 110px rgba(46,123,255,.18), 0 0 0 1px rgba(168,85,247,.14);
}
.service-card .price strong,
.plan-card .price strong {
  color: #9fd7ff;
}
.detail-main,
.detail-side,
.premium-form,
.contact-info {
  border-color: rgba(53,211,255,.20);
}

/* Admin completion polish */
.admin-head h1,
.section-head h1,
.section-head h2 {
  text-wrap: balance;
}
.module-purpose {
  min-height: 230px;
}
.settings-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.settings-chip-grid span {
  display: inline-flex;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #dce7ff;
  font-weight: 800;
}
#contactResult,
#smtpResult,
#ticketResult {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(53,211,255,.08);
  border: 1px solid rgba(53,211,255,.18);
  color: #c9f2ff;
  min-height: 20px;
}
.table-wrap {
  scrollbar-color: #35d3ff rgba(5,7,19,.86);
}


/* V0.2.6 — Public layout + Admin route repair */

/* Make public hero use the full width; avoid cramped-left/empty-right feeling */
.hero-premium {
  max-width: 100%;
  width: 100%;
  min-height: 780px;
  padding: 92px clamp(28px, 7vw, 132px) 42px;
  grid-template-columns: minmax(560px, 820px) 1fr;
}
.hero-copy {
  max-width: 850px;
}
.hero-copy h1 {
  font-size: clamp(62px, 8vw, 138px);
  max-width: 980px;
}
.hero-copy p {
  max-width: 720px;
}
.server-scene {
  right: 0;
  width: 66%;
  opacity: .98;
}
.server-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,7,19,.88) 0%, rgba(5,7,19,.56) 27%, rgba(5,7,19,.10) 58%, rgba(5,7,19,.18) 100%),
    radial-gradient(circle at 72% 44%, rgba(53,211,255,.18), transparent 34%),
    radial-gradient(circle at 52% 45%, rgba(255,79,216,.10), transparent 26%);
}
.public-nav {
  max-width: min(1720px, calc(100% - 72px));
}
.page {
  max-width: 1720px;
}
.services-grid,
.pricing-grid {
  align-items: stretch;
}
.service-card,
.register-card,
.plan-card {
  min-height: 315px;
}

/* Dashboard modules become real shortcuts, not purpose explanation spam */
.admin-section-title {
  margin: 30px 0 18px;
}
.admin-section-title h2 {
  font-size: 30px;
  margin: 0 0 6px;
  letter-spacing: -.04em;
}
.admin-section-title p {
  color: var(--muted);
  margin: 0;
}
.module-shortcut {
  min-height: 230px;
  display: flex;
  flex-direction: column;
}
.module-shortcut-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.module-shortcut-top span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  font-size: 25px;
}
.module-shortcut-top b {
  font-size: 26px;
  color: #9fd7ff;
}
.module-shortcut .btn {
  margin-top: auto;
}

/* Admin page readability */
.admin-main {
  background:
    radial-gradient(circle at 80% 10%, rgba(46,123,255,.12), transparent 25%),
    radial-gradient(circle at 20% 25%, rgba(255,79,216,.08), transparent 25%);
}
.admin-head p {
  max-width: 920px;
}
.card h3 {
  color: #f5f8ff;
}

/* Fix narrow table/cards feeling */
.admin-page {
  max-width: 1720px;
}
@media(max-width:1200px){
  .hero-premium {
    grid-template-columns: 1fr;
    padding: 70px 24px 32px;
  }
  .server-scene {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .42;
  }
  .public-nav {
    max-width: 100%;
    margin-top: 0;
    border-radius: 0;
  }
}


/* V0.2.7 — Mockup Visual Match + SMTP Fix + Clickable Roles */
.public-nav{max-width:min(1660px,calc(100% - 110px));min-height:78px;border-radius:22px;padding:14px 26px;background:rgba(4,7,18,.78);border-color:rgba(160,180,255,.18);box-shadow:0 24px 80px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.035)}
.brand{font-size:31px}.public-nav nav{max-width:720px;gap:22px}.public-nav nav a{padding:12px 0;border-radius:0;background:transparent!important}.public-nav nav a.active{color:#f4d8ff;box-shadow:inset 0 -2px 0 #a855f7}.public-nav .nav-actions .lang{display:none}.public-nav .nav-actions .btn{min-width:110px;border-radius:8px;padding:13px 20px}
.hero-premium.hero-mockup-match{max-width:min(1660px,calc(100% - 110px));min-height:505px;margin:0 auto;padding:62px 42px 10px;grid-template-columns:minmax(680px,860px) 1fr;border-radius:0 0 16px 16px;overflow:visible}.hero-mockup-match .hero-copy h1{font-size:clamp(70px,8.2vw,132px);letter-spacing:-.078em;line-height:.82;text-shadow:0 0 22px rgba(255,79,216,.35),0 0 36px rgba(53,211,255,.28)}.hero-mockup-match .hero-copy h2{font-size:clamp(32px,3.7vw,48px);margin-top:18px}.hero-mockup-match .hero-copy p{max-width:650px;font-size:17px;line-height:1.45}.hero-mockup-match .server-scene.mockup-bg{position:absolute;top:0;right:0;bottom:-20px;width:64%;height:auto;opacity:.98;background-image:linear-gradient(90deg,rgba(5,7,19,.98) 0%,rgba(5,7,19,.78) 20%,rgba(5,7,19,.18) 55%,rgba(5,7,19,.08) 100%),url('/assets/img/hero-server-room-person.jpg');background-size:cover;background-position:center right;border-left:none;filter:saturate(1.08) contrast(1.05)}.hero-mockup-match .trust-strip{max-width:870px;margin-top:26px;grid-template-columns:repeat(4,1fr);border-radius:17px;background:rgba(5,8,20,.62)}
.home-services-overlap{margin-top:-10px;padding-top:0;max-width:min(1660px,calc(100% - 110px))}.mockup-services{display:grid;grid-template-columns:1fr 1fr 1fr 1.45fr;gap:16px;align-items:stretch}.mockup-services .card{min-height:255px;padding:22px;border-radius:16px}.mockup-services .service-icon{width:48px;height:48px;border-radius:14px;font-size:24px}.mockup-services .card h3{font-size:22px}.mockup-services .card p{font-size:14px;line-height:1.45}.mockup-services .price strong{font-size:30px}.mockup-services .card-actions{grid-template-columns:1fr 1fr;display:grid}.mockup-register{border-color:rgba(168,85,247,.72);box-shadow:0 0 0 1px rgba(46,123,255,.34),0 24px 90px rgba(168,85,247,.24)}.why-title{margin-top:36px!important}.why-title h2{font-size:26px}.why-title span{color:#a855f7}.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.why-card{min-height:126px;border-radius:14px;padding:18px}.why-card h3{font-size:18px}.why-card p{font-size:13px;line-height:1.4}.why-icon{font-size:32px;color:#b8d7ff;margin-bottom:8px}
.clickable-role{padding:0}.role-card-button{width:100%;height:100%;padding:22px;text-align:left;background:transparent;color:inherit;border:0;cursor:pointer}.clickable-role.selected{border-color:rgba(53,211,255,.55);box-shadow:0 0 0 1px rgba(53,211,255,.22),0 24px 90px rgba(53,211,255,.12)}.role-editor-live{margin-bottom:16px;border-color:rgba(168,85,247,.38)}.role-editor-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.editor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.editor-grid h4{margin:0 0 10px;color:#f3f7ff}.switch-row{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.045);margin-bottom:8px;color:#dce7ff;font-weight:800}.switch-row input{width:18px;height:18px;accent-color:#a855f7}
@media(max-width:1200px){.public-nav,.hero-premium.hero-mockup-match,.home-services-overlap{max-width:100%}.hero-premium.hero-mockup-match{grid-template-columns:1fr;padding:52px 22px 20px}.hero-mockup-match .server-scene.mockup-bg{width:100%;opacity:.34}.mockup-services{grid-template-columns:repeat(2,1fr)}.why-grid{grid-template-columns:repeat(2,1fr)}.editor-grid{grid-template-columns:1fr}}@media(max-width:760px){.mockup-services,.why-grid{grid-template-columns:1fr}.hero-mockup-match .trust-strip{grid-template-columns:1fr}}


/* V0.2.8 — Admin Sidebar Layout Fix + Role Editor UX */

/* Professional app shell: sidebar scrolls independently, main content scrolls independently */
.admin-body {
  overflow: hidden;
}
.admin-shell {
  height: 100vh;
  overflow: hidden;
  grid-template-columns: 292px minmax(0, 1fr);
}
.admin-sidebar {
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 22px 18px;
}
.admin-brand {
  flex-shrink: 0;
  margin-bottom: 18px;
}
.admin-sidebar nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px 6px 10px 0;
  align-content: start;
}
.admin-sidebar nav a {
  min-height: 46px;
  padding: 12px 13px;
  display: flex;
  align-items: center;
  line-height: 1.2;
  white-space: normal;
  flex-shrink: 0;
  border-radius: 13px;
}
.side-status,
.back-public {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex-shrink: 0;
}
.side-status {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}
.back-public {
  margin-top: 10px;
}
.admin-main {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-top {
  flex-shrink: 0;
}
#app {
  min-height: 0;
}
.admin-main > #app {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.admin-page {
  padding-bottom: 52px;
}

/* Better sidebar spacing near Game Protection / Settings */
.admin-sidebar nav a[data-page="security"],
.admin-sidebar nav a[data-page="settings"],
.admin-sidebar nav a[data-page="audit"],
.admin-sidebar nav a[data-page="owner"] {
  margin-top: 2px;
}

/* Role editor: role list left, editor right */
.role-page-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.role-list-panel {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 124px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.role-list-panel p {
  margin-top: 0;
}
.role-list {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role-list-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  color: var(--text);
  border-radius: 14px;
  padding: 13px 14px;
  cursor: pointer;
  display: grid;
  gap: 5px;
}
.role-list-item:hover,
.role-list-item.selected {
  border-color: rgba(53,211,255,.48);
  background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(46,123,255,.14));
  box-shadow: 0 0 0 1px rgba(53,211,255,.16);
}
.role-list-item strong {
  font-size: 16px;
}
.role-list-item small {
  color: var(--muted);
}
.role-list-item .pill {
  width: fit-content;
  font-size: 11px;
  padding: 5px 8px;
}

/* Tabs instead of cramming all role controls together */
.role-editor-tabs {
  overflow: visible;
}
.role-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.role-tabs button {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  color: #dce7ff;
  border-radius: 999px;
  padding: 10px 13px;
  font-weight: 900;
  cursor: pointer;
}
.role-tabs button.active {
  color: #fff;
  border-color: rgba(168,85,247,.55);
  background: linear-gradient(135deg, rgba(255,79,216,.22), rgba(46,123,255,.18));
  box-shadow: 0 0 20px rgba(168,85,247,.16);
}
.role-tab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}
.role-tab-content {
  min-height: 230px;
}
.override-panel p {
  max-width: 820px;
}

/* Reduce table crowding inside role page */
.role-page-layout .table-wrap {
  max-height: 430px;
}

/* Responsive admin layout */
@media(max-width: 1100px) {
  .admin-body {
    overflow: auto;
  }
  .admin-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    height: auto;
    position: relative;
    overflow: visible;
  }
  .admin-sidebar nav {
    max-height: 360px;
  }
  .admin-main {
    height: auto;
    overflow: visible;
  }
  .admin-main > #app {
    overflow: visible;
  }
  .role-page-layout {
    grid-template-columns: 1fr;
  }
  .role-list-panel {
    position: static;
    max-height: none;
  }
  .role-tab-grid {
    grid-template-columns: 1fr;
  }
}


/* V0.2.8.1 — SMTP Error UX Fix */
.status-box,
#smtpResult.status-box {
  display: block;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: #dce7ff;
  line-height: 1.45;
}
.status-box.ok {
  border-color: rgba(55,240,161,.38);
  background: rgba(55,240,161,.09);
  color: #bfffe5;
}
.status-box.bad {
  border-color: rgba(255,82,119,.40);
  background: rgba(255,82,119,.09);
  color: #ffd2db;
}
.status-box.neutral {
  border-color: rgba(53,211,255,.32);
  background: rgba(53,211,255,.08);
  color: #c8f4ff;
}
.smtp-help {
  margin-top: 14px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255,209,102,.26);
  background: rgba(255,209,102,.075);
  color: #ffe8aa;
}
.smtp-help p {
  margin: 6px 0 0;
  color: #ffe8aa;
  line-height: 1.5;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 9px;
  font-weight: 950;
  font-size: 12px;
  border: 1px solid var(--line);
}
.status-badge.ok {
  color: #bfffe5;
  background: rgba(55,240,161,.09);
  border-color: rgba(55,240,161,.30);
}
.status-badge.bad {
  color: #ffd2db;
  background: rgba(255,82,119,.10);
  border-color: rgba(255,82,119,.32);
}
.status-badge.warn {
  color: #ffe8aa;
  background: rgba(255,209,102,.10);
  border-color: rgba(255,209,102,.32);
}
.status-badge.neutral {
  color: #c8f4ff;
  background: rgba(53,211,255,.08);
  border-color: rgba(53,211,255,.28);
}
.email-error-cell {
  max-width: 420px;
  white-space: normal;
  line-height: 1.45;
  color: #ffd2db;
}


/* V0.2.8.2 — SMTP Log Scroll + Cache Fix */
.settings-grid-fixed {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr);
  gap: 18px;
  align-items: start;
}
.smtp-settings-card {
  max-width: 100%;
}
.smtp-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.email-logs-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  max-height: calc(100vh - 170px);
  overflow: hidden;
}
.email-log-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.email-log-head h3 {
  margin-bottom: 4px;
}
.email-log-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.email-log-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: 16px;
}
.email-log-table {
  min-width: 760px;
}
.email-log-table th,
.email-log-table td {
  vertical-align: top;
}
.email-error-cell {
  max-width: 340px;
  min-width: 280px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.email-log-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,.025);
}
.status-box:empty {
  display: none;
}
@media(max-width:1200px){
  .settings-grid-fixed {
    grid-template-columns: 1fr;
  }
  .email-logs-card {
    max-height: 560px;
  }
}


/* V0.2.8.3 — Gmail App Password Normalizer */
.smtp-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.smtp-title-row h3 {
  margin: 0;
}
.password-hint {
  display: block;
  color: #ffe8aa;
  margin-top: 7px;
  font-weight: 800;
  line-height: 1.35;
}
@media(max-width: 760px) {
  .smtp-title-row {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* V0.2.8.4 — SMTP Password Mask Fix */
.smtp-settings-card input::placeholder {
  color: rgba(220,231,255,.55);
}
.password-hint {
  min-height: 18px;
}


/* V0.2.8.5 — SMTP Saved Config Diagnostic */
.smtp-config-status {
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(53,211,255,.24);
  background: rgba(53,211,255,.055);
  padding: 14px;
}
.smtp-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.smtp-status-grid {
  display: grid;
  grid-template-columns: minmax(140px,.8fr) minmax(0,1.2fr);
  gap: 8px 12px;
}
.smtp-status-grid span {
  color: var(--muted);
  font-weight: 800;
}
.smtp-status-grid b {
  color: #dff7ff;
  overflow-wrap: anywhere;
}


/* V0.2.9 — Admin Roles, Users, Auth & Permissions Control Center */
.lang-select{border:1px solid var(--line);background:rgba(255,255,255,.06);color:white;border-radius:999px;padding:9px 12px;font-weight:900}.lang-select option{background:#081022;color:#fff}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.role-meta-grid{display:grid;grid-template-columns:1.1fr .5fr .5fr 1.4fr;gap:10px;margin:14px 0}.role-meta-grid label,.form label{display:grid;gap:6px;color:#dce7ff;font-weight:850}.role-meta-grid input,.role-meta-grid select,.form input,.form select,.form textarea,.smtp-settings-card input,.smtp-settings-card select{border:1px solid var(--line);background:rgba(255,255,255,.055);color:#fff;border-radius:12px;padding:11px 12px}.form textarea{min-height:90px}.permission-matrix{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:12px}.perm-module{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(255,255,255,.035)}.perm-module h4{margin:0 0 9px}.perm-module label{display:inline-flex;align-items:center;gap:6px;margin:4px 8px 4px 0;color:#dce7ff}.role-save-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.danger-zone{border:1px solid rgba(255,82,119,.34);background:rgba(255,82,119,.07);border-radius:18px;padding:16px;margin-top:16px}.danger-zone h3{margin-top:0;color:#ffc1cc}.danger-note{border-color:rgba(255,82,119,.34)!important;background:rgba(255,82,119,.08)!important;color:#ffd5dd!important}.conflict-box{display:grid;gap:12px}.sim-box{margin-top:12px;padding:13px;border:1px solid rgba(53,211,255,.28);background:rgba(53,211,255,.06);border-radius:16px}.sim-list{display:grid;gap:6px;max-height:240px;overflow:auto}.sim-list span{display:block;border:1px solid var(--line);border-radius:10px;padding:8px;background:rgba(255,255,255,.035)}.sim-list small{color:var(--muted);margin-left:8px}.oauth-card form{display:grid;gap:10px}.oauth-head{display:flex;justify-content:space-between;align-items:center}.status-badge.ok{color:#bfffe5;background:rgba(55,240,161,.09);border-color:rgba(55,240,161,.30)}.status-badge.bad{color:#ffd2db;background:rgba(255,82,119,.10);border-color:rgba(255,82,119,.32)}.status-badge.neutral{color:#c8f4ff;background:rgba(53,211,255,.08);border-color:rgba(53,211,255,.28)}
@media(max-width:1100px){.role-meta-grid,.permission-matrix,.form-row{grid-template-columns:1fr}}


/* V0.2.10 — Login gate + Windows public deploy */
.login-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(168,85,247,.22), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(53,211,255,.18), transparent 28%),
    linear-gradient(135deg, #060912, #0d1020 45%, #080914);
  color: var(--text);
}
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}
.login-card {
  width: min(520px, 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: rgba(12,16,34,.78);
  box-shadow: 0 30px 110px rgba(0,0,0,.48), 0 0 80px rgba(111,76,255,.18);
  backdrop-filter: blur(18px);
  padding: 34px;
}
.login-card .brand {
  display: inline-flex;
  margin-bottom: 22px;
}
.login-card h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 42px);
}
.login-card p {
  color: var(--muted);
  line-height: 1.55;
}
.login-meta {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}
.owner-chip {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 900;
}
.owner-chip:hover {
  border-color: rgba(53,211,255,.42);
  color: #fff;
}
.deploy-note {
  border: 1px solid rgba(53,211,255,.22);
  border-radius: 18px;
  background: rgba(53,211,255,.06);
  padding: 16px;
  color: #dff7ff;
}


/* V0.2.11 — Clean public visual polish + service configurator */
.hero-premium.hero-mockup-match {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 32px 110px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.025);
}
.hero-mockup-match .server-scene.mockup-bg {
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: 54%;
  border-radius: 28px;
  overflow: hidden;
  background-image:
    linear-gradient(90deg, rgba(5,7,19,.72) 0%, rgba(5,7,19,.42) 23%, rgba(5,7,19,.10) 58%, rgba(5,7,19,.04) 100%),
    radial-gradient(circle at 62% 42%, rgba(53,211,255,.14), transparent 30%),
    url('/assets/img/hero-server-room-person.jpg');
  background-size: cover;
  background-position: center right;
  filter: saturate(1.14) contrast(1.06) brightness(1.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 30px 90px rgba(53,211,255,.12);
}
.hero-mockup-match .server-scene.mockup-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 28%, rgba(0,0,0,.16));
}
.configurator-box {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(53,211,255,.22);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(53,211,255,.075), rgba(168,85,247,.075));
}
.configurator-head h3 { margin: 0 0 6px; font-size: 19px; }
.configurator-head p { margin: 0; color: var(--muted); line-height: 1.45; }
.service-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.service-config.is-hidden { display: none; }
.form .configurator-box label { margin: 0; }
@media(max-width:760px){
  .service-config { grid-template-columns: 1fr; }
  .hero-mockup-match .server-scene.mockup-bg {
    top: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; opacity: .42;
  }
}


/* V0.2.12 — premium order wizard + language flags + hero composition */
.public-nav .nav-actions .flag-lang{display:inline-flex;gap:7px;align-items:center;padding:9px 13px;font-size:14px}
.hero-mockup-match .server-scene.mockup-bg{background-position:72% center!important;filter:saturate(1.18) contrast(1.05) brightness(1.13)!important;}
.hero-mockup-match .server-scene.mockup-bg::after{background:linear-gradient(90deg,rgba(5,7,19,.56),rgba(5,7,19,.18) 42%,rgba(0,0,0,.06))!important;}
.order-page .section-head{max-width:920px}.order-wizard{max-width:1060px;margin:0 auto;padding:24px}.wizard-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}.wizard-steps button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#dce7ff;border-radius:16px;padding:12px;font-weight:900;cursor:pointer}.wizard-steps button span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;margin-right:7px;background:rgba(53,211,255,.12)}.wizard-steps button.active{border-color:rgba(53,211,255,.55);box-shadow:0 0 28px rgba(53,211,255,.14);background:rgba(53,211,255,.08)}.wizard-steps button.done{border-color:rgba(55,240,161,.35)}.wizard-panel{display:none}.wizard-panel.active{display:grid;gap:16px}.wizard-panel h2{margin:0;font-size:28px}.wizard-panel p{color:var(--muted);margin:0 0 4px}.wizard-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.wizard-service-card{text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:20px;padding:18px;color:#fff;display:grid;gap:10px;cursor:pointer;min-height:165px}.wizard-service-card:hover,.wizard-service-card.active{border-color:rgba(53,211,255,.55);box-shadow:0 18px 55px rgba(53,211,255,.12);transform:translateY(-1px)}.wizard-service-card small{color:var(--muted);line-height:1.45}.service-config.visible{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.empty-config,.review-card{border:1px dashed rgba(53,211,255,.28);border-radius:18px;padding:18px;background:rgba(53,211,255,.055);color:#dff7ff}.wizard-actions{display:flex;gap:10px;flex-wrap:wrap}.confirmation-block{max-width:900px;margin:0 auto;border:1px solid rgba(55,240,161,.32);background:linear-gradient(135deg,rgba(55,240,161,.10),rgba(53,211,255,.08));border-radius:28px;padding:32px;text-align:center;box-shadow:0 24px 90px rgba(0,0,0,.35)}.confirmation-icon{font-size:52px}.confirm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.confirm-grid span{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:18px;padding:16px;display:grid;gap:8px;color:var(--muted)}.confirm-grid b{color:#fff}.confirm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.config-cell{line-height:1.55;min-width:220px}.table-wrap td small{display:block;color:var(--muted);margin-top:4px}@media(max-width:980px){.wizard-service-grid{grid-template-columns:repeat(2,1fr)}.service-config.visible{grid-template-columns:1fr}.confirm-grid{grid-template-columns:1fr}.wizard-steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.wizard-service-grid{grid-template-columns:1fr}.wizard-steps{grid-template-columns:1fr}.public-nav .nav-actions .flag-lang{font-size:0}.public-nav .nav-actions .flag-lang::first-letter{font-size:16px}}