/* --- Navigation Bar (topbar) 调整 --- */
.topbar .container {
    display: flex; /* 改用 Flexbox 布局 */
    justify-content: space-between; /* 将左右两端的内容推开 */
    align-items: center; /* 垂直居中对齐所有子元素（关键） */
    padding: 8px 18px;
    position: relative;
    /* 移除原始的 grid 布局相关的属性，简化布局 */
    /* 原始: grid-template-columns: auto 1fr auto; align-items: center; */
}

.topbar h2 {
    /* 网站名称 (Brand) 靠左，Flexbox 默认靠左，无需额外设置 */
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    color: #0f1724;
    /* 移除原始的 grid-column: 2; justify-self: center; line-height: 1; */
}

.topbar .brand {
    /* 包含 Logo 和 H2 的容器 */
    display: flex;
    align-items: center;
    gap: 10px;
    /* 确保其在左侧 */
}

.topbar .top-right {
    /* 登出按钮所在的容器 */
    display: flex;
    align-items: center;
    /* 移除原始的 grid-column: 3; justify-self: end; */
}

/* 移除原始的 grid 布局相关样式 */
/*
.topbar h2{grid-column:2;justify-self:center;line-height:1}
.topbar .container > div{display:flex;align-items:center}
.topbar .top-right{grid-column:3;justify-self:end}
*/

/* --- 完整的修改后代码 --- */
:root{ --bg:#f4f7fb; --card:#ffffff; --muted:#6b7280; --accent:#1976d2; --danger:#e55353; --soft:#eef3ff }
*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{margin:0;background:var(--bg);color:#0f1724}
.container{max-width:1100px;margin:20px auto;padding:0 18px} /* 调整了 margin */
.topbar{background:#ffffff;border-bottom:1px #eef2f6;box-shadow:0 2px 8px rgba(15,23,42,0.04);height: 80px;}
.topbar .container{
    /* 使用 Grid 保证三列（左 占位 / 中 标题 / 右 按钮）都能被可靠定位 */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center; /* 垂直居中 */
    padding: 25px 18px;
    position: relative;
}
.topbar h2{margin:0;font-size:26px;font-weight:800;color:#0f1724;grid-column:1;justify-self:start}
.topbar .brand{display:flex;align-items:center;gap:10px}
.topbar .brand .logo{width:36px;height:36px;border-radius:8px;background:var(--soft);display:inline-block}
.btn{border:0;padding:8px 12px;border-radius:10px;background:transparent;cursor:pointer;color:var(--accent);font-weight:600}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(25,118,210,0.12)}
.btn.danger{background:var(--danger);color:#fff}

/* compact icon button style (icon-only) */
.icon-btn{width:36px;height:36px;padding:6px;border-radius:8px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.icon-btn svg{width:16px;height:16px;display:block}
.icon-btn:hover{background:rgba(15,23,42,0.04);color:var(--accent)}
.icon-btn.danger{background:transparent;color:var(--danger)}
.icon-btn.danger:hover{background:rgba(229,83,83,0.08)}
.grid{display:flex;gap:18px;align-items:flex-start}
.panel{background:var(--card);border-radius:14px;padding:16px;box-shadow:0 8px 30px rgba(15,23,42,0.06)}
.panel-head h3{margin:0;font-size:16px}
.panel-body{margin-top:12px}
input, textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #e6e9ef;background:#fff;outline:none}
/* spacing for inputs inside the add form */
.add-form .panel-body > select,
.add-form .panel-body > input { margin-bottom:10px; }

/* make the select look like the inputs in the add form */
.add-form select { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:12px;border-radius:10px;border:1px solid #e6e9ef;background:#fff; width:100%; }

/* ensure summary and add-form panels visually match heights */
.panel.add-form, .panel.summary { display:flex; flex-direction:column; }
.panel.add-form .panel-body, .panel.summary .panel-body { flex:1; }
input:focus, textarea:focus{box-shadow:0 6px 18px rgba(25,118,210,0.06);border-color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:12px}
.login-card{width:420px;padding:22px;text-align:left;border-radius:12px}
.centered{display:flex;align-items:center;justify-content:center;height:100vh}
.card h1{margin:0 0 8px}
.toast{position:fixed;right:20px;bottom:20px;padding:10px 14px;border-radius:10px;background:#111;color:#fff;box-shadow:0 10px 30px rgba(2,6,23,0.35)}
.hidden{display:none}
.card-item{display:block;padding:12px;border-radius:12px;border:1px solid #f0f2f7;margin-bottom:12px;background:#fff}

/* NAV: center title and keep logout button at right, both vertically centered */
/* 原始代码已移除，使用 Flexbox 替代：
.topbar h2{grid-column:2;justify-self:center;line-height:1}
.topbar .container > div{display:flex;align-items:center}
.topbar .top-right{grid-column:3;justify-self:end}
*/
.topbar .top-right{display:flex;align-items:center;grid-column:3;justify-self:end} /* 右侧放到第 3 列并靠右 */

.topbar .btn#btnLogout{padding:6px 10px;border-radius:8px}
.topbar .btn#btnLogout:hover{background:rgba(25,118,210,0.06)}

/* Slightly reduce top spacing so add/summary feel closer to cards */
.container{max-width:1100px;margin:20px auto;padding:0 18px}
.card-item .meta{font-size:13px;color:var(--muted);margin-top:6px}
.card-actions button{margin-left:6px}
.summary{margin-top:0px;padding:16px}
.readonly-field{padding:10px;border-radius:8px;background:#f8fafc;border:1px solid #f0f2f7}
.modal{position:fixed;inset:0;background:rgba(10,12,20,0.45);display:flex;align-items:center;justify-content:center}
.modal-content{width:460px;background:#fff;padding:18px;border-radius:12px}
.modal{z-index:9999}
.modal .modal-content{z-index:10000}
.modal.hidden{display:none !important}
.modal .btn{cursor:pointer}
.muted small{display:block}

/* history page styles */
.history-list{display:flex;flex-direction:column;gap:8px}

/* history list as card/row style (three columns: time / note / prev values) */
.history-item{display:block}
.card-row{background:var(--card);border-radius:10px;padding:12px;box-shadow:0 6px 18px rgba(15,23,42,0.04);border:1px solid #f0f2f7}
.card-row{display:grid;grid-template-columns:220px 1fr 260px;gap:16px;align-items:center}
.card-row .hr-time{font-size:13px;color:#0f1724;font-weight:700}
.card-row .hr-note{color:var(--muted);font-size:13px}
.card-row .hr-prev{color:var(--muted);text-align:right;font-size:13px}
.card-row .hr-prev .sep{margin:0 6px;color:#cbd5e1}

@media (max-width:900px){
.card-row{grid-template-columns:1fr;grid-auto-rows:auto;gap:8px}
.card-row .hr-prev{text-align:left}
}

/* topbar buttons spacing */
.topbar .top-right .btn{margin-left:8px}

/* layout tweaks: left form narrower, right list wider */
.grid > .panel:first-child{flex:1 1 520px;max-width:760px}
.grid > .panel:nth-child(2){flex:0 0 180px}

/* summary style */
.summary.panel{background:linear-gradient(180deg, #fff, #fbfdff);border-radius:14px}
.summary .panel-body{display:flex;gap:24px;align-items:center}
.summary .panel-body div{min-width:120px}

/* inputs inside card list */
.card-name{font-weight:700;padding:6px;border:0;background:transparent;font-size:14px}
.inp-limit, .inp-available, .inp-note{padding:6px;border:1px solid #f0f2f7;border-radius:8px;font-size:13px}

.readonly-input{padding:6px 8px;border-radius:8px;background:#f8fafc;border:1px solid #f0f2f7;color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.readonly-input .lock{width:14px;height:14px;opacity:0.8}

.btn.small{padding:6px 8px;border-radius:8px;font-size:13px}

/* single-line compact layout: left name/issuer, middle values, right controls */
.card-item .card-head{display:flex;align-items:center;justify-content:space-between}
.card-item .card-head .title{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card-item .card-head .meta-block{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted);margin-left:8px}
.card-head .head-left{display:flex;align-items:center;gap:12px;min-width:0}
.card-head .meta-block{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted);margin-left:8px;text-align:left}
.card-head .meta-type, .card-head .meta-issuer{font-size:12px;color:var(--muted)}

.card-item .card-head .meta-type{font-size:12px;color:var(--muted)}
.card-item .card-head .meta-issuer{font-size:12px;color:var(--muted)}
.card-head .head-actions{display:flex;align-items:center}
.card-item .card-body{display:flex;gap:12px;align-items:flex-start;margin-top:8px}
.card-item .card-col{display:flex;flex-direction:column;gap:8px}
.card-item .field{display:flex;flex-direction:column}
.card-item .field label{font-size:12px;color:var(--muted);margin-bottom:6px}
.card-item .field input{padding:8px;border-radius:8px;border:1px solid #eef2f6;background:#fff;font-size:14px}
.card-item .actions{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;align-items:center;justify-content:flex-end}

/* Center the middle column (可用 / 已用) so the used badge aligns vertically with the available input */
.card-item .card-body > .card-col:nth-child(2){justify-content:center}
.card-item .card-body > .card-col:nth-child(2) .field{margin-top:0}
.card-item .card-body > .card-col:nth-child(2) .field label{margin-bottom:6px}
.card-item .actions .btn{display:inline-flex;width:auto;min-width:0;white-space:nowrap;padding:6px 10px}
.card-item .actions .btn.danger{margin-left:4px}

.card-item .left { display:flex;flex-direction:column;gap:6px;flex:1 }
.card-item .row { display:flex;gap:8px;align-items:center }
.card-item .small-muted { font-size:12px;color:var(--muted) }

/* used badge highlights the used amount */
.used-badge {
display: inline-flex; /* 保持其 inline-flex 行为 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
margin-left: 0;
padding: 0 20px;
border-radius: 999px;
background: #e53e3e;
color: #fff;
font-weight: 700;
font-size: 16px;
height: 30px;
line-height: 1.8;
min-width: 84px;
}
.used-badge.small{padding:4px 8px;font-size:12px;height:32px;min-width:64px}

/* repayment input small style */
.inp-repay{padding:8px;border-radius:8px;border:1px solid #eef2f7;width:120px}
@media (max-width:720px){ .inp-repay{width:100%;} }

/* small summary boxes */
.summary-box{background:var(--soft);padding:10px;border-radius:8px;min-width:120px}
.summary-box .big{font-size:16px;font-weight:700;margin-top:4px}

/* make summary panel take less horizontal space */
.panel.summary { flex: 0 0 220px; }

/* compact issuer/name readonly look */
.readonly-field{padding:6px;border-radius:8px;background:#f8fafc;border:1px solid #f0f2f7;display:inline-block}

/* cards area: two columns on desktop, one on narrow screens */
#cardsArea{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:900px){
    #cardsArea{grid-template-columns:1fr}
    .panel.add-form{flex:1 1 auto}
    .panel.summary{flex:1 1 auto}
}

/* tweak widths: make add form wider and summary narrower for better balance */
.panel.add-form{flex:0 0 520px}
.panel.summary{flex:0 0 180px}

/* Prevent horizontal overflow: allow flex/grid children to shrink, and clip any overflowing content */
.grid{flex-wrap:wrap}
.panel{max-width:100%;box-sizing:border-box;overflow:hidden}
#cardsArea{width:100%;box-sizing:border-box}
.card-item{max-width:100%;overflow:hidden;word-break:break-word}

/* In flex contexts inputs/columns must be allowed to shrink (avoid min-width:auto causing overflow) */
.card-item .card-body, .card-item .card-col, .card-item .field { min-width: 0 }
.card-item .field input, .card-item .field textarea { min-width: 0 }

/* Small screens: ensure panels stack cleanly and don't force horizontal scroll */
@media (max-width:720px){
  .grid{gap:12px}
  .panel.add-form{flex-basis:100%;max-width:100%}
  .panel.summary{flex-basis:100%;max-width:100%}
}

/* History table styles */
.history-table-wrap{overflow:auto;border-radius:10px}
.history-table{width:100%;border-collapse:collapse;background:var(--card);box-shadow:0 6px 18px rgba(15,23,42,0.04);border:1px solid #f0f2f7}
.history-table thead th{background:#fafcff;padding:12px 14px;text-align:center;font-weight:700;border-bottom:1px solid #eef2f7}
.history-table tbody td{padding:12px 14px;border-bottom:1px solid #f7f9fc;vertical-align:middle;color:#0f1724}
.history-table tbody tr:nth-child(even){background:#fff}
.history-table tbody tr:nth-child(odd){background:transparent}
.history-table .ht-time{color:var(--muted);font-weight:600;text-align:center}
.history-table .ht-note{color:var(--muted);text-align:center}
.history-table .ht-limit, .history-table .ht-used, .history-table .ht-avail{text-align:right;color:var(--muted);font-weight:700;text-align:center}

@media (max-width:760px){
    /* Make table responsive: stack cells and show labels */
    .history-table{border:0}
    .history-table thead{display:none}
    .history-table tbody tr{display:block;border-bottom:1px solid #eef2f7;margin-bottom:10px;padding:8px}
    .history-table tbody td{display:flex;padding:6px 8px;border:0}
    .history-table tbody td:before{content:attr(data-label);flex:0 0 90px;font-weight:700;color:var(--muted)}
    .history-table .ht-limit, .history-table .ht-used, .history-table .ht-avail{text-align:left}
}