* {
  box-sizing: border-box;
}

:root {
  --q-primary: #D48600;
  --q-primary-dark: #B86F00;
  --q-primary-soft: #FFF3DD;

  --q-brown: #6B2D12;
  --q-brown-deep: #4F210D;
  --q-brown-soft: #F3E5D9;

  --q-cream: #F7F1E8;
  --q-cream-2: #FBF7F1;
  --q-cream-3: #FFFDFC;

  --q-gold-soft: #E9D7B8;

  --q-white: #FFFFFF;

  --q-text: #333333;
  --q-muted: #7D6A5F;
  --q-muted-2: #9B897D;

  --q-border: #E7D8C2;
  --q-border-soft: rgba(231, 216, 194, .65);

  --q-success: #2F7D32;
  --q-success-soft: #EAF6EA;

  --q-danger: #B42318;
  --q-danger-soft: #FFF0EF;

  --q-warning: #B86F00;
  --q-warning-soft: #FFF8E8;

  --q-info: #4D6FA8;
  --q-info-soft: #EEF4FF;

  --q-shadow:
    0 14px 35px
    rgba(107, 45, 18, .075);

  --q-shadow-soft:
    0 6px 20px
    rgba(107, 45, 18, .055);

  --q-shadow-hover:
    0 16px 36px
    rgba(107, 45, 18, .11);

  --q-radius-sm: 10px;
  --q-radius-md: 14px;
  --q-radius-lg: 18px;
  --q-radius-xl: 24px;

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

  color:
    var(--q-text);

  background:
    var(--q-cream);
}

html {
  scroll-behavior: smooth;
}

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

  background:
    linear-gradient(
      180deg,
      #FBF7F1 0%,
      #F7F1E8 100%
    );

  color:
    var(--q-text);

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}

button,
a,
.stat,
.quick-card,
.order-card,
.product-admin-card,
.panel {
  -webkit-touch-callout: none;
}

a {
  color: inherit;
}

[hidden] {
  display:
    none !important;
}

/* =====================================================
   PAGE APP SHELL
===================================================== */

body {
  overflow-x: hidden;
}

main,
.container {
  position: relative;
}

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

  margin:
    auto;

  padding:
    24px 0 55px;
}

/* =====================================================
   HEADER
===================================================== */

.topbar {
  background:
    rgba(
      255,
      255,
      255,
      .94
    );

  border-bottom:
    1px solid
    rgba(
      231,
      216,
      194,
      .85
    );

  padding:
    10px 18px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    15px;

  position:
    sticky;

  top:
    0;

  z-index:
    100;

  backdrop-filter:
    blur(16px);

  box-shadow:
    0 4px 18px
    rgba(
      107,
      45,
      18,
      .035
    );
}

.brand {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;
}

.logo-image {
  width:
    116px;

  height:
    auto;

  display:
    block;

  object-fit:
    contain;
}

.brand-text {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}

.brand-text strong {
  font-size:
    19px;

  color:
    var(--q-brown);

  font-weight:
    800;

  white-space:
    nowrap;
}

.brand-text span {
  color:
    var(--q-muted);

  font-size:
    11px;

  white-space:
    nowrap;
}

.top-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-shrink:
    0;
}

.admin-user {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--q-brown);

  font-weight:
    700;

  white-space:
    nowrap;
}

.admin-user-icon {
  width:
    37px;

  height:
    37px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    linear-gradient(
      135deg,
      var(--q-cream),
      var(--q-primary-soft)
    );

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

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.75);
}

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

.primary,
.secondary,
.icon-btn {
  border-radius:
    var(--q-radius-md);

  padding:
    11px 15px;

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

  min-height:
    42px;

  position:
    relative;

  overflow:
    hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.primary {
  background:
    linear-gradient(
      135deg,
      var(--q-primary),
      #DE940E
    );

  color:
    white;

  border-color:
    var(--q-primary);

  font-weight:
    800;

  box-shadow:
    0 6px 16px
    rgba(
      212,
      134,
      0,
      .18
    );
}

.primary::after {
  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.18) 45%,
      transparent 70%
    );

  transform:
    translateX(-120%);

  transition:
    transform .45s ease;
}

.primary:hover::after {
  transform:
    translateX(120%);
}

.primary:hover {
  background:
    linear-gradient(
      135deg,
      var(--q-primary-dark),
      #C57B06
    );

  transform:
    translateY(-1px);

  box-shadow:
    0 9px 22px
    rgba(
      212,
      134,
      0,
      .22
    );
}

.primary:active,
.secondary:active,
.icon-btn:active,
.stat:active,
.quick-card:active {
  transform:
    scale(.98);
}

.secondary {
  background:
    rgba(
      255,
      255,
      255,
      .94
    );

  color:
    var(--q-brown);

  transition:
    .18s;
}

.secondary:hover {
  border-color:
    var(--q-primary);

  color:
    var(--q-primary);

  background:
    var(--q-primary-soft);
}

.full {
  width:
    100%;
}

/* =====================================================
   LOGIN
===================================================== */

.login-screen {
  min-height:
    78vh;

  display:
    grid;

  place-items:
    center;

  padding:
    18px 0;
}

.login-card {
  width:
    min(
      450px,
      100%
    );

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

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

  border-radius:
    var(--q-radius-xl);

  padding:
    32px;

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

  text-align:
    right;

  animation:
    qFadeUp .45s ease both;
}

.login-logo {
  text-align:
    center;

  margin-bottom:
    7px;
}

.login-logo img {
  width:
    145px;

  max-width:
    55%;

  height:
    auto;

  filter:
    drop-shadow(
      0 5px 12px
      rgba(107,45,18,.08)
    );
}

.login-kicker {
  display:
    block;

  text-align:
    center;

  color:
    var(--q-primary);

  font-size:
    12px;

  font-weight:
    800;

  margin-bottom:
    8px;

  letter-spacing:
    .2px;
}

.login-card h1 {
  text-align:
    center;

  margin:
    0 0 8px;

  color:
    var(--q-brown);

  font-size:
    30px;
}

.login-card > p {
  text-align:
    center;

  color:
    var(--q-muted);

  margin:
    0 0 24px;

  line-height:
    1.8;
}

.login-card label,
.form-grid label {
  display:
    block;

  font-weight:
    700;

  font-size:
    14px;

  margin-bottom:
    14px;

  color:
    var(--q-brown-deep);
}

.login-card input,
.form-grid input,
.form-grid textarea,
.form-grid select,
.toolbar input,
.toolbar select,
.modal-box input,
.modal-box select,
.modal-box textarea {
  width:
    100%;

  margin-top:
    7px;

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

  border-radius:
    var(--q-radius-md);

  background:
    white;

  padding:
    13px;

  color:
    var(--q-text);

  outline:
    none;

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

  min-height:
    44px;
}

.login-card input:focus,
.form-grid input:focus,
.form-grid textarea:focus,
.form-grid select:focus,
.toolbar input:focus,
.toolbar select:focus,
.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus {
  border-color:
    var(--q-primary);

  box-shadow:
    0 0 0 4px
    rgba(
      212,
      134,
      0,
      .09
    );
}

.form-grid textarea {
  min-height:
    90px;

  resize:
    vertical;
}

.message {
  min-height:
    22px;

  color:
    var(--q-danger);

  line-height:
    1.7;
}

.message.success {
  color:
    var(--q-success);
}

/* =====================================================
   PAGE HEADER
===================================================== */

.page-head,
.section-title {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    15px;

  margin-bottom:
    18px;
}

.page-kicker,
.section-kicker {
  display:
    block;

  color:
    var(--q-primary);

  font-size:
    12px;

  font-weight:
    800;

  margin-bottom:
    5px;

  letter-spacing:
    .15px;
}

.page-head h1,
.section-title h2 {
  margin:
    0;

  color:
    var(--q-brown);

  font-weight:
    850;
}

.page-head p,
.section-title p {
  margin:
    5px 0 0;

  color:
    var(--q-muted);

  line-height:
    1.7;
}

/* =====================================================
   TABS
===================================================== */

.tabs {
  display:
    flex;

  gap:
    7px;

  margin-bottom:
    20px;

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

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

  border-radius:
    var(--q-radius-lg);

  padding:
    6px;

  box-shadow:
    var(--q-shadow-soft);

  overflow-x:
    auto;

  scrollbar-width:
    none;
}

.tabs::-webkit-scrollbar {
  display:
    none;
}

.tab {
  border:
    0;

  background:
    transparent;

  padding:
    11px 16px;

  border-radius:
    12px;

  color:
    var(--q-muted);

  white-space:
    nowrap;

  font-weight:
    700;

  transition:
    .18s;

  min-height:
    42px;
}

.tab:hover {
  color:
    var(--q-brown);

  background:
    var(--q-cream);
}

.tab.active {
  background:
    linear-gradient(
      135deg,
      var(--q-brown),
      #7A3617
    );

  color:
    white;

  box-shadow:
    0 5px 13px
    rgba(
      107,
      45,
      18,
      .15
    );
}

/* =====================================================
   STATISTICS
===================================================== */

.stats {
  display:
    grid;

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

  gap:
    12px;
}

.stat {
  border:
    1px solid
    var(--q-border);

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #FFFDFC
    );

  border-radius:
    var(--q-radius-lg);

  padding:
    16px;

  text-align:
    center;

  color:
    var(--q-brown);

  box-shadow:
    var(--q-shadow-soft);

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

  position:
    relative;

  overflow:
    hidden;
}

.stat::before {
  content: "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    3px;

  background:
    linear-gradient(
      90deg,
      var(--q-primary),
      #F0B14A
    );

  opacity:
    .65;
}

.stat:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--q-gold-soft);

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

.stat span,
.stat b,
.stat small {
  display:
    block;
}

.stat span {
  font-size:
    24px;

  margin-bottom:
    3px;
}

.stat b {
  font-size:
    24px;

  margin:
    5px;

  color:
    var(--q-primary);

  font-weight:
    850;
}

.stat small {
  color:
    var(--q-muted);

  font-size:
    12px;
}

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

.quick-grid {
  display:
    grid;

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

  gap:
    14px;

  margin:
    20px 0 28px;
}

.quick-card {
  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #FFFDFC
    );

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

  border-radius:
    var(--q-radius-lg);

  padding:
    20px;

  text-align:
    right;

  box-shadow:
    var(--q-shadow-soft);

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

  position:
    relative;

  overflow:
    hidden;
}

.quick-card::after {
  content: "";

  position:
    absolute;

  width:
    90px;

  height:
    90px;

  left:
    -34px;

  bottom:
    -38px;

  border-radius:
    50%;

  background:
    var(--q-primary-soft);

  opacity:
    .7;

  pointer-events:
    none;
}

.quick-card:hover {
  transform:
    translateY(-3px);

  border-color:
    var(--q-primary);

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

.quick-icon {
  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      var(--q-cream),
      var(--q-primary-soft)
    );

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

  margin-bottom:
    12px;

  font-size:
    21px;

  position:
    relative;

  z-index:
    1;
}

.quick-card strong,
.quick-card > span:not(.quick-icon) {
  display:
    block;

  position:
    relative;

  z-index:
    1;
}

.quick-card strong {
  color:
    var(--q-brown);

  font-size:
    17px;
}

.quick-card > span:not(.quick-icon) {
  color:
    var(--q-muted);

  margin-top:
    7px;

  line-height:
    1.7;
}

/* =====================================================
   TOOLBAR
===================================================== */

.toolbar {
  display:
    grid;

  grid-template-columns:
    220px 1fr;

  gap:
    10px;

  margin-bottom:
    18px;

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

.toolbar.one {
  grid-template-columns:
    1fr;
}

/* =====================================================
   ORDERS
===================================================== */

.orders-list {
  display:
    grid;

  gap:
    14px;
}

.order-card {
  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #FFFDFC
    );

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

  border-radius:
    var(--q-radius-lg);

  padding:
    17px;

  box-shadow:
    var(--q-shadow-soft);

  position:
    relative;

  overflow:
    hidden;

  animation:
    qFadeUp .32s ease both;

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

.order-card:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--q-shadow-hover);

  border-color:
    #DFC7A6;
}

.order-card::before {
  content: "";

  position:
    absolute;

  right:
    0;

  top:
    0;

  width:
    4px;

  height:
    100%;

  background:
    var(--q-primary);

  opacity:
    .7;
}

.order-head {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

  align-items:
    flex-start;
}

.order-head strong {
  font-size:
    18px;

  color:
    var(--q-brown);

  font-weight:
    850;
}

.order-head small {
  display:
    block;

  color:
    var(--q-muted-2);

  margin-top:
    5px;
}

.badge {
  border-radius:
    30px;

  padding:
    7px 11px;

  background:
    var(--q-cream);

  white-space:
    nowrap;

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

  font-size:
    12px;

  font-weight:
    750;
}

.order-info {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    9px;

  margin:
    15px 0;

  color:
    #60483a;
}

.order-info div {
  background:
    var(--q-cream-2);

  border:
    1px solid
    var(--q-border-soft);

  border-radius:
    12px;

  padding:
    10px;

  line-height:
    1.7;
}

/* =====================================================
   ACTION GROUPS
===================================================== */

.order-actions,
.actions,
.form-actions,
.product-actions {
  display:
    flex;

  gap:
    8px;

  flex-wrap:
    wrap;
}

.order-actions > button,
.order-actions > a,
.actions > button,
.actions > a {
  flex:
    1 1
    auto;
}

.order-actions button,
.actions button,
.actions a {
  min-height:
    42px;
}

/* =====================================================
   PARTNER / STORE REQUEST UI
===================================================== */

.partner-panel,
.partner-box,
.partner-account-box {
  background:
    linear-gradient(
      145deg,
      #FFFFFF,
      #FFF9F0
    );

  border:
    1px solid
    var(--q-gold-soft);

  border-radius:
    var(--q-radius-lg);

  padding:
    16px;

  margin-top:
    14px;

  box-shadow:
    0 8px 20px
    rgba(
      212,
      134,
      0,
      .07
    );
}

.partner-account-box {
  margin:
    8px 0 17px;

  grid-column:
    1 / -1;
}

.partner-account-head h4,
.partner-panel h3,
.partner-box h3 {
  margin:
    0;

  color:
    var(--q-brown);

  font-size:
    16px;

  font-weight:
    850;
}

.partner-account-head p,
.partner-panel p,
.partner-box p {
  color:
    var(--q-muted);

  margin:
    6px 0 12px;

  line-height:
    1.7;
}

.partner-state {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  border-radius:
    30px;

  padding:
    6px 10px;

  font-size:
    12px;

  font-weight:
    800;
}

.partner-state.waiting {
  background:
    var(--q-warning-soft);

  color:
    var(--q-warning);
}

.partner-state.accepted {
  background:
    var(--q-success-soft);

  color:
    var(--q-success);
}

.partner-state.rejected {
  background:
    var(--q-danger-soft);

  color:
    var(--q-danger);
}

.partner-state.ready {
  background:
    var(--q-info-soft);

  color:
    var(--q-info);
}

.partner-payment {
  display:
    flex;

  gap:
    8px;

  flex-wrap:
    wrap;

  margin-top:
    10px;
}

.partner-payment-option {
  flex:
    1 1 120px;

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

  background:
    white;

  border-radius:
    13px;

  padding:
    11px;

  text-align:
    center;

  font-weight:
    800;

  color:
    var(--q-brown);

  transition:
    .18s;
}

.partner-payment-option:hover {
  border-color:
    var(--q-primary);

  background:
    var(--q-primary-soft);
}

.partner-request-card {
  position:
    relative;

  border:
    1px solid
    var(--q-gold-soft);

  background:
    linear-gradient(
      160deg,
      #FFFDF9,
      #FFF7E8
    );

  border-radius:
    var(--q-radius-lg);

  padding:
    15px;

  animation:
    qPartnerPulse 2s ease-in-out infinite;
}

.partner-request-card::before {
  content:
    "🛍️";

  position:
    absolute;

  left:
    14px;

  top:
    14px;

  width:
    38px;

  height:
    38px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--q-primary-soft);

  border:
    1px solid
    var(--q-gold-soft);
}

.partner-request-card h4 {
  margin:
    0 52px 7px 0;

  color:
    var(--q-brown);

  font-size:
    16px;
}

.partner-request-card ul {
  margin:
    10px 0;

  padding-right:
    20px;

  color:
    #60483a;

  line-height:
    1.9;
}

.partner-receipt-btn {
  width:
    100%;

  margin-top:
    9px;
}

/* =====================================================
   PRODUCT FORM
===================================================== */

.panel {
  background:
    rgba(
      255,
      255,
      255,
      .96
    );

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

  border-radius:
    var(--q-radius-lg);

  padding:
    20px;

  margin-bottom:
    18px;

  box-shadow:
    var(--q-shadow-soft);

  animation:
    qFadeUp .3s ease both;
}

.panel-head {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    15px;
}

.panel-head h3 {
  margin:
    0;

  color:
    var(--q-brown);

  font-weight:
    850;
}

.panel-head p {
  margin:
    5px 0 0;

  color:
    var(--q-muted);

  font-size:
    13px;

  line-height:
    1.7;
}

.icon-btn {
  border:
    1px solid
    var(--q-border);

  background:
    linear-gradient(
      145deg,
      var(--q-cream),
      var(--q-primary-soft)
    );

  color:
    var(--q-brown);

  font-size:
    24px;

  width:
    42px;

  height:
    42px;

  padding:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;
}

.icon-btn:hover {
  color:
    var(--q-danger);

  border-color:
    #F2B8B4;

  background:
    var(--q-danger-soft);
}

.form-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    0 14px;
}

.form-grid .full {
  grid-column:
    1 / -1;
}

.private-box {
  background:
    linear-gradient(
      145deg,
      #FFFDF8,
      #FFF8E8
    );

  border:
    1px solid
    var(--q-gold-soft);

  border-radius:
    var(--q-radius-md);

  padding:
    15px;

  margin:
    8px 0 15px;
}

.private-title {
  color:
    var(--q-brown);

  font-weight:
    800;

  margin-bottom:
    5px;
}

.private-box > span {
  display:
    block;

  color:
    var(--q-muted);

  font-size:
    13px;

  margin:
    5px 0 12px;
}

.check {
  display:
    flex !important;

  align-items:
    center;

  gap:
    8px;

  font-weight:
    700;

  color:
    var(--q-brown);

  background:
    var(--q-cream-2);

  border:
    1px solid
    var(--q-border-soft);

  padding:
    10px 12px;

  border-radius:
    12px;
}

.check input {
  width:
    auto !important;

  margin:
    0 !important;
}

/* =====================================================
   PRODUCTS
===================================================== */

.products-list {
  display:
    grid;

  gap:
    13px;
}

.product-admin-card {
  display:
    grid;

  grid-template-columns:
    130px 1fr;

  gap:
    17px;

  background:
    white;

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

  border-radius:
    var(--q-radius-lg);

  padding:
    15px;

  box-shadow:
    var(--q-shadow-soft);

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

.product-admin-card:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--q-shadow-hover);

  border-color:
    var(--q-gold-soft);
}

.product-thumb {
  height:
    130px;

  border-radius:
    var(--q-radius-md);

  overflow:
    hidden;

  background:
    linear-gradient(
      145deg,
      var(--q-cream),
      var(--q-primary-soft)
    );

  display:
    grid;

  place-items:
    center;

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

.product-thumb img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.no-image {
  font-size:
    35px;
}

.product-title-row {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  align-items:
    center;
}

.product-title-row h3 {
  margin:
    0;

  color:
    var(--q-brown);

  font-size:
    17px;
}

.product-admin-info > p {
  color:
    var(--q-muted);

  margin:
    7px 0;

  line-height:
    1.7;
}

.egp-price {
  font-size:
    19px;

  color:
    var(--q-primary);

  font-weight:
    850;
}

.product-status {
  padding:
    5px 9px;

  border-radius:
    15px;

  font-size:
    12px;

  font-weight:
    800;
}

.is-active {
  background:
    var(--q-success-soft);

  color:
    var(--q-success);
}

.is-off {
  background:
    var(--q-danger-soft);

  color:
    var(--q-danger);
}

.source-admin-box {
  background:
    linear-gradient(
      145deg,
      #FFFDF8,
      #FFF8E8
    );

  border:
    1px solid
    var(--q-gold-soft);

  border-radius:
    12px;

  padding:
    11px;

  margin:
    12px 0;

  line-height:
    1.9;
}

.source-admin-box.compact {
  font-size:
    14px;
}

/* =====================================================
   IMAGE PREVIEW
===================================================== */

.image-preview {
  margin:
    10px 0 18px;

  background:
    var(--q-cream-2);

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

  border-radius:
    14px;

  padding:
    12px;

  text-align:
    center;
}

.image-preview img {
  max-width:
    100%;

  max-height:
    260px;

  border-radius:
    10px;

  object-fit:
    contain;
}

.form-grid small {
  display:
    block;

  margin-top:
    6px;

  color:
    var(--q-muted);

  line-height:
    1.7;
}

/* =====================================================
   MODAL
===================================================== */

.modal {
  position:
    fixed;

  inset:
    0;

  background:
    rgba(
      63,
      24,
      8,
      .62
    );

  z-index:
    1000;

  padding:
    14px;

  overflow:
    auto;

  backdrop-filter:
    blur(5px);

  animation:
    qModalBg .2s ease both;
}

.modal-box {
  width:
    min(
      760px,
      100%
    );

  margin:
    2vh auto;

  background:
    linear-gradient(
      180deg,
      #FFFFFF,
      #FFFDFC
    );

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

  border-radius:
    var(--q-radius-xl);

  padding:
    23px;

  position:
    relative;

  box-shadow:
    0 22px 60px
    rgba(
      50,
      20,
      5,
      .18
    );

  animation:
    qModalIn .25s ease both;
}

.modal-brand {
  text-align:
    center;

  margin-bottom:
    8px;
}

.modal-brand img {
  width:
    105px;

  max-width:
    35%;
}

.modal-box h2 {
  color:
    var(--q-brown);

  margin-top:
    10px;
}

.close {
  position:
    absolute;

  left:
    13px;

  top:
    10px;

  border:
    0;

  background:
    var(--q-cream);

  color:
    var(--q-brown);

  font-size:
    25px;

  width:
    38px;

  height:
    38px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  transition:
    .18s;
}

.close:hover {
  background:
    var(--q-danger-soft);

  color:
    var(--q-danger);

  transform:
    rotate(90deg);
}

.detail-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    9px;
}

.detail-grid > div {
  background:
    var(--q-cream-2);

  padding:
    12px;

  border-radius:
    12px;

  border:
    1px solid
    var(--q-border-soft);
}

.detail-grid .full {
  grid-column:
    1 / -1;
}

.detail-grid b,
.detail-grid span {
  display:
    block;
}

.detail-grid span {
  margin-top:
    5px;

  line-height:
    1.7;
}

.item-row {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    13px 0;

  border-bottom:
    1px solid
    #eee;
}

.order-source-box {
  margin-top:
    8px;

  background:
    var(--q-warning-soft);

  border:
    1px solid
    var(--q-gold-soft);

  border-radius:
    10px;

  padding:
    9px;

  line-height:
    1.8;

  font-size:
    13px;
}

.summary-box {
  margin:
    18px 0;

  padding:
    15px;

  background:
    var(--q-cream);

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

  border-radius:
    14px;

  display:
    grid;

  gap:
    8px;
}

.full-btn {
  width:
    100%;

  margin-top:
    10px;
}

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

.empty,
.loading,
.error {
  background:
    rgba(
      255,
      255,
      255,
      .92
    );

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

  border-radius:
    var(--q-radius-lg);

  padding:
    30px;

  text-align:
    center;

  line-height:
    1.8;

  color:
    var(--q-muted);
}

.loading {
  animation:
    qPulseSoft 1.4s ease-in-out infinite;
}

.error {
  color:
    var(--q-danger);

  background:
    var(--q-danger-soft);

  border-color:
    #F2B8B4;
}

/* =====================================================
   NOTIFICATIONS
===================================================== */

.notification-btn {
  position:
    relative;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    13px;

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

  color:
    var(--q-brown);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    20px;

  cursor:
    pointer;

  transition:
    .2s;

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

.notification-btn:hover {
  border-color:
    var(--q-primary);

  transform:
    translateY(-1px);

  background:
    var(--q-primary-soft);
}

.notification-count {
  position:
    absolute;

  top:
    -5px;

  right:
    -5px;

  min-width:
    19px;

  height:
    19px;

  padding:
    0 5px;

  border-radius:
    20px;

  background:
    var(--q-danger);

  color:
    #fff;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    11px;

  font-weight:
    800;

  border:
    2px solid
    #fff;

  animation:
    qBadgePop .3s ease;
}

.notification-count:empty {
  display:
    none;
}

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

.assignment-current {
  margin-top:
    10px;

  padding:
    15px;

  border-radius:
    var(--q-radius-md);

  background:
    var(--q-warning-soft);

  border:
    1px solid
    var(--q-gold-soft);

  color:
    var(--q-brown);

  line-height:
    1.9;

  position:
    relative;
}

.assignment-current.waiting {
  background:
    linear-gradient(
      145deg,
      #FFF9EC,
      #FFF5DE
    );

  animation:
    qWaitingPulse 1.8s ease-in-out infinite;
}

.assignment-current.accepted {
  background:
    var(--q-success-soft);

  border-color:
    #B8DFBA;

  color:
    var(--q-success);
}

.assignment-current strong {
  font-weight:
    800;
}

.assignment-status {
  margin-top:
    9px;

  padding:
    10px;

  border-radius:
    10px;

  line-height:
    1.8;
}

.assignment-status.waiting {
  background:
    var(--q-warning-soft);

  color:
    var(--q-brown);
}

.assignment-status.accepted {
  background:
    var(--q-success-soft);

  color:
    var(--q-success);
}

.assignment-status.rejected {
  background:
    var(--q-danger-soft);

  color:
    var(--q-danger);
}

/* =====================================================
   COURIER MANAGEMENT
===================================================== */

.courier-blocked {
  background:
    var(--q-danger-soft);

  border-color:
    #F2B8B4;
}

.courier-removed {
  opacity:
    .65;

  filter:
    grayscale(.25);
}

.courier-state {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  margin-top:
    6px;

  padding:
    5px 9px;

  border-radius:
    20px;

  font-size:
    12px;

  font-weight:
    800;
}

.courier-state.active {
  background:
    var(--q-success-soft);

  color:
    var(--q-success);
}

.courier-state.blocked {
  background:
    var(--q-danger-soft);

  color:
    var(--q-danger);
}

.courier-state.removed {
  background:
    #EEE;

  color:
    #666;
}

/* =====================================================
   ASSIGNMENT MESSAGE
===================================================== */

.assignment-msg-error {
  color:
    var(--q-danger);

  background:
    var(--q-danger-soft);

  border:
    1px solid
    #F2B8B4;

  border-radius:
    10px;

  padding:
    10px;

  margin-top:
    10px;
}

.assignment-msg-success {
  color:
    var(--q-success);

  background:
    var(--q-success-soft);

  border:
    1px solid
    #B8DFBA;

  border-radius:
    10px;

  padding:
    10px;

  margin-top:
    10px;
}

/* =====================================================
   DISABLED
===================================================== */

button:disabled {
  opacity:
    .55;

  cursor:
    not-allowed;

  transform:
    none !important;

  box-shadow:
    none !important;
}

/* =====================================================
   MOBILE APP FEEL
===================================================== */

@media (min-width: 761px) {

  body {
    padding-bottom:
      20px;
  }

  .container {
    max-width:
      1080px;
  }

}

@media (max-width: 900px) {

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

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

}

@media (max-width: 760px) {

  body {
    background:
      linear-gradient(
        180deg,
        #FBF7F1,
        #F7F1E8
      );
  }

  .topbar,
  .page-head,
  .section-title {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .topbar {
    padding:
      10px 14px;
  }

  .top-actions {
    width:
      100%;

    justify-content:
      space-between;
  }

  .brand {
    width:
      100%;
  }

  .brand-text {
    flex:
      1;
  }

  .brand-text strong {
    font-size:
      18px;
  }

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

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

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

  .form-grid .full {
    grid-column:
      auto;
  }

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

  .detail-grid .full {
    grid-column:
      auto;
  }

  .order-info {
    grid-template-columns:
      1fr;
  }

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

  .product-admin-card {
    grid-template-columns:
      1fr;
  }

  .product-thumb {
    height:
      180px;
  }

  .tabs {
    overflow:
      auto;

    width:
      100%;

    border-radius:
      15px;
  }

  .tab {
    white-space:
      nowrap;
  }

  .product-actions {
    flex-wrap:
      wrap;
  }

  .logo-image {
    width:
      105px;
  }

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

    padding:
      17px 0 35px;
  }

  .panel {
    padding:
      16px;

    border-radius:
      17px;
  }

  .order-card {
    padding:
      15px;

    border-radius:
      17px;
  }

  .page-head h1 {
    font-size:
      27px;
  }

  .section-title h2 {
    font-size:
      22px;
  }

  .order-head {
    gap:
      9px;
  }

  .order-head strong {
    font-size:
      17px;
  }

  .badge {
    padding:
      6px 9px;

    font-size:
      11px;
  }

  .primary,
  .secondary {
    min-height:
      44px;
  }

  .modal {
    padding:
      8px;
  }

  .modal-box {
    margin:
      1vh auto;

    padding:
      19px;

    border-radius:
      20px;
  }

  .partner-panel,
  .partner-box,
  .partner-account-box {
    padding:
      14px;
  }

}

@media (max-width: 520px) {

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

  .topbar {
    padding:
      10px 11px;
  }

  .login-card {
    padding:
      24px 18px;

    border-radius:
      20px;
  }

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

    gap:
      8px;
  }

  .stat {
    padding:
      13px 8px;

    border-radius:
      15px;
  }

  .stat span {
    font-size:
      20px;
  }

  .stat b {
    font-size:
      21px;
  }

  .stat small {
    font-size:
      11px;
  }

  .page-head h1 {
    font-size:
      24px;
  }

  .section-title h2 {
    font-size:
      21px;
  }

  .quick-card {
    padding:
      16px;

    border-radius:
      15px;
  }

  .order-info div,
  .detail-grid > div {
    padding:
      10px;
  }

  .order-actions,
  .actions,
  .form-actions,
  .product-actions {
    flex-direction:
      column;
  }

  .order-actions > button,
  .order-actions > a,
  .actions > button,
  .actions > a {
    width:
      100%;

    flex:
      1 1 auto;
  }

  .partner-payment {
    flex-direction:
      column;
  }

  .partner-payment-option {
    width:
      100%;
  }

  .notification-btn {
    width:
      40px;

    height:
      40px;
  }

  .admin-user-icon {
    width:
      35px;

    height:
      35px;
  }

}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes qFadeUp {
  from {
    opacity:
      0;

    transform:
      translateY(10px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}

@keyframes qModalBg {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}

@keyframes qModalIn {
  from {
    opacity:
      0;

    transform:
      translateY(16px)
      scale(.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes qPulseSoft {
  0%,
  100% {
    opacity:
      .65;
  }

  50% {
    opacity:
      1;
  }
}

@keyframes qWaitingPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 0
      rgba(
        212,
        134,
        0,
        .08
      );
  }

  50% {
    box-shadow:
      0 0 0 8px
      rgba(
        212,
        134,
        0,
        .04
      );
  }
}

@keyframes qPartnerPulse {
  0%,
  100% {
    box-shadow:
      0 8px 20px
      rgba(
        212,
        134,
        0,
        .06
      );
  }

  50% {
    box-shadow:
      0 10px 27px
      rgba(
        212,
        134,
        0,
        .13
      );
  }
}

@keyframes qBadgePop {
  0% {
    transform:
      scale(.5);

    opacity:
      0;
  }

  70% {
    transform:
      scale(1.12);

    opacity:
      1;
  }

  100% {
    transform:
      scale(1);
  }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

}