/* ============================================================
   common.css 公共样式：reset / 变量 / 通用组件
   主色 橙 #F08300 ｜ 辅助 深棕 #5D4037 浅灰 #F5F5F5
   字体 ≥14px（原12px统一+2px）｜ PC圆角≤5px 移动圆角≤3px
   gap/外边距 ≤3px，内边距承担视觉留白
   作者：星球软件CEWWW
   ============================================================ */
:root {
    --c-primary: #F08300;
    --c-primary-dark: #D96F00;
    --c-primary-light: #FFF3E3;
    --c-brown: #5D4037;
    --c-brown-light: #8D6E63;
    --c-gray-bg: #F5F5F5;
    --c-gray-line: #E8E4DF;
    --c-text: #332B26;
    --c-text-sub: #8A7D75;
    --c-white: #FFFFFF;
    --c-danger: #D9362B;
    --c-success: #2E9E5B;
    --radius-pc: 5px;
    --radius-m: 3px;
    --sp: 3px;               /* 全局 gap / 间距上限 */
    --font-base: 14px;
    --header-h: 48px;
    --tabbar-h: 54px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-base);
    color: var(--c-text);
    background: var(--c-gray-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
input, select, textarea, button {
    font-family: inherit; font-size: var(--font-base); color: var(--c-text);
    outline: none; -webkit-appearance: none;
}
button { border: none; background: none; cursor: pointer; }
i { font-style: normal; }

/* ============ 页眉标识条（每页统一） ============ */
.brand-strip {
    background: var(--c-brown); color: #EFE7E0;
    font-size: 14px; line-height: 1.5;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--sp); padding: 3px 10px;
}
.brand-strip span { white-space: nowrap; }
.brand-strip .brand-path { color: #D7CCC4; }
.brand-strip .brand-page { color: var(--c-primary-light); }

/* ============ 面包屑横条（100% 宽度，文字与内容对齐） ============ */
.breadcrumb-bar {
    width: 100%; background: var(--c-primary-light);
    border-bottom: 1px solid var(--c-gray-line);
}
.breadcrumb-inner {
    max-width: 1200px; margin: 0 auto; padding: 8px 12px;
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp);
    font-size: 14px; color: var(--c-text-sub);
}
.app .breadcrumb-inner { max-width: 640px; }
.breadcrumb-inner a { color: var(--c-brown); }
.breadcrumb-inner a:hover { color: var(--c-primary); }
.breadcrumb-inner .bc-current { color: var(--c-primary-dark); font-weight: bold; }
.bc-sep { color: #C9BDB3; }

/* ============ 通用按钮 ============ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp);
    padding: 9px 18px; border-radius: var(--radius-pc);
    background: var(--c-gray-bg); color: var(--c-brown);
    border: 1px solid var(--c-gray-line); font-size: 14px;
    transition: all .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }
.btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--c-primary); border-color: var(--c-primary); }
.btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-danger:hover { opacity: .88; color: #fff; }
.btn-sm { padding: 4px 10px; font-size: 14px; }
.btn-lg { width: 100%; padding: 12px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ============ 卡片 ============ */
.card {
    background: var(--c-white); border-radius: var(--radius-pc);
    border: 1px solid var(--c-gray-line);
}
.card-hd {
    padding: 10px 12px; font-size: 16px; font-weight: bold; color: var(--c-brown);
    border-bottom: 1px solid var(--c-gray-line);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp);
}
.card-bd { padding: 12px; }

/* ============ 表单 ============ */
.form-row { display: flex; align-items: flex-start; margin-bottom: var(--sp); }
.form-label {
    width: 110px; flex: 0 0 110px; text-align: right;
    padding: 9px 8px 0 0; color: var(--c-brown); font-size: 14px;
}
.form-label .req { color: var(--c-danger); }
.form-control { flex: 1; min-width: 0; }
.form-control input[type=text], .form-control input[type=password], .form-control input[type=number],
.form-control input[type=email], .form-control input[type=date], .form-control input[type=datetime-local],
.form-control input[type=time], .form-control select, .form-control textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--c-gray-line);
    border-radius: var(--radius-pc); background: #fff; font-size: 14px;
}
.form-control textarea { min-height: 90px; resize: vertical; }
.form-control input:focus, .form-control select:focus, .form-control textarea:focus {
    border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-light);
}
.form-tip { color: var(--c-text-sub); font-size: 14px; padding-top: 3px; }
.form-error { color: var(--c-danger); font-size: 14px; padding-top: 3px; }
.form-actions { padding: 10px 0 0 118px; display: flex; gap: var(--sp); }
.radio-line, .check-line { display: inline-flex; align-items: center; gap: var(--sp); margin-right: 12px; padding: 6px 0; }
.radio-line input, .check-line input { -webkit-appearance: auto; appearance: auto; width: 15px; height: 15px; accent-color: var(--c-primary); }

/* ============ 表格 ============ */
.data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
.data-table th {
    background: #FAF3EA; color: var(--c-brown); font-weight: bold;
    padding: 10px 8px; text-align: left; border-bottom: 2px solid var(--c-primary);
    white-space: nowrap;
}
.data-table td { padding: 9px 8px; border-bottom: 1px solid var(--c-gray-line); vertical-align: middle; }
.data-table tr:hover td { background: #FFFBF5; }
.data-table .col-actions { white-space: nowrap; }
.data-table .col-actions a { color: var(--c-primary); margin-right: 8px; }
.data-table .col-actions a.danger { color: var(--c-danger); }

/* ============ 徽章/状态 ============ */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 14px; line-height: 1.6; }
.badge-primary { background: var(--c-primary-light); color: var(--c-primary-dark); }
.badge-success { background: #E6F6EC; color: var(--c-success); }
.badge-danger { background: #FDECEA; color: var(--c-danger); }
.badge-gray { background: #EFEFEF; color: #777; }
.badge-warn { background: #FFF7E0; color: #B07A00; }

/* ============ 提示条 alert（前后台统一） ============ */
.alert {
    display: flex; align-items: center; gap: 6px;
    border-radius: var(--radius-pc); padding: 10px 12px; margin-bottom: var(--sp);
    font-size: 14px; line-height: 1.5;
}
.alert i { flex: 0 0 auto; }
.alert a { text-decoration: underline; }
.alert-success { background: #E6F6EC; color: #1E7A46; }
.alert-danger  { background: #FDECEA; color: #B8271E; }
.alert-warn    { background: #FFF7E0; color: #9A6A00; }
.alert-center  { justify-content: center; text-align: center; }
@media (max-width: 768px) { .alert { border-radius: var(--radius-m); } }

/* ============ 标签 Tab ============ */
.seg-tabs { display: flex; background: #fff; border-bottom: 1px solid var(--c-gray-line); }
.seg-tabs a {
    padding: 11px 16px; color: var(--c-text-sub); font-size: 14px;
    border-bottom: 2px solid transparent; white-space: nowrap;
}
.seg-tabs a.active { color: var(--c-primary-dark); border-bottom-color: var(--c-primary); font-weight: bold; }

/* ============ 筛选条 ============ */
.filter-bar {
    background: #fff; border: 1px solid var(--c-gray-line); border-radius: var(--radius-pc);
    padding: 10px 12px; margin-bottom: var(--sp);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp);
}
.filter-bar input, .filter-bar select {
    padding: 7px 10px; border: 1px solid var(--c-gray-line); border-radius: var(--radius-pc); min-width: 130px;
}

/* ============ 分页 ============ */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp); padding: 12px 0; flex-wrap: wrap; }
.pager-btn, .pager-info {
    display: inline-block; min-width: 34px; text-align: center;
    padding: 6px 10px; border: 1px solid var(--c-gray-line); border-radius: var(--radius-pc);
    background: #fff; color: var(--c-brown); font-size: 14px;
}
.pager-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pager-btn.current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pager-btn.disabled { color: #BBB; background: var(--c-gray-bg); cursor: not-allowed; }
.pager-info { border-color: transparent; background: transparent; color: var(--c-text-sub); }

/* ============ 空状态 ============ */
.empty-box { text-align: center; color: var(--c-text-sub); padding: 48px 12px; font-size: 14px; }
.empty-box i { font-size: 42px; color: #E0D6CE; display: block; margin-bottom: var(--sp); }

/* ============ 独立登录/注册页（前后台统一：深棕渐变全屏 + 居中白卡） ============ */
.login-body {
    background: linear-gradient(135deg, #5D4037, #7A5648);
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 16px 0;
}
.login-box {
    width: 400px; max-width: 92%; background: #fff;
    border-radius: var(--radius-pc); padding: 30px 28px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-logo { text-align: center; margin-bottom: 20px; }
.login-logo i {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), #FFB259);
    color: #fff; font-size: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(240, 131, 0, .3);
}
.login-logo h1 { font-size: 22px; color: var(--c-brown); margin-top: 10px; }
.login-logo p { color: var(--c-text-sub); font-size: 14px; margin-top: 2px; }
.login-box .form-row { flex-direction: column; align-items: stretch; }
.login-box .form-label { width: auto; flex-basis: auto; text-align: left; padding: 0 0 3px; }
.login-box .form-control { position: relative; }
.login-box .form-control input { max-width: none; padding-left: 36px; }
.login-ico {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: #B7A89C; font-size: 15px; z-index: 1; pointer-events: none;
}
.login-box .captcha-row input, .login-box .form-control input[type=checkbox] { padding-left: 8px; }
.login-tip { text-align: center; color: var(--c-text-sub); font-size: 14px; margin-top: 10px; line-height: 1.7; }
.login-extra {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp); margin: 2px 0 10px; font-size: 14px; color: var(--c-text-sub);
}
.login-switch { text-align: center; font-size: 14px; color: var(--c-text-sub); margin-top: 14px; }
.login-switch a { color: var(--c-primary-dark); font-weight: bold; }
@media (max-width: 768px) { .login-box { padding: 24px 18px; } }

/* ============ 图形验证码行（输入框 + 可点击图片） ============ */
.captcha-row { display: flex; gap: var(--sp); }
.captcha-row input { flex: 1; min-width: 0; }
.captcha-img { height: 42px; border-radius: var(--radius-pc); cursor: pointer; border: 1px solid var(--c-gray-line); background: #FAF6F0; }
@media (max-width: 768px) { .captcha-img { border-radius: var(--radius-m); } }

/* ============ 弹层 / 提示 ============ */
.toast {
    position: fixed; left: 50%; top: 30%; transform: translateX(-50%);
    background: rgba(60, 45, 36, .92); color: #fff; padding: 10px 18px;
    border-radius: var(--radius-pc); font-size: 14px; z-index: 9999;
    max-width: 80%; text-align: center;
}
.modal-mask {
    position: fixed; inset: 0; background: rgba(40, 30, 24, .45);
    z-index: 9000; display: none; align-items: center; justify-content: center;
}
.modal-mask.show { display: flex; }
.modal-box { background: #fff; border-radius: var(--radius-pc); width: 420px; max-width: 92%; max-height: 86vh; overflow: auto; }
.modal-hd { padding: 12px 14px; font-size: 16px; font-weight: bold; color: var(--c-brown); border-bottom: 1px solid var(--c-gray-line); display: flex; justify-content: space-between; }
.modal-bd { padding: 14px; }
.modal-ft { padding: 10px 14px; border-top: 1px solid var(--c-gray-line); display: flex; justify-content: flex-end; gap: var(--sp); }

/* ============ 工具类 ============ */
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp); }
.flex-center { display: flex; align-items: center; justify-content: center; gap: var(--sp); }
.text-primary { color: var(--c-primary); }
.text-danger { color: var(--c-danger); }
.text-sub { color: var(--c-text-sub); }
.text-bold { font-weight: bold; }
.text-right { text-align: right; }
.mt3 { margin-top: var(--sp); }
.mb3 { margin-bottom: var(--sp); }
.w100 { width: 100%; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============ 移动端适配（圆角≤3px） ============ */
@media (max-width: 768px) {
    .card, .btn, .filter-bar, .data-table, .modal-box, .toast,
    .form-control input, .form-control select, .form-control textarea, .pager-btn {
        border-radius: var(--radius-m);
    }
    .form-label { width: 88px; flex-basis: 88px; font-size: 14px; }
    .form-actions { padding-left: 96px; }
    .brand-strip { font-size: 14px; }
}