:root{
  --bg:#03070d;
  --bg2:#06111b;
  --panel:#091725;
  --panel2:#0b1b2a;
  --line:rgba(255,255,255,.075);
  --line2:rgba(255,255,255,.11);

  --text:#f6fbff;
  --muted:#8297aa;

  --blue:#00c8ff;
  --green:#55f39a;
  --purple:#9b73ff;
  --orange:#ffad5c;
  --red:#ff6680;

  --shadow:0 18px 60px rgba(0,0,0,.25);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:var(--text);

  background:
    radial-gradient(
      circle at 50% -15%,
      rgba(0,200,255,.10),
      transparent 36%
    ),
    radial-gradient(
      circle at 90% 30%,
      rgba(85,243,154,.035),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #03070d 0%,
      #06111b 55%,
      #03070d 100%
    );
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea{
  font:inherit;
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none!important;
}

.container{
  width:min(
    1180px,
    calc(100% - 30px)
  );

  margin:auto;
}


/* =========================================================
   NAVBAR
========================================================= */

.dashnav{
  height:78px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(3,7,13,.82);

  backdrop-filter:
    blur(20px);

  position:sticky;
  top:0;
  z-index:50;
}

.nav-inner{
  height:100%;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
}

.dashnav img{
  width:120px;
  height:55px;
  object-fit:contain;
}

.dashnav .right{
  display:flex;
  align-items:center;
  gap:12px;
}

.user-box{
  display:flex;
  align-items:center;
  gap:8px;

  padding:
    9px 12px;

  border:
    1px solid var(--line);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);
}

.user-status{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 12px
    rgba(85,243,154,.75);
}

.user-name{
  font-size:12px;
  font-weight:700;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  border:0;
  border-radius:11px;

  padding:
    11px 15px;

  font-size:12px;
  font-weight:800;

  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    opacity .2s ease,
    border-color .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn.primary{
  color:#00131b;

  background:
    linear-gradient(
      135deg,
      #55f39a,
      #00c8ff
    );

  box-shadow:
    0 8px 28px
    rgba(0,200,255,.12);
}

.btn.dark{
  color:#fff;

  background:#0b1825;

  border:
    1px solid var(--line);
}

.btn.dark:hover{
  border-color:
    rgba(255,255,255,.16);

  background:#0d1d2c;
}

.btn.small{
  padding:
    8px 11px;

  font-size:10px;
}


/* =========================================================
   MAIN
========================================================= */

.main{
  padding:
    42px 0 80px;
}


/* =========================================================
   WELCOME
========================================================= */

.welcome{
  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:25px;

  margin-bottom:24px;
  padding:30px;

  border:
    1px solid var(--line);

  border-radius:22px;

  background:
    linear-gradient(
      120deg,
      rgba(0,200,255,.055),
      rgba(85,243,154,.025)
    );

  box-shadow:
    var(--shadow);
}

.welcome h1{
  margin:
    6px 0;

  font-size:
    clamp(30px,4vw,42px);

  line-height:1;

  letter-spacing:-.055em;
}

.welcome-text{
  margin:10px 0 0;

  color:var(--muted);

  font-size:13px;
}

.welcome-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.muted{
  color:var(--muted);
  font-size:12px;
}

.section-label{
  display:block;

  margin-bottom:6px;

  color:
    rgba(0,200,255,.75);

  font-size:9px;
  font-weight:900;

  letter-spacing:.14em;
}


/* =========================================================
   STATISTIQUES
========================================================= */

.stats-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:15px;

  margin-bottom:15px;
}

.stat-card{
  display:flex;
  align-items:center;

  gap:14px;

  min-height:105px;

  padding:20px;

  border:
    1px solid var(--line);

  border-radius:18px;

  background:
    linear-gradient(
      180deg,
      rgba(9,23,37,.96),
      rgba(5,13,21,.98)
    );

  box-shadow:
    0 14px 45px
    rgba(0,0,0,.15);
}

.stat-card strong{
  display:block;

  margin-top:5px;

  font-size:28px;

  letter-spacing:-.04em;
}

.stat-icon{
  width:45px;
  height:45px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  font-size:10px;
  font-weight:900;

  background:
    rgba(255,255,255,.035);

  border:
    1px solid var(--line);
}

.stat-icon.blue{
  color:var(--blue);
  box-shadow:
    inset 0 0 25px
    rgba(0,200,255,.06);
}

.stat-icon.green{
  color:var(--green);
  box-shadow:
    inset 0 0 25px
    rgba(85,243,154,.06);
}

.stat-icon.purple{
  color:var(--purple);
}

.stat-icon.orange{
  color:var(--orange);
}


/* =========================================================
   CARDS
========================================================= */

.card{
  background:
    linear-gradient(
      180deg,
      rgba(9,23,37,.96),
      rgba(5,13,21,.98)
    );

  border:
    1px solid var(--line);

  border-radius:18px;

  padding:22px;

  box-shadow:
    0 14px 45px
    rgba(0,0,0,.15);
}

.service-card{
  margin-bottom:15px;
}

.card-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:20px;

  margin-bottom:8px;
}

.card-heading h3{
  margin:0 0 5px;

  font-size:18px;

  letter-spacing:-.025em;
}

.card-heading p{
  margin:0;
}


/* =========================================================
   SERVICES
========================================================= */

.service-row{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:20px;

  padding:
    16px 0;

  border-bottom:
    1px solid var(--line);
}

.service-row:last-child{
  border-bottom:0;
}

.service-main{
  display:flex;
  align-items:center;

  gap:13px;

  min-width:0;
}

.service-main strong{
  display:block;

  font-size:13px;

  margin-bottom:4px;
}

.service-details{
  font-size:11px;
}

.service-icon{
  width:43px;
  height:43px;

  flex-shrink:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  font-size:9px;
  font-weight:900;

  border:
    1px solid var(--line);
}

.vps-icon{
  color:var(--blue);

  background:
    rgba(0,200,255,.045);
}

.web-icon{
  color:var(--green);

  background:
    rgba(85,243,154,.045);
}

.service-actions{
  display:flex;
  align-items:center;

  justify-content:flex-end;

  gap:8px;

  flex-shrink:0;
}


/* =========================================================
   STATUS
========================================================= */

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:25px;

  padding:
    5px 9px;

  border-radius:999px;

  background:
    rgba(85,243,154,.08);

  color:#aef8cc;

  border:
    1px solid
    rgba(85,243,154,.08);

  font-size:9px;
  font-weight:900;

  text-transform:uppercase;
}

.web-pill{
  background:
    rgba(0,200,255,.07);

  color:#9deaff;

  border-color:
    rgba(0,200,255,.08);
}


/* =========================================================
   EMPTY
========================================================= */

.empty{
  display:flex;

  flex-direction:column;
  align-items:center;

  justify-content:center;

  text-align:center;

  padding:
    35px 20px;

  color:#71879c;
}

.empty strong{
  margin-top:10px;

  color:#dce8f0;

  font-size:13px;
}

.empty p{
  margin:
    7px 0 16px;

  font-size:11px;
}

.empty.compact{
  align-items:flex-start;
  text-align:left;

  padding:
    20px 0;
}

.empty.compact strong{
  margin-top:0;
}

.empty-icon{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

  background:
    rgba(255,255,255,.025);

  border:
    1px solid var(--line);

  color:var(--blue);

  font-size:9px;
  font-weight:900;
}


/* =========================================================
   COMMANDES
========================================================= */

.order-row{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:20px;

  padding:
    15px 0;

  border-bottom:
    1px solid var(--line);
}

.order-row:last-child{
  border-bottom:0;
}

.order-row strong{
  display:block;

  font-size:12px;

  margin-bottom:5px;
}


/* =========================================================
   TICKET
========================================================= */

.ticket{
  margin-top:16px;
}

.ticket label{
  display:block;

  margin-bottom:14px;

  color:#8da2b6;

  font-size:11px;
  font-weight:600;
}

.ticket input,
.ticket textarea{
  display:block;

  width:100%;

  margin-top:7px;

  padding:12px 13px;

  border:
    1px solid var(--line);

  border-radius:11px;

  background:#050b12;

  color:#fff;

  outline:none;

  transition:
    border-color .2s,
    box-shadow .2s;
}

.ticket input::placeholder,
.ticket textarea::placeholder{
  color:#526779;
}

.ticket input:focus,
.ticket textarea:focus{
  border-color:
    rgba(0,200,255,.4);

  box-shadow:
    0 0 0 3px
    rgba(0,200,255,.06);
}

.ticket textarea{
  min-height:120px;

  resize:vertical;
}

.ticket-footer{
  display:flex;
  align-items:center;

  gap:15px;

  flex-wrap:wrap;
}

.msg{
  font-size:11px;
  color:#9bb0c1;
}

.msg.success{
  color:var(--green);
}

.msg.error{
  color:var(--red);
}


/* =========================================================
   LOADING
========================================================= */

.loading-card{
  min-height:200px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;
}

.loading-spinner{
  width:30px;
  height:30px;

  margin-bottom:15px;

  border:
    3px solid
    rgba(255,255,255,.08);

  border-top-color:
    var(--blue);

  border-radius:50%;

  animation:
    spin .8s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================================
   ERROR
========================================================= */

.error-card{
  text-align:center;

  padding:45px 20px;
}

.error-card h3{
  margin-top:0;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:950px){

  .stats-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

}

@media(max-width:700px){

  .container{
    width:
      calc(100% - 22px);
  }

  .dashnav{
    height:70px;
  }

  .dashnav img{
    width:105px;
  }

  .user-box{
    display:none;
  }

  .main{
    padding:
      25px 0 60px;
  }

  .welcome{
    align-items:flex-start;

    flex-direction:column;

    padding:23px;

    border-radius:18px;
  }

  .welcome-actions{
    width:100%;

    justify-content:flex-start;
  }

  .welcome-actions .btn{
    flex:1;
  }

  .stats-grid{
    grid-template-columns:1fr 1fr;

    gap:10px;
  }

  .stat-card{
    min-height:95px;

    padding:15px;

    gap:10px;
  }

  .stat-icon{
    width:38px;
    height:38px;
  }

  .stat-card strong{
    font-size:24px;
  }

  .card{
    padding:18px;

    border-radius:16px;
  }

  .card-heading{
    flex-direction:column;
  }

  .card-heading .btn{
    width:100%;
  }

  .service-row{
    align-items:flex-start;

    flex-direction:column;

    gap:13px;
  }

  .service-actions{
    width:100%;

    justify-content:flex-start;

    flex-wrap:wrap;
  }

  .service-actions .btn{
    flex:1;
  }

}

@media(max-width:480px){

  .stats-grid{
    grid-template-columns:1fr;
  }

  .welcome-actions{
    flex-direction:column;
  }

  .welcome-actions .btn{
    width:100%;
  }

  .ticket-footer{
    align-items:stretch;

    flex-direction:column;
  }

  .ticket-footer .btn{
    width:100%;
  }

}