/* Top Gun To-Do. Header: Top Gun Transfer 1.2.4. Body: Vault hub / books light look. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 13px/1.38 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; background: #eceef2; color: #393a3d; }
a { color: #0077c5; }
button, input { font: inherit; }
.tg-app-header { background: #161616; border-bottom: 1px solid #3d3d3d; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: #e8e8e8; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand img { width: 36px; height: 36px; display: block; flex-shrink: 0; }
.brand h1 { margin: 0; font: 400 26px/1 "Bebas Neue", "Oswald", system-ui, sans-serif; letter-spacing: .04em; color: #e8e8e8; }
.brand .tag { color: #9a9a9a; font: 12px "Oswald", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; display: block; margin-top: 3px; }
.header-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.header-meta .tag { color: #9a9a9a; font: 12px "Oswald", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; margin-top: 0; }
.header-meta .commit { font: 10px "Oswald", system-ui, sans-serif; color: #6f6f6f; letter-spacing: .04em; margin-left: -8px; }
#check-updates, #update-status, #update-action, .hlink { font: 12px "Oswald", system-ui, sans-serif; color: #9a9a9a; letter-spacing: .08em; text-transform: none; }
#update-status { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[hidden] { display: none !important; }
#check-updates, #update-action, .hlink { background: transparent; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#check-updates:hover, #update-action:hover, .hlink:hover { color: #c8c8c8; }
#sign-out-btn { background: #3a3a3a; border: 1px solid #3d3d3d; color: #e8e8e8; padding: 6px 12px; border-radius: 4px; cursor: pointer; font: 12px "Segoe UI", system-ui, sans-serif; }
#sign-out-btn:hover { background: #484848; }

main { max-width: 1240px; margin: 0 auto; padding: 18px 24px 40px; }
.page-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; }
.page-head h2 { margin: 0; font-size: 18px; font-weight: 600; color: #2b2c2e; }
.muted { color: #6b6c72; } .small { font-size: 12px; }
.live { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6; display: inline-block; }
.dot.on { background: #2ca01c; } .dot.off { background: #c44; }
.summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.chip { background: #fff; border: 1px solid #dcdfe4; border-radius: 6px; padding: 8px 12px; min-width: 110px; }
.chip b { display: block; font: 700 22px/1.1 "Oswald", system-ui, sans-serif; color: #2b2c2e; }
.chip span { font: 600 11px "Segoe UI", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6b6c72; }
.chip.rj { border-color: #c90; background: #fff8e6; } .chip.rj b { color: #8a5a00; }
.groups { columns: 2 520px; column-gap: 16px; }
.group { break-inside: avoid; background: #fff; border: 1px solid #dcdfe4; border-radius: 6px; margin: 0 0 16px; overflow: hidden; }
.group h3 { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #dcdfe4; background: #f7f8fa; font: 600 12px "Segoe UI", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #2b2c2e; }
.count { margin-left: auto; font: 500 12px "Oswald", system-ui, sans-serif; color: #6b6c72; letter-spacing: .04em; }
.rjcount { font: 600 11px "Segoe UI", system-ui, sans-serif; color: #8a5a00; background: #fff1cc; border: 1px solid #f0d58a; border-radius: 10px; padding: 1px 8px; letter-spacing: .02em; text-transform: none; }
ul.items { list-style: none; margin: 0; padding: 0; }
.item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 10px 14px; border-top: 1px solid #eff1f4; cursor: grab; background: #fff; touch-action: pan-y; }
.item:first-child { border-top: 0; }
.item.rj { background: #fffaf0; box-shadow: inset 3px 0 0 #c90; }
.item.dragging { opacity: .5; cursor: grabbing; }
.item.drop-before { box-shadow: inset 0 2px 0 #0077c5; }
.grip { color: #b5b9c0; font-size: 12px; line-height: 18px; user-select: none; cursor: grab; }
.task { font-size: 14px; color: #2b2c2e; font-weight: 500; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: #6b6c72; }
.meta .w b { color: #393a3d; font-weight: 600; }
.item.rj .meta .w b { color: #8a5a00; }
.status { margin-top: 3px; font-size: 12px; color: #6b6c72; }
.links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.links a { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signin { max-width: 340px; margin: 56px auto; background: #fff; border: 1px solid #dcdfe4; border-radius: 6px; padding: 20px; }
.signin h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.signin label { display: block; font-size: 12px; color: #6b6c72; margin: 10px 0 4px; }
.signin input { width: 100%; padding: 7px 9px; border: 1px solid #c4c8cf; border-radius: 4px; font-size: 16px; }
.signin button { margin-top: 14px; background: #2b2c2e; color: #fff; border: 0; border-radius: 4px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.err { color: #c44; font-size: 12px; margin-top: 8px; }
@media (max-width: 600px) {
  main { padding: 12px 10px 32px; }
  .brand h1 { font-size: 22px; }
  .header-meta { margin-left: 0; width: 100%; gap: 10px; }
  .chip { min-width: 0; flex: 1; padding: 6px 10px; }
  .groups { columns: 1; }
}
.grip { touch-action: none; padding: 0 4px; margin-left: -4px; }
@media (pointer: coarse) { .item { grid-template-columns: 22px 1fr; } .grip { font-size: 16px; } }