/* ¡Vamos, Bin! 首页 —— 全屏地图 + 悬浮护照 + 图标抽屉。橙 + 深蓝。 */
:root{
  --orange:#f5821f; --orange-d:#d96a09; --orange-soft:#ffe9d2;
  --navy:#15324f; --navy-2:#1f4a73; --cream:#fff8f0; --ink:#23303a; --muted:#6b7a86; --line:#f0dcc4;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;color:var(--ink);font-family:var(--ui);
  background:#e9eef3;background-image:radial-gradient(#d7dee6 1px,transparent 1px);background-size:18px 18px;}
img{display:block;max-width:100%;}
button{font-family:var(--ui);}

/* 顶栏:悬浮在地图上 */
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;height:52px;display:flex;align-items:center;gap:10px;
  padding:0 14px;background:var(--navy);color:#fff;box-shadow:0 2px 12px #15324f40;}
.hamb{border:none;background:rgba(255,255,255,.15);color:#fff;font-size:20px;cursor:pointer;
  width:38px;height:38px;border-radius:10px;line-height:1;backdrop-filter:blur(6px);}
.hamb:hover{background:rgba(255,255,255,.28);}
.brand{display:flex;align-items:center;gap:9px;}
.brand-av{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid var(--orange);}
.brand-name{font-size:17px;font-weight:800;text-shadow:0 1px 4px #0006;}
.brand-name b{color:var(--orange);}

/* 有边框的地图(留出四周边界,不顶满屏) */
#map-box{position:fixed;top:64px;left:22px;right:22px;bottom:22px;z-index:1;overflow:hidden;
  border:3px solid var(--navy);border-radius:18px;box-shadow:0 10px 36px #15324f33;
  background:radial-gradient(120% 120% at 50% 30%,#a9cdea,#6b9ec9);}
#map-box svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab;}
#map-box svg:active{cursor:grabbing;}
.map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#eaf2fb;}
.geo-other{fill:#262626;stroke:#3b3b3b;stroke-width:.3;}                 /* 其它区域:黑 */
.geo-minor{fill:#f6e6ad;stroke:#fff;stroke-width:.4;cursor:pointer;transition:fill .15s;}  /* 广义西语:浅黄 */
.geo-minor:hover{fill:#f0d886;}
.geo-es{fill:#ef9f4a;stroke:#fff;stroke-width:.55;cursor:pointer;transition:fill .15s;}    /* 主讲国:橙 */
.geo-es:hover{fill:#e98b2c;}
.geo-hot{fill:#ff8a1e!important;stroke:#fff;stroke-width:1.3;filter:drop-shadow(0 3px 9px #00000055);}
.bin-pin image{filter:drop-shadow(0 2px 3px #0004);}
.map-hint{position:fixed;left:36px;bottom:34px;z-index:20;font-size:12px;color:#33506e;
  background:#ffffffd9;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px);pointer-events:none;}

/* 悬停国家状态卡 */
.cstatus{position:fixed;z-index:26;width:200px;background:#fffffff2;border-radius:14px;
  box-shadow:0 8px 28px #15324f44;border-top:4px solid var(--orange);padding:10px 12px;pointer-events:none;
  backdrop-filter:blur(3px);transform:translate(-50%,0);}
.cstatus[hidden]{display:none;}
.cstatus .cs-top{display:flex;align-items:center;gap:8px;}
.cstatus .cs-flag{font-size:26px;}
.cstatus .cs-es{font-weight:800;color:var(--navy);font-size:16px;}
.cstatus .cs-zh{font-size:12px;color:var(--muted);}
.cstatus .cs-row{margin-top:8px;font-size:13px;color:var(--ink);display:flex;align-items:center;gap:6px;}
.cstatus .cs-badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;}
.cstatus .cs-on{background:#e7f6ec;color:#1a8a4a;}
.cstatus .cs-off{background:#fff0e0;color:var(--orange-d);}
.cstatus .cs-go{margin-top:8px;font-size:12px;color:var(--orange-d);font-weight:700;}
.cstatus .cs-list{margin:7px 0 3px;display:flex;flex-direction:column;gap:2px;}
.cstatus .cs-li{font-size:12px;color:var(--ink);display:flex;gap:6px;align-items:center;line-height:1.3;}
.cstatus .cs-li .cs-y{color:#1a8a4a;font-weight:800;}
.cstatus .cs-li .cs-n{color:#bcc7cf;font-weight:800;}
.cstatus .cs-li i{color:var(--muted);font-style:normal;}

/* 悬浮护照 FAB */
.pp-fab{position:fixed;right:18px;bottom:16px;z-index:40;border:none;background:transparent;cursor:pointer;
  padding:0;filter:drop-shadow(0 6px 14px #15324f55);transition:transform .15s;}
.pp-fab img{width:92px;height:auto;border-radius:6px;}
.pp-fab:hover{transform:translateY(-3px) rotate(-3deg) scale(1.04);}
.pp-fab:active{transform:scale(.96);}
.pp-fab-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  padding:0 5px;box-shadow:0 1px 4px #0004;}
.pp-fab-badge[hidden]{display:none;}

/* 护照翻开层 + 专用美术跨页 */
.pp-overlay{position:fixed;inset:0;z-index:80;background:transparent;display:flex;align-items:center;justify-content:center;
  padding:18px;perspective:1700px;}
.pp-overlay[hidden]{display:none;}
.pp-book{position:relative;width:min(94vw,620px);aspect-ratio:903/607;display:flex;transform-origin:center;
  background:url('assets/ui/passport_spread.webp?v=5') center/100% 100% no-repeat;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.4));
  transition:transform 1s cubic-bezier(.2,.72,.2,1),opacity .6s;will-change:transform;}
/* 两国平分一页,正好落在烫金边框内(实测内框 ~4–46% / 52–96%),中间淡虚线分隔,像真实签证页 */
.pp-col{flex:1;display:flex;flex-direction:column;box-sizing:border-box;gap:0;padding:8% 6% 8% 6%;}
.pp-slot{flex:1;position:relative;display:flex;align-items:center;overflow:hidden;
  border:none;background:transparent;padding:10px 13px;}
.pp-col .pp-slot:first-child{border-bottom:1px dashed #c4a87166;}
.ps-info{display:flex;flex-direction:column;gap:4px;position:relative;z-index:3;max-width:58%;}
.ps-es{font-weight:800;color:var(--navy);font-size:17px;letter-spacing:.2px;}
.ps-zh{font-size:12.5px;color:#7a6a52;}
/* 证件字段表:对齐的小标签 + 值(首次入境 / 签发 / 过期) */
.ps-fields{display:flex;flex-direction:column;gap:1px;margin-top:2px;}
.ps-f{display:flex;gap:6px;font-size:9px;line-height:1.4;white-space:nowrap;}
.ps-f i{font-style:normal;color:#a98c5e;letter-spacing:.5px;min-width:36px;}
.ps-f b{font-weight:700;color:#5a4a32;letter-spacing:.3px;}
.pp-slot.locked .ps-f b{color:#9a8a6e;}
/* 右下角"入境"小按钮:唯一跳转入口,做成盖戳/票根质感 */
.ps-enter{align-self:flex-end;margin-top:3px;cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:800;letter-spacing:1.5px;color:#2c5d3a;background:transparent;
  border:1.4px solid #2c5d3a99;border-radius:3px;padding:2px 9px;line-height:1.3;
  transition:background .14s,color .14s,transform .1s;}
.ps-enter:hover{background:#2c5d3a;color:#fff8ec;}
.ps-enter:active{transform:scale(.94);}
/* 印章 + 完成日期(写在印章右下角) */
.pp-stampwrap{position:absolute;right:4px;top:50%;transform:translateY(-50%);z-index:2;
  width:92px;height:98px;pointer-events:none;}
.pp-slot.locked .pp-stampwrap{border:1px dashed #c9b07f88;border-radius:7px;}   /* 空盖章区:虚线框 */
.ps-zone{position:absolute;left:5px;top:4px;font-size:8px;letter-spacing:.5px;color:#b3996a;}
.pp-stamp{position:absolute;left:50%;top:48%;width:84px;height:84px;object-fit:contain;
  transform:translate(-50%,-50%) rotate(-11deg);filter:drop-shadow(0 2px 3px #00000026);}
.ps-done{position:absolute;right:5px;bottom:3px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.ps-done i{font-style:normal;font-size:8px;letter-spacing:.5px;color:#9a7d52;}
.ps-done b{font-size:10px;font-weight:800;color:#1a6a3a;letter-spacing:.3px;}
.ps-done b:empty::before{content:'＿＿';color:#b9a06f99;font-weight:400;}
.pp-slot.locked .pp-stamp{display:none;}        /* 未完成:不给剪影,留空盖章区,完成时成就感更强 */
.pp-slot.studied .ps-zone{display:none;}
/* 翻页箭头 + 页码 */
.pp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:40px;height:40px;border-radius:50%;
  border:none;background:#15324fcc;color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px #0005;transition:background .15s,transform .1s;}
.pp-nav:hover{background:var(--orange);}
.pp-nav:active{transform:translateY(-50%) scale(.9);}
.pp-nav:disabled{opacity:.22;pointer-events:none;}
.pp-prev{left:-17px;} .pp-next{right:-17px;}
.pp-pageno{position:absolute;bottom:-13px;left:50%;transform:translateX(-50%);z-index:6;white-space:nowrap;
  font-size:11px;font-weight:800;color:#5b4a2e;background:#fff7e8;padding:3px 13px;border-radius:999px;box-shadow:0 2px 7px #15324f2a;}
.pp-book.flip-next .pp-col,.pp-book.flip-prev .pp-col{animation:ppturn .3s ease;}
@keyframes ppturn{0%{opacity:.25;transform:translateX(7px);}100%{opacity:1;transform:none;}}
.pp-hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);color:#15324f;font-size:12.5px;font-weight:600;
  background:#ffffffcc;padding:5px 14px;border-radius:999px;box-shadow:0 3px 10px #15324f22;pointer-events:none;}

/* 抽屉(加宽 + 玩味图标) */
.drawer{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:88vw;z-index:70;background:var(--cream);
  box-shadow:2px 0 28px #15324f44;transform:translateX(-105%);transition:transform .26s ease;
  display:flex;flex-direction:column;overflow:hidden;}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  background:var(--navy);color:#fff;font-weight:800;flex:0 0 auto;}
.drawer-x{border:none;background:transparent;color:#fff;font-size:17px;cursor:pointer;}
#drawer-nav{overflow-y:auto;padding:6px 0 26px;flex:1;}
.dr-mod{padding:12px 16px 2px;font-weight:800;color:var(--navy);font-size:14.5px;display:flex;align-items:baseline;gap:8px;}
.dr-mod .dr-n{color:var(--orange);font-size:11px;font-weight:800;}
.dr-mod .dr-desc{font-size:11px;color:var(--muted);font-weight:400;}
.dr-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 6px;padding:12px 12px 10px;}
.dr-tile{background:transparent;border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;}
.dr-tile .dt-ic{width:58px;height:58px;border-radius:18px 16px 20px 15px;background:#fff;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 3px 8px #15324f1c;
  transition:transform .14s,box-shadow .14s;overflow:hidden;}
.dr-tile .dt-ic img{width:100%;height:100%;object-fit:cover;}
.dr-tile .dt-label{background:#ffffffcc;border-radius:8px;padding:1px 5px;}
.dr-tile .dt-label{font-size:11px;color:var(--ink);text-align:center;line-height:1.25;max-width:86px;}
.dr-tile:nth-child(3n+1) .dt-ic{transform:rotate(-7deg);}
.dr-tile:nth-child(3n+2) .dt-ic{transform:rotate(4deg) translateY(4px);}
.dr-tile:nth-child(3n) .dt-ic{transform:rotate(-3deg) translateY(-2px);}
.dr-tile:hover .dt-ic{transform:rotate(0) scale(1.08);box-shadow:0 5px 14px #f5821f44;border-color:var(--orange);}
.dr-tile.done .dt-ic{background:var(--orange-soft);border-color:#f3b87f;}
.dr-tile.done .dt-label::after{content:" ✓";color:#1a8a4a;font-weight:800;}
.dr-tile.soon .dt-ic{opacity:.55;filter:grayscale(.4);border-style:dashed;}
.dr-tile.soon .dt-label{color:var(--muted);}
.dr-foot{padding:14px 16px;border-top:1px dashed var(--line);margin-top:6px;}
.dr-foot a{font-weight:700;color:var(--orange-d);text-decoration:none;}

/* 模块一:一大块 */
.dr-bigblock{display:flex;align-items:center;gap:12px;margin:8px 14px 14px;padding:14px;text-decoration:none;color:var(--ink);
  background:linear-gradient(135deg,#fff,#fff5ea);border:2px solid #f3c79a;border-radius:18px;box-shadow:0 4px 14px #f5821f22;
  transition:box-shadow .15s,border-color .15s;}
.dr-bigblock:hover{border-color:var(--orange);box-shadow:0 6px 18px #f5821f3a;}
.dr-bigblock .bb-ic{width:54px;height:54px;flex:0 0 auto;border-radius:16px;background:var(--orange-soft);
  display:flex;align-items:center;justify-content:center;font-size:28px;}
.dr-bigblock .bb-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.dr-bigblock .bb-txt b{font-size:15px;color:var(--navy);}
.dr-bigblock .bb-txt span{font-size:11.5px;color:var(--muted);}
.dr-bigblock .bb-ar{color:var(--orange);font-weight:800;font-size:18px;}
.dr-bigblock.done .bb-ic{background:#e7f6ec;}

/* 模块二:专用美术垫子,上面铺 3 列 2 行的图标 */
.dr-modbox{margin:8px 12px 16px;padding:18px 10px;border-radius:20px;border:none;
  background:url('assets/ui/m2_bg.webp?v=5') center/cover;box-shadow:0 5px 16px #15324f2a;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px 4px;align-items:start;}

/* 模块三:列表模式 */
.dr-list{padding:4px 12px 10px;}
.dr-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink);}
.dr-row:hover{background:var(--orange-soft);}
.dr-row .dr-row-ic{font-size:18px;width:24px;text-align:center;flex:0 0 auto;}
.dr-row .dr-row-t{flex:1;min-width:0;font-size:13.5px;font-weight:600;}
.dr-row .dr-row-ar{color:var(--orange);font-weight:800;}
.dr-row.done .dr-row-t::after{content:" ✓";color:#1a8a4a;}
.dr-row.soon{opacity:.6;}

/* 模块三:国家折叠条 */
.dr-country{margin:0 12px;border-bottom:1px solid var(--line);}
.dr-crow{width:100%;display:flex;align-items:center;gap:9px;padding:11px 6px;background:transparent;border:none;cursor:pointer;text-align:left;}
.dr-crow:hover{background:var(--orange-soft);border-radius:8px;}
.dr-cflag{font-size:20px;}
.dr-cname{flex:1;font-size:14px;font-weight:700;color:var(--ink);}
.dr-cname i{font-style:normal;font-size:11px;color:var(--muted);font-weight:400;}
.dr-cprog{font-size:11px;font-weight:800;color:var(--orange-d);background:var(--orange-soft);padding:2px 8px;border-radius:999px;}
.dr-caret{transition:transform .2s;color:var(--muted);font-size:12px;}
.dr-crow.open .dr-caret{transform:rotate(90deg);}
.dr-sub{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.dr-sub.open{max-height:320px;}
.dr-sub .dr-row{padding:8px 10px 8px 30px;}
.dr-flash{animation:drflash 1.2s ease;}
@keyframes drflash{0%,100%{background:transparent;}30%{background:#ffe3c4;}}
/* 模块标题(只留 icon + 标题) */
.dr-mod{font-size:16px;}

.scrim{position:fixed;inset:0;z-index:65;background:#15324f55;}
.scrim[hidden]{display:none;}

/* tooltip + toast */
.tooltip{position:fixed;pointer-events:none;z-index:50;background:var(--navy);color:#fff;font-size:13px;
  padding:5px 10px;border-radius:8px;opacity:0;transition:opacity .12s;white-space:nowrap;}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:55;background:var(--navy);
  color:#fff;padding:11px 20px;border-radius:999px;font-size:14px;box-shadow:0 6px 20px #0004;}
.toast[hidden]{display:none;}

/* 父亲节弹窗 */
.pop-overlay{position:fixed;inset:0;z-index:90;background:#15324fcc;display:flex;align-items:center;justify-content:center;padding:20px;}
.pop-overlay[hidden]{display:none;}
.pop{position:relative;background:#fff;border-radius:20px;max-width:380px;width:100%;padding:22px;text-align:center;
  box-shadow:0 20px 60px #0005;border-top:6px solid var(--orange);}
.pop-x{position:absolute;top:10px;right:12px;border:none;background:transparent;font-size:18px;color:var(--muted);cursor:pointer;}
.pop-hero{width:160px;margin:0 auto 12px;border-radius:14px;}
.pop-es{font-size:21px;font-weight:900;color:var(--orange-d);}
.pop-zh{font-size:14px;color:#4a5a66;margin:8px 0 16px;}
.pop-go{border:none;background:var(--orange);color:#fff;font-weight:800;font-size:15px;padding:11px 24px;border-radius:999px;cursor:pointer;}
.pop-go:hover{background:var(--orange-d);}

@media(max-width:680px){
  .cstatus{top:54px;right:8px;width:200px;}
  .brand-name{font-size:15px;}
  .pp-fab img{width:54px;}
  .map-hint{font-size:11px;}
  .pp-book{width:96vw;}
  .ps-es{font-size:13.5px;} .ps-flag{font-size:18px;} .ps-zh{font-size:11px;}
  .ps-info{max-width:60%;}
  .pp-stamp{width:72px;height:72px;}
  .pp-nav{width:34px;height:34px;font-size:20px;} .pp-prev{left:-8px;} .pp-next{right:-8px;}
}