/* ═══════════════════════════════════════════════════════════
   Refund System — 退款管理系统
   主题: 暗紫玻璃拟态 (Purple Dark Glassmorphism)
   基于 json_delivery 设计语言
   ═══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:            #1e1033;
  --bg-gradient:   linear-gradient(135deg, #2d1b69 0%, #1e1033 50%, #0f0a1a 100%);
  --panel:         rgba(255,255,255,0.06);
  --panel-solid:   #2a1f4e;
  --panel-hover:   rgba(255,255,255,0.1);
  --line:          rgba(255,255,255,0.08);
  --line-strong:   rgba(255,255,255,0.15);
  --text:          #f1e8ff;
  --text-secondary:rgba(255,255,255,0.7);
  --muted:         rgba(255,255,255,0.45);
  --primary:       #a855f7;
  --primary-soft:  rgba(168,85,247,0.15);
  --primary-hover: #9333ea;
  --green:         #34d399;
  --green-soft:    rgba(52,211,153,0.12);
  --red:           #f87171;
  --red-soft:      rgba(248,113,113,0.12);
  --amber:         #fbbf24;
  --amber-soft:    rgba(251,191,36,0.12);
  --sidebar-w:     220px;
  --shadow:        0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.4);
  --glass:         rgba(255,255,255,0.05);
  --glass-border:  rgba(255,255,255,0.1);
  --radius:        12px;
}

html,body{height:100%}
body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
  font-size:14px;color:var(--text);
  background:var(--bg);background-image:var(--bg-gradient);background-attachment:fixed;
  line-height:1.5;-webkit-font-smoothing:antialiased;
}

/* ═══ 布局 ═══ */
.app-layout{display:flex;min-height:100vh}

/* ═══ 侧边栏 ═══ */
.sidebar{
  width:var(--sidebar-w);position:fixed;top:0;left:0;bottom:0;z-index:30;
  background:rgba(15,10,30,0.85);backdrop-filter:blur(20px);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;padding:20px;
  border-bottom:1px solid var(--line);
}
.sidebar-logo{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg, #9333ea 0%, #6d28d9 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(147,51,234,0.4);
}
.sidebar-title{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.sidebar-nav a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  color:var(--text-secondary);text-decoration:none;font-size:13px;font-weight:500;
  transition:all .15s;
}
.sidebar-nav a:hover{background:var(--panel-hover);color:var(--text)}
.sidebar-nav a.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(168,85,247,.3)}
.sidebar-nav a svg{width:18px;height:18px;flex-shrink:0;opacity:0.7}
.sidebar-nav a.active svg{opacity:1}
.sidebar-nav a.logout-link{color:var(--red);margin-top:auto}
.sidebar-nav a.logout-link:hover{background:var(--red-soft)}

/* ═══ 主内容区 ═══ */
.main-content{margin-left:var(--sidebar-w);flex:1;min-width:0}
.main-content.full{margin-left:0}

/* 移动端顶栏 */
.mobile-topbar{
  display:none;position:sticky;top:0;z-index:25;
  background:rgba(15,10,30,0.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);padding:0 16px;
  height:50px;align-items:center;justify-content:space-between;
}
.mobile-topbar .brand{font-weight:700;font-size:14px;color:var(--text)}
.mobile-topbar .menu-btn{
  background:none;border:none;color:var(--text-secondary);font-size:20px;
  cursor:pointer;padding:4px 8px;border-radius:6px;
}
.mobile-topbar .menu-btn:hover{background:var(--panel-hover)}

/* 侧边栏遮罩 */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);
  z-index:28;backdrop-filter:blur(4px);
}
body.sidebar-open .sidebar-overlay{display:block}
body.sidebar-open .sidebar{transform:translateX(0)}
body.sidebar-open{overflow:hidden}

.page-wrap{padding:24px;max-width:1400px;margin:0 auto}

/* ═══ 卡片 / 面板 ═══ */
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);backdrop-filter:blur(12px);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
}
.panel.pad{padding:20px}
.panel-header{
  padding:14px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  font-weight:600;font-size:13px;color:var(--text);
}

/* 用户卡片 */
.user-card{
  width:min(520px, 100%);
  background:var(--panel);border:1px solid var(--line);
  border-radius:16px;backdrop-filter:blur(20px);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  padding:32px;
}
.user-card.wide{width:min(680px,100%)}
.user-card .card-icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;font-size:24px;
}
.user-card .card-icon.purple{background:var(--primary-soft);color:var(--primary)}
.user-card .card-icon.green{background:var(--green-soft);color:var(--green)}

.login-card{
  width:min(400px,100%);
  background:var(--panel);border:1px solid var(--line);
  border-radius:16px;backdrop-filter:blur(20px);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  padding:36px 32px 28px;text-align:center;
}

/* 统计卡片 */
.stat{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
  backdrop-filter:blur(12px);box-shadow:var(--shadow);
  transition:all .2s;
}
.stat:hover{box-shadow:var(--shadow-lg);border-color:var(--line-strong);transform:translateY(-1px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}

/* ═══ 表单 ═══ */
input, textarea, select{
  width:100%;border:1px solid var(--line-strong);border-radius:8px;
  background:rgba(255,255,255,0.05);padding:10px 12px;
  color:var(--text);font:inherit;transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(168,85,247,.15);
}
input[type="file"]{padding:8px;cursor:pointer}
input[type="file"]::file-selector-button{
  background:var(--primary-soft);color:var(--primary);border:none;
  border-radius:6px;padding:6px 14px;margin-right:10px;
  cursor:pointer;font:inherit;font-weight:600;font-size:12px;
}
input[type="file"]::file-selector-button:hover{background:rgba(168,85,247,0.25)}
input[type="radio"], input[type="checkbox"]{width:auto}
select{background:var(--panel-solid);cursor:pointer}
label{display:block;margin-bottom:5px;font-size:13px;font-weight:500;color:var(--text-secondary)}
label .required{color:var(--red)}
.form-group{margin-bottom:16px}
.form-hint{font-size:11px;color:var(--muted);margin-top:4px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ═══ 按钮 ═══ */
.btn,button[type="submit"]{
  border:1px solid transparent;
  background:var(--primary);color:#fff;border-radius:8px;
  padding:8px 16px;font-weight:600;font-size:13px;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;white-space:nowrap;transition:all .15s;font-family:inherit;
}
.btn:hover,button[type="submit"]:hover{
  background:var(--primary-hover);box-shadow:0 4px 12px rgba(168,85,247,.3);
}
.btn.secondary{
  background:var(--glass);color:var(--text-secondary);
  border-color:var(--glass-border);backdrop-filter:blur(8px);
}
.btn.secondary:hover{background:var(--panel-hover);border-color:var(--line-strong)}
.btn.danger{background:var(--red-soft);color:var(--red);border-color:rgba(248,113,113,0.3)}
.btn.danger:hover{background:rgba(248,113,113,0.2)}
.btn.success{background:var(--green-soft);color:var(--green);border-color:rgba(52,211,153,0.3)}
.btn.success:hover{background:rgba(52,211,153,0.2)}
.btn.warning{background:var(--amber-soft);color:var(--amber);border-color:rgba(251,191,36,0.3)}
.btn.warning:hover{background:rgba(251,191,36,0.2)}
.mini{padding:5px 10px;font-size:12px}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}

.btn-full{
  display:block;width:100%;padding:14px;text-align:center;
  background:linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
  color:#fff;font-weight:700;font-size:16px;border-radius:10px;
  border:none;cursor:pointer;transition:all .15s;
}
.btn-full:hover{filter:brightness(1.05);box-shadow:0 4px 16px rgba(147,51,234,.4)}
.btn-full:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}

/* ═══ 余额选项 ═══ */
.balance-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.balance-opt{
  border:2px solid var(--line-strong);border-radius:10px;
  padding:12px;text-align:center;cursor:pointer;
  transition:all .15s;color:var(--text-secondary);font-size:13px;
}
.balance-opt:hover{border-color:var(--primary);background:var(--primary-soft)}
.balance-opt.selected{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.balance-opt .opt-icon{font-size:18px;margin-bottom:4px;display:block}

/* ═══ 表格 ═══ */
table{width:100%;border-collapse:collapse}
th{
  text-align:left;padding:10px 14px;font-size:11px;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;
  background:rgba(255,255,255,0.03);border-bottom:1px solid var(--line);
}
td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--line);color:var(--text-secondary)}
tr:hover td{background:rgba(255,255,255,0.02)}
td.mono{font-family:"SF Mono","Fira Code","Cascadia Code",monospace;font-size:12px}

/* ═══ 徽章 ═══ */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;
}
.badge.pending{background:var(--amber-soft);color:var(--amber)}
.badge.refunded{background:var(--green-soft);color:var(--green)}

/* ═══ 操作按钮行 ═══ */
.actions{display:flex;gap:6px;flex-wrap:wrap}
.actions button,.actions a{
  background:var(--glass);color:var(--text-secondary);
  border:1px solid var(--glass-border);
  padding:4px 10px;font-size:12px;border-radius:6px;
  cursor:pointer;transition:all .15s;font-family:inherit;text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
}
.actions button:hover,.actions a:hover{background:var(--panel-hover);border-color:var(--line-strong);color:var(--text)}
.actions .act-danger{color:var(--red);border-color:rgba(248,113,113,0.2)}
.actions .act-danger:hover{background:var(--red-soft)}
.actions .act-success{color:var(--green);border-color:rgba(52,211,153,0.2)}
.actions .act-success:hover{background:var(--green-soft)}

/* ═══ Flash / Toast ═══ */
.flash{
  position:fixed;top:16px;right:16px;z-index:100;max-width:360px;
  padding:12px 16px;border-radius:10px;font-size:13px;font-weight:500;
  backdrop-filter:blur(16px);cursor:pointer;
  animation:flashIn .3s ease;
  background:var(--primary-soft);color:var(--primary);
  border-left:3px solid var(--primary);
}
.flash.error{background:var(--red-soft);color:var(--red);border-left-color:var(--red)}
.flash.success{background:var(--green-soft);color:var(--green);border-left-color:var(--green)}
@keyframes flashIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ═══ 分页 ═══ */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.pagination a,.pagination span{font-size:12px;color:var(--text-secondary)}
.pagination a{
  background:var(--glass);border:1px solid var(--glass-border);
  padding:5px 12px;border-radius:7px;text-decoration:none;
  transition:all .15s;
}
.pagination a:hover{background:var(--panel-hover);color:var(--text)}
.pagination a.disabled{opacity:.4;pointer-events:none}
.pagination .current{color:var(--primary);font-weight:600}
.pagination input{width:48px;padding:5px;text-align:center}

/* ═══ 模态弹窗 ═══ */
.modal-overlay{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);
}
.modal-box{
  background:var(--panel-solid);border:1px solid var(--line);
  border-radius:16px;padding:24px;width:min(900px,calc(100%-32px));
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.modal-box h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:14px}

/* ═══ 图片预览 ═══ */
.qr-preview{text-align:center;margin-bottom:12px}
.qr-preview img{max-width:100%;max-height:200px;border-radius:8px;border:1px solid var(--line)}

/* ═══ 响应式 ═══ */
@media(max-width:860px){
  .sidebar{transform:translateX(-100%);transition:transform .25s ease}
  .sidebar-overlay{display:none}
  .mobile-topbar{display:flex}
  .main-content{margin-left:0}
  .page-wrap{padding:12px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .form-grid-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .balance-options{grid-template-columns:1fr}
  .user-card,.login-card{padding:20px}
  .pagination{flex-direction:column;gap:4px}
}