/* smssys 通知提醒系统 —— 公共样式（纯 CSS，无框架，适配桌面与手机） */
:root{
    --brand:#165dff;
    --brand-dark:#0e42b3;
    --ok:#00b42a;
    --warn:#ff7d00;
    --danger:#f53f3f;
    --text:#1d2129;
    --muted:#86909c;
    --line:#e5e6eb;
    --bg:#f4f6fa;
    --card:#ffffff;
    --radius:14px;
    --shadow:0 4px 18px rgba(29,33,41,.07);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
    font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
    background:var(--bg);color:var(--text);
    font-size:17px;line-height:1.65;
    -webkit-text-size-adjust:100%;
}
a{color:var(--brand);text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.35}

/* ===== 布局 ===== */
.topbar{
    background:linear-gradient(120deg,#165dff 0%,#0e42b3 100%);
    color:#fff;padding:0 20px;
    display:flex;align-items:center;justify-content:space-between;
    min-height:66px;box-shadow:0 2px 12px rgba(22,93,255,.25);
    position:sticky;top:0;z-index:50;
}
.topbar .brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;letter-spacing:.5px}
.topbar .brand .logo{
    width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;font-size:21px;
}
.topbar .nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topbar .nav a{
    color:rgba(255,255,255,.88);padding:9px 15px;border-radius:10px;font-size:16px;
    display:inline-block;transition:.2s;
}
.topbar .nav a:hover,.topbar .nav a.on{background:rgba(255,255,255,.2);color:#fff}
.topbar .user{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.9)}
.topbar .user .avatar{
    width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);
    display:flex;align-items:center;justify-content:center;font-size:16px;
}
.container{max-width:1200px;margin:0 auto;padding:24px 18px 60px}

/* ===== 卡片 ===== */
.card{
    background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:22px;margin-bottom:20px;
}
.card h3{font-size:20px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h3 .sub{font-size:14px;color:var(--muted);font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}

/* ===== 统计条 ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:22px}
.stat{
    background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
    border-left:5px solid var(--brand);
}
.stat.warn{border-left-color:var(--warn)}
.stat.ok{border-left-color:var(--ok)}
.stat .num{font-size:34px;font-weight:800;line-height:1.2}
.stat .label{color:var(--muted);font-size:15px}

/* ===== 提醒灯 ===== */
.lamp{
    width:20px;height:20px;border-radius:50%;display:inline-block;flex:none;
    background:#c9cdd4;box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
}
.lamp.on{
    background:radial-gradient(circle at 35% 30%,#ff9a9e,#f53f3f);
    box-shadow:0 0 0 0 rgba(245,63,63,.6);
    animation:pulse 1.4s infinite;
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(245,63,63,.65)}
    70%{box-shadow:0 0 0 14px rgba(245,63,63,0)}
    100%{box-shadow:0 0 0 0 rgba(245,63,63,0)}
}
.reminder{
    display:flex;align-items:center;gap:16px;padding:18px;
    border:1px solid var(--line);border-radius:var(--radius);background:#fff;
    transition:.2s;
}
.reminder:hover{border-color:#b7cbff;box-shadow:0 4px 14px rgba(22,93,255,.12)}
.reminder.active{border-color:#f53f3f;background:linear-gradient(180deg,#fff5f5,#fff)}
.reminder.flash{animation:flashBorder 1s ease-in-out 3}
@keyframes flashBorder{0%,100%{box-shadow:0 0 0 0 rgba(245,63,63,0)}50%{box-shadow:0 0 0 6px rgba(245,63,63,.25)}}
.reminder .icon{
    width:52px;height:52px;flex:none;border-radius:14px;background:#f2f6ff;color:var(--brand);
    display:flex;align-items:center;justify-content:center;font-size:26px;
}
.reminder .info{flex:1;min-width:0}
.reminder .info .title{font-size:19px;font-weight:700;word-break:break-all}
.reminder .info .meta{color:var(--muted);font-size:15px;margin-top:4px;word-break:break-all}
.reminder .ops{display:flex;gap:8px;flex:none}

/* ===== 按钮 ===== */
.btn{
    display:inline-block;border:none;cursor:pointer;font-family:inherit;
    background:var(--brand);color:#fff;padding:11px 20px;border-radius:10px;
    font-size:16px;transition:.2s;line-height:1.4;
}
.btn:hover{background:var(--brand-dark);color:#fff}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid #c6d4ff}
.btn.ghost:hover{background:#f2f6ff}
.btn.danger{background:var(--danger)}
.btn.danger:hover{background:#d92e2e}
.btn.gray{background:#e5e6eb;color:#4e5969}
.btn.gray:hover{background:#d9dbe1}
.btn.ok{background:var(--ok)}
.btn.small{padding:7px 13px;font-size:15px;border-radius:8px}
.btn.block{display:block;width:100%;text-align:center}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ===== 表单 ===== */
.field{margin-bottom:16px}
.field label{display:block;font-size:16px;font-weight:600;margin-bottom:7px}
.field .hint{color:var(--muted);font-size:14px;margin-top:5px}
input[type=text],input[type=password],input[type=number],select,textarea{
    width:100%;padding:13px 14px;border:1px solid #dcdfe6;border-radius:10px;
    font-size:17px;font-family:inherit;background:#fff;color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,93,255,.12)}
.form-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.form-inline .field{margin-bottom:0;flex:1;min-width:180px}

/* ===== 表格 ===== */
table{width:100%;border-collapse:collapse;font-size:16px}
th,td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:#f7f8fa;color:#4e5969;font-weight:700;white-space:nowrap}
tbody tr:hover{background:#fafbff}

/* ===== 标签 ===== */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:14px;background:#f2f3f5;color:#4e5969}
.badge.green{background:#e8ffea;color:#009a29}
.badge.red{background:#ffece8;color:#d92e2e}
.badge.blue{background:#e8f3ff;color:#165dff}
.badge.orange{background:#fff7e8;color:#d97706}

/* ===== 登录页 ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
    background:linear-gradient(135deg,#165dff 0%,#0e42b3 60%,#0b2f7a 100%)}
.login-box{width:100%;max-width:440px;background:#fff;border-radius:20px;padding:40px 34px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.login-box .logo{font-size:44px;text-align:center;margin-bottom:6px}
.login-box h1{font-size:26px;text-align:center;margin-bottom:6px}
.login-box .slogan{text-align:center;color:var(--muted);font-size:15px;margin-bottom:26px}
.login-box .btn.block{padding:14px;font-size:18px;border-radius:12px;margin-top:6px}
.remember{display:flex;align-items:center;gap:8px;font-size:16px;color:#4e5969;margin:10px 0 4px}
.remember input{width:18px;height:18px}
.login-tip{margin-top:18px;text-align:center;color:var(--muted);font-size:14px;line-height:1.8}

/* ===== 提示条 ===== */
.alert{padding:14px 18px;border-radius:12px;font-size:16px;margin-bottom:18px}
.alert.info{background:#e8f3ff;color:#0e42b3}
.alert.error{background:#ffece8;color:#c92626}
.alert.success{background:#e8ffea;color:#009a29}

/* ===== 提醒横幅（用户端顶部） ===== */
.alarm{
    display:none;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--radius);
    background:linear-gradient(90deg,#f53f3f,#ff7d00);color:#fff;font-size:18px;font-weight:700;
    box-shadow:0 6px 20px rgba(245,63,63,.35);margin-bottom:20px;animation:shake 1.2s ease-in-out infinite;
}
.alarm.show{display:flex}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.alarm .big{font-size:28px}

/* ===== 代码框 ===== */
pre.code{
    background:#1d2129;color:#d7dae0;padding:16px;border-radius:12px;overflow-x:auto;
    font-size:14px;line-height:1.7;font-family:Consolas,Monaco,"Courier New",monospace;margin:0;
}
pre.code .hl{color:#7ee787}

/* ===== 空状态 ===== */
.empty{text-align:center;color:var(--muted);padding:44px 20px;font-size:17px}
.empty .ico{font-size:46px;display:block;margin-bottom:10px;opacity:.55}

/* ===== 分页 ===== */
.pager{display:flex;gap:8px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pager a,.pager span{padding:9px 15px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:15px}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager span.cur{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ===== 页脚 ===== */
.footer{text-align:center;color:var(--muted);font-size:14px;padding:8px 0 30px}

/* ===== 手机适配 ===== */
@media (max-width:768px){
    body{font-size:16px}
    .topbar{flex-wrap:wrap;padding:10px 14px;min-height:auto;gap:8px}
    .topbar .brand{font-size:19px}
    .topbar .nav{width:100%;overflow-x:auto;padding-bottom:2px}
    .topbar .nav a{padding:8px 12px;font-size:15px}
    .container{padding:16px 12px 40px}
    .card{padding:16px;border-radius:12px}
    .reminder{flex-wrap:wrap;gap:12px}
    .reminder .ops{width:100%}
    .reminder .ops .btn{flex:1;text-align:center}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat .num{font-size:28px}
    /* 表格转卡片 */
    table,thead,tbody,tr,td{display:block;width:100%}
    thead{display:none}
    tbody tr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:8px 12px;background:#fff}
    tbody td{border:none;padding:8px 0;display:flex;justify-content:space-between;gap:12px}
    tbody td::before{content:attr(data-label);color:var(--muted);font-size:15px;flex:none}
    tbody td{text-align:right}
    .login-box{padding:30px 22px}
}