:root { --bg: #12101a; --panel: rgba(22, 18, 32, .92); --accent: #b08fc4; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: #efe9f5; }
#app { position: absolute; inset: 0 0 0 0; }
#app canvas { display: block; }

.header { position: absolute; top: 14px; left: 18px; z-index: 5; max-width: 60%; }
.header h1 { margin: 0; font-size: 20px; color: var(--accent); }
.header p { margin: 4px 0 0; font-size: 12.5px; opacity: .75; }
.back { position: absolute; top: 14px; right: 18px; z-index: 5; font-size: 13px;
  color: #d8c8e8; text-decoration: none; border: 1px solid #4a3f5e; padding: 6px 12px; border-radius: 8px; background: var(--panel); }
.back:hover { border-color: var(--accent); }

.hint { position: absolute; bottom: 12px; left: 18px; font-size: 12px; opacity: .6; z-index: 5; }

.lbl { background: rgba(20,16,30,.8); border: 1px solid #5a4d72; color: #efe9f5;
  padding: 3px 9px; border-radius: 10px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.lbl.hl { border-color: var(--accent); color: #fff; }

.info-panel { position: absolute; top: 60px; right: 16px; width: 330px; max-height: calc(100vh - 90px);
  overflow: auto; background: var(--panel); border: 1px solid #4a3f5e; border-radius: 12px;
  padding: 16px 18px; font-size: 13.5px; line-height: 1.55; z-index: 10;
  transform: translateX(360px); transition: transform .25s ease; }
.info-panel.visible { transform: none; }
.ip-title { font-size: 15.5px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.ip-link { margin-top: 10px; }
.ip-link a { color: #8fd0ff; }

.home { max-width: 1080px; margin: 0 auto; padding: 34px 20px 60px; }
.home h1 { color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; margin-top: 22px; }
.card { display: block; text-decoration: none; color: inherit; background: #1a1626;
  border: 1px solid #3a324e; border-radius: 14px; padding: 16px 18px; transition: .15s; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .n { color: #8a7aa0; font-size: 12px; }
.card .t { font-size: 15.5px; font-weight: 600; margin: 3px 0 6px; color: #efe9f5; }
.card .d { font-size: 12.5px; opacity: .7; line-height: 1.45; }

.rot-toggle { position: absolute; bottom: 62px; left: 18px; z-index: 7;
  padding: 8px 14px; border-radius: 10px; border: 1px solid #6a5a86;
  background: #241d33; color: #efe9f5; cursor: pointer; font-size: 13px; font-family: inherit; }
.rot-toggle:hover { border-color: var(--accent); }
.rot-toggle.off { color: #9a8fb0; border-color: #4a3f5e; }