/* 動画研修システム — 動画のスライドと同じ配色（濃紺＋強調のテラコッタ） */
:root { --bg:#F6F4EF; --ink:#1F2933; --main:#1E3A5F; --acc:#C0582F; --line:#D5DBE3; --muted:#5B6573;
  --ok:#2E7D4F; --warn:#B7791F; --card:#fff; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.7 "BIZ UDPGothic","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; }
a { color:var(--main); }
h1 { font-size:1.5rem; color:var(--main); margin:.6em 0 .4em; line-height:1.4; }
h2 { font-size:1.15rem; color:var(--main); margin:0 0 .5em; }
.top { background:var(--main); color:#fff; padding:10px 16px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; }
.top a, .top .link { color:#fff; }
.brand { font-weight:700; text-decoration:none; font-size:1.05rem; }
.badge { background:var(--acc); color:#fff; font-size:.75rem; padding:1px 8px; border-radius:10px; vertical-align:middle; }
.top nav { display:flex; gap:14px; align-items:center; font-size:.9rem; }
.inline { display:inline; margin:0; }
.link { background:none; border:0; padding:0; font:inherit; text-decoration:underline; cursor:pointer; }
.wrap { max-width:860px; margin:0 auto; padding:8px 16px 40px; }
.wrap.wide { max-width:1200px; }
.foot { text-align:center; color:var(--muted); font-size:.8rem; padding:20px 16px 30px; }
.card { background:var(--card); border-radius:12px; padding:16px 18px; margin:12px 0; border:1px solid var(--line); }
.card.narrow { max-width:440px; margin:24px auto; }
.muted { color:var(--muted); font-size:.92rem; }
.flash { padding:10px 14px; border-radius:8px; margin:10px 0; background:#E8F3EC; color:#1F5135; }
.flash.ng { background:#FBEAE5; color:#8A2D14; }
.flash.info { background:#E7EEF7; color:var(--main); }
.form label { display:block; margin:12px 0; font-weight:700; font-size:.95rem; }
.form input:not([type=checkbox]), .form select, .form textarea { display:block; width:100%; margin-top:4px; padding:10px 12px; font:inherit;
  border:1px solid #AEB8C5; border-radius:8px; background:#fff; }
.form textarea { min-height:90px; }
.btn { display:inline-block; background:var(--main); color:#fff; border:0; border-radius:8px; padding:11px 22px; font:inherit; font-weight:700;
  cursor:pointer; text-decoration:none; }
.btn:disabled { background:#A9B3C0; cursor:not-allowed; }
.btn.sub { background:#fff; color:var(--main); border:2px solid var(--main); padding:9px 18px; }
.btn.small { padding:5px 12px; font-size:.85rem; }
.btn.danger { background:#fff; color:var(--acc); border:2px solid var(--acc); }

/* 動画一覧 */
.videos { list-style:none; padding:0; margin:0; }
.video a { display:block; text-decoration:none; color:inherit; }
.vtitle { font-weight:700; font-size:1.1rem; color:var(--main); }
.vmeta { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:4px; font-size:.9rem; color:var(--muted); align-items:center; }
.st { font-weight:700; padding:1px 10px; border-radius:10px; font-size:.85rem; }
.st.done { background:#E3F1E8; color:var(--ok); }
.st.doing { background:#FDF3E1; color:var(--warn); }
.st.todo { background:#FBEAE5; color:var(--acc); }
.st.big { font-size:1.05rem; display:inline-block; }

/* 視聴ページ */
.player { background:#000; border-radius:12px; overflow:hidden; }
.player video { display:block; width:100%; height:auto; max-height:70vh; }
.bar { height:10px; background:#E3E7EC; border-radius:6px; overflow:hidden; }
.bar div { height:100%; background:var(--main); transition:width .4s; }
.status form { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-top:8px; }
.check { font-weight:700; display:flex; gap:8px; align-items:center; }
.check input { width:20px; height:20px; }

/* 管理画面 */
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.tabs a { padding:6px 14px; border-radius:8px; text-decoration:none; background:#fff; border:1px solid var(--line); }
.tabs a.on { background:var(--main); color:#fff; border-color:var(--main); }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.kpi .n { font-size:1.8rem; font-weight:700; color:var(--main); line-height:1.2; }
.kpi .l { font-size:.85rem; color:var(--muted); }
.tbl-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; background:#fff; font-size:.92rem; }
th, td { border-bottom:1px solid var(--line); padding:8px 10px; text-align:left; white-space:nowrap; }
th { background:#EEF1F5; color:var(--main); font-weight:700; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.rate { display:inline-block; min-width:48px; text-align:right; }
.rate.low { color:var(--acc); font-weight:700; }
.rate.full { color:var(--ok); font-weight:700; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:640px) { .grid2 { grid-template-columns:1fr; } h1 { font-size:1.3rem; } }
code, .mono { font-family:Consolas,monospace; background:#EEF1F5; padding:1px 6px; border-radius:4px; }
.pwlist td { font-family:Consolas,monospace; font-size:1rem; }