/* QY Cloud inspired original admin UI layer for CardShop Pro */

:root{
  color-scheme:light;
  --qa-bg:#f4f7fb;
  --qa-side:#ffffff;
  --qa-surface:#ffffff;
  --qa-surface-2:#f8fbff;
  --qa-line:#dbe7f2;
  --qa-line-strong:#c7d8e8;
  --qa-text:#162235;
  --qa-muted:#657386;
  --qa-primary:#1769e0;
  --qa-primary-strong:#0c56bd;
  --qa-cyan:#02a7b5;
  --qa-success:#17a66a;
  --qa-danger:#d94b4b;
  --qa-warning:#d88716;
  --qa-shadow:0 12px 34px rgba(20,50,82,.09);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --qa-bg:#07111d;
  --qa-side:#0f1b2a;
  --qa-surface:#101d2c;
  --qa-surface-2:#142438;
  --qa-line:#243a52;
  --qa-line-strong:#365673;
  --qa-text:#eef6ff;
  --qa-muted:#9eb2c8;
  --qa-primary:#62a8ff;
  --qa-primary-strong:#91c4ff;
  --qa-cyan:#37d2df;
  --qa-success:#55d696;
  --qa-danger:#ff7d7d;
  --qa-warning:#f2b85d;
  --qa-shadow:0 14px 38px rgba(0,0,0,.30);
}

*{letter-spacing:0 !important;}

html,
body,
.layout section{
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb,var(--qa-primary) 10%,transparent), transparent 34%),
    var(--qa-bg) !important;
  color:var(--qa-text) !important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif !important;
}

body,
header,
nav,
.layout section,
.panel,
.stats div,
table,
input,
textarea,
select,
button,
.modal-box{
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}

header{
  height:64px !important;
  background:var(--qa-surface) !important;
  color:var(--qa-text) !important;
  border-bottom:1px solid var(--qa-line) !important;
  box-shadow:0 6px 22px rgba(20,50,82,.05) !important;
  padding:0 28px !important;
}

.logo{
  color:var(--qa-primary) !important;
  font-size:22px !important;
  font-weight:850 !important;
}

.logo::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:9px;
  border-radius:3px;
  background:linear-gradient(135deg,var(--qa-primary),var(--qa-cyan));
  box-shadow:0 0 0 5px color-mix(in srgb,var(--qa-primary) 10%,transparent);
}

header a{
  color:var(--qa-muted) !important;
  text-decoration:none !important;
  padding:8px 10px;
  border-radius:8px;
}

header a:hover{
  color:var(--qa-primary) !important;
  background:color-mix(in srgb,var(--qa-primary) 9%,transparent);
}

.layout{
  min-height:calc(100vh - 64px) !important;
}

.layout nav{
  width:236px !important;
  background:var(--qa-side) !important;
  border-right:1px solid var(--qa-line) !important;
  padding:18px 14px !important;
}

.layout nav a{
  color:var(--qa-muted) !important;
  border-radius:8px !important;
  margin-bottom:4px !important;
  padding:12px 13px !important;
  font-size:14px;
}

.layout nav a:hover{
  color:var(--qa-primary) !important;
  background:color-mix(in srgb,var(--qa-primary) 10%,transparent) !important;
}

.layout section{
  padding:30px clamp(20px,4vw,46px) !important;
}

.layout section h1{
  max-width:1280px !important;
  margin:0 auto 22px !important;
  color:var(--qa-text) !important;
  font-size:28px !important;
  line-height:1.2;
}

.panel,
.stats div,
.login-box,
.modal-box{
  background:var(--qa-surface) !important;
  color:var(--qa-text) !important;
  border:1px solid var(--qa-line) !important;
  border-radius:8px !important;
  box-shadow:var(--qa-shadow) !important;
}

.panel{
  max-width:1280px !important;
  padding:22px !important;
}

.panel h2,
.panel h3{
  color:var(--qa-text) !important;
  margin-top:0 !important;
}

.stats{
  max-width:1280px;
  margin:0 auto 22px;
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px !important;
}

.stats div{
  width:auto !important;
  padding:20px !important;
}

.stats strong{
  color:var(--qa-primary) !important;
  font-size:32px !important;
}

input,
textarea,
select{
  background:var(--qa-surface-2) !important;
  color:var(--qa-text) !important;
  border:1px solid var(--qa-line) !important;
  border-radius:8px !important;
  box-shadow:none !important;
}

input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:var(--qa-primary) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--qa-primary) 14%,transparent) !important;
}

button{
  background:linear-gradient(135deg,var(--qa-primary),var(--qa-cyan)) !important;
  color:#fff !important;
  border:1px solid color-mix(in srgb,var(--qa-primary) 24%,#fff) !important;
  border-radius:8px !important;
  padding:10px 16px !important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--qa-primary) 18%,transparent) !important;
  font-weight:750 !important;
}

button:hover{
  background:linear-gradient(135deg,var(--qa-primary-strong),var(--qa-primary)) !important;
  transform:translateY(-1px);
}

button:disabled{
  opacity:.48;
  cursor:not-allowed;
  transform:none;
}

table{
  width:100% !important;
  background:var(--qa-surface) !important;
  color:var(--qa-text) !important;
  border:1px solid var(--qa-line) !important;
  border-radius:8px !important;
  overflow:hidden;
  border-collapse:separate !important;
  border-spacing:0 !important;
  box-shadow:none !important;
}

th{
  background:var(--qa-surface-2) !important;
  color:var(--qa-muted) !important;
  font-size:13px;
  font-weight:800;
  text-align:left;
}

td,
th{
  border-bottom:1px solid var(--qa-line) !important;
  color:var(--qa-text) !important;
  padding:13px 12px !important;
}

tr:last-child td{
  border-bottom:0 !important;
}

tr:hover td{
  background:color-mix(in srgb,var(--qa-primary) 5%,transparent) !important;
}

.muted,
.price-help,
.panel p,
.empty-note{
  color:var(--qa-muted) !important;
}

.card-status,
.badge,
.product-tag{
  border-radius:999px !important;
}

.admin-toast,
#toast,
.toast{
  background:var(--qa-surface) !important;
  color:var(--qa-text) !important;
  border:1px solid var(--qa-line-strong) !important;
  border-radius:8px !important;
  box-shadow:var(--qa-shadow) !important;
}

.modal{
  background:rgba(7,17,29,.48) !important;
  backdrop-filter:blur(8px);
}

.modal-box{
  max-height:88vh;
  overflow:auto;
}

.theme-toggle{
  border-radius:8px !important;
  background:var(--qa-surface) !important;
  color:var(--qa-text) !important;
  border:1px solid var(--qa-line) !important;
  box-shadow:var(--qa-shadow) !important;
}

@media(max-width:900px){
  header{
    height:auto !important;
    min-height:60px;
    padding:12px 18px !important;
    gap:10px;
  }
  .layout{
    display:block !important;
  }
  .layout nav{
    width:100% !important;
    min-height:auto !important;
    display:flex;
    overflow-x:auto;
    gap:6px;
  }
  .layout nav a{
    white-space:nowrap;
  }
  .layout section{
    padding:20px 14px !important;
  }
}