/* independent travel-planning palette: primary blue, white, accent coral/teal */
  :root{
    --brand-blue:#12645b;
    --brand-navy:#123c3a;
    --brand-blue-light:#258c7f;
    --brand-coral:#e45d42;
    --brand-teal:#19a99a;
    --brand-yellow:#f3c969;
    --ink:#172b2a;
    --muted:#5b6478;
    --bg:#f5f7fb;
    --card:#ffffff;
    --border:#e3e8f1;
    --shadow:0 2px 8px rgba(0,56,153,.08);
    --radius:10px;
    --font:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5}
  a{color:var(--brand-blue)}
  header.app{
    background:var(--brand-navy);
    color:#fff;padding:18px 22px;box-shadow:var(--shadow);
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  }
  header.app .logo{
    color:#fff;font-weight:800;text-decoration:none;
    padding:8px 0;font-size:19px;
  }
  header.app h1{margin:0;font-size:22px;font-weight:600}
  .top-nav{margin-left:auto;display:flex;gap:18px}
  .top-nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:700}
  header.app .range{font-size:11px;opacity:.75;margin-top:2px}

  main{padding:18px;max-width:1280px;margin:0 auto}

  .filters,.qf,.opts{
    background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:18px;margin-bottom:14px;border:1px solid var(--border);
  }
  .filters h2,.qf h2,.opts h2{margin:0 0 12px 0;font-size:16px;color:var(--brand-blue);font-weight:700;letter-spacing:.3px}
  .filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
  .filter-grid label,.qf label{display:block;font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
  select,input[type=text],input[type=number]{
    width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;
    font:inherit;color:var(--ink);
  }
  select:focus,input:focus{outline:2px solid var(--brand-blue-light);outline-offset:1px;border-color:var(--brand-blue)}
  .country-list{
    max-height:170px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:8px;background:#fff;
  }
  .country-list label.opt{
    display:flex;align-items:center;gap:6px;padding:3px 4px;font-size:14px;text-transform:none;
    color:var(--ink);font-weight:400;letter-spacing:0;margin:0;cursor:pointer;border-radius:4px;
  }
  .country-list label.opt:hover{background:#eef3fb}
  .country-list input{width:auto;margin:0}
  .quick-row{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
  button.btn{
    background:var(--brand-blue);color:#fff;border:0;padding:8px 14px;border-radius:6px;
    cursor:pointer;font:inherit;font-weight:600;font-size:13px;
  }
  button.btn.ghost{background:#fff;color:var(--brand-blue);border:1px solid var(--brand-blue)}
  button.btn.coral{background:var(--brand-coral)}
  button.btn.teal{background:var(--brand-teal)}
  button.btn:hover{filter:brightness(1.08)}
  button.btn:active{transform:translateY(1px)}

  /* Toggle row */
  .opts .toggles{display:flex;gap:18px;flex-wrap:wrap}
  .opts .toggles label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);font-weight:500;cursor:pointer;margin:0}
  .opts .toggles input{width:auto;margin:0;accent-color:var(--brand-blue)}
  .opts .toggles .hint{font-size:11px;color:var(--muted);font-weight:400;margin-left:4px}

  /* Quiet finder */
  .qf .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:end}
  .qf .results{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
  .qf .qcard{
    background:#f6fbfa;border:1px solid #cfe9e8;border-left:4px solid var(--brand-teal);
    border-radius:8px;padding:10px 12px;
  }
  .qf .qcard .rank{font-size:11px;color:var(--brand-teal);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
  .qf .qcard .dates{font-weight:700;color:var(--ink);margin:2px 0}
  .qf .qcard .why{font-size:12px;color:var(--muted)}

  .tabs{display:flex;gap:0;margin-bottom:14px;border-bottom:2px solid var(--border);flex-wrap:wrap}
  .tabs button{
    background:transparent;border:0;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;color:var(--muted);
    border-bottom:3px solid transparent;margin-bottom:-2px;
  }
  .tabs button.active{color:var(--brand-blue);border-bottom-color:var(--brand-coral)}

  .status{padding:24px;text-align:center;color:var(--muted);font-size:14px}
  .status.error{color:#b00020;background:#fff5f5;border:1px solid #ffd2d2;border-radius:8px;padding:18px;margin:12px 0}
  .spinner{
    display:inline-block;width:18px;height:18px;border:3px solid #d9e2f5;border-top-color:var(--brand-blue);
    border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:8px
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  .heatmap-wrap{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:16px;border:1px solid var(--border)}
  .heatmap-legend{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
  .heatmap-legend .scale{display:flex;height:14px;width:240px;border-radius:3px;overflow:hidden;border:1px solid var(--border)}
  .heatmap-legend .scale span{flex:1}
  .month-block{margin-bottom:22px}
  .month-block h3{margin:0 0 8px 0;font-size:15px;color:var(--brand-blue);font-weight:700}
  .calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .cal-head{font-size:11px;color:var(--muted);font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.5px;padding:4px 0}
  .day{
    aspect-ratio:1/1;border-radius:5px;background:#eef2f8;display:flex;flex-direction:column;
    align-items:center;justify-content:center;font-size:12px;cursor:default;position:relative;
    transition:transform .12s;
  }
  .day.empty{background:transparent}
  .day .num{font-weight:600;color:var(--ink)}
  .day .cnt{font-size:9px;color:rgba(0,0,0,.55);margin-top:1px}
  .day .price{font-size:8px;font-weight:700;opacity:.85;margin-top:1px}
  .day:hover{transform:scale(1.08);z-index:2;box-shadow:0 4px 10px rgba(0,0,0,.15)}
  .day[data-count="0"]{background:#f0f3f8;color:var(--muted)}
  .day.h1{background:#dceaff}
  .day.h2{background:#a9c7ff;color:#0c1a3a}
  .day.h3{background:#6e9aff;color:#fff}
  .day.h4{background:#ffb072;color:#3a1500}
  .day.h5{background:#ff7a3c;color:#fff}
  .day.h6{background:#e8412a;color:#fff}
  .day.h7{background:#a8231a;color:#fff}
  /* Bridge day indicator */
  .day.bridge::after{
    content:'';position:absolute;top:2px;right:2px;width:6px;height:6px;border-radius:50%;
    background:var(--brand-yellow);box-shadow:0 0 0 1px rgba(0,0,0,.2)
  }
  .day.pub::before{
    content:'';position:absolute;bottom:2px;left:2px;width:6px;height:6px;border-radius:50%;
    background:var(--brand-teal);box-shadow:0 0 0 1px rgba(255,255,255,.7)
  }

  .tooltip{
    position:fixed;background:#0c1a3a;color:#fff;padding:8px 10px;border-radius:6px;font-size:12px;
    pointer-events:none;z-index:99;max-width:320px;box-shadow:0 4px 14px rgba(0,0,0,.3);
    display:none;line-height:1.4
  }
  .tooltip strong{color:var(--brand-yellow)}
  .tooltip .row2{margin-top:4px;color:#7ed3d1}
  .tooltip .row3{margin-top:4px;color:#ffd28a}

  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
  .card{
    background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid var(--border);
    box-shadow:var(--shadow);border-left:4px solid var(--brand-blue);
  }
  .card.fallback{border-left-color:var(--brand-yellow)}
  .card.public{border-left-color:var(--brand-teal)}
  .card .ctry{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
  .card .name{font-size:15px;font-weight:700;color:var(--ink);margin:2px 0 6px 0}
  .card .dates{color:var(--brand-blue);font-weight:600;font-size:13px}
  .card .meta{color:var(--muted);font-size:12px;margin-top:6px}
  .card .note{font-size:11px;color:#9a7400;background:#fff8d6;padding:3px 6px;border-radius:3px;display:inline-block;margin-top:6px}

  .summary{
    background:linear-gradient(135deg,#fff 60%, #eaf1ff 100%);
    border:1px solid var(--border);border-left:4px solid var(--brand-coral);
    border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;
    box-shadow:var(--shadow);
  }
  .summary .stat{min-width:100px}
  .summary .stat .v{font-size:22px;font-weight:800;color:var(--brand-blue);line-height:1}
  .summary .stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:3px;font-weight:600}
  .summary .export{margin-left:auto}

  footer.app{margin:32px 0 0;padding:28px 18px;text-align:center;font-size:12px;color:#d5e8e5;background:var(--brand-navy)}
  footer.app a,footer.app button{color:#fff}
  .footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
  .footer-links button{background:none;border:0;text-decoration:underline;cursor:pointer;font:inherit}
  .skip-link{position:absolute;left:-999px;top:6px;background:#fff;padding:8px;z-index:999}
  .skip-link:focus{left:8px}
  :focus-visible{outline:3px solid var(--brand-yellow);outline-offset:3px}
  .ad-slot{display:flex;align-items:center;justify-content:center;gap:10px;min-height:78px;border:1px dashed #b8c9c7;background:#f7faf9;color:var(--muted);margin-bottom:14px;padding:16px;text-align:center}
  .ad-slot strong{color:var(--ink)}
  .commercial-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .commercial-actions a{display:inline-block;text-decoration:none}
  .affiliate-note{font-size:11px;color:var(--muted);margin-top:6px}
  .content-shell{max-width:860px;margin:0 auto;padding:42px 18px 70px}
  .content-shell h1{font-size:38px;line-height:1.15;margin:0 0 18px;color:var(--brand-navy)}
  .content-shell h2{margin-top:32px;color:var(--brand-blue)}
  .content-shell p,.content-shell li{font-size:16px;line-height:1.7}
  .content-shell .updated{font-size:13px;color:var(--muted)}
  .guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
  .guide-card{border:1px solid var(--border);padding:18px;background:#fff;border-radius:8px}
  .guide-card a{font-weight:800;text-decoration:none}

  @media (max-width:640px){
    .top-nav{width:100%;margin-left:0}
    .day .cnt,.day .price{display:none}
    main{padding:12px}
  }