:root { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; color:#111; background:#e9eef4; }
    * { box-sizing:border-box; } body { margin:0; }
    button, textarea { font-family:inherit; }
    .toolbar { max-width:1394px; margin:16px auto 14px; padding:0 2px; display:flex; justify-content:flex-end; align-items:center; gap:12px; }
    .toolbar button { min-height:49px; border:1px solid #9aaebf; border-radius:10px; padding:12px 25px; background:white; color:#253f58; font-size:17px; font-weight:600; cursor:pointer; }
    .toolbar button:hover { background:#e9f3fb; } .toolbar .primary { background:#295d82; border-color:#295d82; color:white; } .toolbar .primary:hover { background:#1d496a; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
    .board-scroll { overflow-x:auto; padding:0 18px 24px; }
    .board { width:100%; max-width:1394px; min-width:920px; margin:0 auto; background:#ececec; border:11px solid #385675; border-radius:43px; overflow:hidden; }
    .banner { position:relative; height:93px; overflow:hidden; color:#183a4f; isolation:isolate; }
    .banner-background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; z-index:-1; }
    .banner-title { position:absolute; left:20px; top:0; height:100%; display:flex; align-items:center; gap:15px; }
    .banner-title img { width:70px; height:93px; object-fit:contain; align-self:flex-end; }
    .banner-title h1 { margin:0; font-size:35px; letter-spacing:2px; font-weight:800; white-space:nowrap; text-shadow:0 1px 0 #ffffff80; }
    .branding { position:absolute; right:29px; top:9px; width:340px; text-align:center; }
    .brand-logos { height:55px; display:flex; justify-content:center; align-items:center; gap:16px; }
    #gamekee-logo { width:153px; height:auto; } #committee-logo { width:117px; height:58px; object-fit:contain; }
    .brand-cross { font-size:25px; font-weight:400; } .brand-domain { font-size:17px; font-weight:600; letter-spacing:1px; line-height:22px; }
    .board-main { padding:29px 29px 18px; }
    table { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; background:white; border:3px solid #050505; border-radius:5px; }
    col:first-child { width:14.5%; } col:nth-child(2) { width:26.7%; } col:nth-child(3) { width:30.5%; } col:nth-child(4) { width:28.3%; }
    th,td { height:70px; padding:0; border-right:3px solid #050505; border-bottom:3px solid #050505; position:relative; background:#fff; text-align:center; }
    th:last-child,td:last-child { border-right:0; } tbody tr:last-child td { border-bottom:0; } thead th { height:54px; }
    .corner { overflow:hidden; font-size:24px; font-weight:700; }
    .corner-diagonal { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
    .corner .team-word { position:absolute; right:6px; top:0; } .corner .round-word { position:absolute; left:6px; bottom:0; }
    .header-edit { height:100%; display:flex; align-items:center; justify-content:center; gap:7px; padding:3px 8px; }
    .type-menu { position:relative; flex:none; } .type-menu summary { list-style:none; display:flex; align-items:center; gap:7px; padding:4px; border-radius:6px; cursor:pointer; font-size:23px; font-weight:700; white-space:nowrap; }
    .type-menu summary::-webkit-details-marker { display:none; } .type-menu summary::after { content:"⌄"; font-size:14px; color:#6b7b86; } .type-menu summary:hover,.type-menu[open] summary { background:#eef4f7; }
    .hex { display:inline-block; width:28px; height:28px; flex:none; clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); background:var(--hex-color); box-shadow:inset 0 -4px 0 #0002; }
    .type-options { position:absolute; z-index:10; top:calc(100% + 4px); left:0; min-width:150px; padding:5px; background:white; border:1px solid #b6c3cb; border-radius:9px; box-shadow:0 12px 30px #19364c35; }
    .type-options button { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:6px; background:white; text-align:left; font-size:18px; font-weight:600; cursor:pointer; } .type-options button:hover,.type-options button:focus { background:#e8f2f8; } .type-options .hex { width:23px; height:23px; }
    textarea { display:block; width:100%; height:100%; padding:10px 6px; resize:none; border:0; outline:none; overflow:auto; background:transparent; color:#080808; font:600 25px/1.25 "Microsoft YaHei","PingFang SC",sans-serif; text-align:center; }
    textarea:focus { box-shadow:inset 0 0 0 2px #79aed4; } textarea::placeholder { color:transparent; } textarea:focus::placeholder { color:#9fb0bb; }
    textarea { overflow:hidden; overflow-wrap:anywhere; white-space:pre-wrap; }
    tbody textarea { height:67px; }
    .header-edit { height:auto; min-height:48px; }
    .header-note { min-width:30px; height:48px; padding:8px 0; text-align:left; font-weight:600; } .row-label { font-size:25px; font-weight:700; white-space:nowrap; }
    .delete-row { position:absolute; right:3px; top:3px; width:21px; height:21px; padding:0; background:#fff; border:1px solid #b9c5cd; border-radius:5px; color:#8a3d3d; font-size:17px; line-height:18px; opacity:0; cursor:pointer; } tr:hover .delete-row,.delete-row:focus { opacity:1; }
    .blank-row td { height:66px; } .row-actions { display:flex; align-items:center; justify-content:center; gap:45px; }
    .blank-action { width:64px; height:54px; border:0; border-radius:10px; background:transparent; color:#285c81; font:500 44px/1 "Microsoft YaHei",sans-serif; cursor:pointer; } .blank-action:hover,.blank-action:focus { background:#e7f1f8; outline:none; } .blank-action:disabled { color:#b4c0c8; cursor:not-allowed; }
    .preview-dialog { width:min(95vw,1200px); max-height:94vh; padding:14px; border:0; border-radius:12px; box-shadow:0 20px 60px #10273c77; } .preview-dialog::backdrop { background:#14283dbb; } .preview-dialog button { float:right; margin-bottom:9px; padding:9px 17px; border:1px solid #9aaebf; border-radius:7px; background:white; font-size:16px; cursor:pointer; } .preview-dialog img { display:block; width:100%; height:auto; max-height:calc(94vh - 75px); object-fit:contain; clear:both; }
    @media(max-width:1430px) { .toolbar { margin-left:18px; margin-right:18px; } }
    @media(max-width:1000px) { .banner-title h1 { font-size:29px; } .branding { right:16px; width:290px; } #gamekee-logo { width:130px; } #committee-logo { width:100px; } .brand-logos { gap:12px; } .board-main { padding:24px 22px 16px; } .row-label { font-size:20px; } textarea { font-size:22px; } .type-menu summary { font-size:20px; } .header-edit { gap:3px; padding:2px; } .hex { width:25px; height:25px; } }
    @media print { .toolbar,.blank-row { display:none; } .board-scroll { padding:0; overflow:visible; } .board { width:100%; min-width:0; } .delete-row { visibility:hidden; } }
  
  

  :root { color:#153a52; background:#edf5fb; }
  body { display:flow-root; isolation:isolate; position:relative; min-height:100vh; background:linear-gradient(130deg,#effaffb8,#f5f9ffe8); }
  body::before { content:""; position:fixed; inset:0; z-index:-1; background:url("//cdnimg-v2.gamekee.com/wiki2.0/pro/829/images/ba/75d337756764.webp") center/cover no-repeat; }
  button { transition:background .16s,box-shadow .16s,transform .16s; }
  .toolbar { margin-top:20px; margin-bottom:16px; gap:12px; }
  .toolbar button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; font-weight:700; border-color:#bcd5e5; box-shadow:0 3px 8px #204b6810; background:#ffffffdb; color:#17466b; }
  .toolbar button svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .toolbar button:hover { background:#f5fdff; border-color:#55bcdf; box-shadow:0 4px 15px #23a5d426; transform:translateY(-1px); }
  .toolbar .primary { color:white; background:linear-gradient(115deg,#145b88,#157da6); border-color:#12678c; box-shadow:0 5px 14px #156c9e28; }
  .toolbar .primary:hover { background:linear-gradient(115deg,#116d9e,#12a0c5); }
  .board { border:1px solid #afd1e4; border-radius:24px; background:#f8fcff; box-shadow:0 20px 60px #2a6a9220,0 2px 4px #1d557a10; position:relative; }
  .banner { height:93px; border-bottom:1px solid #b9e0ef; background:#ddf5fc; }
  .banner-background { opacity:.78; }
  .banner::after { content:""; position:absolute; z-index:-1; width:80px; height:180px; top:-60px; left:52%; background:#ffffff42; transform:rotate(30deg); box-shadow:110px 0 0 #ffffff24; }
  .banner-title { left:26px; gap:18px; }
  .banner-title img { filter:drop-shadow(0 3px 4px #2a90b520); }
  .banner-title h1 { font-size:34px; letter-spacing:1px; color:#103d59; line-height:1.15; }
  .banner-title h1::after { content:"TACTICAL ROUTE PLANNER"; display:block; margin-top:7px; font-size:10px; font-weight:700; letter-spacing:3px; color:#3984a3; }
  .branding { right:24px; top:8px; width:340px; padding:0 12px 4px; background:#ffffff75; border:1px solid #ffffffcc; border-radius:12px; }
  .brand-logos { gap:12px; height:53px; } #gamekee-logo { width:145px; } #committee-logo { width:110px; height:55px; } .brand-cross { font-size:22px; color:#4b849e; } .brand-domain { font-size:15px; line-height:21px; color:#255a77; }
  .board-main { position:relative; padding:27px 28px 24px; background:linear-gradient(135deg,#fbfdff,#f4faff); }
  .clear-team { position:absolute; right:6px; top:5px; width:22px; height:22px; padding:0; border:1px solid #c7dce8; border-radius:6px; background:#ffffffdc; color:#6b8b9e; font-family:inherit; font-size:19px; font-weight:500; line-height:18px; cursor:pointer; z-index:2; }
  .clear-team:hover,.clear-team:focus { background:#fff2f3; color:#bf5360; border-color:#e3acb3; }
  th:has(.clear-team) .header-edit { padding-right:28px; }
  .team-empty .type-menu { width:100%; }
  .team-empty .type-menu summary { opacity:0; justify-content:center; font-size:16px; font-weight:500; box-shadow:none; background:transparent; border-color:transparent; }
  .team-empty:hover .type-menu summary,.team-empty:focus-within .type-menu summary { opacity:1; color:#6c96ad; }
  .team-empty .type-menu summary::after { content:none; }
  @media print { .clear-team,.team-empty .type-menu { visibility:hidden; } }
  table { border:1.5px solid #a8c4d6; border-radius:11px; box-shadow:0 5px 18px #2d759211; background:#fff; }
  th,td { border-right:1px solid #bfd1de; border-bottom:1px solid #bfd1de; }
  thead th { height:64px; background:#edf7fc; }
  thead th:not(.corner) { border-top:3px solid var(--team-color,#26b9dd); }
  thead th:last-child { border-top-right-radius:9px; }
  .corner { background:#153f5b; color:white; font-weight:700; border-top-left-radius:9px; }
  .corner-diagonal line { stroke:#5bc5e7; stroke-width:1; }
  .corner .team-word { right:8px; top:4px; } .corner .round-word { left:8px; bottom:4px; }
  thead th { vertical-align:top; }
  .header-edit { min-height:56px; padding:5px 12px; gap:10px; align-items:flex-start; justify-content:flex-start; }
  .header-edit .type-menu { margin-top:6px; }
  .header-note { flex:1; width:0; }
  .type-menu summary { border:1px solid #d0e5ef; background:#fff; box-shadow:0 2px 3px #235b7c09; color:#21445a; padding:5px 8px; font-size:21px; }
  .type-menu summary:hover,.type-menu[open] summary { background:#f7fdff; border-color:#75c9e5; }
  .type-options { border-color:#b5d9e8; padding:6px; box-shadow:0 12px 30px #164d6e25; }
  .type-options button { color:#21445a; } .type-options button:hover { background:#eaf8ff; }
  .hex { width:26px; height:26px; box-shadow:none; }
  .row-label { background:#eaf4fb; color:#173f5c; font-size:24px; font-weight:700; border-left:3px solid #54c9e9; }
  tbody tr:nth-child(even):not(.blank-row) td:not(.row-label) { background:#f8fcff; }
  tbody tr:not(.blank-row):hover td:not(.row-label) { background:#f0faff; }
  textarea { color:#173b52; font-weight:600; padding-left:10px; padding-right:10px; border-radius:3px; }
  textarea:focus { background:#ffffff; box-shadow:inset 0 0 0 2px #42bce4; }
  .header-note { color:#123f5c; font-weight:700; }
  .blank-row td { height:72px; background:#f8fcff; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
  .row-actions { gap:22px; }
  .blank-action { width:45px; height:42px; background:#e3f5fd; border:1px solid #a3d8eb; color:#1c83ad; font-size:32px; line-height:1; border-radius:10px; box-shadow:0 2px 3px #1b70950b; }
  .blank-action:last-child { background:#fff; border-color:#cfdee8; color:#66869b; }
  .blank-action:hover,.blank-action:focus { background:#cbedfb; color:#14688c; box-shadow:0 3px 8px #1789b426; }
  .delete-row { background:#fff; border-color:#d6e3ec; color:#7993a6; }
  .delete-row:hover { color:#ce5a62; border-color:#ebacb1; background:#fff4f4; }
  .preview-dialog { background:#f5faff; border:1px solid #cae2ef; padding:18px; box-shadow:0 28px 90px #153b6270; }
  .preview-dialog::backdrop { background:#1432478f; backdrop-filter:blur(5px); }
  .preview-dialog button { color:#245c7e; border-color:#c1d9e7; background:#fff; font-weight:600; }
  @media(max-width:1000px) { .banner-title h1 { font-size:29px; } .branding { width:300px; right:17px; } #gamekee-logo { width:125px; } #committee-logo { width:95px; } .brand-domain { font-size:14px; } .row-label { font-size:20px; } .header-edit { gap:5px; padding:4px; } .type-menu summary { font-size:19px; padding:5px; } }
  @media(prefers-reduced-motion:reduce) { button { transition:none; } }
 

  @media screen and (max-width:720px) {
    html { -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
    body { display:flex; flex-direction:column; min-height:100svh; }
    .board-scroll { order:1; width:100%; padding:12px 10px 0; overflow:visible; }
    .board { width:100%; min-width:0; max-width:100%; border-radius:16px; box-shadow:0 8px 24px #2a6a921a; }
    .toolbar { order:2; width:auto; max-width:100%; margin:12px 10px 24px; padding:0; justify-content:center; gap:10px; flex-wrap:nowrap; }
    .toolbar button { min-height:38px; padding:9px 13px; font-size:13px; line-height:18px; gap:6px; border-radius:9px; white-space:nowrap; flex:none; }
    .toolbar button span { white-space:nowrap; }
    .toolbar button svg { width:16px; height:16px; flex:none; }
    .banner { height:122px; }
    .banner-title { left:12px; top:0; height:66px; gap:10px; }
    .banner-title img { width:47px; height:66px; }
    .banner-title h1 { font-size:23px; letter-spacing:1px; }
    .banner-title h1::after { font-size:7px; letter-spacing:1.5px; margin-top:5px; }
    .branding { left:12px; right:12px; top:71px; width:auto; height:41px; padding:4px 8px; display:flex; justify-content:space-between; align-items:center; border-radius:9px; }
    .brand-logos { height:30px; gap:6px; flex:none; }
    #gamekee-logo { width:clamp(76px,22vw,98px); height:auto; }
    #committee-logo { width:50px; height:30px; }
    .brand-cross { font-size:14px; line-height:20px; }
    .brand-domain { font-size:10.5px; line-height:16px; letter-spacing:.15px; white-space:nowrap; margin-left:6px; }
    .board-main { padding:12px 8px 10px; }
    table { border-width:1px; border-radius:8px; }
    col:first-child { width:19%; }
    col:nth-child(2),col:nth-child(3),col:nth-child(4) { width:27%; }
    th,td { height:64px; }
    thead th { height:88px; }
    .corner { font-size:14px; border-top-left-radius:7px; }
    .corner .team-word { top:8px; right:5px; }
    .corner .round-word { bottom:8px; left:5px; }
    .header-edit,th:has(.clear-team) .header-edit { min-height:80px; height:auto; padding:22px 3px 5px; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; }
    .header-edit .type-menu { margin-top:0; }
    .type-menu { width:100%; min-width:0; }
    .type-menu summary { justify-content:center; padding:4px 2px; gap:3px; font-size:13px; line-height:20px; border-radius:5px; }
    .type-menu summary::after { font-size:11px; }
    .hex { width:17px; height:17px; }
    .type-options { right:0; left:auto; min-width:145px; }
    .type-options button { min-height:38px; font-size:16px; }
    .type-options .hex { width:22px; height:22px; }
    .clear-team { right:3px; top:3px; width:22px; height:20px; font-size:17px; line-height:17px; }
    .team-empty .type-menu summary { font-size:12px; line-height:18px; white-space:normal; }
    textarea { min-width:0; font-size:16px; line-height:1.35; padding:8px 5px; border-radius:2px; }
    tbody textarea { height:52px; }
    .header-note { width:100%; min-width:0; flex:none; padding:5px 2px; text-align:center; font-size:16px; }
    .row-label { font-size:13px; line-height:1.5; white-space:normal; border-left-width:2px; }
    .round-name,.round-number { display:block; }
    .delete-row { right:2px; top:2px; width:17px; height:17px; font-size:14px; line-height:14px; }
    .blank-row td { height:55px; }
    .row-actions { gap:16px; }
    .blank-action { width:39px; height:34px; border-radius:8px; font-size:26px; }
    .preview-dialog { width:calc(100vw - 16px); max-width:none; max-height:94svh; padding:10px; border-radius:11px; }
    .preview-dialog button { padding:7px 12px; font-size:13px; }
    .preview-dialog img { max-height:calc(94svh - 65px); }
  }
  @media screen and (max-width:360px) {
    .row-label { font-size:11.5px; }
  }
  /* Mobile PNGs use the same desktop brand layout as desktop PNGs. */
  .export-banner { position:fixed!important; left:-10000px!important; top:0!important; width:1392px!important; height:93px!important; visibility:hidden!important; pointer-events:none!important; }
  .export-banner .branding { left:auto; right:24px; top:8px; width:340px; height:auto; padding:0 12px 4px; display:block; border-radius:12px; }
  .export-banner .brand-logos { height:53px; display:flex; justify-content:center; align-items:center; gap:12px; }
  .export-banner #gamekee-logo { width:145px; height:auto; }
  .export-banner #committee-logo { width:110px; height:55px; }
  .export-banner .brand-cross { font-size:22px; line-height:normal; }
  .export-banner .brand-domain { font-size:15px; line-height:21px; letter-spacing:1px; margin-left:0; }