:root{
    color-scheme:dark;
    --bg:#09111f;
    --p:#101a2b;
    --p2:#0c1524;
    --b:#263752;
    --t:#e9eff8;
    --m:#91a3bd;
    --a:#4d8dff;
    --g:#35c77b;
    --danger:#ff6c6c;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--t);
    font:14px system-ui;
}

header{
    border-bottom:1px solid var(--b);
    background:#0b1424;
}

.wrap,
main{
    max-width:1250px;
    margin:auto;
}

.wrap{
    padding:22px 26px;
}

.brand{
    font-size:28px;
    font-weight:800;
}

.tag{
    color:var(--m);
    margin-top:4px;
}

main{
    padding:24px 26px;
}

.layout{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:18px;
}

.card{
    background:var(--p);
    border:1px solid var(--b);
    border-radius:12px;
    padding:18px;
}

h2{
    font-size:15px;
    margin:0 0 15px;
}

label{
    display:block;
    color:var(--m);
    margin:12px 0 6px;
}

input,
select,
textarea{
    width:100%;
    background:var(--p2);
    color:var(--t);
    border:1px solid var(--b);
    border-radius:8px;
    padding:10px;
}

textarea{
    min-height:260px;
    resize:vertical;
    font:13px ui-monospace,Consolas,monospace;
}

#output{
    min-height:560px;
}

.g2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.actions{
    display:flex;
    gap:8px;
    margin-top:14px;
    flex-wrap:wrap;
}

button{
    border:0;
    border-radius:8px;
    padding:10px 14px;
    background:var(--a);
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

button:hover{
    opacity:.9;
}

button.s{
    background:#22324d;
}

button.g{
    background:#168653;
}

button.danger{
    background:#8c3030;
}

button.small{
    padding:6px 9px;
    font-size:12px;
}

.meta{
    margin-top:12px;
    color:var(--m);
}

.bad{
    color:var(--danger);
}

.ok{
    color:var(--g);
}

.hidden{
    display:none;
}

.section-title{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid var(--b);
    font-weight:700;
}

table{
    width:100%;
    border-collapse:collapse;
    margin-top:12px;
}

td,
th{
    text-align:left;
    padding:8px;
    border-bottom:1px solid var(--b);
    vertical-align:middle;
}

th{
    color:var(--m);
}

.empty{
    color:var(--m);
    margin-top:10px;
}

.member-list{
    margin-top:10px;
    border:1px solid var(--b);
    border-radius:8px;
    background:var(--p2);
    max-height:260px;
    overflow:auto;
}

.member-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    border-bottom:1px solid var(--b);
}

.member-row:last-child{
    border-bottom:0;
}

.member-row input{
    width:auto;
    margin:0;
}

.member-info{
    flex:1;
}

.member-name{
    font-weight:700;
}

.member-detail{
    color:var(--m);
    font-size:12px;
    margin-top:2px;
}

.notice{
    margin-top:10px;
    padding:10px;
    border:1px solid var(--b);
    background:var(--p2);
    border-radius:8px;
    color:var(--m);
}

/* Keep forms and output usable on touch screens and narrow viewports. */
button,
input,
select{
    min-height:44px;
}

input,
select,
textarea{
    min-width:0;
    font-size:16px;
}

.layout,
.card,
.workspace-grid,
.platform-grid{
    min-width:0;
}

textarea,
#output{
    max-width:100%;
}

table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    white-space:nowrap;
}

@media(max-width:900px){
    .layout{
        grid-template-columns:1fr;
    }

    main{
        padding:15px;
    }

    .wrap{
        padding:18px 15px;
    }
}

@media(max-width:640px){
    .wrap,
    main{
        padding-left:12px;
        padding-right:12px;
    }

    .brand{
        font-size:24px;
    }

    .layout{
        gap:12px;
    }

    .card{
        padding:14px;
        border-radius:10px;
    }

    #output{
        min-height:300px;
    }

    .g2{
        grid-template-columns:1fr;
        gap:0;
    }

    .actions{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    }

    .actions button{
        width:100%;
    }

    .platform-home{
        padding:16px;
        padding-top:max(16px,env(safe-area-inset-top));
        padding-bottom:max(16px,env(safe-area-inset-bottom));
    }

    .platform-card{
        padding:22px 18px;
    }

    .platform-card h1{
        font-size:30px;
    }

    .platform-grid{
        grid-template-columns:1fr;
    }

    .platform-tile{
        min-height:0;
    }

    .platform-mobile{
        width:100%;
    }

    .platform-mobile button{
        flex:1 1 150px;
    }

    .password-checks{
        grid-template-columns:1fr;
    }

    .ipcalc-inputs{
        grid-template-columns:1fr;
    }

    .ipcalc-results{
        overflow-x:auto;
    }

    .password-output-row input{
        flex:1;
        min-width:0;
        width:0;
    }
}

@media(max-width:380px){
    .platform-card{
        padding:18px 14px;
    }

    .card{
        padding:12px;
    }

    .actions{
        grid-template-columns:1fr;
    }
}
.password-tool{max-width:760px;margin:18px auto}.password-intro,.password-privacy{color:var(--m)}.password-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.password-types .password-type{background:var(--p2);border:1px solid var(--b);color:var(--t)}.password-types .password-type.active{background:var(--a);border-color:var(--a);color:#fff}.password-options{padding:16px;background:var(--p2);border:1px solid var(--b);border-radius:8px;margin:14px 0}.password-options input[type=range]{padding:0;accent-color:var(--a)}.password-options input[type=number],.password-options input[type=text]{max-width:180px}.password-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:12px}.password-checks label{display:flex;align-items:center;gap:8px;margin:0;color:var(--t)}.password-checks input{width:18px;min-height:18px;margin:0;accent-color:var(--a)}.password-output-row{display:flex;gap:8px}.password-output-row input{font:600 18px ui-monospace,Consolas,monospace;letter-spacing:.03em}.password-output-row button{flex:0 0 auto}.password-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}.password-privacy{font-size:12px;margin:16px 0 0}
.ipcalc-modes{display:flex;gap:8px;margin:16px 0}.ipcalc-modes .ipcalc-mode{background:var(--p2);border:1px solid var(--b);color:var(--t);min-width:90px}.ipcalc-modes .ipcalc-mode.active{background:var(--a);border-color:var(--a);color:#fff}.ipcalc-card{max-width:900px;margin:18px auto}.ipcalc-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ipcalc-inputs input{font-family:ui-monospace,Consolas,monospace}.ipcalc-results{margin-top:20px}.ipcalc-results h3{margin:20px 0 8px}.ipcalc-results table{display:table;white-space:normal}.ipcalc-results td:first-child{color:var(--m);width:190px}.ipcalc-binary{font:12px ui-monospace,Consolas,monospace;overflow-wrap:anywhere}.ipcalc-subnets{max-height:300px;overflow:auto;border:1px solid var(--b);border-radius:8px}@media(max-width:640px){.ipcalc-inputs{grid-template-columns:1fr}.ipcalc-results{overflow-x:auto}.password-checks{grid-template-columns:1fr}}

.platform-screen{display:none;min-height:100vh}.platform-screen.active{display:block}.platform-home{place-items:center;padding:24px}.platform-home.active{display:grid}.platform-card{width:min(620px,100%);margin:auto;background:var(--p);border:1px solid var(--b);border-radius:16px;padding:34px}.platform-card h1{font-size:34px;margin:0}.platform-card .tag{margin:6px 0 28px}.platform-card label{display:block;color:var(--m);margin:18px 0 6px}.platform-card select{width:100%;padding:12px;background:var(--p2);color:var(--t);border:1px solid var(--b);border-radius:8px}.platform-card button{margin-top:24px;width:100%}.platform-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.platform-home-link{background:transparent;color:var(--t);padding:0;border:0;text-align:left;line-height:1}.platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}.platform-tile{background:var(--p);border:1px solid var(--b);border-radius:12px;padding:22px;min-height:190px;display:flex;flex-direction:column;align-items:flex-start}.platform-tile p,.platform-note{color:var(--m)}.platform-tile p{flex:1}.platform-crumb{color:var(--m);font-size:13px;margin-bottom:16px}.platform-crumb button{padding:0;background:none;color:var(--m);font-weight:400}.platform-note{padding:16px;background:var(--p2);border:1px solid var(--b);border-radius:8px;margin-top:18px}.platform-mobile{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:600px){.platform-card{padding:24px}.platform-head{align-items:flex-start;flex-direction:column}}
.password-tool{max-width:760px;margin:18px auto}.password-intro,.password-privacy{color:var(--m)}.password-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.password-types .password-type{background:var(--p2);border:1px solid var(--b);color:var(--t)}.password-types .password-type.active{background:var(--a);border-color:var(--a);color:#fff}.password-options{padding:16px;background:var(--p2);border:1px solid var(--b);border-radius:8px;margin:14px 0}.password-options input[type=range]{padding:0;accent-color:var(--a)}.password-options input[type=number],.password-options input[type=text]{max-width:180px}.password-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:12px}.password-checks label{display:flex;align-items:center;gap:8px;margin:0;color:var(--t)}.password-checks input{width:18px;min-height:18px;margin:0;accent-color:var(--a)}.password-output-row{display:flex;gap:8px}.password-output-row input{font:600 18px ui-monospace,Consolas,monospace;letter-spacing:.03em}.password-output-row button{flex:0 0 auto}.password-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}.password-privacy{font-size:12px;margin:16px 0 0}
.ipcalc-modes{display:flex;gap:8px;margin:16px 0}.ipcalc-modes .ipcalc-mode{background:var(--p2);border:1px solid var(--b);color:var(--t);min-width:90px}.ipcalc-modes .ipcalc-mode.active{background:var(--a);border-color:var(--a);color:#fff}.ipcalc-card{max-width:900px;margin:18px auto}.ipcalc-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ipcalc-inputs input{font-family:ui-monospace,Consolas,monospace}.ipcalc-results{margin-top:20px}.ipcalc-results h3{margin:20px 0 8px}.ipcalc-results table{display:table;white-space:normal}.ipcalc-results td:first-child{color:var(--m);width:190px}.ipcalc-binary{font:12px ui-monospace,Consolas,monospace;overflow-wrap:anywhere}.ipcalc-subnets{max-height:300px;overflow:auto;border:1px solid var(--b);border-radius:8px}@media(max-width:640px){.ipcalc-inputs{grid-template-columns:1fr}.ipcalc-results{overflow-x:auto}.password-checks{grid-template-columns:1fr}}

.network-canvas-embed{height:calc(100dvh - 230px);min-height:460px;border:1px solid var(--b);border-radius:12px;overflow:hidden;background:#fff}
.network-canvas-embed iframe{display:block;width:100%;height:100%;border:0}

.diagram-editor-frame-wrap{height:calc(100dvh - 280px);min-height:480px;border:1px solid var(--b);border-radius:12px;overflow:hidden;background:#fff}
.diagram-editor-frame-wrap iframe{display:block;width:100%;height:100%;border:0}
.diagram-editor-actions,.diagram-editor-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.diagram-editor-note,.diagram-editor-status,.diagram-editor-attribution{color:var(--m);font-size:13px}
.diagram-editor-attribution{font-size:12px}
.diagram-editor-standalone header{padding:14px 0}
.diagram-editor-standalone .diagram-editor-brand{color:var(--t);font-size:20px;font-weight:700;text-decoration:none}
.diagram-editor-standalone .diagram-editor-nav-link{display:inline-flex;align-items:center;padding:9px 14px;border-radius:8px;background:var(--p2);color:var(--t);text-decoration:none}
.diagram-editor-page{padding:14px 20px}
.diagram-editor-page .diagram-editor-frame-wrap{height:calc(100dvh - 190px);min-height:480px}
@media(max-width:640px){.diagram-editor-page{padding:10px}.diagram-editor-page .diagram-editor-frame-wrap{height:calc(100dvh - 245px);min-height:400px}}

.attack-navigator-actions,.attack-navigator-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.attack-navigator-note,.attack-navigator-attribution{color:var(--m);font-size:13px}
.attack-navigator-frame-wrap{height:calc(100dvh - 300px);min-height:560px;border:1px solid var(--b);border-radius:12px;overflow:hidden;background:#fff}
.attack-navigator-frame-wrap iframe{display:block;width:100%;height:100%;border:0}
.attack-navigator-standalone{max-width:none;padding:12px 18px}
.attack-navigator-standalone .attack-navigator-frame-wrap{height:calc(100dvh - 190px);min-height:500px}
.attack-navigator-nav-link{display:inline-flex;align-items:center;padding:9px 14px;border-radius:8px;background:var(--p2);color:var(--t);text-decoration:none}
.attack-navigator-attribution a{color:var(--t)}
@media(max-width:640px){.attack-navigator-frame-wrap{height:calc(100dvh - 340px);min-height:460px}.attack-navigator-standalone{padding:10px}.attack-navigator-standalone .attack-navigator-frame-wrap{height:calc(100dvh - 230px);min-height:460px}}

.ip-generator-launch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.ip-generator-panel{margin-top:24px;padding:20px;border:1px solid var(--b);border-radius:12px;background:var(--p2)}
.ip-generator-heading,.ip-generator-controls,.ip-generator-exports{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ip-generator-heading{justify-content:space-between}
.ip-generator-heading h2{margin:0}
.ip-generator-controls{margin:14px 0}
.ip-generator-controls>div:first-child{display:grid;gap:6px;min-width:190px}
.ip-generator-controls input{width:140px;font-family:ui-monospace,Consolas,monospace}
.ip-generator-exports{margin-left:auto}
.ip-generator-results{max-height:520px;overflow:auto;border:1px solid var(--b);border-radius:8px}
.ip-generator-table{min-width:100%;width:max-content;border-collapse:collapse;white-space:nowrap}
.ip-generator-table caption{padding:12px;text-align:left;color:var(--t);font-weight:700}
.ip-generator-table th,.ip-generator-table td{padding:9px 12px;border-bottom:1px solid var(--b);text-align:left;font:12px ui-monospace,Consolas,monospace}
.ip-generator-table th{position:sticky;top:0;background:var(--p2);color:var(--t)}
.ip-generator-exports button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:640px){.ip-generator-panel{padding:12px}.ip-generator-exports{margin-left:0}.ip-generator-controls{align-items:flex-start}.ip-generator-table th,.ip-generator-table td{padding:8px}}

/* Keep Workspace actions in one row on wide screens. */
.workspace-actions{display:flex}
.workspace-actions > .platform-tile{flex:1;min-width:0}
.workspace-actions > .platform-tile[hidden]{display:none}
@media(max-width:640px){.workspace-actions{flex-direction:column}}

#fgDebugTrafficFields[hidden]{display:none}

.configuration-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.configuration-heading h2{margin:0}.configuration-heading select{width:auto;min-width:120px}#firewallPolicySection{margin-top:24px;border-top:1px solid var(--b);padding-top:16px}