/* ============================================================
   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}
}