/* ============================================================
   site.css — demo4 風格內頁設計系統（深海軍藍 + 金點綴 科技風）
   套用：SSO 入口 / 修改密碼 / 大數據分析子站 / 視覺化分析子站
   依賴 common.css（body 背景・grain・footer・trust-pill・reveal・字體）
   ============================================================ */

/* ── 全頁科技背景圖（對齊 dashboard_index：b22.jpg 固定底圖） ── */
.scene-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,13,34,.06) 0%,rgba(6,16,40,.12) 40%,rgba(4,11,30,.5) 80%,rgba(4,11,30,.92) 100%),
    url("../../b22.jpg") center top/cover no-repeat;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);
  mask:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);}

/* ── 頁尾母題：對齊 dashboard_index 簡潔版（移除天際線 + 波浪裝飾） ── */
.footer .skyline,.footer .wave{display:none;}

/* ── 頂部品牌列：透明無底（上方透明，比照 homencp） ── */
.header{background:none;border-bottom:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;}
.header::after{display:none;}
.head-skyline{display:none;}
.header .brand,.header .header-right{position:relative;z-index:1;}
.header .brand img{filter:drop-shadow(0 2px 12px rgba(201,162,39,.45));}
.header .brand .txt b{color:var(--ink);}
.header .brand .txt small{color:var(--ink-mute);}
.header .header-right{color:var(--ink-soft);}
.header .data-date{color:var(--ink-soft);}
.header .data-date i{color:var(--gold-soft);}
.header .data-date .mono{color:var(--ink);}
.header .greet{color:var(--ink-soft);}
.header .greet b{color:var(--glow);font-weight:700;}
.header .hbtn{color:#e3ecf9;background:rgba(255,255,255,.06);border:1px solid rgba(214,226,245,.4);}
.header .hbtn i{color:var(--glow-2);}
.header .hbtn:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 8px 22px rgba(46,127,255,.42);}
.header .hbtn:hover i{color:#fff;}

/* 系統切換連結（右側） */
.sys-links{display:flex;align-items:center;gap:.5rem;}
.sys-links a{color:var(--ink-soft);text-decoration:none;font-size:.8rem;font-weight:700;white-space:nowrap;
  padding:5px 11px;border-radius:8px;transition:all .2s var(--ease);}
.sys-links a:hover{color:#fff;background:rgba(93,184,255,.14);}
.sys-links a.disabled{color:var(--ink-mute);cursor:not-allowed;pointer-events:none;}
.head-sep{width:1px;height:22px;background:rgba(93,184,255,.4);margin:0 .25rem;}

/* ── 導覽列：浮動玻璃藍圓角列（比照 homencp） ── */
.navbar{display:flex;align-items:center;position:static;height:auto;flex-shrink:0;z-index:40;
  margin:.4rem 2.2rem 0;padding:7px 1.4rem;border-radius:20px;
  border:1px solid rgba(93,184,255,.3);
  background:linear-gradient(180deg,rgba(13,40,96,.72),rgba(7,22,56,.84));
  box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 0 26px rgba(46,127,255,.14);
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);}
.navbar::before{display:none;}
.nav-left{display:flex;align-items:center;flex-wrap:nowrap;justify-content:flex-start;gap:.5rem;}
.nav-right{display:flex;align-items:center;margin-left:auto;}
.nav-sep{width:1px;height:24px;background:rgba(255,255,255,.18);margin:0 .7rem;}
.nav-item{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 14px;
  color:#cfe1f7;text-decoration:none;font-size:.88rem;font-weight:600;position:relative;z-index:1;
  transition:color .2s;white-space:nowrap;background:none;border:none;font-family:inherit;cursor:pointer;}
.nav-item i.lead{font-size:.95rem;color:#9fc4f0;transition:color .2s;}
.nav-item .chev{font-size:.6rem;opacity:.7;transition:transform .25s var(--ease);margin-left:1px;}
.nav-item:hover{color:#fff;}
.nav-item:hover i.lead{color:var(--glow);}
.nav-item.active{color:#fff;}
.nav-item.active i.lead{color:#bfe2ff;}
.nav-item.active::before{content:'';position:absolute;inset:6px 4px;border-radius:11px;z-index:-1;
  background:linear-gradient(180deg,rgba(93,184,255,.36),rgba(46,127,255,.16));
  border:1px solid rgba(140,205,255,.55);
  box-shadow:0 0 18px rgba(93,184,255,.5),inset 0 0 14px rgba(120,200,255,.35);}
.nav-item.active::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);box-shadow:0 0 10px rgba(93,184,255,.85);}
.nav-item.disabled{color:#6f8cbb;cursor:not-allowed;pointer-events:none;opacity:.7;}

/* mega-nav 樹狀下拉（對齊 analysis.css） */
.nav-group{position:relative;}
.nav-group:hover .nav-item .chev,.nav-group.open .nav-item .chev{transform:rotate(180deg);}
.nav-group:hover>.nav-item{color:#fff;}
.tree{position:absolute;top:100%;left:6px;min-width:222px;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .28s var(--ease);
  background:linear-gradient(180deg,#163f87,#0c2868);
  border:1px solid rgba(93,184,255,.42);border-radius:16px;padding:1rem .9rem;margin-top:9px;
  box-shadow:0 26px 64px rgba(0,0,0,.55),0 0 24px rgba(46,127,255,.28) inset;z-index:60;}
.tree::before{content:'';position:absolute;top:-7px;left:30px;width:13px;height:13px;
  background:#163f87;border-left:1px solid rgba(93,184,255,.42);border-top:1px solid rgba(93,184,255,.42);transform:rotate(45deg);}
.nav-group:hover .tree,.nav-group.open .tree{opacity:1;visibility:visible;transform:translateY(0);}
.tree ul{list-style:none;position:relative;padding-left:20px;}
.tree ul::before{content:'';position:absolute;left:5px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--glow),var(--blue-deep));opacity:.7;border-radius:2px;}
.tree li{position:relative;margin:8px 0;}
.tree li::before{content:'';position:absolute;left:-19px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--glow);box-shadow:0 0 8px rgba(93,184,255,.85);border:2px solid #123163;}
.tree li::after{content:'';position:absolute;left:-10px;top:50%;width:10px;height:2px;background:rgba(93,184,255,.55);}
.tree li a{display:block;padding:9px 16px;border-radius:10px;white-space:nowrap;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:#d2e2f7;text-decoration:none;font-size:.85rem;transition:all .2s var(--ease);}
.tree li a:hover{background:rgba(93,184,255,.16);border-color:rgba(93,184,255,.5);color:var(--glow);transform:translateX(5px);}

/* ── 內容區 ── */
.main{flex:1;padding:1.5rem 2.2rem 1.6rem;max-width:1320px;width:100%;margin:0 auto;position:relative;z-index:2;}
.crumb,.breadcrumb{font-family:var(--f-display);font-size:.8rem;color:var(--ink-mute);margin-bottom:1rem;letter-spacing:.4px;}
.crumb a,.breadcrumb a{color:var(--glow);text-decoration:none;}
.crumb a:hover,.breadcrumb a:hover{color:var(--glow-2);text-decoration:underline;}
.crumb b,.breadcrumb b{color:var(--glow);font-weight:600;}
.page-title{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:900;margin-bottom:1.2rem;color:#fff;letter-spacing:1px;}
.page-title i{color:var(--glow);filter:drop-shadow(0 0 12px rgba(93,184,255,.8));}
.welcome{margin-bottom:1.6rem;}
.welcome h1{font-family:var(--f-display);font-size:1.7rem;font-weight:700;letter-spacing:.5px;
  background:linear-gradient(90deg,#eaf3ff,var(--glow) 55%,var(--glow-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.welcome p{color:var(--ink-soft);margin-top:.35rem;font-size:.9rem;}

/* ── 玻璃卡 ── */
.card{position:relative;z-index:2;background:linear-gradient(160deg,rgba(13,40,96,.66),rgba(5,18,48,.8));
  border:1px solid var(--line-strong);border-radius:18px;padding:1.7rem 1.9rem;
  box-shadow:0 18px 40px rgba(0,0,0,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:1.4rem;}
.card>h2{font-family:var(--f-display);font-size:1.3rem;font-weight:700;margin-bottom:1.1rem;letter-spacing:.5px;
  display:flex;align-items:center;gap:10px;color:var(--glow-2);}
.card>h2 .grad{background:linear-gradient(90deg,var(--glow-2),var(--glow) 60%,var(--blue));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.card>h2 i{color:var(--glow);filter:drop-shadow(0 0 10px rgba(93,184,255,.7));}

/* ── 表格 ── */
table.data{width:100%;border-collapse:collapse;font-size:.86rem;}
table.data thead th{text-align:left;font-family:var(--f-display);color:var(--glow);font-weight:600;font-size:.78rem;letter-spacing:.6px;
  padding:11px 12px;border-bottom:1px solid var(--line-strong);background:rgba(46,127,255,.1);}
table.data tbody td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft);}
table.data tbody tr{transition:background .2s;}
table.data tbody tr:hover{background:rgba(93,184,255,.08);}
table.data a{color:var(--ink);text-decoration:none;transition:color .2s;}
table.data a:hover{color:var(--glow);}
.t-date{font-family:var(--f-mono);color:var(--glow);white-space:nowrap;font-size:.82rem;}
input[type=checkbox]{accent-color:var(--blue);width:16px;height:16px;cursor:pointer;}

/* ── 工具列 / 表單 ── */
.toolbar{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap;}
.toolbar .spacer{margin-left:auto;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.5rem;}
.form-group{display:flex;flex-direction:column;gap:.4rem;}
.form-group.full{grid-column:span 2;}
.form-group label,.field-label{font-size:.82rem;color:var(--ink-soft);font-weight:600;}
.form-group input,.form-group select,.form-group textarea,.toolbar input,.inp{
  background:rgba(8,26,66,.6);border:1px solid var(--line-strong);border-radius:10px;
  padding:9px 12px;color:var(--ink);font-size:.86rem;font-family:var(--f-cjk);transition:all .2s var(--ease);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.toolbar input:focus,.inp:focus{
  outline:none;border-color:var(--glow);box-shadow:0 0 0 3px rgba(93,184,255,.18);background:rgba(12,40,98,.7);}
.form-group textarea{resize:vertical;min-height:62px;}
select option{background:#0c2868;color:var(--ink);}
.toolbar input{width:220px;}
.date-range,.amount-range{display:flex;gap:.5rem;align-items:center;}
.date-range input,.amount-range input{flex:1;min-width:0;}
.date-range span,.amount-range span{color:var(--ink-mute);font-size:.8rem;flex-shrink:0;}
input[type=date]{color-scheme:dark;}

/* ── 按鈕 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  font-family:var(--f-cjk);font-size:.85rem;font-weight:600;transition:all .25s var(--ease);text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-deeper));color:#fff;border-color:rgba(93,184,255,.34);
  box-shadow:0 10px 24px rgba(46,127,255,.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(46,127,255,.5);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-ghost{background:rgba(93,184,255,.08);border-color:rgba(93,184,255,.4);color:var(--glow-2);}
.btn-ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.btn-add{background:rgba(46,127,255,.14);border-color:rgba(93,184,255,.45);color:var(--glow-2);}
.btn-add:hover{background:var(--blue);color:#fff;}
.btn-edit{background:rgba(201,162,39,.12);border-color:rgba(226,196,90,.5);color:var(--gold-soft);}
.btn-edit:hover{background:var(--gold);color:#1c1405;border-color:var(--gold);}
.btn-del{background:rgba(176,57,47,.16);border-color:rgba(200,90,80,.5);color:#f0a3a3;}
.btn-del:hover{background:#b0392f;color:#fff;border-color:#b0392f;}
.btn-danger{background:linear-gradient(135deg,#c0524a,#7a2b2b);color:#fff;border-color:rgba(200,90,80,.5);}
.btn-danger:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(122,43,43,.5);}
.btn-cancel{background:rgba(255,255,255,.05);border-color:var(--line-strong);color:var(--ink-soft);}
.btn-cancel:hover{background:rgba(255,255,255,.1);color:var(--ink);}
.btn-download{padding:5px 12px;font-size:.76rem;border-radius:8px;background:rgba(46,127,255,.14);border:1px solid rgba(93,184,255,.4);color:var(--glow-2);cursor:pointer;font-family:var(--f-cjk);font-weight:600;transition:all .2s var(--ease);}
.btn-download:hover{background:var(--blue);color:#fff;transform:translateY(-1px);}
.btn-back{display:inline-flex;align-items:center;gap:8px;margin-top:1rem;}
.btn-row{margin-top:1.5rem;display:flex;gap:1rem;flex-wrap:wrap;}

/* ── 徽章 ── */
.badge{padding:3px 11px;border-radius:999px;font-size:.74rem;font-weight:600;display:inline-block;border:1px solid transparent;}
.badge-admin{background:rgba(46,127,255,.16);color:var(--glow-2);border-color:rgba(93,184,255,.4);}
.badge-user{background:rgba(150,110,255,.16);color:#c4a4ff;border-color:rgba(150,110,255,.4);}
.badge-active{background:rgba(60,190,140,.16);color:#7af0c0;border-color:rgba(80,200,150,.4);}
.badge-inactive{background:rgba(176,57,47,.16);color:#f0a3a3;border-color:rgba(200,90,80,.4);}

/* ── Modal ── */
.modal-bg{position:fixed;inset:0;background:rgba(2,8,22,.62);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:120;}
.modal-bg.show{display:flex;}
.modal{background:linear-gradient(160deg,#103168,#081a42);border:1px solid var(--line-strong);border-radius:18px;
  padding:1.8rem;width:480px;max-width:90vw;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 30px rgba(46,127,255,.2) inset;
  animation:fadeUp .3s var(--ease);}
.modal h3{font-family:var(--f-display);font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:1.3rem;display:flex;align-items:center;gap:9px;}
.modal h3 i{color:var(--glow);}
.modal .form-group{margin-bottom:1rem;}
.form-row{display:flex;gap:.8rem;}
.form-row .form-group{flex:1;}
.modal-btns{display:flex;gap:.8rem;justify-content:flex-end;margin-top:1.6rem;}
.modal-del-text{color:#f0a3a3;font-size:.9rem;margin-bottom:1rem;line-height:1.6;}

/* ── 分頁 ── */
.pagination{display:flex;gap:.4rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap;}
.pagination button{background:rgba(93,184,255,.06);border:1px solid var(--line-strong);color:var(--ink-soft);
  padding:7px 15px;border-radius:9px;cursor:pointer;font-size:.82rem;font-family:var(--f-cjk);transition:all .2s var(--ease);}
.pagination button:hover{border-color:var(--glow);color:var(--glow);}
.pagination button.active{background:linear-gradient(135deg,var(--blue),var(--blue-deeper));border-color:transparent;color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(46,127,255,.4);}

/* ── Bento 格子（首頁模組） ── */
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:160px;gap:16px;}
.b-card{position:relative;overflow:hidden;cursor:pointer;text-decoration:none;
  background:linear-gradient(160deg,rgba(13,40,96,.6),rgba(5,18,48,.72));
  border:1px solid var(--line-strong);border-radius:18px;padding:1.5rem;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  box-shadow:0 16px 36px rgba(0,0,0,.4);backdrop-filter:blur(7px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);}
.b-card:hover{transform:translateY(-5px);border-color:rgba(93,184,255,.6);box-shadow:0 26px 56px rgba(0,0,0,.5),0 0 36px rgba(46,127,255,.3);}
.b-card.wide{grid-column:span 2;}
.b-card.tall{grid-row:span 2;}
.b-card .ic{font-size:2.6rem;margin-bottom:.7rem;color:var(--glow);filter:drop-shadow(0 0 14px rgba(93,184,255,.6));position:relative;z-index:1;}
.b-card .label{font-size:.98rem;font-weight:700;color:#eaf3ff;position:relative;z-index:1;}
.b-card .desc{font-size:.78rem;color:var(--ink-mute);margin-top:.3rem;position:relative;z-index:1;}
.b-card::after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;border:1px solid rgba(93,184,255,.16);top:-30px;right:-30px;animation:pulseRing 4s ease-in-out infinite;}
@keyframes pulseRing{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.25);opacity:.12}}
@media(prefers-reduced-motion:reduce){.b-card::after{animation:none;}}

/* ── 多欄面板（視覺化首頁：消息 + 手冊） ── */
.panels{display:flex;gap:1.3rem;flex-wrap:wrap;}
.panel{background:linear-gradient(160deg,rgba(13,40,96,.62),rgba(5,18,48,.78));
  border:1px solid var(--line-strong);border-radius:18px;padding:1.5rem;overflow:hidden;
  box-shadow:0 16px 36px rgba(0,0,0,.4);backdrop-filter:blur(8px);min-width:240px;}
.panel.news{flex:2;}
.panel.manual,.panel.group-manual{flex:1;}
.panel h3{font-family:var(--f-display);font-size:1rem;font-weight:700;color:#eaf3ff;margin-bottom:1rem;display:flex;align-items:center;gap:9px;}
.panel h3 i{color:var(--glow);}

/* ── 警語 / API 顯示框（查詢頁） ── */
.warning-text{background:rgba(201,162,39,.08);border:1px solid rgba(226,196,90,.3);
  border-radius:10px;padding:.85rem 1.1rem;font-size:.82rem;color:var(--gold-soft);margin-bottom:1.5rem;display:flex;align-items:center;gap:.55rem;}
.warning-text i{color:var(--gold-soft);}
.api-box{margin-top:1.5rem;background:rgba(8,26,66,.5);border:2px dashed var(--line-strong);
  border-radius:12px;padding:1.2rem;font-size:.8rem;color:var(--ink-mute);word-break:break-all;}
.api-box .label{color:var(--ink-soft);font-weight:600;margin-bottom:.5rem;font-family:var(--f-display);letter-spacing:.5px;}
.api-box .url{color:var(--glow);font-family:var(--f-mono);}

/* ── Loading 遮罩 ── */
.loading-overlay{position:fixed;inset:0;background:rgba(4,11,30,.82);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;flex-direction:column;z-index:200;}
.loading-overlay.show{display:flex;}
.spinner{width:52px;height:52px;border:4px solid rgba(93,184,255,.15);border-top:4px solid var(--glow);
  border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1.5rem;}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:#fff;font-size:1rem;animation:pulseTxt 1.5s ease-in-out infinite;}
@keyframes pulseTxt{0%,100%{opacity:1}50%{opacity:.5}}
.progress-bar{width:280px;height:5px;background:rgba(93,184,255,.12);border-radius:4px;margin-top:1rem;overflow:hidden;}
.progress-bar .fill{height:100%;width:0;background:linear-gradient(90deg,var(--glow),var(--blue));border-radius:4px;animation:progressAnim 3s ease-in-out forwards;}
@keyframes progressAnim{0%{width:0}50%{width:70%}100%{width:100%}}

/* ── 密碼規則框（修改密碼） ── */
.rules{background:rgba(46,127,255,.06);border:1px solid rgba(93,184,255,.22);border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.5rem;}
.rules h4{font-size:.85rem;color:var(--glow);margin-bottom:.6rem;display:flex;align-items:center;gap:7px;}
.rules ul{list-style:none;font-size:.8rem;color:var(--ink-soft);}
.rules ul li{padding:3px 0;display:flex;align-items:center;gap:7px;}
.rules ul li i{color:var(--glow);font-size:.7rem;}
.input-wrap{position:relative;}
.input-wrap input{width:100%;padding-right:40px;}
.toggle-pwd{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-mute);cursor:pointer;font-size:.9rem;}
.toggle-pwd:hover{color:var(--glow);}
.error-text{color:#f0a3a3;font-size:.78rem;margin-top:.35rem;display:none;}

/* ── 文章內文（消息內文） ── */
.article-title{font-family:var(--f-display);font-size:1.6rem;font-weight:700;margin-bottom:.8rem;color:#fff;letter-spacing:.5px;}
.article-meta{font-size:.82rem;color:var(--ink-mute);margin-bottom:2rem;display:flex;align-items:center;gap:8px;}
.article-meta i{color:var(--glow);}
.article-content p{font-size:1rem;line-height:2;color:var(--ink-soft);margin-bottom:1.5rem;}

/* ── 響應式 ── */
@media(max-width:980px){
  .navbar{overflow-x:auto;}
  .bento-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .form-group.full{grid-column:span 1;}
  .panels{flex-direction:column;}
}
@media(max-width:820px){
  .header{flex-wrap:wrap;height:auto;padding:.6rem 1rem;gap:.5rem;}
  .header-right{font-size:.78rem;gap:8px;flex-wrap:wrap;}
  .main{padding:1.1rem 1rem 1.2rem;}
}