:root { --purple:#6d28d9; --purple-dark:#4c1d95; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f7f3ff; --ok:#047857; --bad:#b91c1c; }
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, sans-serif; color:var(--ink); background:linear-gradient(180deg, var(--bg), #fff); }
.shell { width:min(1360px, calc(100% - 32px)); margin:24px auto; display:grid; grid-template-columns:minmax(360px, .95fr) minmax(320px, .85fr) minmax(360px, .95fr); gap:18px; align-items:start; }
.panel { background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 45px rgba(76,29,149,.10); padding:24px; }
.preview, .customerPanel { position:sticky; top:16px; }
.customerPanel { display:block; }
.customerPanel h2 { margin-bottom:4px; }
h1 { margin:0 0 8px; color:var(--purple-dark); font-size:30px; line-height:1.2; }
h2 { margin:0 0 14px; color:var(--purple-dark); }
p { margin:0 0 18px; color:var(--muted); }
label { display:block; font-weight:700; margin:14px 0 7px; }
input, textarea, select { width:100%; border:1px solid #d1d5db; border-radius:7px; padding:12px; font-size:16px; outline:none; background:#fff; }
textarea { min-height:86px; resize:vertical; }
input:focus, textarea:focus, select:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(109,40,217,.15); }
.tabs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:18px 0; }
.tab { background:#f3f4f6; color:var(--ink); }
.tab.active { background:var(--purple); color:#fff; }
.tabPane, .variantArea, .resetBtn { display:none; }
.customerArea { display:block; }
.tabPane.active, .variantArea.active, .resetBtn.active { display:block; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
button { border:0; border-radius:7px; padding:12px 16px; font-weight:800; cursor:pointer; font-size:15px; margin-top:14px; }
.compact { margin-top:8px; padding:10px 14px; }
.pasteResetRow { display:grid; grid-template-columns:1fr 92px; gap:8px; align-items:center; }
.pasteResetRow button { width:100%; }
.resetSmall { background:#f3f4f6; color:var(--ink); }
.primary { background:var(--purple); color:#fff; }
.secondary { background:#ede9fe; color:var(--purple-dark); }
.wide { width:100%; }
.smallLabel { font-size:13px; color:var(--muted); margin-top:10px; }
button:disabled { opacity:.65; cursor:not-allowed; }
.message { display:none; margin-top:14px; padding:12px; border-radius:7px; font-weight:700; }
.error { color:var(--bad); background:#fee2e2; }
.success { color:var(--ok); background:#d1fae5; }
.searchStatus { color:var(--muted); font-size:14px; margin-top:8px; }
.results { border:1px solid var(--line); border-radius:8px; margin-top:10px; overflow:hidden; display:none; }
.result { display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:0; border-bottom:1px solid var(--line); background:#fff; color:var(--ink); text-align:left; margin:0; border-radius:0; }
.result:last-child { border-bottom:0; }
.result:hover { background:#faf5ff; }
.imageCart { margin-top:12px; display:grid; gap:10px; }
.cartItem { position:relative; border:1px solid var(--line); border-radius:8px; padding:12px; background:#fafafa; }
.cartHead { display:grid; grid-template-columns:58px 1fr 34px; gap:10px; align-items:start; margin-bottom:8px; }
.cartHead strong { line-height:1.35; overflow-wrap:anywhere; }
.cartThumb { width:58px; height:58px; object-fit:cover; border-radius:7px; background:#f3f4f6; border:1px solid var(--line); }
.cartThumbEmpty { display:block; }
.removeCartItem { width:34px; height:34px; margin:0; padding:0; border-radius:7px; background:#fee2e2; color:#b91c1c; font-size:20px; line-height:1; }
.cartItem select { margin-top:8px; }
.cartMeta { display:grid; grid-template-columns:90px 1fr; gap:8px; align-items:center; }
.manualAdd { margin-top:14px; padding-top:4px; }
.manualResults { max-height:260px; overflow:auto; }
.thumb { width:48px; height:48px; object-fit:cover; border-radius:7px; background:#f3f4f6; flex:0 0 48px; }
.previewImage { width:100%; aspect-ratio:16/9; max-height:260px; object-fit:contain; border-radius:8px; margin-bottom:14px; background:#f8fafc; border:1px solid var(--line); }
.line { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); }
.line span:first-child { color:var(--muted); }
.line strong { text-align:right; overflow-wrap:anywhere; }
.country { margin:14px 0 4px; color:var(--muted); }
.successBox { display:none; margin-top:18px; }
.pasteModal { position:fixed; inset:0; display:none; place-items:center; padding:18px; background:rgba(17,24,39,.48); z-index:20; }
.pasteModal.active { display:grid; }
.pasteBox { width:min(520px, 100%); background:#fff; border-radius:8px; padding:20px; box-shadow:0 24px 70px rgba(17,24,39,.24); }
.pasteBox textarea { min-height:190px; }
.pasteActions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width: 1180px) { .shell { grid-template-columns:1fr 1fr; } .customerPanel { grid-column:1 / -1; position:static; } .preview { position:sticky; } }
@media (max-width: 820px) { .shell { grid-template-columns:1fr; margin:16px auto; } .preview { position:static; } }
@media (max-width: 620px) { .grid2 { grid-template-columns:1fr; } .tabs { grid-template-columns:1fr; } }