.order-card { grid-column: span 3; }
.order-card textarea { width: 100%; resize: vertical; }
.order-progress {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 20px 0;
  padding: 14px;
  background: #0b1420;
  border-radius: 12px;
}
.order-step { min-width: 0; text-align: center; color: #64778f; }
.order-step span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 auto 7px;
  border: 1px solid #405069;
  border-radius: 50%;
  font-size: 12px;
}
.order-step small { display: block; color: inherit; font-size: 10px; letter-spacing: 0; }
.order-step.done, .order-step.current { color: #5edcc8; }
.order-step.current span { color: #062b29; background: #5edcc8; border-color: #5edcc8; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.order-actions .danger { color: #ffbbb8; background: #54252c; }
.order-fields { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:12px; width:100%; }
.order-fields label { margin:0; }
.workflow-overview { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; padding:14px; border:1px solid #284158; border-radius:12px; background:#0b1623; }
.workflow-overview h3 { width:100%; margin:0 0 4px; }
.workflow-overview span { padding:7px 10px; border-radius:999px; background:#17283a; color:#a9bad0; font-size:12px; }
.creator-management { display:grid; grid-template-columns:repeat(2,minmax(160px,1fr)); gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid #26364a; }
.creator-management textarea,.creator-management button { grid-column:1/-1; width:100%; }
.package-card { border-color:#315369; background:linear-gradient(145deg,#111d2b,#111724); }
.package-cover { aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; margin:-2px -2px 16px; border-radius:12px; background:radial-gradient(circle at 50% 40%,#294153,#0a111b 70%); color:#7890a8; }
.package-cover img { width:100%; height:100%; object-fit:cover; }
.package-card>ul { padding:14px; border-radius:12px; background:#09121d; }
.order-history { margin-top: 18px; padding-top: 14px; border-top: 1px solid #26364a; }
.order-history summary { cursor: pointer; color: #9eb2c9; }
.order-history p { margin: 8px 0; font-size: 12px; }
@media (max-width: 1050px) {
  .order-card { grid-column: span 2; }
  .order-progress { overflow-x: auto; grid-template-columns: repeat(7, 100px); }
}
@media (max-width: 700px) { .order-card { grid-column: span 1; } }
@media (max-width: 700px) { .order-fields,.creator-management { grid-template-columns:1fr; } }
/* Compact order queue and detail-only private material review. */
.order-list{border:1px solid #29394e;border-radius:12px;background:#101a27;overflow:hidden}
.order-toolbar{flex-wrap:wrap;gap:10px}.order-toolbar select{max-width:100%}.order-toolbar input{min-width:200px}
.order-row{display:grid;grid-template-columns:minmax(160px,1.4fr) 130px minmax(140px,1fr) auto;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid #243144}
.order-row:last-child{border-bottom:0}.order-row:hover{background:#142131}.order-row h2{font-size:15px;margin:0 0 6px}.order-row p{font-size:12px;margin:3px 0;overflow-wrap:anywhere}.order-row-meta strong{font-size:13px;font-weight:500}.order-row button{padding:9px 12px}
#order-detail{width:min(900px,96vw);max-height:92vh;overflow:auto}#order-detail .dialog-title{position:sticky;top:-28px;background:#111d2b;padding:12px 0;z-index:1}#order-detail .dialog-title h2{font-size:19px}
.order-section{border-top:1px solid #29394e;padding:14px 0}.order-section h3{font-size:15px;margin:5px 0 14px}.order-section>button{margin:0 8px 8px 0}.order-long-text{white-space:pre-wrap;overflow-wrap:anywhere}
.order-materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.order-materials figure{margin:0;border:1px solid #304158;border-radius:8px;padding:8px}.order-materials img{width:100%;height:180px;object-fit:contain;background:#09121d}.order-materials a{color:#80dccc;display:block;overflow-wrap:anywhere}.order-materials figcaption{font-size:12px;color:#99abc0;margin-top:8px;overflow-wrap:anywhere}
.order-edit-form textarea{width:100%;resize:vertical}.order-edit-form .order-fields{margin-bottom:18px}.order-error{color:#ffb1a9;white-space:pre-wrap}.order-error button{margin-left:10px}.creator-management input[type=checkbox],.order-fields input[type=checkbox]{display:inline;width:auto;margin-right:7px}
@media(max-width:1000px){.order-row{grid-template-columns:minmax(130px,1fr) 110px auto}.order-row-meta{grid-column:1}.order-row>button{grid-column:3;grid-row:1/3}}
@media(max-width:600px){.order-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px}.order-row>button{grid-column:2;grid-row:2}.order-row-meta{grid-column:1}.order-materials{grid-template-columns:repeat(2,minmax(0,1fr))}.order-materials img{height:130px}#order-detail{padding:18px}#order-detail .dialog-title{top:-18px}.order-toolbar>*{flex:1 1 140px}.pagination{gap:8px;flex-wrap:wrap}.order-fields{grid-template-columns:1fr}}
/* Order mode keeps the queue visible above the fold; other views retain their layout. */
main.orders-mode{padding-top:22px;padding-bottom:16px}
.orders-mode>header{margin-bottom:12px;min-height:62px}.orders-mode>header small{font-size:9px;letter-spacing:2px}.orders-mode>header h1{font-size:24px;margin:4px 0}.orders-mode>header p{margin:0;font-size:12px}
.orders-mode>.login{padding:8px 14px;border-radius:9px}.orders-mode .connected{gap:12px;flex-direction:row;align-items:center}.orders-mode .connected>div{display:flex;align-items:center;gap:14px}.orders-mode .connected strong{font-size:12px}.orders-mode .connected p{font-size:11px;margin:0}.orders-mode .connected button{padding:7px 12px;font-size:12px}
.orders-mode>#notice{margin:6px 0;min-height:20px;font-size:12px;line-height:20px}
.orders-mode #orders-workspace>.summary{margin:8px 0 12px;gap:10px}.orders-mode #orders-workspace>.summary>div{padding:10px 16px;display:flex;align-items:center;gap:12px;min-height:54px}.orders-mode #orders-workspace>.summary strong{font-size:24px}.orders-mode #orders-workspace>.summary span{font-size:12px;margin:0}
.orders-mode .order-toolbar{position:sticky;top:0;z-index:2;background:#090e16;padding:8px 0;margin-bottom:8px;gap:8px}.orders-mode .order-toolbar input,.orders-mode .order-toolbar select,.orders-mode .order-toolbar button{padding:9px 11px;font-size:12px}
.orders-mode .order-row{padding:10px 16px;gap:12px;grid-template-columns:minmax(160px,1.4fr) 118px minmax(150px,1fr) auto;min-height:74px}.orders-mode .order-row h2{font-size:14px;line-height:18px;margin:0 0 3px}.orders-mode .order-row p{font-size:11px;line-height:15px;margin:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.orders-mode .order-row-info,.orders-mode .order-row-meta{min-width:0}.orders-mode .order-row-meta strong{font-size:12px;line-height:18px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.orders-mode .order-row button{font-size:12px;padding:8px 10px}.orders-mode .order-row-meta{grid-column:auto}.orders-mode .order-row>button{grid-column:auto;grid-row:auto}
.orders-mode #orders-workspace>.pagination{position:sticky;bottom:0;background:#090e16;margin:8px 0 0;padding:10px 0;z-index:2}
@media(max-width:800px){.orders-mode .order-row{grid-template-columns:minmax(0,1fr) 100px auto}.orders-mode .order-row-meta{grid-column:1}.orders-mode .order-row>button{grid-column:3;grid-row:1/3}.orders-mode .connected p{display:none}.orders-mode #orders-workspace>.summary>div{padding:9px;gap:8px}.orders-mode #orders-workspace>.summary span{font-size:11px}}
@media(max-width:600px){.orders-mode>header .badge{display:none}.orders-mode .order-row{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px;gap:6px}.orders-mode .order-row>button{grid-column:2;grid-row:2}.orders-mode .order-row-meta{grid-column:1}.orders-mode #orders-workspace>.summary>div{flex-wrap:wrap;gap:3px 8px}.orders-mode #orders-workspace>.summary strong{font-size:21px}.orders-mode .order-toolbar{position:static}.orders-mode>header h1{font-size:22px}}