@import url("https://unpkg.com/leaflet@1.9.4/dist/leaflet.css");

  #qimap-wrap{max-width:980px;margin:12px auto;font-family:system-ui,Segoe UI,Roboto,Arial}
  #qimap-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  #qimap-title{font-size:18px;font-weight:700;margin:0}
  #qimap-form{display:flex;gap:8px}
  #qimap-form input{flex:1;min-width:260px;padding:10px 12px;border:1px solid #ccc;border-radius:8px}
  #qimap-form button{padding:10px 14px;border:0;border-radius:8px;cursor:pointer;background:#111;color:#fff}
  #qimap-actions{display:flex;gap:8px;margin:8px 0 10px}
  #qimap-actions button{padding:8px 12px;border:0;border-radius:8px;cursor:pointer;background:#eee}
  #qimap{height:520px;border-radius:12px;overflow:hidden;position:relative}
  .leaflet-container{background:#eef3f6}

  /* захист від дивних transform у темах */
  .leaflet-pane, .leaflet-map-pane, .leaflet-tile-pane, .leaflet-overlay-pane,
  .leaflet-marker-pane, .leaflet-shadow-pane, .leaflet-tooltip-pane, .leaflet-popup-pane {
    transform: translateZ(0);
  }

  .grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:12px}
  @media (max-width:900px){ .grid{grid-template-columns:1fr} }

  /* Панель шиченів */
  #shichen-panel{border:1px solid #e5e5e5;border-radius:12px;padding:12px}
  #shichen-panel h4{margin:0 0 8px;font-size:16px}
  .sh-controls{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
  .sh-controls input[type="date"]{padding:6px 10px;border:1px solid #ccc;border-radius:8px}
  .sh-controls .place{font-size:12px;color:#555}
  .sh-row.now{background:rgba(221,51,51,0.10);outline:1px solid rgba(221,51,51,0.25)}
  .badge{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:26px;border-radius:999px;background:#111;color:#fff;font-weight:700;font-size:12px}
  .mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .sh-foot{margin-top:8px;font-size:12px;color:#555;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .copy-btn{padding:6px 10px;border:0;border-radius:8px;background:#d33;color:#fff;cursor:pointer}
  .hint{font-size:12px;color:#555;margin:6px 0 0}
  .tag{background:#f2f3f5;border-radius:999px;padding:3px 8px}
  .sh-row {
    display: grid;
    grid-template-columns: auto 1fr; /* два стовпчики: ліворуч — ієрогліф+назва, праворуч — час */
    gap: 12px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 13px;
  }
  .animal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
  }
  .animal .han {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
  }

  .animal .ua {
    font-size: 12px;
    color: #555;
    line-height: 1.2;
    text-align: center;
  }
  @media (max-width: 500px) {
  .sh-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .animal {
    flex-direction: row;
    gap: 4px;
    align-items: center;
  }
  .animal .han {
    font-size: 14px;
  }
  .animal .ua {
    font-size: 12px;
  }
}