/* =====================================================================
   動画編集ハーネス テロップカタログ（95種統合）
   骨格・配色は telop-expansion-v2 の様式に統一。
   01〜35 は元モックのCSSを orig- 名前空間で忠実移植。
   ===================================================================== */

:root{
  /* LP（video-harness.app）のトークンに合わせる。既定=ライト、data-theme='dark' でダーク（LPと同じ 'vh-theme' キーで同期） */
  --bg-page:#f5faf6; --fg-page:#1b2a20; --card-border:#dbe7de; --border-strong:#c4d6c9;
  --panel:#ffffff; --panel-2:#eef5f0; --panel-3:#e6efe9; --dim:#55695c; --faint:#7b8f81; --link:#189a43;
  --accent:#189a43; --green-dark:#06210c; --green-grad:linear-gradient(135deg,#2fbf5f,#6fd23c);
  --chip-text:#1e7c47; --chip-bg:rgba(34,181,86,.12); --chip-border:rgba(34,181,86,.45); --heading:#0e1f14; --glow:rgba(34,181,86,.10);
  --nav-bg:rgba(245,250,246,.9); --strong:#0e1f14; --code-bg:#f0f6f2;
  --telop-gold:#d8a93b; /* テロップ意匠用（サイトのトンマナと切り離す） */
  color-scheme: light;
}
:root[data-theme='dark']{
  --bg-page:#0a0e0b; --fg-page:#e8f0ea; --card-border:#1c2620; --border-strong:#2a3a30;
  --panel:#0e1410; --panel-2:#0c110e; --panel-3:#121a15; --dim:#9fb3a6; --faint:#5a7263; --link:#5ce65c;
  --accent:#5ce65c; --green-dark:#06210c; --green-grad:linear-gradient(135deg,#3ddc5a,#7ee83f);
  --chip-text:#8fdba0; --chip-bg:rgba(94,230,92,.15); --chip-border:rgba(94,230,92,.4); --heading:#ffffff; --glow:rgba(94,230,92,.10);
  --nav-bg:rgba(10,14,11,.9); --strong:#ffffff; --code-bg:#070a08;
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg-page);color:var(--fg-page);
  font-family:"Noto Sans JP",sans-serif;padding:32px 20px 60px;
}
.wrap{max-width:1560px;margin:0 auto}
h1{font-size:24px;margin:0 0 6px}
.sub{color:var(--dim);font-size:13px;line-height:1.9;margin-bottom:20px;max-width:900px}

/* ---- 区分の説明 ---- */
.notice{
  background:var(--panel);border:1px solid var(--card-border);
  border-left:4px solid var(--accent);border-radius:10px;
  padding:16px 20px;font-size:13px;line-height:1.9;margin-bottom:24px;
}
.notice b{color:var(--strong)}

/* ---- 目次 ---- */
nav.toc{
  background:var(--panel);border:1px solid var(--card-border);border-radius:10px;
  padding:16px 20px;margin-bottom:32px;font-size:13px;line-height:2.1;
}
nav.toc .toc-h{color:var(--dim);font-size:12px;margin-right:8px}
nav.toc a{color:var(--link);text-decoration:none;margin-right:14px;white-space:nowrap}
nav.toc a:hover{text-decoration:underline}
nav.toc .toc-row{margin-bottom:4px}

/* ---- フィルタ ---- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{
  font-family:inherit;font-size:12px;cursor:pointer;
  background:var(--panel-2);color:var(--dim);
  border:1px solid var(--card-border);border-radius:20px;padding:7px 16px;
}
.filters button:hover{color:var(--strong);border-color:var(--link)}
.filters button.active{background:var(--green-grad);color:var(--green-dark);border-color:transparent;font-weight:700}

/* ---- セクション ---- */
section.part{margin:48px 0 0}
section.part > h2{
  font-size:19px;border-left:5px solid var(--link);padding-left:12px;margin:0 0 6px;
}
section.part > .part-sub{color:var(--dim);font-size:12.5px;margin:0 0 18px;padding-left:17px}
section.cat{margin:30px 0}
section.cat h3{font-size:15px;border-left:4px solid var(--accent);padding-left:10px;margin:0 0 14px;font-weight:700}
section.anim h2{font-size:19px;border-left:5px solid #ffb85c;padding-left:12px;margin:0 0 6px}

/* ---- グリッド（3→2→1列） ---- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:1240px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.grid{grid-template-columns:minmax(0,1fr)}}

.card{background:var(--panel);border:1px solid var(--card-border);border-radius:12px;overflow:hidden}
.card.is-hidden{display:none}
.meta{
  padding:8px 12px;font-size:11px;color:var(--dim);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--panel-2);flex-wrap:wrap;
}
.meta .name{color:var(--strong);font-size:12px;font-weight:700}
.meta .cat{color:var(--faint);font-weight:400}
.meta .font{color:var(--dim);font-size:10.5px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.bd{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;line-height:1.4}
.bd-core{background:var(--green-grad);color:var(--green-dark)}
.bd-free{background:var(--chip-bg);color:var(--chip-text);border:1px solid var(--chip-border)}
.bd-ext{background:var(--panel-3);color:var(--dim);border:1px solid var(--border-strong)}

.stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:130px;padding:18px;overflow:hidden;
}
.stage.light{background:linear-gradient(135deg,#dbe4ea,#c3cdd6)}
.stage.dark{background:linear-gradient(135deg,#1c2430,#0c1116)}
.box{position:relative;display:inline-block;max-width:94%}
.txt{font-weight:700;white-space:normal;line-height:1.5}

footer{
  margin-top:64px;padding-top:20px;border-top:1px solid var(--card-border);
  color:var(--dim);font-size:12px;line-height:1.9;
}

/* ---- アニメーション／フォント見本（v2様式） ---- */
.animgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.animcard{background:var(--panel);border:1px solid var(--card-border);border-radius:12px;padding:18px;text-align:center}
.animcard .lbl{font-size:12px;color:var(--dim);margin-bottom:10px}
.animstage{
  background:linear-gradient(135deg,#1c2430,#0c1116);border-radius:8px;
  padding:24px 10px;min-height:70px;display:flex;align-items:center;justify-content:center;
}
.fontgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.fontcard{background:var(--panel);border:1px solid var(--card-border);border-radius:10px;padding:16px}
.fontcard .fname{font-size:11px;color:var(--link);margin-bottom:8px}
.fontcard .sample{font-size:22px}

.animgrid .animcard .demo{
  font-family:'Zen Kaku Gothic New';font-weight:700;color:#fff;background:#1e3a8a;
  padding:8px 18px;border-radius:6px;display:inline-block;
}
@keyframes a-slideLeft{from{transform:translateX(-40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes a-fadeBlurBottom{from{transform:translateY(16px);filter:blur(8px);opacity:0}to{transform:translateY(0);filter:blur(0);opacity:1}}
@keyframes a-slideIn{from{transform:translateY(20px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes a-fade{from{opacity:0}to{opacity:1}}
@keyframes a-slideRight{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes a-popin{0%{transform:scale(0.3);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(0.95)}100%{transform:scale(1)}}
@keyframes a-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes a-underline{from{background-size:0% 3px}to{background-size:100% 3px}}
@keyframes a-band{0%{width:0}100%{width:100%}}
@keyframes a-jump{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}50%{transform:translateY(0)}65%{transform:translateY(-6px)}80%{transform:translateY(0)}}
@keyframes a-stamp{0%{transform:scale(2.2) rotate(-8deg);opacity:0}60%{transform:scale(0.9) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.anim-band::before{
  content:'';position:absolute;inset:0;background:#1e3a8a;border-radius:6px;
  animation:a-band 1.6s ease infinite;z-index:-1;
}
@keyframes a-blurout{from{filter:blur(12px);opacity:0}to{filter:blur(0);opacity:1}}

/* =====================================================================
   装飾パーツ（元モックでは空 span だったものを疑似要素に置換）
   親要素は必ず position:relative を持たせる。
   ===================================================================== */
[data-deco]{position:relative}
[data-deco="dot-end"]::after{
  content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#1e3a8a;
}
[data-deco="cloud"]::before{
  content:'';position:absolute;bottom:-10px;left:30px;width:14px;height:14px;
  border-radius:50%;background:inherit;
}
[data-deco="cloud"]::after{
  content:'';position:absolute;bottom:-20px;left:18px;width:8px;height:8px;
  border-radius:50%;background:inherit;
}
[data-deco="tail-tri"]::after{
  content:'';position:absolute;bottom:-14px;left:26px;width:0;height:0;
  border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid #111;
}
[data-deco="circle"]::after{
  content:'';position:absolute;inset:-12px -22px;border:4px solid #dc2626;
  border-radius:50%;transform:rotate(-3deg);pointer-events:none;
}
[data-deco="tail-sq"]::after{
  content:'';position:absolute;bottom:-14px;left:24px;width:16px;height:16px;
  background:#0c1116;border-right:2.5px solid #1e3a8a;border-bottom:2.5px solid #1e3a8a;
  transform:rotate(45deg);
}
[data-deco="skew-bar"]::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#1d4ed8;transform:skewX(-20deg);
}

/* =====================================================================
   01〜30: telop-original-20/preview.html からの忠実移植（orig- 名前空間）
   共通ベースは .txt。色・形状は元モックの値をそのまま使用。
   ===================================================================== */
.orig{
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;font-style:normal;
  line-height:1.35;display:inline-block;text-align:center;position:relative;
}
.orig-box{
  font-family:"Noto Sans JP","Hiragino Sans",sans-serif;font-style:normal;
  line-height:1.35;display:inline-flex;align-items:center;position:relative;
}
.hl{font-weight:900}

/* 01 クラシック白抜き */
.orig-01{font-weight:900;font-size:30px;color:#fff;-webkit-text-stroke:6px #000;paint-order:stroke fill;letter-spacing:0.5px}

/* 02 ブラックバー */
.orig-02{background:#111318;color:#fff;font-weight:700;font-size:24px;padding:10px 24px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.4)}

/* 03 ホワイトバー */
.orig-03{background:#f7f7f5;color:#161616;font-weight:700;font-size:24px;padding:10px 24px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.25)}

/* 04 ゴールドアンダーライン */
.orig-04{color:#fff;font-weight:700;font-size:24px;text-shadow:0 2px 8px rgba(0,0,0,0.6);padding-bottom:16px}
.orig-04::after{content:'';position:absolute;left:2%;right:2%;bottom:0;height:3px;background:var(--telop-gold)}
.orig-04::before{content:'';position:absolute;left:18%;right:18%;bottom:8px;height:2px;background:rgba(255,255,255,0.6)}
.orig-04 .hl{color:var(--telop-gold)}

/* 05 サイドタブラベル */
.orig-05{background:rgba(8,10,14,0.55);border-radius:6px;overflow:hidden}
.orig-05 .o-tab{background:#2e5eaa;color:#fff;font-weight:800;font-size:14px;letter-spacing:1px;padding:0 14px;align-self:stretch;display:flex;align-items:center}
.orig-05 .o-txt{color:#fff;font-weight:700;font-size:22px;padding:10px 18px}

/* 06 チャコールカード */
.orig-06{background:#1d2733;color:#f5f1e8;font-weight:600;font-size:23px;padding:12px 28px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,0.4)}

/* 07 縦罫ゴールドアクセント */
.orig-07{background:rgba(0,0,0,0.5);border-left:6px solid var(--telop-gold);border-radius:4px;color:#fff;font-weight:700;font-size:22px;padding:10px 20px}

/* 08 アウトラインボックス */
.orig-08{border:1.5px solid rgba(255,255,255,0.85);color:#fff;font-weight:600;font-size:22px;padding:10px 26px;border-radius:2px}

/* 09 カットリボン */
.orig-09{background:#1f7a6c;color:#fff;font-weight:800;font-size:24px;padding:12px 36px;clip-path:polygon(4% 0,100% 0,96% 100%,0% 100%)}
.orig-09 .hl{color:#ffe39a}

/* 10 ドットマーカー */
.orig-10{color:#fff;font-weight:800;font-size:24px;border-bottom:3px solid rgba(255,255,255,0.4);padding-bottom:8px}
.orig-10 .o-dot{color:#ff6b4a;font-weight:900;margin:0 4px}
.orig-10 .hl{color:#ff6b4a}

/* 11 スプリットブロック */
.orig-11{border-radius:8px;overflow:hidden;font-weight:800;font-size:22px}
.orig-11 .o-half-a{background:#15181c;color:#9aa4af;padding:10px 18px;display:inline-block}
.orig-11 .o-half-b{background:#3e8e7e;color:#fff;padding:10px 18px;display:inline-block}

/* 12 コーナーノッチバッジ */
.orig-12{background:#14213d;border:1.5px solid #d4af37;color:#fff;font-weight:800;font-size:23px;padding:13px 32px;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}

/* 13 ハザードストライプ */
.orig-13{padding:6px;border-radius:6px;background:repeating-linear-gradient(45deg,#ffc400 0 12px,#111 12px 24px);display:inline-block}
.orig-13 .o-txt{background:#111;color:#fff;font-weight:800;font-size:22px;padding:11px 26px;border-radius:3px;display:inline-block}

/* 14 ダブルフレーム警告 */
.orig-14{border:8px double #e23d28;padding:12px 28px;background:rgba(20,20,20,0.6);color:#fff;font-weight:700;font-size:22px}

/* 15 トライアングルアラート */
.orig-15{background:rgba(20,20,20,0.55);padding:10px 24px;border-radius:6px;color:#fff;font-weight:700;font-size:21px}
.orig-15::before{
  content:'';display:inline-block;width:0;height:0;
  border-left:13px solid transparent;border-right:13px solid transparent;
  border-bottom:22px solid #e23d28;margin-right:12px;vertical-align:middle;
}

/* 16 ベタ塗りインパクト */
.orig-16{background:#000;color:#fff;font-weight:900;font-size:30px;padding:14px 8%;display:block;width:100%;text-align:center}
.stage.stage-full{padding:0;align-items:flex-end}
.stage.stage-full .box{max-width:100%;width:100%}

/* 17 レイヤードシャドウ立体 */
.orig-17{color:#fff;font-weight:900;font-size:30px;text-shadow:2px 2px 0 #000,4px 4px 0 #000,6px 6px 0 rgba(0,0,0,0.7)}

/* 18 ソリッドハイビズ */
.orig-18{background:#c6ff3d;color:#101010;font-weight:900;font-size:27px;padding:12px 30px;border-radius:6px}

/* 19 タイプライター */
.orig-19{color:#fff;font-weight:600;font-size:22px;letter-spacing:6px;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.orig-19::after{
  content:'';display:inline-block;width:12px;height:1em;background:var(--telop-gold);
  margin-left:6px;vertical-align:-4px;animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* 20 ノートライン */
.orig-20{
  color:#fff;font-weight:600;font-size:22px;padding:16px 28px;border-radius:6px;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 26px),rgba(0,0,0,0.38);
}

/* 21 デュアルリング袋文字 */
.orig-21{display:inline-block;position:relative}
.orig-21 .o-ring-back{position:absolute;inset:0;font-weight:900;font-size:28px;color:#fff;-webkit-text-stroke:11px #1b2a4a;paint-order:stroke fill}
.orig-21 .o-ring-front{position:relative;font-weight:900;font-size:28px;color:#fff;-webkit-text-stroke:5px var(--telop-gold);paint-order:stroke fill}

/* 22 ソフト座布団 */
.orig-22{background:rgba(10,14,20,0.58);color:#fff;font-weight:700;font-size:23px;padding:16px 34px;border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 10px 26px rgba(0,0,0,0.35)}

/* 23 矢羽根バナー */
.orig-23{display:inline-block;background:#c9ced6;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0% 50%);padding:3px}
.orig-23 .o-txt{display:block;background:#1b2a4a;color:#fff;font-weight:800;font-size:21px;padding:12px 42px;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0% 50%)}

/* 24 ヘッドマーク下線 */
.orig-24{
  display:inline-flex;align-items:center;padding-bottom:10px;
  border-bottom:2px solid rgba(255,255,255,0.65);
  color:#fff;font-weight:700;font-size:22px;text-shadow:0 2px 6px rgba(0,0,0,0.5);
}
.orig-24::before{
  content:'';width:0;height:0;flex:0 0 auto;margin-right:10px;
  border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid var(--telop-gold);
}

/* 25 コーナータグ枠 */
.orig-25{position:relative;border:1.5px solid rgba(255,255,255,0.85);background:rgba(255,255,255,0.06);color:#fff;font-weight:600;font-size:21px;padding:16px 26px 13px;display:inline-block}
.orig-25 .o-tag{position:absolute;top:-12px;left:20px;background:var(--telop-gold);color:#14171c;font-size:11px;font-weight:800;letter-spacing:1px;padding:2px 10px;border-radius:2px}

/* 26 ダイアゴナル分割ブロック */
.orig-26{display:inline-flex;transform:skewX(-10deg);border-radius:2px;overflow:hidden}
.orig-26 .o-half-a{background:#1d2733;padding:12px 22px}
.orig-26 .o-half-b{background:#c0392b;padding:12px 22px}
.orig-26 .o-half-a span,.orig-26 .o-half-b span{display:inline-block;transform:skewX(10deg);color:#fff;font-weight:800;font-size:21px}

/* 27 ミニマル・ロワサード */
.orig-27{
  position:relative;background:rgba(247,247,244,0.94);color:#14171c;font-weight:700;font-size:21px;
  padding:10px 46px 10px 22px;border-radius:2px;display:inline-block;
}
.orig-27::after{content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:#14171c}

/* 28 デュアルグロウレス発光 */
.orig-28{display:inline-block;position:relative}
.orig-28 .o-glow-back{position:absolute;inset:0;font-weight:800;font-size:26px;color:transparent;-webkit-text-stroke:9px rgba(255,224,153,0.35);paint-order:stroke fill}
.orig-28 .o-glow-front{position:relative;font-weight:800;font-size:26px;color:#fff;-webkit-text-stroke:2.5px rgba(255,224,153,0.9);paint-order:stroke fill}

/* 29 角字朱印 */
.orig-29{position:relative;background:#b7282e;color:#f7ece0;font-weight:800;font-size:22px;letter-spacing:3px;padding:13px 34px;display:inline-block}
.orig-29::after{content:'';position:absolute;top:-9px;right:-9px;width:22px;height:22px;background:#14171c}

/* 30 オフセットツートン */
.orig-30{position:relative;display:inline-block;background:#f5f0e0;padding:14px 30px;border-radius:2px}
.orig-30 .o-ghost,.orig-30 .o-main{display:block;font-weight:900;font-size:23px;white-space:nowrap}
.orig-30 .o-ghost{position:absolute;left:30px;top:14px;color:#e8a33d;transform:translate(5px,5px);z-index:0}
.orig-30 .o-main{position:relative;color:#14171c;z-index:1}

/* =====================================================================
   31〜35: bonuses/review-r1-telop-styles/preview.html からの忠実移植
   ===================================================================== */
.orig-31{
  display:inline-block;padding:14px 30px;border-radius:16px;
  background:linear-gradient(135deg, rgba(8,10,28,0.55) 0%, rgba(24,8,40,0.55) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 0 44px rgba(0,245,255,0.28), 0 10px 30px rgba(0,0,0,0.55);
  border:1px solid rgba(0,245,255,0.4);
}
.orig-31 span{
  font-weight:800;font-style:italic;font-size:26px;letter-spacing:0.02em;
  background:linear-gradient(90deg,#00F5FF,#FF2FE0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 28px rgba(0,245,255,0.85);
}
.orig-32{
  display:inline-block;padding:4px 18px 16px 18px;border-radius:6px;
  background:linear-gradient(100deg, rgba(255,224,40,0) 0%, rgba(255,224,40,0.88) 6%, rgba(255,209,25,0.88) 94%, rgba(255,224,40,0) 100%);
}
.orig-32 span{font-weight:800;font-size:26px;color:#1a1a1a}
.orig-33{
  display:inline-block;padding:14px 30px 14px 26px;border-radius:4px;
  background:linear-gradient(90deg,#0B1220 0%,#16233B 100%);
  box-shadow:inset 6px 0 0 0 #E63946, 0 10px 26px rgba(0,0,0,0.45);
}
.orig-33 span{font-weight:700;font-size:24px;color:#fff;letter-spacing:0.02em;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.orig-34 span{
  font-weight:900;font-size:32px;color:#FFE600;
  -webkit-text-stroke:7px #111111;paint-order:stroke fill;
  text-shadow:0 6px 0 rgba(0,0,0,0.9);display:inline-block;
}
.orig-35 span{font-weight:500;font-size:20px;color:#F2F2F2;letter-spacing:0.02em;line-height:1.5;text-shadow:0 2px 10px rgba(0,0,0,0.9)}

/* ===== 選定UI ===== */
.selpanel{position:sticky;top:54px;z-index:20;background:var(--panel);border:1px solid var(--card-border);border-radius:12px;padding:12px 14px;margin:14px 0 18px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.selpanel-head{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:13px}
.selpanel-hint{color:#9aa3b2;font-size:12px}
.selpanel-counts{display:flex;gap:14px;margin:8px 0;font-size:13px}
.selpanel-counts b{font-size:16px;margin-left:2px}
.selpanel-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.selpanel button,.selbar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong);background:var(--panel-3);color:var(--fg-page);cursor:pointer}
.selpanel button.active,.selbar button.active{background:var(--green-grad);border-color:transparent;color:var(--green-dark)}
.selpanel button.primary{background:var(--green-grad);border-color:transparent;color:var(--green-dark);font-weight:700}
.selfilters{display:inline-flex;gap:4px;margin-right:8px}
.selpanel-export{margin-top:10px;border-top:1px solid var(--card-border);padding-top:10px}
.selpanel-export-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:6px}
.selpanel textarea{width:100%;box-sizing:border-box;font:12px/1.5 ui-monospace,Menlo,monospace;background:var(--code-bg);color:var(--fg-page);border:1px solid var(--border-strong);border-radius:8px;padding:8px}
.selpanel details{margin-top:8px;font-size:12px;color:#9aa3b2}
.selpanel details textarea{margin:6px 0}
.selbar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--panel-2);border-bottom:1px solid var(--card-border);font-size:12px}
.sel-keep-l{display:flex;align-items:center;gap:6px;cursor:pointer}
.sel-keep{width:16px;height:16px;accent-color:#5ce65c}
.sel-assign{display:inline-flex;gap:4px}
.sel-assign button:disabled{opacity:.35;cursor:not-allowed}
.card.is-dropped .stage{opacity:.28;filter:grayscale(1)}
.card.is-dropped .meta{opacity:.5}
.card.is-selhidden{display:none}
@media (max-width:640px){.selpanel{position:static}}

.selpanel-export.is-hidden{display:none}

/* ===== LP風ナビ ===== */
.lpnav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:12px 0;margin-bottom:18px;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--card-border)}
.lpnav .logo{font-weight:800;display:inline-flex;align-items:center;gap:8px;color:var(--heading);text-decoration:none}
.lpnav .logo-mark{display:inline-flex}
.lpnav .nav-links{display:flex;gap:14px;font-size:13px}
.lpnav .nav-links a{color:var(--dim);text-decoration:none}
.lpnav .nav-links a:hover{color:var(--link)}
.lpnav .btn-primary{background:var(--green-grad);color:var(--green-dark);font-weight:700;border-radius:10px;padding:8px 14px;font-size:13px;text-decoration:none}
h1{color:var(--heading)}
.section-title,.sec-h,h2{color:var(--heading)}
.notice{border-left-color:var(--link)}

/* ===== テーマ切替 ===== */
.theme-toggle{background:none;border:1px solid var(--border-strong);color:var(--dim);border-radius:999px;width:28px;height:28px;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;vertical-align:middle}
:root[data-theme='dark'] .icon-moon{display:none}
:root[data-theme='light'] .icon-sun{display:none}
.selpanel{box-shadow:0 6px 20px var(--glow)}