:root{
    --bg:#f5f2ea; --surface:#ffffff; --surface-2:#efe9db; --surface-3:#e7e0cd;
    --ink:#202b23; --muted:#62705f; --muted-2:#8b9686;
    --accent:#d9622b; --accent-ink:#ffffff; --accent-2:#2f6f5e;
    --line:#d8d0bd; --line-strong:#c7bda3;
    --danger:#b0392f; --ok:#2f6f5e; --warn:#a8791f;
    --font-display:"Big Shoulders Display",system-ui,sans-serif;
    --font-body:"IBM Plex Sans",-apple-system,Segoe UI,Roboto,sans-serif;
    --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
    --shadow-1:0 1px 2px rgba(32,43,35,.08), 0 1px 1px rgba(32,43,35,.06);
    --shadow-2:0 8px 24px rgba(32,43,35,.16);
    --radius:10px;
  }
  /* Light by default, regardless of the visitor's OS theme. Kept as an explicit
     opt-in below in case a manual dark-mode toggle is added later. */
  :root[data-theme="dark"]{
    --bg:#12181a; --surface:#1a2224; --surface-2:#202b2c; --surface-3:#26312f;
    --ink:#e7ece7; --muted:#96a89d; --muted-2:#6c7d72;
    --accent:#ef7b3d; --accent-ink:#14181a; --accent-2:#57b79c;
    --line:#2b3536; --line-strong:#37433f;
    --danger:#e2685c; --ok:#57b79c; --warn:#e0b04a;
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
    --shadow-2:0 12px 32px rgba(0,0,0,.5);
  }

  *{box-sizing:border-box;}
  body{background:var(--bg); color:var(--ink); font-family:var(--font-body); height:100%;}
  html{height:100%;}
  #app{min-height:100%; display:flex; flex-direction:column;}
  a{color:var(--accent-2);}
  button{font-family:var(--font-body);}
  h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:.01em; text-wrap:balance; margin:0;}
  .mono{font-family:var(--font-mono);}
  .tnum{font-variant-numeric:tabular-nums;}

  /* ---- shell ---- */
  .shell{display:flex; flex:1; min-height:0;}
  .rail{
    width:210px; flex:0 0 auto; background:var(--surface); border-right:1px solid var(--line);
    display:flex; flex-direction:column; padding:20px 14px; gap:4px;
  }
  .rail-brand{display:flex; align-items:center; gap:9px; padding:2px 8px 18px; }
  .rail-brand .pin{font-size:22px;}
  .rail-brand .name{font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:.02em; line-height:1;}
  .rail-brand .name small{display:block; font-family:var(--font-mono); font-size:9.5px; font-weight:500; color:var(--muted); letter-spacing:.14em; margin-top:2px;}
  .nav-btn{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; border:none; background:transparent;
    color:var(--muted); font-size:14px; font-weight:600; text-align:left; cursor:pointer; width:100%;
  }
  .nav-btn:hover{background:var(--surface-2); color:var(--ink);}
  .nav-btn.active{background:var(--accent); color:var(--accent-ink);}
  .nav-btn .ic{font-size:16px; width:18px; text-align:center;}
  .rail-foot{margin-top:auto; padding:10px 8px 4px; font-size:11px; color:var(--muted-2); font-family:var(--font-mono); line-height:1.5;}
  .user-line{font-family:var(--font-body); font-size:11.5px; color:var(--muted-2); margin-bottom:4px;}
  .user-line strong{color:var(--ink);}
  .link-btn{border:none; background:none; padding:0; color:var(--accent-2); font-weight:600; cursor:pointer; font-size:11.5px; font-family:var(--font-body);}
  .link-btn:hover{text-decoration:underline;}

  /* ---- sign-in gate ---- */
  .signin-gate{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50;}
  .signin-card{max-width:380px; width:100%; padding:30px 26px;}
  .signin-card .brand{display:flex; align-items:center; gap:8px; margin-bottom:20px;}
  .signin-card .brand .pin{font-size:24px;}
  .signin-card .brand .name{font-family:var(--font-display); font-size:22px; font-weight:800;}
  .signin-card h2{font-size:19px; margin-bottom:8px;}
  .signin-card .sub{font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:18px;}
  .signin-card .field{margin-bottom:16px;}
  .signin-card .btn{width:100%; justify-content:center;}
  .signin-card .btn[disabled]{opacity:.6; cursor:default;}
  .signin-card .banner{font-size:12.5px; padding:10px 12px;}
  .auth-switch{margin-top:14px; text-align:center; font-size:12.5px; color:var(--muted);}
  .ver-tag{margin-top:14px; text-align:center; font-family:var(--font-mono); font-size:10.5px; color:var(--muted-2); letter-spacing:.04em;}

  .main-col{flex:1; min-width:0; display:flex; flex-direction:column; min-height:0;}
  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:16px 24px; border-bottom:1px solid var(--line); background:var(--surface);
  }
  .topbar h1{font-size:26px;}
  .topbar .sub{font-size:12.5px; color:var(--muted); margin-top:2px; font-family:var(--font-mono);}
  .topbar-actions{display:flex; gap:8px; flex-wrap:wrap;}
  main{flex:1; overflow-y:auto; padding:22px 24px 60px;}
  .wrap{max-width:1180px; margin:0 auto;}

  /* mobile bottom nav */
  .tabbar{display:none;}
  @media (max-width:760px){
    .rail{display:none;}
    .tabbar{
      display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--line);
      padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); z-index:40; gap:2px;
    }
    .tabbar .nav-btn{flex-direction:column; gap:2px; font-size:10.5px; padding:6px 4px; text-align:center;}
    .tabbar .nav-btn .ic{font-size:18px; width:auto;}
    main{padding-bottom:84px;}
    .topbar{padding:14px 16px;}
    main{padding-left:16px; padding-right:16px;}
  }

  /* ---- buttons / inputs ---- */
  .btn{
    display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:8px; border:1px solid var(--line-strong);
    background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  }
  .btn:hover{border-color:var(--muted);}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
  .btn.primary:hover{filter:brightness(1.05);}
  .btn.ghost{border-color:transparent; background:transparent;}
  .btn.danger{color:var(--danger); border-color:var(--danger);}
  .btn.sm{padding:6px 10px; font-size:12.5px;}
  .btn:disabled{opacity:.5; cursor:not-allowed;}
  input[type=text], input[type=date], input[type=search], textarea, select{
    font-family:var(--font-body); font-size:14px; padding:9px 11px; border-radius:8px; border:1px solid var(--line-strong);
    background:var(--surface); color:var(--ink); width:100%;
  }
  textarea{resize:vertical; min-height:80px; font-family:var(--font-body);}
  label{font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:5px;}
  .field{margin-bottom:14px;}
  .row{display:flex; gap:14px; flex-wrap:wrap;}
  .row > .field{flex:1; min-width:160px;}

  /* ---- cards / stats ---- */
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1);}
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;}
  @media (max-width:760px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
  .stat{padding:16px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line);}
  .stat .num{font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1;}
  .stat .lbl{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:6px; font-weight:600;}
  .stat.accent{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface));}

  .section-h{display:flex; align-items:baseline; justify-content:space-between; margin:26px 0 12px;}
  .section-h h2{font-size:19px;}
  .section-h .cnt{font-size:12px; color:var(--muted); font-family:var(--font-mono);}

  /* ---- field map ---- */
  .fm-wrap{display:flex; gap:18px; flex-wrap:wrap;}
  .fm-map-box{flex:1 1 420px; min-width:280px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px; box-shadow:var(--shadow-1);}
  .fm-map-box svg{width:100%; height:auto; display:block; border-radius:6px; background:var(--surface-2);}
  .fm-side{flex:0 0 260px; display:flex; flex-direction:column; gap:12px;}
  @media (max-width:900px){ .fm-side{flex:1 1 260px;} }
  .fm-legend{display:flex; flex-wrap:wrap; gap:6px 12px; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);}
  .fm-legend .item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);}
  .fm-legend .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
  .fm-empty{padding:40px 20px; text-align:center; color:var(--muted); font-size:13.5px;}
  .fm-detail{padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);}
  .fm-detail img{width:100%; border-radius:6px; display:block; margin-bottom:10px; max-height:180px; object-fit:cover;}
  .fm-detail .site{font-family:var(--font-display); font-size:17px; font-weight:700;}
  .fm-detail .meta{font-size:12px; color:var(--muted); margin-top:2px;}
  .fm-detail .coords{font-family:var(--font-mono); font-size:11.5px; color:var(--ink); margin-top:8px; background:var(--surface-2); padding:6px 8px; border-radius:6px;}
  .fm-detail .links{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
  .fm-marker{cursor:pointer; transition:r .1s;}
  .fm-marker:hover{filter:brightness(1.15);}

  /* ---- visits table ---- */
  .filters{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:flex-end;}
  .filters .field{margin-bottom:0; min-width:150px;}
  .filters .field.grow{flex:1; min-width:200px;}
  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 10px; border-bottom:2px solid var(--line);}
  th.sortable{cursor:pointer; user-select:none;}
  th.sortable:hover{color:var(--ink);}
  td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top;}
  tr.visit-row{cursor:pointer;}
  tr.visit-row:hover td{background:var(--surface-2);}
  .tbl-wrap{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);}
  .chip{display:inline-block; padding:2px 8px; border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:11px; margin:1px 3px 1px 0; font-weight:600;}
  .chip.gps-ok{background:color-mix(in srgb, var(--ok) 16%, var(--surface)); color:var(--ok);}
  .chip.gps-no{background:color-mix(in srgb, var(--warn) 18%, var(--surface)); color:var(--warn);}
  .site-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px;}
  .notes-preview{color:var(--muted); font-size:12.5px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .empty-state{padding:50px 20px; text-align:center; color:var(--muted);}
  .empty-state .big{font-size:38px; margin-bottom:8px;}

  /* mobile visit cards */
  .visit-cards{display:none; flex-direction:column; gap:10px;}
  @media (max-width:700px){
    .tbl-wrap{display:none;}
    .visit-cards{display:flex;}
  }
  .vcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px; cursor:pointer;}
  .vcard .top{display:flex; justify-content:space-between; gap:8px;}
  .vcard .site{font-family:var(--font-display); font-weight:700; font-size:16px;}
  .vcard .date{font-family:var(--font-mono); font-size:12px; color:var(--muted);}
  .vcard .meta{font-size:12px; color:var(--muted); margin-top:4px;}

  /* ---- new visit ---- */
  .drop-zone{
    border:2px dashed var(--line-strong); border-radius:var(--radius); padding:34px 20px; text-align:center; background:var(--surface);
    color:var(--muted); font-size:13.5px; margin-bottom:18px;
  }
  .drop-zone.drag{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); color:var(--ink);}
  .drop-zone .big{font-size:30px; margin-bottom:6px;}
  .drop-zone .pick-btns{display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap;}
  .photos-zone{border-radius:var(--radius); transition:outline-color .12s;}
  .photos-zone.drag{outline:2px dashed var(--accent); outline-offset:6px; background:color-mix(in srgb, var(--accent) 5%, transparent);}
  .drop-hint{font-size:12px; color:var(--muted); font-weight:400; margin-left:8px;}
  .file-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:16px 0;}
  .file-card{position:relative; border-radius:8px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); aspect-ratio:1;}
  .file-card img{width:100%; height:100%; object-fit:cover; display:block;}
  .file-card .badge{position:absolute; top:5px; left:5px; font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:999px; font-family:var(--font-mono);}
  .file-card .badge.ok{background:var(--ok); color:#fff;}
  .file-card .badge.no{background:var(--warn); color:#221a03;}
  .file-card .badge.err{background:var(--danger); color:#fff;}
  .file-card .rm{position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; border:none; background:rgba(20,20,20,.6); color:#fff; font-size:12px; cursor:pointer; line-height:1;}
  .file-card .fname{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; font-size:9.5px; padding:12px 6px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .progress-bar{height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin:10px 0;}
  .progress-bar > div{height:100%; background:var(--accent); transition:width .2s;}
  .tag-input{display:flex; flex-wrap:wrap; gap:6px; padding:7px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface);}
  .tag-input input{border:none; padding:4px; flex:1; min-width:80px; background:transparent;}
  .tag-input .tag{display:flex; align-items:center; gap:4px; background:var(--surface-3); padding:3px 4px 3px 9px; border-radius:999px; font-size:12px;}
  .tag-input .tag button{border:none; background:transparent; cursor:pointer; color:var(--muted); font-size:13px; padding:2px 5px;}

  /* ---- visit detail ---- */
  .back-link{display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:13px; font-weight:600; margin-bottom:14px; cursor:pointer; background:none; border:none; padding:0;}
  .back-link:hover{color:var(--ink);}
  .detail-head{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
  .detail-head h1{font-size:30px;}
  .tag-row{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
  .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px;}
  .gallery .ph{position:relative; border-radius:8px; overflow:hidden; aspect-ratio:1; background:var(--surface-2); cursor:pointer; border:1px solid var(--line);}
  .gallery .ph img{width:100%; height:100%; object-fit:cover; display:block;}
  .gallery .ph .gpstag{position:absolute; bottom:4px; right:4px; font-size:8.5px; font-family:var(--font-mono); background:rgba(20,20,20,.65); color:#fff; padding:2px 5px; border-radius:4px;}

  /* ---- lightbox ---- */
  .lightbox{position:fixed; inset:0; background:rgba(10,14,12,.86); z-index:100; display:flex; align-items:center; justify-content:center; padding:24px;}
  .lightbox-inner{max-width:960px; width:100%; max-height:100%; display:flex; flex-direction:column; background:var(--surface); border-radius:12px; overflow:hidden;}
  .lightbox img{width:100%; max-height:56vh; object-fit:contain; background:#000; display:block;}
  .lightbox-body{padding:16px 20px; overflow-y:auto;}
  .lightbox-top{display:flex; justify-content:flex-end; padding:8px;}
  .lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(20,20,20,.5); color:#fff; border:none; width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer;}
  .lightbox-nav.prev{left:12px;} .lightbox-nav.next{right:12px;}

  /* ---- toast / banner ---- */
  .toast-wrap{position:fixed; bottom:16px; right:16px; z-index:200; display:flex; flex-direction:column; gap:8px; max-width:320px;}
  @media (max-width:760px){ .toast-wrap{left:16px; right:16px; bottom:80px; max-width:none;} }
  .toast{background:var(--ink); color:var(--bg); padding:11px 14px; border-radius:8px; font-size:13px; box-shadow:var(--shadow-2);}
  .toast.err{background:var(--danger); color:#fff;}
  .banner{padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:16px; border:1px solid var(--line);}
  .banner.warn{background:color-mix(in srgb, var(--warn) 14%, var(--surface)); border-color:var(--warn); color:var(--ink);}
  .banner.err{background:color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color:var(--danger); color:var(--ink);}

  .confirm-box{padding:14px; border:1px solid var(--danger); border-radius:8px; background:color-mix(in srgb, var(--danger) 8%, var(--surface)); margin-top:12px;}
  .confirm-box .btns{display:flex; gap:8px; margin-top:10px;}

  [hidden]{display:none!important;}