.tool-hero { background:linear-gradient(135deg,#0891b2 0%,#0e7490 100%); padding:5rem 1.5rem 3rem; margin-top:68px; text-align:center; position:relative; overflow:hidden; }
.tool-hero::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.06); top:-150px; right:-100px; }
.tool-hero::after { content:''; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.04); bottom:-100px; left:-50px; }
.tool-hero-content { position:relative; z-index:1; }
.tool-hero-icon { width:72px; height:72px; border-radius:20px; background:rgba(255,255,255,.15); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1.25rem; border:1px solid rgba(255,255,255,.2); }
.tool-hero h1 { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:800; color:white; letter-spacing:-1px; margin-bottom:.75rem; }
.tool-hero p { font-size:1rem; color:rgba(255,255,255,.82); max-width:520px; margin:0 auto; }
.tool-main { max-width:900px; margin:0 auto; padding:2.5rem 1.5rem 5rem; }

.drop-zone { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:3.5rem 2rem; text-align:center; background:white; transition:var(--transition); cursor:pointer; position:relative; overflow:hidden; margin-bottom:1.5rem; }
.drop-zone:hover,.drop-zone.drag-over { border-color:#0891b2; background:rgba(8,145,178,.03); }
.drop-zone.drag-over { transform:scale(1.01); }
.drop-zone-icon { font-size:3rem; margin-bottom:1rem; display:block; }
.drop-zone-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.375rem; }
.drop-zone-sub { font-size:.82rem; color:var(--text-muted); }
.drop-zone-btn { display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; padding:.55rem 1.25rem; background:linear-gradient(135deg,#0891b2,#0e7490); color:white; border:none; border-radius:100px; font-size:.82rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:var(--transition); box-shadow:0 4px 12px rgba(8,145,178,.3); }
.drop-zone-btn:hover { transform:translateY(-1px); }
.drop-input { display:none; }

.rz-error { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); color:#dc2626; padding:.75rem 1rem; border-radius:var(--radius-sm); font-size:.85rem; font-weight:600; margin-bottom:1.5rem; }

.rz-layout { display:grid; grid-template-columns:320px 1fr; gap:1.5rem; }
.rz-controls { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); padding:1.5rem; height:fit-content; }
.rz-panel-title { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:1rem; }

.rz-mode-group { display:flex; gap:.5rem; background:var(--bg); padding:.3rem; border-radius:var(--radius-sm); margin-bottom:1.25rem; }
.rz-mode-btn { flex:1; padding:.5rem; border:none; background:transparent; border-radius:6px; font-size:.82rem; font-weight:700; font-family:'Inter',sans-serif; color:var(--text-muted); cursor:pointer; transition:var(--transition); }
.rz-mode-btn.active { background:white; color:#0891b2; box-shadow:var(--shadow-sm); }

.rz-field { margin-bottom:1rem; }
.rz-label { display:block; font-size:.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:.375rem; }
.rz-input { width:100%; padding:.6rem .8rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:.9rem; font-family:'Inter',sans-serif; color:var(--text); outline:none; background:var(--bg); transition:var(--transition); }
.rz-input:focus { border-color:#0891b2; background:white; }

.rz-lock { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--text); cursor:pointer; margin:.25rem 0 1.25rem; }
.rz-lock input { width:16px; height:16px; accent-color:#0891b2; cursor:pointer; }

.rz-info { background:var(--bg); border-radius:var(--radius-sm); padding:.875rem 1rem; margin-bottom:1.25rem; }
.rz-info-row { display:flex; justify-content:space-between; align-items:center; padding:.3rem 0; font-size:.82rem; }
.rz-info-label { color:var(--text-muted); font-weight:600; }
.rz-info-val { color:var(--text); font-weight:700; }
.rz-info-val-hl { color:#0891b2; }

.rz-btn-primary { width:100%; padding:.75rem; background:linear-gradient(135deg,#0891b2,#0e7490); color:white; border:none; border-radius:var(--radius); font-size:.9rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:var(--transition); box-shadow:0 4px 12px rgba(8,145,178,.3); }
.rz-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(8,145,178,.4); }
.rz-btn-reset { width:100%; margin-top:.625rem; padding:.6rem; background:transparent; color:var(--text-muted); border:1.5px solid var(--border); border-radius:var(--radius); font-size:.85rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:var(--transition); }
.rz-btn-reset:hover { border-color:var(--text); color:var(--text); }

.rz-preview { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); padding:1.5rem; }
.rz-preview-title { font-size:.95rem; font-weight:700; color:var(--text); margin-bottom:1rem; }
.rz-preview-stage { min-height:300px; display:flex; align-items:center; justify-content:center; background:var(--bg); border-radius:var(--radius-sm); padding:1rem; overflow:auto; background-image:linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0px; }
.rz-preview-stage canvas { max-width:100%; height:auto; border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.12); }

.breadcrumb-nav { color:var(--text-muted); margin-bottom:1.5rem; }
.breadcrumb-nav a { color:var(--text-muted); }
.breadcrumb-nav a:hover { color:#0891b2; }
.breadcrumb-nav .bc-current { color:var(--text); }

@media (max-width:768px) {
  .rz-layout { grid-template-columns:1fr; }
}