:root{
--bg:#05090F; --bg2:#08111D;
--panel:linear-gradient(180deg, rgba(163,196,216,.055), rgba(163,196,216,.028));
--panel-solid:#0A141F;
--line:rgba(163,196,216,.14); --line-soft:rgba(163,196,216,.08);
--acc:#5FA8BC; --acc-dim:#487E8E; --acc-deep:#2C5F6D;
--red:#C0717A;
--txt:#EAF2F6; --txt2:#96A9B6; --txt3:#617584;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
--sans:'Noto Sans TC',system-ui,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
margin:0; color:var(--txt); font-family:var(--sans); font-size:15px; line-height:1.6;
background:
radial-gradient(1000px 480px at 50% -12%, rgba(95,168,188,.055), transparent 62%),
linear-gradient(168deg, var(--bg), var(--bg2) 58%, #04070C);
background-attachment:fixed;
overflow-x:hidden;
}
body::before{ /* 精緻細線網格，極淡 */
content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
background:
linear-gradient(rgba(163,196,216,.032) 1px, transparent 1px),
linear-gradient(90deg, rgba(163,196,216,.032) 1px, transparent 1px);
background-size:52px 52px;
mask-image:radial-gradient(ellipse at 50% 0%, #000 22%, transparent 78%);
}
body::after{ /* 星野：極淡星點，給深空底一點縱深 */
content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.55;
background-image:
radial-gradient(1.2px 1.2px at 8% 18%, rgba(215,238,246,.55) 50%, transparent 52%),
radial-gradient(1px 1px at 22% 64%, rgba(215,238,246,.35) 50%, transparent 52%),
radial-gradient(1.4px 1.4px at 36% 9%, rgba(215,238,246,.45) 50%, transparent 52%),
radial-gradient(1px 1px at 47% 82%, rgba(215,238,246,.3) 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 58% 30%, rgba(215,238,246,.4) 50%, transparent 52%),
radial-gradient(1px 1px at 66% 71%, rgba(215,238,246,.32) 50%, transparent 52%),
radial-gradient(1.5px 1.5px at 74% 14%, rgba(215,238,246,.5) 50%, transparent 52%),
radial-gradient(1px 1px at 83% 52%, rgba(215,238,246,.35) 50%, transparent 52%),
radial-gradient(1.2px 1.2px at 91% 26%, rgba(215,238,246,.45) 50%, transparent 52%),
radial-gradient(1px 1px at 95% 84%, rgba(215,238,246,.3) 50%, transparent 52%),
radial-gradient(1px 1px at 15% 91%, rgba(215,238,246,.28) 50%, transparent 52%),
radial-gradient(1.3px 1.3px at 88% 93%, rgba(215,238,246,.38) 50%, transparent 52%);
}
#app::after{ /* 掃描光帶：極淡，緩慢掃過整個畫面一次再重來 */
content:""; position:fixed; left:0; right:0; top:-160px; height:160px; z-index:0; pointer-events:none;
background:linear-gradient(180deg, transparent, rgba(95,168,188,.05) 78%, rgba(95,168,188,.09) 99%, transparent);
animation:sweep 12s linear infinite;
}
@keyframes sweep{0%{transform:translateY(0);}72%{transform:translateY(125vh);}100%{transform:translateY(125vh);}}
button{font-family:inherit; cursor:pointer;}
input,textarea{font-family:inherit;}
::selection{background:rgba(95,168,188,.32);}

#app{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 20px 110px;}
@media(min-width:1024px){#app{padding:0 24px 64px;}}
#main{opacity:0; transform:translateY(7px); transition:opacity .7s ease, transform .7s ease;}
body.ready #main{opacity:1; transform:none;}

/* ============ 頂部細列：導航 + 狀態 ============ */
.topbar{
display:flex; align-items:center; gap:4px; flex-wrap:wrap;
padding:15px 2px 13px; border-bottom:1px solid var(--line-soft);
}
.navtab{
background:none; border:none; color:var(--txt2); font-size:14px; letter-spacing:.06em;
padding:7px 11px; position:relative; display:inline-flex; align-items:center; gap:7px; transition:color .18s;
}
.navtab:hover{color:#fff;}
.navtab.on{color:#fff;}
.navtab.on::after{content:""; position:absolute; left:11px; right:11px; bottom:1px; height:1px; background:var(--acc); box-shadow:0 0 7px rgba(95,168,188,.7);}
.navtab .n-n{font-family:var(--mono); font-size:11px; color:var(--acc);}
.top-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.syncbox{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--txt3); display:flex; align-items:center; gap:7px;}
.syncdot{width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 7px rgba(95,168,188,.8); animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.clock{font-family:var(--mono); font-size:13px; color:var(--txt2); letter-spacing:.08em;}
@media(max-width:560px){.syncbox{display:none;} .clock{display:none;}}
@media(max-width:640px){
/* 手機：頂部頁籤與底部導航重複 — 只留底部導航，頂列收成一行；
   簡報副文在標題已說完，手機版收起，讓第一張卡的按鈕列落在底部導航之上 */
.topbar nav{display:none!important;}
.topbar{padding:12px 2px 11px;}
.brief{padding-top:20px;}
.brief .b-sub{display:none;}
.brief .statline{margin-top:10px;}
.focus-meta{margin-top:22px;}
.card .actions{margin-top:14px; padding-top:12px;}
}
.newbtn{
background:none; border:1px solid var(--line); color:var(--txt); font-size:13px; letter-spacing:.1em;
padding:7px 14px; border-radius:8px; transition:.18s;
}
.newbtn:hover{border-color:rgba(95,168,188,.55); color:#fff;}

/* 搜尋：預設收起，點圖示才展開 — 首屏不被搜尋列佔住 */
.searchrow{display:none; align-items:center; gap:9px; padding:14px 2px 2px; border-bottom:1px solid var(--line-soft);}
.searchrow.show{display:flex;}
.searchrow svg{width:15px; height:15px; color:var(--txt3); flex:0 0 auto;}
.searchrow input{flex:1; min-width:0; background:none; border:none; outline:none; color:#fff; font-size:14px; padding:2px 0;}
.searchrow input::placeholder{color:var(--txt3);}
.searchrow .s-tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--txt3);}
.iconbtn{background:none; border:1px solid var(--line); color:var(--txt2); width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; transition:.18s; padding:0;}
.iconbtn:hover{color:#fff; border-color:rgba(95,168,188,.55);}
.iconbtn svg{width:15px; height:15px;}

/* ============ 判讀簡報 ============ */
.brief{display:flex; gap:24px; align-items:center; padding:44px 2px 8px; position:relative;}
.brief::before{ /* 核心後方的雷達同心環，極淡 */
content:""; position:absolute; left:-118px; top:50%; transform:translateY(-50%);
width:330px; height:330px; border-radius:50%; pointer-events:none;
background:repeating-radial-gradient(circle, transparent 0 33px, rgba(163,196,216,.05) 33px 34px);
-webkit-mask-image:radial-gradient(circle, #000 30%, transparent 68%);
mask-image:radial-gradient(circle, #000 30%, transparent 68%);
}
.brief-txt{position:relative; z-index:1;}
.core{z-index:1;}
@media(max-width:640px){.brief{gap:18px; padding:32px 2px 4px;} .brief::before{left:-150px; width:290px; height:290px;}}
.core{flex:0 0 auto; position:relative; width:92px; height:92px;}
.core svg{width:92px; height:92px; display:block;}
.core .arc{transform-origin:59px 59px; animation:spin 46s linear infinite;}
.core .arc2{transform-origin:59px 59px; animation:spinr 26s linear infinite;}
.core .orbit{transform-origin:59px 59px; animation:spin 9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes spinr{to{transform:rotate(-360deg);}}
.core .core-num{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
}
.core .core-num b{font-family:var(--mono); font-weight:600; font-size:26px; color:#fff; line-height:1;}
.core .core-num span{font-size:9.5px; letter-spacing:.3em; color:var(--txt2); margin-top:5px; padding-left:.3em;}
.brief-txt{min-width:0;}
.brief .b-kicker{font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--acc); margin-bottom:10px;}
.brief .b-kicker::after{content:""; display:inline-block; width:6px; height:10px; background:var(--acc); margin-left:9px; vertical-align:-1px; animation:blink 1.15s steps(1) infinite;}
@keyframes blink{0%,54%{opacity:.9;} 55%,100%{opacity:0;}}
.brief h2{margin:0; font-size:clamp(22px,4.4vw,29px); font-weight:500; line-height:1.55; letter-spacing:.02em;}
.brief h2 .n{font-family:var(--mono); font-weight:600; color:var(--acc); font-size:.92em; padding:0 1px;}
.brief .b-sub{margin-top:10px; color:var(--txt2); font-size:14px; line-height:1.7; max-width:46ch;}
.statline{
margin-top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--txt3);
display:flex; flex-wrap:wrap; gap:6px 0;
}
.statline span{white-space:nowrap;}
.statline span+span::before{content:"·"; margin:0 10px; color:var(--txt3); opacity:.6;}
.statline b{color:var(--txt2); font-weight:500;}

/* ============ 區塊標題 ============ */
.sect-head{
display:flex; align-items:center; gap:12px; margin:36px 2px 14px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; color:var(--txt3);
}
.sect-head::before{content:""; width:5px; height:5px; background:var(--acc-dim); flex:0 0 auto; box-shadow:0 0 5px rgba(95,168,188,.5);}
.sect-head::after{content:""; flex:1; height:1px; background:var(--line-soft);}
.sect-head .sh-n{color:var(--acc); letter-spacing:.05em;}

/* ============ 焦點決策卡：一次只呈現一件 ============ */
.focus-meta{display:flex; align-items:center; gap:10px; margin:34px 2px 12px;}
.focus-meta .fm-lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; color:var(--txt2);}
.focus-meta .fm-pos{font-family:var(--mono); font-size:11px; color:var(--acc); letter-spacing:.08em;}
.focus-meta .fm-line{flex:1; height:1px; background:var(--line-soft);}
.segs{display:flex; gap:5px;}
.segs i{width:22px; height:2px; background:rgba(163,196,216,.18); border-radius:2px;}
.segs i.done{background:var(--acc-dim);}
.segs i.now{background:var(--acc); box-shadow:0 0 6px rgba(95,168,188,.7);}
.card{
background:var(--panel); border:1px solid var(--line); border-radius:16px;
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
box-shadow:0 18px 40px rgba(0,0,0,.36);
padding:26px 26px 20px; margin-bottom:0; position:relative;
animation:cardIn .45s ease both;
}
@keyframes cardIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.card::before,.card::after{content:""; position:absolute; width:15px; height:15px; pointer-events:none; z-index:2;}
.card::before{top:-1px; left:-1px; border-top:1.5px solid var(--acc); border-left:1.5px solid var(--acc); border-top-left-radius:15px;}
.card::after{bottom:-1px; right:-1px; border-bottom:1.5px solid var(--acc); border-right:1.5px solid var(--acc); border-bottom-right-radius:15px;}
.tele{
display:flex; align-items:center; gap:10px; flex-wrap:wrap; position:relative;
font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--txt3);
padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--line-soft);
}
.tele b{color:var(--acc); font-weight:600;}
.tele .t-right{margin-left:auto;}
.tele::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:42%;
background:linear-gradient(90deg, var(--acc), transparent); transform-origin:left; animation:linegrow .9s ease both;}
@keyframes linegrow{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.cbar{display:inline-flex; gap:2px; align-items:center;}
.cbar i{width:9px; height:3px; background:rgba(163,196,216,.16);}
.cbar i.f{background:var(--acc);}
.cursor{display:inline-block; width:7px; height:13px; background:var(--acc); margin-left:6px; vertical-align:-2px; opacity:.85; animation:blink 1.15s steps(1) infinite;}
@media(max-width:560px){
.card{padding:18px 18px 16px;}
.tele{margin-bottom:11px; padding-bottom:8px; gap:8px;}
.card .verdict{margin-top:11px;}
.card h3{margin-top:9px;}
.suggest-line{margin-top:12px;}
}
.suggest-line{margin-top:16px; font-size:15px; line-height:1.75; color:var(--txt); display:flex; gap:10px; align-items:flex-start;}
.suggest-line .sl-arrow{color:var(--acc); font-family:var(--mono); flex:0 0 auto;}
.suggest-line .sl-lab{font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--acc); display:block; margin-bottom:2px;}
.draft-toggle{margin-top:12px;}
.draftbox{margin-top:10px;}
.queue{margin-top:14px;}
.queue-row{
width:100%; display:flex; align-items:center; gap:12px; text-align:left;
background:none; border:none; border-bottom:1px solid var(--line-soft);
color:var(--txt); padding:13px 4px; transition:.15s;
}
.queue-row:hover{background:rgba(95,168,188,.05);}
.queue-row .q-idx{font-family:var(--mono); font-size:11px; color:var(--txt3); flex:0 0 auto; width:18px;}
.queue-row .q-from{font-weight:700; font-size:13.5px; white-space:nowrap;}
.queue-row .q-subj{font-size:13.5px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;}
.queue-row .q-due{font-family:var(--mono); font-size:10.5px; color:var(--txt3); white-space:nowrap;}
.queue-row .q-due.late{color:var(--red);}
.card .c-top{display:flex; align-items:center; gap:11px; min-width:0;}
.initial{
width:34px; height:34px; flex:0 0 auto; border-radius:50%;
border:1px solid var(--line); color:var(--txt2);
display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:13px; background:rgba(163,196,216,.04);
}
.card .c-from{font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.card .c-meta{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--txt3); text-align:right; white-space:nowrap; line-height:1.7;}
.card h3{margin:11px 0 0; font-size:17.5px; font-weight:700; line-height:1.5;}
.chtag{
display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
padding:2px 8px; border:1px solid; border-radius:20px; vertical-align:2px; margin-left:8px; white-space:nowrap;
}
.chtag.danger{color:#D69BA1; border-color:rgba(192,113,122,.5); background:rgba(192,113,122,.07);}
.chtag.plain{color:var(--txt2); border-color:var(--line); background:rgba(163,196,216,.04);}
.sect-lab{font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--acc); display:block; margin-bottom:5px;}
.verdict{margin-top:15px;}
.verdict p{margin:0; font-size:15px; line-height:1.75; color:var(--txt);}
.warnline{display:flex; gap:8px; align-items:flex-start; margin-top:11px; color:#D8ACB0; font-size:13.5px; line-height:1.65;}
.warnline svg{width:15px; height:15px; flex:0 0 auto; color:var(--red); margin-top:3px;}
.suggest{
margin-top:14px; padding:12px 14px; border:1px solid var(--line-soft); border-radius:10px;
background:rgba(95,168,188,.05);
}
.suggest p{margin:0; font-size:14.5px; line-height:1.7;}
.draftbox{
margin-top:12px; padding:12px 14px; border:1px dashed rgba(163,196,216,.25); border-radius:10px;
background:rgba(5,10,17,.35);
}
.draftbox p{margin:0; font-size:13.5px; line-height:1.75; color:var(--txt2); white-space:pre-line; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
.card .todos{margin-top:10px;}
.todo-item{display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:14px;}
.t-box{
width:19px; height:19px; flex:0 0 auto; margin-top:2px; border:1.5px solid var(--acc-dim); border-radius:5px; background:transparent;
display:flex; align-items:center; justify-content:center; color:#06222B; transition:.15s; padding:0;
}
.t-box svg{width:12px; height:12px; opacity:0;}
.todo-item.done .t-box{background:var(--acc-dim);}
.todo-item.done .t-box svg{opacity:1;}
.todo-item.done .t-txt{color:var(--txt3); text-decoration:line-through;}
.todo-item .t-due{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--txt2); white-space:nowrap; padding-left:10px;}
.todo-item .t-due.late{color:var(--red);}
.bodybox{
display:none; margin-top:14px; padding:14px 16px; border:1px solid var(--line-soft); border-radius:10px;
background:rgba(4,8,14,.5); font-size:14px; line-height:1.85; color:#C3D3DE; white-space:pre-line;
}
.bodybox.show{display:block;}
.bodybox .bb-lab{font-family:var(--mono); font-size:9.5px; letter-spacing:.28em; color:var(--txt3); display:block; margin-bottom:8px;}
.actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft); position:relative;}
.btn{
display:inline-flex; align-items:center; gap:7px; padding:9px 14px; font-size:13.5px; letter-spacing:.06em;
background:none; border:1px solid transparent; border-radius:9px; color:var(--txt2); transition:.16s;
}
.btn svg{width:14px; height:14px;}
.btn:hover{border-color:rgba(95,168,188,.55); background:rgba(95,168,188,.08);}
.btn.primary{background:var(--acc-deep); border-color:rgba(95,168,188,.6); color:#F2FBFD; font-weight:700; clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);}
.btn.primary:hover{background:#356F7E;}
.btn.ghost{border-color:transparent; background:none; color:var(--txt2);}
.btn.ghost:hover{color:#fff; background:rgba(163,196,216,.06);}
.actions .sp{flex:1;}
.snooze-menu{
position:absolute; bottom:calc(100% + 8px); left:118px; z-index:30; min-width:180px; padding:5px;
background:var(--panel-solid); border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 36px rgba(0,0,0,.55);
display:none;
}
.snooze-menu.show{display:block;}
.snooze-menu button{display:flex; width:100%; justify-content:space-between; gap:14px; background:none; border:none; border-radius:6px; color:var(--txt); padding:9px 10px; font-size:13.5px;}
.snooze-menu button:hover{background:rgba(95,168,188,.1);}
.snooze-menu .sm-t{font-family:var(--mono); font-size:11px; color:var(--txt2);}
.allclear{
border:1px dashed rgba(163,196,216,.25); border-radius:14px; padding:26px 22px; text-align:center;
color:var(--txt2); font-size:15px; line-height:1.8;
}
.allclear .ac-n{font-family:var(--mono); color:var(--acc); font-size:12px; letter-spacing:.3em; display:block; margin-bottom:6px;}

/* ============ 分組摘要列 ============ */
.group{
border:1px solid var(--line-soft); border-radius:12px; background:rgba(163,196,216,.02);
margin-bottom:10px; overflow:hidden;
}
.group-head{
width:100%; display:flex; align-items:center; gap:12px; text-align:left;
background:none; border:none; color:var(--txt); padding:15px 18px;
}
.group-head .g-title{font-size:15.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap;}
.group-head .g-n{font-family:var(--mono); font-size:12px; color:var(--acc);}
.group-head .g-desc{display:none;}
.group-head .g-chev{margin-left:auto; flex:0 0 auto; color:var(--txt3); transition:transform .25s; display:flex;}
.group-head .g-chev svg{width:16px; height:16px;}
.group.open .g-chev{transform:rotate(180deg);}
.group-body{display:none; border-top:1px solid var(--line-soft); padding:6px 12px 10px;}
.group.open .group-body{display:block;}
.item{padding:13px 8px; border-bottom:1px solid var(--line-soft);}
.item:last-child{border-bottom:none;}
.item-head{width:100%; display:flex; align-items:baseline; gap:10px; background:none; border:none; color:var(--txt); text-align:left; padding:0;}
.item-head .i-from{font-weight:700; font-size:14px; white-space:nowrap;}
.item-head .i-subj{font-size:14px; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;}
.item-head .i-time{font-family:var(--mono); font-size:10.5px; color:var(--txt3); white-space:nowrap;}
.u-dot{width:6px; height:6px; border-radius:50%; background:var(--acc); flex:0 0 auto; align-self:center; box-shadow:0 0 6px rgba(95,168,188,.8);}
.i-verdict{margin-top:5px; font-size:13.5px; color:var(--txt2); line-height:1.7;}
.i-reason{margin-top:5px; font-size:13px; color:var(--txt2); display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap;}
.i-reason .r-lab{font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--acc); margin-top:3px; flex:0 0 auto;}
.i-reason .mini{margin-left:auto;}
.mini{
background:none; border:1px solid var(--line); border-radius:7px; color:var(--txt2);
font-size:12px; padding:4px 11px; letter-spacing:.06em; transition:.15s; white-space:nowrap;
}
.mini:hover{color:#fff; border-color:rgba(95,168,188,.55);}
.item .bodybox{margin-top:11px;}
.item .actions{margin-top:11px;}
.item .todos{margin-top:9px; border-top:1px solid var(--line-soft); padding-top:4px;}

/* ============ 通用列表視圖（待辦 / 稍後 / 封存 / 搜尋） ============ */
.viewhead{padding:34px 2px 6px;}
.viewhead h2{margin:0; font-size:22px; font-weight:500; letter-spacing:.03em;}
.viewhead .v-sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; color:var(--txt3); margin-top:7px;}
.tv-item{display:flex; gap:11px; align-items:flex-start; padding:14px 6px; border-bottom:1px solid var(--line-soft);}
.tv-item .t-txt{font-size:14.5px;}
.tv-item .t-src{font-size:12.5px; color:var(--txt2); margin-top:2px; display:block;}
.tv-item .t-due{font-family:var(--mono); font-size:11.5px; color:var(--txt2); white-space:nowrap; margin-left:auto; padding-left:10px; text-align:right;}
.tv-item .t-due.late{color:var(--red);}
.lv-item{display:flex; gap:12px; align-items:flex-start; padding:15px 6px; border-bottom:1px solid var(--line-soft);}
.lv-item .lv-main{flex:1; min-width:0;}
.lv-item .lv-from{font-weight:700; font-size:14.5px;}
.lv-item .lv-subj{font-size:14px; margin-top:1px;}
.lv-item .lv-note{font-size:12.5px; color:var(--txt2); margin-top:3px; font-family:var(--mono); letter-spacing:.04em;}
.empty-note{padding:40px 16px; text-align:center; color:var(--txt3); font-size:13.5px; letter-spacing:.14em;}

/* ============ 撰寫（彈窗） ============ */
.modal{
position:fixed; inset:0; z-index:120; display:none; align-items:flex-end; justify-content:center;
background:rgba(3,6,11,.74); backdrop-filter:blur(5px);
}
.modal.open{display:flex;}
@media(min-width:760px){.modal{align-items:center; padding:22px;}}
.compose{
width:100%; max-width:620px; max-height:92vh; overflow-y:auto;
background:var(--panel-solid); border:1px solid var(--line); border-radius:16px;
box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.compose .c-head{display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--line-soft);}
.compose .c-head b{letter-spacing:.14em; font-size:14.5px;}
.compose .ai-chip{font-family:var(--mono); font-size:9.5px; color:var(--acc); border:1px solid rgba(95,168,188,.4); border-radius:20px; padding:2px 8px; letter-spacing:.12em;}
.compose .c-x{margin-left:auto; background:none; border:1px solid var(--line-soft); border-radius:7px; color:var(--txt2); width:30px; height:30px; font-size:14px;}
.compose .c-fields{padding:8px 20px 0;}
.c-row{display:flex; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:14px;}
.c-row .c-lab{font-family:var(--mono); font-size:11px; color:var(--txt3); letter-spacing:.2em; width:44px; flex:0 0 auto;}
.c-row input{flex:1; min-width:0; background:none; border:none; outline:none; color:#fff; font-size:14px;}
.compose textarea{
width:100%; min-height:190px; margin-top:14px; background:rgba(3,8,14,.6); border:1px solid var(--line-soft); border-radius:10px;
color:var(--txt); padding:13px; font-size:14.5px; line-height:1.8; outline:none; resize:vertical;
}
.compose textarea:focus{border-color:rgba(95,168,188,.5);}
.c-foot{display:flex; gap:10px; padding:16px 20px 20px; flex-wrap:wrap; align-items:center;}
.c-note{font-size:12px; color:var(--txt2); display:flex; gap:7px; align-items:center; max-width:36ch;}
.c-note svg{width:14px; height:14px; color:var(--acc); flex:0 0 auto;}

/* Toast */
#toast{
position:fixed; left:50%; bottom:96px; transform:translate(-50%,16px); z-index:150; opacity:0; pointer-events:none;
background:var(--panel-solid); border:1px solid rgba(95,168,188,.45); border-radius:10px; color:#fff; padding:11px 17px; font-size:13.5px;
box-shadow:0 16px 40px rgba(0,0,0,.55); transition:.3s; display:flex; gap:14px; align-items:center; max-width:92vw;
}
#toast.show{opacity:1; transform:translate(-50%,0); pointer-events:auto;}
#toast button{background:none; border:none; color:var(--acc); font-weight:700; font-size:13.5px; letter-spacing:.08em;}
@media(min-width:1024px){#toast{bottom:30px;}}

/* 手機底部導航 */
.mobilenav{
position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex;
background:rgba(6,11,18,.94); border-top:1px solid var(--line-soft); backdrop-filter:blur(14px);
padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:1024px){.mobilenav{display:none;}}
.mobilenav button{
flex:1; background:none; border:none; color:var(--txt2); padding:9px 0 7px; font-size:11px; letter-spacing:.12em;
display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
}
.mobilenav button svg{width:19px; height:19px;}
.mobilenav button.on{color:var(--acc);}
.mobilenav button.on::before{content:""; position:absolute; top:-1px; left:30%; right:30%; height:1px; background:var(--acc); box-shadow:0 0 7px rgba(95,168,188,.8);}
.mobilenav .mn-badge{position:absolute; top:3px; right:calc(50% - 19px); background:var(--acc-deep); border:1px solid rgba(95,168,188,.6); color:#EAF7FA; font-family:var(--mono); font-size:9.5px; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px;}

/* ============ 座艙層 COCKPIT：包覆框架・頂置控制台・MFD 操控台 ============ */
/* 艙體暗角：四周沉下去，中央視窗亮起來 — 人坐在艙裡往外看 */
body{background:
radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(0,0,0,.5) 100%),
radial-gradient(1000px 480px at 50% -12%, rgba(95,168,188,.055), transparent 62%),
linear-gradient(168deg, var(--bg), var(--bg2) 58%, #04070C);
background-attachment:fixed;}

/* 艙框：固定在視窗四邊的細框與切角，像座艙罩的邊框 */
.ck-frame{position:fixed; inset:9px; z-index:60; pointer-events:none;
border:1px solid rgba(163,196,216,.16); border-radius:16px;
box-shadow:inset 0 0 60px rgba(0,0,0,.35);}
.ck-frame::before,.ck-frame::after{content:""; position:absolute; width:26px; height:26px;}
.ck-frame::before{top:-1px; left:-1px; border-top:2px solid rgba(95,168,188,.65); border-left:2px solid rgba(95,168,188,.65); border-top-left-radius:15px;}
.ck-frame::after{bottom:-1px; right:-1px; border-bottom:2px solid rgba(95,168,188,.65); border-right:2px solid rgba(95,168,188,.65); border-bottom-right-radius:15px;}
@media(max-width:640px){.ck-frame{inset:6px; border-radius:12px;}}

/* 兩側遙測柱：桌面寬版才出現，把畫面「包」進艙裡 */
.rail{position:fixed; top:50%; transform:translateY(-50%); z-index:55; width:46px;
display:none; flex-direction:column; align-items:center; gap:16px; pointer-events:none;
padding:20px 0; border:1px solid rgba(163,196,216,.13); border-radius:12px;
background:linear-gradient(180deg, rgba(10,20,31,.85), rgba(6,11,18,.85));
box-shadow:inset 0 1px 0 rgba(215,238,246,.06), 0 14px 34px rgba(0,0,0,.4);}
@media(min-width:1240px){.rail{display:flex;}}
.rail-l{left:max(14px, calc(50% - 600px));}
.rail-r{right:max(14px, calc(50% - 600px));}
.rail .r-lab{writing-mode:vertical-rl; font-family:var(--mono); font-size:9.5px; letter-spacing:.34em; color:var(--txt3);}
.rail .r-lab b{color:var(--acc); font-weight:500;}
.rail .r-sw{display:flex; flex-direction:column; gap:9px; align-items:center;}
.rail .r-sw i{width:9px; height:9px; border-radius:50%; border:1px solid rgba(163,196,216,.35); background:rgba(163,196,216,.06);}
.rail .r-sw i.on{background:var(--acc); border-color:var(--acc); box-shadow:0 0 7px rgba(95,168,188,.75);}
.rail .r-sw i.dim{background:rgba(95,168,188,.35); border-color:rgba(95,168,188,.35);}
.rail .r-scr{width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 32%, #3A4A56, #131C25 68%); box-shadow:inset 0 0 2px rgba(0,0,0,.8);}

/* 頂置控制台 OVERHEAD PANEL：駕駛艙頭頂那排開關與狀態燈 */
.ohc{
display:flex; align-items:stretch; gap:0; margin:14px 0 0;
border:1px solid rgba(163,196,216,.2); border-radius:11px; overflow:hidden;
background:linear-gradient(180deg, #0C1826, #060D16);
box-shadow:inset 0 1px 0 rgba(215,238,246,.07), inset 0 -8px 14px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.35);
}
.ohc .ohc-stripes{flex:0 0 34px;
background:repeating-linear-gradient(-45deg, rgba(95,168,188,.34) 0 6px, rgba(6,12,19,.9) 6px 12px);
border-right:1px solid rgba(163,196,216,.18);}
.ohc .cell{flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 4px;
border-right:1px solid rgba(163,196,216,.1);
font-family:var(--mono); font-size:9.5px; letter-spacing:.22em; color:var(--txt2); white-space:nowrap;}
.ohc .cell:last-child{border-right:none;}
.ohc .cell .dot{width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 6px rgba(95,168,188,.85); flex:0 0 auto;}
.ohc .cell .dot.dim{background:rgba(95,168,188,.4); box-shadow:none;}
.ohc .cell b{color:var(--txt); font-weight:500;}
@media(max-width:640px){
.ohc{margin-top:10px;}
.ohc .ohc-stripes{flex-basis:22px;}
.ohc .cell{padding:6px 2px; font-size:8.5px; letter-spacing:.14em;}
.ohc .cell.hideS{display:none;}
}

/* 頂列改成控制台橫樑 */
.topbar{
margin-top:10px; padding:11px 12px;
border:1px solid rgba(163,196,216,.16); border-radius:11px;
background:linear-gradient(180deg, rgba(163,196,216,.05), rgba(4,8,14,.42));
box-shadow:inset 0 1px 0 rgba(215,238,246,.05), 0 8px 20px rgba(0,0,0,.28);
}

/* 判讀簡報＝座艙罩視窗：厚框、內影、玻璃斜反射，往外看的那片窗 */
.brief{
margin-top:16px; padding:26px 26px 20px; overflow:hidden;
border:1px solid rgba(163,196,216,.22); border-radius:18px;
background:
linear-gradient(115deg, rgba(215,238,246,.05) 0%, transparent 26%),
linear-gradient(180deg, rgba(10,22,34,.55), rgba(5,10,17,.28));
box-shadow:
inset 0 1px 0 rgba(215,238,246,.08),
inset 0 -18px 30px rgba(0,0,0,.35),
inset 0 0 0 5px rgba(4,8,13,.55),
0 20px 44px rgba(0,0,0,.4);
}
.brief::before{left:-140px;}
.brief::after{ /* 罩面玻璃的斜向反光 */
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(112deg, transparent 42%, rgba(215,238,246,.045) 50%, transparent 60%);
}
@media(max-width:640px){
.brief{margin-top:12px; padding:17px 16px 14px; border-radius:15px;}
}

/* 決策卡＝多功能顯示器 MFD：粗邊框、四角螺絲、螢幕掃描紋、側邊握把刻紋 */
.card{
border:1px solid rgba(163,196,216,.3); border-radius:14px;
background:
radial-gradient(circle at 35% 32%, #43586A, #141F2A 68%) ,
radial-gradient(circle at 35% 32%, #43586A, #141F2A 68%),
radial-gradient(circle at 35% 32%, #43586A, #141F2A 68%),
radial-gradient(circle at 35% 32%, #43586A, #141F2A 68%),
repeating-linear-gradient(0deg, rgba(215,238,246,.014) 0 2px, transparent 2px 4px),
linear-gradient(180deg, rgba(163,196,216,.06), rgba(163,196,216,.028));
background-size:9px 9px, 9px 9px, 9px 9px, 9px 9px, 100% 100%, 100% 100%;
background-position:11px 11px, calc(100% - 11px) 11px, 11px calc(100% - 11px), calc(100% - 11px) calc(100% - 11px), 0 0, 0 0;
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
box-shadow:
0 0 0 6px #050B12,
0 0 0 7px rgba(163,196,216,.22),
inset 0 1px 0 rgba(215,238,246,.09),
inset 0 0 34px rgba(0,0,0,.3),
0 26px 54px rgba(0,0,0,.55);
padding:24px 26px 20px 34px;
}
.card::before{top:12px; left:12px; width:0; height:0; border:none;}
.card::after{bottom:12px; right:12px; width:0; height:0; border:none;}
.card .tele{border-bottom:1px solid rgba(163,196,216,.16);}
@media(max-width:560px){.card{padding:17px 17px 15px 24px;}}

/* 動作列＝按鍵甲板：實體背光鍵，有厚度、按得下去 */
.card .actions{border-top:1px solid rgba(163,196,216,.16); padding-top:15px;}
.btn{
background:linear-gradient(180deg, #0E1B29, #070F18);
border:1px solid rgba(163,196,216,.28); border-radius:8px; color:var(--txt);
box-shadow:0 3px 0 rgba(0,0,0,.65), inset 0 1px 0 rgba(215,238,246,.09);
padding:10px 15px;
}
.btn:hover{border-color:rgba(95,168,188,.6); background:linear-gradient(180deg, #122636, #0A1826);}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.65), inset 0 1px 0 rgba(215,238,246,.06);}
.btn.primary{
background:linear-gradient(180deg, #3A7688, #26505F); border-color:rgba(160,215,230,.55); color:#F4FCFE;
box-shadow:0 3px 0 #122B36, 0 6px 16px rgba(95,168,188,.22), inset 0 1px 0 rgba(255,255,255,.22);
text-shadow:0 0 8px rgba(190,235,245,.45);
}
.btn.primary:hover{background:linear-gradient(180deg, #44879C, #2C5F6D);}
.btn.primary:active{transform:translateY(2px); box-shadow:0 1px 0 #122B36, inset 0 1px 0 rgba(255,255,255,.15);}
.btn.ghost{background:linear-gradient(180deg, rgba(163,196,216,.05), rgba(4,8,14,.3)); border-color:rgba(163,196,216,.16); color:var(--txt2); box-shadow:0 3px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(215,238,246,.05);}
.mini{
background:linear-gradient(180deg, #0C1826, #060D16); border-color:rgba(163,196,216,.3);
box-shadow:0 2px 0 rgba(0,0,0,.6), inset 0 1px 0 rgba(215,238,246,.08);
}
.mini:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.6);}

/* 焦點列＝MFD 上方的機身標牌 */
.focus-meta{
border:1px solid rgba(163,196,216,.14); border-radius:9px; padding:8px 13px;
background:linear-gradient(180deg, rgba(163,196,216,.045), rgba(4,8,14,.35));
box-shadow:inset 0 1px 0 rgba(215,238,246,.05);
}
.focus-meta .fm-line{background:rgba(163,196,216,.14);}

/* 分組＝艙內子面板 */
.group{
border:1px solid rgba(163,196,216,.15); border-radius:11px;
background:linear-gradient(180deg, rgba(163,196,216,.035), rgba(4,8,14,.3));
box-shadow:inset 0 1px 0 rgba(215,238,246,.04), 0 8px 20px rgba(0,0,0,.25);
}
.queue-row{border-bottom:1px solid rgba(163,196,216,.1);}

/* 底部導航＝下控制台：厚台面、按鍵有行程，當前鍵亮起 */
.mobilenav{
background:linear-gradient(180deg, #0B1622, #04080E);
border-top:2px solid rgba(163,196,216,.22);
box-shadow:0 -12px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(215,238,246,.06);
padding:7px 8px calc(7px + env(safe-area-inset-bottom)); gap:6px;
}
.mobilenav button{
border:1px solid rgba(163,196,216,.12); border-radius:9px;
background:linear-gradient(180deg, rgba(163,196,216,.05), rgba(0,0,0,.28));
box-shadow:0 2px 0 rgba(0,0,0,.55), inset 0 1px 0 rgba(215,238,246,.05);
padding:8px 0 6px;
}
.mobilenav button:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.55);}
.mobilenav button.on{
color:#DFF4FA; border-color:rgba(95,168,188,.5);
background:linear-gradient(180deg, rgba(95,168,188,.17), rgba(95,168,188,.05));
box-shadow:0 2px 0 rgba(0,0,0,.55), inset 0 0 14px rgba(95,168,188,.14);
}
.mobilenav button.on::before{left:22%; right:22%;}

@media(max-width:640px){
/* 手機：座艙件全數收緊，補回頂置控制台佔掉的高度，第一張卡的核准鍵維持在第一眼 */
.ohc{margin-top:8px;}
.ohc .cell{padding:3px 2px;}
.topbar{margin-top:6px; padding:7px 10px;}
.brief{margin-top:8px; padding:12px 14px 10px;}
.brief .b-kicker{margin-bottom:6px;}
.brief h2{font-size:20px; line-height:1.45;}
.brief .statline{margin-top:6px;}
.core{width:74px; height:74px;}
.core svg{width:74px; height:74px;}
.core .core-num b{font-size:21px;}
.core .core-num span{font-size:8.5px; margin-top:3px;}
.focus-meta{margin-top:10px; padding:5px 11px;}
.card{padding:13px 15px 12px 22px;}
.tele{margin-bottom:8px; padding-bottom:6px;}
.card .c-top .initial{width:30px; height:30px; font-size:12px;}
.card h3{margin-top:7px; font-size:16px; line-height:1.45;}
.card .verdict{margin-top:8px;}
.suggest-line{margin-top:8px;}
.card .actions{margin-top:10px; padding-top:9px;}
.btn{padding:9px 13px;}
}

/* ============ 座艙強化 COCKPIT-II：A 柱・橫樑・遮光罩簷・撥桿開關 ============ */
/* 艙內暗角再沉一階，中央視窗更像往外看 */
body{background:
radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(0,0,0,.62) 100%),
radial-gradient(1000px 480px at 50% -12%, rgba(95,168,188,.055), transparent 62%),
linear-gradient(168deg, var(--bg), var(--bg2) 58%, #04070C);
background-attachment:fixed;}
/* 座艙框：內影加深＋兩側鉚點列，框體有厚度 */
.ck-frame{
box-shadow:inset 0 0 90px rgba(0,0,0,.52), inset 0 0 18px rgba(0,0,0,.4);
background-image:
radial-gradient(circle, rgba(163,196,216,.42) 1.1px, transparent 1.6px),
radial-gradient(circle, rgba(163,196,216,.42) 1.1px, transparent 1.6px);
background-size:5px 46px, 5px 46px;
background-position:1px 26px, calc(100% - 1px) 26px;
background-repeat:repeat-y;
}
/* 頂／底橫樑：艙罩上下邊的實體樑，中央一枚標記 */
.ck-beam{position:fixed; left:0; right:0; z-index:61; pointer-events:none;
background:linear-gradient(180deg, #0D1A29, #05090F);}
.ck-beam::after{content:""; position:absolute; left:50%; transform:translateX(-50%);
width:36px; height:2px; background:rgba(95,168,188,.55); box-shadow:0 0 6px rgba(95,168,188,.5);}
.ck-beam-t{top:0; height:9px; border-bottom:1px solid rgba(163,196,216,.28); box-shadow:0 5px 12px rgba(0,0,0,.5);}
.ck-beam-t::after{bottom:1px;}
.ck-beam-b{display:none;}
@media(min-width:1024px){
.ck-beam-b{display:block; bottom:0; height:11px; border-top:1px solid rgba(163,196,216,.28); box-shadow:0 -5px 12px rgba(0,0,0,.5);}
.ck-beam-b::after{top:1px;}
}
@media(max-width:640px){.ck-beam-t{height:7px;}}

/* A 柱：自頂角斜下收窄的艙罩支柱，內緣帶鉚點 — 視線被「框」進艙裡 */
.ck-pillar{position:fixed; top:0; z-index:57; width:17px; height:54vh; pointer-events:none;
filter:drop-shadow(3px 0 5px rgba(0,0,0,.45));}
.ck-pillar-l{left:0; clip-path:polygon(0 0, 100% 0, 56% 100%, 0 100%);
background:
radial-gradient(circle, rgba(163,196,216,.35) 1px, transparent 1.5px),
linear-gradient(90deg, #04070C, #0C1A29 72%, #0A141F);
background-size:5px 52px, 100% 100%;
background-position:2px 30px, 0 0;
background-repeat:repeat-y, no-repeat;}
.ck-pillar-r{right:0; clip-path:polygon(0 0, 100% 0, 100% 100%, 44% 100%);
filter:drop-shadow(-3px 0 5px rgba(0,0,0,.45));
background:
radial-gradient(circle, rgba(163,196,216,.35) 1px, transparent 1.5px),
linear-gradient(270deg, #04070C, #0C1A29 72%, #0A141F);
background-size:5px 52px, 100% 100%;
background-position:calc(100% - 2px) 30px, 0 0;
background-repeat:repeat-y, no-repeat;}
@media(max-width:640px){.ck-pillar{width:11px; height:36vh; opacity:.95;}}

/* 頂置控制台：右端警示斜紋端蓋＋撥桿開關（開在上、關在下） */
.ohc .ohc-stripes.r{border-right:none; border-left:1px solid rgba(163,196,216,.18);}
.ohc .sw{width:9px; height:15px; flex:0 0 auto; position:relative;
border:1px solid rgba(163,196,216,.38); border-radius:3px; background:#03070C;
box-shadow:inset 0 0 4px rgba(0,0,0,.85);}
.ohc .sw i{position:absolute; left:1px; right:1px; top:1px; height:6px; border-radius:1.5px;
background:linear-gradient(180deg, #37586A, #17262F);
box-shadow:0 1px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(215,238,246,.28);}
.ohc .sw.off i{top:auto; bottom:1px; background:linear-gradient(180deg, #243646, #101A24); box-shadow:inset 0 1px 0 rgba(215,238,246,.14);}

/* 主視窗遮光罩簷 GLARESHIELD：簷壓在視窗上方、往下投影，簷面有標牌與中央標記 */
.brief{padding-top:37px;}
.canopy-top{
position:absolute; top:0; left:0; right:0; height:19px; z-index:3;
display:flex; align-items:center; gap:10px; padding:0 13px;
background:linear-gradient(180deg, #0C1928, rgba(6,11,18,.92));
border-bottom:1px solid rgba(163,196,216,.22);
box-shadow:0 14px 22px rgba(0,0,0,.38), inset 0 1px 0 rgba(215,238,246,.06);
font-family:var(--mono); font-size:8.5px; letter-spacing:.26em; color:var(--txt3); white-space:nowrap;
}
.canopy-top .ct-mid{margin:0 auto; width:30px; height:2px; flex:0 0 auto;
background:rgba(95,168,188,.55); box-shadow:0 0 6px rgba(95,168,188,.5);}
.canopy-top b{color:var(--acc); font-weight:500; letter-spacing:.1em;}

/* MFD 邊框握把刻紋：左右框緣的防滑脊，顯示器更厚實可握 */
.card::before,.card::after{
top:27px; bottom:27px; width:7px; height:auto; z-index:2;
border:1px solid rgba(163,196,216,.16); border-radius:4px;
background:repeating-linear-gradient(180deg, rgba(215,238,246,.13) 0 3px, rgba(0,0,0,.38) 3px 6px);
box-shadow:inset 0 0 4px rgba(0,0,0,.5);
}
.card::before{left:5px;}
.card::after{right:5px;}
@media(min-width:561px){.card::before{left:9px; width:9px;} .card::after{right:9px; width:9px;}}

/* 側柱升級為側控制台：錶盤、量表條、警示斜紋塊 */
.rail{width:56px; gap:13px;}
.rail .r-dial{width:31px; height:31px; border-radius:50%; position:relative; flex:0 0 auto;
border:1px solid rgba(163,196,216,.32);
background:radial-gradient(circle, rgba(163,196,216,.07) 0 52%, rgba(0,0,0,.34) 78%);
box-shadow:inset 0 0 8px rgba(0,0,0,.55), 0 1px 0 rgba(215,238,246,.05);}
.rail .r-dial::after{content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px 0 0 -2px;
border-radius:50%; background:var(--acc);}
.rail .r-dial i{position:absolute; left:50%; top:50%; width:11px; height:1.6px; margin-top:-1px;
background:var(--acc); transform-origin:left center; transform:rotate(-38deg);
box-shadow:0 0 4px rgba(95,168,188,.6);}
.rail .r-dial2 i{transform:rotate(24deg);}
.rail .r-bars{display:flex; flex-direction:column; gap:3px; width:27px;}
.rail .r-bars i{height:3px; background:rgba(163,196,216,.14);}
.rail .r-bars i.f{background:var(--acc-dim);}
.rail .r-caution{width:20px; height:34px; flex:0 0 auto;
border:1px solid rgba(163,196,216,.18);
background:repeating-linear-gradient(-45deg, rgba(95,168,188,.3) 0 5px, rgba(6,12,19,.92) 5px 10px);}

/* 下控制台檯面上緣的儀表簷唇（手機） */
.mobilenav{pointer-events:none;}
.mobilenav button{pointer-events:auto;}
.mobilenav::before{
content:""; position:absolute; top:-9px; left:5%; right:5%; height:9px; pointer-events:none;
background:
radial-gradient(circle, rgba(95,168,188,.8) 1.4px, transparent 2px),
linear-gradient(180deg, #0E1C2C, #060D16);
background-size:100% 100%, 100% 100%;
background-position:center 2px, 0 0;
background-repeat:no-repeat;
border:1px solid rgba(163,196,216,.22); border-bottom:none; border-radius:7px 7px 0 0;
box-shadow:inset 0 1px 0 rgba(215,238,246,.07), 0 -4px 10px rgba(0,0,0,.35);
}

@media(max-width:640px){
/* 手機：簷佔掉的高度逐項收回，第一張卡的核准鍵維持在第一眼 */
.ohc{margin-top:5px;}
.ohc .cell{padding:2px 2px;}
.ohc .ohc-stripes,.ohc .ohc-stripes.r{flex-basis:16px;}
.topbar{margin-top:4px; padding:5px 10px;}
.brief{margin-top:6px; padding-top:20px;}
.canopy-top{height:16px; padding:0 10px; font-size:8px; letter-spacing:.16em;}
.canopy-top .ct-mid{width:20px;}
.focus-meta{margin-top:8px;}
}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;}
#main{opacity:1; transform:none;}
}

/* ================================================================
   COCKPIT-III · PILOT-EYE — 不是在平面上貼儀表，是坐在駕駛座往前看
   空間分工（由上而下、由遠而近）：
   頂置面板（頭頂）→ 弧形風擋＋中央柱 → HUD 投影在風擋玻璃上
   → 遮光罩（glareshield）→ 儀表台面：姿態儀／量表／系統燈＋中央 MFD
   → 中央 pedestal 油門台＋駕駛桿（畫面最下方、離飛行員最近）
   內容仍是主角：HUD 刻度退到玻璃邊緣、儀表收成一條台面帶，
   決策卡就是台面正中央的主顯示器。
   ================================================================ */

/* 艙內地板與座椅暗部：視窗四周再沉，中央風擋最亮 */
body{background:
radial-gradient(130% 80% at 50% 30%, transparent 46%, rgba(0,0,0,.66) 100%),
radial-gradient(1000px 480px at 50% -12%, rgba(95,168,188,.05), transparent 62%),
linear-gradient(168deg, var(--bg), var(--bg2) 58%, #03060A);
background-attachment:fixed;}
#app{padding-bottom:190px;}
@media(max-width:1023px){#app{padding-bottom:210px;}}

/* — 風擋弧頂：整片玻璃的上緣是弧的，不是方的 — */
.ck-canopy{position:fixed; top:-80px; left:50%; transform:translateX(-50%); z-index:58;
width:132vw; max-width:1500px; height:104px; pointer-events:none;
border-bottom:10px solid #060D16; border-radius:0 0 50% 50%;
box-shadow:0 10px 22px rgba(0,0,0,.55), inset 0 -14px 18px rgba(0,0,0,.5), 0 1px 0 rgba(163,196,216,.14);}
.ck-canopy::after{content:""; position:absolute; left:50%; bottom:-13px; transform:translateX(-50%);
width:120px; height:3px; background:rgba(95,168,188,.5); box-shadow:0 0 8px rgba(95,168,188,.55);}
/* 風擋中央柱：兩片玻璃中間那根柱，視野被它自然分開 */
.ck-centerpost{position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:57;
width:13px; height:13vh; pointer-events:none;
clip-path:polygon(18% 0, 82% 0, 100% 100%, 0 100%);
background:linear-gradient(90deg, #03060A, #10202F 50%, #03060A);
box-shadow:2px 0 6px rgba(0,0,0,.4), -2px 0 6px rgba(0,0,0,.4);}
@media(max-width:640px){.ck-centerpost{height:8vh; width:9px;} .ck-canopy{top:-84px; height:96px;}}

/* A 柱加寬、拉長、更斜 — 從風擋角落一路斜下到儀表台兩端 */
.ck-pillar{width:30px; height:78vh; opacity:1;}
.ck-pillar-l{clip-path:polygon(0 0, 100% 0, 34% 100%, 0 100%);
background:
radial-gradient(circle, rgba(163,196,216,.32) 1px, transparent 1.5px),
linear-gradient(90deg, #020407, #0D1D2D 68%, #08131E);
background-size:6px 54px, 100% 100%; background-position:3px 34px, 0 0; background-repeat:repeat-y, no-repeat;}
.ck-pillar-r{clip-path:polygon(0 0, 100% 0, 100% 100%, 66% 100%);
background:
radial-gradient(circle, rgba(163,196,216,.32) 1px, transparent 1.5px),
linear-gradient(270deg, #020407, #0D1D2D 68%, #08131E);
background-size:6px 54px, 100% 100%; background-position:calc(100% - 3px) 34px, 0 0; background-repeat:repeat-y, no-repeat;}
@media(max-width:640px){.ck-pillar{width:15px; height:52vh;}}

/* 頂置面板：微微朝飛行員傾斜，像頭頂那排開關真的在上方 */
.ohc{transform:perspective(700px) rotateX(14deg); transform-origin:top center;
border-radius:9px 9px 13px 13px;
box-shadow:inset 0 1px 0 rgba(215,238,246,.07), inset 0 -10px 16px rgba(0,0,0,.55), 0 14px 26px rgba(0,0,0,.45);}

/* ——— 風擋 HUD：簡報不再裝在盒子裡，是投影在玻璃上的符號 ——— */
.brief{
border:none; border-radius:26px 26px 16px 16px;
border-top:6px solid #050B12;
background:
linear-gradient(180deg, rgba(95,168,188,.075), rgba(95,168,188,.015) 55%, rgba(4,8,14,.22)),
linear-gradient(115deg, rgba(215,238,246,.045) 0%, transparent 26%);
box-shadow:
inset 0 1px 0 rgba(215,238,246,.1),
inset 0 -26px 34px rgba(0,0,0,.42),
inset 6px 0 18px rgba(0,0,0,.28), inset -6px 0 18px rgba(0,0,0,.28),
0 18px 40px rgba(0,0,0,.38);
padding-top:52px;
}
.brief h2{text-shadow:0 0 14px rgba(95,168,188,.16);}
.brief .b-kicker{text-shadow:0 0 8px rgba(95,168,188,.35);}
/* 航向刻度帶：壓在風擋上緣，正中是目前航向 */
.hud-hdg{position:absolute; top:23px; left:50%; transform:translateX(-50%); z-index:2;
display:flex; align-items:flex-end; gap:13px; white-space:nowrap;
font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:rgba(160,200,215,.5);}
.hud-hdg .hh-on{color:#DFF6FC; font-size:10.5px; font-weight:600; padding:1px 7px;
border:1px solid rgba(95,168,188,.65); background:rgba(95,168,188,.1); box-shadow:0 0 8px rgba(95,168,188,.25);}
.hud-hdg i{display:block; width:1px; height:5px; background:rgba(160,200,215,.4); margin:0 auto 2px;}
/* 俯仰梯 + 地平線：只在玻璃中央淡淡一道，不壓文字 */
.hud-pitch{position:absolute; inset:44px 0 6px; z-index:0; pointer-events:none; opacity:.5;}
.hud-pitch .hp-horizon{position:absolute; left:16%; right:16%; top:56%; height:1px;
background:linear-gradient(90deg, transparent, rgba(95,168,188,.55) 22%, rgba(95,168,188,.55) 78%, transparent);}
.hud-pitch .hp-mark{position:absolute; left:50%; transform:translateX(-50%); height:1px; background:rgba(160,200,215,.35);}
.hud-pitch .hp-mark::before,.hud-pitch .hp-mark::after{content:""; position:absolute; top:0; width:1px; height:4px; background:rgba(160,200,215,.35);}
.hud-pitch .hp-mark::before{left:0;} .hud-pitch .hp-mark::after{right:0;}
.hud-pitch .hp-fpv{position:absolute; left:63%; top:calc(56% - 8px); width:16px; height:16px;
border:1.5px solid rgba(95,168,188,.75); border-radius:50%; box-shadow:0 0 7px rgba(95,168,188,.3);}
.hud-pitch .hp-fpv::before,.hud-pitch .hp-fpv::after{content:""; position:absolute; top:50%; width:9px; height:1.5px; background:rgba(95,168,188,.75);}
.hud-pitch .hp-fpv::before{right:100%;} .hud-pitch .hp-fpv::after{left:100%;}
/* 左右速度／高度帶：貼在玻璃兩緣，數字就是本輪判讀量 */
.hud-tape{position:absolute; top:52px; bottom:12px; z-index:0; width:30px; pointer-events:none;
display:flex; flex-direction:column; justify-content:space-between; align-items:center;
font-family:var(--mono); font-size:8.5px; color:rgba(160,200,215,.48); letter-spacing:.05em;}
.hud-tape::before{content:""; position:absolute; top:0; bottom:0; width:1px; background:rgba(160,200,215,.18);}
.hud-tape-l{left:5px;} .hud-tape-l::before{right:2px;}
.hud-tape-r{right:5px;} .hud-tape-r::before{left:2px;}
.hud-tape b{color:rgba(223,246,252,.9); font-weight:600; background:rgba(5,10,17,.55); padding:0 2px; position:relative; z-index:1;}
@media(max-width:640px){
.brief{padding-top:42px;}
.hud-hdg{top:19px; gap:9px;} .hud-hdg .hh-dim{display:none;}
.hud-pitch .hp-horizon{left:9%; right:9%;}
.hud-tape{display:none;}
}

/* ——— 遮光罩 GLARESHIELD：風擋與儀表台之間那道厚簷 ——— */
.glareshield{
margin-top:12px; position:relative; z-index:3;
clip-path:polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
background:linear-gradient(180deg, #132434, #060D16 78%);
box-shadow:inset 0 2px 0 rgba(215,238,246,.09);
padding:9px 22px 10px;
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.glareshield .gs-lab{font-family:var(--mono); font-size:8.5px; letter-spacing:.3em; color:var(--txt3); margin-right:2px;}
.gs-light{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; color:var(--txt3);
border:1px solid rgba(163,196,216,.2); border-radius:4px; padding:3px 8px;
background:linear-gradient(180deg, rgba(163,196,216,.04), rgba(0,0,0,.3)); white-space:nowrap;}
.gs-light.lit{color:#DFF6FC; border-color:rgba(95,168,188,.6); background:rgba(95,168,188,.14);
box-shadow:inset 0 0 9px rgba(95,168,188,.22), 0 0 6px rgba(95,168,188,.18);}
.gs-light.warn{color:#E3B7BB; border-color:rgba(192,113,122,.55); background:rgba(192,113,122,.1);}
.glareshield .gs-right{margin-left:auto; font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; color:var(--txt3);}
@media(max-width:640px){.glareshield{margin-top:8px; padding:6px 16px 7px;} .glareshield .gs-right{display:none;} .gs-light{padding:2px 6px;}}

/* ——— 儀表台面帶：姿態儀＋雙量表＋系統燈，收成一條，不另開區塊 ——— */
.inst-strip{
margin-top:10px; display:flex; align-items:center; gap:18px;
padding:10px 18px; border:1px solid rgba(163,196,216,.18); border-radius:12px;
background:
radial-gradient(circle at 35% 32%, #43586A, #141F2A 68%),
radial-gradient(circle at 35% 32%, #43586A, #141F2A 68%),
repeating-linear-gradient(0deg, rgba(215,238,246,.012) 0 2px, transparent 2px 4px),
linear-gradient(180deg, #0B1724, #050B12);
background-size:8px 8px, 8px 8px, 100% 100%, 100% 100%;
background-position:9px 9px, calc(100% - 9px) 9px, 0 0, 0 0;
background-repeat:no-repeat, no-repeat, repeat, no-repeat;
box-shadow:inset 0 1px 0 rgba(215,238,246,.06), inset 0 -10px 18px rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.35);
}
.inst{display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto;}
.inst .i-lab{font-family:var(--mono); font-size:8px; letter-spacing:.26em; color:var(--txt3); padding-left:.26em;}
/* 姿態儀：球面裡天地線是斜的，機翼符號固定在正中 */
.att-ball{width:52px; height:52px; border-radius:50%; overflow:hidden; position:relative; flex:0 0 auto;
border:2px solid #1A2B3B; box-shadow:inset 0 0 10px rgba(0,0,0,.6), 0 0 0 1px rgba(163,196,216,.25);}
.att-roll{position:absolute; inset:-32%; transform:rotate(-9deg) translateY(-4px);}
.att-sky{position:absolute; left:0; right:0; top:0; height:50%; background:linear-gradient(180deg, #3E7185, #2C5F6D);}
.att-gnd{position:absolute; left:0; right:0; bottom:0; height:50%; background:linear-gradient(180deg, #131B23, #090E14);}
.att-roll::after{content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:#DFF6FC; opacity:.85;}
.att-fixed{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;}
.att-fixed svg{width:34px; height:14px;}
.att-tick{position:absolute; top:3px; left:50%; transform:translateX(-50%); z-index:2;
width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid var(--acc);}
.inst svg.gauge{width:52px; height:52px; display:block;}
.inst .i-val{font-family:var(--mono); font-size:9.5px; color:var(--txt2); letter-spacing:.06em;}
.inst .i-val b{color:#fff; font-weight:600;}
/* 系統燈陣列：台面右側的 annunciator 小格 */
.sys-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin-left:auto;}
.sys-grid i{font-style:normal; font-family:var(--mono); font-size:7.5px; letter-spacing:.12em; text-align:center;
color:var(--txt3); border:1px solid rgba(163,196,216,.16); border-radius:3px; padding:3px 6px;
background:rgba(0,0,0,.3); white-space:nowrap;}
.sys-grid i.lit{color:#CDEEF6; border-color:rgba(95,168,188,.5); background:rgba(95,168,188,.12);}
@media(max-width:640px){
.inst-strip{gap:12px; padding:7px 12px; margin-top:7px;}
.att-ball{width:42px; height:42px;}
.inst svg.gauge{width:42px; height:42px;}
.inst .i-val{display:none;}
.sys-grid{grid-template-columns:repeat(2, 1fr);}
.sys-grid i:nth-child(n+5){display:none;}
}

/* MFD 與台面帶同屬一個儀表台：間距收緊、邊框同語言 */
.focus-meta{margin-top:12px;}
@media(max-width:640px){.focus-meta{margin-top:8px;}}

/* ——— 兩側控制台（桌面）：座椅兩旁的手肘台，帶撥桿與旋鈕 ——— */
.console{position:fixed; bottom:64px; z-index:54; width:104px; pointer-events:none; display:none;
padding:14px 12px; border:1px solid rgba(163,196,216,.16); border-radius:12px;
background:linear-gradient(180deg, #0C1A29, #04080E);
box-shadow:inset 0 1px 0 rgba(215,238,246,.06), 0 16px 34px rgba(0,0,0,.5);}
@media(min-width:1240px){.console{display:block;}}
.console-l{left:max(14px, calc(50% - 600px)); transform:perspective(600px) rotateY(14deg); transform-origin:right center;}
.console-r{right:max(14px, calc(50% - 600px)); transform:perspective(600px) rotateY(-14deg); transform-origin:left center;}
.console .c-lab{font-family:var(--mono); font-size:8px; letter-spacing:.3em; color:var(--txt3); display:block; margin-bottom:10px; text-align:center;}
.console .c-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:9px;}
.console .c-row:last-child{margin-bottom:0;}
.console .c-knob{width:17px; height:17px; border-radius:50%;
background:radial-gradient(circle at 35% 30%, #465E70, #101A24 72%);
border:1px solid rgba(163,196,216,.3); box-shadow:0 2px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(215,238,246,.15); position:relative;}
.console .c-knob::after{content:""; position:absolute; left:50%; top:2px; width:1.5px; height:6px; background:var(--acc); transform:translateX(-50%);}
.console .c-tog{width:8px; height:14px; border:1px solid rgba(163,196,216,.35); border-radius:2.5px; background:#03070C; position:relative;}
.console .c-tog i{position:absolute; left:1px; right:1px; top:1px; height:5.5px; border-radius:1px; background:linear-gradient(180deg, #37586A, #17262F);}
.console .c-tog.off i{top:auto; bottom:1px;}
.console .c-dot{width:6px; height:6px; border-radius:50%; background:rgba(163,196,216,.18); border:1px solid rgba(163,196,216,.3);}
.console .c-dot.lit{background:var(--acc); box-shadow:0 0 6px rgba(95,168,188,.8);}

/* ——— 駕駛桿 YOKE：畫面最下方正中，兩支握把朝飛行員彎過來 ——— */
.yoke{position:fixed; bottom:118px; left:50%; transform:translateX(-50%); z-index:53;
width:330px; height:74px; pointer-events:none;}
.yoke .y-col{position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
width:34px; height:52px; background:linear-gradient(90deg, #020407, #12222F 50%, #020407);
clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%);}
.yoke .y-horn{position:absolute; bottom:26px; width:128px; height:52px;
border:11px solid #0A1723; border-bottom:none;
box-shadow:inset 0 2px 0 rgba(215,238,246,.1), 0 -2px 0 rgba(215,238,246,.05);}
.yoke .y-horn-l{left:6px; border-radius:58px 30px 0 0; border-right:none; transform:rotate(7deg);}
.yoke .y-horn-r{right:6px; border-radius:30px 58px 0 0; border-left:none; transform:rotate(-7deg);}
.yoke .y-hub{position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
width:74px; height:34px; border-radius:9px; border:1px solid rgba(163,196,216,.22);
background:linear-gradient(180deg, #10202F, #050B12);
box-shadow:inset 0 1px 0 rgba(215,238,246,.09), 0 6px 14px rgba(0,0,0,.5);
display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:8px; letter-spacing:.3em; color:var(--txt3); padding-left:.3em;}
@media(min-width:1024px){.yoke{bottom:96px;}}
@media(max-width:640px){
.yoke{width:252px; height:56px; bottom:132px; opacity:.92;}
.yoke .y-horn{width:98px; height:40px; border-width:9px; bottom:20px;}
.yoke .y-hub{width:60px; height:28px; bottom:26px; font-size:7px;}
.yoke .y-col{height:40px; width:28px;}
}

/* ——— 中央 PEDESTAL 油門台：桿子立在槽裡，推桿頭朝上 ——— */
.pedestal{position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:54;
width:288px; pointer-events:none;
clip-path:polygon(6% 0, 94% 0, 100% 100%, 0 100%);
background:linear-gradient(180deg, #0E1E2F, #04080E 82%);
border-top:1px solid rgba(163,196,216,.25);
box-shadow:inset 0 1px 0 rgba(215,238,246,.08), 0 -8px 22px rgba(0,0,0,.4);
padding:17px 26px 12px; display:flex; align-items:flex-end; justify-content:center; gap:20px;}
.pedestal .thr{display:flex; flex-direction:column; align-items:center; gap:3px;}
.pedestal .thr-slot{width:12px; height:44px; border-radius:6px; position:relative;
background:#02050A; border:1px solid rgba(163,196,216,.22); box-shadow:inset 0 0 7px rgba(0,0,0,.9);}
.pedestal .thr-slot::before{content:""; position:absolute; left:50%; top:4px; bottom:4px; width:2px; transform:translateX(-50%); background:rgba(163,196,216,.2);}
.pedestal .thr-lever{position:absolute; left:50%; top:9px; transform:translateX(-50%); width:3px; height:20px; background:#7E97A8;}
.pedestal .thr-knob{position:absolute; left:50%; top:-9px; transform:translateX(-50%);
width:19px; height:13px; border-radius:5px 5px 3px 3px;
background:linear-gradient(180deg, #476276, #16242F); border:1px solid rgba(215,238,246,.3);
box-shadow:0 2px 4px rgba(0,0,0,.65), inset 0 1px 0 rgba(215,238,246,.25);}
.pedestal .thr-lab{font-family:var(--mono); font-size:7.5px; letter-spacing:.22em; color:var(--txt3);}
.pedestal .trim{width:40px; height:40px; border-radius:50%; flex:0 0 auto; position:relative;
border:1px solid rgba(163,196,216,.28);
background:radial-gradient(circle, #0A1622 0 58%, #16242F 60% 100%);
box-shadow:inset 0 0 9px rgba(0,0,0,.7);}
.pedestal .trim::before,.pedestal .trim::after{content:""; position:absolute; background:rgba(163,196,216,.4);}
.pedestal .trim::before{left:50%; top:3px; bottom:3px; width:1px; transform:translateX(-50%) rotate(24deg);}
.pedestal .trim::after{top:50%; left:3px; right:3px; height:1px; transform:translateY(-50%) rotate(24deg);}
.pedestal .ped-lab{position:absolute; top:4px; left:0; right:0; text-align:center;
font-family:var(--mono); font-size:7px; letter-spacing:.34em; color:var(--txt3); padding-left:.34em;}
@media(max-width:1023px){
.pedestal{bottom:76px; width:236px; padding:14px 18px 9px; gap:15px;}
.pedestal .thr-slot{height:34px;}
.pedestal .trim{width:32px; height:32px;}
}
@media(max-width:640px){
/* 手機高度回收：HUD／遮光罩／儀表帶全部壓扁，第一張卡的核准鍵維持在駕駛桿之上、第一眼可按 */
.brief{padding-top:38px;}
.brief .b-kicker{margin-bottom:4px;}
.brief h2{font-size:19px; line-height:1.42;}
.brief .statline{margin-top:5px;}
.core{width:64px; height:64px;} .core svg{width:64px; height:64px;}
.core .core-num b{font-size:19px;}
.glareshield{margin-top:6px; padding:5px 15px 6px;}
.inst-strip{margin-top:6px; padding:6px 12px; gap:11px;}
.att-ball{width:36px; height:36px;}
.inst svg.gauge{width:36px; height:36px;}
.inst .i-lab{font-size:7px; letter-spacing:.18em;}
.focus-meta{margin-top:7px;}
.yoke{width:232px; height:44px; bottom:128px;}
.yoke .y-horn{width:88px; height:32px; border-width:8px; bottom:16px;}
.yoke .y-hub{width:54px; height:24px; bottom:20px;}
.yoke .y-col{height:32px;}
}
/* ================================================================
   COCKPIT-IV · 少字 + pedestal 回版面流
   駕駛桿／油門台不再 fixed 覆蓋畫面：它是 MFD 下方的一條台面，
   跟著版面走、不壓任何文字；判讀與建議在卡上各只佔一行，
   全文收進「原文」展開處。
   ================================================================ */
#app{padding-bottom:104px;}
@media(min-width:1024px){#app{padding-bottom:72px;}}
.pedestal{
position:relative; left:auto; bottom:auto; transform:none; z-index:1;
width:min(540px, 100%); margin:14px auto 2px;
padding:13px 22px 9px; gap:16px;
display:flex; align-items:flex-end; justify-content:center;
clip-path:polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}
.pedestal .ped-lab{display:none;}
.pedestal .p-horn{flex:0 0 auto; width:58px; height:30px; margin-bottom:12px;
border:8px solid #0A1723; border-bottom:none;
box-shadow:inset 0 2px 0 rgba(215,238,246,.1);}
.pedestal .p-horn-l{border-radius:40px 22px 0 0; border-right:none; transform:rotate(6deg);}
.pedestal .p-horn-r{border-radius:22px 40px 0 0; border-left:none; transform:rotate(-6deg);}
@media(max-width:640px){
.pedestal{margin-top:10px; padding:10px 14px 7px; gap:11px;}
.pedestal .p-horn{width:42px; height:23px; border-width:6px; margin-bottom:10px;}
.pedestal .thr-slot{height:32px;}
}
/* 卡上一行判讀、一行建議 */
.card .verdict p{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.suggest-line{align-items:center;}
.suggest-line .sl-lab{display:inline; margin:0; flex:0 0 auto;}
.suggest-line .sl-txt{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; min-width:0;}
/* 簡報只剩一句：核心數字與標題垂直置中即可 */
.brief .b-kicker{margin-bottom:6px;}
/* 少字：群組項目的判讀也只佔一行，全文點開才看 */
.i-verdict{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.i-reason>span{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; min-width:0;}

/* ============ 正式版接合（以上為示範版原始 CSS，一字未改；以下為正式版接合層） ============ */
a{color:inherit;}
.brandlock{display:inline-flex; align-items:center; gap:10px; min-width:0;}
.brandmark{width:26px; height:26px; flex:0 0 auto;}
.brand{font-size:16px; letter-spacing:.35em; font-weight:700; color:var(--txt); white-space:nowrap;}
.logout{color:var(--txt2); text-decoration:none; font-size:13px; letter-spacing:.08em;}
.logout:hover{color:#fff;}
/* 信箱切換＝控制台實體鍵列 */
.acctdeck{display:flex; gap:7px; overflow-x:auto; padding:10px 1px 2px; scrollbar-width:none;}
.acctdeck::-webkit-scrollbar{display:none;}
.acctkey{
flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
font-family:var(--mono); font-size:12.5px; color:rgba(150,169,182,.58); white-space:nowrap;
background:linear-gradient(180deg, #0A141F, #050B12);
border:1px solid rgba(163,196,216,.15); border-radius:8px; padding:8px 13px;
box-shadow:0 3px 0 rgba(0,0,0,.65), inset 0 1px 0 rgba(215,238,246,.05);
touch-action:manipulation;
}
.acctkey b{color:rgba(234,242,246,.45); font-weight:600;}
.acctkey:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.65);}
.acctkey.on{
color:#F4FCFE; border-color:rgba(160,215,230,.55);
background:linear-gradient(180deg, #3A7688, #26505F);
box-shadow:0 3px 0 #122B36, 0 6px 16px rgba(95,168,188,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
.acctkey.on b{color:#fff;}
.acctkey.pending{opacity:.55; border-style:dashed; box-shadow:none;}
/* 卡內動作列的連結鍵與示範版 .btn 同款 */
.card .actions a.btn, .msgback a.btn{text-decoration:none;}
.card .actions{flex-wrap:wrap;}
/* 原文展開：內容可長，解除示範版一行判讀的截斷限制 */
.bodybox{white-space:normal; word-break:break-word;}
.bodybox.show{display:block;}
/* 分組以原生 details 收合：未展開時只有摘要列，不出現清單 */
details.group .group-body{display:block;}
details.group summary.group-head{cursor:pointer; list-style:none;}
details.group summary.group-head::-webkit-details-marker{display:none;}
details.group[open ] .g-chev{transform:rotate(180deg);}
.item-head{text-decoration:none; cursor:pointer;}
.item-head:hover .i-subj{color:#fff;}
.msgback{margin:18px 2px 12px;}
.msgcard{margin-top:6px;}
.empty-note{padding:22px 16px;}
/* 登入／建置頁（沿用母本色票與霧面質感） */
.login-body{display:flex; align-items:center; justify-content:center; padding:24px; min-height:100vh;}
.login-wrap{width:min(360px,100%); text-align:center; position:relative; z-index:1;}
.login-logo{width:84px; height:84px;}
.login-title{letter-spacing:.4em; font-size:24px; margin:14px 0 4px; padding-left:.4em; font-weight:700;}
.login-sub{color:var(--txt2); margin:0 0 22px;}
.login-err{color:#E3B7BB; border:1px solid rgba(192,113,122,.55); border-radius:8px; padding:9px; background:rgba(192,113,122,.08);}
.login-form{text-align:left; display:grid; gap:14px;}
.login-form label{font-size:13px; color:var(--txt2); display:grid; gap:6px;}
.login-form input{
background:rgba(10,20,32,.7); border:1px solid var(--line); border-radius:9px;
color:var(--txt); padding:12px; font-size:16px; width:100%; outline:none;
}
.login-form input:focus{border-color:rgba(95,168,188,.55);}
.login-form button{
background:linear-gradient(180deg, #3A7688, #26505F); color:#F4FCFE; border:1px solid rgba(160,215,230,.55); border-radius:9px;
padding:13px; font-size:16px; font-weight:700; cursor:pointer; touch-action:manipulation;
box-shadow:0 3px 0 #122B36, inset 0 1px 0 rgba(255,255,255,.22);
}
.login-form button:active{transform:translateY(2px); box-shadow:0 1px 0 #122B36;}
.login-form .login-remember{display:flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; color:var(--txt2); position:relative; user-select:none; -webkit-user-select:none;}
.login-form .login-remember input{position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; width:18px; height:18px; margin:0; padding:0; cursor:pointer;}
.login-remember .rm-box{flex:none; width:18px; height:18px; border-radius:5px; border:1px solid var(--line); background:rgba(10,20,32,.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); position:relative; transition:border-color .15s, background .15s;}
.login-form .login-remember input:checked + .rm-box{background:linear-gradient(180deg, #3A7688, #26505F); border-color:rgba(160,215,230,.55);}
.login-form .login-remember input:checked + .rm-box::after{content:""; position:absolute; left:5px; top:2px; width:5px; height:9px; border:solid #F4FCFE; border-width:0 2px 2px 0; transform:rotate(45deg);}
.login-form .login-remember input:focus-visible + .rm-box{border-color:rgba(95,168,188,.85); box-shadow:0 0 0 2px rgba(95,168,188,.25);}
@media(max-width:640px){
.acctdeck{padding-top:8px;}
.brand{font-size:15px; letter-spacing:.28em;}
}
@media (hover:none){
  .card .actions a.btn, .acctkey, details.group summary.group-head{touch-action:manipulation;}
}
/* 信箱辨識（2026-11-07 Mars 回饋）：來源信箱一律完整地址標籤＋底襯，不再用小灰字；
   未選帳號鍵已在上方再降一階亮度，與實心亮鍵的選中態拉開對比 */
.card .c-from{min-width:0;}
.c-acct{
margin-left:auto; flex:0 0 auto; max-width:64%;
font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:#EAF7FB; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis;
background:linear-gradient(180deg, rgba(95,168,188,.36), rgba(72,126,142,.26));
border:1px solid rgba(160,215,230,.52); border-radius:999px; padding:4px 10px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.b-acct{
display:inline-block; margin-left:12px; vertical-align:2px;
font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:#EAF7FB;
background:rgba(95,168,188,.22);
border:1px solid rgba(160,215,230,.45); border-radius:999px; padding:3px 10px;
}

/* ===== 第 3 步接合層（母本段未動，本段起為新增） ===== */
button{font-family:inherit;}
.flash{
  margin:12px 16px 0; padding:11px 15px; border-radius:10px; font-size:13.5px; letter-spacing:.03em;
  background:rgba(95,168,188,.10); border:1px solid rgba(95,168,188,.45); color:#EAF7FA;
}
.flash.err{background:rgba(178,84,84,.12); border-color:rgba(196,110,110,.5); color:#F6E3E3;}
.actions.actrow{border-top:none; margin-top:4px; padding-top:6px;}
.actform{display:inline-flex; margin:0;}
.actform .btn{cursor:pointer;}
details.snz{position:relative; display:inline-flex;}
details.snz summary{list-style:none; cursor:pointer;}
details.snz summary::-webkit-details-marker{display:none;}
.snz-opts{
  position:absolute; left:0; bottom:calc(100% + 8px); z-index:60; display:none;
  background:var(--panel-solid,#0A1622); border:1px solid rgba(95,168,188,.4); border-radius:10px;
  padding:6px; box-shadow:0 12px 28px rgba(0,0,0,.55); white-space:nowrap;
}
details.snz[open ] .snz-opts{display:inline-flex; gap:2px;}
.tabrow{display:flex; gap:8px; margin:14px 16px 0;}
.attlist{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px;}
.attchip{
  font-family:var(--mono); font-size:11.5px; color:var(--acc); letter-spacing:.02em;
  border:1px solid rgba(95,168,188,.4); border-radius:14px; padding:3px 9px; background:rgba(95,168,188,.07);
}
.c-static{flex:1; min-width:0; color:var(--txt); font-size:14px;}
.c-form{margin:0;}
.msgback{margin:14px 16px 0;}
/* 底部導航：母本 .mobilenav 以 button 為對象，這裡補 a 元素同式樣 */
.mobilenav a.mn-a{
  flex:1; background:none; border:none; color:var(--txt2); padding:9px 0 7px; font-size:11px; letter-spacing:.12em;
  display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; text-decoration:none; pointer-events:auto;
}
.mobilenav a.mn-a svg{width:19px; height:19px;}
.mobilenav a.mn-a.on{color:var(--acc);}
.mobilenav a.mn-a.on::before{content:""; position:absolute; top:-1px; left:22%; right:22%; height:1px; background:var(--acc); box-shadow:0 0 7px rgba(95,168,188,.8);}
.mobilenav a.mn-a:active{transform:translateY(1px);}
@media(max-width:1023px){
  #main{padding-bottom:88px;}
  .mobilenav{display:flex;}
}