:root{
  --primary:#16a34a;
  --primary-600:#15803d;
  --bg:#f8fafc;
  --surface:#ffffff;
  --muted:#6b7280;
  --border:#e5e7eb;
  --ink:#111827;
  --ink-2:#374151;
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#ef4444;
  --code-bg:#0b1020;
  --code-ink:#e5e7eb
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b0f14;
    --surface:#0f141a;
    --muted:#9ca3af;
    --border:#1f2937;
    --ink:#e5e7eb;
    --ink-2:#cbd5e1;
    --code-bg:#0a0f1a;
    --code-ink:#e5e7eb
  }
}
html.dark{
  --bg:#0b0f14;
  --surface:#0f141a;
  --muted:#9ca3af;
  --border:#1f2937;
  --ink:#e5e7eb;
  --ink-2:#cbd5e1;
  --code-bg:#0a0f1a;
  --code-ink:#e5e7eb
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Onest,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.55
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-600)}
button{font:inherit}
.app-container{max-width:1200px;margin:0 auto;padding:24px;display:flex;flex-direction:column;min-height:100vh;gap:16px}
header{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px
}
h1{margin:0;font-size:1.5rem;color:var(--primary)}
.file-upload{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-upload input[type=file]{display:none}
.file-upload label{
  background:var(--primary);color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer
}
.file-upload label:hover{background:var(--primary-600)}
#file-name,#file-name2{font-size:.9rem;color:var(--muted);min-width:120px}
.compare-upload button{
  background:#059669;color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer
}
.compare-upload button:hover{background:#047857}
.export-options{display:flex;gap:8px;flex-wrap:wrap}
.export-options button{
  background:var(--ink);color:#fff;border:0;border-radius:10px;padding:10px 14px;cursor:pointer
}
.export-options button:hover{opacity:.9}
.main-content{display:grid;grid-template-columns:260px 1fr;gap:16px;flex:1}
.sidebar{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;
  max-height:70vh;overflow:auto
}
.sidebar h2{margin:0 0 8px 0;font-size:1rem;color:var(--ink)}
.sidebar ul{margin:0;padding:0;list-style:none}
.sidebar li{margin:6px 0}
.nav-link{display:block;padding:8px 10px;border-radius:8px;color:var(--ink)}
.nav-link:hover{background:#f3f4f6}
html.dark .nav-link:hover{background:#111827}
.content-area{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;min-height:60vh
}
.config-section{margin:0 0 16px 0}
.config-section h2{
  margin:0 0 8px 0;font-size:1.1rem;color:var(--primary);display:flex;justify-content:space-between;align-items:center;cursor:pointer
}
.config-section h2::after{content:"−";font-size:1.2rem;color:var(--muted)}
.config-section.collapsed h2::after{content:"+"}
.section-content{margin-top:12px}
.collapsed .section-content{display:none}
.config-table{width:100%;border-collapse:collapse;margin:12px 0;border:1px solid var(--border)}
.config-table th,.config-table td{padding:10px;border:1px solid var(--border);text-align:left}
.config-table th{background:#f1f5f9;color:var(--ink)}
html.dark .config-table th{background:#111827}
.config-table tr:nth-child(even){background:#f9fafb}
html.dark .config-table tr:nth-child(even){background:#0f141a}
.interface{
  margin:12px 0;padding:10px;border:1px solid var(--border);border-radius:10px;background:#f8fafc
}
html.dark .interface{background:#0f141a}
.interface-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--primary);margin-bottom:6px}
.interface-status{font-weight:400;font-size:.9rem}
.interface-status.up{color:var(--ok)}
.interface-status.down{color:var(--err)}
.interface-property{display:flex;gap:8px;margin:4px 0}
.interface-property-label{min-width:120px;font-weight:600;color:var(--ink-2)}
.config-line{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  margin-left:12px;position:relative;padding-left:14px;white-space:pre-wrap;border-radius:6px
}
.config-line:hover{background:#eef6f0}
html.dark .config-line:hover{background:#0f1a14}
.config-line::before{content:">";position:absolute;left:0;color:#9ca3af}
.warning{color:var(--warn);font-weight:700}
.error{color:var(--err)}
.success{color:var(--ok)}
#raw-config{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  white-space:pre-wrap;background:var(--code-bg);color:var(--code-ink);padding:12px;border-radius:10px;border:1px solid var(--border);
  max-height:520px;overflow:auto
}
.tooltip{
  position:fixed;background:#111827;color:#fff;padding:10px 12px;border-radius:8px;font-size:.9rem;max-width:420px;
  z-index:100;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;transform:translateY(2px)
}
.tooltip.visible{opacity:.96;transform:translateY(0)}
.tooltip-keyword{color:var(--primary);cursor:help;border-bottom:1px dotted var(--primary)}
.tooltip-header{font-weight:700;margin-bottom:6px;font-size:1rem}
.tooltip-summary{margin-bottom:6px}
.tooltip-details{margin-bottom:6px;font-size:.9rem}
.tooltip-example{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.85rem;background:rgba(255,255,255,.06);padding:6px 8px;border-radius:6px;white-space:pre-wrap
}
.topology-canvas{
  display:flex;flex-wrap:wrap;gap:12px;padding:12px;background:#f8fafc;border-radius:10px;border:1px solid var(--border)
}
html.dark .topology-canvas{background:#0f141a}
.topology-device{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;min-width:220px
}
.intf-name{font-weight:700;color:var(--primary);margin-bottom:6px;border-bottom:1px solid var(--border);padding-bottom:6px}
.intf-ip{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.92rem;margin-bottom:4px}
.intf-down{opacity:.85;border-left:4px solid var(--err);padding-left:8px}
.intf-down .intf-name{color:var(--err)}
.diff-added{background:rgba(16,185,129,.12)}
.diff-removed{background:rgba(239,68,68,.12)}
.hidden{display:none}
:focus-visible{outline:3px solid rgba(22,163,74,.4);outline-offset:2px;border-radius:8px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
html.dark ::-webkit-scrollbar-thumb{background:#374151}
@media (max-width:900px){
  .main-content{grid-template-columns:1fr}
  header{flex-direction:column;align-items:stretch}
  .file-upload{flex-direction:column;align-items:stretch}
  .file-upload label,.file-upload button{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}