/* ── TOKENS ── */
:root{
  --brand:#4eb39a;--brand-dark:#3a9b83;--brand-deep:#0e2d27;
  --accent-light:#e1f5ee;--accent-mid:#b3e6d8;
  --text:#1a2e2b;--text-muted:#5f7a74;--text-subtle:#94aaa6;
  --bl:rgba(78,179,154,.15);--bm:rgba(78,179,154,.25);--bs:rgba(78,179,154,.4);
  --green:#16a34a;--red:#dc2626;--blue:#2563eb;--yellow:#d97706;
  --bg0:#f5f9f8;--bg1:#fff;--bg3:#eaf4f1;
  --mono:'DM Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ══ HERO ══ */
.ipc-hero{background:linear-gradient(145deg,#0e2d27 0%,#1a4a3d 60%,#0e3530 100%);border-bottom:1px solid rgba(78,179,154,.2);padding:2.5rem 2rem 2rem;position:relative;overflow:hidden}
.ipc-hero::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:700px;height:340px;background:radial-gradient(ellipse,rgba(78,179,154,.09) 0%,transparent 70%);pointer-events:none}
.ipc-hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(78,179,154,.4),transparent)}
.ipc-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 310px;gap:2.5rem;align-items:center;position:relative;z-index:1}
.ipc-eyebrow{font-family:var(--mono);font-size:.65rem;font-weight:500;color:rgba(111,209,179,.7);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.55rem;display:flex;align-items:center;gap:7px}
.ipc-eyebrow::before{content:'//';opacity:.5}
.ipc-hero h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.02em;margin-bottom:.5rem}
.ipc-hero h1 em{font-style:normal;color:#6fd1b3}
.ipc-hero-desc{font-size:.875rem;color:rgba(255,255,255,.55);line-height:1.8;max-width:480px}
.ipc-feat-list{display:flex;flex-direction:column;gap:4px;margin-top:.9rem}
.ipc-feat{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.7rem;color:rgba(255,255,255,.45)}
.ipc-feat::before{content:'▸';color:#6fd1b3;font-size:8px}
.hero-badge{background:rgba(78,179,154,.15);border:1px solid rgba(78,179,154,.35);border-radius:10px;padding:1.1rem 1.2rem}
.hero-badge-label{font-family:var(--mono);font-size:.6rem;color:rgba(111,209,179,.6);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.hero-badge-name{font-family:var(--mono);font-size:.8rem;color:#6fd1b3;word-break:break-all;line-height:1.6}
.hero-badge-name span{color:rgba(255,255,255,.35)}
.hero-badge-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;color:rgba(255,255,255,.35);margin-top:.55rem;padding-top:.5rem;border-top:1px solid rgba(78,179,154,.15)}
.hero-badge-row b{color:rgba(111,209,179,.7)}

/* ══ MAIN ══ */
.ipc-main{max-width:1200px;margin:0 auto;padding:1.75rem 2rem}
.sec-title{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.75rem}
.sec-title::after{content:'';flex:1;height:1px;background:rgba(78,179,154,.15)}

/* ══ TOOL CARD ══ */
.tool-card{background:#fff;border:1px solid rgba(78,179,154,.18);border-radius:12px;margin-bottom:1.5rem;overflow:hidden;transition:box-shadow .2s}
.tool-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.tc-head{background:#f5f9f8;padding:.8rem 1.4rem;border-bottom:1px solid rgba(78,179,154,.12);display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.tc-title{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:#0e2d27}
.tc-title svg{width:14px;height:14px;stroke:#3a9b83;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tc-body{padding:1.25rem 1.4rem}

/* ══ FORM ══ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-row{display:flex;flex-direction:column;gap:5px}
.form-row label{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--text-muted);letter-spacing:.07em;text-transform:uppercase}
.form-row input,.form-row select{border:1px solid rgba(78,179,154,.25);border-radius:8px;padding:9px 13px;font-family:var(--mono);font-size:.82rem;color:var(--text);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
.form-row input:focus,.form-row select:focus{border-color:#4eb39a;box-shadow:0 0 0 3px rgba(78,179,154,.12)}
.form-row input.err{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.form-row input.ok{border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.08)}
.form-hint{font-size:.7rem;color:var(--text-subtle);margin-top:2px}
.form-full{grid-column:1/-1}

/* ══ PREVIEW BOX ══ */
.preview-box{background:#0e2d27;border:1px solid rgba(78,179,154,.25);border-radius:10px;padding:1rem 1.2rem;margin-top:1rem;position:relative}
.preview-label{font-family:var(--mono);font-size:.6rem;color:rgba(111,209,179,.5);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}
.preview-name{font-family:var(--mono);font-size:1rem;color:#6fd1b3;word-break:break-all;line-height:1.5}
.preview-name .prefix{color:#fff}
.preview-name .suffix{color:rgba(111,209,179,.55)}
.preview-name .an{color:#f9cb42}
.preview-empty{font-family:var(--mono);font-size:.8rem;color:rgba(255,255,255,.2);font-style:italic}
.preview-meta{display:flex;gap:1.5rem;margin-top:.75rem;padding-top:.7rem;border-top:1px solid rgba(78,179,154,.12);flex-wrap:wrap}
.preview-meta-item{font-family:var(--mono);font-size:.68rem}
.preview-meta-item .mk{color:rgba(255,255,255,.3)}
.preview-meta-item .mv{color:rgba(255,255,255,.75);font-weight:600}
.preview-copy-btn{position:absolute;top:.75rem;right:.75rem}

/* ══ VALIDATION ══ */
.val-list{display:flex;flex-direction:column;gap:5px;margin-top:.85rem}
.val-item{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;padding:5px 9px;border-radius:6px;transition:background .15s}
.val-item.pass{color:#15803d;background:rgba(22,163,74,.07)}
.val-item.fail{color:#dc2626;background:rgba(220,38,38,.07)}
.val-item.idle{color:var(--text-subtle);background:rgba(0,0,0,.02)}
.val-icon{width:14px;height:14px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}

/* ══ CODE TABS ══ */
.code-tabs{display:flex;gap:2px;margin-bottom:0;flex-wrap:wrap}
.code-tab{font-family:var(--mono);font-size:.7rem;font-weight:600;padding:6px 13px;border:1px solid rgba(78,179,154,.2);border-bottom:none;border-radius:7px 7px 0 0;background:#f5f9f8;color:var(--text-muted);cursor:pointer;transition:all .15s}
.code-tab.active{background:#fff;color:#0e2d27;border-color:rgba(78,179,154,.2);border-bottom-color:#fff;position:relative;z-index:1}
.code-tab:hover:not(.active){background:#e1f5ee;color:#3a9b83}
.code-panel{display:none}
.code-panel.active{display:block}
.code-wrap{background:#0e2d27;border:1px solid rgba(78,179,154,.2);border-radius:0 8px 8px 8px;overflow:hidden;position:relative}
.code-block{padding:1.1rem 1.2rem;font-family:var(--mono);font-size:.78rem;color:#e2f5ef;line-height:1.75;white-space:pre;overflow-x:auto;margin:0}
.code-copy{position:absolute;top:.6rem;right:.6rem}

/* ══ BUTTONS ══ */
.btn-primary{background:#4eb39a;border:none;border-radius:8px;padding:8px 18px;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:700;color:#0e2d27;cursor:pointer;transition:background .15s,transform .14s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-primary:hover{background:#3a9b83;transform:translateY(-1px)}.btn-primary:active{transform:scale(.98)}
.btn-primary svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5}
.btn-secondary{background:#f5f9f8;border:1px solid rgba(78,179,154,.25);border-radius:8px;padding:7px 14px;font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.btn-secondary:hover{border-color:#4eb39a;color:#3a9b83;background:#e1f5ee}
.btn-secondary svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.btn-sm{background:rgba(78,179,154,.12);border:1px solid rgba(78,179,154,.2);border-radius:6px;padding:4px 10px;font-family:var(--mono);font-size:.68rem;font-weight:600;color:#3a9b83;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px}
.btn-sm:hover{background:rgba(78,179,154,.22);border-color:rgba(78,179,154,.4)}

/* ══ STATUS BANNER ══ */
.status-banner{border-radius:9px;padding:.75rem 1rem;font-family:var(--mono);font-size:.75rem;display:none;align-items:center;gap:.75rem;margin-top:.85rem}
.status-banner.show{display:flex}
.status-banner.ok{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.22);color:#15803d}
.status-banner.err{background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.2);color:#dc2626}
.status-banner.warn{background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.25);color:#b45309}
.sb-icon{font-size:1rem;flex-shrink:0}
.sb-text b{display:block;font-weight:700;margin-bottom:1px}

/* ══ CHAR METER ══ */
.char-meter{margin-top:.75rem}
.char-meter-bar{height:5px;background:rgba(78,179,154,.12);border-radius:3px;overflow:hidden}
.char-meter-fill{height:100%;border-radius:3px;transition:width .2s,background .2s;background:#4eb39a;width:0%}
.char-meter-fill.warn{background:#d97706}
.char-meter-fill.danger{background:#dc2626}
.char-meter-label{font-family:var(--mono);font-size:.68rem;color:var(--text-subtle);margin-top:4px;display:flex;justify-content:space-between}

/* ══ IAM SECTION ══ */
.iam-note{background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.18);border-radius:9px;padding:.9rem 1.1rem;font-size:.8rem;color:#1e40af;line-height:1.6;margin-bottom:1rem}
.iam-note strong{font-weight:700}

/* ══ INFO SECTION (SEO content) ══ */
.info-section{background:#fff;border:1px solid rgba(78,179,154,.15);border-radius:12px;padding:1.75rem 2rem;margin-bottom:1.5rem}
.info-section h2{font-size:1.15rem;font-weight:700;color:#0e2d27;margin-bottom:.6rem}
.info-section h3{font-size:.9rem;font-weight:700;color:#0e2d27;margin:1.1rem 0 .35rem}
.info-section p{font-size:.875rem;color:var(--text-muted);line-height:1.8;margin-bottom:.5rem}
.info-section ul{padding-left:1.25rem;font-size:.875rem;color:var(--text-muted);line-height:1.9}
.info-section code{font-family:var(--mono);font-size:.78rem;background:#e1f5ee;color:#0e2d27;padding:1px 6px;border-radius:4px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:.75rem}
.info-card{background:#f5f9f8;border:1px solid rgba(78,179,154,.15);border-radius:9px;padding:.9rem 1.1rem}
.info-card h4{font-size:.8rem;font-weight:700;color:#0e2d27;margin-bottom:.4rem}
.info-card p{font-size:.78rem;color:var(--text-muted);line-height:1.7;margin:0}

/* ══ TOAST ══ */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:#0e2d27;color:#6fd1b3;font-family:var(--mono);font-size:.78rem;padding:.55rem 1rem;border-radius:8px;border:1px solid rgba(78,179,154,.3);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;z-index:9999;pointer-events:none}
#toast.show{opacity:1;transform:translateY(0)}

/* ══ RESPONSIVE ══ */
@media(max-width:860px){
  .ipc-hero-inner{grid-template-columns:1fr}
  .hero-badge{display:none}
  .form-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ipc-main{padding:1.25rem 1rem}
  .tc-body{padding:.9rem 1rem}
  .code-tabs{gap:1px}
  .code-tab{font-size:.64rem;padding:5px 9px}
}

/* ══ SYNTAX HIGHLIGHTS ══ */
.sh-key{color:#7eb8f4}.sh-val{color:#6fd1b3}.sh-str{color:#f9cb42}.sh-kw{color:#f87171}
.sh-comment{color:rgba(255,255,255,.28);font-style:italic}.sh-bool{color:#c084fc}.sh-num{color:#fb923c}