.customer-studio {
  --paper: #f6f7f8;
  --ink: #25282d;
  --muted: #7c8189;
  --line: #e4e6ea;
  --accent: #477765;
  background: var(--paper);
  color: var(--ink);
}
.customer-studio * { letter-spacing: 0; }
.customer-studio .endpoint-label { color: #7c8780; font-size: 12px; padding-left: 18px; border-left: 1px solid #e4e9e5; white-space: nowrap; }
@media(max-width:540px) { .customer-studio .endpoint-label { font-size: 10px; padding-left: 11px; } }
.customer-studio svg.lucide { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.6; }
.customer-studio [hidden] { display: none !important; }
.customer-studio .topbar { height: 70px; padding: 0 36px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: none; gap: 40px; }
.customer-studio .brand { color: var(--ink); text-decoration: none; font-size: 16px; }
.customer-studio .brand-mark { width: 32px; height: 32px; background: #477765; color: #fff; border-radius: 6px; }
.customer-studio .topbar nav { margin: 0; gap: 22px; }
.customer-studio nav a.tab { display: inline-flex; align-items: center; padding: 0; background: none; border-radius: 0; color: #91959b; font-size: 13px; }
.customer-studio .tab.active { border-color: #477765; color: #303b35; }
.customer-studio .tab:hover { color: #477765; }
.customer-studio .balance { margin-left: auto; border: 0; padding: 0; gap: 10px; flex-shrink: 0; }
.customer-studio .balance span { font-size: 12px; color: #8c9097; }
.customer-studio .balance strong { font-size: 16px; color: #303b35; }
.customer-studio .balance button { margin-left: 12px; border: 1px solid #dce4df; color: #477765; background: #f3f7f4; padding: 6px 13px; }
.customer-studio .user-shell { max-width: 1600px; padding: 30px 36px 42px; }
.customer-studio .page-intro { justify-content: flex-start; gap: 15px; margin-bottom: 25px; }
.customer-studio .page-intro h1 { font-size: 23px; line-height: 1.35; margin: 0; font-weight: 650; color: #25282d; }
.studio-category { font-size: 12px; color: #9b9fa5; border-left: 1px solid #d9dde1; padding-left: 15px; }
.customer-studio .user-workspace { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 34px; align-items: start; }
.customer-studio .user-sidebar { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.customer-studio .upload-panel { padding: 4px 0 27px; }
.customer-studio .section-kicker { gap: 9px; margin-bottom: 17px; }
.customer-studio .section-kicker h2 { font-size: 13px; margin: 0; font-weight: 650; color: #454c52; }
.customer-studio .step-index { width: 21px; height: 21px; color: #5d7668; background: #e9eee9; border-radius: 50%; font-size: 10px; }
.customer-studio .dropzone { min-height: 172px; border: 1px dashed #cbd4cf; background: #fff; gap: 9px; border-radius: 6px; }
.customer-studio .dropzone > svg { width: 29px; height: 29px; margin-bottom: 4px; color: #638271; }
.customer-studio .dropzone strong { font-size: 13px; font-weight: 550; color: #535e57; }
.customer-studio .dropzone small { font-size: 10px; color: #a0a6a1; }
.customer-studio .dropzone:hover { border-color: #7e9f8c; background: #f9fcf9; }
.customer-studio .dropzone:focus-within { outline: 2px solid #769e88; outline-offset: 3px; }
.customer-studio .dropzone input { display: block; position: absolute; width: 1px; height: 1px; opacity: 0; }
.customer-studio .input-preview { height: auto; max-height: 240px; position: relative; background: #e9ecea; margin: 10px 0 0; }
.customer-studio .input-preview img { width: 100%; height: 180px; object-fit: contain; }
.customer-studio .input-preview small { display: block; padding: 6px 8px; text-align: center; color: #7d8680; font-size: 10px; }
.customer-studio .primary { display: flex; justify-content: center; align-items: center; gap: 8px; height: 42px; margin-top: 14px; background: #477765; border-radius: 5px; font-size: 13px; transform: none; }
.customer-studio .primary:hover:not(:disabled) { background: #376451; transform: none; }
.customer-studio .primary:disabled { color: #a6aca7; background: #e1e6e2; }
.customer-studio .job-panel { padding: 24px 0; border-top: 1px solid var(--line); }
.production-quantity { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#7b897f; font-size:11px; margin:18px 0 12px; }
.production-quantity>div { display:flex; align-items:center; gap:9px; }
.production-quantity input { width:78px; padding:7px 8px; border:1px solid #dce4df; background:#fff; border-radius:4px; color:#4d6555; font:inherit; }
.production-quote { padding:12px 0 0; border-top:1px solid #e6ebe7; font-size:10px; color:#8b988f; }
.production-quote>div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.production-quote strong { color:#58715f; font-weight:500; }
.production-quote .quote-total { margin:10px 0; padding-top:10px; border-top:1px solid #e6ebe7; }
.production-quote small { display:block; font-size:9px; color:#a0aa9f; line-height:1.8; }
.production-rule { font-size:10px; line-height:1.8; color:#9aa79d; margin:10px 0 0; }
.customer-orders { border-top:1px solid #e1e7e2; margin-top:40px; padding-top:27px; }
.customer-orders-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:20px; }
.customer-orders-heading h2 { margin:0 0 6px; font-size:15px; font-weight:550; color:#53665a; }
.customer-orders-heading h2 span { font-size:11px; color:#96a298; font-weight:400; margin-left:10px; }
.customer-orders-heading p { margin:0; font-size:11px; color:#99a39c; }
.customer-order { display:grid; grid-template-columns:40px minmax(0,1fr) 100px 150px 140px; align-items:center; gap:18px; background:white; border:1px solid #e3e9e4; padding:18px 22px; }
.customer-order:first-child { border-radius:6px 6px 0 0; }
.customer-order:last-child { border-radius:0 0 6px 6px; }
.customer-order+.customer-order { border-top:0; }
.customer-order-art { display:grid; place-items:center; height:40px; border-radius:5px; background:#f2f6f2; color:#8da392; }
.customer-order-title,.customer-order-quantity,.customer-order-cost { display:grid; gap:6px; min-width:0; }
.customer-order strong { font-size:12px; font-weight:500; color:#596d5f; overflow-wrap:anywhere; }
.customer-order small { font-size:10px; color:#a0aaa3; overflow-wrap:anywhere; }
.customer-order-actions { display:flex; justify-content:flex-end; gap:15px; }
.customer-order-actions button,.history-pagination button { background:none; border:0; color:#63866f; font:inherit; font-size:11px; cursor:pointer; padding:4px 0; }
.customer-order-actions button:hover { color:#315e42; }
.customer-order-empty { text-align:center; padding:40px 20px; color:#a0aaa4; font-size:12px; }
.history-pagination { display:flex; align-items:center; justify-content:center; gap:20px; font-size:11px; color:#9eaaa1; margin-top:18px; }
.history-pagination button:disabled { opacity:.4; cursor:default; }
.customer-studio .reprint-dialog { border:1px solid #dce6de; border-radius:8px; padding:26px; width:calc(100% - 32px); max-width:400px; color:#5e7666; box-shadow:0 20px 100px #203b2425; }
.reprint-dialog::backdrop { background:#233d2a44; backdrop-filter:blur(3px); }
.reprint-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.reprint-heading h2 { font-size:18px; margin:0; font-weight:550; }
.reprint-heading button { border:0; background:none; color:#9dab9f; font-size:25px; cursor:pointer; }
#reprint-name { font-size:12px; color:#96a197; overflow-wrap:anywhere; }
#reprint-error { font-size:11px; color:#ae6157; }
@media(max-width:800px) { .customer-order { grid-template-columns:32px minmax(0,1fr) 80px 115px; gap:12px; padding:17px; } .customer-order-actions { grid-column:2/-1; justify-content:flex-start; } }
@media(max-width:540px) { .customer-order { grid-template-columns:32px minmax(0,1fr) auto; gap:12px; padding:16px 12px; } .customer-order-cost { grid-column:2; } .customer-order-actions { grid-column:3; grid-row:2; flex-direction:column; gap:3px; } .customer-orders-heading h2 span { display:block; margin:6px 0 0; } }
.customer-studio .job-state { min-height: 0; padding: 0; align-items: center; gap: 12px; margin-bottom: 19px; }
.customer-studio .state-ring { height: 35px; width: 35px; border-width: 2px; border-color: #dfe6e0; border-top-color: #7e9b8a; color: #668472; font-size: 10px; }
.customer-studio .job-state strong { font-size: 12px; color: #4b5550; }
.customer-studio .job-state p { margin: 4px 0 0; color: #999f9a; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.customer-studio .progress { height: 3px; background: #e3e8e4; }
.customer-studio .progress div { background: #6a947d; }
.customer-studio .progress-meta { margin-top: 9px; color: #969e97; font-size: 10px; }
.account-section { padding-top: 19px; border-top: 1px solid var(--line); }
.account-section summary { cursor: pointer; display: flex; align-items: center; gap: 9px; list-style: none; font-size: 12px; color: #737d76; padding: 3px 0; }
.account-section summary::-webkit-details-marker { display: none; }
.account-section summary svg { width: 15px; height: 15px; }
.account-section .disclosure-icon { margin-left: auto; transition: transform .2s; }
.account-section[open] .disclosure-icon { transform: rotate(180deg); }
.account-content { padding-top: 18px; }
.account-heading { display: flex; justify-content: space-between; align-items: center; }
.account-heading h2 { font-size: 11px; font-weight: 550; color: #929a94; }
.customer-studio .order-row { padding: 12px 0; gap: 10px; font-size: 12px; }
.customer-studio .order-row span { font-size: 11px; color: #909b92; }
.customer-studio .history-row { grid-template-columns: 1fr auto; gap: 5px; font-size: 10px; }
.customer-studio .history-row small { grid-column: 1 / -1; color: #a0a7a1; }
.customer-studio .preview-workspace { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.customer-studio .preview-header { height: 44px; padding: 0 0 14px; background: transparent; border: 0; gap: 10px; flex-direction: row; align-items: center; }
.customer-studio .preview-header h2 { font-size: 13px; color: #72797f; font-weight: 500; margin: 0; }
.customer-studio .preview-header-meta { width: auto; display: flex; justify-content: flex-end; gap: 17px; }
.customer-studio .chip { color: #7d8c82; background: none; border: 0; padding: 0; font-size: 10px; }
.customer-studio .control-row { display: inline-flex; background: #e9ecee; border: 1px solid #e1e4e7; border-radius: 5px; padding: 2px; gap: 2px; }
.customer-studio .seg { background: transparent; border: 0; color: #92999e; border-radius: 3px; padding: 4px 15px; font-size: 11px; }
.customer-studio .seg.active { color: #404e46; background: #fff; box-shadow: 0 1px 3px #293d2414; }
.customer-studio .preview-layout { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid #dfe3e5; border-radius: 6px; overflow: hidden; background: #fff; }
.customer-studio .preview-stage { display: block; height: 570px; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: #e7e9eb; }
.customer-studio #preview-canvas { display: block; width: 100%; height: 100%; min-height: 0; }
.customer-studio .preview-empty { display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; gap: 15px; color: #9aa2a8; }
.customer-studio .preview-empty svg { width: 39px; height: 39px; stroke-width: 1; color: #a1aaa8; }
.customer-studio .preview-empty strong { font-size: 12px; font-weight: 400; }
.customer-studio .preview-image { opacity: 1; filter: none; }
.customer-studio .preview-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) 35px; gap: 26px; padding: 18px 22px; background: #fff; align-items: center; }
.customer-studio .preview-controls label { display: block; font-size: 11px; color: #808a84; min-width: 0; }
.customer-studio .preview-controls label span { display: flex; align-items: center; gap: 6px; color: #808a84; }
.customer-studio .preview-controls label svg { width: 14px; height: 14px; }
.customer-studio .preview-controls input { width: 100%; min-width: 0; margin: 11px 0 0; accent-color: #72917f; cursor: pointer; }
.customer-studio .icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; background: #f7f8f8; border: 1px solid #e6e9e7; border-radius: 4px; color: #7c8981; cursor: pointer; }
.customer-studio .icon-button:hover { color: #3d6b53; border-color: #b6c5bc; }
.preview-footer { display: flex; justify-content: space-between; padding: 12px 1px; font-size: 10px; color: #a3a9ac; }
.customer-studio #preview-legend { border: 0; background: none; padding: 0; font-size: 10px; color: #a3a9ac; }
.customer-studio #preview-legend.proxy-depth { color: #a7753b; }
.customer-studio .preview-watermark { font-size: 9px; color: #8a9299; bottom: 12px; right: 15px; }
.customer-studio .preview-fallback { min-height: 0; height: 100%; }
.factory-studio .factory-shell { max-width: 1600px; padding: 30px 36px 60px; }
.factory-studio .factory-badge { margin: 0 0 0 auto; border: 0; padding: 0; background: transparent; color: #929b95; font-size: 12px; box-shadow: none; white-space: nowrap; }
.factory-studio .factory-badge::before { content: ''; width: 6px; height: 6px; background: #b8bfba; border-radius: 50%; }
.factory-studio .factory-badge.connected { color: #477765; }
.factory-studio .factory-badge.connected::before { background: #659e7f; }
.factory-studio .factory-command { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px 0 26px; margin: 0 0 28px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.credential-label { display: inline-flex; align-items: center; gap: 9px; color: #626e66; font-size: 12px; }
.factory-studio .factory-access { display: flex; align-items: center; gap: 8px; margin: 0; }
.factory-studio .factory-access input { width: 300px; min-width: 0; height: 39px; padding: 9px 12px; border: 1px solid #dce2de; border-radius: 5px; background: #fff; font-size: 12px; }
.factory-studio .factory-access .primary { width: 75px; height: 39px; margin: 0; font-size: 12px; }
.connection-caption { margin-left: auto; color: #959e98; font-size: 11px; }
.factory-studio .factory-grid { grid-template-columns: minmax(0,1fr) 365px; gap: 36px; }
.factory-studio .panel-heading { margin: 0 0 18px; align-items: center; height: 32px; }
.factory-studio .panel-heading h2 { margin: 0; color: #4b5550; font-size: 14px; font-weight: 600; }
.queue-count { margin-left: 8px; color: #9aa39d; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.queue-columns { display: grid; grid-template-columns: minmax(0,1fr) 85px 88px; gap: 14px; padding: 0 16px 12px; color: #9ba39e; font-size: 10px; }
.queue-columns span:last-child { text-align: right; }
.factory-studio .factory-list { display: block; min-height: 240px; border-top: 1px solid var(--line); }
.factory-studio .factory-row { display: grid; grid-template-columns: minmax(0,1fr) 85px 88px; gap: 14px; padding: 19px 16px; min-height: 84px; margin: 0; border-top: 0; border-bottom: 1px solid var(--line); transition: background .15s; }
.factory-studio .factory-row > div:first-child { min-width: 0; width: 100%; margin: 0; }
.factory-studio .factory-row.selected { background: #edf3ef; }
.factory-studio .factory-row:hover { background: #f0f4f1; }
.factory-studio .factory-row strong { display: block; overflow: hidden; text-overflow: ellipsis; color: #4c5951; font: 500 12px/1.6 ui-monospace,Consolas,monospace; }
.factory-studio .factory-row .meta { color: #9aa39d; font-size: 10px; margin-top: 5px; }
.factory-studio .order-state { color: #7c8780; font-size: 11px; white-space: nowrap; }
.factory-studio .order-state.pending { color: #a17b42; }
.factory-studio .factory-row button { margin: 0; width: 88px; min-height: 32px; padding: 7px 9px; border: 1px solid #d9e2dc; border-radius: 4px; color: #4e7962; background: #fff; font-family: inherit; font-weight: 500; font-size: 11px; line-height: 1.4; cursor: pointer; }
.factory-studio .factory-row button:hover { background: #e5eee7; border-color: #a9c0b1; }
.factory-studio .factory-row button[data-claim] { background: #477765; border-color: #477765; color: #fff; }
.factory-studio button:disabled { opacity: .55; cursor: wait; }
.factory-studio .empty-row { border: 0; background: transparent; color: #a0a9a3; font-size: 12px; padding: 65px 16px; }
.factory-studio .factory-package { min-width: 0; padding-left: 30px; border: 0; border-left: 1px solid var(--line); background: transparent; }
.factory-studio .factory-package .panel-heading > svg { color: #9aa89e; }
.factory-studio .package-view { border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; max-height: none; overflow: visible; white-space: normal; color: #68766c; font-family: inherit; font-size: 12px; line-height: 1.6; }
.package-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; min-height: 270px; color: #a0aaa2; font-size: 12px; }
.customer-studio .package-placeholder svg { width: 35px; height: 35px; stroke-width: 1; }
.package-facts { display: grid; gap: 14px; margin: 22px 0; }
.package-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.package-facts dt { color: #98a198; font-size: 11px; white-space: nowrap; }
.package-facts dd { margin: 0; color: #5f6d63; font-size: 11px; overflow-wrap: anywhere; text-align: right; }
.calibration-note { padding: 11px 12px; border-left: 2px solid #b9a578; background: #f2f0e9; color: #8d7a52; font-size: 10px; line-height: 1.8; margin: 0 0 20px; }
.factory-studio .artifact-list { display: grid; gap: 10px; }
.factory-studio .artifact-list button { display: flex; align-items: center; gap: 12px; padding: 15px 13px; width: 100%; border: 1px solid #dce3de; border-radius: 5px; background: #fff; text-align: left; color: #63836e; cursor: pointer; }
.factory-studio .artifact-list button:hover { background: #f7faf7; border-color: #a2baac; }
.file-description { display: grid; gap: 4px; min-width: 0; flex: 1; }
.file-description strong { font-size: 12px; font-weight: 550; color: #4e6556; }
.file-description small { font-size: 10px; color: #9aa59c; overflow-wrap: anywhere; }
@media(max-width:1050px) { .factory-studio .factory-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 22px; } .factory-studio .factory-package { padding-left: 22px; } .connection-caption { display: none; } }
@media(max-width:800px) { .factory-studio .factory-grid { grid-template-columns: 1fr; gap: 30px; } .factory-studio .factory-package { padding: 25px 0 0; border-left: 0; border-top: 1px solid var(--line); } .factory-studio .factory-badge { font-size: 10px; } }
@media(min-width:1600px) { .customer-studio .preview-stage { height: 650px; } }
@media(max-width:1050px) { .customer-studio .user-workspace { grid-template-columns: 225px minmax(0,1fr); gap: 24px; } .customer-studio .preview-stage { height: 500px; } .customer-studio .preview-controls { gap: 15px; padding: 16px; } }
@media(max-width:720px) {
  .factory-studio .factory-shell { padding: 24px 18px 36px; }
  .factory-studio .factory-command { gap: 14px; padding: 12px 0 23px; margin-bottom: 22px; }
  .factory-studio .factory-access { width: 100%; flex-direction: row; align-items: center; }
  .factory-studio .factory-access input { width: auto; flex: 1; min-width: 0; }
  .factory-studio .factory-access .primary { width: 68px; flex-shrink: 0; }
  .factory-studio .queue-columns,.factory-studio .factory-row { grid-template-columns: minmax(0,1fr) 48px 76px; gap: 10px; padding-left: 0; padding-right: 0; }
  .factory-studio .factory-row button { width: 76px; padding: 7px 4px; }
  .factory-studio .factory-row strong { font-size: 10px; }
  .customer-studio .topbar { height: 60px; padding: 0 18px; gap: 16px; }
  .customer-studio .brand { font-size: 14px; }
  .customer-studio .topbar nav { display: none; }
  .customer-studio .balance { gap: 7px; }
  .customer-studio .balance button { margin-left: 4px; padding: 5px 10px; }
  .customer-studio .user-shell { padding: 24px 18px 36px; }
  .customer-studio .page-intro { flex-direction: row; align-items: center; margin-bottom: 20px; }
  .customer-studio .page-intro h1 { font-size: 21px; }
  .customer-studio .user-workspace { display: flex; flex-direction: column; gap: 25px; }
  .customer-studio .user-sidebar { width: 100%; }
  .customer-studio .preview-workspace { width: 100%; order: 0; }
  .customer-studio .upload-panel { padding-bottom: 22px; }
  .customer-studio .dropzone { min-height: 115px; }
  .customer-studio .job-panel { padding: 18px 0; }
  .customer-studio .preview-stage { height: 370px; }
  .customer-studio .preview-controls { grid-template-columns: repeat(2,minmax(0,1fr)) 28px; gap: 16px 12px; padding: 14px 12px; }
  .customer-studio .preview-controls label:nth-of-type(3) { grid-column: 1; }
  .customer-studio .preview-controls .rotation-reset { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .customer-studio .preview-controls label { font-size: 10px; }
  .customer-studio .preview-controls label svg { display: none; }
  .customer-studio .preview-controls .icon-button { width: 28px; height: 28px; }
}

/* Preview first, production after confirmation. */
.production-action { display:flex; justify-content:flex-end; padding-top:14px; }
.production-action .primary { min-width:130px; padding:10px 22px; }
.production-action [hidden] { display:none; }
.recharge-options { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 22px; }
.recharge-options button { flex:1; padding:12px; border:1px solid #dce3de; border-radius:5px; background:#f7faf8; color:#456c56; cursor:pointer; white-space:nowrap; }
.reprint-dialog h3 { font-size:13px; margin-top:24px; }
.customer-studio .balance > span { white-space:nowrap; }
.customer-studio .balance { flex-wrap:wrap; }
@media(max-width:720px) { .customer-studio .topbar { height:auto; min-height:65px; padding-top:12px; padding-bottom:12px; gap:10px; } .customer-studio .balance { font-size:10px; column-gap:10px; } .customer-studio .balance strong { font-size:12px; } }

.customer-studio .artwork-row { grid-template-columns:42px minmax(0,1fr) auto; }
.customer-shipping { grid-column:1/-1; min-width:0; border-top:1px solid #e6ebe7; padding-top:12px; color:#53665a; font-size:12px; }
.customer-shipping summary { cursor:pointer; padding:5px 0; }
.customer-shipping p { color:#737d76; }
.customer-shipment { display:grid; gap:8px; padding:12px 0; overflow-wrap:anywhere; }
.customer-shipment + .customer-shipment { border-top:1px solid #e6ebe7; }
.customer-shipment b { font-weight:500; user-select:text; }
.customer-shipment button { justify-self:start; padding:7px 12px; border:1px solid #dce3de; border-radius:4px; background:#fff; color:#456c56; font:inherit; cursor:pointer; }
.preview-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0 0; }
.preview-navigation p { margin:0; font-size:11px; color:#737d76; }
.preview-zoom-controls { display:flex; gap:8px; flex:none; }
.customer-studio .preview-zoom-controls button { width:40px; height:40px; font-size:22px; touch-action:manipulation; }
#account-tools { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
#account-tools[hidden], #login[hidden], #demo-login[hidden] { display:none; }
#account-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; }
#login-note { margin:22px 0; font-size:13px; }
#demo-login { margin-top:15px; padding:10px; }
#login-error { font-size:12px; color:#ad5147; }
.customer-studio button[hidden] { display:none; }
@media(max-width:720px) {
  .customer-studio .topbar { flex-wrap:wrap; }
  .customer-studio .topbar > .balance { min-width:0; max-width:100%; margin-left:auto; }
  #account-tools { justify-content:flex-end; gap:8px; font-size:10px; }
  #account-name { max-width:75px; }
  #account-tools button { margin:0; padding:5px 8px; }
}
@media(max-width:720px) { .customer-studio .artwork-row { grid-template-columns:32px minmax(0,1fr); } .artwork-row .customer-order-actions { grid-column:2; } }