:root{--bg:#0b1020;--panel:#121a2f;--panel-2:#172138;--line:#243050;--text:#e6ebf5;--muted:#8d9ab8;--accent:#6366f1;--accent-2:#06b6d4;--ok:#22c55e;--bad:#ef4444;--warn:#f59e0b;--panel-end:#0f1629;--input-bg:#0b1224;--hover-bg:#1d2a48;--hover-line:#3b4a78;--switch-off:#2a3556;--code-bg:#060a16;--code-text:#cbd5e1;--link:#a5b4fc;--on-accent:#fff;--title-from:#fff;--title-via:#a5b4fc;--title-to:#67e8f9;--glow-1:#6366f133;--glow-2:#06b6d428;--shadow:#0006;--overlay:#000a;--t-c:#64748b;--t-s:#86efac;--t-f:#67e8f9;--t-v:#fca5a5;--t-k:#c4b5fd;--action-add:#fcd34d;--action-import:#93c5fd;--action-export:#6ee7b7;--action-clear:#fda4af;--action-reject:#fcd34d;--format-terraform:#c4b5fd;--format-legacy:#f9a8d4;--format-ansible:#93c5fd;--format-powershell:#67e8f9;--format-bicep:#86efac;--format-native:#fcd34d;--on-format:#0b1020;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--bg:#f4f6fb;--panel:#fff;--panel-2:#eef1f8;--line:#d5dbe8;--text:#1b2236;--muted:#5d6a86;--ok:#15803d;--bad:#dc2626;--panel-end:#fafbff;--input-bg:#fff;--hover-bg:#e6eaf5;--hover-line:#b4bdd3;--switch-off:#c3cadb;--code-bg:#f6f8fc;--code-text:#1f2937;--link:#4f46e5;--title-from:#1b2236;--title-via:#4f46e5;--title-to:#0891b2;--glow-1:#6366f122;--glow-2:#06b6d41a;--shadow:#1b223614;--overlay:#1b223699;--t-c:#6b7280;--t-s:#15803d;--t-f:#0e7490;--t-v:#b91c1c;--t-k:#6d28d9;--action-add:#854d0e;--action-import:#1d4ed8;--action-export:#065f46;--action-clear:#991b1b;--action-reject:#854d0e;--format-terraform:#6d28d9;--format-legacy:#9d174d;--format-ansible:#1d4ed8;--format-powershell:#155e75;--format-bicep:#166534;--format-native:#854d0e;--on-format:#fff;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{color:var(--text);background:radial-gradient(900px 500px at 10% -10%, var(--glow-1), transparent), radial-gradient(800px 500px at 100% 0%, var(--glow-2), transparent), var(--bg);min-height:100vh;margin:0;font-family:Segoe UI Variable,Segoe UI,system-ui,sans-serif}.app{max-width:1500px;margin:0 auto;padding:24px}.top{align-items:center;gap:16px;margin-bottom:20px;display:flex}.top h1{letter-spacing:-.02em;background:linear-gradient(90deg, var(--title-from), var(--title-via) 60%, var(--title-to));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:26px}.top p{color:var(--muted);margin:2px 0 0;font-size:14px}.logo-link{display:flex}.logo-link:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}.logo{filter:drop-shadow(0 6px 18px #6366f166);width:52px;height:52px}main{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}.panel{background:linear-gradient(180deg, var(--panel), var(--panel-end));border:1px solid var(--line);min-width:0;box-shadow:0 10px 40px var(--shadow);border-radius:14px;padding:16px}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}h2{margin:0;font-size:17px}.count{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:99px;margin-left:6px;padding:1px 9px;font-size:12px}.actions{flex-wrap:wrap;gap:8px;display:flex}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:8px;padding:7px 14px;transition:transform 80ms,background .15s,border-color .15s}button:hover{border-color:var(--hover-line);background:var(--hover-bg)}button:active{transform:translateY(1px)}button.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:var(--on-accent);border:0;font-weight:600}button.primary:hover{filter:brightness(1.1)}button:disabled{opacity:.5;cursor:not-allowed}button:disabled:active{transform:none}button.action-button{border-color:var(--action-color);color:var(--action-color);background:color-mix(in srgb, var(--action-color) 12%, var(--panel));font-weight:600}button.add-action{--action-color:var(--action-add)}button.import-action{--action-color:var(--action-import)}button.export-action{--action-color:var(--action-export)}button.clear-action{--action-color:var(--action-clear)}button.action-button:hover:not(:disabled){background:color-mix(in srgb, var(--action-color) 20%, var(--panel))}button.action-button:active:not(:disabled){background:color-mix(in srgb, var(--action-color) 24%, var(--panel))}button.action-button:focus-visible{outline:2px solid var(--link);outline-offset:3px}input,select,textarea{font:inherit;color:var(--text);background:var(--input-bg);border:1px solid var(--line);border-radius:7px;width:100%;min-width:0;padding:6px 8px}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid #6366f155}input:disabled{opacity:.45}.table{overflow-x:auto}.row{border-bottom:1px solid #1b2542;grid-template-columns:44px minmax(90px,1fr) minmax(110px,1.2fr) minmax(110px,1.2fr) minmax(130px,1.1fr) minmax(90px,.9fr) 104px 108px 118px;align-items:center;gap:6px;min-width:960px;padding:5px 0;display:grid}.row.head{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);font-size:11.5px}.row.off input,.row.off select{opacity:.4}.ports{gap:4px;display:flex}.cell{align-items:center;min-width:0;display:flex}.ports select{width:64px;padding:6px 2px}.pill{text-align:center;font-weight:600}.pill.allow{color:var(--ok)}.pill.drop{color:var(--bad)}.pill.reject{color:var(--action-reject)}select.pill option{background:var(--input-bg);font-weight:600}select.pill option[value=ALLOW]{color:var(--ok)}select.pill option[value=DROP]{color:var(--bad)}select.pill option[value=REJECT]{color:var(--action-reject)}.row-actions{justify-content:flex-end;gap:3px;display:flex}.row-actions button{padding:4px 7px;line-height:1}.row-actions .danger:hover{border-color:var(--bad);background:#ef444433}.switch{width:34px;height:20px;margin-left:4px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.switch i{background:var(--switch-off);border-radius:99px;transition:all .2s;position:absolute;inset:0}.switch i:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;top:3px;left:3px}.switch input:checked+i{background:linear-gradient(135deg, var(--accent), var(--accent-2))}.switch input:checked+i:after{transform:translate(14px)}.empty{text-align:center;color:var(--muted);padding:28px}.issues{gap:6px;margin:14px 0 0;padding:0;list-style:none;display:grid}.issues li{border-radius:8px;padding:8px 12px;font-size:13px}.issues .error{background:#ef44441c;border:1px solid #ef444455}.issues .warn{background:#f59e0b1a;border:1px solid #f59e0b55}.output-summary,.workspace-summary{cursor:pointer;font-size:17px;font-weight:600}.output-summary:focus-visible,.workspace-summary:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}.output details[open]>.output-summary,.policy-workspace[open]>.workspace-summary{margin-bottom:16px}.product-picker{border:1px solid var(--line);background:var(--panel);border-radius:12px;min-width:0;margin:0 0 16px;padding:14px}.product-picker legend{padding:0 7px;font-size:14px;font-weight:600}.product-picker>p{color:var(--muted);margin:0 0 12px;font-size:12px}.tabs{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));grid-auto-rows:1fr;gap:8px;display:grid}.product-picker .tab{text-align:left;gap:4px;width:100%;min-width:0;height:100%}.product-picker .tab span,.product-picker .tab small{white-space:normal;overflow-wrap:anywhere}.button-icon{vertical-align:-3px;flex-shrink:0;width:16px;height:16px;margin-right:6px;display:inline-block}.tab{--platform-color:var(--muted);border-left:4px solid var(--platform-color);background:color-mix(in srgb, var(--platform-color) 12%, var(--panel-2));flex-direction:column;align-items:flex-start;padding:7px 12px;line-height:1.2;display:flex}.tab[data-platform=nsx]{--platform-color:#9b75e8}.tab[data-platform=sdn]{--platform-color:#398cc5}.tab[data-platform=azl]{--platform-color:#238a9b}.tab[data-platform=azfw]{--platform-color:#d47735}.tab[data-platform=windows]{--platform-color:#4774d5}.tab[data-platform=nftables]{--platform-color:#3a986c}.tab[data-platform=iptables]{--platform-color:#8d9a3e}.tab[data-platform=firewalld]{--platform-color:#cd645c}.tab[data-platform=cisco]{--platform-color:#3a9aa6}.tab[data-platform=fmc]{--platform-color:#c579a4}.tab[data-platform=panos]{--platform-color:#bc8651}.tab small{color:var(--muted);font-size:11px}.tab:hover{border-left-color:var(--platform-color);background:color-mix(in srgb, var(--platform-color) 20%, var(--panel-2))}.tab.active,.tab.active:hover{border-color:var(--platform-color);background:color-mix(in srgb, var(--platform-color) 22%, var(--panel-2));box-shadow:inset 0 -2px var(--platform-color)}.tab:focus-visible,.format:focus-visible{outline:2px solid var(--link);outline-offset:3px}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px;display:flex}.toolbar label{color:var(--muted);gap:4px;min-width:180px;font-size:12px;display:grid}.banner{background:#ef44441c;border:1px solid #ef444455;border-radius:8px;margin-bottom:10px;padding:8px 12px;font-size:13px}.code{background:var(--code-bg);border:1px solid var(--line);min-height:240px;max-height:640px;color:var(--code-text);white-space:pre;border-radius:10px;margin:0;padding:14px;font:12.5px/1.55 Cascadia Code,Consolas,monospace;overflow:auto}.t-c{color:var(--t-c);font-style:italic}.t-s{color:var(--t-s)}.t-f{color:var(--t-f)}.t-v{color:var(--t-v)}.t-k{color:var(--t-k);font-weight:600}footer{text-align:center;color:var(--muted);border-top:1px solid var(--line);margin-top:28px;padding-top:16px;font-size:12px}footer p{max-width:900px;margin:6px auto;line-height:1.5}footer a{color:var(--link)}footer .disclaimer{color:var(--text);background:#6366f11a;border:1px solid #6366f155;border-radius:10px;padding:10px 14px;font-size:13px}.modal{background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;place-items:center;display:grid;position:fixed;inset:0}.dialog{background:var(--panel);border:1px solid var(--line);border-radius:14px;gap:12px;width:min(640px,92vw);padding:20px;display:grid}.dialog h3{margin:0}.dialog p{color:var(--muted);margin:0;font-size:13px}.dialog textarea{min-height:170px;font-family:Consolas,monospace;font-size:12.5px}.dialog .actions{justify-content:flex-end}code{background:var(--panel-2);border-radius:4px;padding:1px 5px}.inline-switch{align-items:center;gap:8px;padding-bottom:6px;font-size:13px;display:flex}.inline-switch .switch{margin-left:0}.notice{background:#22c55e1a;border:1px solid #22c55e55;border-radius:8px;margin-bottom:10px;padding:8px 12px;font-size:13px}.formats{flex-wrap:wrap;align-items:center;gap:6px;margin:-2px 0 12px;display:flex}.formats-label{color:var(--muted);margin-right:4px;font-size:12px;font-weight:600}.format{--format-color:var(--format-native);border-color:var(--format-color);color:var(--format-color);background:color-mix(in srgb, var(--format-color) 10%, var(--panel));border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:600;transition:transform 80ms,box-shadow .15s}.format[data-format^=Terraform]{--format-color:var(--format-terraform)}.format[data-format="Terraform 1.x"]{--format-color:var(--format-legacy)}.format[data-format=Ansible],.format[data-format=az\ CLI],.format[data-format^=Azure\ CLI]{--format-color:var(--format-ansible)}.format[data-format^=PowerShell]{--format-color:var(--format-powershell)}.format[data-format=Bicep],.format[data-format="PowerShell (SDK)"]{--format-color:var(--format-bicep)}.format:hover:not(:disabled){border-color:var(--format-color);background:color-mix(in srgb, var(--format-color) 18%, var(--panel))}.format.active,.format.active:hover{color:var(--on-format);border-color:var(--format-color);background:var(--format-color);box-shadow:inset 0 0 0 1px var(--format-color)}.format.active:hover:not(:disabled){box-shadow:0 0 0 2px color-mix(in srgb, var(--format-color) 35%, transparent)}.spacer{flex:1}.seg{border:1px solid var(--line);border-radius:8px;display:inline-flex;overflow:hidden}.seg button{color:var(--muted);background:0 0;border:0;border-radius:0;padding:6px 12px;font-size:12.5px}.seg button.on{color:var(--text);background:linear-gradient(135deg,#6366f133,#06b6d426)}.dialog-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.theme-toggle{padding:7px 10px;font-size:16px;line-height:1}.top{position:relative}.top .theme-toggle{margin-left:auto}.rule-order{color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;font-size:12px}.rule-name-cell{gap:6px;min-width:0;display:grid}.rule-name-cell>input{width:100%;min-width:0}:root{--topology-allow:#57d9a4;--topology-drop:#f18a93;--topology-reject:#ecc47a;--topology-disabled:#8390a6}:root[data-theme=light]{--topology-allow:#147b52;--topology-drop:#b42335;--topology-reject:#946200;--topology-disabled:#596579}.workspace-tabs{border:1px solid var(--line);background:var(--input-bg);border-radius:12px;align-items:center;gap:4px;max-width:100%;margin-bottom:16px;padding:4px;display:inline-flex}.workspace-tabs-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 9px;font-size:11px;font-weight:600}.workspace-tabs button{color:var(--muted);background:0 0;border-color:#0000;align-items:center;gap:7px;font-weight:600;transition:transform 80ms;display:inline-flex}.workspace-tabs button:hover{color:var(--text);background:var(--hover-bg)}.workspace-tabs button[aria-selected=true],.workspace-tabs button[aria-selected=true]:hover{border-color:var(--text);background:var(--text);color:var(--bg);box-shadow:none}.workspace-tabs button:focus-visible{outline:2px solid var(--link);outline-offset:3px}.view-icon{font-size:16px;line-height:1}.row.topology-selected{background:color-mix(in srgb, var(--accent) 10%, var(--panel))}.topology-workspace{grid-template-columns:minmax(0,1fr) 286px;gap:18px;display:grid}.topology-main{min-width:0}.topology-toolbar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.topology-toolbar p{color:var(--muted);margin:5px 0 0;font-size:12px}.topology-live{color:var(--ok);margin-left:auto;font-size:12px}.topology-toggle{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.topology-toggle input{width:auto;accent-color:var(--accent)}.topology-scroll{border:1px solid var(--line);background:var(--input-bg);border-radius:12px;margin-top:10px;overflow-x:auto}.topology-svg{width:100%;min-width:650px;height:auto;display:block}.topology-label{letter-spacing:1.5px;fill:var(--muted);font-size:10px}.topology-title{fill:var(--text);font-size:13px;font-weight:600}.topology-subtitle{fill:var(--muted);font-size:10px}.topology-chain{fill:var(--text);font-size:14px;font-weight:600}.topology-filter,.topology-node{fill:var(--panel-2);stroke:var(--hover-line);stroke-width:1.3px}.topology-icon{fill:var(--hover-bg)}.topology-lane{fill:var(--panel);stroke:var(--line)}.topology-edge{fill:none;stroke-width:2px}.topology-route{cursor:pointer}.topology-route.selected .topology-edge{stroke-width:3.5px}.topology-route.dim{opacity:.45}.topology-route:hover{opacity:1}.topology-route:focus{outline:none}.topology-route:focus .topology-route-pill{stroke-width:3px}.topology-route-pill{fill:var(--input-bg)}.topology-route-label{font-size:10px;font-weight:600}.topology-legend{color:var(--muted);flex-wrap:wrap;gap:14px;margin-top:14px;font-size:11px;display:flex}.topology-summary{color:var(--muted);border-bottom:1px solid var(--line);padding:10px 0;font-size:12px}.topology-caveat{color:var(--muted);border:1px solid var(--line);background:var(--panel-2);border-radius:9px;padding:12px;font-size:12px;line-height:1.65}.topology-caveat strong{color:var(--text);display:block}.topology-inspector{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;min-width:0;padding:14px}.topology-field{color:var(--muted);gap:5px;font-size:12px;display:grid}.topology-field input,.topology-field select{font-size:12px}.topology-rule-list{gap:7px;max-height:260px;margin:12px 0 18px;display:grid;overflow-y:auto}.topology-rule-list button{text-align:left;padding:10px}.topology-rule-list button.selected{border-color:var(--accent);background:var(--hover-bg)}.topology-rule-list strong,.topology-rule-list small{display:block}.topology-rule-list strong{font-size:12px}.topology-rule-list small{color:var(--muted);margin-top:5px;font-size:10px}.topology-fields{gap:12px;display:grid}.topology-inspector-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.topology-inspector-head h3{margin:0;font-size:13px}.topology-inspector-head button{padding:5px 8px;font-size:10px}.topology-field-pair{grid-template-columns:1fr 1fr;gap:10px;display:grid}.topology-extra{gap:12px;display:grid}.topology-extra .switch{margin-left:0}@media (width<=1120px){.topology-workspace{grid-template-columns:1fr}.topology-inspector{grid-template-columns:1fr 1fr;gap:16px;display:grid}.topology-inspector>.topology-field{grid-column:1/-1}.topology-rule-list{max-height:500px;margin-top:0}}@media (width<=600px){.app{padding:12px}.topology-inspector{display:block}.topology-fields{margin-top:18px}.topology-toolbar .seg{flex-wrap:wrap}.topology-live{margin-left:0}}.preview-notice{border:1px dashed var(--format-native);background:color-mix(in srgb, var(--format-native) 8%, var(--panel));color:var(--text);border-radius:14px;align-items:center;gap:20px;margin:0 0 20px;padding:16px 20px;display:flex}.preview-notice strong{color:var(--format-native);white-space:nowrap}.preview-notice p{margin:0;font-size:13px;line-height:1.6}.grouping-toolbar{justify-content:space-between;align-items:center;gap:14px;padding:8px 0 16px;display:flex}.grouping-toolbar>div:first-child{gap:5px;display:grid}.grouping-toolbar span,.section-hint{color:var(--muted);font-size:12px}.grouping-actions{flex-wrap:wrap;gap:6px;display:flex}.grouping-actions button,.section-builder button,.section-settings button{padding:8px 12px}.section-builder{border-top:1px solid var(--line);align-items:end;gap:10px;padding:12px 0 0;display:flex}.section-builder label,.section-settings label{color:var(--muted);gap:5px;font-size:12px;display:grid}.section-builder label{flex:1;min-width:0}.section-builder select,.section-builder input,.section-settings input{background:var(--bg);width:100%;min-width:0;padding:8px 10px}.section-hint{margin:12px 0 18px;line-height:1.6}.rule-section{border:1px solid var(--line);background:var(--panel);border-radius:12px;margin-bottom:10px;overflow:hidden}.rule-section>summary{cursor:pointer;background:color-mix(in srgb, var(--text) 3%, var(--panel));align-items:center;gap:12px;padding:15px 16px;list-style:none;display:flex}.rule-section>summary::-webkit-details-marker{display:none}.rule-section>summary strong{overflow-wrap:anywhere;flex:1;min-width:0;font-size:14px}.rule-section>summary:hover{background:color-mix(in srgb, var(--text) 6%, var(--panel))}.rule-section>summary:focus-visible{outline:2px solid var(--link);outline-offset:-3px}.section-caret{font-size:24px;line-height:1;transition:transform .15s}.rule-section[open] .section-caret{transform:rotate(90deg)}.section-range{color:var(--text);background:var(--bg);border:1px solid var(--line);white-space:nowrap;border-radius:5px;padding:3px 7px;font-size:12px}.section-count{color:var(--muted);white-space:nowrap;font-size:12px}.section-settings{border-top:1px solid var(--line);align-items:end;gap:14px;padding:12px 16px;display:flex}.section-settings label{width:min(340px,100%)}.rule-section .table{border-inline:0;border-bottom:0;border-radius:0;margin:0}@media (width<=700px){.preview-notice,.grouping-toolbar{flex-direction:column;align-items:stretch;gap:10px}.section-builder{flex-wrap:wrap}.section-builder label{flex-basis:100%}.rule-section>summary{flex-wrap:wrap;gap:8px;padding:12px}.rule-section>summary strong{flex-basis:calc(100% - 40px)}.section-count{margin-left:auto}.section-settings{flex-wrap:wrap}}.nsx-layout{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.nsx-layout select{flex:230px}.grouping-actions button[aria-pressed=true]{border-color:var(--link);background:color-mix(in srgb, var(--link) 12%, var(--panel));color:var(--text)}.section-expansion{margin-bottom:12px}.section-feedback{color:var(--muted);font-size:12px;line-height:1.5}.section-feedback:empty{margin:0}.rule-section{transition:border-color .15s,background .15s}.rule-section.section-drop-active{border-color:var(--link);box-shadow:inset 0 0 0 2px var(--link)}.rule-section.section-drop-active>summary{background:color-mix(in srgb, var(--link) 16%, var(--panel))}.section-rule-controls{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;max-width:100%;margin-top:8px;display:flex}.section-rule-controls label{color:var(--muted);flex:120px;gap:4px;min-width:0;font-size:11px;display:grid}.section-rule-controls select{background:var(--bg);width:100%;min-width:0;max-width:100%;padding:6px 8px}.rule-drag-handle{cursor:grab;touch-action:auto;border:1px dashed var(--line);color:var(--muted);background:var(--bg);border-radius:6px;flex:none;padding:7px 10px;font-size:20px;line-height:1}.rule-drag-handle:active{cursor:grabbing}.rule-drag-handle:hover{color:var(--text);border-color:var(--link)}.rule-drag-handle:focus-visible,.section-rule-controls select:focus-visible,.grouping-actions button:focus-visible{outline:2px solid var(--link);outline-offset:2px}.section-empty{color:var(--muted);margin:0;padding:12px 16px 20px;font-size:12px}.section-settings>span{color:var(--muted);font-size:12px}.rule-add-footer{justify-content:flex-start;padding:14px 0 0;display:flex}.rule-section>.rule-add-footer{border-top:1px solid var(--line);padding:12px 16px 16px}.rule-add-footer button{align-items:center;gap:7px;display:inline-flex}.section-reorder-buttons{flex:none;gap:4px;display:inline-flex}.section-reorder-buttons button{padding:7px 10px}.section-reorder-buttons button:focus-visible{outline:2px solid var(--link);outline-offset:2px}.rule-section [data-reorder-placement=before]{box-shadow:inset 0 3px 0 var(--link)}.rule-section [data-reorder-placement=after]{box-shadow:inset 0 -3px 0 var(--link)}.row-drop-hint{border:1px solid var(--link);color:var(--text);background:var(--panel);border-radius:6px;margin:8px 0;padding:8px 12px;font-size:12px}.template-gallery{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:14px;margin:0 0 18px;padding:18px}.template-summary{cursor:pointer;font-size:17px;font-weight:650}.template-intro,.template-caveat{color:var(--muted);line-height:1.55}.template-intro{margin:14px 0}.template-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.template-card{--template-accent:var(--link);text-align:left;white-space:normal;color:var(--text);background:color-mix(in srgb, var(--template-accent) 6%, var(--panel-2));border:1px solid color-mix(in srgb, var(--template-accent) 35%, var(--line));border-top:4px solid var(--template-accent);font:inherit;cursor:pointer;border-radius:10px;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;display:flex}.template-card[data-template=ssh]{--template-accent:#5eead4}.template-card[data-template=web]{--template-accent:#93c5fd}.template-card[data-template=dns]{--template-accent:#c4b5fd}:root[data-theme=light] .template-card[data-template=ssh]{--template-accent:#115e59}:root[data-theme=light] .template-card[data-template=web]{--template-accent:#1d4ed8}:root[data-theme=light] .template-card[data-template=dns]{--template-accent:#6d28d9}.template-card{transition:border-color .15s,background-color .15s}.template-card:hover{border-color:var(--template-accent);background:color-mix(in srgb, var(--template-accent) 10%, var(--panel-2))}.template-card-title{color:var(--template-accent);align-items:center;gap:10px;font-size:16px;font-weight:650;display:inline-flex}.template-card-title .button-icon{background:color-mix(in srgb, var(--template-accent) 12%, transparent);border-radius:10px;flex:none;width:42px;height:42px;margin-right:0;padding:9px}.template-card-description{color:var(--text);line-height:1.5}.template-card-service{color:var(--template-accent);background:color-mix(in srgb, var(--template-accent) 8%, var(--panel-2));border:1px solid color-mix(in srgb, var(--template-accent) 25%, var(--line));border-radius:6px;margin-top:auto;padding:5px 8px;font-size:12px}.template-caveat{margin:14px 0 0;font-size:13px}.template-gallery summary:focus-visible{outline:3px solid var(--link);outline-offset:3px}.template-gallery button:focus-visible{outline:3px solid var(--template-accent);outline-offset:3px}@media (width<=700px){.template-cards{grid-template-columns:1fr}.template-gallery{padding:14px}}