/* Z2a: 后台主题。手机预览另设独立变量，保持 App 原配色。 */
:root{
  --primary-bg:#087f3d; --primary-fg:#ffffff; --green:#07c160; --paper:#f6f7f9; --card:#ffffff; --sep:#e7e7eb;
  --hover:#eceef1; --input:#f5f6f7; --tab:#f6f7f9;
  --text:#303133; --text2:#73767a; --text3:#a3a6aa; --link:#576b95;
  --success:#07c160; --orange:#d9861c; --red:#c62828; --blue:#1677c8;
  --purple:#7850b5; --pink:#c65c6c; --white:#ffffff;
  --success-bg:#e7f8ef; --warning-bg:#fff3e3; --danger-bg:#fff0f0;
  --danger-strong:#d93025; --danger-text:#b42318; --flash:#fff1bb;
  --overlay:rgba(0,0,0,.4); --toast-bg:rgba(0,0,0,.7);
  --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 16px rgba(0,0,0,.12);
  --font-xs:12px; --font-sm:13px; --font-base:14px; --font-lg:16px; --font-xl:20px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --r:var(--radius-md); --r-big:var(--radius-lg);
  --preview-frame:#1c1c1e; --preview-paper:#ededed; --preview-card:#ffffff;
  --preview-text:#000000; --preview-text2:#8a8a8e; --preview-sep:#c6c6c8;
  --preview-input:#e9e9eb; --preview-tab:#f7f7f7; --preview-green:#07c160;
  --preview-red:#e5484d; --preview-shadow:0 8px 30px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --primary-bg:#087f3d; --primary-fg:#ffffff; --green:#2acb78; --paper:#181a1d; --card:#242629; --sep:#414449;
    --hover:#35383c; --input:#303338; --tab:#181a1d;
    --text:#eeeeef; --text2:#b0b2b6; --text3:#85888d; --link:#8da9df;
    --success:#2acb78; --orange:#f3b45e; --red:#ff8585; --blue:#80baff;
    --purple:#c2a0f0; --pink:#f19ca8; --white:#ffffff;
    --success-bg:#183c2a; --warning-bg:#49351e; --danger-bg:#492729;
    --danger-strong:#ff7777; --danger-text:#ffad9f; --flash:#544922;
    --overlay:rgba(0,0,0,.65); --toast-bg:rgba(0,0,0,.85);
    --shadow-sm:0 1px 3px rgba(0,0,0,.25); --shadow-md:0 4px 16px rgba(0,0,0,.35);
    --preview-frame:#1c1c1e; --preview-paper:#121212; --preview-card:#212121;
    --preview-text:#ffffff; --preview-text2:#98989f; --preview-sep:#38383a;
    --preview-input:#1c1c1e; --preview-tab:#191919; --preview-green:#07c160;
    --preview-red:#e5484d; --preview-shadow:0 8px 30px rgba(0,0,0,.12);
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font:var(--font-base)/1.5 "PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif}
.hidden{display:none!important}
a{color:var(--link);cursor:pointer;text-decoration:none}
.card{background:var(--card);border-radius:var(--r)}
.logo{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:9px;background:var(--green);color:var(--white);font-weight:600;font-size:18px}
.logo.sm{width:28px;height:28px;border-radius:4.5px;font-size:11px;margin-right:8px}
.btn{border:1px solid var(--sep);border-radius:var(--r);padding:0 14px;height:34px;font-size:var(--font-base);background:var(--input);color:var(--text);cursor:pointer}
.btn.primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-fg);font-weight:500}
.btn:hover:not(:disabled){background:var(--hover)}
.btn.primary:hover:not(:disabled){background:var(--primary-bg);filter:brightness(.94)}
.btn.danger{color:var(--red)}
.btn.big{height:44px;border-radius:var(--r);font-size:var(--font-lg);width:100%}
.err{color:var(--red);min-height:1.5em;margin:0}
.hint{color:var(--text2);font-size:13px;margin:4px 0 16px}
.tag{display:inline-block;font-size:12px;padding:0 6px;border-radius:4px;background:var(--input);color:var(--text2);margin-left:6px}
.tag.g{background:var(--success-bg);color:var(--green)}
.tag.o{background:var(--warning-bg);color:var(--orange)}

.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-card{width:100%;max-width:340px;padding:32px 24px;display:flex;flex-direction:column;gap:12px;text-align:center;align-items:stretch}
.login-card .logo{align-self:center}
.login-card h1{font-size:20px;margin:4px 0 8px}
input,select{height:40px;border:0;border-radius:var(--r);background:var(--input);color:var(--text);padding:0 12px;font-size:15px}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;padding:10px 20px;background:var(--tab);border-bottom:.5px solid var(--sep);flex-wrap:wrap}
.brand{display:flex;align-items:center;font-weight:600}
#nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
#nav a{color:var(--text);padding:6px 12px;border-radius:8px}
#nav a.on{background:transparent;color:var(--green);font-weight:500}
.me{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)}
main{max-width:1200px;margin:0 auto;padding:20px 16px 60px}
h2{font-size:var(--font-xl);margin:0 0 4px}

.phones{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.phone-col{text-align:center}
.phone-col h3{margin:0;font-size:16px}
.phone-col .sub{margin:0 0 10px;color:var(--text2);font-size:12px}
.phone{--paper:var(--preview-paper);--card:var(--preview-card);--text:var(--preview-text);--text2:var(--preview-text2);--sep:var(--preview-sep);--input:var(--preview-input);--tab:var(--preview-tab);--green:var(--preview-green);width:300px;height:600px;border-radius:36px;border:8px solid var(--preview-frame);background:var(--paper);overflow:hidden;display:flex;flex-direction:column;text-align:left;box-shadow:var(--preview-shadow)}
.ph-nav{height:44px;display:flex;align-items:center;justify-content:center;font-weight:600;background:var(--paper);flex:none}
.ph-body{flex:1;overflow-y:auto;padding-bottom:8px}
.ph-sec{margin:8px 0 0}
.ph-sec-t{font-size:12px;color:var(--text2);padding:6px 16px 4px}
.ph-cell{display:flex;align-items:center;gap:12px;background:var(--card);padding:10px 16px;cursor:pointer;position:relative}
.ph-cell+.ph-cell::before{content:"";position:absolute;left:56px;right:0;top:0;border-top:.5px solid var(--sep)}
.ph-cell:hover{background:var(--input)}
.ph-ico{width:28px;height:28px;border-radius:4.5px;flex:none;color:var(--white);font-size:13px;display:flex;align-items:center;justify-content:center}
.ph-cell .nm{flex:1;font-size:15px}
.ph-cell .ar{color:var(--sep)}
.ph-empty{padding:40px 16px;text-align:center;color:var(--text2);font-size:13px}
.ph-tab{height:50px;flex:none;display:flex;background:var(--tab);border-top:.5px solid var(--sep)}
.ph-tab span{flex:1;display:flex;align-items:center;justify-content:center;font-size:10px}
.ph-tab span.on{color:var(--green)}
.ph-count{font-size:12px;color:var(--text2);text-align:center;padding:6px}

.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.search{flex:1;min-width:200px;border-radius:18px}
.chk{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:4px}
.mod{margin:18px 0 6px;font-size:13px;color:var(--text2)}
.cap{scroll-margin-top:80px;display:grid;grid-template-columns:minmax(140px,1fr) repeat(6,minmax(48px,1fr));align-items:center;gap:8px;background:var(--card);padding:10px 14px;position:relative}
.cap+.cap::before{content:"";position:absolute;left:14px;right:0;top:0;border-top:.5px solid var(--sep)}
.cap:first-of-type{border-radius:var(--r) var(--r) 0 0}
.cap-h{background:transparent;color:var(--text2);font-size:12px;padding:4px 14px}
.cap-h::before{display:none}
.cap .nm b{font-weight:500}
.cap .nm small{display:block;color:var(--text2);font-size:12px}
.cap.flash{animation:fl 1.6s}
@keyframes fl{0%,40%{background:var(--flash)}100%{background:var(--card)}}
.sw{position:relative;width:51px;height:31px;border-radius:16px;background:var(--input);border:0;cursor:pointer;justify-self:center;transition:background .2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--white);box-shadow:var(--shadow-sm);transition:left .2s}
.sw.on{background:var(--green)}
.sw.on::after{left:22px}
.sw:disabled{opacity:.4;cursor:not-allowed}

.blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6)}
.blk{padding:var(--space-6)}
.blk-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.blk-id{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--link)}
.blk-n{font-weight:600}
.blk dl{margin:0;display:grid;grid-template-columns:64px 1fr;gap:3px 8px;font-size:13px}
.blk dt{color:var(--text2)}
.blk dd{margin:0;word-break:break-all}
.blk code{font-size:12px;color:var(--text2)}
.vers{display:flex;gap:6px}

.lst{padding:var(--space-6);margin-bottom:var(--space-6)}
.mem{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:.5px solid var(--sep)}
.mem small{color:var(--text2)}
.row{display:flex;gap:8px;align-items:center}
.row.end{justify-content:flex-end}
.aud{background:var(--card);padding:10px 14px;display:flex;gap:12px;align-items:center;font-size:13px;border-top:.5px solid var(--sep)}
.aud .w{flex:1}
.aud small{color:var(--text2)}

.modal{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal-card{max-width:440px;width:100%;padding:20px}
#modalText{white-space:pre-wrap}
.warn{background:var(--warning-bg);color:var(--orange);padding:10px 12px;border-radius:8px;margin:0 0 12px}
.nest{margin:8px 0 8px 16px;padding-left:12px;border-left:2px solid var(--sep)}
.host{padding:var(--space-6);margin-bottom:var(--space-6)}
.host-sort{width:96px}
.drag{cursor:grab;color:var(--link);font-size:13px;margin-right:8px}
.sale,.grant{padding:12px 0;border-top:.5px solid var(--sep)}
.sale-row,.pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bad{color:var(--red)}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
textarea{width:100%;min-height:72px;border:0;border-radius:var(--r);background:var(--input);color:var(--text);padding:8px 12px;font:inherit}
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--toast-bg);color:var(--white);padding:12px 18px;border-radius:10px;z-index:30;font-size:15px}
@media (max-width:640px){.cap{grid-template-columns:minmax(120px,1fr) repeat(6,48px)}.phone{width:100%;max-width:300px}.top{gap:8px}}

#app:not(.hidden){display:grid;grid-template-columns:200px minmax(0,1fr) 360px;min-height:100vh}
.top{position:sticky;height:100vh;display:flex;flex-direction:column;align-items:stretch;gap:20px;border-right:.5px solid var(--sep);border-bottom:0}
#nav{flex-direction:column;flex-wrap:nowrap}
.me{flex-wrap:wrap} main{width:100%;min-width:0;max-width:none;margin:0}
#preview{position:sticky;top:0;height:100vh;overflow:auto;padding:16px;border-left:.5px solid var(--sep);background:var(--tab)}
.preview-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.preview-bar .btn{font-size:12px;padding:0 8px}
#previewTabs,#previewLayers{display:flex;gap:3px}.preview-bar #previewClose{margin-left:auto}
#previewPhones [data-column]{display:none} #previewPhones [data-column].preview-active{display:block}
#previewPhones .phone{width:300px}.ph-cell.selected{outline:2px solid var(--green);outline-offset:-2px}
#previewOpen,#mobileNav{display:none}
#app:not(.hidden).preview-closed{grid-template-columns:200px minmax(0,1fr)}
#app.preview-closed #preview{display:none} #app.preview-closed #previewOpen{display:block;position:fixed;right:12px;top:12px;z-index:8}
#app:not(.hidden).comparing{grid-template-columns:200px minmax(0,1fr)}
#app.comparing main{display:none} #app.comparing #preview{grid-column:2}
#app.comparing #previewPhones [data-column]{display:block}
@media(max-width:1099px){#app:not(.hidden){grid-template-columns:200px minmax(0,1fr)} #preview{position:fixed;right:0;top:0;width:min(360px,100vw);z-index:10;box-shadow:var(--shadow-md)} #app.preview-closed #previewOpen{display:block} #app.comparing #preview{width:calc(100vw - 200px)}}
.release-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.release-shot { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.release-shot img { display: block; width: 100%; height: 110px; object-fit: contain; }
.release-shot-dialog { max-width: 95vw; max-height: 95vh; border: 0; border-radius: 8px; }
.release-shot-dialog::backdrop { background: var(--overlay); }
.release-shot-dialog img { display: block; max-width: 90vw; max-height: 82vh; object-fit: contain; }
.release-diff { color: var(--red); background: var(--danger-bg); }

#capList{overflow-x:auto}.cap{min-width:460px}
/* 右栏真实皮肤 */
.phone .sk-shot{flex:1;min-height:0;overflow:auto;background:var(--white)}
.phone .sk-shot img{width:100%;display:block}
.phone .sk-tabs{display:flex;border-top:.5px solid var(--sep)}
.phone .sk-tabs button{flex:1;border:0;background:none;padding:8px 0;font-size:12px;color:var(--text2);cursor:pointer}
.phone .sk-tabs button.on{color:var(--preview-green);font-weight:600}
.phone .sk-diff{padding:6px 10px;font-size:12px;border-top:.5px solid var(--sep);max-height:80px;overflow:auto}
.reader-scroll{overflow-x:auto;background:var(--card);border-radius:var(--r)}
.readers{width:100%;border-collapse:collapse;min-width:760px}
.readers th,.readers td{padding:10px 12px;text-align:left;font-size:13px;vertical-align:top;border-top:.5px solid var(--sep)}
.readers th{color:var(--text2);font-weight:500;border-top:0}
.readers small{color:var(--text2)}
.readers.no-act th:last-child,.readers.no-act td:last-child{display:none}
.reader-total{color:var(--text2);font-size:13px}
#readerPager{margin-top:12px}
.sk-more{color:var(--preview-green)}.sk-less{color:var(--preview-red)}.sk-same{color:var(--text2)}
.env-label{display:inline-block;background:var(--text2);color:var(--white);font-weight:800;padding:4px 9px;border-radius:4px;margin-left:6px}
.env-label.hidden{display:none}

.feedback-row { display:block; width:100%; text-align:left; cursor:pointer; margin-bottom:8px; }
.feedback-row.overdue { border-left:4px solid var(--danger-strong); color:var(--danger-text); }
.feedback-text { white-space:pre-wrap; overflow-wrap:anywhere; }
#feedbackReply textarea { width:100%; min-height:100px; }

#reportNote { display:block; width:100%; min-height:80px; }
.report-home-link { border:0; text-align:left; cursor:pointer; color:inherit; font:inherit; }

/* 首页只展示待办与服务状态；预览栏在其他页面保留。 */
#app.home-active:not(.hidden){grid-template-columns:200px minmax(0,1fr)}
#app.home-active #preview,#app.home-active #previewOpen{display:none}
#nav details summary{cursor:pointer;padding:7px 12px;font-weight:500;list-style:none;display:flex;align-items:center;gap:10px}
#nav details summary::-webkit-details-marker{display:none}
#nav details a,#nav .nav-unavailable{display:block;padding-left:28px}
#nav .nav-unavailable{padding-top:6px;padding-bottom:6px;color:var(--text2)}
.top{overflow-y:auto;background:var(--paper);gap:12px}
.brand{color:var(--text);white-space:nowrap}
.env-label,body.env-test .env-label,body.env-production .env-label{background:var(--input);color:var(--text2);font-size:var(--font-xs);font-weight:400;padding:2px 5px}
body.env-test .top,body.env-production .top{background:var(--paper);color:var(--text)}
body.env-test .top a,body.env-production .top a,body.env-test .me,body.env-production .me{color:var(--text)}
body.env-test #nav a.on,body.env-production #nav a.on{background:transparent;color:var(--green)}
#nav a:hover,#nav details summary:hover,body.env-test #nav a:hover,body.env-production #nav a:hover{color:var(--text)}
#nav a.on:hover,body.env-test #nav a.on:hover,body.env-production #nav a.on:hover{color:var(--green)}
#nav>a{display:flex;align-items:center;gap:10px}
#nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
#nav .nav-arrow{width:14px;height:14px;margin-left:auto;transform:rotate(-90deg)}
#nav details[open] .nav-arrow{transform:none}
.account-menu{margin-top:auto;position:relative}
.me{font-size:var(--font-xs);gap:4px;cursor:pointer;list-style:none;white-space:nowrap}.me::-webkit-details-marker{display:none}
.account-actions{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2);background:var(--card);border:1px solid var(--sep)}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6)}.page-heading{min-width:0}.page-heading h2{margin:0 0 var(--space-2)}.page-heading .hint{margin:0}.page-actions{display:flex;gap:var(--space-2);margin-left:auto}
main>.page>h2{margin-bottom:8px}
main>.page>.hint{margin-bottom:var(--space-6)}
#page-home .home-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;background:var(--card);border-radius:var(--r);padding:var(--space-4) 0}
#page-home .home-tile{border-radius:0;text-align:center;border-right:1px solid var(--sep)}
#page-home .home-tile:last-child{border-right:0}
#page-home .home-tile .hint{display:block;text-align:left;color:var(--text2)}
#page-home .home-tile strong{color:var(--text);font-size:var(--font-xl)}
@media(max-width:699px){#app:not(.hidden),#app.preview-closed,#app.comparing,#app.home-active:not(.hidden){display:block}.top{height:auto;position:sticky;flex-direction:row;align-items:center;border-bottom:.5px solid var(--sep);overflow:visible;flex-wrap:wrap}.account-menu{margin-top:0;margin-left:auto}#nav{display:none}#mobileNav{display:block;max-width:150px}.me{margin-left:auto}#app.comparing #preview{width:100vw}#page-home .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Z5b: 微信后台外观，保留真实页面和手机预览的行为。 */
body { font:14px/1.6 "PingFang SC","Microsoft YaHei",sans-serif; }
#app:not(.hidden) { grid-template-columns:220px minmax(0,1fr) 360px; }
#app:not(.hidden).preview-closed,#app:not(.hidden).comparing,#app.home-active:not(.hidden) { grid-template-columns:220px minmax(0,1fr); }
.top,body.env-test .top,body.env-production .top { padding:30px 22px 24px; gap:0; background:var(--paper); border:0; }
.brand { font-size:22px; margin-bottom:30px; }
.logo.sm { width:36px; height:36px; border-radius:50%; font-size:15px; margin-right:12px; }
#nav { gap:0; }
#nav>a,#nav details summary { padding:10px 5px; font-size:15px; font-weight:400; gap:12px; }
#nav details a { padding:7px 5px 7px 37px; font-size:14px; border-radius:0; }
#nav svg { width:19px; height:19px; }
#nav .nav-arrow { width:14px; height:14px; }
.account-menu { padding:25px 3px 0; }
.me { font-size:13px; }
.account-actions { position:absolute; bottom:42px; left:0; min-width:130px; box-shadow:var(--shadow-sm); }
#app main { max-width:1700px; padding:40px 40px 48px 26px; }
main>.page:not(#page-home) { background:var(--card); border:1px solid var(--sep); border-radius:4px; box-shadow:var(--shadow-sm); padding:32px 36px; }
.page-header { margin-bottom:30px; }
.page-heading h2,main>.page>h2 { font-size:20px; font-weight:500; line-height:1.4; }
.page-heading .hint { color:var(--text3); margin-top:8px; }
.card { border-radius:4px; }
.btn { height:auto; min-height:36px; padding:7px 18px; border:1px solid var(--sep); border-radius:3px; background:var(--input); }
.btn.primary { background:var(--primary-bg); border-color:var(--primary-bg); }
input,select,textarea { border:1px solid var(--sep); border-radius:3px; background:var(--card); color:var(--text); font:inherit; }
input,select { height:40px; padding:0 10px; }
input[type=checkbox],input[type=radio] { height:auto; }
input:focus,select:focus,textarea:focus { border-color:var(--green); }
.search { flex:0 1 220px; border-radius:3px; }
.bar { gap:10px; margin-bottom:22px; }
.readers th,.readers td { padding:15px 16px; border-bottom:1px solid var(--sep); border-top:0; font-size:14px; }
.readers th { background:var(--paper); color:var(--text2); font-weight:400; }
.readers tbody tr:hover { background:var(--hover); }
.feedback-row { padding:15px 16px; margin:0; border:0; border-bottom:1px solid var(--sep); border-radius:0; background:var(--card); font:inherit; }
.feedback-row:hover { background:var(--hover); }
.feedback-row.overdue { border-left:4px solid var(--danger-strong); }
#feedbackDetail>.card,#reportDetail>.card { border:1px solid var(--sep); padding:24px; margin-top:24px; }
#page-home .page-header,#page-home>h2 { background:var(--card); border:1px solid var(--sep); border-bottom:0; border-radius:4px 4px 0 0; padding:32px 36px 0; margin:0; }
#page-home .home-grid { margin:0 0 24px; padding:12px 36px 32px; border:1px solid var(--sep); border-top:0; border-radius:0 0 4px 4px; box-shadow:var(--shadow-sm); }
#page-home .home-tile { padding:15px 24px; }
#page-home .home-tile strong { font-size:27px; font-weight:400; }
#page-home .home-tile .hint { color:var(--text3); }
.modal-card { padding:28px 34px; box-shadow:var(--shadow-md); }
#preview { background:var(--paper); }
@media (width < 1100px) and (width >= 700px) { #app:not(.hidden) { grid-template-columns:220px minmax(0,1fr); } #app.comparing #preview { width:calc(100vw - 220px); } }

/* 绑定记录页沿用后台侧栏和内容卡片样式。 */
.bindings-layout { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:100vh; }
.bindings-layout main { width:100%; max-width:1700px; margin:0; padding:40px 40px 48px 26px; }
.bindings-layout #records p { margin:0; padding:15px 16px; border-bottom:1px solid var(--sep); }
.bindings-layout #records p:hover { background:var(--hover); }

/* E1: layout repairs without changing data or permissions. */
.bindings-layout .brand { white-space:normal; }
.bindings-layout .top { min-width:0; height:auto; }
.bindings-layout .page-heading { padding-left:16px; }
#page-home .home-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
#page-home .home-tile .hint { text-align:center; }
#page-home .home-tile strong { overflow-wrap:normal; word-break:keep-all; }
#page-home #homeStatus .home-tile:last-of-type strong { white-space:nowrap; font-size:clamp(14px,1.3vw,20px); }
#homeStatus > p.hint { grid-column:1 / -1; padding:0 24px; }
.readers { min-width:1180px; }
.readers th, .readers td { white-space:nowrap; }
.readers td[data-phone-cell] { min-width:220px; white-space:normal; }
.phone-form { display:flex; flex-wrap:wrap; gap:8px; }
.phone-form .search { min-width:0; width:100%; flex:1 1 160px; }
#capList .cap { min-width:720px; grid-template-columns:minmax(140px,1fr) repeat(6,minmax(48px,1fr)); }
.mem > div:first-child { flex:1; min-width:0; overflow-wrap:anywhere; }
.mem > div:last-child { flex:none; display:flex; gap:8px; }
.mem .btn { white-space:nowrap; flex-shrink:0; }
.bar { min-width:0; }
#contentHost { flex:1 1 auto; width:100%; max-width:100%; min-width:0; }
#page-adv .audit-filter { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); align-items:end; }
#page-adv .audit-filter input { width:100%; max-width:none; min-width:0; }
#page-adv .audit-filter button { justify-self:end; }
#reportPagination { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
#releaseDetail .phones { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); align-items:start; }
.preview-bar { flex-wrap:nowrap; overflow-x:auto; }
.modal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal-heading h2 { margin:0; }
@media (width < 700px) { #app .reader-scroll{max-height:none;overflow:visible}#app .readers td:nth-child(n){text-align:left}#app .readers th{position:static} .bindings-layout { display:block; } .bindings-layout main { padding:16px; } #app:not(.hidden),#app.preview-closed,#app.comparing,#app.home-active:not(.hidden) { display:block; } .top { height:auto; padding:16px; gap:8px; } .brand { margin:0; font-size:18px; } .account-menu { padding:0; } #app main { padding:16px; } main>.page:not(#page-home) { padding:22px 18px; } #page-home .page-header,#page-home>h2 { padding:22px 18px 0; } #page-home .home-grid { padding:12px 18px 22px; }
  .bindings-layout { display:block; }
  .bindings-layout main { padding:16px; }
  #app.preview-closed #previewOpen { position:static; }
  .me { white-space:normal; }
  #page-home .home-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); }
  .readers th, .readers td { white-space:normal; }
}

/* 数据排版规则：列表字段可辨识，长内容不挤压操作区。 */
.data-name{display:inline-block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.reader-value{display:block;max-width:240px;min-width:160px}
.reader-scroll{max-height:70vh;overflow:auto}
.readers th{position:sticky;top:0;z-index:1;background:var(--card)}
.readers th,.readers td{min-width:100px}
.readers th:nth-child(2),.readers th:nth-child(3),.readers th:nth-child(4),.readers th:nth-child(5),.readers th:nth-child(6),.readers td:nth-child(2),.readers td:nth-child(3),.readers td:nth-child(4),.readers td:nth-child(5),.readers td:nth-child(6){text-align:right;font-variant-numeric:tabular-nums}
#feedbackList,#reportList,#listsBox,#hostsList,#courseBox,#records{overflow-wrap:anywhere}
#feedbackList,#reportList,#records{max-height:70vh;overflow:auto}
#feedbackList>.hint,#reportList>.hint,#readerRows .hint,#records>.hint{padding:32px 16px;text-align:center}
.feedback-row{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.feedback-text{overflow-wrap:anywhere}
.btn{white-space:nowrap}
.ph-empty{display:grid;place-items:center;min-height:100px;background:var(--input);color:var(--text2)}
#listExtras .list-filter,#listExtras .list-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:end;gap:8px}
#listExtras .list-filter input,#listExtras .list-dates input{width:100%;min-width:0}
#listExtras .list-filter button{justify-self:end}
#autoForm>.row.end,#listExtras .row.end{justify-content:flex-end}
.bindings-layout .page-heading{padding-left:16px}


.data-scroll{max-height:70vh;overflow:auto}.data-table{width:100%;min-width:640px;table-layout:fixed;border-collapse:collapse}.data-table th,.data-table td{padding:12px 16px;border-bottom:1px solid var(--sep);text-align:left}.data-table th{position:sticky;top:0;z-index:1;background:var(--card)}.data-table th:nth-child(1){width:150px}.data-table th:nth-child(2){width:220px}.data-table th:last-child{width:100px}.data-table .data-number{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.data-table .feedback-row{width:auto;padding:6px 10px;border:1px solid var(--sep);border-radius:4px;white-space:nowrap}

#listsBox,#hostsList{max-height:70vh;overflow:auto}


/* E2 数据排版：固定列宽、名称省略、正文折行、数字等宽；长列表滚动并固定表头。 */
.data-table th:nth-child(2){text-align:right;font-variant-numeric:tabular-nums}
.data-table .feedback-row.overdue{color:var(--text);border:1px solid var(--sep)}
.cap .nm{min-width:0;overflow:hidden}.cap .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#capList{overflow-x:auto}.row.add{flex-wrap:wrap}.row.add input{flex:1 1 160px;min-width:0}.row.add .btn{flex:0 0 auto}
.mem{align-items:flex-start;gap:8px}.mem>div:first-child{min-width:0;overflow-wrap:anywhere}
.blocks{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}.blk-h{flex-wrap:wrap;min-width:0}.blk-h b,.blk-n{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.blk-h .tag{flex:none}
#app.preview-closed #previewOpen{position:static;align-self:flex-start;z-index:auto}
#readerPager{justify-content:flex-end}.reader-scroll{overflow:auto}.readers th:first-child,.readers td:first-child{position:sticky;left:0;background:var(--card);z-index:1}.readers th:first-child{z-index:2}
#listExtras .list-filter{grid-template-columns:minmax(0,1fr) auto}#listExtras .list-filter button{justify-self:start}
.bindings-layout .brand{white-space:nowrap;font-size:18px}
#page-adv .audit-filter button{grid-column:1 / -1;justify-self:end}
@media (width >= 700px){#page-home .home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#releaseDetail .phones{grid-template-columns:repeat(3,minmax(0,1fr))}#releaseDetail .phone{width:100%;max-width:300px}}
@media (max-width:1099.99px){
 #app .reader-scroll{max-height:70vh;overflow:auto}.readers,.readers tbody,.readers tr,.readers td{display:block;width:100%;min-width:0;white-space:normal}.readers thead{display:none}.readers tr{background:var(--card);margin:0 0 10px;padding:8px;border:1px solid var(--sep)}.readers td:nth-child(n){position:static;text-align:left;overflow-wrap:anywhere}.readers td:before{content:attr(data-label);display:block;color:var(--text2);font-size:12px}.reader-value{min-width:0;max-width:100%}
}
@media (max-width:699.99px){
 #page-home .home-grid,#releaseDetail .phones{grid-template-columns:minmax(0,1fr)}
 .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%;min-width:0;white-space:normal}.data-table thead{display:none}.data-table tr{border:1px solid var(--sep);margin-bottom:8px}.data-table td{border:0;padding:5px 12px;overflow-wrap:anywhere}.data-table td:before{content:attr(data-label);display:block;color:var(--text2);font-size:12px}.data-table .data-number{text-align:left;white-space:normal}.data-table td:last-child{text-align:right}
}
/* 编辑仍由现有单元格和确认流程承载，表单居中显示。 */
.phone-form:not(:empty){position:fixed;z-index:19;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));padding:28px 34px;background:var(--card);border:1px solid var(--sep);border-radius:4px;box-shadow:0 0 0 100vmax var(--overlay),var(--shadow-md)}

/* 数据排版：名称单行省略并以现有 title 查看；正文摘要最多三行，详情完整显示。
   表格固定或最小列宽，数字、金额、日期右对齐且等宽；缺图和空列表使用现有占位。
   长列表分页或滚动、表头吸顶；长串可断行，按钮文字不换行。 */
.reader-pagination{justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}.reader-pagination #readerPager{margin-top:0}
.data-name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.data-summary{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
