*{box-sizing:border-box}
:root{
  --bg:#f4f4f5;--panel:#fff;--border:#d8d8dc;--text:#202124;--muted:#6b7280;
  --accent:#111827;--danger:#991b1b;
}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
.topbar{height:74px;padding:12px 20px;background:#222;color:#fff;display:flex;align-items:center;justify-content:space-between}
.topbar h1{font-size:21px;margin:0 0 3px}.topbar p{margin:0;font-size:12px;color:#d1d5db}
.price-box{text-align:right}.price-box span{display:block;font-size:12px;color:#d1d5db}.price-box strong{font-size:22px}
.app{display:grid;grid-template-columns:290px 1fr 270px;height:calc(100vh - 74px)}
.panel{padding:16px;background:var(--panel);overflow:auto;border-right:1px solid var(--border)}
.right-panel{border-right:none;border-left:1px solid var(--border)}
.panel h2{font-size:15px;margin:0 0 10px;padding-top:8px}
label{display:block;font-size:12px;font-weight:700;margin:10px 0}
input,select,button{width:100%;padding:10px;border:1px solid var(--border);border-radius:7px;background:white}
button{cursor:pointer;margin:5px 0;font-weight:700}
button.primary{background:var(--accent);color:white}
button.danger{color:var(--danger)}
.upload-btn{display:block;text-align:center;padding:12px;border:1px dashed #9ca3af;border-radius:8px;cursor:pointer}
.upload-btn input{display:none}
.small{font-size:11px;color:var(--muted);line-height:1.4}
.help{font-size:12px;line-height:1.45;background:#f3f4f6;border-radius:8px;padding:10px;color:#4b5563;margin:8px 0 16px}
.workspace{min-width:0;display:flex;flex-direction:column}
.workspace-toolbar{height:46px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:7px 12px}
.workspace-toolbar button{width:36px;margin:0;padding:6px}.workspace-toolbar .status{margin-left:auto;font-size:12px;color:var(--muted)}
.canvas-scroll{overflow:auto;flex:1;padding:24px;background:#d9dadd}
.canvas{position:relative;background:white;box-shadow:0 2px 16px rgba(0,0,0,.18);transform-origin:top left}
.canvas::before{content:"22 in";position:absolute;top:-18px;left:0;font-size:11px;color:#555}
.art{position:absolute;user-select:none;touch-action:none;outline:1px dashed transparent}
.art.selected{outline:2px solid #2563eb}
.art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.art.low{box-shadow:0 0 0 3px rgba(220,38,38,.4) inset}
.asset-list{margin:10px 0}
.asset-row{display:grid;grid-template-columns:48px 1fr;gap:8px;align-items:center;padding:6px;border-bottom:1px solid #eee;font-size:11px}
.asset-row img{width:48px;height:48px;object-fit:contain;background:#f7f7f7}
.hidden{display:none}.dpi-box{padding:10px;background:#f8fafc;border-radius:8px;margin:8px 0}
.summary div{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:7px 0;font-size:12px}
@media(max-width:900px){.app{grid-template-columns:240px 1fr}.right-panel{display:none}}

.art .handle{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #2563eb;border-radius:50%;z-index:3}
.art .resize-handle{right:-7px;bottom:-7px;cursor:nwse-resize}
.art .rotate-handle{left:50%;top:-30px;transform:translateX(-50%);cursor:grab}
.art .rotate-line{position:absolute;left:50%;top:-20px;width:1px;height:20px;background:#2563eb;transform:translateX(-50%)}
.checkline{display:flex;gap:8px;align-items:center;font-weight:600}
.checkline input{width:auto;margin:0}
.dpi-note{margin-top:7px;padding-top:7px;border-top:1px solid #e5e7eb}

.rotate-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 10px}
.rotate-buttons button{font-size:11px;padding:8px}
.art{overflow:visible}
.art .rotate-handle{width:14px;height:14px;top:-38px;background:#2563eb;border-color:#fff;box-shadow:0 0 0 2px #2563eb}
.art .rotate-line{top:-28px;height:28px}

.art.collision{outline:3px solid #dc2626!important}
.art.outside{outline:3px solid #f59e0b!important}
.production-files{display:grid;gap:6px;margin:8px 0 14px}
.production-files button{font-size:11px;text-align:left}
.validation-ok{color:#166534}
.validation-bad{color:#991b1b}
.badge{display:inline-block;padding:2px 6px;border-radius:999px;background:#eef2ff;font-size:10px;margin-left:4px}

.art.selected{z-index:50;cursor:move}
.art .resize-handle.tl{left:-7px;top:-7px;cursor:nwse-resize}
.art .resize-handle.tr{right:-7px;top:-7px;cursor:nesw-resize}
.art .resize-handle.bl{left:-7px;bottom:-7px;cursor:nesw-resize}
.art .resize-handle.br{right:-7px;bottom:-7px;cursor:nwse-resize}
.art.dragging{opacity:.92;z-index:100}

.asset-card{border:1px solid #e5e7eb;border-radius:9px;padding:9px;margin:8px 0;background:#fff}
.asset-card-head{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:center}
.asset-card-head img{width:52px;height:52px;object-fit:contain;background:#f7f7f7;border-radius:6px}
.asset-card-title{font-size:11px;overflow:hidden;text-overflow:ellipsis}
.asset-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:8px}
.asset-controls label{margin:0;font-size:10px}
.asset-controls input{padding:7px;font-size:11px}
.asset-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.asset-actions button{padding:7px;font-size:10px}
.asset-dpi{font-size:10px;margin-top:6px;color:#4b5563}
.asset-dpi.bad{color:#991b1b;font-weight:700}
.project-summary{margin-bottom:10px}
#approvalStatus.approved{color:#166534}
#approvalStatus.dirty{color:#92400e}
#approveBtn:disabled{opacity:.45;cursor:not-allowed}
.review-grid{display:grid;grid-template-columns:1fr auto;gap:6px 12px}
.review-grid strong{text-align:right}

.selection-marquee{
  position:absolute;
  border:1px dashed #2563eb;
  background:rgba(37,99,235,.10);
  pointer-events:none;
  z-index:200;
}
.art.multi-selected{outline:2px solid #2563eb}
.art.group-dragging{opacity:.9;z-index:120}

.text-row{display:grid;grid-template-columns:1fr 90px;gap:8px}
.text-style-row{display:flex;gap:14px;align-items:center;margin:6px 0}
.text-style-row label{display:flex;gap:6px;align-items:center;margin:0;font-size:11px}
.text-style-row input{width:auto}
.art.text-art{display:flex;align-items:center;justify-content:center;white-space:pre;overflow:visible}
.art.text-art .text-render{width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;line-height:1}
.asset-card.text-card .asset-card-head{grid-template-columns:1fr}
.asset-card.text-card .asset-card-title{font-size:12px}

.selection-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.selection-tools.compact{grid-template-columns:1fr 1fr 1fr}
.selection-tools button{font-size:10px;padding:7px}

.outline-guide{display:grid;gap:6px;margin:8px 0 6px}
.outline-guide>div{display:flex;align-items:center;gap:8px;font-size:11px}
.legend-swatch{width:22px;height:14px;border-radius:3px;background:#fff;display:inline-block;flex:0 0 auto}
.selected-swatch{border:2px solid #2563eb}
.red-swatch{border:3px solid #dc2626}
.orange-swatch{border:3px solid #f59e0b}
.pink-swatch{border:3px solid #f3a6b7}
.outline-note{margin-bottom:12px}
.art.dpi-warning{box-shadow:0 0 0 3px rgba(243,166,183,.65) inset}
.art.dpi-hard{box-shadow:0 0 0 4px rgba(225,29,72,.9) inset}

.top-actions{display:flex;align-items:center;gap:10px}
.customer-login{display:flex;gap:6px;align-items:center}
.customer-login input{width:210px;padding:7px}
.customer-login button,.admin-btn{width:auto;padding:8px 10px;margin:0}
.admin-btn{background:#fff;color:#111}
.admin-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.admin-dialog{width:min(1050px,95vw);max-height:90vh;overflow:auto;background:#fff;border-radius:12px;padding:18px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.admin-head{display:flex;justify-content:space-between;gap:12px;align-items:start;border-bottom:1px solid #e5e7eb;padding-bottom:10px}
.admin-head h2{margin:0}.admin-head p{margin:4px 0 0;font-size:12px;color:#6b7280}.admin-head button{width:auto}
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.admin-tabs button{width:auto}
.admin-tabs .active{background:#111827;color:#fff}
.admin-pane{padding-top:4px}
.admin-note{font-size:12px;background:#f3f4f6;padding:10px;border-radius:8px;margin-bottom:10px}
.admin-price-row{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:center;border-bottom:1px solid #eee;padding:5px 0}
.admin-price-row input{max-width:160px}
.admin-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.admin-metrics div{background:#f8fafc;padding:12px;border-radius:8px}.admin-metrics span{display:block;font-size:11px;color:#6b7280}.admin-metrics strong{font-size:18px}
.admin-form-row{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:8px;align-items:end;margin-top:10px}
.customer-row{grid-template-columns:1.2fr 1.4fr 1fr auto}
.profile-item,.customer-item{display:grid;grid-template-columns:1.4fr 1fr auto;gap:8px;align-items:center;border-bottom:1px solid #eee;padding:8px 0;font-size:12px}
.customer-item{grid-template-columns:1.2fr 1.4fr 1fr auto}
.profile-item button,.customer-item button{width:auto;margin:0}
@media(max-width:900px){
  .customer-login{display:none}
  .admin-metrics{grid-template-columns:1fr 1fr}
  .admin-form-row,.customer-row,.profile-item,.customer-item{grid-template-columns:1fr}
}

/* V15.1 hotfix: modal hidden state must override .admin-modal display:flex */
.admin-modal.hidden{display:none!important}

/* Hosted customer account authentication */
.account-entry{display:flex;align-items:center;gap:8px}
.guest-note{font-size:10px;line-height:1.25;color:#d1d5db;max-width:190px;text-align:right}
.account-entry>button{width:auto;min-width:72px}
.account-signed-in{display:flex;align-items:center;gap:8px;font-size:11px}
.account-signed-in span{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-signed-in button{width:auto;margin:0;padding:7px 9px}
.account-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px}
.account-modal.hidden{display:none!important}
.account-dialog{width:min(500px,95vw);max-height:90vh;overflow:auto;background:#fff;border-radius:12px;padding:18px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.account-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #e5e7eb;padding-bottom:10px;margin-bottom:12px}
.account-head h2{margin:0 0 4px;font-size:20px}
.account-head p{margin:0;color:#6b7280;font-size:12px;line-height:1.45}
.account-head button{width:auto;margin:0}
.account-panel h3{margin:8px 0}
.account-links{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.account-links button{font-size:11px;padding:8px}
.account-links button:last-child{grid-column:1/-1}
.guest-button{margin-top:8px;background:#f3f4f6}
.account-message{font-size:12px;line-height:1.45;padding:10px;border-radius:8px;background:#f3f4f6;margin-bottom:10px}
.account-message.error{background:#fef2f2;color:#991b1b}
.account-message.success{background:#f0fdf4;color:#166534}
@media(max-width:900px){
  .guest-note{display:none}
}


/* Order draft / checkout checkpoint */
.order-dialog{width:min(560px,95vw)}
.order-summary-card{display:grid;gap:7px;background:#f3f4f6;border-radius:9px;padding:12px;margin:0 0 12px}
.order-summary-card>div{display:flex;justify-content:space-between;gap:14px;font-size:12px}
.order-phase-note{margin-top:8px;line-height:1.4}
#checkoutBtn:disabled{opacity:.45;cursor:not-allowed}

/* Square checkout + Admin Orders */
.orders-toolbar{display:flex;gap:8px;margin-bottom:8px}.orders-toolbar input{flex:1}.orders-toolbar select{width:170px}.orders-toolbar button{width:auto;margin:0}
.orders-summary{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}.orders-summary span{background:#f3f4f6;border-radius:999px;padding:5px 9px;font-size:10px;color:#4b5563}.orders-summary strong{color:#111827}
.orders-layout{display:grid;grid-template-columns:minmax(390px,.9fr) minmax(500px,1.1fr);gap:12px;align-items:start}
.orders-list,.order-detail{border:1px solid #e5e7eb;border-radius:9px;max-height:60vh;overflow:auto;background:#fff}
.order-list-row{display:grid;grid-template-columns:1.05fr 1.35fr .65fr .9fr;gap:8px;padding:10px;border-bottom:1px solid #eee;cursor:pointer;font-size:12px;align-items:center}.order-list-row:hover{background:#f8fafc}.order-list-row.active{background:#eef2ff}.order-list-row strong{display:block}.order-list-row small{display:block;color:#6b7280;margin-top:2px}.order-list-status{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.order-detail{padding:14px}.order-detail h3{margin:0}.order-detail h4{margin:0 0 8px;font-size:13px}.order-detail p{margin:0;color:#6b7280;font-size:11px;line-height:1.4}.order-detail-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid #e5e7eb}.order-number-line{display:flex;align-items:center;gap:7px}.order-badges{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}.text-button{width:auto!important;margin:0!important;padding:3px 7px!important;font-size:10px!important;background:#f3f4f6!important;color:#374151!important}.order-detail-amount{text-align:right}.order-detail-amount small,.order-detail-amount span{display:block;color:#6b7280;font-size:10px}.order-detail-amount strong{font-size:20px;display:block;margin:2px 0}
.order-detail-sections{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.order-info-card,.order-workflow-card{border:1px solid #e5e7eb;border-radius:8px;padding:10px;background:#fff}.order-detail-grid{display:grid;grid-template-columns:110px 1fr;gap:6px;font-size:12px}.order-detail-grid span{color:#6b7280}.order-detail-grid a{color:#1d4ed8}.mono-wrap{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}
.order-workflow-card{margin-top:10px}.order-quick-actions{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.order-quick-actions button{width:auto;margin:0}.workflow-action.primary{background:#111827;color:#fff}.workflow-action.secondary{background:#f3f4f6;color:#111827}.order-status-row{display:flex;gap:8px;align-items:center;margin-top:8px}.order-status-row select{flex:1}.order-status-row button{width:auto;margin:0}
.order-files{border-top:1px solid #e5e7eb;margin-top:12px;padding-top:12px}.order-files-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.order-files-head button{width:auto;margin:0}.order-file-group{border:1px solid #e5e7eb;border-radius:8px;margin-top:8px;overflow:hidden}.order-file-group-head{display:flex;justify-content:space-between;gap:10px;background:#f8fafc;padding:7px 9px;font-size:11px}.order-file-group-head span{color:#6b7280}.order-file-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 9px;border-top:1px solid #f1f5f9;font-size:12px}.order-file-row:first-child{border-top:0}.order-file-row small{display:block;color:#6b7280;margin-top:2px}.order-file-row button{width:auto;margin:0}
.status-pill,.workflow-pill{display:inline-block;padding:2px 7px;border-radius:999px;background:#f3f4f6;font-size:10px;font-weight:700}.status-pill.paid{background:#dcfce7;color:#166534}.status-pill.pending{background:#fef3c7;color:#92400e}.workflow-pill.status-paid{background:#dbeafe;color:#1d4ed8}.workflow-pill.status-in_production{background:#ede9fe;color:#6d28d9}.workflow-pill.status-ready{background:#dcfce7;color:#166534}.workflow-pill.status-completed{background:#e5e7eb;color:#374151}.workflow-pill.status-canceled{background:#fee2e2;color:#991b1b}
@media(max-width:1000px){.orders-layout{grid-template-columns:1fr}.orders-list,.order-detail{max-height:none}.order-list-row{grid-template-columns:1fr 1fr}.order-detail-sections{grid-template-columns:1fr}}
@media(max-width:700px){.orders-toolbar{display:grid;grid-template-columns:1fr auto}.orders-toolbar select{width:100%;grid-column:1/-1;grid-row:2}.order-list-row{grid-template-columns:1fr}.order-detail-head{flex-direction:column}.order-detail-amount{text-align:left}.order-status-row{align-items:stretch;flex-direction:column}.order-status-row button,.order-status-row select,.order-files-head button{width:100%}.order-files-head{flex-direction:column}}