:root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color-scheme:dark}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}
.app{display:grid;grid-template-columns:88px minmax(390px,470px) minmax(0,1fr);height:100vh;min-height:560px;background:#101517;color:#f3f6f7}
.rail{z-index:5;display:flex;flex-direction:column;background:#212425;border-right:1px solid #4e5355;box-shadow:3px 0 12px #0005}
.rail-top{height:66px;display:grid;place-items:center;border-bottom:1px solid #4b5052;color:#9db6c1;font-size:12px;font-weight:800;letter-spacing:.24em}
.rail-group{display:flex;flex-direction:column;overflow:auto;min-height:0;padding:8px 0}
.rail-btn{height:71px;flex:none;width:100%;border:0;border-left:4px solid transparent;background:transparent;color:#b5b9bb;font-weight:800;font-size:15px;letter-spacing:.02em;display:grid;place-items:center}
.rail-btn .rail-icon{line-height:1}.rail-btn span:last-child{display:none}.rail-btn:hover{background:#32383b;color:white}.rail-btn.active{background:#81b9d4;color:white;border-left-color:#b5dff2;text-shadow:0 1px 1px #2d5364}
.rail-btn[data-category="ZOOM"]{height:58px;font-size:12px}.rail-btn[data-category="FAV"]{font-size:27px}.rail-bottom{margin-top:auto;padding:12px;border-top:1px solid #444b4e;display:grid;place-items:center}
.rail-bottom button{height:43px;width:54px;border:1px solid #53616a;border-radius:4px;background:#30383c;color:#e5f2f6;font-size:24px}
.charts{z-index:4;display:flex;flex-direction:column;min-height:0;background:#343e43;box-shadow:5px 0 14px #0006}
.charts-top{height:77px;flex:none;display:flex;align-items:center;gap:12px;padding:12px 17px;border-bottom:1px solid #555f64;background:#30393e}
.airport-toggle{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:3px 0;border:0;background:none;color:white;text-align:left}
.airport-toggle small{display:block;color:#8dbbd1;font-size:11px;font-weight:800;letter-spacing:.13em}.airport-toggle strong{display:block;font-size:19px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.airport-toggle .down{font-size:22px;color:#8cb9ce}.count-pill{border-radius:12px;background:#45565e;color:#c7d6dc;padding:4px 8px;font-size:11px;white-space:nowrap}
.library-line{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:7px;padding:0 17px;background:#30393e;border-bottom:1px solid #485258}
.library-line button{border:0;background:none;color:#bcd7e5;display:flex;align-items:center;gap:8px;min-width:0;padding:4px 0}.library-line button:hover{color:white}.library-line button span{font-size:18px}.library-line button strong{font-size:12px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-line small{font-size:10px;color:#8ca3af;white-space:nowrap}
.search-box{height:39px;flex:none;display:flex;align-items:center;gap:8px;margin:11px 14px 7px;padding:0 11px;border:1px solid #66737a;border-radius:4px;color:#c6d9e2;background:#2a3439}
.search-box>span{font-size:23px;line-height:1}.search-box input{flex:1;min-width:0;border:0;outline:0;background:none;color:white;font-size:12px}.search-box input::placeholder{color:#a9b8bf}.search-box kbd{font:10px "Segoe UI",sans-serif;color:#a9b8bf;border:1px solid #66737a;border-radius:3px;padding:1px 4px}
.filter-note{height:31px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#c8dce6;font-size:11px;font-weight:800}.filter-note button{border:0;background:none;color:#8bc7e5;font-size:10px}
.chart-list{flex:1;min-height:0;overflow:auto;scrollbar-color:#aeb4b7 #323b40;scrollbar-width:thin}
.chart-item{position:relative;display:flex;align-items:flex-start;gap:8px;width:100%;min-height:93px;padding:18px 14px 15px 20px;border:0;border-bottom:2px solid #273137;background:#38444a;color:#f4f7f8;text-align:left}
.chart-item:nth-child(even){background:#354046}.chart-item:hover{background:#48565e}.chart-item.active{background:#52626b;box-shadow:inset 4px 0 #8ccbe9}
.chart-main{flex:1;min-width:0}.chart-title{font-size:17px;font-weight:800;line-height:1.35;word-break:break-word;letter-spacing:.005em}.chart-meta{font-size:10px;color:#b6c7cf;margin-top:8px;display:flex;align-items:center;gap:8px}.chart-tag{display:inline-flex;min-width:31px;align-items:center;justify-content:center;padding:2px 4px;background:#54798c;color:#e5f4fb;border-radius:3px;font-size:9px;font-weight:800}.star-button{align-self:center;border:0;background:none;color:#88adbf;font-size:26px;line-height:1;padding:2px 4px}.star-button.saved{color:#56bbf4}.star-button:hover{color:#85d0f7}
.charts-foot{height:29px;flex:none;display:flex;align-items:center;padding:0 16px;border-top:1px solid #535f65;background:#30393e;color:#9eb1ba;font-size:10px}.list-empty{padding:22px 20px;color:#bac6cc;font-size:13px;line-height:1.6}
.airports{position:absolute;z-index:20;left:88px;top:77px;bottom:24px;width:470px;background:#27343b;border:1px solid #6b7d86;box-shadow:10px 10px 30px #0009;display:flex;flex-direction:column}
.drawer-head{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #556973}.drawer-head strong{font-size:15px}.drawer-head button{border:0;background:none;color:#d4e2e8;font-size:27px}.section-label{padding:15px 17px 8px;color:#9ebdca;font-size:11px;display:flex;justify-content:space-between}.airport-list{overflow:auto;flex:1;padding:0 8px 12px}.airport-item{width:100%;padding:12px 12px;border:0;border-bottom:1px solid #41525a;background:none;color:#e1eef2;text-align:left;display:flex;justify-content:space-between;align-items:center}.airport-item:hover,.airport-item.active{background:#466170}.airport-code{font-size:14px;font-weight:800}.airport-name{display:block;margin-top:2px;color:#b3c9d1;font-size:11px}.airport-n{font-size:11px;color:#9db7c4}
.airport-search-box{height:40px;margin:12px 12px 0;padding:0 10px;display:flex;align-items:center;gap:7px;border:1px solid #627985;border-radius:4px;background:#202f37;color:#b9d5e2}.airport-search-box span{font-size:23px;line-height:1}.airport-search-box input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#f0f8fb;font-size:13px}.airport-search-box input::placeholder{color:#a4bcc8}.airport-search-box input::-webkit-search-cancel-button{cursor:pointer}
#mobileAirport{display:none}
.viewer{position:relative;min-width:0;min-height:0;background:#111717}.viewer-body{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:#151d21}.viewer-body.drawing{cursor:crosshair}.viewer-body.panning{cursor:grabbing}
.stage{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.sheet{position:relative;background:white;box-shadow:0 7px 35px #000b}.sheet canvas,.sheet img{display:block}.sheet img{width:100%;height:100%}#drawLayer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;touch-action:none}
body[data-theme=dark] .sheet{background:#050607}body[data-theme=dark] #pdfCanvas,body[data-theme=dark] #imageChart{filter:invert(1) hue-rotate(180deg)}
.viewer-header{position:absolute;top:0;left:0;right:0;height:56px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#242c30d9;backdrop-filter:blur(6px);border-bottom:1px solid #56636a;pointer-events:auto}
.viewer-heading{min-width:0}.eyebrow{color:#91b4c3;font-size:10px;font-weight:800;letter-spacing:.12em}.view-title{margin-top:2px;color:#fff;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viewer-header-actions{display:flex;align-items:center;gap:8px}.page-info{color:#c5d8e1;font-size:11px}.icon-button{height:34px;width:34px;border:1px solid #637782;border-radius:4px;background:#33434b;color:#d4e3e9;font-size:20px}.icon-button.saved{color:#65c6f5}
.viewer-tools{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);min-height:47px;padding:5px 8px;display:flex;align-items:center;gap:4px;background:#2c353ad9;border:1px solid #6a7a82;border-radius:5px;box-shadow:0 4px 16px #0008;overflow:auto;white-space:nowrap;scrollbar-width:thin}.tool-group{display:flex;align-items:center;gap:2px}.tool,.fit-button{flex:none;width:31px;height:32px;border:0;border-radius:3px;background:transparent;color:#deebef;font-size:20px}.tool:hover,.fit-button:hover{background:#4c6673}.tool.active{background:#7ab2ce;color:white}.divider{flex:none;width:1px;height:24px;background:#7a8a91;margin:0 5px}.swatch{width:20px;height:20px;margin:0 2px;border:0;border-radius:50%;background:var(--swatch)}.swatch.active{outline:2px solid #d9e7ec;outline-offset:2px}#pagination,#zoomLabel{min-width:33px;text-align:center;color:#d5e4ea;font-size:11px}.fit-button{width:38px;border:1px solid #6d808a;font-size:11px}
.empty-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#e7f1f4;padding:20px}.empty-mark{display:grid;place-items:center;width:76px;height:76px;border:1px solid #506d7b;border-radius:5px;background:#283840;color:#a1d7f0;font-size:42px;margin-bottom:22px}.empty-eyebrow{color:#86b8ce;font-size:11px;font-weight:800;letter-spacing:.18em}.empty-view h1{font-size:26px;margin:12px 0 5px}.empty-view p{color:#a9bcc5;font-size:13px}.primary-button{border:0;border-radius:4px;background:#82c3e2;color:#102936;padding:11px 18px;font-size:13px;font-weight:800;margin-top:14px}.busy{position:absolute;top:70px;left:50%;transform:translateX(-50%);border:1px solid #8298a3;border-radius:4px;background:#33464fd9;color:white;padding:7px 12px;font-size:12px}.toast{position:fixed;left:50%;bottom:72px;z-index:50;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#48606b;color:white;padding:9px 14px;border-radius:4px;font-size:12px;transition:.2s}.toast.show{transform:translate(-50%,0);opacity:1}
body[data-theme=light]{color-scheme:light}body[data-theme=light] .app{background:#d8e3e9;color:#263e4a}body[data-theme=light] .rail{background:#d5e1e7;border-color:#b4c4cc}body[data-theme=light] .rail-top{color:#5b8498;border-color:#b4c4cc}body[data-theme=light] .rail-btn{color:#506f7e}body[data-theme=light] .rail-btn.active{color:white}body[data-theme=light] .charts{background:#e4edf1}body[data-theme=light] .charts-top,body[data-theme=light] .library-line,body[data-theme=light] .charts-foot{background:#d8e5eb;border-color:#bbccd5}body[data-theme=light] .airport-toggle{color:#263e4a}body[data-theme=light] .chart-item{background:#e4edf1;color:#263e4a;border-color:#c9d9e0}body[data-theme=light] .chart-item:nth-child(even){background:#dce8ee}body[data-theme=light] .chart-item.active{background:#c5dfe9}body[data-theme=light] .chart-meta{color:#617e8b}body[data-theme=light] .search-box{background:#eef5f8;border-color:#b7cbd5}body[data-theme=light] .search-box input{color:#263e4a}body[data-theme=light] .viewer-body{background:#c3d0d6}body[data-theme=light] .viewer-header,body[data-theme=light] .viewer-tools{background:#e7eff2e8;border-color:#b3c6cf}body[data-theme=light] .view-title{color:#263e4a}body[data-theme=light] .tool,body[data-theme=light] .fit-button{color:#395a69}body[data-theme=light] .tool.active{color:white}body[data-theme=light] #pagination,body[data-theme=light] #zoomLabel{color:#395a69}body[data-theme=light] .icon-button{background:#e1edf2;color:#416879;border-color:#a9c1cd}body[data-theme=light] .empty-view{color:#243c49}body[data-theme=light] .empty-view p{color:#5f7b89}body[data-theme=light] .airports{background:#e2edf2;border-color:#a8bfca}body[data-theme=light] .airport-item{color:#263e4a;border-color:#c4d6df}body[data-theme=light] .airport-item:hover,body[data-theme=light] .airport-item.active{background:#c8e0e9}
body[data-theme=light] .airport-search-box{background:#edf6f9;border-color:#b2c9d4;color:#53798b}body[data-theme=light] .airport-search-box input{color:#263e4a}
@media(max-width:960px){.app{grid-template-columns:68px minmax(245px,32vw) minmax(0,1fr)}.rail-btn{height:60px;font-size:13px}.airports{left:68px;width:min(390px,80vw)}.chart-title{font-size:15px}.chart-item{min-height:82px}}
@media(max-width:650px){.app{grid-template-columns:54px minmax(160px,36vw) minmax(0,1fr)}.rail-btn{height:51px;font-size:11px}.rail-top{height:52px}.charts-top{height:62px;padding:8px}.airport-toggle strong{font-size:14px}.library-line{height:36px;padding:0 8px}.library-line small{display:none}.search-box{margin:8px}.chart-item{padding:12px 7px 10px 9px;min-height:68px}.chart-title{font-size:12px}.chart-meta{display:none}.star-button{font-size:18px}.airports{left:54px;top:62px}.viewer-header{height:44px;padding:0 6px}.eyebrow{display:none}.view-title{font-size:12px}.viewer-tools{left:6px;bottom:6px;max-width:calc(100% - 12px)}.icon-button{width:27px;height:27px;font-size:16px}}

/* iPhone: keep the original EFB rail while the chart list slides over the viewer. */
#mobileChartsButton{display:none;border:0;background:none;color:inherit;font-size:18px;line-height:1}
@media(max-width:650px){
  html,body,.app{height:100dvh;min-height:0}
  .app{display:grid;grid-template-columns:54px minmax(0,1fr)}
  .rail{grid-column:1;grid-row:1;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .rail-top{height:50px;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center}
  .rail-top span{font-size:9px}
  #mobileChartsButton{display:block}
  .charts{position:fixed;left:54px;top:0;bottom:0;width:calc(100vw - 54px);max-width:380px;z-index:15;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);transform:translateX(calc(-100% - 54px));transition:transform .2s ease;box-shadow:6px 0 22px #0008}
  body.mobile-list-open .charts{transform:translateX(0)}
  .viewer{grid-column:2;grid-row:1}
  .airports{position:fixed;left:54px;right:0;top:calc(env(safe-area-inset-top) + 62px);bottom:env(safe-area-inset-bottom);width:calc(100vw - 54px);max-width:380px}
  .viewer-header{top:env(safe-area-inset-top);height:48px;padding:0 8px}
  .viewer-tools{left:6px;right:6px;bottom:calc(7px + env(safe-area-inset-bottom));max-width:none;min-height:43px}
  .tool,.fit-button{height:30px}
  .toast{bottom:calc(68px + env(safe-area-inset-bottom))}
  .empty-view{padding:55px 18px 75px}
  .empty-view h1{font-size:20px}
  .empty-view p{font-size:12px}
}

.import-dialog{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:#071014c7;backdrop-filter:blur(8px)}
.import-card{width:min(420px,100%);padding:18px;border:1px solid #58717d;border-radius:10px;background:#26343b;color:#eef7fa;box-shadow:0 20px 60px #000a}.import-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.import-head strong{font-size:18px}.import-head button{border:0;background:none;color:#dcebef;font-size:28px}.import-card>p{margin:5px 0 16px;color:#aec4cd;font-size:12px;line-height:1.6}.import-option{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin:8px 0;padding:14px;border:1px solid #57717d;border-radius:7px;background:#334750;color:#f0f8fb;text-align:left}.import-option b{font-size:14px}.import-option small{margin-top:5px;color:#aac2cd;font-size:11px}.import-option:disabled{opacity:.45}.import-progress{margin-top:15px}.import-progress>div{display:flex;justify-content:space-between;font-size:11px}.import-progress progress{width:100%;height:8px;margin:8px 0}.import-progress small{color:#9fb6c0;font-size:10px}
body[data-theme=light] .import-card{background:#e4eef2;color:#294451}body[data-theme=light] .import-option{background:#d4e6ed;color:#294451}
@media(max-width:650px){.import-dialog{padding:calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom))}.import-card{max-height:90dvh;overflow:auto}.library-line button strong{max-width:160px}}