:root {
    --void:    #f5f9f8;
    --bg1:     #ffffff;
    --bg2:     #f5f9f8;
    --bg3:     #eaf4f1;
    --bg4:     #e1f5ee;
    --brand:      #4eb39a;
    --brand-dark: #3a9b83;
    --brand-deep: #0e2d27;
    --green:   #16a34a;  --green-d:  rgba(22,163,74,0.08);
    --red:     #dc2626;  --red-d:    rgba(220,38,38,0.08);
    --amber:   #d97706;  --amber-d:  rgba(217,119,6,0.08);
    --blue:    #2563eb;  --blue-d:   rgba(37,99,235,0.08);
    --purple:  #7c3aed;  --purple-d: rgba(124,58,237,0.08);
    --cyan:    #0891b2;  --cyan-d:   rgba(8,145,178,0.08);
    --slate:   #64748b;  --slate-d:  rgba(100,116,139,0.08);
    --border:  rgba(78,179,154,0.18);
    --border2: rgba(78,179,154,0.35);
    --text0:   #1a2e2b;
    --text1:   #3a9b83;
    --text2:   #5f7a74;
    --text3:   #94aaa6;
    --mono:    'DM Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ac-page { font-family: 'DM Sans', sans-serif; background: var(--void); min-height: 100vh; color: var(--text0); overflow-x: hidden; }

/* HERO */
.ac-hero { background: linear-gradient(145deg, #0e2d27 0%, #1a4a3d 60%, #0e3530 100%); border-bottom: 1px solid rgba(78,179,154,0.2); padding: 2.25rem 2rem 2rem; position: relative; overflow: hidden; }
.ac-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 80% at 75% 50%, rgba(78,179,154,0.08) 0%, transparent 60%); pointer-events:none; }
.ac-hero-inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.ac-status-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1rem; }
.ac-status-chip { font-family: var(--mono); font-size:0.62rem; padding:4px 10px; border-radius:4px; border:1px solid; letter-spacing:.05em; display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; }
.ac-status-chip.green { color:#6fd1b3; border-color:rgba(111,209,179,.3); background:rgba(78,179,154,0.1); }
.ac-status-chip.amber { color:#fcd34d; border-color:rgba(252,211,77,.3); background:rgba(252,211,77,0.08); }
.ac-status-chip.red   { color:#fca5a5; border-color:rgba(252,165,165,.3); background:rgba(252,165,165,0.08); }
.pulse { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.ac-hero-tag { font-family: var(--mono); font-size:0.65rem; color:#6fd1b3; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.6rem; opacity:.9; }
.ac-updated-line { font-family: var(--mono); font-size:0.62rem; color:rgba(255,255,255,0.35); margin-bottom:.5rem; }
.ac-updated-line time { color:rgba(255,255,255,0.55); font-weight:600; }
.ac-hero h1, .ac-hero h2 { font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight:700; color:#fff; line-height:1.2; letter-spacing:-.02em; margin-bottom:.5rem; }
.ac-hero h1 em, .ac-hero h2 em { font-style:normal; color:#6fd1b3; }
.ac-hero p { font-size:0.875rem; color:rgba(255,255,255,0.5); line-height:1.75; max-width:640px; }
.ac-stat-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:1.25rem; }
.ac-stat { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:.55rem .9rem; min-width:104px; }
.ac-stat-num { font-family: var(--mono); font-size:1.25rem; font-weight:700; color:#fff; line-height:1; }
.ac-stat-lbl { font-family: var(--mono); font-size:0.58rem; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }

/* MAIN */
.ac-main { max-width:1240px; margin:0 auto; padding:2rem; }

/* CONFIG PANEL */
.config-panel { background:#fff; border:1px solid var(--border); border-radius:12px; margin-bottom:1.5rem; overflow:hidden; }
.config-head { padding:.9rem 1.5rem; border-bottom:1px solid var(--border); background:#f5f9f8; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.config-head-title { font-family: var(--mono); font-size:0.68rem; font-weight:700; color:#3a9b83; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.config-head-title svg { width:14px; height:14px; stroke:currentColor; fill:none; }
.config-body { padding:1.25rem 1.5rem; }

.input-tabs { display:flex; gap:4px; margin-bottom:.9rem; border-bottom:1px solid var(--border); }
.input-tab-btn { font-family: var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text2); background:transparent; border:none; padding:.6rem 1rem; cursor:pointer; border-bottom:2px solid transparent; }
.input-tab-btn.active { color:var(--brand-dark); border-bottom-color:var(--brand); }
.input-panel { display:none; }
.input-panel.active { display:block; }

.flow-textarea { width:100%; min-height:190px; background:#f5f9f8; border:1px solid rgba(78,179,154,0.2); border-radius:8px; padding:.9rem; font-family:var(--mono); font-size:0.75rem; color:var(--text0); resize:vertical; outline:none; }
.flow-textarea:focus { border-color:var(--brand); background:#fff; }

.upload-zone { border:2px dashed rgba(78,179,154,0.35); border-radius:10px; padding:2.25rem 1.5rem; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; background:#f5f9f8; }
.upload-zone:hover, .upload-zone.dragover { border-color:var(--brand); background:var(--bg4); }
.upload-zone svg { width:34px; height:34px; stroke:var(--brand-dark); fill:none; margin-bottom:.6rem; }
.upload-zone-title { font-weight:700; font-size:0.9rem; color:var(--text0); margin-bottom:.25rem; }
.upload-zone-sub { font-family:var(--mono); font-size:0.68rem; color:var(--text2); }
.upload-filename { font-family:var(--mono); font-size:0.72rem; color:var(--brand-dark); margin-top:.6rem; }

.btn-run { background:#4eb39a; border:none; border-radius:8px; padding:10px 24px; font-family:'DM Sans',sans-serif; font-size:0.875rem; font-weight:700; color:#0e2d27; cursor:pointer; transition:background .15s, transform .12s, box-shadow .15s; display:inline-flex; align-items:center; gap:8px; }
.btn-run:hover { background:#3a9b83; transform:translateY(-1px); box-shadow:0 4px 12px rgba(78,179,154,0.3); }
.btn-run:active { transform:scale(.98); }
.btn-run svg { width:16px; height:16px; stroke:currentColor; fill:none; }
.btn-sec { background:transparent; border:1px solid rgba(78,179,154,0.3); border-radius:8px; padding:9px 16px; font-family:'DM Sans',sans-serif; font-size:0.82rem; font-weight:600; color:var(--text2); cursor:pointer; transition:border-color .15s, color .15s, background .15s; display:inline-flex; align-items:center; gap:7px; }
.btn-sec:hover { border-color:var(--brand); color:var(--brand-dark); background:#e1f5ee; }
.btn-sec:disabled { opacity:.4; cursor:not-allowed; }
.btn-sec svg { width:14px; height:14px; stroke:currentColor; fill:none; }
.btn-icon { background:#fff; border:1px solid var(--border); border-radius:6px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text2); }
.btn-icon:hover { border-color:var(--brand); color:var(--brand-dark); }
.btn-icon svg { width:15px; height:15px; stroke:currentColor; fill:none; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:1rem; }

.sample-select { font-family:var(--mono); font-size:0.72rem; background:#f5f9f8; border:1px solid rgba(78,179,154,0.25); border-radius:6px; padding:8px 10px; color:var(--text0); cursor:pointer; }

.parse-error { background:#fef2f2; border:1px solid rgba(220,38,38,0.3); border-radius:8px; padding:.9rem 1.1rem; margin-top:1rem; font-family:var(--mono); font-size:0.75rem; color:#991b1b; line-height:1.7; display:none; }
.parse-error.show { display:block; }

.sec-title { font-family: var(--mono); font-size:0.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); margin-bottom:.75rem; display:flex; align-items:center; gap:10px; }
.sec-title::after { content:''; flex:1; height:1px; background:rgba(78,179,154,0.15); }

/* WARNING BANNER */
.warn-banner { background:#fffbeb; border:1px solid rgba(217,119,6,0.3); border-radius:10px; padding:.8rem 1.1rem; margin-bottom:1rem; font-size:0.8rem; color:#92400e; display:none; align-items:flex-start; gap:10px; }
.warn-banner.show { display:flex; }
.warn-banner svg { width:16px; height:16px; stroke:currentColor; fill:none; flex-shrink:0; margin-top:2px; }
.warn-banner b { display:block; margin-bottom:2px; }
.warn-chip-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:.5rem; }
.warn-chip-list button { font-family:var(--mono); font-size:0.65rem; background:#fff; border:1px solid rgba(217,119,6,0.35); color:#92400e; border-radius:4px; padding:2px 8px; cursor:pointer; }
.warn-chip-list button:hover { background:#fef3c7; }

/* GRAPH WORKSPACE */
.graph-wrap { display:none; background:#fff; border:1px solid var(--border); border-radius:12px; margin-bottom:1.5rem; overflow:hidden; }
.graph-wrap.show { display:block; }
.graph-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; padding:.7rem 1rem; border-bottom:1px solid var(--border); background:#f5f9f8; }
.tb-group { display:flex; align-items:center; gap:6px; }
.tb-search { display:flex; align-items:center; gap:6px; background:#fff; border:1px solid rgba(78,179,154,0.25); border-radius:6px; padding:4px 8px; }
.tb-search svg { width:13px; height:13px; stroke:var(--text2); fill:none; flex-shrink:0; }
.tb-search input { border:none; outline:none; font-family:var(--mono); font-size:0.72rem; width:150px; background:transparent; color:var(--text0); }
.tb-search-count { font-family:var(--mono); font-size:0.62rem; color:var(--text3); white-space:nowrap; }
.layout-toggle { display:flex; border:1px solid rgba(78,179,154,0.3); border-radius:6px; overflow:hidden; }
.layout-toggle button { font-family:var(--mono); font-size:0.65rem; font-weight:700; padding:6px 10px; background:#fff; border:none; color:var(--text2); cursor:pointer; letter-spacing:.03em; }
.layout-toggle button.active { background:var(--brand); color:#0e2d27; }
.layout-toggle button:disabled { opacity:.4; cursor:not-allowed; }

.graph-wrap:fullscreen { background:#fff; display:flex; flex-direction:column; }
.graph-wrap:fullscreen .canvas-viewport { flex:1; height:auto; }
.graph-wrap:-webkit-full-screen { background:#fff; display:flex; flex-direction:column; }
.graph-wrap:-webkit-full-screen .canvas-viewport { flex:1; height:auto; }
.graph-wrap:-ms-fullscreen { background:#fff; display:flex; flex-direction:column; }
.graph-wrap:-ms-fullscreen .canvas-viewport { flex:1; height:auto; }
.btn-icon.active { background:var(--brand); color:#0e2d27; border-color:var(--brand); }

.canvas-viewport { position:relative; width:100%; height:640px; overflow:hidden; background:
    linear-gradient(rgba(78,179,154,0.06) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(78,179,154,0.06) 1px, transparent 1px) 0 0/24px 24px,
    #fbfdfc;
    cursor:grab; touch-action:none; }
.canvas-viewport.grabbing { cursor:grabbing; }
.canvas-viewport svg { display:block; width:100%; height:100%; }

.node-box { cursor:pointer; }
.node-box .node-shadow { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12)); }
.node-box:hover rect.node-rect { stroke-width:2.4; }
.node-box.selected rect.node-rect { stroke-width:3; }
.node-box.dim { opacity:.22; }
.node-box.match rect.node-rect { stroke:#f59e0b !important; stroke-width:3; }
.node-label-type { font-family:'DM Sans',sans-serif; font-weight:700; }
.node-label-sub  { font-family:var(--mono); }
.edge-path { fill:none; }
.edge-path.dim { opacity:.12; }
.edge-label-bg { fill:#fff; }
.edge-label-txt { font-family:var(--mono); }

.legend { position:absolute; left:12px; bottom:12px; background:rgba(255,255,255,0.95); border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; font-size:0.68rem; max-width:220px; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.legend-row { display:flex; align-items:center; gap:6px; margin:3px 0; color:var(--text2); }
.legend-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.legend-line { width:16px; height:0; border-top:2px solid; flex-shrink:0; }
.legend-line.dashed { border-top-style:dashed; }
.legend-title { font-family:var(--mono); font-weight:700; color:var(--text0); text-transform:uppercase; letter-spacing:.05em; font-size:0.6rem; margin-bottom:4px; }

.zoom-pct { position:absolute; right:12px; bottom:12px; background:rgba(14,45,39,0.85); color:#e1f5ee; font-family:var(--mono); font-size:0.65rem; padding:4px 9px; border-radius:6px; }

/* DRAWER */
.drawer-overlay { position:fixed; inset:0; background:rgba(14,45,39,0.35); z-index:998; display:none; }
.drawer-overlay.show { display:block; }
.drawer { position:fixed; top:0; right:-420px; width:400px; max-width:92vw; height:100%; background:#fff; z-index:999; box-shadow:-8px 0 30px rgba(0,0,0,0.15); transition:right .25s ease; display:flex; flex-direction:column; }
.drawer.show { right:0; }
.drawer-head { padding:1.1rem 1.25rem; border-bottom:1px solid var(--border); background:#0e2d27; color:#fff; }
.drawer-head-type { font-family:var(--mono); font-size:0.6rem; letter-spacing:.08em; text-transform:uppercase; color:#6fd1b3; margin-bottom:.35rem; }
.drawer-head-name { font-size:1.05rem; font-weight:700; }
.drawer-close { position:absolute; top:14px; right:16px; background:transparent; border:none; color:rgba(255,255,255,0.6); cursor:pointer; font-size:1.3rem; line-height:1; }
.drawer-body { padding:1.1rem 1.25rem; overflow-y:auto; flex:1; }
.drawer-row { margin-bottom:1.1rem; }
.drawer-row-lbl { font-family:var(--mono); font-size:0.62rem; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem; display:flex; align-items:center; gap:6px; justify-content:space-between; }
.drawer-copy-btn { font-family:var(--mono); font-size:0.6rem; color:var(--brand-dark); background:none; border:none; cursor:pointer; text-decoration:underline; }
.drawer-id { font-family:var(--mono); font-size:0.75rem; background:#f5f9f8; border:1px solid var(--border); border-radius:6px; padding:.5rem .7rem; word-break:break-all; }
.drawer-json { font-family:var(--mono); font-size:0.7rem; background:#0e2d27; color:#c9f5e6; border-radius:8px; padding:.8rem .9rem; white-space:pre-wrap; word-break:break-all; max-height:260px; overflow-y:auto; line-height:1.6; }
.drawer-link-list { display:flex; flex-direction:column; gap:6px; }
.drawer-link-item { display:flex; align-items:center; justify-content:space-between; gap:8px; background:#f5f9f8; border:1px solid var(--border); border-radius:6px; padding:.5rem .7rem; }
.drawer-link-item button { font-family:var(--mono); font-size:0.68rem; color:var(--brand-dark); background:none; border:none; cursor:pointer; font-weight:700; text-align:left; }
.drawer-link-tag { font-family:var(--mono); font-size:0.58rem; padding:2px 6px; border-radius:4px; flex-shrink:0; text-transform:uppercase; }

/* SUMMARY TABLE */
.summary-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin-bottom:1.5rem; }
.summary-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:.85rem 1rem; }
.summary-card-lbl { font-family:var(--mono); font-size:0.58rem; color:var(--text2); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.3rem; }
.summary-card-val { font-size:1.35rem; font-weight:700; color:var(--text0); }

.type-table-wrap { background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:1.5rem; }
.type-table-head { padding:.8rem 1.25rem; border-bottom:1px solid var(--border); background:#f5f9f8; font-family:var(--mono); font-size:0.68rem; font-weight:700; color:#3a9b83; letter-spacing:.1em; text-transform:uppercase; }
.tt { width:100%; border-collapse:collapse; }
.tt th { padding:.5rem 1.25rem; text-align:left; font-family:var(--mono); font-size:0.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text2); background:#eaf4f1; border-bottom:1px solid rgba(78,179,154,0.15); }
.tt td { padding:.5rem 1.25rem; font-family:var(--mono); font-size:0.75rem; color:var(--text1); border-bottom:1px solid rgba(78,179,154,0.06); }
.tt tr:hover td { background:rgba(78,179,154,0.03); }
.tt tr:last-child td { border-bottom:none; }
.cat-dot { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:7px; vertical-align:middle; }

/* SEO / FAQ */
.seo-block { background:#fff; border:1px solid var(--border); border-radius:10px; padding:1.75rem 2rem; margin-top:2rem; }
.seo-block h2 { font-size:1.05rem; font-weight:700; color:var(--text0); margin-bottom:.5rem; }
.seo-block h3 { font-size:0.92rem; font-weight:700; color:var(--text0); margin:1.25rem 0 .4rem; }
.seo-block > p, .seo-block ul { font-size:0.875rem; color:var(--text2); line-height:1.8; }
.seo-block ul { padding-left:1.2rem; }
.faq-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:10px; margin-top:1.25rem; }
.faq-card { background:#f5f9f8; border:1px solid rgba(78,179,154,0.15); border-radius:10px; padding:1rem; }
.faq-q { font-size:0.875rem; font-weight:600; color:var(--text0); margin-bottom:.3rem; }
.faq-a { font-size:0.82rem; color:var(--text2); line-height:1.7; }
.related-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.related-tools a { font-family:var(--mono); font-size:0.72rem; color:var(--brand-dark); background:var(--bg4); border:1px solid rgba(78,179,154,0.25); border-radius:6px; padding:6px 12px; text-decoration:none; }
.related-tools a:hover { background:var(--brand); color:#0e2d27; }

.ac-toast { position:fixed; bottom:2rem; right:2rem; background:#0e2d27; border:1px solid rgba(78,179,154,0.35); border-radius:8px; padding:.7rem 1.2rem; font-family:var(--mono); font-size:0.78rem; color:#e1f5ee; z-index:1000; transform:translateY(60px); opacity:0; transition:all .3s; pointer-events:none; }
.ac-toast.show { transform:translateY(0); opacity:1; }

@media (max-width:700px) {
    .ac-hero    { padding:1.75rem 1.25rem 1.5rem; }
    .ac-main    { padding:1rem; }
    .seo-block  { padding:1.25rem; }
    .canvas-viewport { height:460px; }
    .drawer     { width:100%; max-width:100%; }
    .tb-search input { width:90px; }
}