/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;min-width:0}
*{-webkit-tap-highlight-color:transparent}

body{font-family:Roboto,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;transition:background .1s,color .1s}

/* ── Header ── */
header{
  height:56px;background:var(--surface);
  display:flex;justify-content:flex-end;align-items:center;
  padding:0 12px;border-bottom:1px solid var(--border);gap:8px
}
button{cursor:pointer;border:none;border-radius:20px;font-weight:600;font-family:inherit}
.btn{
  background:var(--p);color:var(--op);padding:8px 16px;
  min-width:72px;display:inline-flex;align-items:center;
  justify-content:center;font-size:15px;font-weight: 700;transition:opacity .2s,background .2s;
  border-radius:20px
}
.btn:hover{opacity:.85}
.btn:active{opacity:.7}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* Icon button (SVG theme toggle) */
.icon-btn{
  width:34px;height:34px;border-radius:6px;border:1px solid var(--border);
  background:var(--sv);color:var(--os);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s,color .15s;padding:0
}
.icon-btn svg{width:28px;height:28px}
.icon-btn:hover{background:var(--pc);color:var(--opc)}
.icon-btn:active{opacity:.7}

main{max-width:560px;margin:auto;padding:16px}

/* ── Info rows ── */
.info-row{padding:10px 0;border-bottom:1px solid var(--sv)}
.info-row:last-child{border-bottom:none}
.info-label{font-size:12px;color:var(--label);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.info-value{font-family:monospace;word-break:break-all;cursor:pointer;font-size:15px}
.info-value:hover{color:var(--p)}

/* UTC badge */
.utc-badge{display:inline-block;margin-left:8px;font-size:11px;font-weight:600;background:var(--pc);color:var(--opc);border-radius:6px;padding:1px 6px;vertical-align:middle;letter-spacing:.2px}

/* ── Skeleton ── */
:root{--skel-duration:6s;--skel-base:rgba(0,0,0,0.12);--skel-shine:rgba(255,255,255,0.28)}
.skel{display:inline-block;border-radius:6px;height:16px;vertical-align:middle;background:linear-gradient(90deg,var(--skel-base) 16%,var(--skel-shine) 50%,var(--skel-base) 84%);background-size:300% 100%;animation:shimmer var(--skel-duration) linear infinite;will-change:background-position;opacity:1;box-shadow:0 0 0 1px rgba(0,0,0,0.02) inset}
.skel-latlng{width:140px}.skel-city{width:160px}.skel-isp{width:200px}.skel-tz{width:130px}.skel-ipv4{width:110px}.skel-ipv6{width:220px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-20% 0}}

/* ── Sections ── */
.section{margin-top:12px;border-radius:6px;overflow:hidden;border:1px solid var(--border)}
.section-header{width:100%;padding:14px 16px;background:var(--pc);color:var(--opc);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;border:none;border-radius:0;transition:background .2s}
.section-header:hover{filter:brightness(.95)}
.section-header .arrow{transition:transform .3s;font-size:18px}
.section-header.open .arrow{transform:rotate(90deg)}
.section-body{display:none;padding:4px 16px 8px;background:var(--surface)}
.section-body.show{display:block}

/* ── Map box ── */
.map-box{
  display:none;margin-top:12px;
  border:1px solid var(--border);border-radius:6px;
  overflow:hidden;flex-direction:column;
  position:relative   /* for absolute mapLabel on mobile */
}
.map-box.show{display:flex}
#map{height:240px;width:100%;order:1}

/* Toolbar at bottom */
#mapToolbar{
  order:2;display:flex;align-items:center;
  padding:7px 8px;background:var(--surface);
  border-top:1px solid var(--border);gap:6px
}
#mapLabel{
  font-size:14px;font-weight:700;color:var(--opc);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--pc);border-radius:6px;
  padding:5px 10px;border:none;cursor:pointer;font-family:inherit;
  text-align:left;transition:filter .15s;
  /* mobile: absolute inside map; desktop: flex item */
  flex:1;min-width:0
}
#mapLabel:hover{filter:brightness(.92)}
#mapTime{
  font-size:14px;font-weight:700;font-family:monospace;
  background:var(--pc);color:var(--opc);border:none;border-radius:6px;
  padding:5px 8px;white-space:nowrap;flex-shrink:0;
  min-width:82px;text-align:center;cursor:pointer;
  user-select:none;-webkit-user-select:none
}
#zoomCtrl{display:flex;align-items:center;gap:3px;flex-shrink:0}
.zstep{
  width:30px;height:30px;border-radius:6px;border:1px solid var(--border);
  background:var(--sv);color:var(--os);font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .15s,color .15s;
  display:flex;align-items:center;justify-content:center
}
.zstep:hover{background:var(--pc);color:var(--opc)}
.zstep:disabled{opacity:.35;cursor:not-allowed}
#zoomNum{
  min-width:28px;text-align:center;font-size:14px;font-weight:700;
  background:var(--pc);color:var(--opc);border-radius:6px;
  padding:5px 7px;font-family:monospace
}
#fsBtn{
  width:30px;height:30px;border-radius:6px;border:1px solid var(--border);
  background:var(--sv);color:var(--os);font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:background .15s;
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
#fsBtn:hover{background:var(--pc);color:var(--opc)}

/* Mobile: mapLabel floats inside map top-left */
@media(max-width:480px){
  #mapLabel{
    position:absolute;
    top:8px;left:8px;
    z-index:500;
    max-width:58%;
    flex:none
  }
}

/* Leaflet */
body:not(.dark) .leaflet-container{background:var(--bg)!important}
.leaflet-tooltip{background:var(--pc);color:var(--opc);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px;font-weight:600;box-shadow:none}
.leaflet-tooltip-top::before{border-top-color:var(--border)}
.map-city-tip{background:var(--p)!important;color:var(--op)!important;border-color:var(--p)!important;font-weight:700}
.map-click-tip{background:var(--os)!important;color:var(--surface)!important;border-color:var(--os)!important;font-weight:700;font-size:13px;pointer-events:none}

/* ── Fullscreen map — toolbar always visible ── */
.map-box.fullscreen{
  position:fixed;
  top:0;left:0;
  width:100vw;
  /* dvh = dynamic viewport height (excludes browser chrome on mobile) */
  height:100dvh;
  height:100vh; /* fallback for old browsers */
  z-index:2000;border-radius:0;margin:0;border:none;
  display:flex;flex-direction:column
}
.map-box.fullscreen #map{
  flex:1;        /* fills all space above toolbar */
  height:auto!important;
  order:1
}
.map-box.fullscreen #mapToolbar{
  order:2;
  flex-shrink:0;   /* never compressed */
  /* Fixed to bottom of viewport so browser chrome can't cover it */
  position:sticky;
  bottom:0;
  padding:8px 12px;
  padding-bottom:max(8px, env(safe-area-inset-bottom, 8px));
  background:var(--surface);
  border-top:1px solid var(--border)
}
/* mapLabel goes back to normal flow in fullscreen (not absolute) */
.map-box.fullscreen #mapLabel{
  position:static;
  flex:1;min-width:0
}

/* ── Custom lookup ── */
.ig{display:flex;gap:8px;margin-bottom:10px}
.input-wrap{position:relative;flex:1}
.input-wrap input{width:100%;padding:10px 36px 10px 12px;border:1px solid var(--border);background:var(--surface);color:var(--os);caret-color:var(--p);border-radius:6px;font-size:14px;font-family:inherit;transition:border-color .2s}
input::placeholder{color:var(--osv)}
input:focus{outline:none;border-color:var(--p)}
.clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--bg);color:var(--os);font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;border:2px solid var(--p)}
.clear-btn.show{opacity:1;pointer-events:auto}
.cc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--os);font-family:monospace;transition:background .2s}
.chip:hover{background:var(--sv)}
.chip.ipv4{background:var(--pc);color:var(--opc);border-color:transparent}
.chip.ipv6{background:var(--sv);color:var(--osv);border-color:transparent}

/* ── Color Theme Modal (bottom sheet) ── */
#themeModal{
  display:none;
  position:fixed;inset:0;
  z-index:3000;
  background:rgba(0,0,0,.5);
  align-items:flex-end;
  justify-content:center
}
#themeModal.open{display:flex}
#themeSheet{
  background:var(--surface);
  border-radius:12px 12px 0 0;
  width:100%;max-width:560px;
  max-height:72vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  /* slide up animation */
  animation:slideUp .22s ease-out
}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
#themeSheetHead{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;
  border-bottom:1px solid var(--border);flex-shrink:0
}
#themeSheetTitle{font-size:16px;font-weight:700;color:var(--text)}
#themeSheetClose{
  width:28px;height:28px;border-radius:6px;
  background:var(--sv);color:var(--os);
  font-size:30px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;font-weight:400
}
#themeSheetClose:hover{background:var(--pc);color:var(--opc)}
#themeGridModal{
  overflow-y:auto;
  padding:12px 14px 20px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px
}
@media(min-width:360px){
  #themeGridModal{grid-template-columns:repeat(3,1fr)}
}

/* Theme card in modal */
.theme-card{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 8px;border-radius:6px;border:2px solid var(--border);
  background:var(--surface);cursor:pointer;
  transition:border-color .15s,background .15s;
  user-select:none;-webkit-user-select:none
}
.theme-card:hover{border-color:var(--p)}
.theme-card.active{border-color:var(--p);background:var(--pc)}
.theme-card.active .theme-name{color:var(--opc);font-weight:700}
/* Preview box: bg color with accent border */
.theme-preview{
  width:100%;height:44px;border-radius:6px;
  border:3px solid var(--preview-accent, #888);
  background:var(--preview-bg, #eee);
  position:relative;overflow:hidden
}
.theme-preview::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:35%;
  background:var(--preview-accent, #888);
  opacity:.35
}
.theme-name{font-size:11px;font-weight:600;color:var(--os);text-align:center;line-height:1.3}

/* ── Toast ── */
.toast{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  background:var(--os);color:var(--surface);
  padding:10px 18px;border-radius:6px;
  font-size:15px;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .3s;
  z-index:9999;white-space:nowrap;
  display:flex;align-items:center;gap:8px
}
.toast.show{opacity:.96}
.toast-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  font-size:12px;font-weight:800;flex-shrink:0;
  border:2px solid currentColor;line-height:1
}
.toast-icon.ok  {color:#4ade80;border-color:#4ade80}
.toast-icon.fail{color:#f87171;border-color:#f87171}
.toast-icon.none{display:none}

/* ── Spinner ── */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--p);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Cooldown bar ── */
#cooldownBar{position:fixed;top:56px;left:0;height:3px;width:0%;background:var(--p);z-index:999;display:none;transition:width .1s linear}

/* ── Mobile ── */
@media(max-width:480px){
  #cooldownBar{top:auto;bottom:56px}
  header{position:fixed;bottom:0;left:0;width:100%;padding:8px 12px;border-top:1px solid var(--border);border-bottom:none;justify-content:space-between;background:var(--surface);z-index:1000;gap:8px}
  .btn{flex:1;padding:10px}
  .icon-btn{flex:0 0 42px;width:42px;height:42px}
  .ig{flex-direction:column}
  .ig .btn{width:100%}
  main{padding-bottom:90px}
  .toast{bottom:76px}
  /* fullscreen map on mobile: make sure toolbar never hidden */
  .map-box.fullscreen{height:100dvh}
  }