/* 海鹿货运 CMS 后台样式 */
:root { --navy:#1e2470; --navy-d:#0d1230; --red:#e21f26; --line:#e2e6f0; --muted:#6c7488; --gold:#f0b429; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Segoe UI","PingFang TC","Microsoft JhengHei",Arial,sans-serif; background:#f3f5fa; color:#22283a; font-size:14px; }
a { text-decoration:none; color:inherit; }

/* 登入 */
.login-wrap { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#0d1230,#1e2470 65%,#2f3d9c); padding:26px; }
.login-box { background:#fff; border-radius:12px; padding:40px 38px; width:400px; max-width:100%; box-shadow:0 30px 60px rgba(0,0,0,.4); }
.login-box img { height:82px; margin:0 auto 18px; }
.login-box h1 { font-size:19px; color:var(--navy); margin-bottom:4px; text-align:center; }
.login-box .sub { color:var(--muted); margin-bottom:24px; font-size:13px; text-align:center; }
.login-box input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px; margin-bottom:14px; font-size:14px; }
.login-box button { width:100%; padding:12px; background:var(--red); color:#fff; border:0; border-radius:6px; font-size:15px; font-weight:700; cursor:pointer; }
.login-box button:hover { background:#c1171e; }
.login-err { color:#d93025; font-size:13px; margin-bottom:10px; display:none; text-align:center; }
.login-hint { margin-top:16px; font-size:12px; color:var(--muted); text-align:center; line-height:1.8; }

/* 布局 */
.app { display:none; min-height:100vh; }
.app.show { display:flex; }
.sidebar { width:236px; background:var(--navy-d); color:#c5cbe4; flex:0 0 auto; display:flex; flex-direction:column; }
.sidebar .brand { padding:18px 18px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px; }
.sidebar .brand img { height:38px; background:#fff; border-radius:4px; padding:3px 6px; }
.sidebar .brand div { font-size:13px; color:#fff; font-weight:700; line-height:1.3; }
.sidebar nav { flex:1; padding:10px 0; overflow-y:auto; }
.sidebar nav a { display:block; padding:11px 20px; font-size:13.5px; border-left:3px solid transparent; cursor:pointer; }
.sidebar nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar nav a.active { background:rgba(226,31,38,.16); border-left-color:var(--red); color:#fff; }
.sidebar .foot { padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; line-height:1.9; }
.sidebar .foot a { color:var(--gold); }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { background:#fff; padding:13px 26px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); gap:14px; flex-wrap:wrap; }
.topbar h2 { font-size:17px; color:var(--navy); }
.topbar .actions { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.btn { padding:8px 16px; border-radius:6px; border:0; cursor:pointer; font-size:13px; font-weight:700; font-family:inherit; }
.btn-primary { background:var(--red); color:#fff; }
.btn-primary:hover { background:#c1171e; }
.btn-navy { background:var(--navy); color:#fff; }
.btn-ghost { background:#fff; border:1px solid var(--line); color:#22283a; }
.btn-danger { background:#fdecea; color:#d93025; }
.btn-sm { padding:5px 10px; font-size:12px; }
.content { padding:24px 26px; flex:1; overflow-y:auto; }
.pane { display:none; }
.pane.active { display:block; }

/* 卡片 / 表单 */
.card { background:#fff; border-radius:10px; border:1px solid var(--line); padding:20px 22px; margin-bottom:18px; }
.card h3 { font-size:14.5px; color:var(--navy); margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px 14px; }
.f { display:flex; flex-direction:column; gap:4px; }
.f label { font-size:11.5px; font-weight:700; color:var(--navy); letter-spacing:.3px; }
.f label .lg { color:#98a0b3; font-weight:400; margin-left:4px; }
.f input, .f textarea, .f select { padding:8px 11px; border:1px solid var(--line); border-radius:6px; font-size:13px; font-family:inherit; width:100%; }
.f textarea { resize:vertical; min-height:64px; }
.f input:focus, .f textarea:focus { outline:2px solid var(--navy); border-color:transparent; }
.stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat-cards .sc { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px; }
.stat-cards .sc b { font-size:28px; color:var(--red); display:block; }
.stat-cards .sc span { color:var(--muted); font-size:12.5px; }
.toast { position:fixed; right:22px; bottom:22px; background:#12864a; color:#fff; padding:11px 20px; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.22); opacity:0; transform:translateY(10px); transition:all .3s; z-index:99; font-size:13px; }
.toast.show { opacity:1; transform:none; }
.item-box { border:1px solid var(--line); border-radius:8px; padding:14px; margin-bottom:12px; background:#fafbfe; }
.item-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.item-head b { color:var(--navy); font-size:12.5px; }
.tag { display:inline-block; font-size:11px; background:#eef0fa; color:var(--navy); border-radius:4px; padding:2px 8px; margin-left:8px; font-weight:700; }
.note { background:#fff8e6; border:1px solid #f5e2b0; border-radius:8px; padding:14px 16px; font-size:13px; line-height:1.9; color:#7a5b00; margin-bottom:16px; }
.steps { counter-reset:s; padding-left:0; list-style:none; }
.steps li { counter-increment:s; padding:10px 0 10px 40px; position:relative; border-bottom:1px dashed var(--line); font-size:13.5px; line-height:1.8; }
.steps li::before { content:counter(s); position:absolute; left:0; top:12px; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
.steps code { background:#eef0fa; padding:1px 6px; border-radius:4px; color:var(--navy); font-size:12.5px; }
.file-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
@media (max-width:960px){ .sidebar{width:64px} .sidebar .brand div,.sidebar nav a span{display:none} .grid2,.grid3,.stat-cards{grid-template-columns:1fr} }