/* ============================================================
   TS6 站点主题增强层（附加式，整体可安全移除）
   1. 背景图切换  2. 移动端视口  3. 焦点可见性
   4. 动效克制    5. 微交互      6. 移动端微调  7. 深色模式
   ============================================================ */

/* ---------- 1. 背景图：切换为新的壁纸 ---------- */
.bg-wallpaper{
  background-image:url('/static/bg-hero.jpg?v=2') !important;
  opacity:.5 !important;
}

/* ---------- 2. 移动端视口单位修正（防手机地址栏遮挡） ---------- */
body{min-height:100dvh !important}

/* ---------- 3. 键盘焦点可见性（无障碍） ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #ff5fa2;
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- 4. 动效克制 ---------- */
.sakura{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .sakura{display:none !important}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- 5. 微交互 ---------- */
.btn{transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:wait}
.copy-btn,.action-btn{transition:filter .15s ease}
.copy-btn:hover,.action-btn:hover{filter:brightness(1.08)}
.deploy-progress .progress-step.active{animation:pulse-soft 1.4s ease-in-out infinite}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- 6. 移动端微调 ---------- */
@media (max-width:520px){
  body{padding:12px}
  .card{border-radius:22px}
  .tab{font-size:13px;padding:12px 6px}
  .info-box .row{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---------- 7. 深色模式（跟随系统） ---------- */
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark}
  body{
    background:linear-gradient(135deg,#20161d 0%,#2a1b25 50%,#251c2f 100%) !important;
  }
  .bg-wallpaper{opacity:.22 !important;filter:brightness(.55) saturate(.85)}
  body::after,.glow2{opacity:.35 !important}
  .sakura{opacity:.25}

  /* 主表面：深色玻璃 */
  .card,.glass-card,.header,.modal-content{
    background:rgba(38,26,34,.92) !important;
    border-color:rgba(255,158,199,.16) !important;
    box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05) !important;
  }

  /* 基础文字：浅色 */
  body,.card,.glass-card,.header,.tab,.info-box,.hint-box,.privilege-box,
  .pricing-item,.stat-card,.badge,.empty-state,.hint-text,.value,.label,
  .sub,.row,.footer,.step,.progress-step,.table,.modal-content,.cmd-item,.copy-wrap,.price{
    color:#e6d3dc !important;
  }
  h1,h2,h3{color:#f6e9ef !important}
  .pricing .price{color:#f0a0b8 !important}

  /* 内联样式的小字（标签行/说明文字）统一提亮 */
  [style*="rgba(80,40,55"]{color:rgba(230,211,220,.78) !important}

  /* 彩色数字/链接/代码 */
  .stat-card .num{color:#f6e9ef !important}
  .stat-card .num.blue{color:#9db4e8 !important}
  .stat-card .num.green{color:#8fca8f !important}
  .stat-card .num.orange{color:#d8a878 !important}
  .stat-card .num.purple{color:#c39ad4 !important}
  .code-text{color:#d8a8e0 !important}
  .domain-link{color:#9db4e8 !important}

  /* 输入控件 */
  input,select,textarea{
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(255,158,199,.2) !important;
    color:#f6e9ef !important;
  }
  input::placeholder,textarea::placeholder{color:rgba(246,233,239,.35) !important}

  /* 次级按钮 / 复制按钮 */
  .copy-btn,.btn-gray,.btn-secondary{
    background:rgba(255,158,199,.14) !important;
    color:#f6e9ef !important;
    border-color:rgba(255,158,199,.2) !important;
  }

  /* 管理后台操作按钮 */
  .action-btn.restart{background:rgba(106,127,196,.22) !important;color:#b8c8f0 !important;border-color:rgba(106,127,196,.3) !important}
  .action-btn.delete{background:rgba(200,80,80,.22) !important;color:#f0b0b0 !important;border-color:rgba(200,80,80,.3) !important}
  .btn-green{background:rgba(106,158,106,.2) !important;color:#a8d8a8 !important;border-color:rgba(106,158,106,.3) !important}
  .btn-red{background:rgba(200,80,80,.2) !important;color:#f0b0b0 !important;border-color:rgba(200,80,80,.3) !important}
  .btn-blue{background:rgba(106,127,196,.2) !important;color:#b8c8f0 !important;border-color:rgba(106,127,196,.3) !important}
  .btn-amber{background:rgba(196,138,106,.2) !important;color:#e8c0a0 !important;border-color:rgba(196,138,106,.3) !important}

  /* 部署进度步骤 */
  .progress-step{background:rgba(255,255,255,.05) !important;border-color:rgba(255,158,199,.12) !important}
  .progress-step.done{color:#8fca8f !important;background:rgba(120,200,140,.12) !important;border-color:rgba(120,200,140,.22) !important}
  .progress-step.active{color:#ff9ec0 !important;background:rgba(255,158,199,.12) !important;border-color:rgba(255,158,199,.25) !important}

  /* 提示/状态框 */
  .alert.error{background:rgba(200,60,60,.15) !important;color:#f0b0b0 !important;border-color:rgba(200,60,60,.25) !important}
  .alert.success{background:rgba(120,200,140,.12) !important;color:#a8d8a8 !important;border-color:rgba(120,200,140,.25) !important}
  .check-result.available{background:rgba(120,200,140,.12) !important;color:#a8d8a8 !important;border-color:rgba(120,200,140,.25) !important}
  .check-result.unavailable{background:rgba(200,60,60,.12) !important;color:#f0b0b0 !important;border-color:rgba(200,60,60,.25) !important}

  /* 表格与弹窗 */
  table{color:#d9c6d0 !important}
  .modal{background:rgba(10,6,10,.6) !important}
}

/* ---------- 9. 装饰层不拦截点击（防止遮挡按钮） ---------- */
.bg-wallpaper,.glow2,.sakura,body::after{pointer-events:none !important}

/* ---------- 10. 后台移动端适配 ---------- */
/* 表格横向滚动容器 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:720px}

@media (max-width:768px){
  body{padding:12px}
  .header{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
  .header .logout{align-self:flex-end}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .glass-card{border-radius:14px}
  .card-header{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .header-search{width:100%;margin-left:0}
  .header-search input{width:100%}
  th,td{padding:10px 10px;font-size:12.5px}
  th{font-size:12px}
  .action-btn{padding:8px 12px;font-size:12.5px}
  .copy-btn{padding:4px 10px;margin-left:4px}
  .modal-content{width:94vw;padding:18px}
  .expiry-quick .quick-chip{padding:8px 12px}
  .expiry-input-row input{width:100px}
  .stat-card .num{font-size:24px}
  .expiry-head{flex-wrap:wrap;gap:6px}
}
@media (max-width:420px){
  .action-group{flex-wrap:wrap}
  .expiry-field input[type=date]{font-size:14px}
}

/* ---------- 11. 主页通知栏 ---------- */
.notice-bar{
  display:flex;align-items:flex-start;gap:10px;
  margin:14px 14px 0;padding:10px 14px;
  background:linear-gradient(135deg,rgba(255,180,200,.18),rgba(255,200,160,.12));
  border:1px solid rgba(255,158,199,.25);border-radius:14px;
}
.notice-icon{font-size:18px;flex-shrink:0;line-height:1.4}
.notice-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.notice-item{display:flex;gap:8px;font-size:12.5px;color:#3d1f2d;line-height:1.5}
.notice-date{color:rgba(80,40,55,.45);white-space:nowrap;flex-shrink:0;font-size:11px;padding-top:2px}
.notice-text{flex:1;min-width:0;word-break:break-all}
.notice-close{
  background:none;border:none;color:rgba(80,40,55,.4);font-size:13px;cursor:pointer;
  padding:4px 6px;flex-shrink:0;border-radius:6px;transition:all .2s;font-family:inherit;
}
.notice-close:hover{color:#c44a6a;background:rgba(255,158,199,.2)}
@media (prefers-color-scheme:dark){
  .notice-bar{background:rgba(255,158,199,.08);border-color:rgba(255,158,199,.18)}
  .notice-item{color:#e6d3dc}
  .notice-date{color:rgba(230,211,220,.45)}
  .notice-close{color:rgba(230,211,220,.5)}
}
@media (max-width:520px){
  .notice-item{flex-direction:column;gap:1px}
}

/* ---------- 12. 通知按钮（展开/收起） ---------- */
.notice-row{display:flex;justify-content:flex-end;padding:12px 14px 0}
.notice-toggle{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,rgba(255,180,200,.22),rgba(255,200,160,.14));
  border:1px solid rgba(255,158,199,.3);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:700;color:#c44a6a;cursor:pointer;font-family:inherit;
  transition:all .2s;
}
.notice-toggle:hover{background:rgba(255,158,199,.28);transform:translateY(-1px)}
.notice-count{
  background:#ff5fa2;color:#fff;border-radius:999px;font-size:10.5px;
  padding:1px 7px;font-weight:700;
}
.notice-chevron{font-size:10px;opacity:.7}
.notice-panel{
  margin:10px 14px 0;padding:12px 14px;
  background:linear-gradient(135deg,rgba(255,180,200,.15),rgba(255,200,160,.1));
  border:1px solid rgba(255,158,199,.25);border-radius:14px;
  display:flex;flex-direction:column;gap:8px;
}
.notice-item{display:flex;gap:8px;font-size:12.5px;color:#3d1f2d;line-height:1.5}
.notice-date{color:rgba(80,40,55,.45);white-space:nowrap;flex-shrink:0;font-size:11px;padding-top:2px}
.notice-text{flex:1;min-width:0;word-break:break-all}
@media (prefers-color-scheme:dark){
  .notice-toggle{background:rgba(255,158,199,.12);border-color:rgba(255,158,199,.25);color:#ffb0cc}
  .notice-panel{background:rgba(255,158,199,.08);border-color:rgba(255,158,199,.18)}
  .notice-item{color:#e6d3dc}
  .notice-date{color:rgba(230,211,220,.45)}
}