:root {
  --bg: #0f1117;
  --bg-soft: #181c24;
  --panel: rgba(255,255,255,0.05);
  --panel-strong: #171b23;
  --border: rgba(255,255,255,0.08);
  --text: #f4f6fb;
  --muted: #aab2c5;
  --red: #e11d48;
  --red-dark: #9f1239;
  --green: #2ecc71;
  --yellow: #f5a524;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: radial-gradient(circle at top right, rgba(225,29,72,0.18), transparent 35%), var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
}
a { text-decoration: none; }
.app-shell {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 22px;
  padding: 18px;
}
.sidebar, .glass-panel, .product-panel {
  background: linear-gradient(180deg, rgba(24,28,36,0.96), rgba(18,21,28,0.96));
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.24);
}
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}
.sticky-sidebar {
  position: sticky;
  top: 18px;
  height: calc(100vh - 36px);
  overflow: auto;
}
.main-content { padding: 6px 8px 24px 0; }
.brand-mark { display:flex; align-items:center; min-height:56px; }
.brand-logo { display:block; width:220px; max-width:100%; height:auto; }
.brand-title { font-size: 1.15rem; font-weight: 800; }
.brand-subtitle { color: var(--muted); font-size: 0.86rem; }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 12px;
  color: var(--text);
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 600;
}
.sidebar-nav .nav-link i { font-size: 1.1rem; opacity: 0.95; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active {
  background: linear-gradient(135deg, rgba(225,29,72,0.95), rgba(159,18,57,0.95));
  box-shadow: 0 10px 30px rgba(225,29,72,0.25);
}
.sidebar-profile-mini {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 18px;
}
.sidebar-balance { color: var(--muted); font-size: 0.92rem; }
.sidebar-balance strong { color: var(--text); margin-left: 6px; }
.account-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.04); color: var(--text); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; font-weight: 700;
}
.account-toggle.slim { padding: 11px 14px; }
.account-arrow { opacity: 0.8; transition: transform 0.2s ease; }
.account-arrow.rotated { transform: rotate(180deg); }
.account-menu { background: #161922; border-radius: 16px; border: 1px solid var(--border); }
.content-head { padding: 12px 4px 0; }
.eyebrow { color: #ff8fa8; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 700; }
.page-title, h2, h3 { font-weight: 800; }
.page-title { font-size: 2rem; }
h2 { font-size: 1.65rem; }
.glass-panel { padding: 0; }
.metric-card { padding: 22px; border-radius: 22px; }
.metric-label, .detail-box span, .profile-label { color: var(--muted); font-size: 0.84rem; }
.metric-card strong { display: block; font-size: 1.85rem; margin-top: 10px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.service-item, .transaction-line, .profile-row, .detail-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.service-item, .transaction-line {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px;
}
.empty-state {
  padding: 26px; border-radius: 18px; border: 1px dashed rgba(255,255,255,0.14);
  color: var(--muted); background: rgba(255,255,255,0.02);
}
.status-pill {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 700; border: 1px solid transparent;
}
.status-pill.ok { background: rgba(46,204,113,0.16); color: #7ef2ab; border-color: rgba(46,204,113,0.28); }
.status-pill.warn { background: rgba(245,165,36,0.15); color: #ffd37d; border-color: rgba(245,165,36,0.28); }
.status-pill.muted { background: rgba(255,255,255,0.06); color: #d5d9e4; border-color: rgba(255,255,255,0.08); }
.btn { border-radius: 14px; font-weight: 700; padding: 12px 16px; }
.btn-danger {
  background: linear-gradient(135deg, var(--red), var(--red-dark)); border: none;
}
.btn-danger:hover { background: linear-gradient(135deg, #f32757, #aa143c); }
.btn-outline-light, .btn-outline-danger { border-width: 1px; }
.product-tabs .nav-link {
  border-radius: 14px; color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--border); margin-right: 10px;
}
.product-tabs .nav-link.active { background: linear-gradient(135deg, var(--red), var(--red-dark)); }
.product-panel { padding: 28px; border-radius: 22px; height: 100%; }
.product-placeholder { display: grid; place-items: start; min-height: 280px; }
.slot-preview, .server-card-grid, .service-detail-grid {
  display: grid; gap: 14px;
}
.slot-preview { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.server-card-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.service-detail-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.slot-preview-box, .detail-box {
  padding: 18px; border-radius: 18px; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
}
.slot-preview-box strong, .detail-box strong { display: block; margin-top: 8px; }
.slot-preview-box strong { font-size: 1.4rem; }
.slot-preview-box--accent { background: rgba(225,29,72,0.13); border-color: rgba(225,29,72,0.3); }
.service-card-large {
  padding: 24px; border-radius: 24px; background: rgba(255,255,255,0.035); border: 1px solid var(--border);
}
.service-card-top {
  display: flex; justify-content: space-between; align-items: start; gap: 14px;
}
.service-card-title { margin: 0; font-size: 1.35rem; }
.service-card-subtitle { color: var(--muted); }
.service-id-line { min-height: 24px; }
.service-card-actions { display: flex; justify-content: flex-end; }
.service-manage-shell {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr); gap: 28px; align-items: start;
}
.action-stack { display: grid; gap: 12px; }
.token-row code { color: #ffd1dc; }
.modal-dark { background: #161922; color: var(--text); border: 1px solid var(--border); border-radius: 22px; }
.form-control, .form-select {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text); border-radius: 14px; padding: 12px 14px;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.05); color: var(--text); box-shadow: 0 0 0 0.2rem rgba(225,29,72,0.18); border-color: rgba(225,29,72,0.45);
}
.form-range::-webkit-slider-thumb { background: var(--red); }
.form-range::-moz-range-thumb { background: var(--red); }
.table-dark.custom-table {
  --bs-table-bg: transparent; --bs-table-border-color: rgba(255,255,255,0.08); --bs-table-color: var(--text);
}
.pagination-dark .page-link {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: var(--text); border-radius: 12px; margin-left: 6px;
}
.pagination-dark .page-item.active .page-link { background: linear-gradient(135deg, var(--red), var(--red-dark)); border-color: transparent; }
.alert { border-radius: 16px; border: none; }
.auth-shell { position: relative; min-height: 100vh; display: grid; place-items: center; }
.auth-overlay { position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(225,29,72,0.22), transparent 40%); }
code { color: #ffd1dc; }
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sticky-sidebar { position: static; height: auto; }
  .main-content { padding-right: 0; }
  .service-manage-shell { grid-template-columns: 1fr; }
}

/* v5 design refresh */
.server-table-shell {
  display: grid;
  gap: 16px;
}
.server-table-head {
  grid-template-columns: 1.15fr 1fr 1.2fr .9fr .9fr .9fr .7fr .8fr;
  gap: 16px;
  padding: 0 18px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
}
.server-table-body {
  display: grid;
  gap: 14px;
}
.server-row-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border);
}
.server-row-main {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.2fr .9fr .9fr .9fr .7fr;
  gap: 16px;
  align-items: center;
}
.server-col {
  min-width: 0;
}
.server-col-label {
  display: none;
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 6px;
}
.server-name {
  font-size: 1.05rem;
  font-weight: 700;
}
.server-type-chip,
.support-id-chip,
.server-expire-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.support-id-chip {
  font-weight: 700;
}
.support-id-chip.large {
  min-height: 46px;
  padding: 0 16px;
}
.server-expire-pill {
  background: rgba(46,204,113,0.16);
  color: #7ef2ab;
  border-color: rgba(46,204,113,0.25);
}
.server-address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-price {
  font-weight: 700;
}
.server-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.service-tabs-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  padding: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(24,28,36,0.96), rgba(18,21,28,0.96));
  border: 1px solid var(--border);
}
.service-tab-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
}
.service-tab-link.active {
  color: var(--text);
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  box-shadow: 0 10px 30px rgba(225,29,72,0.25);
}
.service-tab-link:hover { color: var(--text); }

.service-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}
.overview-card,
.content-block {
  background: linear-gradient(180deg, rgba(24,28,36,0.96), rgba(18,21,28,0.96));
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.24);
}
.overview-card {
  padding: 28px;
}
.overview-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.overview-title {
  font-size: 1.55rem;
  line-height: 1.2;
}
.overview-info-list {
  display: grid;
  gap: 18px;
}
.overview-info-list.compact-gap {
  gap: 14px;
}
.overview-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.overview-info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.overview-info-row span:first-child {
  color: var(--muted);
}
.overview-info-row strong {
  text-align: right;
}
.btn-soft-danger {
  background: rgba(225,29,72,0.12);
  color: #ffd6df;
  border: 1px solid rgba(225,29,72,0.22);
}
.btn-soft-danger:hover {
  background: rgba(225,29,72,0.18);
  color: #fff;
}
.action-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.action-panel-grid form:first-child,
.action-panel-grid button:last-child,
.action-panel-grid form:has(button.w-100.btn-danger[disabled]),
.action-panel-grid form:has(button.w-100.btn-danger:not([disabled])) {
  grid-column: span 2;
}
.server-occupancy {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.server-occupancy-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.server-occupancy-top span { color: var(--muted); }
.occupancy-bar {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.occupancy-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), #ff6b8a);
}
.stack-row-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}

@media (max-width: 1399px) {
  .server-table-head,
  .server-row-main {
    grid-template-columns: 1.15fr 1fr 1.1fr .95fr .95fr .9fr .7fr;
  }
  .service-overview-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1199px) {
  .server-row-card {
    grid-template-columns: 1fr;
  }
  .server-row-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 991px) {
  .server-row-main {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .server-col-label {
    display: block;
  }
  .service-tabs-nav {
    grid-template-columns: repeat(2, minmax(0,1fr));
    border-radius: 28px;
  }
}
@media (max-width: 767px) {
  .server-row-main,
  .action-panel-grid,
  .service-tabs-nav {
    grid-template-columns: 1fr;
  }
  .overview-card-head,
  .overview-info-row,
  .stack-row-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .overview-info-row strong { text-align: left; }
  .action-panel-grid form,
  .action-panel-grid button,
  .action-panel-grid form:first-child,
  .action-panel-grid button:last-child {
    grid-column: auto;
  }
}


.service-manage-shell,.service-tab-card,.service-hero-card,.service-actions-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:28px}.service-hero-card,.service-actions-card,.service-tab-card{padding:28px}.service-page-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}.service-tab-pills .nav-link{border-radius:999px;padding:12px 18px;color:#fff;background:rgba(255,255,255,.04);border:1px solid var(--border)}.service-tab-pills .nav-link.active{background:linear-gradient(135deg,rgba(220,38,38,.92),rgba(127,29,29,.92));border-color:rgba(255,90,90,.35)}.server-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.server-info-item{padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--border)}.server-info-item span,.renew-summary-item span{display:block;font-size:.82rem;color:rgba(255,255,255,.58);margin-bottom:6px}.server-info-item strong,.renew-summary-item strong{font-size:1rem}.service-actions-card .action-stack{display:grid;gap:12px}.action-row-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pricing-hint{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--border)}.renew-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.renew-summary-item{padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--border)}.service-table-head.beautiful,.server-table-row.beautiful{display:grid;grid-template-columns:1.4fr .85fr 1.05fr .6fr .8fr 1fr .8fr;gap:16px;align-items:center}.service-table-head.beautiful{padding:0 18px;color:rgba(255,255,255,.56);font-size:.82rem;text-transform:uppercase}.server-table-row.beautiful{padding:18px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid var(--border)}.server-main-cell{display:flex;align-items:center;gap:14px}.server-icon-badge{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(220,38,38,.24),rgba(127,29,29,.16));border:1px solid rgba(255,90,90,.2);font-size:1.2rem}.small-cell{font-size:.95rem;color:#f5f5f5}.support-id-chip.large{padding:12px 16px}.support-id-chip{display:inline-flex;align-items:center;gap:8px}.occupancy-box{padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--border)}
@media (max-width: 991px){.service-page-topbar,.service-table-head.beautiful,.server-table-row.beautiful,.server-info-grid,.renew-summary-grid,.action-row-pair{grid-template-columns:1fr;display:grid}.server-table-head.beautiful{display:none}.server-table-row.beautiful{gap:10px}.server-info-grid,.renew-summary-grid{grid-template-columns:1fr}.service-page-topbar{display:flex;flex-direction:column;align-items:flex-start}}


/* v6.1 layout fixes */
.service-detail-page{display:block !important;}
.service-detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;}
.service-detail-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.service-tabs-nav{display:flex !important;flex-wrap:wrap;gap:12px;padding:10px 0;background:transparent;border:0;border-radius:0;}
.service-tabs-nav .nav-item{list-style:none;}
.service-tab-link{border:1px solid var(--border);background:rgba(255,255,255,0.04);color:var(--text);min-height:50px;padding:0 18px;border-radius:999px;}
.service-tab-link.active{background:linear-gradient(135deg,var(--red),var(--red-dark));border-color:transparent;}
.service-overview-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr);gap:24px;align-items:start;}
.service-tab-card{padding:28px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:26px;}
.server-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.server-info-item,.dashboard-service-card,.dashboard-hero{background:linear-gradient(180deg,rgba(24,28,36,0.96),rgba(18,21,28,0.96));border:1px solid var(--border);box-shadow:0 16px 40px rgba(0,0,0,.22);}
.occupancy-bar{height:10px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden;}
.occupancy-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#ff4d6d,#e11d48);}
.stack-row-card{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,0.04);border:1px solid var(--border);}
.server-table-head{display:grid;grid-template-columns:1.35fr .9fr 1.2fr .65fr .8fr 1fr .9fr;gap:18px;padding:0 18px;color:var(--muted);font-size:.84rem;text-transform:uppercase;font-weight:700;}
.server-row-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid var(--border);}
.server-row-main{display:grid;grid-template-columns:1.35fr .9fr 1.2fr .65fr .8fr 1fr;gap:18px;align-items:center;}
.server-col{min-width:0;}
.server-col-label{display:none;color:var(--muted);font-size:.78rem;margin-bottom:6px;}
.dashboard-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;border-radius:28px;}
.dashboard-hero-copy{max-width:760px;}
.dashboard-hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.metric-card-accent{background:linear-gradient(135deg,rgba(225,29,72,.18),rgba(127,29,29,.12));}
.dashboard-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.dashboard-service-card{padding:22px;border-radius:22px;}
.dashboard-service-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.dashboard-service-meta span{display:block;color:var(--muted);font-size:.82rem;margin-bottom:4px;}
.transaction-line-compact{padding:16px 18px;}
@media (max-width: 1100px){.service-overview-grid,.dashboard-service-grid{grid-template-columns:1fr;}.server-table-head{display:none;}.server-row-card,.server-row-main{grid-template-columns:1fr;}.server-col-label{display:block;}.server-row-actions{justify-content:flex-start;}.dashboard-hero{flex-direction:column;align-items:flex-start;}}
@media (max-width: 768px){.server-info-grid{grid-template-columns:1fr;}.action-row-pair{grid-template-columns:1fr;}.stack-row-card{flex-direction:column;align-items:flex-start;}.service-detail-controls{width:100%;justify-content:flex-start;}}


/* domain/ui fixes */
::placeholder { color: rgba(255,255,255,0.72) !important; opacity: 1; }
.form-select option, .dropdown-menu, .dropdown-item { color: #f5f7fb; }
.form-select option { background: #171b23; }
.form-select, .dropdown-menu-dark, .dropdown-menu { background: #171b23; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(225,29,72,0.16); color: #fff; }
.domain-detail-header { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
.domain-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.domain-header-actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.domain-top-tabs { width: 100%; display: flex; flex-wrap: wrap; gap: 12px; }
.domain-top-tabs .nav-link { border-radius: 999px; }
.domain-table-head { display: grid !important; grid-template-columns: 1.4fr .9fr 1.15fr .8fr .7fr !important; }
.domain-row-main { display: grid !important; grid-template-columns: 1.4fr .9fr 1.15fr .8fr !important; }
.domain-row-card { grid-template-columns: minmax(0,1fr) auto !important; }
.dns-simple-table { border:1px solid rgba(255,255,255,.12); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.03); }
.dns-simple-head, .dns-simple-row { display:grid; grid-template-columns: 1.2fr .8fr 1.2fr 120px; gap:0; align-items:center; }
.dns-simple-head { background:rgba(255,255,255,.06); color:var(--text); font-weight:800; }
.dns-simple-head > div, .dns-cell { padding:18px 16px; border-right:1px solid rgba(255,255,255,.1); }
.dns-simple-head > div:last-child, .dns-cell:last-child { border-right:0; }
.dns-simple-body { display:grid; gap:10px; padding:10px; }
.dns-simple-row { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09); border-radius:14px; }
.dns-existing-row { min-height:64px; }
.dns-cell-text { color:var(--text); font-weight:500; }
.dns-cell-actions { display:flex; justify-content:center; align-items:center; }
.dns-delete-btn { border:0; background:transparent; color:#77d66a; padding:8px; box-shadow:none; }
.dns-delete-btn:hover { color:#9df08f; background:transparent; }
.dns-add-row { background:rgba(255,255,255,.05); }
.dns-inline-input, .dns-inline-select { min-height:46px; border-radius:10px; }
.dns-add-btn { min-height:46px; width:100%; border-radius:10px; background:#64c95e; border-color:#64c95e; color:#fff; font-weight:800; }
.dns-add-btn:hover { background:#73d86d; border-color:#73d86d; color:#fff; }
@media (max-width: 992px) {
  .domain-title-row { flex-direction:column; align-items:flex-start; }
  .domain-header-actions { margin-left:0; }
  .domain-table-head { display: none !important; }
  .domain-row-main, .domain-row-card { grid-template-columns: 1fr !important; }
  .dns-simple-head { display:none; }
  .dns-simple-row { grid-template-columns: 1fr !important; }
  .dns-cell-actions { justify-content:stretch; }
}

.form-select, .form-control { color: var(--text); }
.form-select option { color: #f8fafc; background: #171b23; }


/* NG-Host logo */
.brand-mark {
  min-height: auto;
  padding: 4px 0 10px;
}
.brand-logo {
  width: 250px;
  max-width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(255,255,255,0.08));
}

/* Better placeholders + selects */
.form-control::placeholder,
.dns-input-clean::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(244,246,251,0.62) !important;
}
.form-select,
.form-control {
  color: var(--text) !important;
}
.form-select option {
  background: #171b23 !important;
  color: #f4f6fb !important;
}

/* DNS UI redesign */
.dns-panel-clean {
  padding: 30px;
}
.dns-list {
  display: grid;
  gap: 12px;
}
.dns-list-head,
.dns-list-row {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) 180px minmax(0,1.4fr) 120px;
  align-items: center;
  gap: 16px;
}
.dns-list-head {
  padding: 0 14px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 700;
}
.dns-list-body {
  display: grid;
  gap: 12px;
}
.dns-list-row {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.dns-list-row--create {
  background: rgba(255,255,255,0.02);
}
.dns-list-col {
  min-width: 0;
}
.dns-value {
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.dns-value--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .96rem;
}
.dns-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(225,29,72,0.12);
  border: 1px solid rgba(225,29,72,0.28);
  color: #ffd4de;
  font-weight: 800;
}
.dns-list-col--action {
  display: flex;
  justify-content: center;
}
.dns-action-btn {
  min-height: 46px;
  min-width: 46px;
  border-radius: 14px;
  font-weight: 800;
}
.dns-action-btn--delete {
  background: rgba(225,29,72,0.12);
  border: 1px solid rgba(225,29,72,0.28);
  color: #ff96ab;
}
.dns-action-btn--delete:hover {
  background: rgba(225,29,72,0.2);
  color: #fff;
}
.dns-action-btn--add {
  min-width: 120px;
}
.dns-input-clean {
  min-height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
}
.dns-input-clean:focus {
  background: rgba(255,255,255,0.06) !important;
}
@media (max-width: 992px) {
  .dns-list-head {
    display: none;
  }
  .dns-list-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dns-list-col--action {
    justify-content: stretch;
  }
  .dns-action-btn--add,
  .dns-action-btn {
    width: 100%;
  }
}


.kvm-package-card .kvm-package-price {
  font-size: 2rem;
  font-weight: 800;
  margin-top: 8px;
}
.kvm-package-card .kvm-package-price span {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}
.kvm-order-head,
.service-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.kvm-install-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.dashboard-box {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 20px;
}
.dashboard-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 992px) {
  .kvm-order-head,
  .service-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .kvm-install-grid,
  .dashboard-grid-2 {
    grid-template-columns: 1fr;
  }
}

.kvm-overview-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.85fr);gap:24px}.kvm-hero-card{padding:30px}.kvm-hero-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.kvm-server-badge{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:rgba(225,29,72,.14);border:1px solid rgba(225,29,72,.28);font-size:1.4rem}.sticky-actions-panel{position:sticky;top:20px}.debug-box{margin:0;white-space:pre-wrap;word-break:break-word;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;color:var(--text);max-height:420px;overflow:auto}.service-title-row--kvm{align-items:center}@media (max-width:1100px){.kvm-overview-grid{grid-template-columns:1fr}.sticky-actions-panel{position:static}}


.subtle-alert {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px;
}


/* Toast notifications */
.toast-stack {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 2000;
  display: grid;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
}
.ng-toast {
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
  animation: toastIn .25s ease;
}
.ng-toast--success { background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(22,163,74,.95)); color:#fff; }
.ng-toast--error { background: linear-gradient(135deg, rgba(225,29,72,.95), rgba(159,18,57,.95)); color:#fff; }
.ng-toast--info { background: linear-gradient(135deg, rgba(23,27,34,.96), rgba(18,21,28,.96)); color:#fff; }
.ng-toast__icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.14); font-size:1.1rem; }
.ng-toast__content { display:grid; gap:4px; }
.ng-toast__content strong { font-size:1.1rem; }
.ng-toast__content span { line-height:1.45; opacity:.95; }
.ng-toast__close { border:0; background:transparent; color:inherit; opacity:.9; padding:2px; }
.ng-toast.hide { opacity:0; transform:translateY(-8px); transition:.2s ease; }
@keyframes toastIn { from { opacity:0; transform:translateY(-10px) scale(.98);} to { opacity:1; transform:translateY(0) scale(1);} }

/* KVM premium layout */
.kvm-summary-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:24px;
}
.kvm-info-card {
  padding:28px;
  border-radius:26px;
  background: linear-gradient(180deg, rgba(24,28,36,0.96), rgba(18,21,28,0.96));
  border:1px solid var(--border);
}
.kvm-info-list { display:grid; gap:16px; }
.kvm-info-row {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.08);
}
.kvm-info-row:last-child { border-bottom:0; padding-bottom:0; }
.kvm-info-row span { color:var(--muted); }
.kvm-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
.kvm-chart-card { padding:24px; border-radius:24px; background:rgba(255,255,255,.04); border:1px solid var(--border); min-height:300px; }
.kvm-chart {
  margin-top:18px; height:220px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  position:relative; overflow:hidden;
}
.kvm-chart::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, transparent 24%, rgba(255,255,255,.06) 25%, transparent 26%, transparent 49%, rgba(255,255,255,.06) 50%, transparent 51%, transparent 74%, rgba(255,255,255,.06) 75%, transparent 76%),
    linear-gradient(90deg, rgba(0,0,0,0), rgba(46,204,113,.22));
}
.kvm-chart-line {
  position:absolute; left:5%; right:4%; bottom:16%;
  height:52%;
  background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(46,204,113,.12));
  clip-path: polygon(0% 72%, 6% 64%, 12% 78%, 18% 35%, 24% 80%, 30% 58%, 36% 62%, 42% 28%, 48% 70%, 54% 46%, 60% 74%, 66% 24%, 72% 59%, 78% 49%, 84% 66%, 90% 40%, 96% 68%, 100% 66%, 100% 100%, 0 100%);
  border-bottom:2px solid rgba(52,211,153,.85);
}
.kvm-chart-line.ram {
  clip-path: polygon(0% 18%, 8% 18%, 16% 19%, 24% 32%, 32% 34%, 40% 26%, 48% 24%, 56% 25%, 64% 23%, 72% 27%, 80% 20%, 88% 22%, 96% 21%, 100% 22%, 100% 100%, 0 100%);
  border-bottom:2px solid rgba(52,211,153,.85);
}
.kvm-chart-axis { position:absolute; left:24px; bottom:14px; right:18px; display:flex; justify-content:space-between; color:var(--muted); font-size:.82rem; }
.kvm-disabled-note { margin-top:14px; padding:14px 16px; border-radius:16px; background:rgba(245,165,36,.12); border:1px solid rgba(245,165,36,.2); color:#ffd37d; }
.password-helper-row { display:flex; gap:10px; align-items:center; }
.password-helper-row .btn { white-space:nowrap; }
.debug-box { white-space:pre-wrap; word-break:break-word; padding:18px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--border); max-height:360px; overflow:auto; }
@media (max-width:1100px){
  .kvm-summary-grid, .kvm-stat-grid { grid-template-columns:1fr; }
}

.site-footer{margin-top:80px;padding:24px 0 10px;border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:center;gap:10px;color:var(--muted)}
.site-footer a{color:var(--muted)}
.wallet-manual-topup-note{padding:18px 20px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px solid var(--border);margin-bottom:18px}
.slot-marks{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.78rem;margin-top:8px}
.server-row-main-clean{grid-template-columns:1.2fr 1.1fr 1fr .9fr .9fr !important}
@media (max-width:900px){.site-footer{flex-wrap:wrap}}


body { font-size: 15px; }
.app-shell { gap: 16px; padding: 14px; }
.sidebar, .glass-panel, .product-panel { border-radius: 20px; box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
.sidebar { padding: 18px; }
.sticky-sidebar { top: 14px; height: calc(100vh - 28px); }
.main-content { padding: 4px 4px 0 0; display: flex; }
.main-content-inner { display: flex; flex-direction: column; min-height: calc(100vh - 28px); width: 100%; }
.content-head { padding: 6px 2px 0; }
.page-title { font-size: 1.65rem; }
.product-panel { padding: 22px; border-radius: 18px; }
.glass-panel.p-4, .glass-panel.p-lg-5 { padding: 22px !important; }
.btn { padding: 10px 14px; border-radius: 12px; }
.form-control, .form-select { padding: 10px 12px; min-height: 44px; }
.site-footer {
  margin-top: auto;
  padding: 14px 4px 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: .92rem;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

.product-panel--compact { max-width: 980px; }
.slider-marks {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,0.12fr));
  gap: 4px;
  color: #dbe2f0;
  font-size: .82rem;
}
.slider-marks span {white-space: nowrap; }
.order-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e8edf7;
  font-size: .95rem;
}
.order-consent a { color: #ff9ab1; }
.server-table-head--clean,
.server-row-main-clean {
  grid-template-columns: minmax(0,1.2fr) 170px minmax(0,1fr) 150px 170px;
}
.server-row-card--clean {
  padding: 16px 18px;
}
.server-main-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.server-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(225,29,72,.12);
  border: 1px solid rgba(225,29,72,.24);
  color: #ffd1dc;
  font-size: 1.15rem;
}
.server-address, .server-name { line-height: 1.3; }
.wallet-disabled-box {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}
.wallet-manual-topup-note {
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
}
.form-check-input { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }

@media (max-width: 1100px) {
  .main-content-inner { min-height: auto; }
}
@media (max-width: 900px) {
  .slider-marks { font-size: .72rem; }
  .server-table-head { display: none; }
  .server-row-card--clean { grid-template-columns: 1fr; gap: 14px; }
  .server-row-main-clean { grid-template-columns: 1fr; }
  .server-col-label { display: block; }
  .site-footer { flex-wrap: wrap; }
}

.server-card-list{display:grid;gap:16px;}
.server-card{display:grid;grid-template-columns:260px 1fr auto;gap:20px;align-items:center;padding:16px 20px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.server-card-left{display:flex;gap:14px;align-items:center;}
.server-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(255,0,60,.2);}
.server-title{font-weight:600;}
.server-sub{font-size:.8rem;color:#aaa;text-transform:uppercase;}
.server-card-info{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.server-card-info span{display:block;font-size:.75rem;color:#aaa;}
.server-card-info strong{font-size:.9rem;}

.slider-marks {
  margin-top: 10px;
  display: grid;
  gap: 4px;
  color: #e6edf9;
  font-size: .82rem;
}
.slider-marks-six { grid-template-columns: repeat(6, minmax(0,1fr)); }
.slider-marks span { text-align: center; white-space: nowrap; }
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.server-card-list { display: grid; gap: 16px; }
.server-card {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.server-card-left { display:flex; gap:14px; align-items:center; }
.server-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(255,0,60,.2); }
.server-title { font-weight:600; }
.server-sub { font-size:.8rem; color:#aaa; text-transform:uppercase; }
.server-card-info { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.server-card-info span { display:block; font-size:.75rem; color:#aaa; }
.server-card-info strong { font-size:.9rem; }
@media (max-width:1000px){
  .server-card{ grid-template-columns:1fr; }
  .server-card-info{ grid-template-columns:1fr 1fr; }
}

.admin-search-form {
  display: grid;
  grid-template-columns: minmax(280px, 360px) auto;
  gap: 10px;
}
@media (max-width: 700px) {
  .admin-search-form {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

.support-discord-box {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
}
.support-discord-badge {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(88,101,242,.16);
  border: 1px solid rgba(88,101,242,.28);
  color: #d9ddff;
  font-weight: 700;
}

.support-hero {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 24px;
  align-items: stretch;
}
.support-copy {
  max-width: 760px;
}
.support-account-card,
.support-connect-card {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
}
.support-account-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.support-avatar {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.08);
}
.support-avatar--placeholder,
.support-connect-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(88,101,242,.18);
  border: 1px solid rgba(88,101,242,.26);
  color: #d9ddff;
  font-size: 1.8rem;
}
.support-account-label,
.support-account-id,
.support-connect-text {
  color: var(--muted);
}
.support-account-name,
.support-connect-title {
  font-size: 1.2rem;
  font-weight: 700;
}
.support-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .support-hero,
  .support-info-grid {
    grid-template-columns: 1fr;
  }
}
.action-panel-grid .btn,
.action-panel-grid button,
.action-panel-grid a {
  min-height: 52px;
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  transition: .18s ease;
}

.action-panel-grid .btn:hover,
.action-panel-grid button:hover,
.action-panel-grid a:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.action-panel-grid .btn-outline-light {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.action-panel-grid .btn-outline-light:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.14);
}

/* marketing */
.mk-header-wrap {
  position: sticky;
  top: 0;
  z-index: 1200;
  padding: 16px 0;
  background: linear-gradient(180deg, rgba(15,17,23,.92), rgba(15,17,23,.72));
  backdrop-filter: blur(14px);
}
.mk-header {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.mk-logo img {
  width: 210px;
  max-width: 100%;
  height: auto;
  display: block;
}
.mk-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mk-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
}
.mk-nav-link:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.mk-nav-item {
  position: relative;
}
.mk-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  padding: 12px;
  border-radius: 20px;
  background: #171b23;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
  display: grid;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .18s ease;
}
.mk-nav-item--dropdown:hover .mk-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mk-dropdown-link {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.mk-dropdown-link:hover {
  background: rgba(225,29,72,.10);
  border-color: rgba(225,29,72,.22);
  color: var(--text);
}
.mk-dropdown-title {
  font-weight: 800;
}
.mk-dropdown-sub {
  color: var(--muted);
  font-size: .88rem;
}
.mk-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mk-hero,
.mk-page-hero,
.mk-section,
.mk-footer {
  max-width: 1320px;
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

.mk-hero {
  padding-top: 36px;
  padding-bottom: 24px;
  display: grid;
  grid-template-columns: minmax(0,1.25fr) 360px;
  gap: 28px;
  align-items: center;
}
.mk-hero-copy {
  padding: 18px 0;
}
.mk-hero-title {
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 12px 0 18px;
  font-weight: 900;
  max-width: 860px;
}
.mk-hero-text,
.mk-copy,
.mk-section-head p,
.mk-page-hero p {
  color: var(--muted);
  line-height: 1.75;
}
.mk-hero-text {
  max-width: 760px;
  font-size: 1rem;
}
.mk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.mk-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.mk-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  font-size: .88rem;
  font-weight: 700;
}
.mk-hero-panel {
  display: grid;
  gap: 14px;
}
.mk-hero-stat {
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(24,28,36,0.96), rgba(18,21,28,0.96));
  border: 1px solid rgba(255,255,255,.08);
}
.mk-hero-stat span {
  color: var(--muted);
  font-size: .88rem;
}
.mk-hero-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 1.6rem;
  font-weight: 900;
}

.mk-page-hero {
  padding-top: 42px;
  padding-bottom: 22px;
  text-align: center;
}
.mk-page-hero h1 {
  margin: 10px 0 12px;
  font-size: clamp(2.1rem, 3.8vw, 3.8rem);
  font-weight: 900;
}
.mk-page-hero p {
  max-width: 860px;
  margin: 0 auto;
}

.mk-section {
  padding-top: 28px;
  padding-bottom: 28px;
}
.mk-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.mk-section-head h2 {
  margin: 6px 0 0;
  font-size: 2rem;
}
.mk-section-head p {
  max-width: 780px;
  margin: 8px 0 0;
}
.mk-section-head.center {
  display: block;
  text-align: center;
}
.mk-section-head.center p {
  margin-left: auto;
  margin-right: auto;
}

.mk-card,
.mk-feature-card,
.mk-package-card,
.mk-faq-card,
.mk-split-box {
  background: linear-gradient(180deg, rgba(24,28,36,0.96), rgba(18,21,28,0.96));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.mk-card,
.mk-package-card,
.mk-faq-card {
  padding: 26px;
}

.mk-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.mk-feature-card {
  padding: 24px;
}
.mk-feature-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(225,29,72,.12);
  border: 1px solid rgba(225,29,72,.24);
  color: #ffd1dc;
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.mk-feature-card h3 {
  margin-bottom: 8px;
  font-size: 1.1rem;
}
.mk-feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.mk-split-box {
  padding: 30px;
  display: grid;
  grid-template-columns: minmax(0,1.2fr) 380px;
  gap: 24px;
  align-items: start;
}
.mk-info-list {
  display: grid;
  gap: 12px;
}
.mk-info-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.mk-info-row span {
  color: var(--muted);
}

.mk-package-grid {
  display: grid;
  gap: 18px;
}
.mk-package-grid--4 {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.mk-package-grid--3 {
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.mk-package-card {
  display: grid;
  gap: 18px;
}
.mk-package-card--large {
  min-height: 100%;
}
.mk-package-top h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
}
.mk-package-price {
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
}
.mk-package-price span {
  font-size: .95rem;
  color: var(--muted);
  font-weight: 600;
}
.mk-package-specs {
  display: grid;
  gap: 12px;
}
.mk-package-specs > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.mk-package-specs span {
  color: var(--muted);
}
.mk-package-specs strong {
  color: var(--text);
}

.mk-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.mk-price-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.mk-price-box {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.mk-price-box--accent {
  background: rgba(225,29,72,.12);
  border-color: rgba(225,29,72,.24);
}
.mk-price-box span {
  color: var(--muted);
  font-size: .84rem;
}
.mk-price-box strong {
  display: block;
  margin-top: 8px;
  font-size: 1.25rem;
}

.mk-tld-list,
.mk-bullet-list,
.mk-faq-grid {
  display: grid;
  gap: 12px;
}
.mk-tld-row,
.mk-bullet-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.mk-bullet-item {
  flex-direction: column;
}
.mk-bullet-item span,
.mk-faq-card p {
  color: var(--muted);
}
.mk-faq-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.mk-faq-card h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.mk-faq-card p {
  margin: 0;
  line-height: 1.7;
}

.mk-footer {
  padding-top: 36px;
  padding-bottom: 32px;
}
.mk-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr .8fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mk-footer-brand {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 10px;
}
.mk-footer-text {
  color: var(--muted);
  max-width: 420px;
  line-height: 1.7;
}
.mk-footer-head {
  font-weight: 800;
  margin-bottom: 10px;
}
.mk-footer-links {
  display: grid;
  gap: 8px;
}
.mk-footer-links a {
  color: var(--muted);
}
.mk-footer-links a:hover {
  color: var(--text);
}
.mk-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .9rem;
  padding-top: 18px;
}

@media (max-width: 1200px) {
  .mk-package-grid--4 {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .mk-package-grid--3,
  .mk-feature-grid,
  .mk-two-col,
  .mk-footer-grid,
  .mk-split-box,
  .mk-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .mk-header {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .mk-nav {
    flex-wrap: wrap;
  }
  .mk-price-preview,
  .mk-faq-grid,
  .mk-package-grid--4,
  .mk-package-grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .mk-dropdown {
    position: static;
    min-width: auto;
    margin-top: 8px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .mk-nav-item--dropdown:hover .mk-dropdown {
    display: grid;
  }
}
/* marketing v2 clean */
.mk-topbar {
  position: sticky;
  top: 0;
  z-index: 1200;
      border-radius: 25px;
  background: rgba(15,17,23,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mk-topbar-inner,
.mk-home-hero,
.mk-home-section,
.mk-footer,
.mk-page-hero {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.mk-topbar-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mk-brand img {
  width: 205px;
  max-width: 100%;
  height: auto;
  display: block;
}
.mk-mainnav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-nav-link,
.mk-nav-link--button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  background: transparent;
  border: 0;
}
.mk-nav-link:hover,
.mk-nav-link--button:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.mk-nav-dropdown {
  position: relative;
}
.mk-nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 360px;
  padding: 12px;
  border-radius: 20px;
  background: #171b23;
  border: 1px solid var(--border);
  box-shadow: 0 26px 70px rgba(0,0,0,.34);
  display: grid;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .18s ease;
}
.mk-nav-dropdown:hover .mk-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mk-nav-menu-link {
  display: grid;
  gap: 4px;
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text);
}
.mk-nav-menu-link:hover {
  background: rgba(225,29,72,.10);
  border-color: rgba(225,29,72,.22);
  color: var(--text);
}
.mk-nav-menu-link span {
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.55;
}

.mk-home-hero {
  padding-top: 88px;
  padding-bottom: 72px;
}
.mk-home-hero-copy {
  max-width: 880px;
}
.mk-home-hero h1 {
  margin: 12px 0 18px;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 900;
  max-width: 920px;
}
.mk-home-hero p {
  max-width: 760px;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.8;
}
.mk-home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.mk-home-section {
  padding-top: 36px;
  padding-bottom: 36px;
}
.mk-home-intro {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(320px,.9fr);
  gap: 40px;
  align-items: start;
  padding: 34px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mk-home-intro-copy h2,
.mk-page-hero h1 {
  margin: 8px 0 14px;
  font-weight: 900;
  letter-spacing: -.03em;
}
.mk-home-intro-copy h2 {
  font-size: 2.2rem;
}
.mk-home-intro-copy p,
.mk-page-hero p,
.mk-home-column p,
.mk-home-wide p,
.mk-about-copy p {
  color: var(--muted);
  line-height: 1.8;
}
.mk-home-intro-points {
  display: grid;
  gap: 18px;
}
.mk-home-line {
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mk-home-line strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}
.mk-home-line span {
  color: var(--muted);
  line-height: 1.7;
}

.mk-home-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 26px;
  padding: 10px 0;
}
.mk-home-column {
  padding: 8px 0 0;
}
.mk-home-column h3 {
  margin: 8px 0 12px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.mk-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #ff9ab1;
  font-weight: 700;
}
.mk-text-link:hover {
  color: #fff;
}

.mk-home-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mk-home-wide h2 {
  margin: 8px 0 12px;
  font-size: 2rem;
  font-weight: 900;
}
.mk-home-wide-actions {
  flex-shrink: 0;
}

.mk-page-hero {
  padding-top: 64px;
  padding-bottom: 26px;
}
.mk-page-hero--narrow {
  max-width: 980px;
  text-align: center;
}
.mk-page-hero h1 {
  font-size: clamp(2.3rem, 4vw, 4rem);
}
.mk-page-hero p {
  max-width: 760px;
  margin: 0 auto;
}

.mk-domain-layout,
.mk-about-layout {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
  gap: 24px;
}
.mk-domain-search-card,
.mk-domain-price-card,
.mk-spec-card {
  background: linear-gradient(180deg, rgba(24,28,36,0.96), rgba(18,21,28,0.96));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
}
.mk-domain-search-card h2,
.mk-domain-price-card h2,
.mk-about-copy h2,
.mk-spec-card h3,
.mk-rootserver-copy h2 {
  font-weight: 900;
  letter-spacing: -.03em;
}
.mk-domain-price-list,
.mk-spec-list,
.mk-ts-preview {
  display: grid;
  gap: 12px;
}
.mk-domain-price-row,
.mk-spec-row,
.mk-ts-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.mk-spec-row span,
.mk-ts-preview-row span {
  color: var(--muted);
}
.mk-ts-preview-row--accent {
  background: rgba(225,29,72,.10);
  border-color: rgba(225,29,72,.24);
}

.mk-about-copy {
  padding: 8px 0;
}
.mk-about-copy p + p {
  margin-top: 14px;
}

.mk-rootserver-top {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,.95fr);
  gap: 24px;
  align-items: end;
}
.mk-rootserver-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mk-rootserver-specs span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 700;
}

.mk-package-grid {
  display: grid;
  gap: 18px;
}
.mk-package-grid--3 {
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.mk-package-card {
  background: linear-gradient(180deg, rgba(24,28,36,0.96), rgba(18,21,28,0.96));
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 26px;
}
.mk-package-card--clean {
  display: grid;
  gap: 18px;
}
.mk-package-top h3 {
  margin: 0 0 10px;
  font-size: 1.24rem;
  font-weight: 800;
}
.mk-package-price {
  font-size: 2rem;
  font-weight: 900;
}
.mk-package-price span {
  font-size: .95rem;
  color: var(--muted);
  font-weight: 600;
}
.mk-package-specs {
  display: grid;
  gap: 12px;
}
.mk-package-specs > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.mk-package-specs span {
  color: var(--muted);
}

.mk-footer {
  max-width: 1240px;
  padding-top: 48px;
  padding-bottom: 34px;
}
.mk-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr .8fr;
  gap: 24px;
  padding: 28px 24px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mk-footer-brand {
  font-size: 1.1rem;
  font-weight: 900;
  margin-bottom: 10px;
}
.mk-footer-text {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.7;
}
.mk-footer-head {
  font-weight: 800;
  margin-bottom: 10px;
}
.mk-footer-links {
  display: grid;
  gap: 8px;
}
.mk-footer-links a {
  color: var(--muted);
}
.mk-footer-links a:hover {
  color: var(--text);
}
.mk-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .92rem;
  padding: 18px 24px 0;
}

@media (max-width: 1100px) {
  .mk-home-intro,
  .mk-home-columns,
  .mk-domain-layout,
  .mk-about-layout,
  .mk-rootserver-top,
  .mk-package-grid--3,
  .mk-footer-grid {
    grid-template-columns: 1fr;
  }
  .mk-home-wide {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 820px) {
  .mk-topbar-inner {
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .mk-mainnav {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .mk-nav-menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .mk-nav-dropdown:hover .mk-nav-menu {
    display: grid;
  }
  .mk-home-hero {
    padding-top: 52px;
    padding-bottom: 40px;
  }
  .mk-home-hero h1 {
    font-size: 2.55rem;
  }
}