*{box-sizing:border-box}
body{margin:0;background:#f4f6fb;color:#1f2633;font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
a{color:#3b6ef5}
button,input,select,textarea{font:inherit;color:inherit}
.login{max-width:360px;margin:12vh auto;background:#fff;border-radius:16px;padding:30px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.login h1{margin:0 0 18px;font-size:22px;text-align:center}
.login label{display:block;margin:10px 0 4px;color:#5d6778}
.login input{width:100%;padding:10px 12px;border:1px solid #dfe3eb;border-radius:9px}
.login .btn{width:100%;margin-top:18px;padding:10px}
.err{color:#d63031;min-height:22px;margin-top:8px}
.login .sub{color:#7a8496;margin:-8px 0 14px;text-align:center;font-size:13px}
.login input::placeholder{color:#b3bac6;font-size:13px}
.seg{display:flex;background:#f0f2f7;border-radius:10px;padding:3px;margin-bottom:6px}
.seg button{flex:1;border:0;background:transparent;padding:7px;border-radius:8px;cursor:pointer;color:#5d6778}
.seg button.on{background:#fff;color:#3b6ef5;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.panel h3{margin:18px 0 10px;font-size:15px;padding-top:14px;border-top:1px solid #eef0f5}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid #eef0f5;text-align:left;white-space:nowrap}
.tbl th{color:#7a8496;font-weight:500}
.tbl tr.off td{opacity:.55}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;background:#e6f7ee;color:#20a060;font-size:12px}
.tag.bad{background:#fdecec;color:#d63031}
.nowrap{white-space:nowrap}

.top{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e6e9f0;display:flex;align-items:center;gap:12px;padding:10px 20px;flex-wrap:wrap}
.top h1{font-size:17px;margin:0;margin-right:auto}
.dirty{color:#e17055;font-size:13px}
.layout{display:flex;max-width:1180px;margin:0 auto;padding:20px;gap:20px}
.side{flex:none;width:160px;display:flex;flex-direction:column;gap:6px;position:sticky;top:70px;align-self:flex-start}
.side button{text-align:left;border:0;background:transparent;padding:9px 14px;border-radius:9px;cursor:pointer}
.side button.on{background:#3b6ef5;color:#fff}
.main{flex:1;min-width:0}
.panel{background:#fff;border-radius:14px;padding:20px;box-shadow:0 2px 10px rgba(31,38,51,.05)}
.panel h2{margin:0 0 4px;font-size:18px}
.panel .hint{color:#7a8496;margin:0 0 16px}
.bar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.bar input,.bar select{padding:7px 10px;border:1px solid #dfe3eb;border-radius:8px;background:#fff}

.btn{border:1px solid #dfe3eb;background:#fff;padding:7px 14px;border-radius:8px;cursor:pointer}
.btn.primary{background:#3b6ef5;border-color:#3b6ef5;color:#fff}
.btn.danger{color:#d63031}
.btn.sm{padding:3px 9px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.rows{display:flex;flex-direction:column;gap:10px}
.row{border:1px solid #e6e9f0;border-radius:12px;padding:12px;display:grid;gap:8px 12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end;position:relative}
.row.off{opacity:.55;background:#fafbfc}
.row .ops{grid-column:1/-1;display:flex;gap:6px;justify-content:flex-end;align-items:center}
.row .ops .num{margin-right:auto;color:#a0a8b6;font-size:12px}
.f label{display:block;color:#7a8496;font-size:12px;margin-bottom:2px}
.f input,.f select,.f textarea{width:100%;padding:7px 9px;border:1px solid #dfe3eb;border-radius:8px;background:#fff}
.f input[type=color]{padding:2px;height:34px}
.f.chk{display:flex;align-items:center;gap:6px;padding-bottom:8px}
.f.chk input{width:auto}
.f.wide{grid-column:1/-1}
.form .f{margin-bottom:12px}
.empty{color:#a0a8b6;text-align:center;padding:30px 0}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#1f2633;color:#fff;padding:9px 20px;border-radius:20px;z-index:60;max-width:90vw}
.toast.bad{background:#d63031}

@media (max-width:760px){
  .layout{flex-direction:column;padding:12px}
  .side{width:auto;flex-direction:row;overflow-x:auto;position:static}
  .side button{white-space:nowrap}
}

/* 拖动排序 */
.row{padding-left:38px}
.grip{position:absolute;left:0;top:0;bottom:0;width:30px;display:flex;align-items:center;justify-content:center;color:#a0a8b6;font-size:18px;cursor:grab;touch-action:none;user-select:none;border-right:1px dashed #eef0f5;border-radius:12px 0 0 12px}
.grip:hover{color:#3b6ef5;background:#f3f6ff}
.row.dragging{position:fixed;z-index:50;margin:0;background:#fff;box-shadow:0 14px 40px rgba(31,38,51,.22);opacity:.96;pointer-events:none}
.row-ph{border:2px dashed #3b6ef5;border-radius:12px;background:#f3f6ff}
body.is-dragging,body.is-dragging *{cursor:grabbing!important;user-select:none}
.row.mini{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 38px;cursor:grab}
.row.mini .mname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.row.mini .mname small{color:#a0a8b6;font-weight:400;margin-left:6px}
.row.mini .ops{flex:none}
.row.mini .ops .num{margin-right:6px}
.rows:has(.row.mini){gap:6px}
.btn.on{background:#e8efff;border-color:#3b6ef5;color:#3b6ef5}
.drag-hint{font-size:12px;margin:-6px 0 12px!important}

/* 图标图片 */
.icoedit{display:flex;align-items:center;gap:6px}
.icoprev{flex:none;width:34px;height:34px;border-radius:9px;overflow:hidden;background:#fff;border:1px solid #eef0f5}
.icoprev img{width:100%;height:100%;object-fit:cover;display:block}
.icoprev i{display:flex;width:100%;height:100%;align-items:center;justify-content:center;color:#fff;font-style:normal;font-weight:600}

/* 壁纸 */
.wpreview{position:relative;height:150px;border-radius:12px;overflow:hidden;margin-bottom:12px;background:linear-gradient(135deg,#3b6ef5,#7b5cf5) center/cover;display:flex;align-items:flex-end}
.wpreview i{position:absolute;inset:0;background:#000}
.wpreview span{position:relative;color:#fff;padding:8px 12px;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.wgroup{margin-bottom:10px}
.wgroup>b{display:block;font-size:12px;color:#7a8496;font-weight:500;margin-bottom:6px}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.wtile{position:relative;height:72px;border:2px solid transparent;border-radius:10px;background:#eef0f5 center/cover;cursor:pointer;padding:0;overflow:hidden;display:flex;align-items:flex-end}
.wtile span{width:100%;padding:3px 6px;font-size:12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));text-align:left}
.wtile.plain{background:linear-gradient(135deg,#3b6ef5,#7b5cf5)}
.wtile.add{border:2px dashed #c9cfdb;background:#fafbfc;align-items:center;justify-content:center}
.wtile.add span{background:none;color:#5d6778;text-align:center}
.wtile.on{border-color:#3b6ef5;box-shadow:0 0 0 3px rgba(59,110,245,.25)}
.wtile.on::after{content:"✓";position:absolute;top:4px;right:6px;width:20px;height:20px;border-radius:50%;background:#3b6ef5;color:#fff;font-size:12px;line-height:20px;text-align:center}
.f input[type=range]{padding:0;border:0}
/* 头像与样式 */
.avrow{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.avrow .hint{margin:6px 0 0}
.avbig{flex:none;width:76px;height:76px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#3b6ef5,#7b5cf5);display:grid;place-items:center;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.avbig img{width:100%;height:100%;object-fit:cover}
.avbig span{color:#fff;font-size:30px;font-weight:800}
.laygrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.laycard{display:flex;gap:12px;align-items:center;text-align:left;border:2px solid var(--line,#e3e7ef);background:var(--card,#fff);color:inherit;border-radius:12px;padding:10px 12px;cursor:pointer;font:inherit}
.laycard.on{border-color:#3b6ef5;box-shadow:0 0 0 3px rgba(59,110,245,.15)}
.laycard span{font-size:12.5px;color:#7a8394;line-height:1.5}
.laycard span b{display:block;font-size:14px;color:inherit;color:var(--text,#1f2633)}
.laycard i{flex:none;width:46px;height:58px;border-radius:8px;background:#eef1f7;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:4px;padding:5px}
.laycard i.lay-bio::before{content:"";width:14px;height:14px;border-radius:50%;background:#9db2f7;margin:0 15px}
.laycard i.lay-bio b{width:34px;height:6px;border-radius:4px;background:#b9c4dc}
.laycard i.lay-grid b{width:15px;height:15px;border-radius:4px;background:#b9c4dc}
.laycard i.lay-grid::after{content:"";width:15px;height:15px;border-radius:4px;background:#b9c4dc}
@media (max-width:600px){.laygrid{grid-template-columns:1fr}}

/* 批量操作 */
.batch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-4px 0 12px;padding:8px 12px;border-radius:10px;background:#f3f6ff;border:1px solid #dfe6fb}
.batch label{display:flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.batch .selc{margin-right:auto;color:#7a8394;font-size:13px}
.batch .selc b{color:#3b6ef5}
.ops .pick{display:flex;align-items:center;gap:4px;font-size:13px;color:#7a8394;cursor:pointer;margin-right:4px}
.row.picked{border-color:#3b6ef5;box-shadow:0 0 0 2px rgba(59,110,245,.15)}

/* ---------- 手机端 ---------- */
.f.chk{cursor:pointer;user-select:none}
.top h1 small{font-weight:400;color:#7a8496}
#save.need{box-shadow:0 0 0 3px rgba(225,112,85,.35)}
@media (max-width:760px){
  body{font-size:15px;padding-bottom:84px}
  /* 顶栏：一行，标题省略；保存按钮浮在右下角 */
  .top{flex-wrap:nowrap;gap:6px;padding:8px 12px}
  .top h1{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .lg,.top .dirty{display:none}
  .top .btn{padding:6px 10px;font-size:13px;flex:none}
  #save{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;padding:11px 26px;border-radius:24px;font-size:15px;font-weight:600;box-shadow:0 6px 20px rgba(59,110,245,.4)}
  #save.need{box-shadow:0 6px 20px rgba(59,110,245,.4),0 0 0 3px rgba(225,112,85,.55)}
  #save.need::before{content:"● ";color:#ffd2c4}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  /* 栏目：吸在顶栏下面的分段按钮 */
  .layout{padding:0 10px 10px;gap:10px}
  .side{position:sticky;top:52px;z-index:9;align-self:stretch;min-width:0;margin:0 -10px;padding:8px 10px;gap:6px;background:#f4f6fb;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side button{flex:1 0 auto;text-align:center;padding:7px 12px;background:#fff;border:1px solid #e6e9f0;font-size:14px}
  .side button.on{border-color:#3b6ef5}
  .panel{padding:14px 12px;border-radius:12px}
  .panel h2{font-size:17px}
  .panel .hint{font-size:13px;margin-bottom:12px}
  .drag-hint{display:none}
  /* 工具栏：按钮两两一行，筛选和搜索各占一行 */
  .bar{gap:8px}
  .bar>.btn{flex:1 1 40%;padding:9px 8px}
  .bar select,.bar input{flex:1 1 100%;width:100%;padding:9px 10px;font-size:16px}
  .bar>.hint{flex:1 1 100%;text-align:right}
  .batch{gap:6px 8px;padding:8px 10px}
  .batch label{flex:1 1 100%}
  .batch .selc{margin-right:auto}
  .batch .btn{padding:6px 10px}
  /* 每一项：两列紧凑排列 */
  .row{grid-template-columns:1fr 1fr;gap:8px;padding:10px 10px 10px 32px;align-items:end}
  .grip{width:24px;font-size:16px}
  .row .fk-url,.row .fk-desc,.row .fk-old,.row .fk-icon{grid-column:1/-1}
  .row .f.chk{padding:0 0 9px}
  .f label{font-size:12px}
  .f input,.f select,.f textarea{font-size:16px;padding:8px 9px}
  .row .ops{flex-wrap:wrap;gap:6px;padding-top:8px;border-top:1px dashed #eef0f5}
  .row .ops .pick{margin-right:auto;font-size:14px}
  .row .ops .pick input{width:18px;height:18px}
  .row .ops .num{order:-1;margin-right:6px}
  .row .ops .btn{padding:5px 11px}
  /* 排序模式下的一行 */
  .row.mini{padding:6px 8px 6px 32px;gap:6px}
  .row.mini .ops{border:0;padding:0;flex-wrap:nowrap}
  .row.mini .ops .pick{font-size:0;margin:0;gap:0}
  .row.mini .ops .num{display:none}
  /* 设置页 */
  .form .f{margin-bottom:10px}
  .avrow{gap:12px}
  .avbig{width:64px;height:64px}
  .wgrid{grid-template-columns:repeat(3,1fr);gap:6px}
  .wtile{height:60px}
  .tbl th,.tbl td{padding:7px 8px}
}