/* 大麦网 表单平台 · 静态复刻 1:1 样式 (Element UI 风格 + RuoYi 后台) */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif;font-size:14px;color:#303133;background:#f0f2f5;-webkit-font-smoothing:antialiased}
a{color:#409eff;text-decoration:none;cursor:pointer}
::selection{background:#c6e2ff}

/* ============ Element UI 基础组件 ============ */
.el-button{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;font-size:14px;line-height:1;border:1px solid #dcdfe6;border-radius:4px;background:#fff;color:#606266;cursor:pointer;transition:.25s;user-select:none}
.el-button:hover{color:#409eff;border-color:#b3d8ff;background:#ecf5ff}
.el-button--primary{background:#409eff;border-color:#409eff;color:#fff}
.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}
.el-button--plain{background:#fff;color:#409eff;border-color:#409eff}
.el-button--plain:hover{background:#ecf5ff}
.el-button--text{border:none;background:transparent;color:#409eff;padding:8px 0}
.el-button--small{padding:7px 15px;font-size:12px}
.el-button--danger{background:#f56c6c;border-color:#f56c6c;color:#fff}
.el-button--danger:hover{background:#f78989;border-color:#f78989;color:#fff}
.el-button--mini{padding:5px 10px;font-size:12px;border-radius:3px}
.el-button--round{border-radius:20px}
.el-input{position:relative;display:inline-block;width:100%}
.el-input input{width:100%;padding:9px 11px;border:1px solid #dcdfe6;border-radius:4px;font-size:14px;color:#303133;background:#fff;outline:none;transition:border .2s}
.el-input input:focus{border-color:#409eff}
.el-input input::placeholder{color:#c0c4cc}
.el-input--prefix input{padding-left:34px}
.el-input__prefix{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#c0c4cc;width:24px;text-align:center;font-size:16px}
.el-input__suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#c0c4cc;font-size:15px;cursor:pointer}
.el-select{position:relative;display:inline-block;width:100%}
.el-select .el-select__wrap{padding:9px 11px;border:1px solid #dcdfe6;border-radius:4px;color:#606266;background:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.el-select__arrow{color:#c0c4cc}
.el-radio,.el-checkbox{display:inline-flex;align-items:center;font-size:14px;color:#606266;cursor:pointer;margin-right:14px}
.el-radio input,.el-checkbox input{margin-right:6px}
.el-tag{display:inline-flex;align-items:center;padding:2px 8px;font-size:12px;border-radius:4px;background:#f0f9ff;color:#409eff;border:1px solid #d9ecff}
.el-tag--success{background:#f0f9eb;color:#67c23a;border-color:#e1f3d8}
.el-tag--warning{background:#fdf6ec;color:#e6a23c;border-color:#f5dab1}
.el-tag--danger{background:#fef0f0;color:#f56c6c;border-color:#fde2e2}
.el-tag--info{background:#f4f4f5;color:#909399;border-color:#e9e9eb}
.el-badge{position:relative}
.el-badge__dot{position:absolute;right:-4px;top:-2px;width:8px;height:8px;background:#f56c6c;border-radius:50%;border:1px solid #fff}
.el-progress{background:#ebeef5;border-radius:10px;height:6px;overflow:hidden}
.el-progress .bar{height:100%;background:#409eff}

/* ============ 表格 ============ */
.el-table{width:100%;border:1px solid #ebeef5;border-radius:4px;overflow:hidden;background:#fff;font-size:13px}
.el-table th,.el-table td{padding:11px 14px;text-align:left;border-bottom:1px solid #ebeef5}
.el-table th{background:#f5f7fa;color:#909399;font-weight:600;white-space:nowrap}
.el-table tbody tr:hover{background:#f5f7fa}
.el-table .op{color:#409eff}
.el-pagination{display:flex;gap:6px;align-items:center;justify-content:flex-end;padding:14px 4px;font-size:13px}
.el-pagination .pg{min-width:28px;height:28px;line-height:26px;text-align:center;border:1px solid #dcdfe6;border-radius:4px;background:#fff;color:#606266;cursor:pointer;font-size:13px}
.el-pagination .pg.on{background:#409eff;color:#fff;border-color:#409eff}

/* ============ 卡片 ============ */
.el-card{background:#fff;border:1px solid #ebeef5;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:16px}
.el-card__header{padding:14px 20px;border-bottom:1px solid #ebeef5;font-size:15px;font-weight:600;color:#303133}
.el-card__body{padding:20px}

/* ============ 登录页 ============ */
.login-wrap{min-height:100vh;display:flex;background:#fff}
.login-left{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff,#f5f8ff);position:relative;overflow:hidden}
.login-left .brand{font-size:22px;font-weight:700;color:#303133;padding:24px 32px}
.login-illust{width:420px;max-width:80%;padding:40px}
.login-illust img{width:100%;display:block}
.login-right{width:420px;flex:0 0 420px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 36px;background:#fff}
.login-tip{font-size:22px;font-weight:700;color:#303133;margin-bottom:8px}
.login-sub{font-size:13px;color:#909399;margin-bottom:30px}
.login-tabs{width:100%;display:flex;gap:26px;border-bottom:1px solid #ebeef5;margin-bottom:24px}
.login-tab{flex:1;text-align:center;padding:12px 0;font-size:15px;color:#909399;cursor:pointer;position:relative}
.login-tab.on{color:#409eff;font-weight:600}
.login-tab.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#409eff}
.login-form{width:100%}
.login-form .el-input{margin-bottom:20px}
.login-row{display:flex;justify-content:space-between;align-items:center;margin:2px 0 20px;font-size:13px}
.login-login{width:100%;height:42px;font-size:16px;margin-top:4px}
.login-third{width:100%;margin-top:26px}
.login-third__title{display:flex;align-items:center;color:#c0c4cc;font-size:13px;margin-bottom:16px}
.login-third__title:before,.login-third__title:after{content:"";flex:1;height:1px;background:#ebeef5;margin:0 10px}
.login-third__icons{display:flex;justify-content:center;gap:20px}
.login-third__icons span{width:38px;height:38px;border-radius:50%;background:#f5f7fa;display:flex;align-items:center;justify-content:center;font-size:18px;color:#909399;cursor:pointer}
.login-foot{width:100%;text-align:center;color:#c0c4cc;font-size:12px;margin-top:34px}
.login-foot a{color:#909399}

/* ============ 后台 shell ============ */
.admin{display:flex;height:100vh;overflow:hidden}
.sidebar{width:220px;flex:0 0 220px;background:#001529;color:rgba(255,255,255,.68);display:flex;flex-direction:column}
.sidebar__logo{height:60px;display:flex;align-items:center;justify-content:center;gap:10px;background:#002140;cursor:pointer}
.sidebar__logo .logo-mark{width:30px;height:30px;border-radius:6px;background:linear-gradient(135deg,#409eff,#001529);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px}
.sidebar__logo .logo-txt{color:#fff;font-size:17px;font-weight:700;letter-spacing:1px}
.menu{padding:12px 0;flex:1;overflow:auto}
.menu__title{font-size:12px;color:rgba(255,255,255,.4);padding:14px 24px 6px;letter-spacing:1px}
.menu-item{display:flex;align-items:center;gap:12px;padding:12px 24px;font-size:14px;color:rgba(255,255,255,.68);cursor:pointer;transition:.2s;position:relative}
.menu-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu-item.on{color:#fff;background:#409eff}
.menu-item.on:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#fff}
.menu-item .mi{width:18px;text-align:center;font-size:16px}
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:#f0f2f5}
.topbar{height:60px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #ebeef5;box-shadow:0 1px 4px rgba(0,0,0,.04);z-index:5}
.topbar__left{display:flex;align-items:center;gap:14px}
.topbar__collapse{font-size:18px;color:#606266;cursor:pointer;width:24px;text-align:center}
.crumbs{font-size:14px;color:#606266}
.crumbs .sep{color:#c0c4cc;margin:0 6px}
.crumbs .cur{color:#303133}
.topbar__right{display:flex;align-items:center;gap:18px}
.topbar__search{width:220px}
.topbar__search .el-input input{height:34px;padding:7px 11px 7px 34px}
.topbar__item{display:flex;align-items:center;gap:6px;font-size:14px;color:#606266;cursor:pointer;position:relative}
.topbar__item .badge-dot{position:absolute;top:-4px;right:-6px}
.avatar{width:32px;height:32px;border-radius:50%;background:#409eff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.tags{height:40px;background:#fff;border-bottom:1px solid #ebeef5;display:flex;align-items:center;gap:8px;padding:0 16px;overflow-x:auto}
.tag{height:28px;line-height:26px;padding:0 14px;background:#f4f4f5;color:#606266;font-size:13px;border-radius:4px 4px 0 0;cursor:pointer;white-space:nowrap}
.tag.on{background:#fff;color:#409eff;border:1px solid #ebeef5;border-bottom-color:#fff;margin-bottom:-1px}
.tag .x{margin-left:8px;color:#c0c4cc;font-size:11px}
.content{flex:1;overflow:auto;padding:16px}
.page{display:none}
.page.on{display:block}
.page__title{font-size:17px;font-weight:600;color:#303133;margin-bottom:14px}

/* 工作台 stats */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.stat{background:#fff;border:1px solid #ebeef5;border-radius:4px;padding:20px;position:relative;overflow:hidden}
.stat .num{font-size:28px;font-weight:700;color:#303133;margin:8px 0 4px}
.stat .lbl{font-size:13px;color:#909399}
.stat .ic{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff}
.stat .trend{font-size:12px;color:#67c23a}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* 表单/模板卡片 */
.tpl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tpl{background:#fff;border:1px solid #ebeef5;border-radius:4px;overflow:hidden;cursor:pointer;transition:.2s}
.tpl:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);border-color:#c6e2ff}
.tpl__cover{height:110px;display:flex;align-items:center;justify-content:center;font-size:40px;color:#fff}
.tpl__body{padding:14px}
.tpl__name{font-size:14px;font-weight:600;color:#303133;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl__meta{font-size:12px;color:#909399;display:flex;justify-content:space-between}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.toolbar .filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.empty{text-align:center;padding:60px 0;color:#c0c4cc}
.empty .big{font-size:44px;margin-bottom:10px}
.row{display:flex;align-items:center;gap:10px}
.col{flex:0 0 46px;max-width:46px;background:#d6e9ff;border-radius:4px 4px 0 0;display:flex;align-items:flex-start;justify-content:center;position:relative;min-height:12px}
.col:after{content:attr(data-v);position:absolute;left:0;right:0;top:-20px;font-size:11px;color:#909399;text-align:center}
.col.on{background:#409eff}
.col span{position:absolute;left:0;right:0;top:-20px;font-size:11px;color:#909399;text-align:center}
.muted{color:#909399;font-size:13px}
@media (max-width:1100px){.stat-grid,.tpl-grid{grid-template-columns:repeat(2,1fr)}.grid2,.grid3{grid-template-columns:1fr}.login-right{width:100%;flex:1}.login-left{display:none}}