/* ============================================================
   源力设计系统令牌副本（依据 DESIGN.md §7）
   主色 #1664FF；圆角仅 4/8/9999；阴影 sm/lg；模态 data-bs-backdrop=false
   默认不引 jQuery；细线 1px #DDE2E9；状态用 .chip 胶囊
   ============================================================ */
:root{
  --yl-primary:#1664FF;
  --yl-primary-hover:#387BFF;
  --yl-primary-active:#0055FF;
  --yl-primary-bg:#EBF1FF;
  --yl-danger:#D7312A;
  --yl-danger-bg:#FDF5F5;
  --yl-success:#2A814B;
  --yl-success-bg:#EEF9F1;
  --yl-warning:#BD7E00;
  --yl-warning-bg:#FEF8EC;
  --yl-info:#6366F1;
  --yl-info-bg:#EEF0FF;
  --yl-text-1:#0C0D0E;
  --yl-text-2:#3B414C;
  --yl-text-3:#737A87;
  --yl-border:#DDE2E9;
  --yl-border-light:#EAEDF1;
  --yl-surface:#FFFFFF;
  --yl-bg-page:#F6F8FA;
  --yl-radius-btn:4px;
  --yl-radius-card:8px;
  --yl-radius-pill:9999px;
  --yl-shadow-sm:0 1px 2px rgba(12,13,14,.06);
  --yl-shadow-lg:0 8px 24px rgba(12,13,14,.12);
  --yl-sidebar-w:240px;
  --yl-topbar-h:56px;
  --z-sidebar:100;
  --z-topbar:200;
  --z-dropdown:300;
  --z-drawer:1080;
  --z-modal-mask:1090;
  --z-perm-panel:1200;
  --z-toast:1300;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;line-height:20px;color:var(--yl-text-1);background:var(--yl-bg-page);
  -webkit-font-smoothing:antialiased;}
a{color:var(--yl-primary);text-decoration:none;}
a:hover{color:var(--yl-primary-hover);}
.yl-app{min-height:100vh;}

/* ---------- Typography ---------- */
.h-display{font-size:24px;line-height:32px;font-weight:600;}
.h1{font-size:20px;line-height:28px;font-weight:600;}
.h2{font-size:18px;line-height:26px;font-weight:600;}
.h3{font-size:16px;line-height:24px;font-weight:600;}
.text-3{color:var(--yl-text-3);}
.muted{color:var(--yl-text-3);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 14px;font-size:13px;font-weight:500;border-radius:var(--yl-radius-btn);
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s;user-select:none;white-space:nowrap;}
.btn-primary{background:var(--yl-primary);color:#fff;border-color:var(--yl-primary);}
.btn-primary:hover{background:var(--yl-primary-hover);border-color:var(--yl-primary-hover);}
.btn-primary:active{background:var(--yl-primary-active);}
.btn-secondary{background:#fff;color:var(--yl-text-1);border-color:var(--yl-border);}
.btn-secondary:hover{background:var(--yl-bg-page);}
.btn-outline-primary{background:transparent;color:var(--yl-primary);border-color:var(--yl-primary);}
.btn-outline-primary:hover{background:var(--yl-primary-bg);}
.btn-success{background:var(--yl-success);color:#fff;border-color:var(--yl-success);}
.btn-danger{background:var(--yl-danger);color:#fff;border-color:var(--yl-danger);}
.btn-block{display:flex;width:100%;}
.btn:disabled,.btn.is-disabled{background:rgba(22,100,255,.3);border-color:transparent;color:#fff;cursor:not-allowed;}

/* ---------- Cards ---------- */
.card{background:var(--yl-surface);border:1px solid var(--yl-border);border-radius:var(--yl-radius-card);
  box-shadow:var(--yl-shadow-sm);padding:16px 20px;}
.card-title{font-size:16px;font-weight:600;margin:0 0 12px;}

/* ---------- Inputs ---------- */
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--yl-text-2);}
.input{width:100%;height:36px;padding:0 12px;font-size:13px;color:var(--yl-text-1);
  border:1px solid var(--yl-border);border-radius:var(--yl-radius-btn);background:#fff;outline:none;transition:box-shadow .15s,border-color .15s;}
.input::placeholder{color:var(--yl-text-3);}
.input:focus{border-color:var(--yl-primary);box-shadow:0 0 0 3px rgba(22,100,255,.12);}
textarea.input{height:auto;padding:8px 12px;resize:vertical;}

/* ---------- Navigation ---------- */
.sidebar{position:fixed;top:0;left:0;width:var(--yl-sidebar-w);height:100vh;background:#fff;
  border-right:1px solid var(--yl-border);z-index:var(--z-sidebar);display:flex;flex-direction:column;}
.sidebar .brand{height:var(--yl-topbar-h);display:flex;align-items:center;padding:0 20px;font-size:16px;font-weight:600;border-bottom:1px solid var(--yl-border-light);}
.sidebar nav{flex:1;overflow-y:auto;padding:12px 0;}
.sidebar nav a{display:flex;align-items:center;height:40px;padding:0 20px;color:var(--yl-text-2);font-size:13px;border-left:3px solid transparent;}
.sidebar nav a:hover{background:var(--yl-bg-page);color:var(--yl-text-1);}
.sidebar nav a.active{background:var(--yl-primary-bg);color:var(--yl-primary);border-left-color:var(--yl-primary);font-weight:500;}
.topbar{position:fixed;top:0;left:var(--yl-sidebar-w);right:0;height:var(--yl-topbar-h);background:#fff;
  border-bottom:1px solid var(--yl-border);z-index:var(--z-topbar);display:flex;align-items:center;justify-content:space-between;padding:0 24px;}
.main{margin-left:var(--yl-sidebar-w);padding-top:var(--yl-topbar-h);}
.main-inner{padding:24px;max-width:1440px;}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;background:#fff;font-size:13px;}
.table th,.table td{text-align:left;padding:0 12px;height:44px;border-bottom:1px solid var(--yl-border-light);}
.table th{color:var(--yl-text-3);font-weight:500;background:var(--yl-bg-page);}
.table tbody tr:hover{background:var(--yl-bg-page);}

/* ---------- Chips / status ---------- */
.chip{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--yl-radius-pill);
  font-size:12px;line-height:18px;font-weight:500;}
.chip.pending{color:var(--yl-warning);background:var(--yl-warning-bg);}
.chip.submitted{color:var(--yl-info);background:var(--yl-info-bg);}
.chip.approved,.chip.accepted{color:var(--yl-success);background:var(--yl-success-bg);}
.chip.rejected,.chip.cancelled{color:var(--yl-danger);background:var(--yl-danger-bg);}

/* ---------- Modal (data-bs-backdrop=false, 根不挂 .yl-app) ---------- */
.mask{position:fixed;inset:0;background:rgba(12,13,14,.45);z-index:var(--z-modal-mask);display:flex;align-items:center;justify-content:center;}
.modal{background:#fff;border-radius:var(--yl-radius-card);box-shadow:var(--yl-shadow-lg);min-width:420px;max-width:92vw;max-height:88vh;overflow:auto;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--yl-border-light);}
.modal-body{padding:20px;}
.modal-foot{padding:12px 20px;border-top:1px solid var(--yl-border-light);display:flex;justify-content:flex-end;gap:8px;}

/* ---------- Auth layout ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--yl-bg-page);}
.auth-card{width:380px;max-width:92vw;background:#fff;border:1px solid var(--yl-border);border-radius:var(--yl-radius-card);box-shadow:var(--yl-shadow-sm);padding:28px 28px 24px;}
.auth-card .brand{font-size:20px;font-weight:600;margin-bottom:4px;}
.auth-card .sub{color:var(--yl-text-3);margin-bottom:24px;}
.auth-foot{margin-top:16px;font-size:12px;color:var(--yl-text-3);text-align:center;}
.auth-foot a{margin:0 8px;}

/* ---------- Misc ---------- */
.row{display:flex;gap:16px;flex-wrap:wrap;}
.col{flex:1;min-width:0;}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.alert{padding:10px 14px;border-radius:var(--yl-radius-btn);font-size:13px;margin-bottom:16px;}
.alert-danger{background:var(--yl-danger-bg);color:var(--yl-danger);}
.alert-success{background:var(--yl-success-bg);color:var(--yl-success);}
.pager{display:flex;gap:6px;align-items:center;margin-top:16px;}
.pager a,.pager span{padding:4px 10px;border:1px solid var(--yl-border);border-radius:var(--yl-radius-btn);color:var(--yl-text-2);}
.pager a.active{background:var(--yl-primary);color:#fff;border-color:var(--yl-primary);}