*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#0b1f3a;--navy2:#0f2a4f;--ink:#14243a;--muted:#5b6673;--line:#e1e5ea;--gold:#d4a017;--gold2:#e9bc3a;--blue:#1e7bff;--blue-d:#1263d6;--tint:#eef4ff;--bg:#eef0f3}
body{background:var(--bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
a{color:inherit;text-decoration:none}
/* ===== header band: full width, 145px (MPP) ===== */
#header{background:var(--navy);height:145px;position:relative}
.col{width:950px;margin:0 auto;position:relative}
#logo{height:80px;background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 0) ,linear-gradient(90deg,#0b1f3a 0%,#163f73 50%,#0b1f3a 100%) no-repeat 0 0/825px 80px}
#logo img{position:absolute;left:0;top:30px;height:42px;width:auto;max-width:100%;object-fit:contain}
#status{position:absolute;left:171px;top:0;height:20px;padding:1px 14.4px;font:14.4px/16px Arial,Helvetica,sans-serif;color:#2a1f00;background:linear-gradient(#fff4cc,#f6e3a1);border:1px solid #000;border-top:0;border-radius:0 0 4px 4px;white-space:nowrap}
#status b{font-weight:700}
#toplinks{position:absolute;right:0;top:0;font:14.4px/16px Arial,Helvetica,sans-serif;color:#fff}
#toplinks a{margin-left:12px;text-decoration:underline}
/* ===== menu bar: in column, top 88, 57px visible ===== */
#menubar{margin-top:8px;height:57px;background:linear-gradient(180deg,#1d3f6e 0px,#06142a 40px,#06142a 57px);position:relative;display:flex;border-bottom:2px solid var(--gold)}
#menubar .mi{height:40px;font:700 16px/15px Arial,sans-serif;color:#fff;padding:13px 15px 0 0;text-align:center;white-space:nowrap}
#menubar .mi.home{width:67px}#menubar .mi.how{width:118px}#menubar .mi.cty{width:104px}#menubar .mi.tz{width:113px}
#menubar .mi.on{background:linear-gradient(180deg,#ffffff 0%,#e3e8ef 100%);color:var(--navy);box-shadow:inset 0 -3px 0 var(--gold)}
#menubar .search{position:absolute;right:8px;top:5px;height:30px;display:flex;border:1px solid #000;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(212,160,23,.55)}
#menubar .search input{width:250px;border:0;padding:0 12px;font:14px Arial,sans-serif;color:#333;background:#fff;outline:0}
#menubar .search input::placeholder{color:#7a8594}
#menubar .search button{width:40px;border:0;background:var(--blue);display:grid;place-items:center}
/* ===== hero: 950 wide, pad 18 20 88, 60px curve ===== */
.hero{width:950px;margin:0 auto;position:relative;overflow:hidden;color:#fff;padding:18px 0 88px;
 background:radial-gradient(900px 420px at 80% 15%,rgba(30,123,255,.28),transparent 65%),linear-gradient(170deg,#163f73 0%,#0f2c55 50%,#0b1f3a 100%)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;background:#fff;clip-path:ellipse(70% 100% at 50% 100%)}
.wrap{padding:0 20px;position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:13px;line-height:1.6;font-weight:700;color:var(--gold2);margin-bottom:12px}
.hero h1{font-size:54px;line-height:1.08;letter-spacing:-.02em;font-weight:700;margin-bottom:14px}
.hero .lead{font-size:18px;line-height:1.55;color:#dbe6f4;max-width:500px}
.hero .points{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:8px;color:#cfdcec;font-size:15px}
.hero .points li:before{content:"\2713  ";color:var(--gold2);font-weight:700}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:23px;background:var(--blue);color:#fff;font-weight:700;font-size:16px;border:1px solid #0a4fb8;box-shadow:0 2px 0 #0a3f93}
/* cards */
.card{background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.30);border-top:4px solid var(--gold)}
.picker{padding:20px 20px 22px}
.picker h3{font-size:18px;color:var(--navy);margin-bottom:14px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:13px;font-weight:800;color:var(--navy);margin-bottom:5px;letter-spacing:.02em}
.sel{height:44px;border:1.5px solid #b9c3cf;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:16px;color:var(--ink);background:#fff;position:relative}
.sel .fl{font-size:20px;margin-right:9px}
.sel .cc{margin-left:auto;margin-right:22px;color:var(--muted);font-size:14px}
.sel:after{content:"";position:absolute;right:13px;top:18px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--navy)}
.swap{display:flex;justify-content:center;margin:-4px 0 4px}
.swap span{width:30px;height:30px;border-radius:50%;border:1.5px solid #b9c3cf;display:grid;place-items:center;color:var(--navy);font-size:15px;background:#f7f9fb}
.picker .btn{width:100%;margin-top:6px}
/* white content area in column */
.content{width:950px;margin:0 auto;background:#fff;padding:6px 20px 34px}
.sec-title{font-size:26px;color:var(--navy);letter-spacing:-.01em;margin-bottom:6px}
.sec-sub{color:var(--muted);font-size:15px;margin-bottom:16px}
/* result card */
.result{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(11,31,58,.07)}
.result-head{background:var(--navy);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--gold)}
.result-head .t{font-weight:700;font-size:16px}
.result-head .t small{color:var(--gold2);font-weight:700;letter-spacing:.1em;font-size:11.5px;display:block;margin-bottom:2px}
.result-head .route{font-size:14px;color:#cfdcec}
.result-body{padding:20px}
.dialstr{font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.01em;text-align:center;margin:2px 0 18px}
.dialstr .p{color:var(--gold);padding:0 6px;font-weight:700}
.boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bx{border:2px solid var(--navy);border-radius:10px;text-align:center;padding:10px 6px 11px;background:#fff;position:relative}
.bx .lb{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.bx .v{font:800 28px/36px "Roboto Mono","DejaVu Sans Mono",monospace;color:var(--navy);margin-top:4px;letter-spacing:.02em}
.bx .v .n{font:700 15px system-ui,"Segoe UI",Roboto,Arial,sans-serif;color:var(--blue);margin-left:4px;vertical-align:4px}
.bx .note{font-size:12px;color:var(--muted);margin-top:2px}
.bx.ex{background:var(--navy);border-color:#000}.bx.ex .lb{color:var(--gold2)}.bx.ex .v{color:#fff}.bx.ex .note{color:#b9c8dc}
.bx.cc{border-color:var(--gold);background:#fffaf0}
.plus{position:absolute;right:-24px;top:50%;margin-top:-12px;width:24px;text-align:center;font-weight:800;color:var(--gold);font-size:24px;line-height:24px;z-index:2}
.types{margin-top:16px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.types .r{display:grid;grid-template-columns:120px 1fr 1.1fr;align-items:center;padding:10px 14px;font-size:14.5px;gap:12px}
.types .r+.r{border-top:1px solid var(--line)}
.types .r.h{background:#f4f6f9;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 14px}
.tag{display:inline-block;padding:3px 9px;border-radius:11px;font-size:12px;font-weight:800;letter-spacing:.04em}
.tag.land{background:var(--tint);color:var(--blue-d)}.tag.mob{background:#fff3d4;color:#8a6200}
.mono{font-family:"Roboto Mono","DejaVu Sans Mono",monospace;font-weight:700;color:var(--navy)}
.mono .n{white-space:nowrap;font-family:system-ui,Roboto,Arial,sans-serif;color:var(--blue);font-weight:700;font-size:13px}
.example{margin-top:14px;display:flex;align-items:center;gap:12px;background:#f7f9fc;border-left:4px solid var(--gold);border-radius:8px;padding:11px 14px;font-size:14.5px}
.example b.k{font-size:11.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.example .mono{font-size:18px}
/* popular */
.pop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pop a{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:14.5px;font-weight:600;color:var(--navy);background:#fff}
.pop a .fl{font-size:18px;letter-spacing:-2px}
.pop a .ar{margin-left:auto;color:var(--blue);font-weight:800}
.pop a small{display:block;font-weight:500;color:var(--muted);font-size:12px}
/* footer (in column) */
.footer{width:950px;margin:0 auto;background:var(--navy);color:#b9c8dc;padding:20px 20px 18px;font-size:13.5px;border-top:3px solid var(--gold);display:flex;justify-content:space-between;align-items:center}
.footer a{color:#fff;margin-right:16px}
.footer .upd{color:var(--gold2);font-weight:700;font-size:12.5px}
.footer .cp{font-size:12px;margin-top:6px;color:#8ea2bd}
/* ad slots collapse when empty */
.ad:empty{display:none}
/* ===== phone ===== */
@media (max-width:820px){
 .col,.hero,.content,.footer{width:100%}
 #header{height:auto;padding-bottom:0}
 #logo{height:auto;background:linear-gradient(90deg,#0b1f3a 0%,#163f73 50%,#0b1f3a 100%);text-align:center;padding:26px 0 10px}
 #logo img{position:static;width:auto;height:auto;max-height:34px;max-width:100%;object-fit:contain;display:inline-block}
 #status{left:50%;transform:translateX(-50%);font-size:12px;line-height:16px;height:auto;padding:1px 10px}
 #toplinks{display:none}
 #menubar{margin-top:0;height:auto;flex-wrap:wrap;background:linear-gradient(180deg,#1d3f6e 0px,#06142a 40px,#06142a 100%);padding-bottom:8px}
 #menubar .mi{width:auto!important;padding:13px 12px 0;font-size:15px}
 #menubar .mi.home{padding-left:12px}
 #menubar .search{position:static;margin:4px 10px 0;width:calc(100% - 20px);height:36px}
 #menubar .search input{flex:1;width:auto}
 .hero{padding:22px 0 70px}
 .wrap{padding:0 16px}
 .hero-grid{grid-template-columns:1fr;gap:22px}
 .hero h1{font-size:34px}
 .hero .lead{font-size:16px}
 .hero .points{display:none}
 .content{padding:4px 14px 26px}
 .dialstr{font-size:20px;line-height:1.35}
 .boxes{grid-template-columns:1fr 1fr;gap:10px}
 .plus{display:none}
 .bx .v{font-size:22px}
 .types .r{grid-template-columns:86px 1fr;row-gap:4px}
 .types .r>:nth-child(3){grid-column:2}
 .types .r.h{display:none}
 .example{flex-direction:column;align-items:flex-start;gap:4px}
 .pop{grid-template-columns:1fr}
 .footer{flex-direction:column;align-items:flex-start;gap:10px}
 .result-head{flex-direction:column;align-items:flex-start;gap:4px}
 .steps{grid-template-columns:1fr}
 .two{grid-template-columns:1fr}
 .steps .code{margin-left:0}
 .ctab{font-size:13px}
 .dialstr{overflow-wrap:anywhere}
}
.flag{width:22px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.25);margin-right:8px;vertical-align:middle;flex:none}
.sel .flag,.pop .flag{margin-right:8px}
#menubar .mi.admin{width:118px}
.steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.steps li{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.steps .num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:grid;place-items:center;border:2px solid #000;box-shadow:0 0 0 2px var(--gold)}
.steps b{color:var(--navy);font-size:16px}
.steps p{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.steps .code{margin-left:auto;flex:none;font:800 18px "Roboto Mono",monospace;color:var(--navy);background:#fffaf0;border:1.5px solid var(--gold);border-radius:8px;padding:5px 9px}
.two{display:grid;grid-template-columns:1.25fr .85fr;gap:16px;margin-top:22px;align-items:start}
.panel{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff}
.panel h3{font-size:17px;color:var(--navy);margin-bottom:10px}
.ctab{width:100%;border-collapse:collapse;font-size:14.5px}
.ctab th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#f4f6f9;padding:7px 8px}
.ctab td{padding:8px;border-top:1px solid var(--line);vertical-align:top}
.small{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.side{display:flex;flex-direction:column;gap:16px}
.tzrow{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--navy);border-radius:10px;padding:12px 16px;color:#fff;border-bottom:3px solid var(--gold)}
.tzrow .lbl{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#b9c8dc}
.tzrow .tm{font-size:22px;font-weight:800}
.tzrow .arr{background:var(--gold);color:#000;font-weight:800;border-radius:12px;padding:3px 10px;font-size:14px;text-align:center}
.tip{background:var(--tint);border-color:#c9dcff}
.tip p{font-size:14.5px;line-height:1.55}
.guide p{font-size:16px;line-height:1.55;margin:0 0 12px}
.guide h2{font-size:22px;color:var(--navy);margin:22px 0 8px}
.alpha{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.alpha a{font-weight:800;color:var(--blue-d)}
.clist{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.clist a{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--navy);font-weight:650}
.tzlist{width:100%;border-collapse:collapse}
.tzlist td,.tzlist th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;overflow-wrap:anywhere;vertical-align:middle}
.find{margin:8px 0 14px}
.find input, .login input, .admin input[type=text], .admin input[type=password], .admin textarea{width:100%;border:1.5px solid #b9c3cf;border-radius:8px;padding:10px 12px;font:16px system-ui,Segoe UI,Arial,sans-serif}
.admin textarea{min-height:90px;font-family:Consolas,monospace;font-size:13px}
.admin .row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.report{white-space:pre-wrap;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:14px;font:14px/1.45 Consolas,monospace}
.picker select{width:100%;height:44px;border:1.5px solid #b9c3cf;border-radius:8px;padding:0 12px;font-size:16px;background:#fff}
.combo{position:relative}
.combo .sel{cursor:pointer;width:100%;display:flex;align-items:center;gap:8px;height:44px;border:1.5px solid #b9c3cf;border-radius:8px;padding:0 12px;background:#fff;font-size:16px}
.combo select.offscreen{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;overflow:hidden}
.combo .sel .cc{margin-left:auto;color:var(--muted);font-weight:700}
.combo .panel-list{position:absolute;z-index:5;left:0;right:0;top:46px;background:#fff;border:1px solid #b9c3cf;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow:auto}
.combo .panel-list input{width:100%;border:0;border-bottom:1px solid var(--line);padding:8px 10px;font-size:15px}
.combo .opt{display:flex;align-items:center;padding:7px 10px;cursor:pointer}
.combo .opt:hover,.combo .opt.on{background:#eef4ff}
.combo .opt .cc{margin-left:auto;color:var(--muted)}
.swap button{width:30px;height:30px;border-radius:50%;border:1.5px solid #b9c3cf;background:#f7f9fb;color:var(--navy);font-size:16px;cursor:pointer}
.note{background:#fff8e8;border:1px solid var(--gold);border-radius:8px;padding:10px 12px;margin:10px 0}
.err{color:#8a1c1c;font-weight:700}
.btn.alt{background:#fff;color:var(--navy);border:1.5px solid var(--navy);box-shadow:none}
.login{max-width:420px}
@media (max-width:820px){
 .clist{grid-template-columns:1fr}
 .tzrow .tm{font-size:16px}
 body{overflow-wrap:break-word}
 .combo .sel{font-size:16px}
 .ctab,.tzlist{width:100%;table-layout:fixed}
 .ctab td,.ctab th,.mono .n{overflow-wrap:anywhere;white-space:normal}
 .steps,.two{grid-template-columns:1fr}
 .steps .code{margin-left:0}
 .steps>li,.two>*{min-width:0}
}