/* ============================================================
   ITMS - 剧团哇音 IT 统一管理
   设计语言：theatrewine.com（Sinatra + Elementor）
   品牌色：vivid-red #cf2e2e / orange #ff6900
   字体：Inter（正文）+ Cardo（展示）
   ============================================================ */
:root{
  --text:#1A1B1C;
  --text-2:#6B7280;
  --text-3:#9CA3AF;
  --bg:#F7F5F2;
  --bg-2:#EFECE7;
  --card:#FFFFFF;
  --border:#E8E5DF;
  --border-2:#DCD8D1;

  /* 品牌色 */
  --brand:#cf2e2e;
  --brand-dark:#a82424;
  --brand-orange:#ff6900;
  --brand-gradient:linear-gradient(135deg,#ff6900 0%,#cf2e2e 100%);
  --brand-bg:#FDF0F0;
  --brand-bg-2:#FBE6E6;

  --green:#16A34A; --green-bg:#E8F6EE;
  --red:#DC2626; --red-bg:#FCEBEA;
  --amber:#D97706; --amber-bg:#FCF3E3;
  --grey:#6B7280; --grey-bg:#F1F2F4;

  /* 顶栏 */
  --topbar-bg:#141414;
  --topbar-text:#F5F3F0;
  --topbar-muted:#A8A29E;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter','PingFang SC','Segoe UI','Microsoft YaHei',Arial,sans-serif;
  color:var(--text);background:var(--bg);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Cardo','Georgia','PingFang SC',serif;letter-spacing:.2px;}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}
code{background:var(--grey-bg);padding:1px 5px;border-radius:4px;font-size:12px;word-break:break-all;}

/* ==================== 登录页 ==================== */
.login-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,105,0,.18), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(207,46,46,.22), transparent 55%),
    linear-gradient(160deg,#1a1414 0%,#0e0c0c 100%);
  padding:20px;
}
.login-card{
  background:var(--card);border-radius:18px;padding:44px 44px 36px;
  width:400px;max-width:94vw;box-shadow:0 24px 60px rgba(0,0,0,.35);
  text-align:center;position:relative;overflow:hidden;
}
.login-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--brand-gradient);
}
.login-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:6px;}
.login-logo img{height:44px;width:auto;display:block;
  /* 白色 logo 在白卡上不可见，叠加品牌渐变背景圆 */
  background:var(--brand-gradient);border-radius:12px;padding:8px;}
.login-logo .brand-word{font-family:'Cardo',Georgia,serif;font-size:26px;font-weight:700;color:var(--text);letter-spacing:1px;}
.login-card h1{font-size:20px;margin:14px 0 4px;font-family:'Inter',sans-serif;font-weight:600;}
.login-sub{color:var(--text-2);font-size:13px;margin:0 0 28px;}
.login-hint{color:var(--text-3);font-size:12px;margin-top:18px;}

/* ==================== 顶栏 ==================== */
.topbar{
  background:var(--topbar-bg);color:var(--topbar-text);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;z-index:50;
}
.topbar::after{
  content:"";display:block;height:2px;background:var(--brand-gradient);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1280px;margin:0 auto;padding:0 24px;height:60px;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--topbar-text);font-weight:600;font-size:15px;}
.brand:hover{text-decoration:none;}
.brand img{height:32px;width:auto;display:block;
  background:var(--brand-gradient);border-radius:8px;padding:5px;}
.brand .brand-word{font-family:'Cardo',Georgia,serif;font-size:17px;letter-spacing:.5px;}
.brand .brand-sub{font-weight:400;color:var(--topbar-muted);font-size:12px;margin-left:2px;}

/* 角色切换（普通用户 / IT管理） */
.role-switch{
  display:inline-flex;align-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:3px;gap:2px;
}
.role-switch a{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:999px;font-size:13px;font-weight:500;
  color:var(--topbar-muted);transition:all .18s ease;white-space:nowrap;
}
.role-switch a:hover{color:var(--topbar-text);text-decoration:none;background:rgba(255,255,255,.06);}
.role-switch a.active{
  background:var(--brand-gradient);color:#fff;font-weight:600;
  box-shadow:0 2px 8px rgba(207,46,46,.35);
}
.role-switch a .rs-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;}

.topbar-right{display:flex;align-items:center;gap:14px;}
.top-link{color:var(--topbar-muted);font-size:13px;}
.top-link:hover{color:var(--topbar-text);text-decoration:none;}
.top-user{color:var(--topbar-text);font-size:13px;display:inline-flex;align-items:center;gap:7px;}
.top-user .avatar{
  width:28px;height:28px;border-radius:50%;background:var(--brand-gradient);
  color:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
}
.badge{background:var(--brand);color:#fff;border-radius:10px;padding:0 7px;font-size:11px;font-weight:600;}
.badge.badge-danger{background:#dc3545;color:#fff;}
.badge.badge-success{background:#28a745;color:#fff;}
.badge.badge-warning{background:#f0ad4e;color:#fff;}
.badge.badge-info{background:#17a2b8;color:#fff;}
.badge.badge-secondary{background:#6c757d;color:#fff;}
.badge.badge-primary{background:#0d6efd;color:#fff;}

/* flash */
.flash-wrap{max-width:1280px;margin:14px auto 0;padding:0 24px;}
.flash{padding:11px 16px;border-radius:10px;margin-bottom:8px;font-size:13px;}
.flash-success{background:var(--green-bg);color:var(--green);border:1px solid rgba(22,163,74,.2);}
.flash-error{background:var(--red-bg);color:var(--red);border:1px solid rgba(220,38,38,.2);}

/* ==================== 布局 ==================== */
.layout{display:flex;max-width:1280px;margin:0 auto;padding:22px 24px;gap:22px;align-items:flex-start;}
.sidebar{
  width:216px;flex:0 0 216px;background:var(--card);
  border:1px solid var(--border);border-radius:14px;padding:16px 12px;
  position:sticky;top:82px;
}
.main{flex:1 1 auto;min-width:0;}
@media (max-width:860px){
  .layout{flex-direction:column;padding:16px;}
  .sidebar{width:100%;flex:none;position:static;}
  .role-switch a{padding:6px 11px;font-size:12px;}
  .brand .brand-sub{display:none;}
}

/* 菜单（三级：网络管理 > VPN管理 > Outline） */
.menu-group{margin-bottom:6px;}
.menu-1{
  font-weight:700;font-size:12px;color:var(--text);
  padding:8px 12px 4px;letter-spacing:1px;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;
}
.menu-1::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--brand-gradient);}
.menu-2{font-size:13px;color:var(--text-2);padding:4px 12px 4px 22px;font-weight:500;}
.menu-3{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);
  padding:9px 12px 9px 32px;border-radius:9px;margin:2px 0;transition:all .15s;
}
.menu-3::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--border-2);transition:all .15s;}
.menu-3.active{background:var(--brand-bg);color:var(--brand);font-weight:600;}
.menu-3.active::before{background:var(--brand);}
.menu-3:hover{background:var(--bg-2);color:var(--text);text-decoration:none;}
.menu-3:hover::before{background:var(--text-2);}

/* ==================== 页面 ==================== */
.page{min-width:0;}
.page h2{font-size:22px;margin:0 0 4px;font-weight:700;}
.page-desc{color:var(--text-2);font-size:13px;margin:0 0 20px;}
.page-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px;}
.page-tools{display:flex;gap:8px;flex-wrap:wrap;}

/* 卡片 */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:18px;}
.card h3{font-size:16px;margin:0 0 14px;font-weight:600;font-family:'Inter',sans-serif;}
.card h4{font-size:13px;margin:16px 0 8px;color:var(--text-2);font-weight:600;}
.card-accent{border-left:4px solid var(--brand);}
.card-warn{border-left:4px solid var(--amber);}
.muted{color:var(--text-2);}

/* 表格 */
.table{width:100%;border-collapse:collapse;font-size:13px;}
.table th{
  text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);
  color:var(--text-2);font-weight:600;white-space:nowrap;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;
}
.table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.table tr:hover td{background:#FBFAF8;}
.table .wrap{max-width:280px;}
.ops{white-space:nowrap;}
.ops .btn{margin:2px;}

/* 表单 */
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-size:13px;color:var(--text-2);margin-bottom:5px;font-weight:500;}
input[type=text],input[type=email],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%;max-width:520px;padding:9px 12px;border:1px solid var(--border-2);
  border-radius:9px;font-size:13px;font-family:inherit;background:#fff;color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(207,46,46,.12);
}
textarea{resize:vertical;}
.inline-form{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;}
.inline-form input,.inline-form select{width:auto;}
.form-msg{font-size:13px;margin-top:8px;min-height:0;}
.form-msg.ok{color:var(--green);}
.form-msg.err{color:var(--red);}

/* 按钮 */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--card);color:var(--text);font-size:13px;cursor:pointer;
  line-height:1.4;font-weight:500;transition:all .15s;font-family:inherit;
}
.btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none;background:var(--brand-bg);}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;box-shadow:0 4px 12px rgba(207,46,46,.3);}
.btn-success{background:var(--green);border-color:var(--green);color:#fff;}
.btn-success:hover{background:#15803d;border-color:#15803d;color:#fff;}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff;}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c;color:#fff;}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:7px;}
.btn-block{display:flex;width:100%;text-align:center;padding:12px 0;justify-content:center;}
.btn-sm:hover{color:inherit;}
.btn-primary.btn-sm:hover{color:#fff;}

/* pills */
.pill{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;}
.pill-active{background:var(--green-bg);color:var(--green);}
.pill-expired,.pill-revoked,.pill-disabled{background:var(--red-bg);color:var(--red);}
.pill-pending{background:var(--amber-bg);color:var(--amber);}
.pill-approved,.pill-internal{background:var(--green-bg);color:var(--green);}
.pill-rejected{background:var(--red-bg);color:var(--red);}
.pill-external{background:var(--grey-bg);color:var(--grey);}

/* kv */
.kv{border-collapse:collapse;font-size:13px;}
.kv th{text-align:left;color:var(--text-2);font-weight:500;padding:7px 18px 7px 0;white-space:nowrap;}
.kv td{padding:7px 0;}
.keybox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* 统计卡 */
.stat-grid{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px;}
.stat-card{
  flex:1 1 170px;min-width:0;background:var(--card);
  border:1px solid var(--border);border-radius:14px;padding:18px;
  position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);}
.stat-card::after{
  content:"";position:absolute;top:0;right:0;width:60px;height:60px;
  background:var(--brand-gradient);opacity:.06;border-radius:0 0 0 60px;
}
.stat-num{font-size:28px;font-weight:700;color:var(--brand);font-family:'Cardo',Georgia,serif;}
.stat-label{font-size:12px;color:var(--text-2);margin-top:4px;font-weight:500;}

/* tabs */
.tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;
  background:var(--bg-2);padding:5px;border-radius:11px;width:fit-content;}
.tab{padding:8px 18px;border-radius:8px;background:transparent;color:var(--text-2);font-size:13px;font-weight:500;border:none;cursor:pointer;}
.tab.active{background:var(--card);color:var(--brand);font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.06);}
.tab:hover{color:var(--text);text-decoration:none;}

/* steps */
.steps{padding-left:20px;margin:8px 0;}
.steps li{margin-bottom:8px;font-size:13px;}

/* 空状态 */
.empty{text-align:center;padding:40px 20px;color:var(--text-3);font-size:13px;}

@media (max-width:760px){
  .table{font-size:12px;}
  .table th,.table td{padding:7px 8px;}
  .stat-grid{flex-direction:column;}
  .topbar-inner{padding:0 14px;height:56px;}
  .login-card{padding:32px 24px;}
}

/* ============================================================
   移动端优化（≤640px：手机竖屏）
   ============================================================ */
@media (max-width:640px){
  body{font-size:13px;}
  /* 顶栏：允许换行，压缩间距 */
  .topbar-inner{
    flex-wrap:wrap;padding:8px 12px;height:auto;gap:8px;
    justify-content:center;
  }
  .brand{order:1;flex:1 1 100%;justify-content:center;}
  .brand .brand-word{font-size:15px;}
  .brand .brand-sub{display:none;}
  .role-switch{order:2;flex:1 1 auto;justify-content:center;}
  .role-switch a{padding:5px 12px;font-size:12px;}
  .topbar-right{order:3;flex:1 1 100%;justify-content:center;gap:10px;}
  .top-link{font-size:12px;}
  .top-user .avatar{width:24px;height:24px;font-size:11px;}
  /* 布局 */
  .layout{padding:12px;gap:14px;}
  .sidebar{padding:12px 8px;}
  .menu-3{padding:8px 10px 8px 26px;font-size:13px;}
  /* 页面标题区：上下堆叠 */
  .page-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .page-head .btn{width:100%;justify-content:center;}
  .page h2{font-size:19px;}
  .page-desc{font-size:12px;margin-bottom:14px;}
  /* 卡片 */
  .card{padding:16px 14px;border-radius:12px;margin-bottom:14px;}
  .card h3{font-size:15px;margin-bottom:12px;}
  /* 表格：横向滚动 */
  .table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  .table .wrap{max-width:200px;white-space:normal;}
  .table th,.table td{padding:8px 10px;font-size:12px;}
  /* KV 表：堆叠 */
  .kv{display:block;}
  .kv tr{display:block;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:6px;}
  .kv th{display:block;padding:2px 0;font-size:11px;text-transform:uppercase;letter-spacing:.5px;}
  .kv td{display:block;padding:2px 0;}
  /* 表单 */
  .form-row{margin-bottom:12px;}
  .form-row label{font-size:12px;}
  input[type=text],input[type=email],input[type=number],input[type=date],
  input[type=password],select,textarea{
    max-width:100%;padding:10px 12px;font-size:14px;/* 14px 防止 iOS 缩放 */
  }
  .inline-form{flex-direction:column;align-items:stretch;}
  .inline-form input,.inline-form select{width:100%;}
  /* 按钮：主操作全宽 */
  .btn{padding:10px 16px;font-size:13px;justify-content:center;}
  .btn-primary{width:100%;}
  .btn-sm{width:auto;padding:6px 12px;font-size:12px;}
  .ops .btn{margin:2px;}
  /* 统计卡：2列 */
  .stat-grid{flex-direction:row;flex-wrap:wrap;gap:10px;}
  .stat-card{flex:1 1 calc(50% - 5px);padding:14px;}
  .stat-num{font-size:22px;}
  .stat-label{font-size:11px;}
  /* Tabs：可横向滚动 */
  .tabs{overflow-x:auto;flex-wrap:nowrap;width:100%;-webkit-overflow-scrolling:touch;}
  .tab{padding:7px 14px;font-size:12px;white-space:nowrap;}
  /* 工单向导 */
  .wizard{max-width:100%;}
  .wizard-steps{margin-bottom:20px;}
  .wizard-step .num{width:28px;height:28px;font-size:13px;}
  .wizard-step .lbl{font-size:11px;}
  /* 系统卡片网格：2列 */
  .sys-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .sys-card{padding:14px 8px;}
  .sys-card .sys-icon{font-size:22px;margin-bottom:6px;}
  .sys-card .sys-name{font-size:12px;line-height:1.3;}
  /* 类型卡片：纵向堆叠 */
  .type-row{flex-direction:column;gap:10px;}
  .type-card{padding:16px;}
  .type-card .type-icon{font-size:28px;}
  .type-card .type-name{font-size:15px;}
  /* 向导导航按钮 */
  .wizard-nav{gap:10px;}
  .wizard-nav .btn{flex:1;}
  /* 上传区域 */
  .upload-area{padding:16px;}
  .upload-area .up-icon{font-size:24px;}
  .upload-area .up-text{font-size:12px;}
  /* 工单详情：消息时间线 */
  .wizard-panel .card{padding:14px;}
  /* 消息气泡：更宽 */
  .msg-col{max-width:90% !important;}
  /* flash */
  .flash-wrap{padding:0 12px;margin-top:10px;}
  .flash{padding:10px 14px;font-size:12px;}
  /* 工单详情页操作按钮区 */
  .card .inline-form .btn{align-self:stretch;}
  /* 优先级/状态 pill */
  .pill{font-size:11px;padding:2px 9px;}
}

/* ============================================================
   超小屏优化（≤380px）
   ============================================================ */
@media (max-width:380px){
  .role-switch a{padding:5px 9px;font-size:11px;}
  .top-link{font-size:11px;}
  .top-user{font-size:11px;}
  .sys-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
  .sys-card{padding:12px 6px;}
  .sys-card .sys-name{font-size:11px;}
  .stat-card{flex:1 1 100%;}
  .wizard-step .lbl{font-size:10px;}
  .btn{padding:9px 14px;font-size:12px;}
}

/* ============================================================
   Dashboard 首页样式
   ============================================================ */
/* 欢迎栏 */
.welcome-bar{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:18px 20px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.welcome-bar::after{
  content:"";position:absolute;top:0;right:0;width:120px;height:120px;
  background:var(--brand-gradient);opacity:.05;border-radius:0 0 0 120px;
}
.welcome-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--brand-gradient);color:#fff;
  font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;box-shadow:0 4px 12px rgba(207,46,46,.25);
}
.welcome-text h2{
  font-size:18px;margin:0;font-weight:700;font-family:'Inter',sans-serif;
}
.welcome-text p{
  margin:2px 0 0;font-size:13px;color:var(--text-2);
}
/* 区块标题 */
.section-title{
  font-size:18px;margin:20px 0 2px;font-weight:700;
  padding-left:10px;border-left:3px solid var(--brand);
}
/* 工单中心入口 */
.ticket-entry{margin-bottom:16px;}
.ticket-entry-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
}
.ticket-entry-text h3{margin:0 0 4px;font-size:16px;}
.ticket-entry-text p{margin:0;font-size:13px;}
.ticket-entry-actions{display:flex;gap:8px;flex-shrink:0;}
/* Access Key 展示 */
.keybox{display:flex;flex-direction:column;gap:10px;}
.keybox-code{
  background:var(--grey-bg);border:1px solid var(--border);
  border-radius:8px;padding:10px 12px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.keybox-code code{
  background:transparent;padding:0;font-size:12px;
  white-space:nowrap;word-break:normal;display:block;
  font-family:'SF Mono','Monaco','Consolas',monospace;
  line-height:1.5;
}
.keybox-actions{display:flex;gap:8px;flex-wrap:wrap;}
/* 表格包裹（移动端横向滚动） */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px;}
.table-wrap .table{margin:0;}

/* ============================================================
   Dashboard 移动端优化（≤640px）
   ============================================================ */
@media (max-width:640px){
  .welcome-bar{padding:14px 16px;gap:12px;border-radius:12px;}
  .welcome-avatar{width:42px;height:42px;font-size:17px;}
  .welcome-text h2{font-size:16px;}
  .welcome-text p{font-size:12px;}
  .section-title{font-size:16px;margin:16px 0 2px;}
  /* 工单中心：上下堆叠，按钮全宽 */
  .ticket-entry-inner{flex-direction:column;align-items:stretch;gap:12px;}
  .ticket-entry-actions{flex-direction:column;}
  .ticket-entry-actions .btn{width:100%;justify-content:center;}
  .ticket-entry-text h3{font-size:15px;}
  .ticket-entry-text p{font-size:12px;}
  /* Access Key：代码区可横滑，按钮全宽 */
  .keybox-code{padding:8px 10px;}
  .keybox-code code{font-size:11px;}
  .keybox-actions{flex-direction:column;}
  .keybox-actions .btn{width:100%;justify-content:center;}
  /* 配置方式步骤 */
  .steps{padding-left:16px;}
  .steps li{font-size:12px;margin-bottom:6px;}
  /* 卡片间距 */
  .dashboard-page .card{margin-bottom:12px;}
  .dashboard-page .page-desc{font-size:12px;margin-bottom:12px;}
}
@media (max-width:380px){
  .welcome-bar{padding:12px 14px;}
  .welcome-avatar{width:38px;height:38px;font-size:15px;}
  .welcome-text h2{font-size:15px;}
}

/* ============================================================
   用户搜索选择器 (User Picker)
   ============================================================ */
.user-picker{position:relative;width:100%;}
.user-picker-input{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:14px;background:var(--card);color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.user-picker-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(207,46,46,.1);}
.user-picker-results{
  display:none;position:absolute;top:100%;left:0;right:0;z-index:100;
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  margin-top:4px;max-height:280px;overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.up-result-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background .1s;
}
.up-result-item:last-child{border-bottom:none;}
.up-result-item:hover{background:var(--grey-bg);}
.up-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--brand-gradient);color:#fff;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.up-info{display:flex;flex-direction:column;min-width:0;}
.up-name{font-size:13px;font-weight:600;color:var(--text);}
.up-email{font-size:11px;color:var(--text-2);}
.up-dept{font-size:10px;color:var(--text-3);margin-top:1px;}
.up-no-result{padding:14px;text-align:center;color:var(--text-2);font-size:13px;}
/* 已选用户 chip */
.user-picker-chip{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--grey-bg);border:1px solid var(--border);border-radius:8px;
}
.chip-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--brand-gradient);color:#fff;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.chip-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.chip-name{font-size:13px;font-weight:600;color:var(--text);}
.chip-email{font-size:11px;color:var(--text-2);}
.chip-remove{
  background:none;border:none;color:var(--text-2);font-size:20px;cursor:pointer;
  padding:0 4px;line-height:1;border-radius:4px;flex-shrink:0;
}
.chip-remove:hover{color:var(--brand);background:rgba(207,46,46,.08);}
/* 移动端用户选择器 */
@media (max-width:640px){
  .user-picker-input{font-size:14px;padding:10px 12px;}
  .up-result-item{padding:10px;}
  .up-avatar{width:30px;height:30px;font-size:12px;}
}

/* ============================================================
   客户端下载卡片
   ============================================================ */
.download-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin-top:8px;
}
.download-card{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--grey-bg);
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  transition:border-color .15s,box-shadow .15s,transform .1s;
}
.download-card:hover{
  border-color:var(--brand);
  box-shadow:0 4px 12px rgba(207,46,46,.1);
  transform:translateY(-1px);
}
.download-card.dl-disabled{
  opacity:.75;
  cursor:default;
}
.download-card.dl-disabled:hover{
  border-color:var(--border);
  box-shadow:none;
  transform:none;
}
.dl-icon{
  font-size:28px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);
  border-radius:10px;
  flex-shrink:0;
}
.dl-info{flex:1;min-width:0;}
.dl-name{font-size:14px;font-weight:700;margin-bottom:2px;}
.dl-desc{font-size:11px;color:var(--text-2);line-height:1.4;}
.dl-arrow{
  font-size:18px;color:var(--brand);font-weight:700;
  flex-shrink:0;
}
@media (max-width:640px){
  .download-grid{grid-template-columns:1fr;gap:8px;}
  .download-card{padding:12px 14px;}
  .dl-icon{width:38px;height:38px;font-size:22px;}
  .dl-name{font-size:13px;}
  .dl-desc{font-size:10px;}
}

/* ========== 富文本编辑器 ========== */
.rte-toolbar { display: flex; gap: 4px; padding: 8px; background: #faf9f7; border: 1px solid #e8e6e1; border-radius: 8px 8px 0 0; border-bottom: none; flex-wrap: wrap; }
.rte-btn { padding: 4px 10px; border: 1px solid #e0ddd8; background: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; transition: all .15s; }
.rte-btn:hover { background: #fef2f2; border-color: #cf2e2e; }
.rte-editor { min-height: 160px; padding: 12px; border: 1px solid #e8e6e1; border-radius: 0 0 8px 8px; background: #fff; font-size: 14px; line-height: 1.7; outline: none; }
.rte-editor:focus { border-color: #cf2e2e; }
.rte-editor:empty::before { content: attr(data-placeholder); color: #aaa; }
.rte-editor img { max-width: 100%; border-radius: 6px; margin: 4px 0; }
.rte-editor a { color: #cf2e2e; text-decoration: underline; }
.ticket-rich-content img { max-width: 100%; border-radius: 6px; }
.ticket-rich-content a { color: #cf2e2e; text-decoration: underline; word-break: break-all; }
.ticket-rich-content ul, .ticket-rich-content ol { padding-left: 20px; margin: 8px 0; }
.ticket-rich-content p { margin: 4px 0; }
.mention-tag { background: #fef2f2; color: #cf2e2e; padding: 1px 6px; border-radius: 4px; font-weight: 500; }

/* ========== @提及下拉 ========== */
.mention-dropdown { position: absolute; background: #fff; border: 1px solid #e8e6e1; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto; z-index: 100; min-width: 220px; display: none; }
.mention-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mention-item:hover, .mention-item.active { background: #fef2f2; }
.mention-item .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#cf2e2e,#ff6900); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.mention-item .info { flex: 1; }
.mention-item .name { font-weight: 600; color: #1a1a1a; }
.mention-item .email { font-size: 11px; color: #999; }

/* ========== Dashboard 双卡片布局 ========== */
.dashboard-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.dashboard-card { transition: transform .15s, box-shadow .15s; }
.dashboard-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
@media (max-width: 640px) {
  .dashboard-cards { grid-template-columns: 1fr; }
}

/* ========== Outline 用户列表（两行布局） ========== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.outline-users-table { width: 100%; border-collapse: collapse; }
.outline-users-table th { white-space: nowrap; font-size: 13px; padding: 10px 12px; text-align: left; border-bottom: 2px solid #e8e6e1; }
.outline-users-table td { vertical-align: middle; padding: 10px 12px; }

/* 数据行 */
.outline-data-row { border-bottom: 1px solid #f0eee9; }
.outline-data-row:hover { background: #faf9f7; }

/* 操作行（第二行） */
.outline-action-row { background: #fafafa; }
.outline-action-row td { padding: 6px 12px; border-top: none; }
.outline-action-row .btn { padding: 4px 10px; font-size: 12px; }

/* 类型标签（横排） */
.type-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.type-tag.type-internal { background: #eff6ff; color: #2563eb; }
.type-tag.type-external { background: #fef3c7; color: #92400e; }

/* ========== 手机端优化（≤768px） ========== */
@media (max-width: 768px) {
  .outline-users-table { min-width: 100%; }
  .outline-users-table th, .outline-users-table td { padding: 8px 6px; font-size: 12px; }
  .outline-users-table th:nth-child(3), /* UMS */
  .outline-users-table td:nth-child(3),
  .outline-users-table th:nth-child(6), /* 数据限额 */
  .outline-users-table td:nth-child(6) {
    display: none;
  }
  .outline-action-row .btn { padding: 6px 8px; font-size: 11px; margin-bottom: 4px; }
  .outline-action-row td > div { gap: 6px; }
}

/* ========== 工单列表优化（两行布局） ========== */
.ticket-list-table { width: 100%; border-collapse: collapse; }
.ticket-list-table th { white-space: nowrap; font-size: 13px; padding: 10px 12px; text-align: left; border-bottom: 2px solid #e8e6e1; }
.ticket-list-table td { vertical-align: middle; padding: 10px 12px; }
.ticket-data-row { border-bottom: 1px solid #f0eee9; }
.ticket-data-row:hover { background: #faf9f7; }
.ticket-action-row { background: #fafafa; }
.ticket-action-row td { padding: 6px 12px; border-top: none; }
.ticket-action-row .btn { padding: 4px 10px; font-size: 12px; }

/* 小号 pill 标签 */
.pill-sm { padding: 2px 8px; font-size: 11px; white-space: nowrap; }

/* 工单列表手机端优化 */
@media (max-width: 768px) {
  .ticket-list-table { min-width: 700px; }
  .ticket-list-table th:nth-child(5), /* 提交人 */
  .ticket-list-table td:nth-child(5),
  .ticket-list-table th:nth-child(6), /* 优先级 */
  .ticket-list-table td:nth-child(6) {
    display: none;
  }
  .ticket-action-row .btn { padding: 6px 8px; font-size: 11px; }
}