:root { --bg:#f4f5f7; --panel:#fff; --line:#dde1e6; --text:#1c2430; --muted:#5f6b7a; --accent:#b8600f; --accent2:#f2e3d0; --ok:#1c7c3d; --bad:#b3261e; --warn:#8a6d00; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }   /* thang moi rule display cua #view-auth / #view-main (bai hoc [hidden] tu Memo web-local) */
body { margin:0; font: 15px/1.45 "Segoe UI", Tahoma, Arial, sans-serif; color:var(--text); background:var(--bg); }
button, input, select { font: inherit; }
button { cursor:pointer; }
.env { display:inline-block; background:var(--accent2); color:var(--accent); border:1px solid var(--accent); border-radius:4px; padding:0 6px; font-size:12px; font-weight:600; letter-spacing:.5px; vertical-align:middle; }
.muted { color:var(--muted); font-size:13px; }
.err { color:var(--bad); }
.ok { color:var(--ok); font-weight:600; } .bad { color:var(--bad); font-weight:600; } .warn { color:var(--warn); font-weight:600; }
/* auth */
#view-auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-box { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:28px 32px; width:min(460px, 100%); box-shadow:0 2px 12px rgba(0,0,0,.06); }
.auth-box h1 { font-size:20px; margin:0 0 6px; } .auth-box h2 { font-size:16px; margin:14px 0 8px; }
.auth-box label { display:block; margin:10px 0; font-size:13px; color:var(--muted); }
.auth-box input { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; font-size:15px; color:var(--text); }
.auth-box button[type=submit] { margin-top:12px; width:100%; padding:10px; background:var(--accent); color:#fff; border:0; border-radius:4px; font-weight:600; }
/* layout */
#view-main { display:grid; grid-template-columns: 240px 1fr; min-height:100vh; }
.sidebar { background:#26313f; color:#e8ecf1; padding:18px 14px; display:flex; flex-direction:column; gap:14px; }
.brand { font-weight:700; font-size:17px; line-height:1.3; }
.quick { display:flex; gap:6px; } .quick input { flex:1; min-width:0; padding:7px 8px; border:1px solid #3d4a5b; border-radius:4px; background:#1b2430; color:#fff; } .quick button { padding:7px 10px; border:0; border-radius:4px; background:var(--accent); color:#fff; }
nav { display:flex; flex-direction:column; gap:2px; } nav a { color:#cfd7e2; text-decoration:none; padding:9px 10px; border-radius:4px; } nav a.active, nav a:hover { background:#3a4759; color:#fff; }
.side-foot { margin-top:auto; font-size:13px; color:#aeb8c6; display:flex; justify-content:space-between; align-items:center; }
button.link { background:none; border:0; color:#ffd8a8; text-decoration:underline; padding:0; }
main { padding:20px 26px; min-width:0; }
.page-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; } .page-head h1 { font-size:22px; margin:0; }
.btn { display:inline-block; padding:7px 12px; border:1px solid var(--accent); background:#fff; color:var(--accent); border-radius:4px; text-decoration:none; font-weight:600; }
.state { min-height:20px; margin:6px 0; font-size:14px; }
.state.loading::before { content:"⏳ "; } .state.error { color:var(--bad); } .state.empty { color:var(--muted); }
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:12px; margin-bottom:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 14px; } .card h3 { margin:0 0 8px; font-size:15px; color:var(--accent); }
.kv { display:grid; grid-template-columns: max-content 1fr; gap:3px 12px; font-size:14px; } .kv dt { color:var(--muted); } .kv dd { margin:0; word-break:break-word; }
table { border-collapse:collapse; width:100%; background:var(--panel); font-size:14px; } th, td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; } th { background:#eef1f5; } tr.click { cursor:pointer; } tr.click:hover { background:#fff7ee; }
.tabs { display:flex; gap:4px; margin-bottom:8px; } .tab { padding:6px 12px; border:1px solid var(--line); background:#fff; border-radius:4px 4px 0 0; } .tab.active { background:var(--accent2); border-color:var(--accent); font-weight:600; }
.search { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:8px; } .search input, .search select { padding:7px 8px; border:1px solid var(--line); border-radius:4px; } .search input[name=q] { min-width:280px; } .search button { padding:7px 12px; border:0; border-radius:4px; background:var(--accent); color:#fff; font-weight:600; }
.pager { display:flex; gap:8px; align-items:center; margin:8px 0; font-size:14px; } .pager button { padding:4px 10px; border:1px solid var(--line); background:#fff; border-radius:4px; }
.detail { background:var(--panel); border:1px solid var(--accent); border-radius:8px; padding:14px 16px; margin-top:12px; } .detail h2 { margin:0 0 8px; font-size:18px; } .detail h3 { margin:12px 0 6px; font-size:15px; color:var(--accent); }
.logbox { background:#141a22; color:#d7dee8; padding:12px; border-radius:6px; font: 12.5px/1.5 Consolas, "Courier New", monospace; white-space:pre-wrap; word-break:break-all; max-height:70vh; overflow:auto; }
pre.small { background:#f7f8fa; border:1px solid var(--line); padding:8px; font-size:12.5px; white-space:pre-wrap; word-break:break-all; max-height:260px; overflow:auto; }
code { background:#f1f3f6; padding:1px 4px; border-radius:3px; }
@media (max-width: 800px) { #view-main { grid-template-columns:1fr; } .sidebar { flex-direction:row; flex-wrap:wrap; } nav { flex-direction:row; flex-wrap:wrap; } }
.pwcard { max-width:460px; margin-top:14px; } .pwin { display:block; width:100%; margin:4px 0 8px; padding:7px; border:1px solid var(--line); border-radius:4px; }
/* [P2] tui do / gui thu / lich su */
.p2box { margin-top:14px; border-top:2px solid var(--accent2); padding-top:10px; } .p2box h4 { margin:12px 0 6px; font-size:14px; color:var(--accent); }
.p2body table { font-size:13.5px; } .p2body td, .p2body th { padding:4px 6px; }
.compose .recipient { font-weight:700; font-size:16px; background:var(--accent2); border:1px solid var(--accent); border-radius:6px; padding:8px 12px; margin:8px 0; }
.compose .lines { border:1px dashed var(--line); border-radius:6px; padding:6px 10px; margin-bottom:8px; } .compose .line { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:4px 0; border-bottom:1px solid var(--line); }
.compose .line .lname { flex:1 1 220px; font-weight:600; } .compose .cnt { width:70px; padding:4px; border:1px solid var(--line); border-radius:4px; }
.pickres { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; } .pickres .pick { padding:5px 9px; border:1px solid var(--accent); background:#fff; color:var(--accent); border-radius:4px; font-size:13px; }
.mailfields { display:grid; grid-template-columns: max-content 1fr; gap:6px 10px; align-items:center; margin:8px 0; } .mailfields input, .mailfields textarea { width:100%; padding:7px 8px; border:1px solid var(--line); border-radius:4px; font: inherit; } .mailfields label { color:var(--muted); font-size:13px; }
.actions { margin:10px 0; display:flex; gap:8px; flex-wrap:wrap; } .btn.danger { background:var(--bad); color:#fff; border-color:var(--bad); }
.pv { border-color:var(--accent); } .bad-border { border-color:var(--bad); } .card.result { margin-top:10px; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12.5px; font-weight:600; background:#eef1f5; color:var(--text); }
.b-created { background:#e3f4e8; color:var(--ok); } .b-partial, .b-pending, .b-unknown, .b-created_unrecorded { background:#fff3cd; color:var(--warn); } .b-failed { background:#fde2e0; color:var(--bad); }
@media (max-width: 800px) { .mailfields { grid-template-columns:1fr; } .kv { grid-template-columns:1fr; } main { padding:12px; } table { display:block; overflow-x:auto; } .search input[name=q] { min-width:0; flex:1 1 200px; } }

/* [P2 R6.1] khoi chi tiet instance trong tui do */
.inst-toggle{font-size:.85em;margin-left:.3em}
tr.inst-row>td{background:#f6f8fa;padding:.4em .6em}
:root:not([data-theme="light"]) tr.inst-row>td{background:#1b2430}
:root[data-theme="dark"] tr.inst-row>td{background:#1b2430}
.inst-detail{font-size:.92em}
.inst-detail table{margin:.3em 0}
.inst-detail .kv{margin:.2em 0}