:root { color-scheme: light; --tm-ink: #142b4a; --tm-muted: #52647a; --tm-line: #d8e1ec; --tm-blue: #225ba9; }
* { box-sizing: border-box; }
body.tm-page { margin: 0; background: #f2f5f9; color: var(--tm-ink); font: 15px/1.55 system-ui, -apple-system, "Yu Gothic", sans-serif; }
.tm-page button, .tm-page input, .tm-page select { font: inherit; }
.tm-page button, .tm-page a { -webkit-tap-highlight-color: transparent; }
.tm-page button, .tm-page .tm-actions a { min-height: 44px; border: 1px solid var(--tm-line); border-radius: 9px; padding: 8px 13px; color: var(--tm-ink); background: white; cursor: pointer; text-decoration: none; }
.tm-page button:hover:not(:disabled), .tm-page a:hover { border-color: var(--tm-blue); }
.tm-page button:disabled { opacity: .45; cursor: default; }
.tm-page :focus-visible { outline: 3px solid #2d6bca; outline-offset: 3px; }
.tm-page input:not([type="color"]):not([type="checkbox"]), .tm-page select { width: 100%; min-height: 44px; border: 1px solid #bccbdc; border-radius: 8px; background: #fff; color: var(--tm-ink); padding: 8px 10px; font-size: 16px; }
.tm-page .tm-primary { background: var(--tm-blue); color: white; border-color: var(--tm-blue); }
.tm-page .tm-danger { color: #a52c38; }
.tm-page .site-header { border-bottom: 1px solid var(--tm-line); background: #fff; }
.tm-header-inner { max-width: 1344px; padding: 16px 24px; margin: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tm-brand { text-decoration: none; color: var(--tm-ink); font-size: 19px; font-weight: 800; }
.tm-brand small { font-size: 11px; margin-left: 8px; color: var(--tm-muted); }
.tm-nav { display: flex; gap: 16px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.tm-nav a, .tm-languages a { color: var(--tm-blue); text-decoration: none; }
.tm-languages { display: flex; gap: 8px; }
.tm-languages [aria-current] { font-weight: 800; text-decoration: underline; }
.tm-main { max-width: 1344px; margin: auto; padding: 32px 24px; }
.tm-hero { margin-bottom: 20px; }
.tm-hero h1 { margin: 4px 0 8px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.04em; }
.tm-hero p { margin: 0; color: var(--tm-muted); }
.tm-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .13em; color: var(--tm-muted); }
.tm-save-status { color: #296947; font-size: 13px; font-weight: 600; }
.tm-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.tm-title-input { flex: 1; min-width: 200px; max-width: 560px; display: grid; gap: 4px; font-size: 13px; }
.tm-toolbar > .tm-actions { margin-left: auto; }
.tm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-category-bar { display: flex; gap: 12px; align-items: start; flex-wrap: wrap; margin-bottom: 16px; }
.tm-tabs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.tm-tabs button { font-weight: 700; overflow-wrap: anywhere; max-width: 240px; }
.tm-tabs [aria-pressed="true"] { background: var(--tm-ink); color: #fff; border-color: var(--tm-ink); }
.tm-board, .tm-pool { background: #fff; border: 1px solid var(--tm-line); border-radius: 16px; overflow: clip; box-shadow: 0 3px 16px #142b4a05; }
.tm-board-head, .tm-pool-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tm-board h2, .tm-pool h2 { margin: 0; font-size: 23px; overflow-wrap: anywhere; }
.tm-board-head > div:first-child { min-width: 0; flex: 1; }
.tm-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; background: #eef4fc; color: #354e70; font-size: 13px; }
.tm-selection > div:first-child { flex: 1; min-width: 160px; }
.tm-selection p { margin: 3px 0 0; }
.tm-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); border-top: 1px solid var(--tm-line); }
.tm-rank { background: var(--tier-color); display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: 8px 5px; }
.tm-page .tm-rank-name { border: none; background: transparent; font-size: 25px; font-weight: 800; width: 100%; overflow-wrap: anywhere; padding: 5px; }
.tm-drop { display: flex; gap: 7px; align-content: center; flex-wrap: wrap; padding: 10px; min-height: 112px; }
.tm-page .tm-card { display: flex; flex-direction: column; align-items: center; width: 82px; min-height: 100px; padding: 5px 3px; border: 1px solid transparent; background: #f7f9fc; border-radius: 9px; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tm-card img { width: 64px; height: 64px; object-fit: contain; pointer-events: none; }
.tm-card span { font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; width: 100%; text-align: center; }
.tm-page .tm-card.is-selected { border-color: var(--tm-blue); box-shadow: 0 0 0 2px #225ba944; background: #eaf2ff; }
.tm-placeholder { display: grid; place-items: center; height: 64px; color: #8292a7; font-size: 30px !important; }
.tm-page .tm-append { width: 64px; background: transparent; border: 1px dashed #cbd5e2; color: #647997; display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; font-size: 22px; padding: 4px; }
.tm-append span { font-size: 10px; }
.tm-append:disabled { opacity: .6 !important; }
.tm-board-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--tm-line); padding: 12px 20px; color: var(--tm-muted); }
.tm-pool { margin-top: 22px; }
.tm-pool h2 small { font-size: 15px; font-weight: 400; color: var(--tm-muted); }
.tm-filters { display: flex; gap: 8px; align-items: end; }
.tm-filters label { display: grid; gap: 3px; font-size: 12px; }
.tm-filters input { min-width: 200px; }
.tm-pool-cards { padding: 0 20px 20px; display: flex; flex-wrap: wrap; gap: 8px; min-height: 100px; }
.tm-empty { color: var(--tm-muted); font-size: 13px; }
.tm-bottom-actions { display: flex; justify-content: end; flex-wrap: wrap; gap: 8px; margin: 20px 0 10px; }
.tm-local-note, .tm-footer { font-size: 12px; color: var(--tm-muted); }
.tm-footer { max-width: 1296px; margin: 0 auto; padding: 12px 24px 32px; border-top: 1px solid var(--tm-line); }
.tm-status { min-height: 22px; margin: 0 0 12px; font-size: 13px; color: #405a7d; }
.tm-warning { padding: 8px 20px; color: #905c16; }
.tm-page dialog { width: min(540px, calc(100% - 28px)); max-height: 90dvh; overflow-y: auto; border: 1px solid var(--tm-line); padding: 24px; border-radius: 16px; color: var(--tm-ink); box-shadow: 0 12px 80px #142b4a33; }
.tm-page dialog::backdrop { background: #142b4a77; }
.tm-page dialog h2 { font-size: 21px; margin: 0 0 16px; }
.tm-page dialog .tm-actions { margin-top: 20px; justify-content: end; }
.tm-page dialog form > label { display: grid; gap: 8px; }
.tm-export-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tm-export-choices label { overflow-wrap: anywhere; }
.tm-export-choices input, .tm-checkbox input { width: 20px; height: 20px; flex-shrink: 0; }
.tm-export-choices label, .tm-page dialog .tm-checkbox { display: flex; gap: 8px; align-items: center; min-height: 44px; }
.tm-checkbox { margin-top: 16px; }
.tm-image-preview { display: block; width: 100%; height: auto; border: 1px solid var(--tm-line); border-radius: 6px; }
.tm-sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-dragging { opacity: .35; }
.tm-page .is-drop-target { outline: 3px dashed var(--tm-blue); outline-offset: -3px; background: #eaf2ff; }
.tm-touch-dragging { overflow: hidden; }
.tm-touch-dragging .tm-card { touch-action: none; }
@media (max-width: 640px) {
  .tm-header-inner { padding: 12px 14px; gap: 8px; }
  .tm-brand { font-size: 17px; }
  .tm-nav { margin-left: 0; font-size: 12px; gap: 12px; width: 100%; }
  .tm-languages { margin-left: auto; }
  .tm-main { padding: 22px 12px; }
  .tm-toolbar { gap: 10px; }
  .tm-title-input { min-width: 100%; }
  .tm-toolbar > .tm-actions { margin-left: 0; }
  .tm-actions { gap: 5px; }
  .tm-actions button { font-size: 12px; padding: 8px 10px; }
  .tm-category-bar { gap: 8px; }
  .tm-tabs { min-width: 100%; }
  .tm-tabs button { flex: 1; min-width: 60px; padding: 8px 7px; font-size: 13px; }
  .tm-board-head, .tm-pool-head { padding: 14px 12px; }
  .tm-board-head > .tm-actions { width: 100%; }
  .tm-board-head > .tm-actions .tm-primary { margin-left: auto; }
  .tm-row { grid-template-columns: 78px minmax(0, 1fr); }
  .tm-rank { padding: 6px 3px; }
  .tm-page .tm-rank-name { font-size: 20px; }
  .tm-drop { padding: 7px; gap: 4px; }
  .tm-page .tm-card { width: 64px; min-height: 86px; padding: 4px 2px; }
  .tm-card img { width: 52px; height: 52px; }
  .tm-card span { font-size: 10px; }
  .tm-page .tm-append { width: 48px; }
  .tm-selection { padding: 10px 12px; }
  .tm-pool-cards { padding: 0 10px 14px; gap: 5px; }
  .tm-filters { width: 100%; }
  .tm-filters label:first-child { flex: 1; min-width: 0; }
  .tm-filters input { min-width: 0; }
  .tm-filters select { max-width: 130px; }
  .tm-board-foot { padding: 10px 12px; }
  .tm-page dialog { padding: 20px; }
  .tm-footer { padding-left: 14px; padding-right: 14px; }
}

.tm-footer .footer-links { display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; margin:16px 0; }
.tm-footer .footer-inner { max-width:1280px; margin:auto; }
.tm-footer .footer-inner>div>span { margin-left:12px; }