.tool-hero { background:linear-gradient(135deg,#065f46 0%,#059669 50%,#10b981 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:540px; margin:0 auto; }
.tool-main { max-width:1080px; margin:0 auto; padding:2.5rem 1.5rem 5rem; }

.breadcrumb-nav { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; font-size:.82rem; margin-bottom:1.5rem; }
.breadcrumb-nav a { color:var(--text-muted); text-decoration:none; }
.breadcrumb-nav a:hover { color:#059669; }
.bc-sep { color:var(--text-light); }
.bc-current { color:var(--text); font-weight:600; }

.mtg-layout { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }

.mtg-form-panel { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); padding:1.5rem; }
.mtg-section-title { font-size:.9rem; font-weight:800; color:var(--text); margin:1.25rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.mtg-section-title:first-child { margin-top:0; }
.mtg-toggle-head { display:flex; align-items:center; justify-content:space-between; }

.field-group { margin-bottom:1rem; }
.field-label { display:flex; align-items:center; justify-content:space-between; font-size:.78rem; font-weight:600; color:var(--text-muted); margin-bottom:.4rem; }
.field-input { width:100%; padding:.6rem .8rem; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:.875rem; font-family:'Inter',sans-serif; color:var(--text); outline:none; background:var(--bg); transition:var(--transition); }
.field-input:focus { border-color:#10b981; background:white; }
textarea.field-input { resize:vertical; }
.field-color { width:100%; height:42px; padding:3px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); cursor:pointer; }
.mtg-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }

.char-counter { font-size:.72rem; font-weight:700; color:var(--text-light); }
.char-counter.warn { color:var(--warning); }
.char-counter.over { color:var(--danger); }

.mtg-switch { position:relative; display:inline-block; width:40px; height:22px; }
.mtg-switch input { opacity:0; width:0; height:0; }
.mtg-slider { position:absolute; cursor:pointer; inset:0; background:var(--border); border-radius:100px; transition:var(--transition); }
.mtg-slider::before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:white; border-radius:50%; transition:var(--transition); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.mtg-switch input:checked + .mtg-slider { background:#10b981; }
.mtg-switch input:checked + .mtg-slider::before { transform:translateX(18px); }

.btn-reset-mtg { width:100%; margin-top:1rem; padding:.7rem; 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); }
.btn-reset-mtg:hover { border-color:var(--danger); color:var(--danger); }

.mtg-output-panel { display:flex; flex-direction:column; gap:1.5rem; position:sticky; top:88px; }
.mtg-preview-card,.mtg-code-card { background:white; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); padding:1.25rem; }
.mtg-preview-label { font-size:.78rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }

.google-preview { margin-top:1rem; padding:1rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); }
.google-url { font-size:.8rem; color:#202124; margin-bottom:.2rem; word-break:break-all; }
.google-title { font-size:1.15rem; color:#1a0dab; font-weight:500; line-height:1.3; margin-bottom:.25rem; word-break:break-word; }
.google-desc { font-size:.82rem; color:#4d5156; line-height:1.5; }

.mtg-code-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.btn-copy-mtg { padding:.45rem 1rem; background:linear-gradient(135deg,#10b981,#059669); color:white; border:none; border-radius:var(--radius-sm); font-size:.78rem; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:var(--transition); box-shadow:0 4px 12px rgba(16,185,129,.25); }
.btn-copy-mtg:hover { transform:translateY(-1px); }
.mtg-code-box { background:#0f172a; color:#e2e8f0; border-radius:var(--radius-sm); padding:1rem; overflow-x:auto; font-size:.78rem; line-height:1.6; font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; white-space:pre-wrap; word-break:break-word; max-height:420px; overflow-y:auto; }
.mtg-code-box code { font-family:inherit; }

@media (max-width:860px){
  .mtg-layout { grid-template-columns:1fr; }
  .mtg-output-panel { position:static; }
}
@media (max-width:480px){
  .mtg-grid-2 { grid-template-columns:1fr; }
}