/* CropMyLabel seller-tool UI — dark dashboard theme inspired by the supplied references.
   Styling-only layer: existing HTML and JavaScript behavior remain unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700;750;800&display=swap');
:root{
 --ink:#f4f7ff;--ink-soft:#aeb9ca;--kraft:#0b101a;--kraft-deep:#141d2b;--paper:#1e2938;
 --rule:#354154;--rule-soft:#2a3547;--courier:#3268f5;--courier-dk:#5145ef;
 --stamp:#00c995;--stamp-soft:#103e3a;--display:Inter,system-ui,sans-serif;--body:Inter,system-ui,sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,monospace;--max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;background:var(--kraft);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:#83a8ff;text-decoration:none}a:hover{color:#b4c8ff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #818cf8;outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:750;line-height:1.2;letter-spacing:-.025em;margin:0 0 .55em;color:var(--ink)}
h1{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;letter-spacing:-.04em}h2{font-size:clamp(1.55rem,3vw,2.25rem)}h3{font-size:1.12rem}
p{margin:0 0 1em;max-width:70ch;color:var(--ink-soft)}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,20,31,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--rule)}
.nav{width:min(var(--max),calc(100% - 40px));min-height:70px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:1.35rem;font-weight:800;letter-spacing:-.05em;color:var(--ink)}.brand .dot{color:#6884ff}
.nav-links{display:flex;align-items:center;gap:25px;list-style:none;margin:0;padding:0}.nav-links a{color:#b7c1d1;font-size:.9rem;font-weight:600}.nav-links a:hover{color:#fff}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #426cff;border-radius:11px;background:linear-gradient(105deg,#2865f4,#5544eb);color:#fff!important;padding:11px 17px;font-weight:750;box-shadow:0 5px 16px #203d9238;transition:transform .18s,box-shadow .18s}
.nav-cta:hover,.btn:hover{box-shadow:0 8px 22px #203d9255;transform:translateY(-1px)}
.btn.secondary{background:#202a3a;color:#e8eefb!important;border-color:#3b485c;box-shadow:none}.btn.secondary:hover{background:#273448}
.nav-toggle{display:none;border:1px solid var(--rule);border-radius:10px;background:#202a3a;padding:9px 12px;font-weight:700;color:var(--ink)}
.hero{padding:clamp(42px,7vw,78px) 0 52px;background:radial-gradient(ellipse at 82% 8%,#3535a72b,transparent 36%),linear-gradient(180deg,#111a28 0%,#0b101a 100%);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:clamp(28px,6vw,76px)}
.hero-tag,.mono-label,.k{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9eb4ff}
.hero-tag{padding:7px 11px;border-radius:999px;background:#202b4a;border:1px solid #354b8d;margin-bottom:18px}
.lede{font-size:clamp(1rem,1.5vw,1.13rem);line-height:1.75;color:var(--ink-soft);max-width:60ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.barcode{height:36px;margin-bottom:12px;border-radius:7px;background:repeating-linear-gradient(90deg,#eaf0ff 0 2px,transparent 2px 5px,#eaf0ff 5px 6px,transparent 6px 10px);opacity:.8}
.hero-label-card,.panel,.tool-card,.step,.faq-item,.content-card,.tool-panel,.upload-card,.preview-card,.settings-card{background:#182231;border:1px solid #354154;border-radius:16px;box-shadow:0 12px 34px #00000018}
.hero-label-card{padding:23px;transform:rotate(1deg)}
.field{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--rule-soft)}.field span{font-size:.7rem;font-weight:800;letter-spacing:.06em;color:#8491a6}.field b{font-size:.88rem;color:var(--ink);text-align:right}
.ship-to{padding:18px 0;font-weight:700;line-height:1.7}
.market-strip{padding:18px 0;background:#111a27;border-bottom:1px solid var(--rule)}.market-strip .container{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.market-list{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}.market-list li{padding:6px 11px;border:1px solid #344154;border-radius:9px;background:#192434;color:#b8c5d8;font-size:.82rem;font-weight:650}
.section{padding:clamp(44px,6vw,76px) 0}.section-head{margin-bottom:25px}.section-head .mono-label{margin-bottom:10px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.step{padding:21px}.step .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#253567;color:#9eb4ff;font-weight:800;margin-bottom:17px}.step p{font-size:.9rem;margin-bottom:0}
.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.tool-card{display:flex;flex-direction:column;align-items:flex-start;padding:22px;min-height:185px;color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s}.tool-card:hover{color:#fff;transform:translateY(-3px);border-color:#4f66e8;box-shadow:0 16px 38px #0003}.tool-card .k{font-size:.66rem;color:#b6c6ff;background:#202c4c;padding:5px 8px;border-radius:7px;letter-spacing:.04em;margin-bottom:14px}.tool-card h3{margin-bottom:8px}.tool-card p{font-size:.9rem;line-height:1.6;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:24px max(20px,calc((100% - var(--max))/2));background:#111a27}.stat{display:flex;flex-direction:column;gap:4px;padding:17px;border:1px solid #344154;border-radius:12px;background:#182231}.stat .n{font-size:1.55rem;font-weight:800;color:#8ba4ff}.stat .l{font-size:.85rem;color:var(--ink-soft)}
footer,.site-footer{background:#0e1520;border-top:1px solid var(--rule);padding:30px 0;color:var(--ink-soft)}footer a,.site-footer a{color:#aebbd0}
/* Tool controls: grouped panels and strong primary actions */
.tool-hero,.page-hero{padding:34px 0 24px;background:linear-gradient(180deg,#172231,#101722);border-bottom:1px solid var(--rule)}
.tool-layout,.tool-workspace,.crop-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.85fr);gap:18px;align-items:start}
.tool-panel,.upload-card,.preview-card,.settings-card{padding:21px;min-width:0}
label{font-weight:650;color:#dce5f5;font-size:.88rem}
input[type=file],input[type=text],input[type=number],input[type=email],select,textarea{max-width:100%;border:1px solid #3b485c;border-radius:10px;background:#141d2b;padding:10px 12px;color:var(--ink);font:inherit}
input[type=range]{width:100%;accent-color:#3972ff}
button{font:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}
button:not(.nav-toggle){border-radius:10px}
.dropzone,#dropzone{border:1px dashed #52648a;border-radius:13px;background:#151f2e;padding:27px 18px;text-align:center;transition:background .2s,border-color .2s}
.dropzone:hover,#dropzone:hover{background:#1b2840;border-color:#5a75ff}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:.9rem}
#previewCanvas,canvas{max-width:100%;height:auto;border-radius:9px}
#statusLine,.status-line{padding:10px 12px;border-radius:9px;background:#172f4c;color:#b7d8ff;font-size:.88rem}#statusLine.err{background:#401f2a;color:#ffc3cd}
hr{border:0;border-top:1px solid var(--rule);margin:22px 0}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--rule);font-size:.9rem}th{color:#aebbd0;background:#172231}
.faq-item{padding:18px;margin-bottom:11px}.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:850px){.hero-grid,.tool-layout,.tool-workspace,.crop-layout{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-grid,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-toggle{display:block}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;padding:17px 22px 20px;background:#101824;border-bottom:1px solid var(--rule);box-shadow:0 16px 25px #0005;flex-direction:column;align-items:stretch;gap:14px}.nav-links.open{display:flex}}
@media(max-width:560px){.container,.nav{width:min(100% - 28px,var(--max))}.hero{padding:40px 0}.tool-grid,.steps,.blog-grid,.stats{grid-template-columns:1fr}.tool-card{min-height:0;padding:19px}.tool-panel,.upload-card,.preview-card,.settings-card{padding:16px}.market-strip .container{gap:11px}h1{font-size:clamp(2rem,10vw,2.8rem)}}


/* Modern seller-workflow tool UI — based on the supplied processing-mode references */
:root{
 --app-bg:#0b1220;--panel-bg:#202b3b;--panel-deep:#151f2e;--panel-border:#35445a;
 --blue:#2864f0;--violet:#5145ed;--green:#00b985;--muted-text:#9aabc2;
}
html{color-scheme:dark}
body{background:var(--app-bg);color:#f5f7fc}
.site-header{background:rgba(13,20,33,.96);border-bottom-color:#2c394c}
.brand{color:#f7f9ff}
.nav-links a{color:#c0cad9}
.hero{background:radial-gradient(ellipse at 80% 0%,rgba(72,91,230,.17),transparent 42%),linear-gradient(180deg,#111a2a,#0b1220);border-bottom-color:#29364a}
.hero-tag{background:#1a2b4a;border-color:#29477b;color:#8eb5ff}
.lede,p{color:#aebbd0}
.tool-app{
 display:grid;grid-template-columns:minmax(0,1fr);gap:16px;
 max-width:1040px;margin:28px auto 56px;padding:clamp(14px,2.4vw,28px);
 border:1px solid #3a485c;border-radius:20px;
 background:linear-gradient(155deg,#202b3a 0%,#1a2433 100%);
 box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.tool-app-main,.tool-app-side{min-width:0}
.tool-app-main{display:flex;flex-direction:column;gap:14px}
.tool-app-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
.dropzone{
 border:1px dashed #4b5a70!important;border-radius:13px!important;
 background:#151f2e!important;padding:26px 18px!important;min-height:86px;
 display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 12px;
 cursor:pointer;transition:border-color .2s,background .2s;
}
.dropzone:hover,.dropzone:focus{border-color:#5e83ff!important;background:#18253a!important}
.dropzone p{margin:0;color:#c9d4e5}
.dropzone p strong{font-size:1rem;color:#f7f9ff}
.dropzone .hint{font-size:.84rem;color:#91a2bc}
#fileList{display:grid;gap:8px}
#fileList>div,.file-row{background:#172232;border:1px solid #334258;border-radius:10px;padding:11px 14px;color:#dbe5f3}
.preview-wrap{
 position:relative;min-height:190px;display:flex;align-items:center;justify-content:center;
 padding:18px;border:1px solid #354359;border-radius:14px;background:#151f2e;overflow:hidden;
}
#previewCanvas{display:block;max-width:100%;max-height:560px;object-fit:contain;background:#fff;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.24)}
#cropOverlay{background:rgba(71,102,245,.16)!important;border-bottom:2px dashed #6686ff!important}
#statusLine,.status-line{margin:0;padding:10px 13px;border:1px solid #2d4967;border-radius:10px;background:#142b40;color:#9dd6ff}
#statusLine.err{background:#3a2029;border-color:#78404a;color:#ffc0c9}
.tool-app-side .range-row{
 min-width:0;padding:15px 16px;border:1px solid #354359;border-radius:13px;background:#172232;
 display:flex;flex-direction:column;gap:11px;
}
.range-row label{display:flex;justify-content:space-between;gap:12px;color:#e7edf7;font-size:.86rem}
.range-row label span:last-child{color:#9db5ff;font-variant-numeric:tabular-nums}
input[type=range]{accent-color:#4f6fff;cursor:pointer}
select,input[type=text],input[type=number]{width:100%;background:#111b2a;border:1px solid #40516a;border-radius:9px;color:#f3f6fc;padding:11px 12px}
.btn,.nav-cta,#cropBtn{
 border:0!important;border-radius:11px!important;
 background:linear-gradient(100deg,#2864f0,#5145ed)!important;color:white!important;
 padding:13px 18px!important;font-weight:750!important;
 box-shadow:0 7px 20px rgba(43,89,237,.22);transition:filter .2s,transform .2s;
}
.btn:hover,.nav-cta:hover,#cropBtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
#cropBtn{grid-column:1/-1;width:100%;min-height:48px}
.tool-app-side .mono-label{grid-column:1/-1;margin:0;padding:13px 15px;background:#16283a;border:1px solid #29465c;border-radius:11px;color:#9bb4cc;font-size:.8rem;letter-spacing:0;text-transform:none;line-height:1.6}
.section.prose{color:#aebbd0}
.section.prose h2,.section.prose h3{color:#f4f7fc}
.tool-card,.step,.faq-item,.content-card{background:#1b2636;border-color:#334155;color:#f5f7fc}
.tool-card p,.step p{color:#aebbd0}
.tool-card .k{background:#1b3152;color:#8eb5ff}
.site-footer,footer{background:#101927;border-color:#2c394c}
@media(min-width:760px){
 .tool-app{grid-template-columns:minmax(0,1.1fr) minmax(310px,.8fr);align-items:start}
 .tool-app-main{grid-column:1;grid-row:1}
 .tool-app-side{grid-column:2;grid-row:1;position:sticky;top:88px}
 .tool-app-main .dropzone{min-height:110px}
}
@media(max-width:759px){
 .tool-app-side{grid-template-columns:1fr}
 .tool-app{margin:18px auto 38px}
 .tool-app-side{position:static}
}
@media(max-width:480px){
 .dropzone{padding:22px 12px!important}
 .preview-wrap{padding:10px;min-height:145px}
 .tool-app{border-radius:14px}
}


/* Theme switch: dark is default; light mode is user-selectable */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:42px;min-height:40px;padding:8px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);color:var(--ink);font-weight:700;cursor:pointer;white-space:nowrap}
.theme-toggle .theme-icon{font-size:1.05rem;line-height:1}
.theme-toggle:hover{border-color:#818cf8;transform:translateY(-1px)}
.nav .theme-toggle{margin-left:auto}
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"]{
 --ink:#172033;--ink-soft:#596579;--kraft:#f4f7fc;--kraft-deep:#eaf0f8;--paper:#fff;
 --rule:#dce4f0;--rule-soft:#e9eef6;--courier:#315ff4;--courier-dk:#4338ca;
 --stamp:#059669;--stamp-soft:#e3f8ef;
}
html[data-theme="light"] body{background:var(--kraft)!important;color:var(--ink)!important}
html[data-theme="light"] .site-header{background:rgba(255,255,255,.94)!important;border-color:var(--rule)!important}
html[data-theme="light"] .hero,html[data-theme="light"] .tool-hero,html[data-theme="light"] .page-hero{background:linear-gradient(180deg,#fff,#f4f7ff)!important;border-color:var(--rule)!important}
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,html[data-theme="light"] h4,
html[data-theme="light"] .section.prose h2,html[data-theme="light"] .section.prose h3{color:var(--ink)!important}
html[data-theme="light"] p,html[data-theme="light"] .tool-card p,html[data-theme="light"] .step p{color:var(--ink-soft)!important}
html[data-theme="light"] a{color:#334fc9}
html[data-theme="light"] .nav-links a{color:#4b5870}
html[data-theme="light"] .nav-links a:hover{color:var(--courier-dk)}
html[data-theme="light"] .tool-card,html[data-theme="light"] .step,html[data-theme="light"] .faq-item,
html[data-theme="light"] .content-card,html[data-theme="light"] .panel,html[data-theme="light"] .tool-panel,
html[data-theme="light"] .upload-card,html[data-theme="light"] .preview-card,html[data-theme="light"] .settings-card,
html[data-theme="light"] .hero-label-card{background:#fff!important;border-color:var(--rule)!important;color:var(--ink)!important;box-shadow:0 10px 30px rgba(31,48,85,.055)}
html[data-theme="light"] .tool-card .k,html[data-theme="light"] .hero-tag{background:#eef2ff!important;color:#3730a3!important;border-color:#dbe3ff!important}
html[data-theme="light"] .market-strip,html[data-theme="light"] footer,html[data-theme="light"] .site-footer{background:#fff!important;border-color:var(--rule)!important;color:var(--ink-soft)!important}
html[data-theme="light"] .market-list li,html[data-theme="light"] .stat{background:#f8faff!important;border-color:var(--rule)!important;color:var(--ink-soft)!important}
html[data-theme="light"] .stat .n{color:var(--courier-dk)!important}
html[data-theme="light"] .dropzone,html[data-theme="light"] #dropzone{background:#f7f9ff!important;border-color:#aab9ff!important;color:var(--ink)!important}
html[data-theme="light"] .dropzone p strong,html[data-theme="light"] .dropzone .hint{color:var(--ink-soft)!important}
html[data-theme="light"] #fileList>div,html[data-theme="light"] .file-row{background:#fff!important;border-color:var(--rule)!important;color:var(--ink)!important}
html[data-theme="light"] .preview-wrap{background:#f0f3f9!important;border-color:var(--rule)!important}
html[data-theme="light"] .range-row,html[data-theme="light"] .tool-app-side .range-row{background:#fff!important;border-color:var(--rule)!important}
html[data-theme="light"] .range-row label{color:var(--ink)!important}
html[data-theme="light"] select,html[data-theme="light"] input[type=text],html[data-theme="light"] input[type=number],html[data-theme="light"] input[type=email],html[data-theme="light"] textarea{background:#fff!important;border-color:#cbd5e1!important;color:var(--ink)!important}
html[data-theme="light"] .tool-app-side .mono-label{background:#f3f6fc!important;border-color:var(--rule)!important;color:#56647a!important}
html[data-theme="light"] #statusLine,html[data-theme="light"] .status-line{background:#eff6ff!important;border-color:#bfdbfe!important;color:#1d4ed8!important}
html[data-theme="light"] #statusLine.err{background:#fff1f2!important;border-color:#fecdd3!important;color:#9f1239!important}
html[data-theme="light"] .studio-tabs .studio-tab{background:#f1f5f9!important;color:#334155!important;border-color:#d7e0ed!important}
html[data-theme="light"] .studio-tabs .studio-tab.active{background:linear-gradient(110deg,#2563eb,#4f46e5)!important;color:#fff!important}
html[data-theme="light"] .studio-panel{background:#fff!important;border-color:var(--rule)!important}
html[data-theme="light"] .studio-panel h2{color:var(--ink)!important}
html[data-theme="light"] .studio-panel p{color:var(--ink-soft)!important}
html[data-theme="light"] .studio-drop,html[data-theme="light"] .page-row{background:#f8faff!important;border-color:var(--rule)!important;color:var(--ink)!important}
html[data-theme="light"] .page-num{color:var(--ink)!important}
html[data-theme="light"] th{background:#f1f5f9!important;color:#475569!important}
html[data-theme="light"] td{color:var(--ink)!important}
html[data-theme="light"] .btn.secondary{background:#fff!important;color:var(--ink)!important;border-color:var(--rule)!important}
html[data-theme="light"] .theme-toggle{background:#fff;color:#172033}
html[data-theme="light"] .site-footer a,html[data-theme="light"] footer a{color:#4b5870}
@media(max-width:850px){
 .nav .theme-toggle{margin-left:0}
 html[data-theme="light"] .nav-links{background:#fff!important;border-color:var(--rule)!important}
}