/* NihongoTube — nutzt die pyground-Design-Tokens aus redesign.css mit Fallbacks. */
.nh-page { --nh-surface: var(--surface, #1c1a24); --nh-border: rgba(255,255,255,.08); }

.nh-back { display: inline-block; margin-bottom: .6rem; font-size: .9rem; }
.nh-lead { color: var(--muted, #9aa1b2); margin: .3rem 0 1rem; }

.nh-form { display: flex; gap: 8px; margin-bottom: .5rem; flex-wrap: wrap; }
.nh-form input[type="url"] { flex: 1; min-width: 240px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--nh-border); background: var(--nh-surface); color: inherit; font-size: .95rem; }
.nh-status { font-size: .85rem; color: var(--muted, #9aa1b2); min-height: 1.4em; margin-bottom: .6rem; }
.nh-status.error { color: #ff7a7d; }

.nh-playerwrap { position: relative; width: 100%; aspect-ratio: 16/9; background: #000;
  border-radius: 10px; overflow: hidden; }
.nh-playerwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.nh-playerhint { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--muted, #9aa1b2); font-size: .95rem; padding: 1rem; text-align: center; }

.nh-nowline { margin: 10px 0 4px; padding: 12px 14px; background: var(--nh-surface);
  border: 1px solid var(--nh-border); border-radius: 10px; min-height: 52px;
  font-size: 1.25rem; line-height: 1.6; }
.nh-nowline .nh-de { font-size: .85rem; color: var(--muted, #9aa1b2); margin-top: 4px; }

.nh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 14px; margin-top: 10px; }
@media (max-width: 900px) {
  .nh-grid { grid-template-columns: 1fr; }
  .nh-panel { position: static; order: -1; max-height: none; }
}

.nh-subheader { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.nh-subheader h2 { font-size: .95rem; margin: 0; color: var(--muted, #9aa1b2); font-weight: 600; }
.nh-subheader label { font-size: .8rem; color: var(--muted, #9aa1b2); cursor: pointer; user-select: none; }

.nh-subs { max-height: 56vh; overflow-y: auto; border: 1px solid var(--nh-border);
  border-radius: 10px; background: var(--nh-surface); scrollbar-width: thin; }
.nh-line { padding: 10px 12px; border-bottom: 1px solid var(--nh-border); cursor: pointer;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
.nh-line:last-child { border-bottom: none; }
.nh-line:hover { background: rgba(255,255,255,.04); }
.nh-line.active { background: rgba(45,212,191,.10); border-left: 3px solid var(--accent, #2dd4bf); padding-left: 9px; }
.nh-line .nh-time { color: var(--accent, #2dd4bf); font-size: .75rem; padding-top: 5px;
  font-variant-numeric: tabular-nums; }
.nh-line .nh-jp { font-size: 1.05rem; line-height: 1.7; }
.nh-line .nh-de { font-size: .8rem; color: var(--muted, #9aa1b2); margin-top: 2px; min-height: 1em; }

.nh-tok { border-radius: 4px; }
.nh-tok.clickable { cursor: pointer; }
.nh-tok.clickable:hover { background: var(--accent, #2dd4bf); color: #04342c; }
.nh-tok.selected { background: var(--accent, #2dd4bf); color: #04342c; }

.nh-panel { background: var(--nh-surface); border: 1px solid var(--nh-border); border-radius: 10px;
  padding: 14px; align-self: start; position: sticky; top: 80px; max-height: calc(100vh - 100px);
  overflow-y: auto; scrollbar-width: thin; }
.nh-panel h2 { margin: 0 0 6px; font-size: .95rem; color: var(--muted, #9aa1b2); font-weight: 600; }
.nh-panel-empty { color: var(--muted, #9aa1b2); font-size: .88rem; line-height: 1.6; }
.nh-w-head { font-size: 1.9rem; margin: 6px 0 0; line-height: 1.3; }
.nh-w-reading { color: var(--accent, #2dd4bf); font-size: 1rem; margin-bottom: 2px; }
.nh-w-glossde { font-size: .95rem; margin: 8px 0; padding: 8px 10px;
  background: rgba(255,255,255,.05); border-radius: 8px; }
.nh-w-glossde b { color: var(--accent, #2dd4bf); font-weight: 600; font-size: .72rem;
  display: block; text-transform: uppercase; letter-spacing: .04em; }
.nh-badge { display: inline-block; font-size: .74rem; padding: 3px 9px; border-radius: 999px;
  margin: 3px 4px 3px 0; }
.nh-badge.neutral { background: #2c3242; color: #b8c0d4; }
.nh-badge.polite { background: #14432c; color: #7ee2a8; }
.nh-badge.formal { background: #16324f; color: #7db8f7; }
.nh-badge.casual { background: #4a3413; color: #f7c168; }
.nh-badge.danger { background: #4d1a1c; color: #ff8d90; }
.nh-badge.info { background: #2c3242; color: #9aa1b2; }
.nh-sense { border-top: 1px solid var(--nh-border); padding: 8px 0; font-size: .88rem; }
.nh-sense .nh-pos { color: var(--muted, #9aa1b2); font-size: .76rem; }
.nh-loading { color: var(--muted, #9aa1b2); font-style: italic; font-size: .88rem; }

.nh-examples { margin-top: .4rem; font-size: .85rem; color: var(--muted, #9aa1b2); }
.nh-examples a { cursor: pointer; }