:root{--paper:#f0f4f1;--ink:#163f35;--accent:#b76735;--muted:#5d756b;--line:#dbe6de}
body{background:radial-gradient(ellipse at top right,#e0eee4,transparent 55%),var(--paper);line-height:1.65}
.app{max-width:1000px;padding-bottom:108px}.app>header{height:108px}header h1{letter-spacing:-1px;font-size:34px}header .eyebrow{letter-spacing:1px}.profile{border:1px solid var(--line);border-radius:50%}
.hero{padding:28px;background:linear-gradient(120deg,#12372e,#245b44 70%,#396950);border:1px solid #fff6}.hero:after{font-size:190px;left:22px;bottom:-58px;pointer-events:none}.hero h2{font-size:26px}.stat{backdrop-filter:blur(8px);background:#ffffff14}.stat b{font-size:29px;font-variant-numeric:tabular-nums}
.card{border-color:#dfe9e2;box-shadow:0 5px 24px #1a413006}.order-card{cursor:pointer;transition:box-shadow .15s,transform .15s}.order-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px #1a413012}.order-card h3 .sku{display:block;margin-top:4px}.order-card .money{display:block;font-size:18px;margin-top:9px}.pill{white-space:normal;max-width:145px;text-align:center}.review-tag{grid-column:1/-1;color:#9e4d2e;border-top:1px dashed #e1dfd3;padding-top:7px}
.review-alert{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;text-align:right;background:#fff5df;border:1px solid #e7d2a3;color:#78501d;padding:15px 18px;border-radius:18px;margin:18px 0}.review-alert span{font-size:12px}.review-queue{margin-top:18px}nav{width:min(1000px,100%);height:82px}nav button{min-width:62px}nav button.active{background:#e9f1eb;border-radius:18px;margin:6px}nav i{line-height:1}
.form input,.form select,.form textarea{font-size:14px}.form label{font-weight:500}.form select:focus{border-color:#719f85;box-shadow:0 0 0 3px #719f8522}.form textarea{line-height:1.9}button:disabled{opacity:.5;cursor:wait}.form-error{color:#a42f29;font-size:13px;white-space:pre-wrap}.order-editor fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:18px}.editor-head h2{font-size:27px;margin:3px 0}.editor-head p{margin:0 0 20px;color:var(--muted)}.editor-section{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px;display:grid;gap:14px}.editor-section h3{display:flex;align-items:center;gap:10px;margin:0 0 5px;font-size:17px}.editor-section h3>span{display:grid;place-items:center;width:30px;height:30px;background:#e9f2ec;color:#327450;border-radius:10px;font-size:14px}.section-help{font-size:12px;color:var(--muted);line-height:1.9;margin:0}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.edit-line{background:#f8faf8;border:1px solid #e0e8e2;border-radius:17px;padding:15px;margin:12px 0;display:grid;gap:11px}.line-top{display:flex;justify-content:space-between;align-items:center}.line-caption{font-size:11px;color:var(--muted)}.remove-line{padding:4px 9px;background:#fbecea;color:#ad4d41;border-radius:8px;font-size:11px}.line-controls{display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:end}.gift-toggle{display:flex!important;align-items:center;gap:8px!important;height:48px;cursor:pointer}.gift-toggle input{width:20px!important;height:20px;accent-color:#367756}.gift-line{background:#f7f2e6;border-color:#dcca9b}.line-price{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-top:1px dashed #d7e1d9;padding-top:11px}.line-price small,.price-summary small{font-size:10px;font-weight:normal}.line-price span{color:var(--muted)}.match-hint{font-size:12px;color:#925d22}.editor-add{display:flex;gap:10px;flex-wrap:wrap}.editor-add button{padding:11px 15px;border-radius:12px;background:#e9f1eb;color:var(--ink);border:1px dashed #b7cfc0}.price-summary{border:1px solid #c5dccc;background:linear-gradient(135deg,#f0f7f2,#fcfdf9);border-radius:18px;padding:18px;display:grid;gap:10px;transition:opacity .15s}.price-summary>div{display:flex;justify-content:space-between;gap:16px;font-size:13px}.price-summary.loading{opacity:.5}.price-summary .grand-total{border-top:1px solid #ccdecf;padding-top:12px;align-items:center;font-size:15px}.grand-total strong{font-size:24px;color:#246146;font-variant-numeric:tabular-nums}.amount-warning{font-size:12px;color:#9c482e;line-height:1.9;background:#fff3e5;padding:9px 12px;border-radius:10px;margin:5px 0}.editor-footer{display:flex;gap:10px;align-items:center}.editor-footer .primary{flex:1;padding:16px;box-shadow:0 5px 15px #173f3520}.editor-footer>button:not(.primary){padding:13px;background:#eef3ef;border-radius:12px;color:var(--muted)}
dialog{width:min(840px,calc(100% - 20px));background:#f6f8f5;padding:24px;scrollbar-width:thin}.detail>h2{font-size:26px}.detail>.price-summary{margin:20px 0}.address-text{white-space:pre-line}.items>div{gap:14px;border-bottom:1px solid #e5ece6;align-items:center}.items>div:last-child{border:0}.items b{min-width:100px;text-align:left;font-size:13px}.items small{color:var(--muted)}.gift-badge{display:inline-block;font-size:10px;font-style:normal;background:#f5e9c7;color:#8a6326;padding:3px 8px;border-radius:8px;margin-right:7px}.history{margin-top:25px;border-top:1px solid var(--line);padding-top:15px}.history summary{cursor:pointer;font-size:14px}.history article{border-right:2px solid #c6d8ca;margin:15px 3px;padding:0 14px;font-size:12px}.history small{display:block;color:var(--muted)}.history article p{margin:5px 0}.history article div{color:var(--muted)}.notice{line-height:1.85}.toolbar input{min-width:0}.stock{flex-wrap:wrap}.product{gap:10px}.product-side .money{white-space:nowrap}
@media(max-width:520px){.editor-section{padding:14px;border-radius:18px}.field-grid{grid-template-columns:1fr}.editor-head h2{font-size:23px}dialog{padding:16px;border-radius:22px}.review-alert{align-items:start;flex-direction:column;gap:3px}.price-summary{padding:14px}.grand-total strong{font-size:21px}.line-controls{grid-template-columns:85px 1fr}.hero{padding:21px}.hero h2{font-size:23px}.order-card{grid-template-columns:1fr auto}.product{grid-template-columns:1fr}.product-side{display:flex;justify-content:space-between;align-items:center}.app>header{height:91px}.items>div{font-size:13px}.actions button{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ZHIVAN PROFESSIONAL UI2 */

:root{
  --zhivan-green:#245d49;
  --zhivan-green-dark:#173d32;
  --zhivan-paper:#f5f6f3;
  --zhivan-red:#a9433e;
  --zhivan-orange:#bc712f;
  --zhivan-yellow:#a47b1b;
}

/* ---------- Hero ---------- */

.modern-hero{
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(255,255,255,.16),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #173d32 0%,
      #245d49 58%,
      #337359 100%
    );

  padding:27px;
  border-radius:30px;
  box-shadow:0 18px 45px rgba(24,61,50,.15);
}

.hero-kicker{
  display:block;
  font-size:11px;
  font-weight:600;
  color:#d8ebe3;
  margin-bottom:5px;
}

.modern-hero h2{
  font-size:27px;
  font-weight:800;
  margin:0;
}

.modern-hero p{
  max-width:520px;
  line-height:1.9;
}

.modern-hero .stat{
  background:rgba(255,255,255,.105);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px rgba(255,255,255,.05);
}

.modern-hero .stat b{
  font-size:28px;
  font-weight:800;
}

.modern-hero .urgent-stat{
  background:rgba(158,67,49,.25);
  border-color:rgba(255,222,207,.20);
}


/* ---------- Section headings ---------- */

.section-title h2{
  font-size:19px;
  font-weight:750;
}

.section-title button{
  font-weight:550;
}


/* ---------- Orders ---------- */

.order-card{
  display:block;
  position:relative;

  padding:18px 18px 16px;

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

  border:1px solid #e2e8e4;
  border-radius:21px;

  box-shadow:
    0 6px 22px rgba(26,65,48,.052);

  overflow:hidden;

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

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

  position:absolute;
  right:0;
  top:0;
  bottom:0;

  width:4px;

  background:#d7e1db;
}

.order-card.aging:before{
  background:#d8aa32;
}

.order-card.late:before{
  background:#d07a2c;
}

.order-card.critical:before{
  background:#b74740;
}

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

  box-shadow:
    0 12px 30px rgba(26,65,48,.09);
}


/* ---------- Header ---------- */

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

  gap:12px;
}

.order-identity{
  min-width:0;
}

.order-card-head h3{
  margin:6px 0 2px;

  font-size:17px;
  font-weight:750;

  line-height:1.7;
}

.order-card-head .sku{
  margin-top:1px;
}


/* ---------- Main order info ---------- */

.order-card-main{
  display:flex;

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

  gap:14px;

  margin-top:13px;
  padding-top:12px;

  border-top:1px solid #edf1ee;
}

.order-place{
  display:grid;
  gap:2px;

  min-width:0;
}

.order-place b{
  font-size:13px;
  font-weight:600;

  color:#4b5751;
}

.order-place small{
  direction:ltr;

  text-align:right;

  color:#929d98;

  font-size:11px;
}

.order-card-main .money{
  flex:0 0 auto;

  font-size:16px;
  font-weight:750;

  color:#245d49;

  white-space:nowrap;
}


/* ---------- Dates ---------- */

.order-timing{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;

  margin-top:11px;
}

.order-timing.single-time{
  grid-template-columns:1fr;
}

.order-timing span{
  padding:9px 10px;

  background:#f6f8f6;

  border:1px solid #ebf0ec;
  border-radius:12px;
}

.order-timing small,
.order-dates small{
  display:block;

  margin-bottom:3px;

  color:#89958f;

  font-size:10px;
  font-weight:450;
}

.order-timing b{
  display:block;

  color:#4e5b55;

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

  line-height:1.6;
}

.shipped-times span:last-child b{
  color:#267052;
}


/* ---------- Urgency ---------- */

.age-label{
  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:4px 9px;

  border-radius:999px;

  background:#edf4f0;

  color:#577367;

  font-size:10px;
  font-weight:650;
}

.age-label i{
  width:6px;
  height:6px;

  border-radius:50%;

  background:currentColor;
}

.age-label.aging{
  background:#fff7db;
  color:#987118;
}

.age-label.late{
  background:#fff0df;
  color:#a25d20;
}

.age-label.critical{
  background:#ffefee;
  color:#a6403a;
  font-weight:750;
}


/* ---------- Status ---------- */

.pill{
  font-weight:600;
  line-height:1.55;
}

.review-tag{
  display:block;

  margin-top:11px;
}


/* ---------- Detail view ---------- */

.order-detail h2{
  margin:11px 0 2px;

  font-size:27px;
  font-weight:800;
}

.detail-status-row{
  display:flex;

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

  gap:8px;
}

.order-dates{
  display:grid;

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

  gap:8px;

  margin:18px 0;
}

.order-dates>div{
  padding:11px 12px;

  background:#f5f7f5;

  border:1px solid #e6ebe7;
  border-radius:14px;
}

.order-dates b{
  display:block;

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

  line-height:1.8;
}

.shipping-actor{
  margin:-7px 0 13px!important;
}


/* ---------- Actions ---------- */

.dispatch-action{
  padding:14px 20px!important;

  font-weight:750!important;

  box-shadow:
    0 7px 18px rgba(28,72,55,.15);
}


/* ---------- Alerts ---------- */

.tracking-alert{
  background:#f2f7f4;
  border-color:#cadfd2;
  color:#32614d;
}


/* ---------- Mobile ---------- */

@media(max-width:520px){

  .modern-hero{
    padding:22px 18px;
    border-radius:25px;
  }

  .modern-hero h2{
    font-size:24px;
  }

  .modern-hero .stat b{
    font-size:25px;
  }

  .order-card{
    padding:15px 15px 14px;
    border-radius:19px;
  }

  .order-card-head h3{
    font-size:16px;
  }

  .order-card-main{
    align-items:flex-end;
  }

  .order-card-main .money{
    font-size:15px;
  }

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

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

  .order-dates>div{
    display:flex;

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

    gap:12px;
  }

  .order-dates small{
    margin:0;
  }

  .detail-status-row{
    align-items:flex-start;
  }

}