/* Account and synchronization management only. */
:root { --ink:#203746; --muted:#718391; --line:#e2e9ee; --brand:#087f78; --bg:#f4f6f8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
[hidden] { display:none !important; }
button,input,select { font:inherit; }
button,a,input,select,summary { outline-offset:3px; }
button { border:1px solid #d1dce3; border-radius:8px; background:#fff; color:var(--ink); padding:9px 14px; cursor:pointer; white-space:nowrap; }
button:hover { background:#edf7f5; border-color:#84beb5; }
button:disabled { opacity:.55; cursor:default; }
.primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.primary:hover { background:#066d67; color:#fff; }
input,select { border:1px solid #d1dce3; border-radius:8px; padding:10px 12px; background:#fff; color:var(--ink); width:100%; min-width:0; }
input:focus,select:focus { border-color:var(--brand); }
input[type=checkbox] { width:17px; height:17px; accent-color:var(--brand); flex-shrink:0; }
label { display:flex; flex-direction:column; gap:6px; color:#607583; font-size:13px; }
.checkbox { flex-direction:row; align-items:center; gap:9px; color:var(--ink); }
h1,h2,h3,p { margin:0; }
h1 { font-size:25px; line-height:1.4; }
h2 { font-size:17px; }
h3 { font-size:14px; }
small,.muted { color:var(--muted); font-size:12px; }
.muted { margin-top:6px; }
.error { color:#b43e47; font-size:13px; }
.error:empty { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#workspace { display:flex; min-height:100vh; }
aside { width:216px; flex:0 0 216px; background:#123642; color:#d3e4e8; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.brand { display:flex; gap:11px; align-items:center; padding:25px 20px; color:#fff; font-size:21px; font-weight:600; text-decoration:none; }
.brand small { display:block; color:#a8c8ce; font-size:12px; letter-spacing:2px; }
.brandmark { width:42px; height:42px; border-radius:11px; background:#0a897e; color:#fff; display:inline-grid; place-items:center; font-size:23px; flex-shrink:0; }
.nav-caption { font-size:11px; color:#87a8b3; padding:18px 24px 7px; }
nav { padding:0 12px; }
nav button { display:block; width:100%; text-align:left; border:0; background:transparent; color:#c0d5db; margin:4px 0; padding:12px; font-size:13px; }
nav button.active,nav button:hover { background:#0b8279; color:#fff; }
.side-foot { margin-top:auto; padding:22px 20px; display:flex; flex-direction:column; gap:14px; font-size:11px; color:#87a8b3; }
.side-foot a { color:#d3e4e8; text-decoration:none; font-size:13px; }
.side-foot a:hover { color:#fff; }
main { min-width:0; flex:1; padding:0 30px 36px; max-width:1600px; }
header { display:flex; justify-content:space-between; align-items:center; padding:27px 0 24px; gap:16px; }
.eyebrow { color:var(--brand); font-size:11px; letter-spacing:1px; margin-bottom:4px; }
.header-actions,.actions { display:flex; align-items:center; gap:10px; }
.header-actions { font-size:12px; }
#notice { border:1px solid #b6dcd6; background:#eff9f6; padding:12px 16px; border-radius:9px; margin-bottom:16px; }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:18px; min-width:0; }
.heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.toolbar label { min-width:130px; }
.toolbar .search-field { flex:1; max-width:440px; min-width:200px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:9px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th { background:#f5f8fa; color:#687b89; font-size:12px; font-weight:600; white-space:nowrap; text-align:left; }
th,td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fafcfc; }
td small { display:block; margin-top:3px; }
td.scope { max-width:330px; }
.empty { text-align:center; padding:36px 18px; color:var(--muted); }
.tag { display:inline-block; font-size:12px; padding:3px 9px; border-radius:20px; background:#f1f3f5; color:#6f7c88; white-space:nowrap; }
.tag.good { background:#e8f5ee; color:#26754e; }
.tag.bad { background:#fff0ef; color:#b44848; }
.tag.pending { background:#fff4e0; color:#9b6c1c; }
summary { cursor:pointer; color:var(--ink); font-weight:600; }
.audit-details[open] .table-wrap { margin-top:14px; }
.audit-details { padding:17px 22px; }
.sync-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.data-item { border-radius:9px; background:#f6f9fa; padding:16px; }
.data-item span { display:block; color:var(--muted); font-size:12px; }
.data-item strong { display:block; font-size:18px; font-weight:600; margin-top:5px; overflow-wrap:anywhere; }
.data-item small { display:block; }
.data-details { margin-top:17px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:12px; line-height:1.8; color:var(--muted); margin:12px 0 0; }
.sync-controls { display:flex; align-items:end; flex-wrap:wrap; gap:18px; margin-top:22px; }
.sync-controls > label:first-child { min-width:240px; }
.sync-controls .checkbox { min-height:43px; }
.sync-controls .primary { margin-left:auto; }
.sync-help { margin-top:14px; }
.job-status { margin-top:18px; padding:12px 15px; background:#edf7f5; border-radius:8px; color:#076f67; }
#login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px,100%); padding:34px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 14px 50px #1236420b; display:flex; flex-direction:column; gap:18px; }
.login-card h1 { font-size:23px; }
.login-card .muted { margin:0; }
dialog { width:min(800px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--line); border-radius:15px; color:var(--ink); background:#fff; box-shadow:0 24px 90px #12364235; }
dialog::backdrop { background:#12364266; }
dialog form { display:flex; flex-direction:column; max-height:calc(100dvh - 42px); }
.dialog-heading,.dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; flex-shrink:0; }
.dialog-heading { border-bottom:1px solid var(--line); }
.dialog-footer { justify-content:flex-end; border-top:1px solid var(--line); background:#fbfcfd; }
.icon-button { width:36px; height:36px; padding:0; font-size:24px; line-height:1; }
.dialog-body { overflow:auto; padding:22px 24px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:14px; }
.role-note { padding:10px 12px; background:#f6f9fa; border-radius:8px; margin:14px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px; }
.all-stores { margin:14px 0; }
.permission-toolbar { margin-bottom:10px; gap:8px; }
.permission-toolbar .search-field { min-width:160px; }
.permission-toolbar button { font-size:12px; padding:8px 10px; }
.permission-stores { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; border:1px solid var(--line); border-radius:9px; padding:8px; max-height:240px; overflow:auto; }
.permission-stores label { flex-direction:row; align-items:center; gap:8px; border-radius:5px; padding:9px; color:var(--ink); font-size:12px; }
.permission-stores label:hover { background:#f1f8f6; }
.permission-stores small { display:block; font-size:11px; }
.permission-stores .empty { grid-column:1/-1; }
@media(max-width:1100px) { main { padding:0 20px 24px; } aside { width:200px; flex-basis:200px; } .sync-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { #workspace { display:block; } aside { position:static; width:100%; height:auto; } .brand { padding:15px 18px; } .nav-caption,.side-foot #modeLabel { display:none; } nav { display:flex; gap:6px; padding:0 12px 12px; } nav button { width:auto; flex:1; text-align:center; } .side-foot { padding:0 18px 14px; } main { padding:0 14px 24px; } header { align-items:flex-start; padding:20px 0; } h1 { font-size:21px; } .header-actions { flex-direction:column; align-items:flex-end; gap:6px; } .card { padding:16px; } .heading { align-items:flex-start; gap:10px; } .heading .actions { flex-wrap:wrap; justify-content:flex-end; } .toolbar .search-field { max-width:none; flex-basis:100%; } .sync-summary,.form-grid,.permission-stores { grid-template-columns:1fr; } .sync-controls { align-items:stretch; flex-direction:column; } .sync-controls .primary { margin-left:0; } .dialog-heading,.dialog-footer { padding:17px; } .dialog-body { padding:18px; } .permission-toolbar .search-field { flex-basis:100%; } }