@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Tajawal:wght@400;500;600;700;800&display=swap');
:root {
  color-scheme:dark;
  --bg:#0b0c0d;
  --side:#101112;
  --surface:#17191a;
  --text:#f4f1e9;
  --muted:#b9b6ae;
  --dim:#85847e;
  --gold:#d4af37;
  --gold-light:#f5dc81;
  --bronze:#b87333;
  --line:rgba(212,175,55,.22);
  --shadow:0 20px 52px rgba(0,0,0,.4)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:linear-gradient(180deg,rgba(8,9,10,.78),rgba(10,11,12,.92)),url('../images/wm-black-marble.webp') center top/cover fixed;
  color:var(--text);
  font-family:'Inter','Tajawal',Arial,sans-serif;
  font-size:14px;
  line-height:1.55
}
html[lang=ar] body {
  font-family:'Tajawal','Inter',Arial,sans-serif
}
button {
  font:inherit;
  cursor:pointer
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--gold-light);
  outline-offset:3px
}
a {
  color:inherit;
  text-decoration:none
}
.app {
  min-height:100vh;
  display:grid;
  grid-template-columns:256px minmax(0,1fr)
}
.sidebar {
  position:sticky;
  top:0;
  height:100vh;
  background:linear-gradient(180deg,rgba(15,16,17,.96),rgba(10,11,12,.98)),url('../images/wm-black-marble.webp') center/cover;
  border-inline-end:1px solid #d4af3738;
  padding:27px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:35px
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 3px
}
.brand-mark {
  width:58px;
  height:58px;
  flex:none;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#d4af3713,transparent 68%);
  filter:drop-shadow(0 8px 8px #0009)
}
.brand-mark img {
  width:100%;
  height:100%;
  object-fit:contain;
  transform:perspective(500px) rotateY(-13deg) rotateX(7deg);
  filter:drop-shadow(1px 2px 1px #f6d56c80) drop-shadow(0 9px 7px #0009)
}
.brand-name {
  font:700 13px/1.2 'Inter','Tajawal',sans-serif;
  letter-spacing:.035em;
  color:#f7f3e8;
  white-space:nowrap;
  text-shadow:0 2px 10px #000
}
.brand-sub {
  color:#d6b84f;
  font-size:9px;
  letter-spacing:.1em;
  margin-top:5px
}
.nav-title {
  color:#8e8e89;
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
  padding:0 12px;
  margin:0 0 10px
}
.nav {
  display:flex;
  flex-direction:column;
  gap:4px
}
.nav button {
  border:1px solid transparent;
  background:transparent;
  color:#b5b5b0;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 12px;
  border-radius:10px;
  text-align:start;
  font-weight:500;
  transition:all .18s
}
.nav button:hover {
  background:#ffffff09;
  color:#fff
}
.nav button.active {
  background:linear-gradient(110deg,#d4af3722,#d4af3708);
  border-color:#d4af3745;
  color:#f1d875;
  box-shadow:inset 0 1px #ffffff13,0 5px 16px #0003
}
.nav svg,.icon svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.nav .count {
  margin-inline-start:auto;
  border:1px solid #d4af3763;
  color:#f0d36a;
  background:#d4af3714;
  padding:0 7px;
  border-radius:6px;
  font-size:10px
}
.side-bottom {
  margin-top:auto
}
.help-card {
  padding:16px;
  border:1px solid #d4af3740;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(39,35,24,.96),rgba(19,20,19,.97)),url('../images/wm-black-marble.webp') center/cover;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px #fff1,0 12px 30px #0004
}
.help-card:before {
  content:'✦';
  position:absolute;
  color:#e4c34a36;
  font-size:39px;
  inset-inline-end:11px;
  top:2px;
  text-shadow:0 0 20px #e9bc36
}
.help-card strong {
  display:block;
  font-size:13px;
  position:relative;
  font-weight:600
}
.help-card p {
  color:#aaa79c;
  margin:6px 0 11px;
  font-size:11px;
  position:relative
}
.help-card button {
  border:0;
  background:transparent;
  color:#efd36c;
  padding:3px 0;
  font-size:11px;
  font-weight:600;
  position:relative
}
.identity {
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid #ffffff17;
  margin-top:18px;
  padding:15px 5px 0
}
.avatar {
  height:35px;
  width:35px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#56431c,#1e1d18);
  border:1px solid #edcf5f;
  color:#ffe48a;
  border-radius:11px;
  font-size:11px;
  font-weight:700;
  box-shadow:inset 0 1px #fff5,0 4px 12px #0007
}
.identity strong {
  display:block;
  font-size:12px
}
.identity span {
  font-size:10px;
  color:#92928c
}
.main {
  min-width:0
}
.topbar {
  height:70px;
  border-bottom:1px solid #ffffff14;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 4.5%;
  background:rgba(12,13,14,.82);
  backdrop-filter:blur(18px)
}
.breadcrumb {
  font-weight:600;
  color:#e6e2d9;
  font-size:12px
}
.top-actions {
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:9px
}
.top-actions button,.top-actions .header-admin {
  display:inline-flex;
  align-items:center;
  background:linear-gradient(145deg,#202222,#151718);
  color:#c8c6be;
  border:1px solid #ffffff1c;
  padding:7px 11px;
  border-radius:9px;
  font-size:11px;
  box-shadow:inset 0 1px #ffffff0d
}
.top-actions button:hover,.top-actions .header-admin:hover {
  color:#ffe179;
  border-color:#d4af3770
}
.round {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0!important
}
.round svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}
.top-avatar {
  width:34px;
  height:34px;
  border-radius:11px;
  background:linear-gradient(145deg,#b58e2f,#403315);
  border:1px solid #f2d461;
  color:#fff1b5;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:700;
  margin-inline-start:5px;
  box-shadow:inset 0 1px #fff6,0 4px 12px #0008
}
.mobile-brand {
  display:none
}
.content {
  padding:27px 4.5% 54px;
  max-width:1580px;
  margin:auto
}
.demo-note {
  display:inline-flex;
  gap:7px;
  align-items:center;
  border:1px solid #d4af375c;
  color:#f0d46a;
  background:linear-gradient(145deg,#29251a,#171714);
  border-radius:7px;
  padding:4px 9px;
  font-size:10px;
  font-weight:600;
  box-shadow:inset 0 1px #ffffff12
}
.eyebrow {
  color:#e1bd48;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:7px
}
.page-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin:20px 0 24px
}
.page-header h1 {
  font-size:clamp(26px,2.8vw,35px);
  line-height:1.2;
  letter-spacing:-.035em;
  margin:0 0 6px;
  color:#f5f2ea;
  font-weight:700;
  text-shadow:0 3px 18px #0008
}
.page-header p {
  margin:0;
  color:#aaa9a2;
  font-size:13px
}
.header-action,.primary {
  border:1px solid #f1d368;
  background:linear-gradient(145deg,#ffe789 0%,#d4af37 43%,#a77522 100%);
  color:#241a08;
  padding:10px 15px;
  border-radius:9px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:inset 0 1px 1px #fff9,inset 0 -2px 3px #76501366,0 6px 0 #704d14,0 10px 20px #0007;
  transform:translateY(-3px);
  transition:transform .14s,box-shadow .14s,filter .14s
}
.header-action:hover,.primary:hover {
  filter:brightness(1.07);
  transform:translateY(-4px)
}
.header-action:active,.primary:active {
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px #6f4d2777,0 1px 0 #704d14
}
.welcome-hero {
  min-height:292px;
  margin:0 0 21px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:35px 4.5%;
  border:1px solid #d6b446;
  border-radius:15px;
  background:#171817 url('../images/wm-luxury-hero.png') center 52%/cover no-repeat;
  box-shadow:inset 0 1px #fff5,inset 0 -1px #000,0 22px 45px #0008,0 0 0 1px #d4af371c
}
.welcome-hero:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(270deg,rgba(9,10,10,.9) 0%,rgba(9,10,10,.58) 34%,rgba(9,10,10,.02) 100%),linear-gradient(0deg,rgba(7,8,8,.42),transparent 62%)
}
[dir=ltr] .welcome-hero:before {
  background:linear-gradient(90deg,rgba(9,10,10,.9) 0%,rgba(9,10,10,.58) 34%,rgba(9,10,10,.02) 100%),linear-gradient(0deg,rgba(7,8,8,.42),transparent 62%)
}
.welcome-copy {
  position:relative;
  z-index:1;
  max-width:540px
}
.welcome-kicker {
  color:#f3d466;
  font-size:10px;
  letter-spacing:.16em;
  margin-bottom:11px;
  font-weight:700;
  text-shadow:0 1px 8px #000
}
.welcome-copy h1 {
  font-size:clamp(28px,3vw,41px);
  line-height:1.2;
  letter-spacing:-.035em;
  color:#fff;
  margin:0 0 9px;
  font-weight:700;
  text-shadow:0 3px 14px #000b
}
.welcome-copy p {
  margin:0;
  color:#e2ded4;
  font-size:13px;
  text-shadow:0 1px 8px #000
}
.welcome-actions {
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:20px
}
.welcome-actions .text-action {
  color:#ffe27a;
  font-size:11px;
  border-bottom:1px solid #e1c053;
  padding:5px 0;
  font-weight:700
}
.hero-emblem {
  position:absolute;
  z-index:1;
  inset-inline-start:5%;
  bottom:13px;
  width:132px;
  height:132px;
  object-fit:contain;
  opacity:.94;
  filter:drop-shadow(0 13px 8px #000b) drop-shadow(0 0 18px #d4af373f);
  transform:perspective(650px) rotateY(12deg) rotateX(3deg);
  pointer-events:none
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin:0 0 22px
}
.stat {
  padding:15px 17px;
  min-height:97px;
  position:relative;
  border:1px solid #d4af3738;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(30,31,29,.91),rgba(17,18,18,.96)),url('../images/wm-black-marble.webp') center/cover;
  box-shadow:inset 0 1px #ffffff14,inset 0 -1px #0009,0 9px 22px #0005;
  transform:perspective(900px) rotateX(1.2deg)
}
.stat .label {
  color:#c9c6bd;
  font-size:11px
}
.stat .value {
  font-size:29px;
  line-height:1.15;
  margin:7px 0 2px;
  color:#f3d65d;
  font-weight:800;
  letter-spacing:-.04em;
  text-shadow:0 2px 12px #d4af3722
}
.stat .meta {
  color:#94958e;
  font-size:10px
}
.stat .symbol {
  position:absolute;
  inset-inline-end:14px;
  top:12px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:#f1d35a;
  background:linear-gradient(145deg,#584719,#242116);
  border:1px solid #e0bd4c75;
  border-radius:8px;
  box-shadow:inset 0 1px #fff5,0 4px 9px #0008
}
.stat .symbol svg {
  width:16px;
  height:16px;
  stroke-width:1.5
}
.stat.warn .value {
  color:#e9b776
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.85fr);
  gap:18px
}
.stack {
  display:grid;
  gap:18px;
  align-content:start
}
.panel {
  background:linear-gradient(145deg,rgba(29,31,31,.96),rgba(19,21,21,.98)),url('../images/wm-black-marble.webp') center/cover;
  border:1px solid #ffffff19;
  border-radius:13px;
  box-shadow:inset 0 1px #ffffff12,0 13px 33px #0005;
  overflow:hidden
}
.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 18px;
  border-bottom:1px solid #ffffff13
}
.panel-head h2 {
  font-size:15px;
  margin:0;
  color:#f4f1e9;
  font-weight:650;
  letter-spacing:-.02em
}
.panel-head a,.text-link {
  color:#edcf59;
  font-size:11px;
  font-weight:650
}
.service-row {
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 17px;
  border-bottom:1px solid #ffffff0d
}
.service-row:last-child {
  border:0
}
.service-icon {
  height:39px;
  width:39px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid #d4af3757;
  background:linear-gradient(145deg,#38321e,#1b1c19);
  color:#f0d35c;
  box-shadow:inset 0 1px #fff4,0 5px 11px #0005
}
.service-icon.domain {
  color:#e4bd4d
}
.service-icon svg {
  width:19px;
  height:19px;
  stroke-width:1.5
}
.service-copy {
  min-width:0
}
.service-copy strong {
  display:block;
  font-size:12px;
  color:#f0eee8;
  font-weight:600
}
.service-copy small {
  display:block;
  color:#92948e;
  font-size:10px;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.service-end {
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:12px
}
.service-end .renew {
  text-align:end;
  color:#a2a39d;
  font-size:10px;
  white-space:nowrap
}
.service-end .renew strong {
  display:block;
  color:#e3e1db;
  font-size:11px
}
.status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:20px;
  color:#e5cd62;
  background:#d4af3719;
  border:1px solid #d4af3740;
  padding:4px 9px;
  font-size:10px;
  font-weight:650;
  white-space:nowrap;
  box-shadow:inset 0 1px #ffffff0c
}
.status:before {
  content:'';
  height:5px;
  width:5px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 7px currentColor
}
.status.pending {
  color:#ebba83;
  background:#b873331d;
  border-color:#b8733350
}
.arrow {
  border:1px solid #ffffff23;
  border-radius:8px;
  background:linear-gradient(145deg,#292c2c,#1a1c1c);
  color:#c5c6c0;
  padding:6px 9px;
  box-shadow:inset 0 1px #ffffff12,0 3px 7px #0005
}
.arrow:hover {
  border-color:#d4af3780;
  color:#f3d361
}
.bill {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 17px
}
.bill-mark {
  height:37px;
  width:37px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#604d1d,#282318);
  border:1px solid #e0be5080;
  color:#f1d15b;
  box-shadow:inset 0 1px #fff6,0 5px 11px #0007
}
.bill strong {
  display:block;
  font-size:12px;
  color:#f1efe8;
  font-weight:600
}
.bill small {
  display:block;
  color:#93958f;
  font-size:10px
}
.bill .amount {
  margin-inline-start:auto;
  text-align:end
}
.bill .amount strong {
  font-size:17px;
  color:#f4e8b7
}
.bill .amount small {
  color:#e5ae76
}
.bill-foot {
  background:linear-gradient(110deg,#211f19,#181a19);
  border-top:1px solid #d4af372b;
  padding:11px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.bill-foot span {
  color:#b0ada3;
  font-size:10px
}
.bill-foot button {
  background:linear-gradient(145deg,#f3d774,#bd9027);
  color:#211a0d;
  border:1px solid #f3d774;
  border-radius:8px;
  padding:7px 11px;
  font-size:10px;
  font-weight:800;
  box-shadow:inset 0 1px #fff9,0 4px 0 #785a18,0 7px 12px #0007;
  transform:translateY(-2px)
}
.bill-foot button:active {
  transform:translateY(1px);
  box-shadow:inset 0 2px 3px #76571e,0 1px 0 #785a18
}
.activity {
  padding:5px 18px 10px
}
.event {
  display:flex;
  gap:12px;
  padding:10px 0
}
.event-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#e4c54f;
  margin-top:6px;
  flex:none;
  box-shadow:0 0 8px #d4af3766
}
.event-dot.blue {
  background:#b7ae8a
}
.event-dot.amber {
  background:#c58c5c
}
.event strong {
  font-size:11px;
  display:block;
  color:#e8e6df;
  font-weight:500
}
.event small {
  color:#92948e;
  font-size:10px
}
.promo {
  display:flex;
  align-items:center;
  gap:15px;
  padding:17px 19px;
  background:linear-gradient(145deg,rgba(41,37,27,.95),rgba(19,20,19,.98)),url('../images/wm-black-marble.webp') center/cover;
  border:1px solid #c89d3765;
  border-radius:13px;
  position:relative;
  overflow:hidden;
  color:#f3eee4;
  box-shadow:inset 0 1px #fff2,0 12px 25px #0005
}
.promo:before {
  content:'';
  position:absolute;
  inset-inline-end:18px;
  top:50%;
  transform:translateY(-50%);
  width:70px;
  height:70px;
  border:1px solid #e6c45b42;
  border-radius:50%;
  box-shadow:0 0 0 8px #d4af3709,0 0 20px #d4af3720
}
.promo h2 {
  font-size:15px;
  margin:0 0 4px;
  color:#f3e9c9;
  font-weight:650
}
.promo p {
  font-size:11px;
  color:#bdb9ae;
  margin:0
}
.promo button {
  margin-inline-start:auto;
  border:1px solid #e3c2549c;
  background:linear-gradient(145deg,#3b321a,#211e16);
  color:#f0d56b;
  border-radius:8px;
  padding:8px 11px;
  font-size:10px;
  font-weight:650;
  position:relative;
  white-space:nowrap;
  box-shadow:inset 0 1px #fff3,0 5px 10px #0005
}
.section-table {
  width:100%;
  border-collapse:collapse
}
.section-table th {
  text-align:start;
  color:#9b9d97;
  font-size:10px;
  font-weight:600;
  padding:12px 18px;
  border-bottom:1px solid #ffffff14;
  white-space:nowrap
}
.section-table td {
  padding:14px 18px;
  border-bottom:1px solid #ffffff0d;
  font-size:11px;
  color:#c2c2bc
}
.section-table tr:last-child td {
  border:0
}
.section-table td strong {
  font-size:12px;
  color:#f0eee8;
  font-weight:600
}
.table-wrap {
  overflow:auto
}
.detail-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px
}
.detail-hero {
  padding:22px
}
.detail-hero .service-icon {
  margin-bottom:15px
}
.detail-hero h2 {
  margin:10px 0 0;
  font-size:21px;
  font-weight:650;
  color:#f1eee7
}
.detail-hero p {
  color:#a6a8a1;
  font-size:12px;
  margin:5px 0 19px
}
.detail-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px
}
.ghost {
  border:1px solid #ffffff25;
  background:linear-gradient(145deg,#272a29,#191b1b);
  color:#e1e0d9;
  border-radius:8px;
  padding:9px 12px;
  font-size:11px;
  font-weight:600;
  box-shadow:inset 0 1px #ffffff10
}
.ghost:hover {
  border-color:#c6a33d;
  color:#f0d36b
}
.key-list {
  padding:9px 18px
}
.key-line {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #ffffff0d;
  font-size:11px
}
.key-line:last-child {
  border:0
}
.key-line span {
  color:#a4a69f
}
.key-line strong {
  font-weight:600;
  color:#e3e2db;
  direction:ltr;
  unicode-bidi:isolate
}
.ticket {
  display:flex;
  gap:12px;
  padding:15px 17px;
  border-bottom:1px solid #ffffff12
}
.ticket:last-child {
  border:0
}
.ticket-id {
  color:#e8c74f;
  font-size:10px;
  font-weight:700
}
.ticket strong {
  font-size:12px;
  color:#eeece6;
  font-weight:600
}
.ticket small {
  display:block;
  color:#92948e;
  font-size:10px
}
.ticket .status {
  margin-inline-start:auto;
  align-self:center
}
.empty {
  padding:36px 22px;
  color:var(--muted);
  text-align:center
}
.toast {
  position:fixed;
  bottom:24px;
  inset-inline-end:24px;
  background:#242522;
  color:#fff8e6;
  border:1px solid #c69c3d;
  padding:11px 15px;
  border-radius:10px;
  box-shadow:0 15px 30px #0008;
  z-index:10;
  display:none
}
.toast.show {
  display:block
}
.footer {
  margin-top:27px;
  color:#81837d;
  font-size:10px;
  text-align:center
}
.footer span {
  color:#d3b144
}
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.catalog-card {
  position:relative;
  overflow:hidden;
  padding:23px;
  border:1px solid #d4af3745;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(35,34,29,.97),rgba(17,19,19,.98)),url('../images/wm-black-marble.webp') center/cover;
  box-shadow:inset 0 1px #ffffff14,0 15px 32px #0006;
  min-height:230px
}
.catalog-card:after {
  content:'✦';
  position:absolute;
  inset-inline-end:17px;
  top:8px;
  font-size:55px;
  color:#d4af3718;
  text-shadow:0 0 23px #e6c15320
}
.catalog-card h2 {
  font-size:20px;
  margin:13px 0 6px;
  color:#f3ead0
}
.catalog-card p {
  max-width:420px;
  color:#aaa9a2;
  font-size:12px;
  margin:0 0 18px
}
.catalog-card .catalog-icon {
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#efd262;
  background:linear-gradient(145deg,#54451f,#242116);
  border:1px solid #d4af3780;
  box-shadow:inset 0 1px #fff4,0 7px 14px #0006
}
.catalog-card .catalog-icon svg {
  width:21px;
  height:21px
}
.catalog-state {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid #b8733357;
  border-radius:20px;
  color:#e9bd8d;
  background:#b8733315;
  font-size:10px;
  font-weight:650
}
.catalog-state:before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}
.catalog-note {
  margin-top:17px;
  padding:15px 17px;
  border-inline-start:2px solid #d5b441;
  background:#d4af370c;
  color:#c5c1b5;
  font-size:11px
}
@media(max-width:1100px) {
  .stats {
    grid-template-columns:repeat(2,1fr)
  }
  .dashboard-grid,.detail-grid {
    grid-template-columns:1fr
  }
  .topbar {
    padding:0 25px
  }
  .content {
    padding:24px 25px 45px
  }
  .hero-emblem {
    width:98px;
    height:98px
  }
}
@media(max-width:720px) {
  .app {
    display:block
  }
  .sidebar {
    position:fixed;
    inset:auto 0 0;
    height:auto;
    z-index:5;
    display:block;
    padding:6px 8px max(7px,env(safe-area-inset-bottom));
    border-inline-end:0;
    border-top:1px solid #d4af3744;
    box-shadow:0 -8px 25px #0008
  }
  .sidebar>.brand,.sidebar>.nav-wrap .nav-title,.side-bottom {
    display:none
  }
  .nav {
    flex-direction:row;
    justify-content:space-between;
    gap:1px
  }
  .nav button {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    font-size:9px;
    text-align:center;
    padding:5px 1px;
    border-radius:8px
  }
  .nav svg {
    width:17px;
    height:17px
  }
  .nav .count {
    display:none
  }
  .topbar {
    height:58px;
    padding:0 13px
  }
  .mobile-brand {
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.015em;
    color:#f0eee8
  }
  .mobile-brand .mobile-mark {
    color:#f0d46b
  }
  .mobile-brand .mobile-divider {
    color:#777b79
  }
  .breadcrumb {
    display:none
  }
  .content {
    padding:15px 12px 95px
  }
  .welcome-hero {
    min-height:253px;
    padding:23px 17px;
    background-position:50% 54%;
    border-radius:13px
  }
  .welcome-hero:before {
    background:linear-gradient(270deg,rgba(8,10,10,.94),rgba(8,10,10,.76) 65%,rgba(8,10,10,.18))
  }
  [dir=ltr] .welcome-hero:before {
    background:linear-gradient(90deg,rgba(8,10,10,.94),rgba(8,10,10,.76) 65%,rgba(8,10,10,.18))
  }
  .welcome-copy {
    max-width:98%
  }
  .welcome-copy h1 {
    font-size:27px
  }
  .welcome-copy p {
    font-size:12px
  }
  .welcome-actions {
    margin-top:15px;
    gap:12px
  }
  .welcome-actions .header-action {
    padding:8px 11px;
    font-size:10px
  }
  .hero-emblem {
    inset-inline-start:auto;
    inset-inline-end:8px;
    bottom:4px;
    width:62px;
    height:62px;
    opacity:.75
  }
  .stats {
    grid-template-columns:repeat(2,1fr);
    gap:7px;
    margin-bottom:16px
  }
  .stat {
    padding:10px 11px;
    min-height:83px;
    border-radius:10px
  }
  .stat .value {
    font-size:25px
  }
  .stat .symbol {
    inset-inline-end:8px;
    top:7px;
    width:24px;
    height:24px
  }
  .page-header {
    align-items:flex-start;
    margin:15px 0 18px
  }
  .page-header h1 {
    font-size:23px
  }
  .page-header p {
    font-size:11px
  }
  .header-action {
    padding:8px 9px;
    font-size:10px
  }
  .service-row {
    gap:8px;
    padding:12px 10px;
    flex-wrap:wrap
  }
  .service-icon {
    height:34px;
    width:34px
  }
  .service-copy {
    flex:1
  }
  .service-copy strong {
    font-size:11px
  }
  .service-end {
    width:100%;
    padding-inline-start:42px;
    gap:8px
  }
  .service-end .renew {
    margin-inline-end:auto
  }
  .panel-head {
    padding:13px 14px
  }
  .bill {
    padding:13px 11px
  }
  .bill-foot {
    padding:10px 11px
  }
  .promo {
    align-items:flex-start;
    flex-direction:column;
    padding:14px
  }
  .promo button {
    margin:0
  }
  .section-table th,.section-table td {
    padding:10px 12px
  }
  .ticket {
    padding:12px 11px;
    gap:8px
  }
  .ticket .status {
    font-size:9px;
    padding:3px 6px
  }
  .catalog-grid {
    grid-template-columns:1fr;
    gap:10px
  }
  .catalog-card {
    min-height:0;
    padding:18px
  }
}
@media(max-width:390px) {
  .top-actions {
    gap:5px
  }
  .top-actions button,.top-actions .header-admin {
    padding:6px 8px
  }
  .welcome-copy h1 {
    font-size:24px
  }
  .stat .label {
    font-size:10px
  }
  .stat .meta {
    font-size:9px
  }
}
.auth-pending .app{visibility:hidden}
.logout-button{border:1px solid var(--line);background:#161615;color:var(--gold-light);border-radius:8px;padding:8px 12px}
.empty{padding:24px;text-align:center;color:var(--muted)}
.service-end{gap:12px}
.header-admin[hidden]{display:none!important}