*{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans SC',sans-serif;
  background:#0c0c12;color:#e8e8f0;overflow:hidden;
  --bg:#0c0c12;--bc:#16161e;--bh:#1e1e2a;--bd:#252535;--tx:#e8e8f0;--tm:#7a7a8a;--ac:#7c6ff0
}
::selection{background:#7c6ff0}
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-track{background:#16161e}
::-webkit-scrollbar-thumb{background:#3a3a4a;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#5a5a6a}

.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* ===== HEADER ===== */
.header{display:flex;align-items:baseline;gap:14px;padding:8px 20px;border-bottom:1px solid var(--bd);flex-shrink:0}
.title{font-size:1rem;font-weight:700;background:linear-gradient(135deg,#e8e8f0,#7c6ff0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{font-size:.62rem;color:var(--tm)}

/* ===== TIMELINE DIV ===== */
#dt-wrap{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans SC',sans-serif;
  background:#0c0c12;color:#e8e8f0;padding:6px 20px 4px;
  border-bottom:1px solid #252535;flex-shrink:0;
  --tm:#7a7a8a;--ac:#7c6ff0;user-select:none;
  overflow-x:auto;overflow-y:auto;max-height:370px
}
#dt-wrap::-webkit-scrollbar{height:10px}
#dt-wrap::-webkit-scrollbar-track{background:#1a1a24;border-radius:3px;margin:0 4px}
#dt-wrap::-webkit-scrollbar-thumb{background:#7c6ff0;border-radius:5px;border:2px solid #1a1a24}
#dt-wrap h3{font-size:.8rem;font-weight:600;color:var(--tm);margin-bottom:2px}
#dt-scale{position:relative;z-index:5;height:16px;margin:0;background:#0c0c12}
#dt-scale .mk{position:absolute;transform:translateX(-50%)}
#dt-scale .mk .tick{width:1px;height:6px;background:#5a5a6a;margin:0 auto}
#dt-scale .mk.major .tick{width:2px;height:9px;background:#BDC3C7}
#dt-scale .mk .label{font-size:.65rem;color:#8a8a9a;text-align:center;margin-top:1px;font-weight:500;white-space:nowrap}
#dt-scale .mk.major .label{font-size:.8rem;color:#BDC3C7;font-weight:700}
.dt-row{position:relative;height:26px;margin-bottom:2px;border-radius:4px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.dt-row .seg{
  position:absolute;top:0;height:100%;
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(0,0,0,.2);min-width:2px;
  font-size:.65rem;font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.6);overflow:hidden;
  line-height:1.1;text-align:center;padding:0 1px;
  white-space:normal;word-break:break-all;cursor:pointer;
  transition:filter .12s
}
.dt-row .seg:hover{filter:brightness(1.3);z-index:3}
.dt-row .seg.locked{opacity:.55;cursor:default}.dt-row .seg.locked:hover{filter:none}
.seg.sel{filter:brightness(1.5);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);z-index:2}
.dt-row .seg.col{flex-direction:column}
.dt-row .seg.row{flex-direction:row;gap:3px}
.dt-row .seg span{pointer-events:none}
.dt-row .seg .dtn{font-size:.85rem;font-weight:700;padding:0;line-height:1.1;text-align:center;word-break:break-all}
.dt-row .seg .dty{font-size:.65rem;font-weight:500;opacity:.75;padding:0;line-height:1.1;text-align:center}

/* ===== BOTTOM DETAIL VIEW ===== */
.detail-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.detail-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 20px;border-bottom:1px solid var(--bd);flex-shrink:0
}
.detail-header-left{display:flex;align-items:baseline;gap:10px}
.dtl-title{font-size:.85rem;font-weight:700}
.dtl-period{font-size:.62rem;color:var(--tm)}
.dtl-count{font-size:.58rem;padding:1px 7px;border-radius:8px;background:var(--bc);border:1px solid var(--bd);color:var(--tm)}

.state-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  padding:4px 20px;border-bottom:1px solid var(--bd);flex-shrink:0
}
.state-btn{
  font-size:.6rem;padding:2px 7px;border-radius:10px;
  border:1px solid var(--bd);background:var(--bc);color:var(--tm);
  cursor:pointer;transition:all .12s;font-family:inherit
}
.state-btn:hover{background:var(--bh);color:var(--tx)}
.state-btn.active{border-color:var(--st-color);background:color-mix(in srgb,var(--st-color)18%,transparent);color:var(--st-color)}
.state-count{font-size:.5rem;padding:0 3px;border-radius:5px;background:rgba(255,255,255,.07);margin-left:2px}

.scroll-view{flex:1;overflow:auto}
#gridContent{overflow-x:auto;min-width:100%;display:table;border-collapse:collapse}


.cat-label-cell{
  position:sticky;left:0;z-index:5;
  width:130px;min-width:130px;max-width:130px;padding:8px 8px;font-size:.8rem;font-weight:600;
  background:var(--bg);border-right:2px solid var(--bd);
  display:table-cell;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.cat-icon{font-size:.75rem;margin-right:3px;display:inline-block}
.cat-name{font-size:.85rem}
.year-header{
  position:sticky;top:0;z-index:10;background:var(--bg);
  border-bottom:1px solid var(--bd);display:table-row
}
.year-cell{
  padding:4px 6px;text-align:center;
  font-size:.8rem;font-weight:600;color:var(--tm);
  border-right:1px solid var(--bd);display:table-cell;width:auto;min-width:80px;max-width:130px
}
.year-cell.active{color:var(--tx)}
.year-cell-sub{font-size:.65rem;font-weight:400;color:var(--tm);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid-row{display:table-row;border-bottom:1px solid var(--bd)}
.grid-row:nth-child(even){background:rgba(255,255,255,.02)}
.data-cell{
  padding:4px 5px;border-right:1px solid var(--bd);
  vertical-align:top;display:table-cell;width:auto;min-width:60px
}
.event-card{
  display:flex;flex-direction:column;gap:3px;
  padding:5px 7px;margin-bottom:4px;border-radius:4px;
  border-left:3px solid var(--ev-color);
  background:color-mix(in srgb,var(--ev-color)8%,var(--bc));
  cursor:pointer;transition:all .1s
}
.event-card:hover{background:color-mix(in srgb,var(--ev-color)18%,var(--bc));transform:translateY(-1px)}
.event-card.sel{background:color-mix(in srgb,var(--ev-color)24%,var(--bc));box-shadow:inset 0 0 0 1px var(--ev-color)}
.ev-top{display:flex;align-items:center;gap:3px;margin-bottom:2px}
.ev-year{font-size:.68rem;font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0}
.ev-state{font-size:.5rem;padding:1px 3px;border-radius:3px;background:rgba(255,255,255,.07);font-weight:500;white-space:nowrap;flex-shrink:0}
.ev-label{font-size:.78rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;max-height:4.2em}

.empty-msg{display:flex;align-items:center;justify-content:center;height:150px;color:var(--tm);font-size:.7rem}

/* detail overlay */
.detail-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;
  display:flex;justify-content:flex-end;backdrop-filter:blur(2px);animation:fadeIn .2s ease
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.detail-panel{
  width:340px;max-width:85vw;height:100vh;overflow-y:auto;
  background:var(--bc);border-left:1px solid var(--bd);
  padding:20px 18px;position:relative;animation:slideIn .25s ease
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.detail-close{
  position:absolute;top:12px;right:12px;width:26px;height:26px;
  border-radius:5px;border:1px solid var(--bd);background:var(--bg);
  color:var(--tm);font-size:.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
.detail-close:hover{background:var(--bh);color:var(--tx)}
.det-cat{font-size:.65rem;font-weight:600;margin-bottom:8px}
.det-title{font-size:.9rem;font-weight:700;line-height:1.3;margin-bottom:6px}
.det-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.68rem;color:var(--tm);margin-bottom:12px}
.det-year{font-weight:600}
.det-desc{font-size:.72rem;line-height:1.6;margin-bottom:10px}
.det-source{font-size:.65rem;color:var(--tm);font-style:italic}

.footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 20px;border-top:1px solid var(--bd);
  font-size:.55rem;color:var(--tm);flex-shrink:0
}

/* ===== OUTER STATES (inside dt-wrap) ===== */
.outer-row{position:relative;height:18px;margin-bottom:2px;border-radius:3px;overflow:hidden}
.outer-row .seg{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.6);cursor:pointer;transition:filter .12s;border-radius:3px;overflow:hidden;padding:0 3px;white-space:nowrap}
.outer-row .seg:hover{filter:brightness(1.3);z-index:3}
.outer-row .seg.sel{filter:brightness(1.5);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}

/* ===== FLOATING OVERLAYS ===== */
.float-overlay{
  position:fixed;inset:0;z-index:150;
  background:rgba(0,0,0,.6);
  display:flex;justify-content:flex-end;
  backdrop-filter:blur(3px);animation:floatIn .2s ease
}
@keyframes floatIn{from{opacity:0}to{opacity:1}}
.float-panel{
  width:520px;max-width:95vw;height:100vh;overflow-y:auto;
  background:var(--bc);border-left:1px solid var(--bd);
  padding:24px 20px;position:relative;
  animation:slideIn .25s ease
}
#mapPanel{width:680px;max-width:95vw}
.float-panel .panel-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;padding-bottom:12px;
  border-bottom:2px solid var(--bd)
}
.float-panel .panel-title{font-size:1.5rem;font-weight:700}
.float-panel .panel-close{
  width:38px;height:38px;border-radius:6px;
  border:1.5px solid var(--bd);background:var(--bg);
  color:var(--tm);font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .1s
}
.float-panel .panel-close:hover{background:var(--bh);color:var(--tx)}
.ruler-group{margin-bottom:14px}
.ruler-group-header{
  font-size:1.2rem;font-weight:700;padding:6px 10px;
  border-radius:5px;margin-bottom:3px;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.03);cursor:pointer;
  transition:background .1s
}
.ruler-group-header:hover{background:rgba(255,255,255,.07)}
.ruler-group-header .color-bar{width:8px;height:20px;border-radius:3px;flex-shrink:0}
.ruler-group.open .ruler-group-header{background:rgba(255,255,255,.06)}
.ruler-group-content{padding-left:28px;display:none}
.ruler-group.open .ruler-group-content{display:block}
.ruler-entry{font-size:1rem;padding:4px 8px;color:var(--tm);border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:center;gap:8px}
.ruler-entry:hover{color:var(--tx)}
.ruler-entry .ruler-year{font-size:.85rem;color:#5a5a6a;flex-shrink:0;min-width:80px}
.ruler-entry .ruler-name{font-weight:600;font-size:1rem}

/* ===== MOBILE ===== */
@media(max-width:640px){
  .header{padding:6px 10px;gap:6px}
  .title{font-size:.9rem}
  .subtitle{display:none}
  #dt-wrap{padding:4px 6px;max-height:280px}
  #dt-wrap h3{font-size:.7rem}
  .detail-header{padding:4px 10px}
  .state-bar{padding:2px 6px}
  .state-btn{font-size:.55rem;padding:1px 5px}
  .event-card{padding:3px 4px;margin-bottom:3px}
  .ev-label{font-size:.7rem}
  .ev-year{font-size:.6rem}
  .cat-label-cell{width:90px;min-width:90px;max-width:90px;padding:5px 5px;font-size:.65rem}
  .cat-icon{font-size:.6rem}
  .cat-name{font-size:.7rem}
  .year-cell{min-width:55px;max-width:80px;padding:3px 3px;font-size:.65rem}
  .year-cell-sub{font-size:.5rem}
  .data-cell{padding:2px 3px}
  .dtl-title{font-size:.8rem}
  .detail-panel{width:300px;padding:14px 12px}
  .det-title{font-size:.85rem}
  .det-desc{font-size:.7rem}
  .footer{font-size:.5rem;padding:4px 8px}
  .outer-row .seg{font-size:.45rem}
}