.rlp-app {
    --paper: #FFFFFF;
    --paper-2: #F4F6F9;
    --ink: #2B2F36;
    --ink-soft: #575757;
    --muted: #8A8F98;
    --border: #DEE3EA;
    --accent: #3470BB;
    --accent-ink: #FFFFFF;
    --stamp: #33373D;
    --stamp-ink: #FFFFFF;
    --card: #FFFFFF;
    --shadow: rgba(43, 47, 54, 0.1);
    --cyan: #2AA9C4;
    --magenta: #C24B8C;
    --yellow: #C7962C;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

@media (prefers-color-scheme: dark) {
  .rlp-app:not([data-theme="light"]) {
    --paper: #1B1E23;
    --paper-2: #22262D;
    --ink: #EDEFF2;
    --ink-soft: #C2C6CC;
    --muted: #8A8F98;
    --border: #363B44;
    --accent: #5B93D1;
    --accent-ink: #10151C;
    --stamp: #AEB4BD;
    --stamp-ink: #14171B;
    --card: #22262D;
    --shadow: rgba(0, 0, 0, 0.45);
    --cyan: #4FC3DE;
    --magenta: #DE6FAE;
    --yellow: #DCAF4C;
  }
}

.rlp-app[data-theme="dark"] {
    --paper: #1B1E23;
    --paper-2: #22262D;
    --ink: #EDEFF2;
    --ink-soft: #C2C6CC;
    --muted: #8A8F98;
    --border: #363B44;
    --accent: #5B93D1;
    --accent-ink: #10151C;
    --stamp: #AEB4BD;
    --stamp-ink: #14171B;
    --card: #22262D;
    --shadow: rgba(0, 0, 0, 0.45);
    --cyan: #4FC3DE;
    --magenta: #DE6FAE;
    --yellow: #DCAF4C;
  }

.rlp-app * { box-sizing: border-box; }

.rlp-app {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
  }

.rlp-app h1, .rlp-app h2, .rlp-app h3, .rlp-app .num { font-family: 'Oswald', 'Arial Narrow', sans-serif; }

.rlp-app .topbar { background: var(--ink); color: var(--paper-2); padding: env(safe-area-inset-top, 0px) 0 0 0; position: relative; }

.rlp-app .topbar-inner { max-width: 1040px; margin: 0 auto; padding: 22px 24px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.rlp-app .brand { display: flex; align-items: baseline; gap: 10px; }

.rlp-app .brand-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.rlp-app .brand h1 { font-size: 22px; font-weight: 600; letter-spacing: 0.3px; margin: 0; }

.rlp-app .brand span { color: var(--muted); font-size: 13px; font-family: 'Inter', sans-serif; line-height: 1.4; display: inline-block; }

.rlp-app .tabs { display: flex; gap: 2px; background: rgba(255,255,255,0.06); padding: 3px; border-radius: 8px; flex-wrap: wrap; }

.rlp-app .tab-btn { border: none; background: transparent; color: var(--muted); font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; white-space: nowrap; }

.rlp-app .tab-btn.active { background: var(--paper-2); color: var(--ink); }

.rlp-app .tab-btn:not(.active):hover { color: var(--paper-2); }

.rlp-app .tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rlp-app .perf { height: 10px; background: radial-gradient(circle at 50% 0, transparent 5px, var(--paper) 5.5px) 0 0 / 16px 10px repeat-x; }

.rlp-app main { max-width: 1040px; margin: 0 auto; padding: 36px 24px 80px; }

.rlp-app .view { display: none; }

.rlp-app .view.active { display: block; }

.rlp-app .view-head { margin-bottom: 24px; }

.rlp-app .view-head h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }

.rlp-app .view-head p { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 64ch; }

.rlp-app .grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: start; }

@media (max-width: 780px) {
.rlp-app .grid { grid-template-columns: 1fr; }
}

.rlp-app .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 24px; }

.rlp-app .card h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }

.rlp-app .card .sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; }

.rlp-app fieldset { border: none; padding: 0; margin: 0 0 18px; }

.rlp-app legend { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: var(--accent); padding: 0 0 8px; width: 100%; border-bottom: 1px dashed var(--border); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }

.rlp-app .swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.rlp-app .ink-color-row { margin-bottom: 16px; }

.rlp-app .ink-color-row .avg-helper { margin-top: 8px; }

.rlp-app label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }

.rlp-app .field { margin-bottom: 12px; }

.rlp-app .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.rlp-app .field-row-3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 480px) {
.rlp-app .field-row-3 { grid-template-columns: 1fr; }
}

.rlp-app .field-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

.rlp-app input[type="text"], .rlp-app input[type="number"] {
    width: 100%; border: 1px solid var(--border); background: var(--paper-2); color: var(--ink);
    font-family: 'Inter', sans-serif; font-size: 15px; padding: 10px 12px; border-radius: 7px;
  }

.rlp-app input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.rlp-app .prefix-wrap { position: relative; }

.rlp-app .prefix-wrap span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }

.rlp-app .prefix-wrap input { padding-left: 26px; }

.rlp-app .suffix-wrap { position: relative; }

.rlp-app .suffix-wrap span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }

.rlp-app .suffix-wrap input { padding-right: 30px; }

.rlp-app .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 7px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px; padding: 11px 18px; cursor: pointer; transition: transform 0.1s ease, opacity 0.15s ease; }

.rlp-app .btn:active { transform: scale(0.98); }

.rlp-app .btn-primary { background: var(--accent); color: var(--accent-ink); width: 100%; }

.rlp-app .btn-primary:hover { opacity: 0.92; }

.rlp-app .btn-small { padding: 8px 14px; font-size: 13.5px; width: auto; }

.rlp-app .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--ink-soft); width: 100%; margin-top: 8px; }

.rlp-app .btn-ghost:hover { border-color: var(--muted); }

.rlp-app .btn-text { background: none; border: none; color: var(--muted); font-size: 13px; font-family: 'Inter', sans-serif; cursor: pointer; padding: 4px 6px; }

.rlp-app .btn-text:hover { color: var(--accent); }

.rlp-app .btn-text.danger:hover { color: #C1392B; }

.rlp-app select {
    width: 100%; appearance: none; -webkit-appearance: none;
    background: var(--paper-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%238A8F98' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center;
    border: 1px solid var(--border); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
    padding: 12px 36px 12px 14px; border-radius: 7px;
  }

.rlp-app select:disabled { opacity: 0.6; }

.rlp-app select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.rlp-app .result-price { text-align: center; padding: 18px 10px 22px; border-bottom: 1px dashed var(--border); margin-bottom: 16px; }

.rlp-app .result-price .label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }

.rlp-app .result-price .num { font-size: 42px; font-weight: 600; line-height: 1; color: var(--accent); }

.rlp-app .breakdown { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }

.rlp-app .breakdown .row { display: flex; justify-content: space-between; font-size: 13.5px; }

.rlp-app .breakdown .row span:first-child { color: var(--ink-soft); }

.rlp-app .breakdown .row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

.rlp-app .breakdown .row.total { border-top: 1px solid var(--border); padding-top: 9px; margin-top: 2px; }

.rlp-app .breakdown .row.total span:last-child { color: var(--accent); }

.rlp-app .breakdown .row.profit span:last-child { color: var(--stamp); }

.rlp-app .list-block { margin-top: 26px; }

.rlp-app .list-block h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }

.rlp-app .list-block .sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

.rlp-app .supplier-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; margin-bottom: 16px; }

.rlp-app .supplier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }

.rlp-app .supplier-head .name { font-size: 16px; font-weight: 600; }

.rlp-app .supplier-head-actions { display: flex; gap: 2px; flex-shrink: 0; }

.rlp-app .supplier-meta { color: var(--muted); font-size: 12.5px; margin: 2px 0 16px; }

.rlp-app .sublabels-title { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: var(--ink-soft); margin: 0 0 10px; }

.rlp-app .sticker { background: var(--paper-2); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; margin-bottom: 8px; position: relative; }

.rlp-app .sticker::before { content: ""; position: absolute; top: -1px; left: 14px; right: 14px; height: 1px; background-image: linear-gradient(to right, var(--border) 50%, transparent 0%); background-size: 8px 1px; }

.rlp-app .sticker-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.rlp-app .sticker-info .name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }

.rlp-app .sticker-info .meta { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.rlp-app .sticker-price { text-align: right; flex-shrink: 0; }

.rlp-app .sticker-price .num { font-size: 18px; font-weight: 600; color: var(--stamp); }

.rlp-app .sticker-actions { display: flex; gap: 2px; margin-top: 4px; justify-content: flex-end; }

.rlp-app .empty-note { color: var(--muted); font-size: 13.5px; padding: 18px; text-align: center; border: 1px dashed var(--border); border-radius: 8px; }

.rlp-app .label-form { border: 1px dashed var(--border); border-radius: 9px; padding: 18px 18px 6px; margin-top: 14px; background: var(--paper-2); }

.rlp-app .label-form-title { font-size: 13.5px; font-weight: 700; margin: 0 0 14px; }

.rlp-app .shape-toggle { display: flex; gap: 8px; margin-bottom: 12px; }

.rlp-app .shape-toggle label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13.5px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; cursor: pointer; margin-bottom: 0; }

.rlp-app .shape-toggle input { margin: 0; }

.rlp-app .label-form-actions { display: flex; gap: 8px; margin: 4px 0 18px; }

.rlp-app .label-form-actions .btn { width: auto; }

.rlp-app .label-form-actions .btn-primary { flex: 1; }

.rlp-app .customer-wrap { max-width: 480px; margin: 0 auto; text-align: center; }

.rlp-app .customer-wrap .eyebrow { color: var(--muted); font-size: 14px; margin: 0 0 6px; }

.rlp-app .customer-wrap h2 { font-size: 26px; font-weight: 600; margin: 0 0 30px; }

.rlp-app .peel-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 30px 26px; text-align: left; }

.rlp-app .qty-row { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 26px; }

.rlp-app .qty-row label { margin-bottom: 0; }

.rlp-app .stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }

.rlp-app .stepper button { background: var(--paper-2); border: none; width: 34px; height: 34px; font-size: 17px; color: var(--ink-soft); cursor: pointer; }

.rlp-app .stepper button:hover { color: var(--accent); }

.rlp-app .stepper input { width: 64px; text-align: center; border: none; background: var(--card); font-family: 'Inter', sans-serif; font-size: 15px; padding: 8px 4px; }

.rlp-app .stepper input:focus-visible { outline: none; }

.rlp-app .total-block { border-top: 1px dashed var(--border); padding-top: 20px; text-align: center; }

.rlp-app .total-block .label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }

.rlp-app .total-block .num { font-size: 40px; font-weight: 600; color: var(--stamp); line-height: 1; }

.rlp-app .total-block .per-label { margin-top: 8px; font-size: 13.5px; color: var(--muted); }

.rlp-app .customer-empty { color: var(--muted); font-size: 14.5px; line-height: 1.6; padding: 10px 4px; }

.rlp-app .footnote { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 26px; }

.rlp-app ::selection { background: var(--accent); color: var(--accent-ink); }