/* Siebot / Citizen Apps – portal multipágina */
:root{--bg:#f4f7fb;--ink:#16304e;--muted:#62778d;--blue:#1764dd;--sky:#e9f2ff;--line:#dfe7f2;--surface:#fff;--good:#087b57;--danger:#b53d46;--amber:#a46a13;color-scheme:light}
*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.68;margin:0}html{scroll-behavior:smooth;scroll-padding-top:38px}
a{color:#1764d9}button,input,select{font:inherit}button{cursor:pointer}input[type=checkbox]{accent-color:#1764dd}
.portal-layout{display:block}.portal-sidebar{position:fixed;z-index:40;left:0;top:0;width:270px;height:100dvh;background:#fff;border-right:1px solid #e1e9f4;box-shadow:6px 0 28px #1b3a5610;display:flex;flex-direction:column;padding:28px 16px 20px;overflow-y:auto}
.portal-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#16304e;padding:0 11px 25px;border-bottom:1px solid #e9eef6}.portal-logo img{width:145px;max-height:62px;object-fit:contain}.portal-caption{font-size:11px;font-weight:750;line-height:1.25;color:#617791;padding:17px 14px 10px;text-transform:uppercase;letter-spacing:1.3px}.side-nav{display:flex;flex-direction:column;gap:7px}
.side-nav a{color:#526982;text-decoration:none;font-size:13px;line-height:1.35;font-weight:700;border:1px solid transparent;border-radius:12px;padding:14px 13px;display:flex;align-items:center;gap:13px;transition:.15s}
.side-nav a svg{height:19px;width:19px;flex-shrink:0;stroke:currentColor;stroke-width:1.8;fill:none}
.side-nav a:hover{background:#f1f6ff;color:#165cce}
.side-nav a.active{background:#e9f2ff;border-color:#cbdffb;color:#1659c3;box-shadow:inset 3px 0 0 #1764dd}
.sidebar-foot{margin-top:auto;padding:22px 13px 4px;border-top:1px solid #edf1f6;color:#8090a1;font-size:11px;line-height:1.7}
.sidebar-foot strong{display:block;color:#435d7b}
.portal-main{margin-left:270px;min-height:100vh;width:calc(100% - 270px)}
.portal-top{height:79px;padding:16px clamp(24px,4vw,64px);border-bottom:1px solid #e2eaf5;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff}
.breadcrumb{display:flex;align-items:center;gap:11px;color:#6a7f94;font-size:12px;font-weight:650}.breadcrumb strong{color:#22486d;font-weight:800}
.portal-top .right-tools{display:flex;align-items:center;gap:12px}.top-pill{background:#eaf5ef;border:1px solid #cfe8d9;border-radius:30px;padding:7px 11px;color:#197653;font-size:11px;font-weight:750}
.top-print{border:1px solid #d8e4f3;color:#315780;border-radius:10px;background:#fff;padding:9px 13px;font-size:12px;font-weight:700}
.portal-body{width:min(1400px,100%);padding:44px clamp(24px,4vw,64px) 90px;margin:0 auto}
.portal-kicker{color:#1b65cd;font-size:11px;font-weight:850;letter-spacing:1.7px;text-transform:uppercase;margin-bottom:11px}
.portal-heading{font-size:clamp(30px,3.4vw,49px);font-weight:850;letter-spacing:-1.6px;line-height:1.13;margin:0 0 14px;color:#153453}
.portal-description{font-size:16px;color:#5c738c;max-width:970px;margin:0 0 36px;line-height:1.8}
.portal-panel{background:#fff;border:1px solid #dfe8f4;border-radius:19px;box-shadow:0 10px 30px #1237580b;padding:clamp(19px,2.5vw,30px);margin:0 0 23px}
.portal-panel h2{font-size:23px;letter-spacing:-.6px;margin:0 0 12px;color:#173756}
.portal-panel h3{font-size:17px;margin:4px 0 13px}
.portal-panel p{color:#60758b;line-height:1.75}
.portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.portal-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal-metric{background:#f3f8ff;border:1px solid #dfeaf6;border-radius:14px;padding:20px;min-width:0}.portal-metric .micro{display:block;font-size:11px;color:#61778f;margin-bottom:8px}.portal-metric strong{font-size:30px;display:block;line-height:1.16;color:#194d91;letter-spacing:-1px}.portal-metric small{display:block;font-size:12px;color:#657c92;margin-top:6px}
.portal-divider{height:1px;background:#e7edf5;margin:27px 0}
.portal-section{margin:38px 0 0}.portal-section-title{font-size:23px;color:#173756;margin:0 0 16px;letter-spacing:-.5px}
.portal-callout{padding:19px 22px;background:#eaf3ff;border:1px solid #d2e4fc;border-left:4px solid #1c6be0;border-radius:12px;margin:22px 0;color:#385f88;font-size:13px;line-height:1.8}.portal-callout.amber{background:#fff8ed;border-color:#f0dfc2;border-left-color:#ba862d;color:#765a32}
.portal-badge{display:inline-flex;align-items:center;gap:6px;border-radius:25px;padding:6px 12px;background:#e7f5ed;color:#0f7452;font-size:11px;font-weight:800}.portal-badge.info{background:#e9f2ff;color:#205ca6}.portal-badge.alert{background:#fff1df;color:#956016}
.portal-form label{display:flex;flex-direction:column;color:#385b7e;font-size:12px;font-weight:750;gap:8px}
.portal-form input:not([type=checkbox]),.portal-form select{background:white;border:1px solid #cedcea;border-radius:11px;padding:12px 13px;width:100%;color:#243b53;outline:none}
.portal-form input:focus,.portal-form select:focus{box-shadow:0 0 0 3px #c5dafe;border-color:#4d91e5}
.portal-form fieldset{border:1px solid #dce7f3;border-radius:12px;padding:12px 15px;margin:0}
.portal-form legend{color:#3e5f80;font-size:12px;font-weight:800;padding:0 6px}
.portal-form .checks{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;padding:0}.portal-form .checks label{display:flex;flex-direction:row;align-items:center;gap:7px;font-size:12px}
.portal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.primary-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:11px;background:#1967df;color:#fff!important;font-size:13px;font-weight:850;padding:14px 22px;box-shadow:0 6px 15px #1764dd25;transition:.15s}.primary-action:hover{background:#0e55c0;transform:translateY(-1px)}
.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #cddcef;border-radius:11px;background:#fff;color:#275d97;font-size:12px;font-weight:800;padding:11px 15px}
.muted-text{font-size:12px;color:#6b8096}
.select-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:15px 0 25px}
.select-card{background:white;border:1px solid #dce5f0;border-radius:14px;padding:17px;text-align:left;transition:.15s;position:relative;color:#244669;min-height:147px}
.select-card:hover{border-color:#76a6e9;background:#fbfdff}
.select-card.is-selected{border:2px solid #1764dd;background:#f0f6ff;padding:16px;box-shadow:0 4px 18px #1756b315}
.select-card small{display:block;text-transform:uppercase;letter-spacing:1px;font-size:10px;font-weight:800;color:#246bc1}
.select-card strong{display:block;font-size:17px;margin:9px 0 5px;color:#183f70}
.select-card .card-spec{font-size:12px;color:#657b90;display:block}
.select-card .card-price{display:block;font-size:20px;font-weight:850;color:#1a4f91;margin-top:12px}
.select-card .card-price small{display:inline;text-transform:none;letter-spacing:0;color:#6a8298}
.cost-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:20px 0}
.cost-controls label{font-size:12px;color:#486782;font-weight:700}
.cost-controls input,.cost-controls select{display:block;width:100%;padding:11px 12px;margin-top:8px;border:1px solid #d0dced;border-radius:10px;background:white;color:#203e5e}
.portal-table-wrap{width:100%;overflow-x:auto;border-radius:12px;border:1px solid #e4ebf4;margin-top:20px}
.portal-table{border-collapse:collapse;width:100%;min-width:710px;background:#fff;font-size:13px}
.portal-table th,.portal-table td{padding:14px 17px;border-bottom:1px solid #e6edf6;text-align:left}
.portal-table th{background:#f3f7fd;color:#54708e;font-size:11px}
.portal-table td{color:#355777}.portal-table tr.selected td{background:#eaf3ff}.portal-table strong{color:#214b76}
.sim-grid{display:grid;grid-template-columns:minmax(315px,1.05fr) minmax(390px,1.25fr);gap:22px;align-items:start}
.sim-form-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.sim-form-header .num-circle{display:inline-grid;place-items:center;border-radius:50%;width:31px;height:31px;background:#e7f0ff;color:#195bc5;font-weight:900;font-size:13px}
.rack{border:1px solid #dbe6f1;background:#f5f8fd;border-radius:15px;padding:18px}
.rack-head{display:flex;align-items:center;justify-content:space-between;gap:13px;border-bottom:1px solid #dbe6ef;padding-bottom:13px;margin-bottom:14px}
.rack-head strong{font-size:14px;color:#284969}
.rack-head small{font-size:11px;color:#5d7691}
.rack-server{background:#fff;border:1px solid #dce6f2;border-radius:11px;padding:12px;display:flex;gap:12px;align-items:center;margin:9px 0}
.rack-server .app-symbol{width:33px;height:33px;background:#e5f0ff;border:1px solid #d0e3fc;display:grid;place-items:center;border-radius:9px;color:#2566bf;font-size:13px;font-weight:900}
.rack-server strong{display:block;font-size:12px;color:#254c76;overflow-wrap:anywhere}
.rack-server small{display:block;font-size:11px;color:#6c8399}
.rack-server button{margin-left:auto;border:0;background:#fceff0;color:#ac3c45;padding:6px 8px;border-radius:8px;font-size:11px}
.rack-empty{text-align:center;padding:24px;color:#8b9bad;font-size:13px}
.usage{margin:19px 0}.usage-header{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#59728c;margin-bottom:8px}
.usage-header strong{color:#214c77}
.usage-track{height:11px;border-radius:20px;background:#e5ecf5;overflow:hidden}
.usage-track span{height:100%;display:block;border-radius:20px;background:#2178e1;transition:width .25s}
.usage-track span.near{background:#d39134}.usage-track span.over{background:#c94955}
.step-ladder{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}
.step-ladder span{font-size:11px;font-weight:750;padding:7px 10px;border-radius:20px;background:#f0f4f9;border:1px solid #e1e9f1;color:#687e92}
.step-ladder span.done{background:#e9f5ef;border-color:#cbe9d8;color:#158157}
.sim-result{margin-top:18px;background:#edf5ff;border:1px solid #cfe3ff;border-radius:13px;padding:16px;color:#315d8a;font-size:12px;line-height:1.75}
.sim-result.warn{background:#fff6e9;border-color:#efdbb9;color:#84602f}
.potential-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.potential-row .portal-metric{padding:16px}
.potential-row .portal-metric strong{font-size:25px}
.scenario-buttons{display:flex;gap:9px;flex-wrap:wrap}.scenario-buttons button{border-radius:10px;padding:10px 15px;border:1px solid #d5e1ef;background:#fff;color:#46678c;font-size:12px;font-weight:750}.scenario-buttons button.selected{background:#eaf3ff;border-color:#1764dd;color:#1a60c4}
.scale-chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:end;min-height:235px;margin:24px 0 8px}
.scale-col{display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center}
.scale-bars{height:164px;width:100%;display:flex;align-items:end;gap:7px;border-bottom:1px solid #bfd0e5;padding:8px 6px}
.scale-bars span{flex:1;min-height:4px;border-radius:5px 5px 0 0}
.scale-bars .ram{background:#468ae2}.scale-bars .cpu{background:#1aa6a1}.scale-col small{color:#62788f;font-size:11px}.scale-col strong{font-size:13px;color:#305574}
.bottom-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:27px;margin-top:46px;border-top:1px solid #dbe5ef}
.bottom-nav a{font-size:13px;font-weight:750;text-decoration:none;border:1px solid #d5e1f0;padding:12px 16px;border-radius:11px;background:#fff}
.portal-main .container{max-width:none;width:100%;padding-left:0;padding-right:0}
.portal-main .section{margin:25px 0 42px}.portal-main .section-head{margin-bottom:20px}
.portal-main .section-head h2,.portal-main .heading h2{font-size:25px;letter-spacing:-.7px}
.portal-main .paper,.portal-main .card{background:#fff;box-shadow:0 8px 22px #1841680b}
.portal-main .heading{margin:20px 0}.portal-main .hero{padding:0}
.portal-main .glossary{gap:15px}.portal-main .glossary div{padding:22px}
.portal-main .sequence-shell{padding:26px}
.portal-main .sequence-stage svg{min-width:840px}
.portal-main .notice{margin:20px 0}
.mobile-bar{display:none}.mobile-overlay{display:none}
@media(max-width:1220px){.portal-sidebar{width:236px}.portal-main{width:calc(100% - 236px);margin-left:236px}.portal-body{padding:37px 29px 70px}.portal-grid,.select-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.sim-grid{grid-template-columns:1fr}.portal-form-grid{grid-template-columns:1fr 1fr}.cost-controls{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.portal-sidebar{transform:translateX(-110%);transition:transform .2s;width:270px}.portal-sidebar.open{transform:translateX(0)}.portal-main{margin-left:0;width:100%}.mobile-bar{display:flex;position:sticky;top:0;z-index:35;align-items:center;justify-content:space-between;gap:15px;height:68px;padding:10px 22px;background:#fff;border-bottom:1px solid #e0e9f3}.mobile-bar button{border:1px solid #dce6f3;background:#fff;border-radius:9px;font-size:18px;color:#2863a6;padding:7px 12px}.mobile-bar img{width:115px;height:42px;object-fit:contain}.mobile-overlay{position:fixed;inset:0;z-index:36;background:#12243f72}.mobile-overlay.show{display:block}.portal-top{display:none}.portal-body{padding:27px 20px 60px}.portal-grid,.select-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:570px){.portal-body{padding:23px 16px 55px}.portal-heading{font-size:31px}.portal-description{font-size:14px}.portal-grid,.portal-grid.two,.select-cards,.potential-row,.cost-controls,.portal-form-grid{grid-template-columns:1fr}.portal-panel{padding:19px}.scale-chart{gap:3px}.portal-main .sequence-shell{padding:15px}.portal-main .section-head{display:block}}
@media print{body{background:#fff}.portal-sidebar,.portal-top,.mobile-bar,.mobile-overlay,.bottom-nav,.no-print{display:none!important}.portal-main{margin:0;width:100%}.portal-body{width:100%;max-width:none;padding:20px}.portal-panel,.paper,.card{box-shadow:none!important;break-inside:avoid}.portal-heading{font-size:31px}.select-cards{grid-template-columns:repeat(3,1fr)}.portal-main .sequence-stage{overflow:visible}.portal-main .sequence-stage svg{min-width:0}.portal-main .section{break-inside:auto}}