:root {
    --page-bg: #edf0f3;
    --paper: #ffffff;
    --ink: #202b35;
    --muted: #66737e;
    --navy: #17232e;
    --navy-soft: #243746;
    --line: #dce3e8;
    --accent: #69a9c4;
    --accent-dark: #3d718b;
    --blue-wash: #eef4f7;
    --shadow: 0 8px 25px rgba(20, 36, 49, .055);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--page-bg); color: var(--ink); font: 16px/1.65 Arial, Helvetica, sans-serif; }
a { color: inherit; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.site-header { min-height: 76px; padding: 0 34px; background: var(--navy); color: #f5f8fa; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.brand-logo { width: 43px; height: 43px; object-fit: contain; }
.brand-name { font-size: 18px; font-weight: 800; letter-spacing: .13em; }
.brand-name small { display: block; margin-top: 2px; color: #9fb1bd; font-size: 8px; letter-spacing: .16em; }
.header-meta { display: flex; align-items: center; gap: 22px; }
.header-document { color: #8295a2; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.header-document b { color: #d3e0e7; margin-left: 7px; }
.user-info { display: flex; flex-direction: column; text-align: right; }
.user-greeting { font-size: 12px; font-weight: 700; }
.user-access { color: #a8b8c2; font-size: 10px; }
.logout-link { padding: 7px 12px; border: 1px solid #526775; border-radius: 5px; color: #e8eef2; font-size: 11px; text-decoration: none; transition: background .18s ease; }
.logout-link:hover { background: #2b4050; }
.page-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); width: 100%; min-height: calc(100vh - 76px); }
.sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: 29px 17px 70px; background: #202f3b; color: #d9e2e8; }
.sidebar-heading { padding: 0 11px 14px; color: #91a3af; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 5px; }
.sidebar-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-left: 3px solid transparent; border-radius: 4px; color: #d5dfe5; font-size: 14px; text-decoration: none; transition: background .16s ease, color .16s ease; }
.sidebar-nav a:hover { background: #2b414f; color: white; }
.sidebar-nav a.active { background: #314958; border-left-color: var(--accent); color: #fff; }
.sidebar-nav a span { padding: 1px 5px; border: 1px solid #607784; border-radius: 3px; color: #a9bdc8; font-size: 9px; }
.sidebar-note { position: absolute; bottom: 21px; left: 27px; right: 15px; color: #8296a3; font-size: 9px; letter-spacing: .09em; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #75b58d; vertical-align: 1px; }
.main-content { min-width: 0; padding: 30px clamp(18px, 3.8vw, 58px) 42px; }
.page-topline { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #d4dce2; color: #7a8791; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.hero { position: relative; overflow: hidden; margin: 24px 0 25px; padding: 40px 40px 29px; border-radius: 8px; background: linear-gradient(116deg,#1a2a37,#304a5b); color: #f6f8fa; box-shadow: var(--shadow); }
.hero::after { content: "PAC"; position: absolute; top: -49px; right: 12px; color: rgba(255,255,255,.035); font-size: clamp(110px, 15vw, 190px); font-weight: 900; letter-spacing: -.09em; pointer-events: none; }
.hero-kicker, .eyebrow { position: relative; color: #a2c5d5; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.hero h1 { position: relative; margin: 9px 0 8px; font-size: clamp(34px, 3.2vw, 49px); line-height: 1.1; letter-spacing: -.035em; }
.hero > p { position: relative; max-width: 760px; margin: 0; color: #c5d1d8; font-size: 15px; line-height: 1.65; }
.hero-stats { position: relative; display: flex; flex-wrap: wrap; gap: 30px; margin-top: 25px; }
.hero-stats div { display: flex; align-items: baseline; gap: 8px; padding-left: 13px; border-left: 1px solid #536a79; }
.hero-stats strong { color: #fff; font-size: 25px; }
.hero-stats span { color: #b9c8d1; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.section-marker { margin-bottom: 7px; color: #7d8a94; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.intro-panel, .content-panel, .closing-note { border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: 0 5px 17px rgba(20,36,49,.035); }
.intro-panel { margin-bottom: 30px; padding: 26px 29px; }
.intro-panel h2, .section-title { margin: 0 0 11px; color: #253644; font-size: 26px; line-height: 1.25; }
.intro-panel p, .content-panel p, .section-paragraph { margin: 8px 0; color: #4f5d67; font-size: 14px; line-height: 1.75; }
.notice { margin: 16px 0 2px; padding: 13px 16px; border-left: 3px solid #6c91a5; border-radius: 3px; background: var(--blue-wash); color: #50636e; font-size: 13px; line-height: 1.7; }
.notice-muted { border-left-color: #9aaab4; background: #f4f6f7; color: #5d6b74; }
.notice-warning { border-left-color: #c18a48; background: #fff7ec; color: #755c40; }
.content-section { margin: 31px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.section-heading p { margin: 0; color: #697781; font-size: 13px; }
.type-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.type-card { min-width: 0; padding: 19px 19px 16px; border: 1px solid #dce3e8; border-top: 4px solid var(--type-color,#6a8da0); border-radius: 6px; background: #fff; box-shadow: 0 5px 15px rgba(20,36,49,.035); }
.type-site { --type-color: #587e98; }
.type-division { --type-color: #8b9b9d; }
.type-observation { --type-color: #b08a60; }
.type-index { color: #8b98a2; font: 800 9px/1.4 Arial,sans-serif; letter-spacing: .15em; }
.type-symbol { display: grid; place-items: center; width: 37px; height: 37px; margin: 11px 0 9px; border-radius: 5px; background: #eef3f6; color: var(--type-color); font-size: 24px; }
.type-card h3 { margin: 0 0 6px; color: #2d4352; font-size: 20px; }
.type-lead { min-height: 48px; margin: 0 0 12px; color: #52636e; font-size: 13px; font-weight: 700; line-height: 1.5; }
.type-card ul, .structure-card ul, .authority-panel ul { margin: 0; padding-left: 18px; color: #5b6973; font-size: 12px; line-height: 1.65; }
.type-card li, .structure-card li { margin: 5px 0; }
.type-example { margin-top: 14px; padding-top: 11px; border-top: 1px solid #e7ecef; color: #66747e; font-size: 11px; line-height: 1.6; }
.type-example b { color: #3e596b; }
.structure-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.structure-card { padding: 21px 22px; border: 1px solid #dce3e8; border-radius: 6px; background: white; }
.zone-card { border-top: 4px solid #6f9bb2; }
.block-card { border-top: 4px solid #b28b5b; }
.structure-label { color: #87949e; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.structure-card h3 { margin: 6px 0 8px; color: #2d4352; font-size: 21px; }
.structure-card p { margin: 0 0 9px; color: #5a6872; font-size: 13px; line-height: 1.65; }
.structure-visual { display: grid; grid-template-columns: 1fr 145px 1fr; align-items: center; gap: 10px; margin: 15px 0; padding: 16px; border: 1px solid #e0e6ea; border-radius: 6px; background: #f8fafb; }
.visual-zone, .visual-block { min-width: 0; padding: 14px; border: 1px solid #cbd8e0; border-radius: 5px; background: #fff; }
.visual-block { border-color: #d8c7ac; }
.visual-tag { display: block; margin-bottom: 5px; color: #84939d; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.visual-zone > b, .visual-block > b { color: #385468; font-size: 13px; }
.visual-rooms { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-top: 11px; }
.visual-rooms span { padding: 7px 5px; border-radius: 3px; background: #eef3f6; color: #60717d; font-size: 9px; text-align: center; }
.visual-block .visual-rooms span { background: #f4efe7; }
.visual-block > small { display: block; margin-top: 9px; color: #88765e; font-size: 9px; }
.visual-connection { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #8d9aa3; text-align: center; }
.visual-connection span { width: 100%; height: 1px; background: #b6c3cb; }
.visual-connection small { font-size: 9px; line-height: 1.4; }
.area-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.area-card { position: relative; overflow: hidden; min-height: 168px; padding: 22px; border: 1px solid #dce3e8; border-radius: 6px; background: #fff; }
.surface-area { border-left: 4px solid #8d9eaa; }
.underground-area { border-left: 4px solid #405d71; }
.area-number { float: right; color: #e0e6ea; font-size: 32px; font-weight: 800; line-height: 1; }
.area-card h3 { margin: 0 0 8px; color: #304858; font-size: 19px; }
.area-card p { margin: 0; color: #5c6973; font-size: 13px; line-height: 1.7; }
.section-paragraph { margin: 13px 2px; }
.zone-list { display: flex; flex-direction: column; gap: 12px; }
.zone-entry { padding: 20px 23px; border: 1px solid #dce3e8; border-radius: 6px; background: #fff; box-shadow: 0 4px 13px rgba(20,36,49,.025); scroll-margin-top: 18px; }
.zone-entry-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.zone-icon { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 5px; background: #edf3f6; color: #52788f; font-size: 20px; font-weight: 700; }
.zone-entry h3 { margin: 0; color: #2e4656; font-size: 19px; }
.zone-status { display: block; margin-top: 2px; color: #8a969f; font-size: 10px; }
.zone-entry > p { margin: 8px 0; color: #56646e; font-size: 13px; line-height: 1.75; }
.subzone-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 13px 0; }
.subzone-card { padding: 14px 15px; border: 1px solid #e2e8ec; border-radius: 5px; background: #f8fafb; }
.subzone-card h4 { margin: 0 0 6px; color: #405b6d; font-size: 13px; }
.subzone-card p { margin: 0; color: #63717b; font-size: 12px; line-height: 1.65; }
.storage-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 12px 0; }
.storage-item { padding: 13px; border: 1px solid #e2e8ec; border-radius: 5px; background: #f8fafb; }
.storage-item b { display: block; margin-bottom: 5px; color: #405b6d; font-size: 12px; }
.storage-item span { display: block; color: #697780; font-size: 11px; line-height: 1.55; }
.content-panel { padding: 23px 26px; }
.isolation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.isolation-grid > div { padding: 15px; border: 1px solid #e3e9ed; border-radius: 5px; background: #fafcfd; }
.isolation-grid h3 { margin: 0 0 6px; color: #385467; font-size: 14px; }
.isolation-grid p { margin: 0; font-size: 12px; line-height: 1.65; }
.authority-panel { margin: 17px 0; padding: 17px 19px; border-left: 3px solid #64869a; background: #f3f7f9; }
.authority-panel h3 { margin: 0 0 8px; color: #365164; font-size: 15px; }
.authority-panel ul { padding-left: 19px; }
.authority-panel li { margin: 6px 0; }
.partial-release { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 15px 0; }
.partial-step { padding: 14px; border: 1px solid #dfe6ea; border-radius: 5px; background: #fff; }
.partial-step > span { display: block; color: #8ea2af; font: 800 10px Consolas,monospace; }
.partial-step b { display: block; margin: 5px 0; color: #3b5669; font-size: 12px; }
.partial-step p { margin: 0; font-size: 11px; line-height: 1.6; }
.incident-example { margin-top: 13px; padding: 19px 22px; border: 1px solid #e1d9ce; border-left: 4px solid #a98a63; border-radius: 5px; background: #fbf8f3; }
.incident-label, .mini-label { color: #9b805d; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.incident-example h3 { margin: 5px 0 7px; color: #4d463c; font-size: 18px; }
.incident-example p { margin: 0; color: #70675a; font-size: 12px; line-height: 1.7; }
.prefix-intro { margin-bottom: 13px; padding: 17px 20px; border: 1px solid #dce4e9; border-radius: 6px; background: #f8fafb; }
.prefix-intro p { margin: 5px 0; color: #56656f; font-size: 13px; line-height: 1.7; }
.prefix-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.prefix-card { position: relative; padding: 18px 19px 16px; border: 1px solid #dce3e8; border-radius: 6px; background: #fff; }
.prefix-card h3 { margin: 2px 0 7px; color: #304858; font-size: 17px; }
.prefix-card p { margin: 6px 0; color: #5d6b75; font-size: 12px; line-height: 1.7; }
.prefix-number { float: right; color: #d4dfe5; font: 800 18px Consolas,monospace; }
.prefix-universal { border-top: 3px solid #587c91; background: #f8fbfc; }
.classification-change { display: grid; grid-template-columns: minmax(190px,.75fr) minmax(0,1.5fr); gap: 20px; align-items: center; margin-top: 14px; padding: 19px 21px; border-radius: 6px; background: #243746; color: #eaf0f3; }
.classification-change-title h3 { margin: 5px 0 0; font-size: 17px; }
.classification-change p { margin: 0; color: #c1ced6; font-size: 12px; line-height: 1.7; }
.classification-change .mini-label { color: #9fc5d6; }
.regional-panel { padding: 22px 25px; }
.regional-model { margin-bottom: 18px; padding: 18px; border: 1px solid #e1e7eb; border-radius: 6px; background: #f8fafb; }
.regional-hub { max-width: 430px; margin: 0 auto; padding: 14px 18px; border-radius: 5px; background: #263c4c; color: white; text-align: center; }
.regional-hub b, .regional-hub span { display: block; }
.regional-hub b { font-size: 14px; }
.regional-hub span { margin-top: 4px; color: #c2d0d8; font-size: 10px; }
.regional-branches { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 15px; }
.regional-branches > div { padding: 12px; border: 1px solid #dce4e9; border-radius: 5px; background: #fff; text-align: center; }
.regional-branches b, .regional-branches span { display: block; }
.regional-branches b { color: #405b6e; font-size: 12px; }
.regional-branches span { margin-top: 4px; color: #79858d; font-size: 10px; }
.closing-note { margin: 30px 0 18px; padding: 17px 20px; background: #f7f9fa; }
.closing-note p { margin: 0; color: #687680; font-size: 12px; line-height: 1.7; }
.page-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; border-top: 1px solid #d4dce2; color: #89959e; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.page-navigation { display: flex; justify-content: space-between; gap: 14px; margin-top: 21px; }
.page-nav-link { display: flex; align-items: center; gap: 11px; min-width: 190px; padding: 10px 13px; border: 1px solid #cad5dc; border-radius: 5px; background: #f8fafb; color: #304958; text-decoration: none; transition: background .16s ease; }
.page-nav-link:hover { background: #e8eff3; }
.page-nav-link.next { margin-left: auto; text-align: right; }
.page-nav-link small, .page-nav-link strong { display: block; }
.page-nav-link small { color: #84919a; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.page-nav-link strong { font-size: 12px; }
.nav-arrow { color: #688598; font-size: 19px; }
.access-screen { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px; background: rgba(8,16,23,.9); }
.access-panel { width: min(430px,100%); padding: 33px; border-radius: 8px; background: #fff; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.access-symbol { margin-bottom: 8px; color: #718896; font-size: 39px; }
.access-panel .eyebrow { color: #8798a2; }
.access-panel h2 { margin: 7px 0; color: #2a3e4b; font-size: 22px; }
.access-panel p { color: #66747d; font-size: 13px; }
.access-return, .modal-confirm { display: inline-block; margin-top: 10px; padding: 10px 17px; border: 0; border-radius: 4px; background: #263d4e; color: #fff; font-size: 12px; text-decoration: none; cursor: pointer; }
.access-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(7,15,22,.65); }
.access-modal-card { position: relative; width: min(400px,100%); padding: 29px; border-radius: 7px; background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.access-modal-card h2 { margin: 8px 0; color: #2d4352; font-size: 20px; }
.access-modal-card p { color: #66737d; font-size: 13px; }
.access-modal-card .eyebrow { color: #8497a3; }
.modal-close { position: absolute; top: 9px; right: 12px; border: 0; background: transparent; color: #73818b; font-size: 25px; cursor: pointer; }
/* Scrolling and focus */
.sidebar-nav a:focus-visible, .page-nav-link:focus-visible, .logout-link:focus-visible, button:focus-visible { outline: 3px solid #8cc6df; outline-offset: 2px; }
@media (max-width: 1180px) {
    .type-grid { grid-template-columns: 1fr; }
    .type-lead { min-height: 0; }
    .main-content { padding-left: 25px; padding-right: 25px; }
}
@media (max-width: 900px) {
    .page-layout { grid-template-columns: 220px minmax(0,1fr); }
    .header-document { display: none; }
    .structure-visual { grid-template-columns: 1fr; }
    .visual-connection { padding: 2px 15%; }
    .visual-connection span { width: 1px; height: 13px; }
    .visual-connection small { max-width: 140px; }
    .classification-change { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 700px) {
    body { font-size: 15px; }
    .site-header { min-height: 66px; padding: 10px 14px; }
    .brand-logo { width: 35px; height: 35px; }
    .brand-name { font-size: 15px; }
    .header-meta { gap: 9px; }
    .user-greeting { font-size: 10px; }
    .user-access { font-size: 9px; }
    .logout-link { padding: 6px 8px; font-size: 10px; }
    .page-layout { display: block; }
    .sidebar { position: static; height: auto; overflow: visible; padding: 10px 12px; }
    .sidebar-heading, .sidebar-note { display: none; }
    .sidebar-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
    .sidebar-nav a { padding: 8px 9px; font-size: 12px; }
    .main-content { padding: 17px 13px 28px; }
    .page-topline { flex-direction: column; gap: 4px; font-size: 8px; }
    .hero { margin: 16px 0 19px; padding: 28px 21px 22px; }
    .hero::after { top: -18px; font-size: 100px; }
    .hero h1 { font-size: 34px; }
    .hero > p { font-size: 13px; }
    .hero-stats { gap: 12px; margin-top: 19px; }
    .hero-stats div { gap: 5px; padding-left: 8px; }
    .hero-stats strong { font-size: 19px; }
    .hero-stats span { font-size: 8px; }
    .intro-panel { padding: 19px; }
    .intro-panel h2, .section-title { font-size: 22px; }
    .intro-panel p, .content-panel p, .section-paragraph { font-size: 13px; }
    .section-heading { display: block; }
    .section-heading p { font-size: 12px; }
    .type-card { padding: 16px; }
    .type-card h3 { font-size: 18px; }
    .type-lead { font-size: 12px; }
    .type-card ul { font-size: 11px; }
    .structure-grid, .area-grid, .subzone-grid, .storage-grid, .isolation-grid, .prefix-grid { grid-template-columns: 1fr; }
    .structure-card { padding: 17px; }
    .structure-visual { padding: 11px; }
    .zone-entry { padding: 16px; }
    .zone-entry h3 { font-size: 17px; }
    .zone-entry > p { font-size: 12px; }
    .subzone-card p { font-size: 11px; }
    .content-panel { padding: 17px; }
    .partial-release { grid-template-columns: 1fr; }
    .regional-branches { grid-template-columns: 1fr; }
    .page-footer { flex-direction: column; font-size: 8px; }
    .page-navigation { gap: 7px; }
    .page-nav-link { min-width: 0; flex: 1; padding: 8px; gap: 6px; }
    .page-nav-link small { font-size: 7px; }
    .page-nav-link strong { font-size: 10px; }
}
.section-jump { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:0 0 27px; padding:12px 14px; border:1px solid #dce4e9; border-radius:6px; background:#f7f9fa; }
.section-jump > span { margin-right:4px; color:#8a969e; font-size:9px; font-weight:800; letter-spacing:.12em; }
.section-jump a { padding:5px 9px; border-radius:4px; background:#eaf0f3; color:#4b6576; font-size:10px; text-decoration:none; transition:background .15s ease,color .15s ease; }
.section-jump a:hover, .section-jump a.section-active { background:#d8e6ed; color:#29485d; }
@media(max-width:700px) { .section-jump { gap:5px; padding:10px; } .section-jump > span { width:100%; } .section-jump a { font-size:9px; } }