:root{ --coral:#FF7A4D; --navy:#1E2A4A; --cream:#FAF4E6; --ink:#21262e; --muted:#5d6b7a; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:-apple-system,"Helvetica Neue","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; color:var(--ink); line-height:1.55; }
a{ color:var(--coral); }

/* Simple centered card pages (thanks / confirm / unsubscribe) */
.center{ min-height:100vh; background:var(--navy); display:flex; align-items:center; justify-content:center; padding:24px; }
.center .card{ background:#fff; max-width:480px; width:100%; border-radius:16px; padding:40px 32px; text-align:center; }
.center .crane{ font-size:34px; }
.center h1{ color:var(--navy); font-size:26px; margin:8px 0 6px; }
.center p{ color:var(--muted); font-size:16px; }
.center .btn{ display:inline-block; background:var(--coral); color:#fff; font-weight:800; text-decoration:none; padding:14px 24px; border-radius:12px; margin-top:14px; }
.center a.handle{ color:var(--coral); font-weight:700; text-decoration:none; }

/* Admin */
.admin{ background:#f4f1e9; min-height:100vh; }
.admin .bar{ background:var(--navy); color:var(--cream); padding:14px 22px; display:flex; gap:18px; align-items:center; }
.admin .bar a{ color:#cdd6e4; text-decoration:none; font-weight:600; font-size:15px; }
.admin .bar a.brand{ color:var(--cream); font-weight:800; font-size:17px; }
.admin .bar a:hover{ color:var(--coral); }
.admin .wrap{ max-width:1000px; margin:0 auto; padding:24px 22px 60px; }
.admin h1{ color:var(--navy); font-size:24px; margin:8px 0 18px; }
.admin h2{ color:var(--navy); font-size:16px; text-transform:uppercase; letter-spacing:1px; margin:26px 0 10px; }

.cards{ display:flex; gap:14px; flex-wrap:wrap; }
.stat{ background:#fff; border-radius:12px; padding:16px 20px; min-width:120px; flex:1; border-left:5px solid var(--coral); }
.stat .n{ font-size:30px; font-weight:800; color:var(--navy); }
.stat .l{ color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.5px; }

table.grid{ width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; font-size:14.5px; }
table.grid th{ background:var(--navy); color:var(--cream); text-align:left; padding:10px 12px; font-size:13px; }
table.grid td{ padding:10px 12px; border-bottom:1px solid #eee; vertical-align:top; }
table.grid tr:nth-child(even) td{ background:#faf7f0; }

.pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; }
.pill.published{ background:#e6f4ea; color:#1e7a3d; }
.pill.rendered{ background:#fff1e8; color:#c2510a; }
.pill.archived,.pill.unsubscribed{ background:#eee; color:#777; }
.pill.confirmed{ background:#e6f4ea; color:#1e7a3d; }
.pill.pending{ background:#fdf3d6; color:#9a7b12; }
.tag{ display:inline-block; background:#eef1f6; color:#41506a; border-radius:6px; padding:1px 7px; font-size:12px; margin:1px; }

.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.filters input, .filters select{ padding:8px 10px; border:1px solid #d8d2c2; border-radius:8px; font-size:14px; }
.btn-coral{ background:var(--coral); color:#fff; border:0; border-radius:8px; padding:8px 16px; font-weight:700; cursor:pointer; text-decoration:none; }
.btn-ghost{ background:#fff; color:var(--navy); border:1px solid #d8d2c2; border-radius:8px; padding:8px 14px; text-decoration:none; font-weight:600; }
.flash{ background:#e6f4ea; color:#1e7a3d; padding:10px 14px; border-radius:8px; margin-bottom:14px; }
.flash-error{ background:#fdeaea; color:#b3261e; }
.admin .bar .who{ margin-left:auto; color:#8b97ab; font-size:13px; }
.admin .bar .signout{ margin:0; }
.admin .bar .signout button{ background:transparent; border:1px solid #43506b; color:#cdd6e4; border-radius:8px; padding:6px 12px; font-weight:600; font-size:14px; cursor:pointer; }
.admin .bar .signout button:hover{ color:var(--coral); border-color:var(--coral); }
.login{ max-width:380px; margin:64px auto; }
.login-card{ background:#fff; border-radius:16px; padding:32px 28px; box-shadow:0 4px 20px rgba(30,42,74,.12); }
.login-card h1{ text-align:center; margin:0 0 4px; }
.login-card p{ text-align:center; color:var(--muted); margin:0 0 18px; }
.login-card .btn-coral{ width:100%; padding:12px; font-size:15px; margin-top:8px; }
.field{ margin:12px 0; }
.field label{ display:block; font-weight:700; color:var(--navy); margin-bottom:4px; font-size:14px; }
.field input, .field select, .field textarea{ width:100%; padding:10px 12px; border:1px solid #d8d2c2; border-radius:8px; font-size:15px; }

/* ── Mobile (≤640px): wrap the nav/filters, turn wide tables into stacked cards ── */
@media (max-width: 640px){
  .admin .bar{ flex-wrap:wrap; gap:10px 14px; padding:12px 16px; }
  .admin .bar a.brand{ flex-basis:100%; }
  .admin .bar .who{ margin-left:0; }
  .admin .wrap{ padding:18px 14px 56px; }
  .admin h1{ font-size:21px; }

  .filters input, .filters select{ flex:1 1 100%; width:100%; }

  /* long strings (URLs, emails) shouldn't push the page wide */
  table.grid td, table.grid th{ word-break:break-word; }

  /* Multi-column data tables (.stack) → one card per row. Header row is a leading
     <tr> of all <th> (no <td>); key-value show tables are plain .grid (untouched). */
  table.grid.stack{ background:transparent; border-radius:0; font-size:14px; }
  table.grid.stack tr:has(th):not(:has(td)){ display:none; }   /* hide header row only */
  table.grid.stack tr{ display:block; background:#fff; border:1px solid #ece6d6;
    border-radius:10px; margin-bottom:12px; padding:6px 14px; }
  table.grid.stack td{ display:block; padding:7px 0; border-bottom:1px solid #f1ece0; background:transparent; }
  table.grid.stack tr td:last-child{ border-bottom:0; }
  table.grid.stack td::before{ content:attr(data-label); display:block; margin-bottom:2px;
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  table.grid.stack td[data-label=""]::before{ content:none; }   /* action cells: no label */
  table.grid.stack td.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  table.grid.stack td.actions form{ margin:0; }
}

/* ── Public video catalog ───────────────────────────────────────────────── */
.site-nav{ background:var(--navy); display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; flex-wrap:wrap; gap:10px; }
.site-nav .brand img{ height:26px; display:block; }
.site-nav nav{ display:flex; gap:18px; }
.site-nav nav a{ color:#cdd6e4; text-decoration:none; font-weight:600; font-size:15px; }
.site-nav nav a:hover{ color:var(--coral); }

.catalog, .watch{ max-width:1080px; margin:0 auto; padding:24px 22px 50px; }
.catalog-head{ text-align:center; margin:18px 0 26px; }
.catalog-head h1{ color:var(--navy); font-size:34px; line-height:1.12; letter-spacing:-0.5px; margin:0; }
.catalog-head h1 .hl{ color:var(--coral); }
.catalog-head .sub{ color:var(--muted); font-size:16px; max-width:620px; margin:12px auto 0; }

.catalog-filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:26px; }
.catalog-filters input, .catalog-filters select{ padding:10px 12px; border:1px solid #d8d2c2;
  border-radius:10px; font-size:15px; }
.catalog-filters button{ background:var(--coral); color:#fff; border:0; border-radius:10px;
  padding:10px 20px; font-weight:700; cursor:pointer; }
.catalog-filters .reset{ align-self:center; color:var(--muted); font-weight:600; text-decoration:none; }

.catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
.vcard{ display:block; text-decoration:none; color:inherit; background:#fff; border-radius:14px;
  overflow:hidden; border:1px solid #ece6d6; transition:transform .12s ease, box-shadow .12s ease; }
.vcard:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(30,42,74,.14); }
.vposter{ position:relative; aspect-ratio:9/16; background:linear-gradient(155deg,#26345c,var(--navy));
  display:flex; align-items:center; justify-content:center; padding:18px; text-align:center; }
.vposter-jp{ color:var(--cream); font-size:26px; font-weight:800; line-height:1.3;
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; }
.vplay{ position:absolute; bottom:12px; right:14px; width:38px; height:38px; border-radius:50%;
  background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:15px; padding-left:3px; }
.vcard-body{ padding:12px 14px 16px; }
.vcard-body h3{ margin:0 0 6px; color:var(--navy); font-size:16px; line-height:1.25; }
.vphrase{ color:var(--muted); font-size:13.5px; margin:0 0 8px; }
.vmeta{ margin:0; display:flex; flex-wrap:wrap; gap:5px; }
.chip{ display:inline-block; background:var(--navy); color:var(--cream); border-radius:999px;
  padding:2px 10px; font-size:12px; font-weight:700; text-decoration:none; }
.chip.ghost{ background:#eef1f6; color:#41506a; font-weight:600; }

.empty{ text-align:center; color:var(--muted); padding:40px 0; }

/* Difficulty badges */
.level-badge{ display:inline-block; border-radius:999px; padding:2px 10px; font-size:12px;
  font-weight:800; letter-spacing:.3px; color:#fff; }
.level-survival{ background:#1e7a3d; }      /* green  — day-one */
.level-beginner{ background:#2f6df0; }      /* blue   — simple phrases */
.level-intermediate{ background:#7a3df0; }  /* purple — situational */
.level-badge-link{ text-decoration:none; }
.vposter-level{ position:absolute; top:10px; left:10px; }

/* Watch (show) page */
.watch .back{ display:inline-block; color:var(--muted); text-decoration:none; font-weight:600;
  margin:6px 0 14px; }
.watch-grid{ display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:28px; align-items:start; }
.watch-info h1{ color:var(--navy); font-size:26px; margin:0 0 8px; }
.watch-info .hook{ color:var(--ink); font-size:16px; margin:0 0 16px; }
.phrase-stack{ background:#faf7f0; border-left:5px solid var(--coral); border-radius:10px;
  padding:14px 16px; margin:0 0 16px; }
.phrase-stack .jp{ display:block; color:var(--navy); font-size:24px; font-weight:800;
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; }
.phrase-stack .romaji{ display:block; color:var(--coral); font-weight:700; margin-top:2px; }
.phrase-stack .en{ display:block; color:var(--muted); margin-top:2px; }
.watch-info .meta{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.watch-links{ margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.watch-btn{ display:inline-block; background:#fff; color:var(--navy); border:1px solid #d8d2c2;
  border-radius:10px; padding:9px 16px; text-decoration:none; font-weight:700; font-size:14px; }
.watch-btn:hover{ border-color:var(--coral); color:var(--coral); }
.watch-info .answer{ font-size:17px; color:var(--ink); margin:0 0 14px; }
.watch-info .answer strong[lang=ja]{ color:var(--navy); }
.related, .transcript{ margin-top:38px; }
.related h2, .cta-block h2, .transcript h2{ color:var(--navy); font-size:18px; text-transform:uppercase;
  letter-spacing:1px; margin:0 0 14px; }
.transcript-list{ list-style:none; padding:0; margin:0; counter-reset:t; }
.transcript-list li{ padding:12px 0 12px 40px; border-bottom:1px solid #f0ece1; position:relative; }
.transcript-list li::before{ counter-increment:t; content:counter(t); position:absolute; left:0; top:12px;
  width:26px; height:26px; border-radius:50%; background:var(--navy); color:var(--cream);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.transcript-list .t-jp{ display:block; color:var(--navy); font-size:18px; font-weight:700;
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif; }
.transcript-list .t-romaji{ display:block; color:var(--coral); font-weight:600; font-size:14px; }
.transcript-list .t-en{ display:block; color:var(--muted); font-size:14px; }

/* The reel embed: responsive 9:16 frame */
.reel{ position:relative; width:100%; aspect-ratio:9/16; background:var(--navy);
  border-radius:14px; overflow:hidden; }
.reel iframe{ position:absolute; inset:0; width:100%; height:100%; }
.reel-fallback-inner{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; color:var(--cream); text-align:center; padding:18px; }
.reel-fallback-emoji{ font-size:40px; }

/* Email CTA block (shared with funnel styling) */
.cta-block{ background:var(--navy); color:var(--cream); border-radius:16px; padding:30px 26px;
  margin-top:40px; text-align:center; }
.cta-block h2{ color:var(--cream); }
.cta-block p{ color:#cdd6e4; margin:0 auto 14px; max-width:460px; }
.cta-block .micro{ color:#9aa6b4; font-size:13px; margin-top:10px; }
.capture-form{ max-width:420px; margin:0 auto; }
.capture-form input[type=email]{ width:100%; font-size:16px; padding:14px 16px; border:2px solid #e3dcc9;
  border-radius:12px; outline:none; margin-bottom:10px; -webkit-appearance:none; }
.capture-form input[type=email]:focus{ border-color:var(--coral); }
.capture-form button{ width:100%; font-size:16px; font-weight:800; color:#fff; background:var(--coral);
  border:0; border-radius:12px; padding:15px; cursor:pointer; }

.site-foot{ text-align:center; color:#9aa6b4; font-size:13px; padding:26px 18px; }
.site-foot a{ color:var(--coral); text-decoration:none; font-weight:700; }

@media (max-width: 720px){
  .catalog-head h1{ font-size:27px; }
  .watch-grid{ grid-template-columns:1fr; }
  .watch-player{ max-width:360px; margin:0 auto; }
  .catalog-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .vposter-jp{ font-size:20px; }
}