/* 年度目标考核管理平台 - 对齐需求确认书原型 */
:root{
  --primary:#1890ff;
  --primary-hover:#40a9ff;
  --primary-active:#096dd9;
  --primary-soft:#e6f7ff;
  --success:#52c41a;
  --danger:#ff4d4f;
  --warning:#faad14;
  --text:#262626;
  --text-2:#595959;
  --text-3:#8c8c8c;
  --border:#d9d9d9;
  --border-light:#f0f0f0;
  --bg:#f0f2f5;
  --card:#ffffff;
  --side-bg:#f7f8fa;
  --header-h:56px;
  --side-w:220px;
  --radius:8px;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 4px 12px rgba(0,0,0,.04);
  --font:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ===== Shell layout ===== */
.app-shell{display:flex;flex-direction:column;height:100%;min-height:100vh}
.app-header{
  height:var(--header-h);background:#fff;border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:20;
}
.app-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:650;color:var(--text);letter-spacing:.2px}
.app-brand .logo{
  width:28px;height:22px;display:inline-flex;align-items:flex-end;justify-content:center;gap:3px;
  background:transparent;border-radius:0;padding:0;
}
.app-brand .logo i{
  display:block;width:5px;border-radius:1px 1px 0 0;
}
.app-brand .logo i:nth-child(1){height:10px;background:#f5222d}
.app-brand .logo i:nth-child(2){height:16px;background:#52c41a}
.app-brand .logo i:nth-child(3){height:22px;background:#1890ff}
.app-header-right{display:flex;align-items:center;gap:14px;color:var(--text-2);font-size:13px}
.app-header-right .role-label{color:var(--text-3)}
.app-header-right select{
  height:30px;border:1px solid var(--primary);color:var(--primary);border-radius:4px;
  padding:0 8px;background:#fff;outline:none;min-width:140px;
}
.app-header-right .btn-logout{
  height:30px;padding:0 12px;border:1px solid var(--border);border-radius:4px;
  background:#fff;color:var(--text-2);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
}
.app-header-right .btn-logout:hover{border-color:var(--primary);color:var(--primary)}

.app-body{flex:1;display:flex;min-height:0}
.app-side{
  width:var(--side-w);background:var(--side-bg);border-right:1px solid var(--border-light);
  overflow:auto;flex-shrink:0;padding:12px 0 24px;
}
.app-side .menu-group{margin-top:4px}
.app-side .menu-group-title{
  padding:10px 14px 6px 16px;font-size:13px;color:var(--text);
  display:flex;align-items:center;gap:8px;user-select:none;font-weight:600;
}
.app-side .menu-group-title .mi{
  width:18px;height:18px;flex-shrink:0;display:inline-block;
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
}
.app-side .menu-group-title .arrow{
  margin-left:auto;width:12px;height:12px;opacity:.45;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .15s;
}
.app-side .menu-group.collapsed .arrow{transform:rotate(-90deg)}
.app-side .menu-group.collapsed .menu-children{display:none}
/* 文档同款图标 */
.app-side .mi-home{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2L21 11h-2.5v9.2h-5.2v-5.5H10.7v5.5H5.5V11H3L12 3.2z' fill='%23595959'/%3E%3C/svg%3E")}
.app-side .mi-task{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4' width='12' height='16' rx='1.5' fill='%23f5f5f5' stroke='%238c8c8c' stroke-width='1.5'/%3E%3Crect x='9' y='2.5' width='6' height='3' rx='1' fill='%23bfbfbf'/%3E%3Cpath d='M9 10.5h6M9 13.5h6M9 16.5h4' stroke='%238c8c8c' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.app-side .mi-chart{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3.5 18.5h17' stroke='%23ff4d4f' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M5 15l4.2-4.5 3.2 2.4L19 6' stroke='%23ff4d4f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='19' cy='6' r='2' fill='%23ff4d4f'/%3E%3C/svg%3E")}
.app-side .mi-star{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.85 5.78 6.38.93-4.61 4.5 1.09 6.35L12 17.4l-5.71 3.01 1.09-6.35-4.61-4.5 6.38-.93L12 2.8z' fill='%23faad14'/%3E%3C/svg%3E")}
.app-side .mi-trophy{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 3.5h9v5.2c0 2.5-2 4.5-4.5 4.5s-4.5-2-4.5-4.5V3.5z' fill='%23faad14'/%3E%3Cpath d='M7.5 4.2H4.8A1.3 1.3 0 003.5 5.5v1.8a2.8 2.8 0 002.8 2.8h1.2V4.2zM16.5 4.2h2.7A1.3 1.3 0 0120.5 5.5v1.8a2.8 2.8 0 01-2.8 2.8h-1.2V4.2z' fill='%23ffc53d'/%3E%3Crect x='10.2' y='13.2' width='3.6' height='2.2' fill='%23d48806'/%3E%3Cpath d='M8.5 18.2h7v2.2h-7z' fill='%23d48806'/%3E%3C/svg%3E")}
.app-side .mi-setting{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238c8c8c'%3E%3Cpath d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96a7.07 7.07 0 00-1.62-.94l-.36-2.54A.48.48 0 0014 2h-4a.48.48 0 00-.48.41l-.36 2.54c-.59.24-1.13.55-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.64 8.87a.48.48 0 00.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94L2.76 14.52a.49.49 0 00-.12.61l1.92 3.32c.13.23.4.32.64.22l2.39-.96c.49.39 1.03.7 1.62.94l.36 2.54c.05.24.25.41.48.41h4c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.55 1.62-.94l2.39.96c.24.1.51 0 .64-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.03-1.58zM12 15.5A3.5 3.5 0 1115.5 12 3.5 3.5 0 0112 15.5z'/%3E%3C/svg%3E")}
.app-side .mi-stats{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='11' width='4' height='9' rx='1' fill='%2352c41a'/%3E%3Crect x='10' y='6.5' width='4' height='13.5' rx='1' fill='%23faad14'/%3E%3Crect x='16.5' y='3.5' width='4' height='16.5' rx='1' fill='%231890ff'/%3E%3C/svg%3E")}
.app-side a{
  display:block;margin:2px 10px;padding:9px 14px 9px 42px;border-radius:6px;
  color:var(--text-2);text-decoration:none;font-size:13px;transition:all .15s;position:relative;
}
.app-side a.menu-top{
  padding-left:16px;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text);
}
.app-side a.menu-top .mi{width:18px;height:18px;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:18px 18px}
.app-side a:hover{background:#fff;color:var(--primary)}
.app-side a.active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.app-frame{flex:1;border:0;width:100%;background:transparent}

/* ===== Content pages (iframe) ===== */
.page{padding:20px 24px 28px;min-height:100%}
.page-head{margin-bottom:16px}
.page-head h1{margin:0;font-size:22px;font-weight:700;color:var(--text);line-height:1.3}
.page-head p{margin:6px 0 0;color:var(--text-3);font-size:13px}
.page-crumb{margin:0 0 8px;color:var(--text-3);font-size:12px}
.page-crumb a{color:var(--text-3);text-decoration:none}
.page-crumb a:hover{color:var(--primary)}

.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 18px 18px;border:1px solid rgba(0,0,0,.02);
}
.card + .card{margin-top:14px}
.card-title{font-size:15px;font-weight:650;margin:0 0 12px;color:var(--text)}

.filter-bar{
  display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin-bottom:14px;
}
.filter-bar .item{display:flex;flex-direction:column;gap:4px}
.filter-bar .item label{font-size:12px;color:var(--text-3)}
.filter-bar .layui-input,
.filter-bar .layui-select,
.filter-bar select,
.filter-bar input[type=text],
.filter-bar input[type=number]{
  height:32px;line-height:32px;border:1px solid var(--border);border-radius:4px;
  padding:0 10px;min-width:140px;background:#fff;outline:none;
}
.filter-bar .layui-input:focus,
.filter-bar input:focus,
.filter-bar select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(24,144,255,.15)}
.filter-actions{display:flex;gap:8px;align-items:center;padding-bottom:1px}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.toolbar .left,.toolbar .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.year-pills{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.year-pill{
  display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:16px;
  border:1px solid var(--border);background:#fff;color:var(--text-2);cursor:pointer;font-size:13px;
}
.year-pill.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* Pill tabs (异议台账等) */
.pill-tabs{display:flex;gap:8px;margin:0 0 14px}
.pill-tab{
  display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:16px;
  background:#f5f5f5;color:var(--text-2);cursor:pointer;font-size:13px;border:none;
}
.pill-tab.active{background:var(--primary);color:#fff}

.back-btn{
  display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;margin-bottom:10px;
  border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text-2);
  text-decoration:none;font-size:13px;
}
.back-btn:hover{border-color:var(--primary);color:var(--primary)}

.summary-line{margin:0 0 12px;color:var(--text-2);font-size:14px}
.summary-line .em{color:var(--primary);font-weight:700}
.summary-line .score{font-weight:700;font-size:16px}

.total-row{background:#e6f7ff!important}
.total-row td{font-weight:600}

/* Tabs override */
.page .layui-tab{margin:0}
.page .layui-tab-title{border-bottom-color:var(--border-light);height:42px}
.page .layui-tab-title li{line-height:42px;font-size:14px;color:var(--text-2)}
.page .layui-tab-title .layui-this{color:var(--primary)}
.page .layui-tab-title .layui-this:after{border:none;height:2px;background:var(--primary);border-radius:1px}
.page .layui-tab-content{padding:14px 0 0}

/* Buttons */
.btn,.layui-btn{
  height:32px;line-height:32px;padding:0 14px;border-radius:4px;font-size:13px;
  border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;transition:all .15s;font-weight:500;
}
.btn-primary,.layui-btn-normal,.layui-btn{
  background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;
}
.btn-primary:hover,.layui-btn-normal:hover,.layui-btn:hover{background:var(--primary-hover)!important;border-color:var(--primary-hover)!important}
.btn-default,.layui-btn-primary{
  background:#fff!important;border:1px solid var(--border)!important;color:var(--text)!important;
}
.btn-default:hover,.layui-btn-primary:hover{border-color:var(--primary)!important;color:var(--primary)!important}
.btn-danger,.layui-btn-danger{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}
.btn-success{background:var(--success)!important;border-color:var(--success)!important;color:#fff!important}
.btn-warm,.layui-btn-warm{background:#fff7e6!important;border:1px solid #ffd591!important;color:#d46b08!important}
.layui-btn-xs{height:26px!important;line-height:26px!important;padding:0 10px!important;font-size:12px!important;border-radius:4px!important}
.layui-btn-sm{height:28px!important;line-height:28px!important;padding:0 12px!important}

/* Table polish */
.layui-table-view{border:1px solid var(--border-light)!important;border-radius:6px;overflow:hidden}
.layui-table thead tr,.layui-table-header,.layui-table-header th{
  background:#fafafa!important;color:var(--text)!important;font-weight:600!important;
}
.layui-table td,.layui-table th{border-color:var(--border-light)!important}
.layui-table-cell{height:auto!important;line-height:24px!important;padding:10px 12px!important}
.layui-table-page{border-top:1px solid var(--border-light)}

/* Switch-like status */
.tag{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;font-size:12px;
}
.tag-on{background:#f6ffed;color:var(--success);border:1px solid #b7eb8f}
.tag-off{background:#f5f5f5;color:var(--text-3);border:1px solid #d9d9d9}
.tag-blue{background:var(--primary-soft);color:var(--primary);border:1px solid #91d5ff}

/* Stats cards */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
@media (max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{
  background:#fff;border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.02);
}
.stat-card .n{font-size:28px;font-weight:700;color:var(--primary);line-height:1.2}
.stat-card .t{margin-top:6px;color:var(--text-3);font-size:13px}

/* Login */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#e6f4ff 0%,#f0f2f5 40%,#f7faff 100%);
  position:relative;overflow:hidden;
}
.login-wrap::before{
  content:"";position:absolute;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle,rgba(24,144,255,.18),transparent 70%);
  top:-120px;right:-80px;
}
.login-card{
  width:420px;background:#fff;border-radius:12px;padding:36px 40px 28px;
  box-shadow:0 12px 40px rgba(24,144,255,.12);position:relative;z-index:1;
}
.login-card h1{margin:0;text-align:center;font-size:22px;color:var(--text);font-weight:700}
.login-card .sub{margin:8px 0 28px;text-align:center;color:var(--text-3);font-size:13px}
.login-card .layui-input{height:40px;line-height:40px;border-radius:6px}
.login-card .layui-btn{height:40px;line-height:40px;width:100%;border-radius:6px;font-size:15px}

.role-pick{max-width:520px;margin:0 auto}
.role-item{
  border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:12px;
  cursor:pointer;transition:all .15s;background:#fff;
}
.role-item:hover,.role-item.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}

/* Form polish */
.layui-form-label{width:100px;color:var(--text-2)}
.layui-input-block{margin-left:130px}
.layui-form-item{margin-bottom:16px}
.layui-textarea,.layui-input{border-radius:4px!important}
.layui-form-checked[lay-skin=primary] i{border-color:var(--primary)!important;background:var(--primary)!important}

.sg-ok{color:var(--success)}.sg-fail{color:var(--danger)}
.link{color:var(--primary);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline}

.empty-tip{
  margin:8px 0 14px;padding:14px 16px;border-radius:6px;
  background:#fafafa;border:1px dashed #d9d9d9;color:var(--text-2);font-size:13px;line-height:1.7;
}
.empty-tip strong{color:var(--primary);font-weight:600}
.guide-line{margin:0 0 12px;padding:10px 12px;background:var(--primary-soft);border-radius:6px;color:var(--text-2);font-size:13px}