/* 杜康古城数智名片 · 共用商务视觉（名片页 + 管理后台） */
:root{
  --wine:#6f1f2a; --wine-deep:#3c1119; --wine-soft:#8c3039; --wine-pale:#f7ecec;
  --gold:#b08a45; --gold-light:#d9bd80; --gold-pale:#f4ead2;
  --paper:#f7f3ec; --card:#fffdf8; --ink:#2b211b; --ink2:#5a4b40; --muted:#8a7b6c;
  --line:#e8ded0; --line2:#f1e9de; --bronze:#7a5a37;
  --shadow:0 10px 30px rgba(58,32,20,.08); --shadow-lg:0 22px 60px rgba(46,22,14,.18);
  --radius:14px; --ease:cubic-bezier(.22,1,.36,1);
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--wine);text-decoration:none}
::selection{background:var(--gold-pale);color:var(--wine-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);
  background:var(--card);color:var(--ink2);border-radius:10px;padding:10px 15px;font-size:13.5px;
  font-weight:650;line-height:1.3;transition:transform .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.btn:hover{border-color:var(--gold-light);color:var(--wine);transform:translateY(-2px);box-shadow:0 8px 20px rgba(111,31,42,.10)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.primary{background:var(--wine);border-color:var(--wine);color:#fff8ee}
.btn.primary:hover{background:var(--wine-deep);border-color:var(--wine-deep);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#2a1b0c}
.btn.gold:hover{background:#967436;border-color:#967436;color:#fff}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.sm{padding:7px 11px;font-size:12.5px}
.btn[disabled]{opacity:.5;pointer-events:none}

.eyebrow{font-size:11.5px;letter-spacing:2px;color:var(--gold);font-weight:700;text-transform:uppercase}
.sec-title{margin:0 0 10px;font-size:15px;font-weight:750;display:flex;align-items:center;gap:9px;letter-spacing:.2px}
.sec-title::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--wine);flex:none}
.muted{color:var(--muted)}
.divider{height:1px;background:var(--line);margin:16px 0}
.tag{display:inline-block;font-size:12px;background:var(--gold-pale);color:#7c5e25;
  border:1px solid #ead9b6;padding:4px 10px;border-radius:6px;margin:0 6px 6px 0}

.field{margin-bottom:13px}
.field label{display:block;font-size:13px;color:var(--ink2);margin-bottom:6px;font-weight:650}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:14.5px;outline:none;background:#fff;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:80px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--wine);box-shadow:0 0 0 3px rgba(111,31,42,.08)}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px}

.mask{position:fixed;inset:0;z-index:90;background:rgba(36,18,12,.62);
  display:none;align-items:center;justify-content:center;padding:18px}
.mask.show{display:flex}
.modal{background:#fffdf8;border-radius:18px;width:460px;max-width:100%;max-height:88vh;overflow-y:auto;
  padding:26px;box-shadow:var(--shadow-lg);animation:rise .42s var(--ease)}
.modal h3{margin:0 0 5px;font-size:20px;font-weight:780;letter-spacing:.2px}
.modal .mh{font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.6}
.modal .mfoot{display:flex;gap:9px;margin-top:20px}
.modal .mfoot .btn{flex:1}
.close-x{position:absolute;right:16px;top:14px;border:0;background:none;color:var(--muted);font-size:24px;line-height:1;padding:4px}

.toast{position:fixed;left:50%;bottom:38px;transform:translate(-50%,22px);background:var(--wine-deep);color:#fff5e6;
  padding:12px 22px;border-radius:11px;font-size:14px;z-index:120;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .35s var(--ease);box-shadow:var(--shadow-lg);max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{transform:translateY(22px) scale(.97)}to{transform:none}}
@keyframes pop{from{transform:translateY(10px) scale(.98)}to{transform:none}}
@keyframes pulseRing{0%{transform:scale(.82);opacity:.62}100%{transform:scale(1.55);opacity:0}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f1e9de 25%,#faf5ec 50%,#f1e9de 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;color:transparent!important}
.bar{height:7px;background:var(--line2);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--wine),var(--gold));
  transition:width .8s var(--ease)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:10px 9px;border-bottom:1px solid var(--line2);vertical-align:middle}
th{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.5px;white-space:nowrap}
tbody tr{transition:background .2s}
tbody tr:hover{background:#fdf8ef}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media(max-width:760px){
  body{font-size:16px}
  .btn{padding:12px 16px;font-size:14.5px}
  .modal{padding:20px;border-radius:16px}
  .field input,.field textarea,.field select{font-size:16px}
}