/* decoration-hub 共用样式 —— 风格与 order-center 一致：浅色 + 紧凑布局 */
:root{
  --bg:#f5f6f8; --panel:#fff; --line:#e3e6ea; --text:#1f2329; --muted:#8a919c;
  --brand:#185fa5; --brand2:#0c447c; --green:#1d9e75; --red:#e24b4a; --amber:#ba7517;
  --purple:#6f42c1;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;border-radius:6px;font-size:14px}
input,select,textarea{font-family:inherit;font-size:14px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand)}
.hidden{display:none!important}

/* 登录 */
#login{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100}
#login .card{background:var(--panel);padding:32px;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);width:320px;text-align:center}
#login h1{font-size:18px;font-weight:600;margin-bottom:4px;color:var(--brand2)}
#login p{color:var(--muted);margin-bottom:20px;font-size:13px}
#login input{width:100%;margin-bottom:12px;padding:10px}
#login .btn-login{width:100%;padding:11px;background:var(--brand);color:#fff;font-weight:500}
#login .btn-login:hover{background:var(--brand2)}
#login .err{color:var(--red);font-size:12px;margin-top:8px;min-height:14px}
#login .hint{color:var(--muted);font-size:11px;margin-top:14px;line-height:1.6}

/* 顶栏 */
header{background:var(--panel);border-bottom:1px solid var(--line);padding:0 16px;display:flex;align-items:center;height:52px;position:sticky;top:0;z-index:10}
header .logo{font-size:16px;font-weight:600;color:var(--brand2);margin-right:20px;white-space:nowrap}
nav{display:flex;gap:2px;flex:1}
nav a{padding:8px 14px;border-radius:6px;color:var(--muted);font-weight:500}
nav a.active{color:var(--brand);background:#eaf2fb}
header .ops{display:flex;align-items:center;gap:8px}
header .ops .me{color:var(--muted);font-size:13px}
header .ops .role{display:inline-block;padding:1px 8px;border-radius:10px;background:#eaf2fb;color:var(--brand);font-size:12px;margin-left:4px}

/* 主体 */
.wrap{max-width:1200px;margin:16px auto;padding:0 16px}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar .grow{flex:1}

.btn{background:var(--brand);color:#fff;padding:7px 14px}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn.danger{background:var(--red)}
.btn.green{background:var(--green)}
.btn.sm{padding:4px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 表格 */
table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:10px;overflow:hidden}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#fafbfc;color:var(--muted);font-weight:500;font-size:13px}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#f7f9fb}
tbody tr{cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.money{font-variant-numeric:tabular-nums;font-weight:500}
.muted{color:var(--muted)}

/* 阶段标签 */
.stage{display:inline-block;padding:2px 10px;border-radius:10px;font-size:12px;background:#eef1f4;color:#555}
.stage.negotiating{background:#faeeda;color:#854f0b}
.stage.designing{background:#e6f1fb;color:#185fa5}
.stage.budgeting{background:#f3e8fb;color:#6f42c1}
.stage.signed{background:#e1f5ee;color:#0f6e56}
.stage.constructing{background:#fff3cd;color:#856404}
.stage.accepting{background:#d4edda;color:#155724}
.stage.delivered{background:#cfe2ff;color:#0a58ca}
.stage.aftersales{background:#e2e3e5;color:#41464b}

.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:#eef1f4;color:#555}
.tag.green{background:#e1f5ee;color:#0f6e56}
.tag.red{background:#fcebeb;color:#a32d2d}
.tag.amber{background:#faeeda;color:#854f0b}

/* 卡片 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px}
.card h4{font-size:14px;font-weight:500;margin-bottom:6px}

.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.stat .box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px}
.stat .box .k{color:var(--muted);font-size:12px}
.stat .box .v{font-size:22px;font-weight:600;margin-top:2px}
.stat .box .s{font-size:11px;color:var(--muted);margin-top:2px}

/* 表单 */
.form{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:8px}
.form label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px}
.form input,.form select,.form textarea{background:#fff}
.form textarea{min-height:60px;resize:vertical}
.form .actions{display:flex;gap:8px;margin-top:10px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:200}
.modal .box{background:var(--panel);padding:18px;border-radius:10px;min-width:320px;max-width:90vw;max-height:90vh;overflow:auto}
.modal .box h3{font-size:15px;margin-bottom:12px;color:var(--brand2)}
.modal .box .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* 客户联想（autocomplete） */
.autocomplete{position:relative}
.autocomplete input{width:100%}
.ac-list{position:absolute;top:100%;left:0;right:0;z-index:300;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.12);max-height:260px;overflow:auto;margin-top:3px}
.ac-item{display:flex;flex-direction:column;gap:1px;padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f2f5}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.active{background:#eaf2fb}
.ac-name{font-size:14px;color:var(--text);font-weight:500}
.ac-sub{font-size:12px;color:var(--muted)}
.ac-item.ac-new{color:var(--brand);font-size:13px}
.ac-item.ac-new b{color:var(--brand2)}

/* Tabs */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs a{padding:8px 14px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}

/* 指纹锁密码卡片 */
.lock-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#fff8ec,#fff);border:1px solid #f0d9a8;border-radius:12px;padding:14px 16px;margin-bottom:14px}
.lock-left{display:flex;align-items:center;gap:12px}
.lock-icon{font-size:26px}
.lock-label{font-size:12px;color:var(--muted)}
.lock-val{font-size:20px;font-weight:700;color:var(--text);letter-spacing:1px;line-height:1.3}
.lock-val.empty{color:#c3c8cf;font-weight:400}

/* 备注：页内逐条编辑 */
.notes-list{margin:0;padding:0;list-style:none}
.notes-list li{display:flex;gap:8px;align-items:flex-start;padding:6px 4px;border-bottom:1px dashed #f0f1f3}
.notes-list li:last-child{border-bottom:none}
.notes-list .idx{flex:0 0 22px;height:22px;line-height:22px;text-align:center;background:#eef1f5;color:var(--muted);border-radius:6px;font-size:12px;font-weight:600;margin-top:2px}
.notes-list .txt{flex:1;font-size:14px;line-height:1.7;word-break:break-word;cursor:pointer;padding:2px 6px;border-radius:6px;min-height:24px}
.notes-list .txt:hover{background:#f2f5f9}
.notes-list .txt.editing{background:#fff;cursor:text;outline:2px solid var(--brand)}
.notes-list .txt:empty:before{content:'点击输入…';color:#c3c8cf}
.notes-list .ops{flex:0 0 auto;display:flex;gap:2px;opacity:0;transition:.15s}
.notes-list li:hover .ops{opacity:1}
.notes-list .ops button{border:none;background:none;color:var(--muted);font-size:13px;padding:2px 5px;border-radius:4px;cursor:pointer}
.notes-list .ops button:hover{background:#eef1f5;color:var(--text)}
.notes-list .ops button.del:hover{background:#fdeaea;color:var(--red)}
.notes-add{margin-top:8px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);width:100%;padding:8px;background:#fafbfc;cursor:pointer;font-size:13px}
.notes-add:hover{border-color:var(--brand);color:var(--brand);background:#eaf2fb}
.notes-card{padding:8px 10px}

/* 资料库：9 个资料类型入口小格子（与上面 8 阶段时间线卡片同尺寸） */
.stage-tiles{display:grid;grid-template-columns:repeat(auto-fill,170px);gap:8px}
.stage-tile{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;cursor:pointer;transition:.15s;position:relative;
  display:flex;align-items:center;gap:10px;
}
.stage-tile:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(24,95,165,.18)}
.stage-tile.current{border-color:var(--brand);box-shadow:0 0 0 2px rgba(24,95,165,.15);background:#fafcff}
.stage-tile .thumb{
  width:42px;height:42px;flex:0 0 42px;border-radius:6px;flex-shrink:0;
  background-size:cover;background-position:center;background-color:#f0f2f5;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);
}
.stage-tile .info{flex:1 1 auto;min-width:0;max-width:100%}
.stage-tile .info .name{font-size:14px;font-weight:500;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-tile .info .meta{font-size:11px;color:var(--muted);margin-top:2px;display:flex;gap:6px;align-items:center}
.stage-tile .info .meta .badge{font-size:10px;background:#eef1f5;border-radius:8px;padding:1px 7px;font-weight:500;color:#5b6470}
.stage-tile .info .meta .badge.empty{background:#fff5e1;color:var(--amber)}
.stage-tile .info .meta .has-video{font-size:11px;color:var(--brand)}
.stage-tile .open-hint{position:absolute;top:8px;right:8px;font-size:11px;color:var(--muted);opacity:0;transition:.15s}
.stage-tile:hover .open-hint{opacity:1;color:var(--brand)}

/* 阶段灯箱（弹窗里看某个阶段的所有资料） */
.stage-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:480;display:flex;align-items:center;justify-content:center;padding:20px}
.stage-modal .sm-box{background:var(--panel);border-radius:14px;width:min(1080px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.stage-modal .sm-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:#fafbfc}
.stage-modal .sm-head .title{font-size:16px;font-weight:600;color:var(--brand2);flex:1;display:flex;align-items:center;gap:8px}
.stage-modal .sm-head .total{font-size:12px;color:var(--muted);background:#eef1f5;border-radius:10px;padding:2px 10px}
.stage-modal .sm-head .up-btn{background:var(--brand);color:#fff;padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer}
.stage-modal .sm-head .up-btn:hover{background:var(--brand2)}
.stage-modal .sm-head .close{background:#eef1f5;color:var(--text);border-radius:50%;width:30px;height:30px;font-size:16px;line-height:28px;text-align:center;cursor:pointer}
.stage-modal .sm-head .close:hover{background:var(--red);color:#fff}
.stage-modal .sm-body{flex:1;overflow:auto;padding:18px 20px}
.stage-modal .sm-empty{text-align:center;color:var(--muted);padding:48px 12px;font-size:13px}

/* 灯箱内的缩略图网格：资源管理器风格（更大、含文件名） */
.stage-modal .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.stage-modal .media-item{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#f0f2f5;cursor:pointer;transition:.15s}
.stage-modal .media-item:hover{border-color:var(--brand);box-shadow:0 4px 12px rgba(24,95,165,.18);transform:translateY(-1px)}
.stage-modal .media-item .caption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%);
  color:#fff;font-size:11px;padding:22px 6px 5px;line-height:1.2;
  text-align:center;word-break:break-all;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  opacity:0;transition:.15s;pointer-events:none;
}
/* 灯箱内：图片右上角的阶段标签 */
.stage-modal .media-item .stage-badge{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;border-radius:8px;padding:1px 6px;line-height:1.4;pointer-events:none}

.stage-modal .media-item:hover .caption{opacity:1}

/* 类型分组（灯箱内：引路视频、设计图、现场照…） */
.kind-group{margin-bottom:18px}
.kind-group:last-child{margin-bottom:0}
.kind-group .kh{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--brand2)}
.kind-group .kh .kname{flex:1}
.kind-group .kh .kcount{font-size:11px;color:var(--muted);font-weight:400;background:#eef1f5;border-radius:10px;padding:1px 9px}
.kind-group .kh .kupload{font-size:12px;color:var(--brand);cursor:pointer;padding:3px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.kind-group .kh .kupload:hover{border-color:var(--brand);background:#eaf2fb}

/* 小方格网格（与时间线卡片一致的方块感） */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.media-item{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f0f2f5;cursor:pointer;transition:.15s}
.media-item:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(24,95,165,.18)}
.media-item .thumb{width:100%;height:100%;object-fit:cover;display:block}
.media-item .vthumb{width:100%;height:100%;object-fit:cover;display:block;background:#1f2329}
.media-item .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;pointer-events:none}
.media-item .doc{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--muted)}
.media-item .kind-tag{position:absolute;left:3px;bottom:3px;font-size:9px;color:#fff;background:rgba(0,0,0,.45);border-radius:3px;padding:0 4px;line-height:14px;pointer-events:none}
.media-item .del{position:absolute;right:3px;top:3px;background:rgba(0,0,0,.6);color:#fff;border-radius:4px;width:20px;height:20px;line-height:18px;text-align:center;font-size:13px;opacity:0;transition:.15s}
.media-item:hover .del{opacity:1}
.media-item .del:hover{background:var(--red)}
.empty-grid{color:var(--muted);font-size:12px;padding:4px 2px}

/* 上传进度 */
.up-item{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0}
.up-item .bar{flex:1;height:6px;background:#eef1f5;border-radius:3px;overflow:hidden}
.up-item .bar i{display:block;height:100%;background:var(--brand);width:0;transition:.2s}

/* 灯箱预览 */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;display:flex;align-items:center;justify-content:center}
.lightbox .stage{max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.lightbox img{max-width:92vw;max-height:78vh;border-radius:6px;background:#000}
.lightbox video{max-width:92vw;max-height:78vh;border-radius:6px;background:#000}
.lightbox .cap{color:#e8eaed;font-size:13px;text-align:center}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.16);color:#fff;border-radius:50%;width:40px;height:40px;font-size:20px;line-height:38px;text-align:center}
.lightbox .nav:hover{background:rgba(255,255,255,.32)}
.lightbox .nav.prev{left:16px}
.lightbox .nav.next{right:16px}
.lightbox .close{position:absolute;right:18px;top:14px;background:rgba(255,255,255,.16);color:#fff;border-radius:50%;width:34px;height:34px;font-size:18px;line-height:32px;text-align:center}
.lightbox .close:hover{background:var(--red)}
.lightbox .trash{background:rgba(255,255,255,.16);color:#fff;padding:5px 14px;border-radius:6px;font-size:13px}
.lightbox .trash:hover{background:var(--red)}

/* 移动端适配 */
@media (max-width: 768px) {
  header{padding:0 10px}
  header .logo{font-size:14px;margin-right:8px}
  nav a{padding:6px 8px;font-size:13px}
  .wrap{margin:8px auto;padding:0 8px}
  table{font-size:13px}
  th,td{padding:7px 6px}
}