body[data-ui-page="taikhoan"] [hidden] { display: none !important; }
.account-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.account-header h1 { margin-bottom:8px !important; }
.account-header p, .account-hint { color:var(--ui-muted); font-size:14px; line-height:1.6; }
.account-header p { margin:0; }
.account-header .add-btn { flex-shrink:0; }
.account-header .ui-page-header { margin-bottom:0 !important; }
.account-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0; }
.account-stats > div { border:1px solid var(--ui-line); border-radius:14px; background:white; padding:18px; }
.account-stats span { display:block; color:var(--ui-muted); font-size:13px; }
.account-stats strong { display:block; font-size:28px; margin-top:8px; color:var(--ui-ink); }
.account-tabs { display:flex; gap:8px; border-bottom:1px solid var(--ui-line); padding-bottom:12px; margin-bottom:18px; }
.account-tabs button { display:flex; align-items:center; gap:8px; margin:0; padding:10px 14px; background:white !important; color:var(--ui-muted) !important; border:1px solid var(--ui-line); border-radius:10px; box-shadow:none; }
.account-tabs button[aria-selected="true"] { background:var(--ui-red) !important; color:white !important; border-color:var(--ui-red); }
.account-tabs span { padding:1px 7px; border-radius:6px; background:#00000010; font-size:12px; }
.account-toolbar { display:flex; align-items:center; gap:12px; }
.account-toolbar .search-bar { flex:1; margin:0 !important; }
.account-toolbar input { width:100%; }
.account-danger { background:#fff0ef !important; color:var(--ui-red) !important; border:1px solid #e8b9be !important; }
.account-hint { margin:10px 0 16px; }
.account-notice { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid #ccd9c3; background:#f1f7ec; color:#385225; padding:12px 16px; border-radius:10px; margin-bottom:16px; }
.account-notice[data-error="true"], #formError, #confirmError { color:var(--ui-red); }
.account-notice[data-error="true"] { background:#fff0ef; border-color:#e8b9be; }
.account-notice button { margin:0; background:white !important; color:var(--ui-red) !important; border:1px solid var(--ui-line); }
.account-actions { display:flex; gap:8px; flex-wrap:wrap; }
.account-actions button { padding:8px 12px !important; min-height:40px; margin:0; font-size:13px; box-shadow:none !important; border:1px solid var(--ui-line); background:var(--ui-gold-soft) !important; color:#79500d !important; white-space:nowrap; }
.account-name { font-weight:650; color:var(--ui-ink); }
.account-count { display:inline-block; border-radius:7px; padding:3px 10px; background:var(--ui-gold-soft); color:#79500d; font-weight:650; }
.account-note { white-space:pre-wrap; overflow-wrap:anywhere; }
.account-sort { display:flex; align-items:center; gap:12px; margin:16px 0; font-size:14px; }
.account-sort label { color:var(--ui-muted); flex-shrink:0; }
.account-sort select { width:auto; max-width:100%; margin:0; }
.account-list-heading, .account-summary { display:grid; grid-template-columns:minmax(0,1fr) 112px 20px; align-items:center; gap:12px; }
.account-list-heading { padding:10px 16px; font-size:13px; font-weight:650; color:var(--ui-muted); }
.account-list-heading > span:nth-child(2) { text-align:center; }
.account-list { border:1px solid var(--ui-line); border-radius:14px; background:white; overflow:hidden; }
.account-list:empty { display:none; }
.account-item { border-bottom:1px solid var(--ui-line); }
.account-item:last-child { border-bottom:0; }
.account-item:not([open]) > .account-details { display:none; }
.account-summary { padding:12px 16px; min-height:54px; cursor:pointer; list-style:none; font-size:14px; }
.account-summary::-webkit-details-marker { display:none; }
.account-summary:hover, .account-item[open] > .account-summary { background:var(--ui-gold-soft); }
.account-summary:focus-visible { outline:2px solid var(--ui-red); outline-offset:-3px; }
.account-summary .account-name { overflow-wrap:anywhere; }
.account-summary .account-count { justify-self:center; min-width:32px; text-align:center; }
.account-chevron { color:var(--ui-muted); font-size:20px; text-align:center; transition:transform .15s; }
.account-item[open] > .account-summary .account-chevron { transform:rotate(180deg); }
.account-details { padding:4px 16px 16px; background:#fcfbf9; border-top:1px solid var(--ui-line); }
.account-details dl { margin:0 0 12px; }
.account-details dl > div { display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; padding:10px 0; border-bottom:1px solid var(--ui-line); font-size:14px; line-height:1.5; }
.account-details dt { color:var(--ui-muted); font-weight:600; }
.account-details dd { margin:0; overflow-wrap:anywhere; }
.account-order-codes { display:flex; flex-wrap:wrap; gap:8px; }
.account-order-codes details { max-width:100%; }
.account-order-codes summary { cursor:pointer; color:var(--ui-red); font-weight:600; }
.account-order-codes details > span { display:block; padding:8px; margin-top:6px; background:white; border:1px solid var(--ui-line); border-radius:6px; }
.account-empty { padding:28px 16px; border:1px dashed var(--ui-line); border-radius:14px; text-align:center; color:var(--ui-muted); font-size:14px; }
#confirmMessage { line-height:1.7; overflow-wrap:anywhere; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:768px) {
    .account-header { align-items:stretch; flex-direction:column; gap:14px; }
    .account-stats { gap:8px; margin:18px 0; }
    .account-stats > div { padding:12px 10px; }
    .account-stats strong { font-size:24px; }
    .account-stats span { min-height:36px; font-size:12px; }
    .account-tabs button { flex:1; justify-content:center; padding:10px 8px; font-size:13px; }
    .account-toolbar { align-items:stretch; flex-direction:column; }
    .account-list-heading, .account-summary { grid-template-columns:minmax(0,1fr) 88px 16px; gap:8px; }
    .account-summary { padding:10px 12px; }
    .account-list-heading { padding:10px 12px; }
    .account-details { padding:0 12px 12px; }
    .account-details dl > div { grid-template-columns:92px minmax(0,1fr); gap:10px; }
    .account-sort select { min-width:0; width:100%; }
    .account-actions { width:100%; }
    .account-actions button { flex:1; min-height:44px; }
}