/* ============================================================
   CyberDream LLC — Portal Stylesheet
   Palette: void #04080d / panel #0b141f / cyan #6fe3ff
            teal #23c4b4 / chrome #cfd9e4 / muted #7d8ea1
   ============================================================ */
:root{
  --void:#04080d; --panel:#0b141f; --panel2:#101c2b;
  --line:#1d3348; --cyan:#6fe3ff; --teal:#23c4b4;
  --chrome:#cfd9e4; --muted:#7d8ea1; --danger:#ff6f7d;
  --glow:0 0 14px rgba(111,227,255,.45), 0 0 40px rgba(35,196,180,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--void); color:var(--chrome);
  font-family:'Noto Sans JP',sans-serif; font-size:15px; line-height:1.7;
  min-height:100vh; display:flex; flex-direction:column;
}
.mono{font-family:'Share Tech Mono',monospace; letter-spacing:.04em}
h1,h2,h3{font-family:'Orbitron','Noto Sans JP',sans-serif; letter-spacing:.08em}
a{color:var(--cyan); text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}

/* 背景の回路グリッド */
.grid-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(35,196,180,.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(111,227,255,.05) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(111,227,255,.05) 47px 48px),
    var(--void);
}

/* ---------- トップバー ---------- */
.topbar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:10px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(16,28,43,.95), rgba(11,20,31,.9));
  backdrop-filter:blur(6px); position:sticky; top:0; z-index:50;
}
.brand{font-family:'Orbitron',sans-serif; font-weight:900; font-size:19px; letter-spacing:.06em}
.brand-cyber{color:var(--chrome)}
.brand-dream{color:var(--cyan); text-shadow:0 0 12px rgba(111,227,255,.6)}
.brand-llc{color:var(--muted); font-size:11px; margin-left:6px; vertical-align:super}
.topnav{display:flex; gap:4px; flex-wrap:wrap}
.topnav a{
  color:var(--muted); padding:6px 12px; border:1px solid transparent;
  font-size:13px; letter-spacing:.06em;
}
.topnav a:hover{color:var(--cyan); border-color:var(--line); background:rgba(111,227,255,.05)}
.topuser{margin-left:auto; display:flex; align-items:center; gap:12px}
.uid{color:var(--teal); font-size:13px}

.wrap{width:min(1120px,100%); margin:0 auto; padding:28px 20px 60px; flex:1}
.foot{
  text-align:center; color:var(--muted); font-size:11px; letter-spacing:.25em;
  padding:18px; border-top:1px solid var(--line);
}

/* ---------- 共通パーツ ---------- */
.btn{
  display:inline-block; cursor:pointer; border:1px solid var(--cyan);
  background:linear-gradient(180deg, rgba(111,227,255,.16), rgba(111,227,255,.05));
  color:var(--cyan); font-family:'Orbitron','Noto Sans JP',sans-serif;
  font-size:13px; letter-spacing:.12em; padding:10px 22px;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:box-shadow .2s, background .2s;
}
.btn:hover{box-shadow:var(--glow); background:rgba(111,227,255,.22)}
.btn-ghost{border-color:var(--line); color:var(--muted); background:transparent}
.btn-ghost:hover{color:var(--cyan); border-color:var(--cyan)}
.btn-sm{padding:5px 14px; font-size:11px}

input[type=text],input[type=password],textarea,select{
  width:100%; background:#081019; border:1px solid var(--line); color:var(--chrome);
  padding:10px 12px; font-family:inherit; font-size:14px; border-radius:2px;
}
input:focus,textarea:focus,select:focus{border-color:var(--cyan)}
label{display:block; font-size:12px; color:var(--muted); letter-spacing:.1em; margin:14px 0 4px}
.field-row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.field-row > div{flex:1; min-width:160px}

.card{
  background:linear-gradient(160deg, var(--panel2), var(--panel));
  border:1px solid var(--line); padding:22px; position:relative;
}
.card::before{
  content:""; position:absolute; top:0; left:0; width:34px; height:2px;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
}
.notice{border-left:3px solid var(--teal); background:rgba(35,196,180,.08); padding:10px 14px; font-size:13px; margin:14px 0}
.error{border-left:3px solid var(--danger); background:rgba(255,111,125,.08); padding:10px 14px; font-size:13px; margin:14px 0; color:var(--danger)}
.section-title{
  font-size:15px; color:var(--cyan); margin:34px 0 14px;
  display:flex; align-items:center; gap:12px;
}
.section-title::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent)}
.crumb{font-size:12px; color:var(--muted); margin-bottom:16px}
.crumb a{color:var(--teal)}

/* ---------- 表玄関(ゲート) ---------- */
body.gate{justify-content:center; align-items:center}
.gate-panel{
  width:min(460px, calc(100% - 32px)); text-align:center;
  border:1px solid rgba(111,227,255,.35); padding:44px 36px 38px;
  background:linear-gradient(165deg, rgba(16,28,43,.92), rgba(8,14,22,.95));
  box-shadow:0 0 60px rgba(35,196,180,.12), inset 0 0 40px rgba(111,227,255,.04);
  position:relative; overflow:hidden;
  clip-path:polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.gate-panel::after{ /* スキャンライン */
  content:""; position:absolute; left:0; right:0; height:2px; top:-10%;
  background:linear-gradient(90deg, transparent, rgba(111,227,255,.85), transparent);
  animation:scan 3.6s linear infinite;
}
@keyframes scan{0%{top:-4%}100%{top:104%}}
@media (prefers-reduced-motion: reduce){ .gate-panel::after{animation:none; display:none} }
.gate-logo{width:78%; max-width:320px; margin:0 auto 8px; display:block; filter:drop-shadow(0 0 18px rgba(111,227,255,.25))}
.gate-tag{font-size:10px; letter-spacing:.34em; color:var(--muted); margin-bottom:30px}
.gate-label{font-size:11px; letter-spacing:.3em; color:var(--teal); margin-bottom:10px}
.gate-panel input[type=password]{text-align:center; letter-spacing:.3em; font-size:16px}
.gate-panel .btn{margin-top:20px; width:100%}
.gate-foot{margin-top:26px; font-size:10px; color:var(--muted); letter-spacing:.2em}

/* ---------- ポータル ---------- */
.portal-hero{text-align:center; margin:20px 0 40px}
.portal-hero img{width:min(420px, 86%); filter:drop-shadow(0 0 24px rgba(111,227,255,.2))}
.portal-hero p{color:var(--muted); font-size:12px; letter-spacing:.3em; margin-top:6px}
.plaques{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.plaque{
  display:block; position:relative; padding:30px 26px 26px; color:var(--chrome);
  border:1px solid var(--line);
  background:
    linear-gradient(155deg, rgba(111,227,255,.06), transparent 40%),
    linear-gradient(180deg, #16222f, #0b141f);
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.plaque:hover{transform:translateY(-4px); box-shadow:var(--glow); border-color:var(--cyan)}
.plaque .p-code{font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--teal); letter-spacing:.3em}
.plaque h2{font-size:17px; margin:10px 0 8px; color:var(--cyan)}
.plaque p{font-size:13px; color:var(--muted); margin:0; min-height:3.4em}
.plaque .p-lock{position:absolute; top:18px; right:20px; font-size:11px; color:var(--muted); letter-spacing:.1em}

/* ---------- ギャラリー / 資料庫 ---------- */
.folder-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px}
.folder{
  border:1px solid var(--line); background:var(--panel); padding:18px;
  display:block; color:var(--chrome); transition:border-color .15s, box-shadow .15s;
}
.folder:hover{border-color:var(--teal); box-shadow:0 0 16px rgba(35,196,180,.2)}
.folder .f-name{font-weight:700; color:var(--cyan)}
.folder .f-meta{font-size:11px; color:var(--muted); margin-top:4px}
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px}
.media-item{border:1px solid var(--line); background:#060b12; padding:6px}
.media-item img, .media-item video{width:100%; height:150px; object-fit:cover; display:block; background:#000}
.media-item .m-name{font-size:11px; color:var(--muted); padding:6px 4px 2px; word-break:break-all}
.file-table{width:100%; border-collapse:collapse; font-size:13px}
.file-table th{ text-align:left; color:var(--teal); font-size:11px; letter-spacing:.15em; border-bottom:1px solid var(--line); padding:8px 10px}
.file-table td{border-bottom:1px solid rgba(29,51,72,.5); padding:9px 10px}
.file-table tr:hover td{background:rgba(111,227,255,.04)}

/* ---------- チャット ---------- */
.chat-layout{display:grid; grid-template-columns:250px 1fr; gap:18px; align-items:start}
@media (max-width:820px){ .chat-layout{grid-template-columns:1fr} }
.room-list a{
  display:block; padding:10px 14px; border:1px solid var(--line); margin-bottom:8px;
  color:var(--chrome); font-size:13px; background:var(--panel);
}
.room-list a.active{border-color:var(--cyan); color:var(--cyan); box-shadow:inset 3px 0 0 var(--cyan)}
.room-list a:hover{border-color:var(--teal)}
.chat-box{border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; height:64vh; min-height:420px}
.chat-head{padding:10px 16px; border-bottom:1px solid var(--line); color:var(--cyan); font-family:'Orbitron',sans-serif; font-size:14px; letter-spacing:.1em}
.chat-msgs{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px}
.msg{max-width:78%; padding:9px 13px; border:1px solid var(--line); background:var(--panel2); font-size:14px}
.msg .m-head{font-size:10px; color:var(--teal); letter-spacing:.08em; margin-bottom:3px; font-family:'Share Tech Mono',monospace}
.msg.mine{align-self:flex-end; border-color:rgba(111,227,255,.4); background:rgba(111,227,255,.08)}
.msg img{max-width:100%; max-height:260px; display:block; margin-top:6px; border:1px solid var(--line)}
.msg video{max-width:100%; max-height:280px; display:block; margin-top:6px}
.msg .m-file{display:inline-block; margin-top:6px; font-size:12px}
.msg .m-body{white-space:pre-wrap; word-break:break-word}
.chat-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); flex-wrap:wrap}
.chat-form textarea{flex:1; min-width:200px; resize:vertical; min-height:44px; max-height:140px}
.chat-form .file-label{
  display:flex; align-items:center; padding:0 12px; border:1px dashed var(--line);
  color:var(--muted); font-size:12px; cursor:pointer;
}
.chat-form .file-label:hover{border-color:var(--teal); color:var(--teal)}
.chat-form input[type=file]{display:none}
.admin-panel details{border:1px solid var(--line); background:var(--panel); margin-top:18px}
.admin-panel summary{cursor:pointer; padding:10px 16px; color:var(--teal); font-size:13px; letter-spacing:.1em}
.admin-panel .inner{padding:4px 16px 18px}
.member-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.member-tags label{display:flex; align-items:center; gap:5px; margin:0; border:1px solid var(--line); padding:4px 10px; font-size:12px; cursor:pointer}

/* ---------- v1.1 追加分 ---------- */
/* ポータルの回路パネルヒーロー */
.portal-hero .hero-panel{
  width:min(640px, 94%); border:1px solid var(--line);
  box-shadow:0 0 40px rgba(35,196,180,.18);
}
/* 司令官室 */
.nav-cmd{color:var(--teal)!important; border-color:rgba(35,196,180,.4)!important}
.plaque-cmd{border-color:rgba(35,196,180,.5)}
.plaque-cmd h2{color:var(--teal)}
.cmd-hero{margin-bottom:8px}
.cmd-sub{font-size:11px; color:var(--teal); letter-spacing:.25em}
.status-lamp.on{color:var(--teal)}
.status-lamp.off{color:var(--danger)}
.room-board{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.room-card-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.tag-form{display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); padding:3px 6px 3px 10px; font-size:12px}
.tag-x{background:none; border:none; color:var(--danger); cursor:pointer; font-size:13px; padding:0 4px}
.tag-x:hover{text-shadow:0 0 8px var(--danger)}
/* チャットのドロップ受け入れ表示 */
.chat-box.dropping{border-color:var(--cyan); box-shadow:inset 0 0 40px rgba(111,227,255,.12), var(--glow)}
.chat-box.dropping .chat-msgs::after{
  content:"⇩ ここにドロップして添付"; display:block; text-align:center;
  color:var(--cyan); font-family:'Orbitron',sans-serif; letter-spacing:.2em; padding:14px;
}
/* APEX資料庫バナー */
.vault-banner{margin:0 0 18px; border:1px solid var(--line); overflow:hidden}
.vault-banner img{width:100%; max-height:180px; object-fit:cover; display:block; opacity:.9}

/* ---------- v1.2 追加分 ---------- */
.status-lamp.mid{color:#e8c268}
.btn-danger{border-color:rgba(255,111,125,.5); color:var(--danger)}
.btn-danger:hover{box-shadow:0 0 14px rgba(255,111,125,.4)}
.log-table td{font-size:12px}
/* AI艦隊 */
.fleet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.fleet-card{padding:18px}
.fleet-check{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin:0 0 10px}
.fleet-check input{width:auto}
.fleet-name{font-family:'Orbitron',sans-serif; font-size:18px; color:var(--cyan); letter-spacing:.1em}
.fleet-role{font-size:11px; color:var(--teal); margin-top:2px}
.fleet-note{font-size:12px; color:var(--muted); margin-top:6px}
.fleet-actions{margin-top:12px; display:flex; flex-direction:column; gap:8px}
.fleet-launch{margin:22px 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
/* 読み上げ */
.reader-panel{position:sticky; top:56px; z-index:10}
.reader-controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.reader-status{margin-top:10px; font-size:12px; color:var(--teal)}
.reader-text{font-size:14px; line-height:2; max-height:56vh; overflow-y:auto; white-space:pre-wrap; word-break:break-word}

/* ---------- v1.3 スリープロック ---------- */
.pin-input{text-align:center; letter-spacing:.8em; font-size:26px; font-family:'Share Tech Mono',monospace}

/* ---------- v1.4 メッセージ端末 & セキュリティ宣言 ---------- */
.gate-links{margin-top:18px; font-size:12px}
.gate-links a{color:var(--teal)}
.gate-links span{color:var(--line); margin:0 8px}
.secured-strip{
  margin-top:22px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  font-size:10px; letter-spacing:.18em; color:var(--muted);
}
.secured-strip span{
  border:1px solid var(--line); padding:5px 12px;
  background:rgba(11,20,31,.7);
  clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.msg-panel{width:min(560px, calc(100% - 32px)); text-align:center}
.msg-panel textarea{width:100%}
.msg-tabs{display:flex; gap:8px; margin:14px 0 18px}
.msg-tabs a{flex:1; padding:8px; border:1px solid var(--line); color:var(--muted); font-size:12px}
.msg-tabs a.active{border-color:var(--cyan); color:var(--cyan)}
.msg-thread{text-align:left}
.msg-block{border:1px solid var(--line); padding:12px 14px; margin-bottom:12px; background:var(--panel)}
.msg-block.msg-reply{border-color:rgba(111,227,255,.45); background:rgba(111,227,255,.06)}
.msg-label{font-size:10px; color:var(--teal); letter-spacing:.15em; margin-bottom:6px}
.msg-body{font-size:14px; white-space:pre-wrap; word-break:break-word}
.inbox{display:flex; flex-direction:column; gap:14px}
.inbox-card.unreplied{border-left:3px solid var(--danger)}
.inbox-card.replied{border-left:3px solid var(--teal)}
.inbox-head{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.inbox-body{margin-top:8px; font-size:14px; white-space:pre-wrap}
.inbox-reply{margin-top:10px; padding:10px 12px; border:1px dashed var(--line); font-size:13px; white-space:pre-wrap}

/* ================= v1.5 ハイテク演出強化 ================= */
/* 全体に極薄の走査線(施設の空気感) */
.scan-overlay{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(111,227,255,.016) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
/* トップバーのシステムステータス */
.sys-status{display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.16em; color:var(--muted)}
.sys-sep{color:var(--line)}
.sys-dot{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:900px){ .sys-status{display:none} }

/* ブランドのグロー呼吸 */
.brand-dream{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{text-shadow:0 0 12px rgba(111,227,255,.6)}50%{text-shadow:0 0 22px rgba(111,227,255,.95), 0 0 40px rgba(35,196,180,.4)}}

/* HUDコーナーブラケット(カード・プレート・ゲート) */
.card, .plaque, .gate-panel{position:relative}
.card::after, .plaque::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 14px 1.5px,
    linear-gradient(var(--cyan), var(--cyan)) top left / 1.5px 14px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 14px 1.5px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 1.5px 14px;
  background-repeat:no-repeat; opacity:.45;
}
.plaque:hover::after{opacity:1}

/* プレートに光のスイープ(ホバー時のみ) */
.plaque{overflow:hidden}
.plaque::before{
  content:""; position:absolute; top:0; bottom:0; width:46%; left:-60%;
  background:linear-gradient(105deg, transparent, rgba(111,227,255,.14), transparent);
  transform:skewX(-18deg); transition:left .5s ease; z-index:0;
}
.plaque:hover::before{left:115%}
.plaque > *{position:relative; z-index:1}

/* セクションタイトルに稼働カーソル */
.section-title::before{content:"▮"; color:var(--teal); animation:blink 1.2s steps(1) infinite; font-size:12px}
@keyframes blink{50%{opacity:0}}

/* ゲート起動シーケンス */
.boot-seq{
  width:min(460px, calc(100% - 32px)); margin:0 auto 14px; min-height:4.6em;
  font-size:11px; line-height:1.55; color:var(--teal); text-align:left;
  letter-spacing:.08em; white-space:pre-wrap; opacity:.85;
}

/* チャット・受信箱にも軽い呼吸 */
.chat-head{position:relative}
.chat-head::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg, var(--cyan), transparent 70%);
  animation:breathe-line 3.5s ease-in-out infinite;
}
@keyframes breathe-line{0%,100%{opacity:.3}50%{opacity:1}}

/* 動きが苦手な設定では全演出停止 */
@media (prefers-reduced-motion: reduce){
  .sys-dot, .brand-dream, .section-title::before, .chat-head::after{animation:none}
  .plaque::before{display:none}
  .scan-overlay{display:none}
}

/* ============================================================
   THEMES — 司令官室から切替（body.theme-*）。cyber は既定値。
   変数(--void/--panel/--panel2/--line/--cyan/--teal/--chrome/--muted)を
   上書きし、必要な箇所だけ個別調整する。
   ============================================================ */

/* ◇ ライト（白×エレクトリックブルー） */
body.theme-lumen{ --void:#f2f6fa; --panel:#ffffff; --panel2:#eef3f8;
  --line:#c9d8e6; --cyan:#1d6fd8; --teal:#0e8f83; --chrome:#1d2b3a; --muted:#5c7186;
  --glow:0 0 14px rgba(29,111,216,.25); }
/* ✦ ゴージャス（夜・金×ワイン） */
body.theme-luxe{ --void:#120d12; --panel:#1c1420; --panel2:#241a29;
  --line:#4a3450; --cyan:#e6c36b; --teal:#c48ab0; --chrome:#f0e6d8; --muted:#a08fa8;
  --glow:0 0 16px rgba(230,195,107,.35); }
/* ❍ パール（白ゴージャス・アイボリー×シャンパン金） */
body.theme-pearl{ --void:#f7f4ee; --panel:#fffdf8; --panel2:#f2ecdf;
  --line:#d8c9a8; --cyan:#a07f45; --teal:#8a6d3b; --chrome:#2c2620; --muted:#7d7468;
  --glow:0 0 14px rgba(176,141,79,.25); }
/* ❖ 静かな高級（チャコール×シャンパン） */
body.theme-noble{ --void:#15161a; --panel:#1d1f24; --panel2:#25272e;
  --line:#3a3d46; --cyan:#c4b28a; --teal:#8a8098; --chrome:#e8e4da; --muted:#8d8a94;
  --glow:0 0 12px rgba(196,178,138,.25); }
/* ❆ クリスタル（氷×ガラス×白） */
body.theme-crystal{ --void:#eef7fa; --panel:#ffffff; --panel2:#e2f1f6;
  --line:#a8d8e8; --cyan:#0e9bc7; --teal:#0ca08e; --chrome:#123344; --muted:#4e7285;
  --glow:0 0 16px rgba(56,189,248,.3); }
/* ⬜ ベーシック（Google的な白） */
body.theme-basic{ --void:#ffffff; --panel:#ffffff; --panel2:#f1f3f4;
  --line:#dadce0; --cyan:#1a73e8; --teal:#188038; --chrome:#202124; --muted:#5f6368;
  --glow:none; }
/* 🌸 サクラ（ほんわかピンク） */
body.theme-sakura{ --void:#fdf2f6; --panel:#fffbfd; --panel2:#fbe9f0;
  --line:#eec3d2; --cyan:#e0517e; --teal:#c96a92; --chrome:#4a2c38; --muted:#9b6f80;
  --glow:0 0 14px rgba(224,81,126,.25); }
/* 🎀 ユメ（ピンク×ラベンダー） */
body.theme-yume{ --void:#f8f1fb; --panel:#fffcff; --panel2:#f1e8f8;
  --line:#d6c3ec; --cyan:#b06ab3; --teal:#8b78d8; --chrome:#443354; --muted:#8b7a9e;
  --glow:0 0 16px rgba(167,139,250,.35); }

/* ---- ライト系テーマ共通の個別調整（ハードコード箇所の上書き） ---- */
body.theme-lumen, body.theme-pearl, body.theme-crystal, body.theme-basic,
body.theme-sakura, body.theme-yume{ }
body.theme-lumen .grid-bg, body.theme-pearl .grid-bg, body.theme-crystal .grid-bg,
body.theme-basic .grid-bg, body.theme-sakura .grid-bg, body.theme-yume .grid-bg{
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(0,0,0,.04), transparent 60%),
    var(--void);
}
body.theme-lumen .topbar, body.theme-pearl .topbar, body.theme-crystal .topbar,
body.theme-basic .topbar, body.theme-sakura .topbar, body.theme-yume .topbar{
  background:var(--panel); border-bottom:1px solid var(--line);
}
body.theme-lumen input[type=text], body.theme-lumen input[type=password], body.theme-lumen textarea, body.theme-lumen select,
body.theme-pearl input[type=text], body.theme-pearl input[type=password], body.theme-pearl textarea, body.theme-pearl select,
body.theme-crystal input[type=text], body.theme-crystal input[type=password], body.theme-crystal textarea, body.theme-crystal select,
body.theme-basic input[type=text], body.theme-basic input[type=password], body.theme-basic textarea, body.theme-basic select,
body.theme-sakura input[type=text], body.theme-sakura input[type=password], body.theme-sakura textarea, body.theme-sakura select,
body.theme-yume input[type=text], body.theme-yume input[type=password], body.theme-yume textarea, body.theme-yume select{
  background:#fff; color:var(--chrome); border-color:var(--line);
}
body.theme-lumen .msg, body.theme-pearl .msg, body.theme-crystal .msg,
body.theme-basic .msg, body.theme-sakura .msg, body.theme-yume .msg{
  background:var(--panel2); color:var(--chrome);
}
body.theme-lumen .msg.mine, body.theme-pearl .msg.mine, body.theme-crystal .msg.mine,
body.theme-basic .msg.mine, body.theme-sakura .msg.mine, body.theme-yume .msg.mine{
  background:color-mix(in srgb, var(--cyan) 12%, #fff); border-color:var(--cyan);
}
body.theme-basic .btn{ clip-path:none; border-radius:8px; font-family:'Noto Sans JP',sans-serif;
  letter-spacing:0; background:var(--cyan); color:#fff; border-color:var(--cyan); }
body.theme-basic .btn-ghost{ background:#fff; color:var(--cyan); border-color:var(--line); }
body.theme-sakura .btn, body.theme-yume .btn{ clip-path:none; border-radius:999px; }
body.theme-sakura .plaque, body.theme-sakura .gate-panel, body.theme-sakura .card,
body.theme-yume .plaque, body.theme-yume .gate-panel, body.theme-yume .card{ border-radius:16px; }
body.theme-luxe .brand-dream, body.theme-pearl .brand-dream{ text-shadow:0 0 12px rgba(230,195,107,.5); }

/* ---- 動画クリップ・バー（区間再生） ---- */
.clipbar{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0 2px; max-width:420px; }
.clipbar button{ font-family:'Share Tech Mono','Noto Sans JP',monospace; font-size:11px; padding:4px 9px;
  border:1px solid var(--line); background:var(--panel2); color:var(--muted); cursor:pointer; line-height:1.4; }
.clipbar button:hover{ color:var(--cyan); border-color:var(--cyan); }
.clipbar .clip-play{ color:var(--void); background:var(--cyan); border-color:var(--cyan); }
.clipbar .clip-loop.on{ color:var(--teal); border-color:var(--teal); }
.clipbar .clip-range{ font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--muted); margin-left:auto; }

/* ---- 動画URL埋め込み ---- */
.embed-wrap{ position:relative; width:100%; max-width:420px; aspect-ratio:16/9; margin-top:6px;
  border:1px solid var(--line); background:#000; }
.embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.embed-wrap.ratio-auto{ aspect-ratio:auto; }
.embed-wrap.ratio-auto video{ width:100%; max-height:300px; display:block; }

/* ---- チャットヘッダーの小物（🔔/🎨） ---- */
.chat-tools{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.chat-tools button{ background:transparent; border:1px solid var(--line); color:var(--muted);
  cursor:pointer; font-size:13px; padding:3px 8px; line-height:1.4; }
.chat-tools button:hover{ color:var(--cyan); border-color:var(--cyan); }
.chat-tools input[type=range]{ width:70px; accent-color:var(--cyan); }
.chat-head{ display:flex; align-items:center; }

/* ---------- 記事（ARCHIVES） ---------- */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:18px}
.art-card{display:block;padding:0;overflow:hidden;text-decoration:none;color:var(--chrome)}
.art-card:hover{border-color:var(--cyan);box-shadow:var(--glow)}
.art-cover{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.art-cover img{width:100%;height:100%;object-fit:cover}
.art-card .art-meta,.art-card h2,.art-card p{padding:0 14px}
.art-card .art-meta{padding-top:12px;font-size:10px;color:var(--muted)}
.art-card p{padding-bottom:14px}
.art-wrap{max-width:780px;margin:8px auto 0;line-height:1.9}
.art-title-s{font-size:calc(19px * var(--h1scale,1)) !important}
.art-title-m{font-size:calc(26px * var(--h1scale,1)) !important}
.art-title-l{font-size:calc(34px * var(--h1scale,1)) !important}
.art-date{font-size:11px;color:var(--muted);margin:4px 0 22px}
.art-h2{font-size:calc(18px * var(--h2scale,1));margin:28px 0 10px;padding-left:10px;border-left:3px solid var(--cyan);clear:both}
.art-p{margin:0 0 16px;font-size:15px}
.art-hr{border:0;border-top:1px solid var(--line);margin:26px 0;clear:both}
.art-img{margin:14px 0}
.art-img img{max-width:100%;border:1px solid var(--line);display:block}
.art-img figcaption{font-size:11px;color:var(--muted);margin-top:6px}
.art-img.align-full img{width:100%}
.art-img.align-center{max-width:60%;margin-left:auto;margin-right:auto;text-align:center}
.art-img.align-left{float:left;max-width:45%;margin:6px 22px 12px 0}
.art-img.align-right{float:right;max-width:45%;margin:6px 0 12px 22px}
@media(max-width:620px){.art-img.align-left,.art-img.align-right{float:none;max-width:100%;margin:14px 0}.art-img.align-center{max-width:100%}}
.art-blk-edit{position:relative;outline:1px dashed rgba(127,127,127,.25);padding:4px;margin-bottom:4px}
.art-blk-tools{margin:4px 0 10px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;clear:both}
.btn-mini{font-family:'Share Tech Mono',monospace;font-size:11px;padding:3px 8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);cursor:pointer}
.btn-mini:hover{color:var(--cyan);border-color:var(--cyan)}