/* === 海水鱼商城管理后台 — 严格遵循 fishmall-design.md + admin.html 变量体系 === */

:root {
  /* ═══ fishmall-design.md §Colors — 品牌色系 ═══ */
  --color-primary:         #031424;
  --color-on-primary:      #f0f5f9;
  --color-accent-deepsea:  #005082;
  --color-accent-teal:     #00a8cc;
  --color-accent-cyan:     #00d4db;
  --color-accent-coral:    #ff7e67;
  --color-accent-sand:     #f4eedb;
  /* ═══ fishmall-design.md §Semantic ═══ */
  --color-info:            #0072b5;
  --color-success:         #00a8cc;
  --color-warning:         #ffca3a;
  --color-error:           #e63946;
  /* ═══ fishmall-design.md §Surface ═══ */
  --color-canvas:          #f0f5f9;
  --color-hairline:        #cfe0ec;
  --color-surface-card:    #ffffff;
  --color-surface-hover:   #e6eef5;
  --color-surface-near:    #f6f9fc;
  /* ═══ fishmall-design.md §Text ═══ */
  --color-ink:             #031424;
  --color-body:            #1c354d;
  --color-body-mid:        #42617a;
  --color-mute:            #6b8fa8;
  --color-mute-soft:       #9bbcd4;
  /* ═══ fishmall-design.md §Shapes ═══ */
  --rounded-sm:            4px;
  --rounded-md:            8px;
  --rounded-full:          9999px;
  /* ═══ fishmall-design.md §Elevation ═══ */
  --shadow-card:
    0 84px 24px rgba(3,20,36,0),
    0 54px 22px rgba(3,20,36,0.01),
    0 30px 18px rgba(3,20,36,0.03),
    0 13px 13px rgba(3,20,36,0.06),
    0  3px  7px rgba(3,20,36,0.07);
  --shadow-elevated:
    0 84px 24px rgba(3,20,36,0),
    0 54px 22px rgba(3,20,36,0.01),
    0 30px 18px rgba(3,20,36,0.04),
    0 13px 13px rgba(3,20,36,0.08),
    0  3px  7px rgba(3,20,36,0.10);
  --shadow-modal:
    0 24px 24px rgba(3,20,36,0.20),
    0  6px 13px rgba(3,20,36,0.25);
  --shadow-button:         rgba(3,20,36,0.08) 0px 1px 3px;
  /* ═══ fishmall-design.md §Typography ═══ */
  --font-primary:          Inter, Arial, Helvetica, sans-serif;
  --font-mono:             Inconsolata, 'Courier New', monospace;
}

/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font-primary);background:var(--color-surface-card);color:var(--color-ink);font-size:14px;line-height:1.5;}
a{color:var(--color-primary);text-decoration:none;}a:hover{color:var(--color-primary);}
button{cursor:pointer;font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:14px;}
table{width:100%;border-collapse:collapse;}

/* ===== Login Page (fishmall-design.md) ===== */
.login-page{display:flex;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-accent-deepsea),var(--color-primary)50%,#020d18);padding:20px;}
.login-page::before{content:'';position:fixed;inset:0;opacity:.05;background-image:radial-gradient(circle at 20% 50%,#fff 1px,transparent 1px),radial-gradient(circle at 80% 20%,#fff 1px,transparent 1px),radial-gradient(circle at 50% 80%,#fff 2px,transparent 2px);background-size:60px 60px,80px 80px,100px 100px;}
.login-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--color-surface-card);border-radius:var(--rounded-md);box-shadow:var(--shadow-elevated);overflow:hidden;}
.login-card-header{background:linear-gradient(135deg,var(--color-accent-deepsea),var(--color-primary));padding:32px 28px 24px;text-align:center;color:#fff;}
.login-card-header .login-logo{width:56px;height:56px;border-radius:var(--rounded-md);background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 12px;}
.login-card-header h1{font-size:20px;font-weight:600;letter-spacing:-.2px;}
.login-card-header p{font-size:12px;opacity:.75;margin-top:4px;}
.login-card-body{padding:28px;}
.login-card-body .form-group{margin-bottom:18px;}
.login-card-body label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--color-body-mid);}
.login-card-body .form-control{width:100%;padding:0 12px;height:44px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);font-size:14px;font-family:var(--font-primary);outline:none;transition:border-color .2s,box-shadow .2s;background:var(--color-surface-card);}
.login-card-body .form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(3,20,36,.1);}

/* ===== 首次登录改密码 ===== */
.pwd-change-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9998;}
.pwd-change-card{position:relative;z-index:1;width:100%;max-width:400px;background:var(--color-surface-card);border-radius:var(--rounded-md);box-shadow:var(--shadow-elevated);padding:32px 28px;}
.pwd-change-card h3{font-size:18px;font-weight:600;margin-bottom:6px;text-align:center;color:var(--color-accent-deepsea);}
.pwd-change-hint{font-size:13px;color:var(--color-body-mid);text-align:center;margin-bottom:20px;}
.pwd-change-card .form-group{margin-bottom:14px;}
.pwd-change-card label{display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:var(--color-body-mid);}
.pwd-change-card .form-control{width:100%;padding:0 12px;height:42px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);font-size:14px;font-family:var(--font-primary);outline:none;transition:border-color .2s;background:var(--color-surface-card);}
.pwd-change-card .form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(3,20,36,.1);}
.pwd-change-error{font-size:13px;color:var(--color-error);text-align:center;margin-bottom:12px;min-height:1em;}
.btn-login{width:100%;height:44px;background:linear-gradient(135deg,var(--color-accent-deepsea),var(--color-primary));color:#fff;border:none;border-radius:var(--rounded-sm);font-size:16px;font-weight:600;cursor:pointer;transition:opacity .2s,transform .2s;font-family:var(--font-primary);margin-top:4px;}
.btn-login:hover{opacity:.9;transform:translateY(-1px);}.btn-login:disabled{opacity:.6;cursor:not-allowed;}
.login-error{color:var(--color-error);font-size:12px;text-align:center;margin-top:8px;min-height:18px;}
.login-footer{text-align:center;padding:0 28px 24px;font-size:11px;color:var(--color-mute);}
.login-footer code{background:var(--color-surface-hover);padding:1px 6px;border-radius:2px;font-family:var(--font-mono);font-size:11px;}
.login-select{width:100%;padding:0 12px;height:44px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);font-size:14px;font-family:var(--font-primary);outline:none;transition:border-color .2s,box-shadow .2s;background:var(--color-surface-card);margin-bottom:18px;cursor:pointer;}
.login-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(3,20,36,.1);}

/* ===== App Layout (admin.html 同款 flex 布局) ===== */
.app-layout{display:none;height:100vh;}
.app-layout.logged-in{display:flex;}

/* Sidebar */
.sidebar{width:220px;background:var(--color-primary);color:#fff;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.sidebar-logo{height:64px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.08);gap:10px;}
.sidebar-logo .logo-icon{width:32px;height:32px;border-radius:var(--rounded-sm);background:linear-gradient(135deg,var(--color-accent-deepsea),var(--color-accent-teal));display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.sidebar-logo h2{font-size:15px;font-weight:600;white-space:nowrap;letter-spacing:-.15px;}
.sidebar-menu{flex:1;overflow-y:auto;padding:8px 0;}
.menu-group{margin-bottom:4px;}
.menu-group-title{padding:12px 20px 6px;font-size:12px;font-family:var(--font-mono);color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.6px;}
.menu-item{display:flex;align-items:center;padding:10px 20px;cursor:pointer;transition:all .2s;color:rgba(255,255,255,.65);font-size:14px;font-weight:500;border-left:3px solid transparent;}
.menu-item:hover{color:#fff;background:rgba(255,255,255,.06);}
.menu-item.active{color:#fff;background:rgba(0,168,204,.18);border-left-color:var(--color-accent-teal);}
.menu-item .menu-icon{width:20px;text-align:center;margin-right:12px;font-size:15px;flex-shrink:0;}
.menu-item .menu-badge{margin-left:auto;background:var(--color-error);color:#fff;font-size:11px;font-family:var(--font-mono);font-weight:600;padding:1px 8px;border-radius:4px;letter-spacing:.6px;}
.sidebar-footer{padding:12px 20px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:12px;cursor:pointer;transition:color .15s;}
.sidebar-footer:hover{color:var(--color-error);}

/* Main */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{height:64px;background:var(--color-surface-card);display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--color-hairline);z-index:10;flex-shrink:0;backdrop-filter:blur(12px);}
.topbar-left{display:flex;align-items:center;gap:16px;}
.topbar-left .hamburger{display:none;background:none;border:none;font-size:20px;cursor:pointer;padding:4px 8px;color:var(--color-ink);}
.breadcrumb{color:var(--color-mute);font-size:14px;font-weight:500;}
.breadcrumb span{color:var(--color-ink);}
.topbar-right{display:flex;align-items:center;gap:16px;}
.admin-info{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 6px;border-radius:var(--rounded-md);transition:background .15s;}
.admin-info:hover{background:var(--color-surface-hover);}
.admin-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-accent-teal));color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;}
.admin-name{font-size:14px;font-weight:500;}
.btn-logout-top{margin-left:12px;padding:5px 14px;font-size:12px;border:1px solid rgba(255,255,255,.15);border-radius:var(--rounded-md);background:transparent;color:rgba(255,255,255,.55);cursor:pointer;transition:all .15s;}
.btn-logout-top:hover{color:var(--color-error);border-color:var(--color-error);background:rgba(239,68,68,.08);}
/* 顶栏用户下拉面板：点击用户名弹出（身份信息 + 修改密码 + 退出登录） */
.user-menu-wrap{position:relative;}
.user-menu-caret{font-size:10px;color:var(--color-body-mid);transition:transform .15s;}
.user-menu-wrap.open .user-menu-caret{transform:rotate(180deg);}
.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--color-surface-card);border:1px solid var(--color-hairline);border-radius:var(--rounded-md);box-shadow:var(--shadow-elevated);padding:10px;z-index:100;animation:udIn .15s ease;}
@keyframes udIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.user-dropdown-head{display:flex;align-items:center;gap:10px;padding:6px 8px;}
.user-dropdown-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
.user-dropdown-name{font-size:14px;font-weight:600;color:var(--color-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-dropdown-role{font-size:12px;color:var(--color-body-mid);}
.user-dropdown-divider{height:1px;background:var(--color-hairline);margin:8px 0;}
.user-dropdown-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;font-size:13px;color:var(--color-ink);background:transparent;border:none;border-radius:var(--rounded-sm);cursor:pointer;text-align:left;transition:background .15s;}
.user-dropdown-btn:hover{background:var(--color-surface-hover);}
.user-dropdown-btn.danger{color:var(--color-error);}
.user-dropdown-btn.danger:hover{background:rgba(239,68,68,.08);}
.content{flex:1;overflow-y:auto;padding:24px;background:var(--color-surface-card);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(3,20,36,.35);z-index:49;}
/* ===== Tab Panels ===== */
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ===== Stats Cards ===== */
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{background:var(--color-surface-card);border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);padding:24px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:border-color .15s,transform .15s;}
.stat-card:hover{border-color:var(--border-hover);transform:translateY(-2px);}
.stat-card::after{content:'';position:absolute;top:0;right:0;width:100px;height:100px;border-radius:50%;opacity:.06;transform:translate(30px,-30px);}
.stat-card.blue::after{background:var(--color-primary);}
.stat-card.green::after{background:var(--color-success);}
.stat-card.orange::after{background:var(--color-warning);}
.stat-card.red::after{background:var(--color-error);}
.stat-card.purple::after{background:var(--color-accent-coral);}
.stat-card.teal::after{background:var(--color-accent-teal);}
.stat-card .stat-title{color:var(--color-body-mid);font-size:10px;font-weight:600;margin-bottom:8px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1px;}
.stat-card .stat-value{font-size:28px;font-weight:600;letter-spacing:-.28px;}
.stat-card .stat-footer{margin-top:8px;font-size:12px;color:var(--color-mute);}
.stat-card .stat-footer .up{color:var(--color-success);}
.stat-card .stat-footer .down{color:var(--color-error);}
.stat-card .stat-icon{font-size:20px;position:absolute;bottom:16px;right:16px;opacity:.12;}

/* ===== Card ===== */
.card{background:var(--color-surface-card);border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);box-shadow:var(--shadow-card);margin-bottom:20px;transition:border-color .15s;}
.card:hover{border-color:var(--border-hover);}
.card-header{padding:16px 24px;border-bottom:1px solid var(--color-hairline);display:flex;align-items:center;justify-content:space-between;}
.card-header h3{font-size:16px;font-weight:600;letter-spacing:-.16px;}
.card-body{padding:20px 24px;}.card-body.no-pad{padding:0;}
.card-footer{padding:16px 24px;border-top:1px solid var(--color-hairline);}

/* ===== Toolbar ===== */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.toolbar .search-input{padding:0 12px;height:36px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);width:240px;font-size:14px;font-family:var(--font-primary);outline:none;transition:border-color .2s,box-shadow .2s;}
.toolbar .search-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(3,20,36,.12);}
.toolbar .search-input::placeholder{color:var(--color-mute);}
.toolbar select{padding:0 12px;height:36px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);font-size:14px;font-family:var(--font-primary);background:var(--color-surface-card);min-width:120px;cursor:pointer;outline:none;transition:border-color .2s,box-shadow .2s;}
.toolbar select:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(3,20,36,.12);}

/* ===== Table ===== */
thead th{background:var(--color-surface-near);padding:12px 16px;text-align:left;font-weight:600;font-size:10px;color:var(--color-body-mid);border-bottom:1px solid var(--color-hairline);white-space:nowrap;text-transform:uppercase;letter-spacing:1px;position:sticky;top:0;z-index:10;}
tbody td{padding:12px 16px;border-bottom:1px solid var(--color-hairline);font-size:13px;vertical-align:middle;}
tbody tr:hover{background:var(--color-surface-near);}
.clickable-row{cursor:pointer;}
.clickable-row:hover{background:rgba(0,80,130,.04)!important;}
.table-wrap{overflow-x:auto;}

/* ===== Buttons ===== */
.btn{padding:8px 24px;border:none;border-radius:var(--rounded-sm);cursor:pointer;font-size:16px;font-weight:500;font-family:var(--font-primary);display:inline-flex;align-items:center;gap:4px;transition:transform .2s,background .2s;white-space:nowrap;}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-button);}
.btn-primary:hover{background:var(--color-primary);transform:translate(2px,0);}
.btn-success{background:var(--color-success);color:#fff;}
.btn-success:hover{transform:translate(2px,0);}
.btn-warning{background:var(--color-warning);color:#fff;}
.btn-warning:hover{transform:translate(2px,0);}
.btn-danger{background:var(--color-error);color:#fff;font-size:13px;padding:5px 14px;}
.btn-danger:hover{transform:translate(2px,0);}
.btn-default{background:var(--color-surface-card);color:var(--color-ink);border:1px solid var(--color-hairline);}
.btn-default:hover{border-color:var(--border-hover);transform:translate(2px,0);}
.btn-sm{padding:4px 12px;font-size:13px;}
.btn-link{background:none;border:none;color:var(--color-ink);cursor:pointer;padding:4px 8px;font-size:14px;font-weight:500;font-family:var(--font-primary);transition:color .15s;}
.btn-link:hover{color:var(--color-primary);}.btn-link.danger{color:var(--color-error);}
.btn-outline{background:var(--color-surface-card);border:1px solid var(--color-hairline);color:var(--color-ink);padding:5px 14px;border-radius:var(--rounded-sm);font-size:13px;cursor:pointer;font-family:var(--font-primary);transition:all .15s;}
.btn-outline:hover{border-color:var(--color-ink);color:var(--color-ink);}

/* ===== Tags ===== */
.tag{display:inline-block;padding:2px 8px;border-radius:var(--rounded-sm);font-size:12px;font-family:var(--font-mono);font-weight:600;}
.tag-blue{background:rgba(3,20,36,.08);color:var(--color-primary);}
.tag-green{background:rgba(0,215,34,.1);color:var(--color-success);}
.tag-orange{background:rgba(255,107,0,.1);color:var(--color-warning);}
.tag-red{background:rgba(238,29,54,.1);color:var(--color-error);}
.tag-gray{background:var(--color-surface-hover);color:var(--color-mute);}
.tag-emerald{background:rgba(16,185,129,.1);color:var(--color-success);}
/* ★ 审查修复：补充缺失的 tag 变体（素材/账号/订单来源等使用） */
.tag-info{background:rgba(42,125,225,.12);color:#1a6bd6;}
.tag-deepsea{background:rgba(3,20,36,.85);color:#f0f5f9;}
.tag-success{background:rgba(0,215,34,.1);color:var(--color-success);}
.tag-mute{background:var(--color-surface-hover);color:var(--color-mute);}

/* ★ 审查修复：事件登记成功后新事件行高亮闪烁 */
@keyframes flashRow{0%{background:rgba(255,202,58,.45)}100%{background:transparent}}
.flash-row{animation:flashRow 2s ease-out;}

/* ===== Form ===== */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;margin-bottom:6px;color:var(--color-body-mid);font-size:14px;font-weight:500;}
.form-group label .required{color:var(--color-error);margin-left:2px;}
.form-control{width:100%;padding:0 12px;height:40px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);font-size:14px;font-family:var(--font-primary);transition:border-color .2s,box-shadow .2s;outline:none;background:var(--color-surface-card);color:var(--color-ink);}
.form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(3,20,36,.12);}
.form-control::placeholder{color:var(--color-mute);}
textarea.form-control{min-height:80px;resize:vertical;padding:10px 12px;height:auto;}
select.form-control{cursor:pointer;}
.form-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;}
.form-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-primary);}
.checkbox-group{display:flex;flex-wrap:wrap;gap:8px 16px;padding:4px 0;}
.checkbox-group .check-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--color-body);cursor:pointer;padding:6px 12px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);transition:all .15s;user-select:none;}
.checkbox-group .check-label:hover{border-color:var(--color-primary);background:rgba(3,20,36,.04);}
.checkbox-group .check-label:has(input:checked){border-color:var(--color-primary);background:rgba(3,20,36,.08);color:var(--color-primary);font-weight:500;}
.checkbox-group input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer;}

/* ===== Modal (admin.html 同款) ===== */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(3,20,36,.35);z-index:1000;align-items:flex-start;justify-content:center;padding-top:10vh;}
.modal-overlay.show{display:flex;}
.modal{background:var(--color-surface-card);border-radius:var(--rounded-sm);border:1px solid var(--color-hairline);width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:var(--shadow-card);animation:modalIn .25s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
.modal-header{padding:16px 24px;border-bottom:1px solid var(--color-hairline);display:flex;align-items:center;justify-content:space-between;}
.modal-header h3{font-size:16px;font-weight:600;letter-spacing:-.16px;}
.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--color-mute);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--rounded-sm);transition:background .15s,color .15s;}
.modal-close:hover{background:var(--color-surface-hover);color:var(--color-ink);}
.modal-body{padding:24px;overflow-y:auto;flex:1;min-height:0;}
.modal-footer{padding:12px 24px;border-top:1px solid var(--color-hairline);display:flex;justify-content:flex-end;gap:8px;}

/* ===== 可搜索物种选择器（新增/编辑商品） ===== */
.species-picker{position:relative;}
.species-picker .picker-tabs{display:flex;gap:6px;margin-bottom:8px;}
.species-picker .picker-tab{padding:5px 12px;border:1px solid var(--color-hairline);border-radius:6px;background:#fff;color:var(--color-mute);font-size:13px;cursor:pointer;line-height:1.4;}
.species-picker .picker-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.species-picker .picker-panel{margin-bottom:8px;}
.species-picker-selected{display:flex;align-items:center;gap:6px;margin-top:8px;padding:8px 12px;background:#eef5ff;border-radius:6px;font-size:13px;color:var(--color-ink);flex-wrap:wrap;}
.species-picker-selected .species-selected-check{color:#22c55e;font-weight:700;}
.species-picker-selected b{color:var(--color-primary);margin-left:2px;}
.species-picker-selected small{color:var(--color-mute);font-style:italic;}
.species-picker-selected em{color:var(--color-mute);font-style:normal;font-size:11px;background:#ddeaff;border-radius:4px;padding:1px 6px;}
.species-picker-repick{margin-left:auto;padding:2px 10px;border:1px solid #b9d4ff;border-radius:4px;background:#fff;color:var(--color-primary);font-size:12px;cursor:pointer;}
.species-picker-repick:hover{background:#eef5ff;}
.species-picker-item em{color:var(--color-mute);font-style:normal;font-size:11px;background:var(--color-surface-hover);border-radius:4px;padding:2px 6px;flex-shrink:0;}
.species-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);box-shadow:var(--shadow-card);z-index:1100;margin:0;padding:4px;}
.species-picker-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--color-ink);}
.species-picker-item:hover{background:var(--color-surface-hover);}
.species-picker-item.active{background:rgba(3,20,36,.08);color:var(--color-primary);font-weight:500;}
.species-picker-item small{color:var(--color-mute);font-style:italic;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;}
.species-picker-empty{padding:10px 12px;color:var(--color-mute);font-size:13px;text-align:center;}

/* ===== Upload Loading ===== */
.spinner{width:36px;height:36px;border:3px solid rgba(9,121,226,.18);border-top-color:var(--color-primary);border-radius:50%;margin:0 auto 12px;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.upload-loading-box{background:var(--color-surface-card);border-radius:var(--rounded-sm);border:1px solid var(--color-hairline);padding:32px 48px;text-align:center;box-shadow:var(--shadow-card);}
.upload-loading-title{font-size:15px;font-weight:600;color:var(--color-ink);}
.upload-loading-sub{margin-top:6px;font-size:12px;color:var(--color-mute);}
.upload-progress-track{width:220px;height:6px;border-radius:3px;background:rgba(9,121,226,.12);margin:12px auto 0;overflow:hidden;}
.upload-progress-bar{height:100%;border-radius:3px;background:var(--color-primary);transition:width .2s ease;}

/* ===== Toast ===== */
.toast-container{position:fixed;top:24px;right:24px;z-index:2000;}
.toast{padding:12px 20px;border-radius:var(--rounded-sm);color:#fff;margin-bottom:8px;box-shadow:var(--shadow-card);animation:toastIn .3s ease;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;}
.toast.success{background:var(--color-success);}.toast.error{background:var(--color-error);}
.toast.warning{background:var(--color-warning);}.toast.info{background:var(--color-ink);}
@keyframes toastIn{from{opacity:0;transform:translateX(100px);}to{opacity:1;transform:translateX(0);}}

/* ===== Pagination ===== */
.pagination{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;flex-wrap:wrap;gap:8px;}
.pagination-info{color:var(--color-mute);font-size:13px;}
.pagination-btns{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
.pagination-btns button{min-width:32px;height:32px;border:1px solid var(--color-hairline);background:var(--color-surface-card);border-radius:var(--rounded-sm);cursor:pointer;font-size:13px;font-family:var(--font-primary);transition:all .15s;}
.pagination-btns button:hover{border-color:var(--color-primary);color:var(--color-primary);}
.pagination-btns button.active{background:var(--color-ink);color:#fff;border-color:var(--color-ink);}
.pagination-btns button:disabled{opacity:.5;cursor:not-allowed;}

/* ===== Confirm Dialog ===== */
.confirm-dialog .modal{max-width:420px;}
.confirm-icon{font-size:48px;text-align:center;margin-bottom:16px;}
.confirm-msg{text-align:center;font-size:15px;font-weight:500;margin-bottom:8px;}
.confirm-desc{text-align:center;color:var(--color-mute-soft);font-size:13px;}

/* ===== Empty State ===== */
.empty-state{padding:60px 20px;text-align:center;color:var(--color-mute);}
.empty-state .empty-icon{font-size:48px;margin-bottom:12px;}

/* ===== Batch Progress (fishmall-design.md) ===== */
.batch-progress{display:flex;align-items:center;padding:20px 0;}
.batch-step{flex:1;text-align:center;position:relative;font-size:12px;color:var(--color-mute);}
.batch-step::after{content:'';position:absolute;top:12px;left:50%;width:100%;height:2px;background:var(--color-hairline);z-index:0;}
.batch-step:last-child::after{display:none;}
.batch-step .step-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--color-hairline);background:var(--color-surface-card);margin:0 auto 6px;line-height:20px;font-size:12px;font-weight:600;position:relative;z-index:1;transition:all .3s;}
.batch-step.active .step-dot{border-color:var(--color-primary);background:var(--color-primary);color:#fff;}
.batch-step.done .step-dot{border-color:var(--color-success);background:var(--color-success);color:#fff;}
.batch-step.done::after{background:var(--color-success);}
.batch-step .step-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;}
.batch-step.done .step-label{color:var(--color-success);}
.batch-step.active .step-label{color:var(--color-primary);}

/* ===== Distributor Board ===== */
.d-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.d-item{border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);padding:16px;background:var(--color-surface-card);box-shadow:var(--shadow-card);transition:border-color .15s;}
.d-item:hover{border-color:var(--color-primary);}
.d-item .d-name{font-size:15px;font-weight:600;margin-bottom:8px;}
.d-item .d-meta{display:flex;gap:16px;font-size:12px;color:var(--color-mute);margin-bottom:8px;}
.d-item .d-price{font-size:18px;font-weight:600;color:var(--color-error);}
.d-item .d-stock{font-size:14px;color:var(--color-primary);margin-left:8px;}

/* ===== Order Timeline ===== */
.timeline{padding:0 16px;}
.tl-item{display:flex;padding-bottom:20px;position:relative;}
.tl-item::before{content:'';position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--color-hairline);}
.tl-item:last-child::before{display:none;}
.tl-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--color-hairline);background:var(--color-surface-card);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:12px;z-index:1;font-size:12px;}
.tl-dot.active{border-color:var(--color-primary);background:var(--color-primary);color:#fff;}
.tl-dot.done{border-color:var(--color-success);background:var(--color-success);color:#fff;}
.tl-body h4{font-size:14px;font-weight:500;margin-bottom:4px;}
.tl-body p{font-size:12px;color:var(--color-mute);}

/* ===== Detail View ===== */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.detail-item{display:flex;padding:6px 0;}
.detail-label{width:90px;color:var(--color-body-mid);flex-shrink:0;font-size:13px;font-weight:500;}
.detail-value{flex:1;}

/* ===== Asset Grid ===== */
.upload-area{border:2px dashed var(--color-hairline);border-radius:var(--rounded-sm);padding:20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--color-surface-near);}
.upload-area:hover{border-color:var(--color-primary);background:rgba(0,80,130,.05);}
.upload-icon{font-size:36px;margin-bottom:8px;}
.upload-text{font-size:14px;color:var(--color-body-mid);font-weight:500;}
.upload-hint{font-size:12px;color:var(--color-mute);}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.asset-card{border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);overflow:hidden;background:var(--color-surface-card);box-shadow:var(--shadow-card);}
.asset-card img{width:100%;height:120px;object-fit:cover;background:var(--color-surface-hover);}
.asset-info{padding:10px 12px;}
.asset-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.asset-meta{font-size:11px;color:var(--color-mute);margin-top:4px;}
.asset-act{padding:0 12px 10px;display:flex;gap:8px;}

/* ===== Utility ===== */
.text-center{text-align:center;}.text-right{text-align:right;}
.text-success{color:var(--color-success);}.text-danger{color:var(--color-error);}.text-warning{color:var(--color-warning);}.text-primary{color:var(--color-primary);}.text-light{color:var(--color-mute);}
.mb-16{margin-bottom:16px;}.mb-20{margin-bottom:20px;}.mt-16{margin-top:16px;}
.flex{display:flex;}.flex-between{display:flex;align-items:center;justify-content:space-between;}.gap-4{gap:4px;}.gap-8{gap:8px;}.gap-12{gap:12px;}
.required{color:var(--color-error);margin-left:2px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
.font-bold{font-weight:600;}.font-lg{font-size:16px;}
.divider{height:1px;background:var(--color-hairline);margin:16px 0;}
.product-img{width:48px;height:48px;border-radius:var(--rounded-sm);object-fit:cover;background:var(--color-surface-hover);}
.mono{font-family:var(--font-mono);}

/* ===== Species Image Upload ===== */
.sp-img-preview{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;}
.sp-img-item,.sp-img-pending,.sp-img-add{width:100px;height:100px;border-radius:var(--rounded-sm);overflow:hidden;position:relative;border:2px dashed var(--color-hairline);box-sizing:border-box;}
.sp-img-item{border-style:solid;border-color:var(--color-hairline);}
.sp-img-item img{width:100%;height:100%;object-fit:cover;display:block;}
.sp-img-remove{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:rgba(244,67,54,0.9);color:#fff;font-size:14px;line-height:22px;text-align:center;cursor:pointer;z-index:2;opacity:0;transition:opacity .15s;}
.sp-img-item:hover .sp-img-remove{opacity:1;}
.sp-img-pending{background:var(--color-surface-hover);display:flex;align-items:center;justify-content:center;}
.sp-img-pending .spinner{width:28px;height:28px;border:3px solid var(--color-hairline);border-top-color:var(--color-primary);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.sp-img-add{display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,background .15s;}
.sp-img-add:hover{border-color:var(--color-primary);background:var(--color-surface-hover);}
.sp-img-add span{font-size:32px;color:var(--gray-300);font-weight:300;line-height:1;}
.sp-img-add:hover span{color:var(--color-primary);}

/* ===== Pagination ===== */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 20px;border-top:1px solid var(--color-hairline);}
.pagination button,.pagination .page-num{min-width:36px;height:36px;border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);background:var(--color-surface-card);color:var(--gray-600);font-size:13px;cursor:pointer;transition:all .15s;}
.pagination button:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary);}
.pagination button.active,.pagination .page-num.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.pagination button:disabled{opacity:.4;cursor:default;}
.pagination .page-info{font-size:13px;color:var(--gray-400);margin:0 8px;}

/* ===== Password Rules & Change (首次登录强制改密) ===== */
.pwd-rules{margin:10px 0 14px;font-size:12px;color:var(--color-mute);line-height:2;}
.pwd-rule{transition:color .2s;}
.pwd-rule.ok{color:var(--color-success);}
.pwd-rule::before{content:'○ ';}
.pwd-rule.ok::before{content:'✓ ';font-weight:600;}
.acct-pwd-notice{
  margin-top:12px;padding:12px 16px;background:var(--color-accent-sand);
  border:1px solid var(--color-hairline);border-radius:var(--rounded-sm);
  font-size:13px;color:var(--color-body);line-height:1.6;
}
.acct-pwd-display{
  padding:6px 0;font-size:14px;color:var(--color-body);
  display:flex;align-items:center;gap:8px;justify-content:center;
}
.acct-pwd-display span{color:var(--color-mute);}
.acct-pwd-display strong{color:var(--color-ink);}
.acct-pwd-code{
  font-family:var(--font-mono);font-size:20px;font-weight:600;
  letter-spacing:3px;color:var(--color-primary);
  background:var(--color-surface-near);padding:4px 16px;
  border-radius:var(--rounded-sm);border:1px solid var(--color-hairline);
  user-select:all;cursor:text;
}
.acct-pwd-tip{
  margin-top:12px;font-size:12px;color:var(--color-mute);
  line-height:1.6;text-align:center;
}

/* ===== 物种科属分组 ===== */
.species-group-row{cursor:pointer;}
.species-group-row td.species-group-cell{background:#f3f6f9;font-weight:600;color:#1a2b3c;padding:9px 12px;border-top:1px solid #e6eaef;border-bottom:1px solid #e6eaef;}
.species-group-row:hover td.species-group-cell{background:#ecf1f6;}
.species-group-cell .group-arrow{display:inline-block;width:14px;color:#1e6fff;font-weight:700;}
.species-group-cell .group-count{color:#8a94a6;font-weight:400;font-size:12px;margin-left:6px;}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(3,20,36,.15);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(3,20,36,.25);}

/* ===== Preloader ===== */
.preloader{position:fixed;inset:0;background:var(--color-surface-card);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s;}
.preloader.hidden{opacity:0;pointer-events:none;}
/* ===== Utility ===== */
.hidden{display:none!important;}
.spinner{border:4px solid var(--color-hairline);border-top:4px solid var(--color-primary);border-radius:50%;width:40px;height:40px;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== Responsive ===== */
@media(max-width:768px){
  .app-layout{flex-direction:column;}
  .sidebar{position:fixed;left:-220px;top:0;bottom:0;z-index:50;transition:left .3s;}
  .sidebar.open{left:0;}
  .sidebar-overlay.show{display:block;}
  .topbar-left .hamburger{display:block;}
  .content{padding:16px;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar .search-input{width:100%;}
  .d-board{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .login-card{max-width:90%;}
}
@media(max-width:480px){
  .stats-row{grid-template-columns:1fr;}
  .content{padding:12px;}
}

/* ===== Audit Log Filters ===== */
.log-filter-bar {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.log-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
}
.log-filter-row + .log-filter-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light, #f0f0f0);
}
.log-filter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.log-filter-item label {
  font-size: 12px;
  color: var(--text-light, #94a3b8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.log-filter-item select,
.log-filter-item input[type="date"] {
  padding: 7px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-input, #fff);
  color: var(--text, #1e293b);
  min-width: 140px;
  outline: none;
  transition: border-color 0.2s;
}
.log-filter-item select:focus,
.log-filter-item input[type="date"]:focus {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.log-filter-item select:disabled {
  background: var(--bg-disabled, #f1f5f9);
  color: var(--text-light, #94a3b8);
  cursor: not-allowed;
}
.log-filter-date .log-date-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.log-filter-date .log-date-inputs span {
  color: var(--text-light, #94a3b8);
  font-size: 13px;
}
.log-filter-date .log-date-inputs input[type="date"] {
  min-width: 140px;
}
.log-filter-quick .log-quick-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.log-quick-btn {
  padding: 5px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  background: var(--bg-card, #fff);
  color: var(--text-light, #64748b);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.log-quick-btn:hover {
  background: var(--primary-light, #eff6ff);
  border-color: var(--primary, #2563eb);
  color: var(--primary, #2563eb);
}
.log-quick-btn.active {
  background: var(--primary, #2563eb);
  color: #fff;
  border-color: var(--primary, #2563eb);
}
.log-filter-search .log-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.log-filter-search .search-input {
  min-width: 220px;
}
.log-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-light, #94a3b8);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 50%;
}
.log-search-clear:hover {
  background: var(--bg-disabled, #f1f5f9);
  color: var(--text, #1e293b);
}

/* ===== Audit Log Table ===== */
.log-table {
  width: 100%;
  border-collapse: collapse;
}
.log-table thead th {
  background: var(--bg-page, #f8fafc);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 1;
}
.log-table tbody td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  vertical-align: middle;
}
.log-table tbody tr:hover:not(.log-expand-row) {
  background: var(--primary-lightest, #f8faff);
}
.log-table .log-time {
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-light, #64748b);
}
.log-table .log-detail {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, #334155);
}
.log-table .log-expand-trigger {
  display: inline-block;
  width: 16px;
  text-align: center;
  font-size: 11px;
  color: var(--primary, #2563eb);
  cursor: pointer;
}

/* ===== Failed Log Row ===== */
.log-row-fail {
  background: rgba(239,68,68,0.04);
}
.log-row-fail:hover {
  background: rgba(239,68,68,0.08) !important;
}
.log-expand-row td {
  padding: 0 12px 12px 12px !important;
  background: rgba(239,68,68,0.02);
}
.log-expand-content {
  padding: 10px 14px;
  background: rgba(239,68,68,0.06);
  border-left: 3px solid var(--danger, #ef4444);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  color: var(--text, #334155);
}
.log-err-msg {
  font-weight: 500;
  margin-bottom: 4px;
}
.log-err-params {
  font-family: 'SF Mono', 'Cascadia Code', monospace;
  font-size: 11px;
  color: var(--text-light, #94a3b8);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===== Audit Log Skeleton ===== */
.log-skeleton {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
}
.log-skeleton .sk-row {
  height: 14px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s infinite;
  border-radius: 6px;
  margin-bottom: 12px;
}
@keyframes skShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}
.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.empty-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #1e293b);
  margin-bottom: 6px;
}
.empty-hint {
  font-size: 13px;
  color: var(--text-light, #94a3b8);
}

/* ===== Page Ellipsis ===== */
.page-ellipsis {
  padding: 5px 2px;
  color: var(--text-light, #94a3b8);
  font-size: 13px;
}

/* ===== Responsive Log Filters ===== */
@media(max-width:768px){
  .log-filter-row {
    flex-direction: column;
    gap: 10px;
  }
  .log-filter-item select,
  .log-filter-date .log-date-inputs input[type="date"],
  .log-filter-search .search-input {
    width: 100%;
    min-width: auto;
  }
  .log-filter-quick .log-quick-btns {
    flex-wrap: wrap;
  }
  .log-table .log-detail {
    max-width: 140px;
  }
}