*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#162033;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.container{max-width:1050px;margin:0 auto;padding:44px 20px 70px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.eyebrow{color:#7b879d;font-size:12px;font-weight:800;letter-spacing:.12em;margin:0 0 4px}h1{margin:0;font-size:32px}h2{font-size:17px;margin:0 0 19px}input,select,button{font:inherit}input,select{border:1px solid #d8deea;border-radius:9px;padding:10px 11px;width:100%;background:#fff}header input{width:auto}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}.summary article,.card{background:#fff;border:1px solid #e7eaf0;border-radius:15px;box-shadow:0 3px 10px #17254a0a}.summary article{padding:21px}.summary span{color:#758198;font-size:14px}.summary strong{display:block;font-size:25px;margin-top:8px}.income{color:#18794e}.expense{color:#c93c4a}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-bottom:16px}.card{padding:23px}.entry-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.entry-form label{font-size:13px;font-weight:700;color:#526078;display:grid;gap:6px}.entry-form label:nth-of-type(5),.entry-form button{grid-column:span 2}button{cursor:pointer;border:0;border-radius:9px;padding:11px 14px;background:#315ee8;color:white;font-weight:750}.category-list{list-style:none;margin:0;padding:0}.category-list li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf0f5}.category-list li:last-child{border:0}.history small{color:#8a94a7;font-weight:500}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:13px 9px;border-bottom:1px solid #edf0f5;font-size:14px}th{font-size:12px;color:#7c879a}.amount{text-align:right;font-weight:750}.badge{font-size:12px;padding:4px 7px;border-radius:99px}.badge.income{background:#e5f6ec}.badge.expense{background:#fff0f1}.delete{background:#f1f3f7;color:#5d687b;padding:6px 9px;font-size:12px}.empty{color:#8490a4;margin:0}.flash{padding:11px 14px;border-radius:9px}.flash.success{background:#e5f6ec;color:#18794e}.flash.error{background:#fff0f1;color:#a42d39}@media(max-width:650px){.container{padding-top:28px}header{align-items:flex-start;gap:16px}.summary,.grid{grid-template-columns:1fr}.summary strong{font-size:22px}.entry-form{grid-template-columns:1fr}.entry-form label:nth-of-type(5),.entry-form button{grid-column:span 1}}
.fixed-expenses{margin-bottom:16px}.hint{color:#758198;font-size:13px;margin:-8px 0 16px}.fixed-form{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.fixed-form label{font-size:13px;font-weight:700;color:#526078;display:grid;gap:6px}.fixed-form label:nth-of-type(1),.fixed-form label:nth-of-type(2),.fixed-form label:nth-of-type(3),.fixed-form label:nth-of-type(4){grid-column:span 2}.fixed-form label:nth-of-type(5){grid-column:span 3}.fixed-form button{grid-column:span 1}.fixed-list{margin-top:24px}.fixed-list h3{font-size:14px;margin:0 0 9px}.fixed-list small{display:block;margin-top:4px;color:#7c879a;font-weight:400}.fixed-list li>span:last-child{display:flex;align-items:center;gap:10px}.inline-form{display:inline}.inline-form .delete{margin-left:8px}@media(max-width:650px){.fixed-form{grid-template-columns:1fr}.fixed-form label:nth-of-type(1),.fixed-form label:nth-of-type(2),.fixed-form label:nth-of-type(3),.fixed-form label:nth-of-type(4),.fixed-form label:nth-of-type(5),.fixed-form button{grid-column:span 1}}

.fixed-form label:nth-of-type(5),.fixed-form button{grid-column:span 2}.fixed-form button{background:#7c3aed}@media(max-width:650px){.fixed-form label:nth-of-type(5),.fixed-form button{grid-column:span 1}}
@media(min-width:651px){.category-card{grid-row:span 2}.fixed-expenses{margin-bottom:0}.fixed-form{grid-template-columns:repeat(2,1fr)}.fixed-form label:nth-of-type(1),.fixed-form label:nth-of-type(2),.fixed-form label:nth-of-type(3),.fixed-form label:nth-of-type(4){grid-column:span 1}.fixed-form label:nth-of-type(5),.fixed-form button{grid-column:span 2}}

/* index */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logout {
    background: #555;
    color: white;
    border: none;
    padding: 10px 11px;
    border-radius: 6px;
    cursor: pointer;
    font-size: inherit;
    width: auto;
    height: auto;
}

.logout:hover {
  opacity: 0.8;
}

/* Login */

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}


.login-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}


.login-card h1 {
    margin: 8px 0;
    font-size: 32px;
}


.login-desc {
    color: #777;
    margin-bottom: 30px;
}


.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.login-form input {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px;
}


.login-form button {
    padding: 13px;
    border: none;
    border-radius: 8px;
    background: #222;
    color: white;
    font-size: 16px;
    cursor: pointer;
}


.login-form button:hover {
    opacity: 0.85;
}
/* Mobile-first layout refinements */
@media(max-width:650px){
  .container{padding:20px 12px 42px} header{align-items:flex-start;gap:8px;margin-bottom:10px} .eyebrow{font-size:10px;letter-spacing:.1em} h1{font-size:23px} h2{font-size:16px;margin-bottom:15px} .header-actions{gap:7px} header input{width:118px;padding:8px;font-size:13px} .logout{padding:8px 9px;font-size:12px;line-height:1.2;border-radius:7px} .summary,.grid{grid-template-columns:1fr;gap:10px} .summary{margin-bottom:10px} .summary article{padding:15px 16px} .summary span{font-size:12px} .summary strong{font-size:20px;margin-top:4px} .card{padding:17px 15px;border-radius:12px} .history{margin-bottom:10px} input,select{padding:10px;font-size:14px} button{padding:10px 12px;font-size:14px} .entry-form{grid-template-columns:1fr;gap:11px} .entry-form label:nth-of-type(5),.entry-form button{grid-column:span 1} .table-wrap{overflow:visible} table{min-width:0;width:100%} thead{display:none} tbody,tr,td{display:block;width:100%} tr{position:relative;padding:10px 0;border-bottom:1px solid #edf0f5} tr:last-child{border-bottom:0;padding-bottom:0} td{border:0;padding:3px 0;font-size:13px} td[data-label]::before{content:attr(data-label);display:inline-block;width:58px;color:#7c879a;font-size:11px;font-weight:700} td.amount{text-align:left;font-size:15px} .history-action{position:absolute;right:0;top:8px;width:auto} .history-action .delete{padding:5px 8px;font-size:11px}
}
.profile-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d8deea;border-radius:8px;padding:9px 10px;color:#45536b;background:#fff;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}.profile-help{font-size:11px;color:#7c879a;font-weight:400}.settings-page{max-width:720px}.profile-form{display:grid;grid-template-columns:1fr 1fr auto;gap:13px;align-items:end}.profile-form label{font-size:13px;font-weight:700;color:#526078;display:grid;gap:6px}.profile-list{list-style:none;margin:0;padding:0}.profile-list li{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf0f5}.profile-list li:last-child{border-bottom:0}.profile-list small{display:block;color:#7c879a;margin-top:3px}@media(max-width:650px){.profile-link{padding:8px;font-size:11px}.profile-form{grid-template-columns:1fr}.profile-form button{width:100%}}@media(max-width:650px){.header-actions{flex:1;min-width:0;flex-wrap:wrap;justify-content:flex-end;margin-top:10px;}.header-actions form{flex:0 0 auto}}
/* Header controls share one visual size */
.header-actions > form{display:flex}
.header-actions input,
.header-actions .profile-link,
.header-actions .logout{height:38px;padding:0 12px;border-radius:8px;font-size:13px;line-height:1.2}
.header-actions .logout{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:650px){.header-actions input,.header-actions .profile-link,.header-actions .logout{height:34px;padding:0 9px;font-size:12px}.header-actions input{width:118px}}
.brand-title{display:flex;align-items:center;gap:9px}.brand-logo{width:34px;height:34px;object-fit:contain;flex:none}@media(max-width:650px){.brand-logo{width:29px;height:29px}.brand-title{gap:7px}}.brand-title{font-family:Gabriola,"Segoe Print","Segoe Script",cursive;margin-top:10px;font-size:30px;font-weight:600;letter-spacing:-1px;line-height:.8}@media(max-width:650px){.brand-title{font-size:34px}}
/* Keep the S23 Ultra header on one row. */
@media (max-width:650px){
  header{align-items:center;gap:6px}
  .brand-title{margin-top:0;font-size:25px;letter-spacing:-.5px;gap:4px;white-space:nowrap}
  .brand-logo{width:24px;height:24px}
  .header-actions{flex:1;min-width:0;flex-wrap:nowrap;justify-content:flex-end;gap:4px;margin-top:0}
  .header-actions input,.header-actions .profile-link,.header-actions .logout{height:30px;padding:0 6px;font-size:10px;border-radius:7px;white-space:nowrap}
  .header-actions input{width:102px}
}
/* Mobile typography and spacing: optimized for Galaxy S23 Ultra and similar screens. */
@media (max-width: 650px) {
  .container { padding: 16px 12px 34px; }
  header { margin-bottom: 14px; }
  .eyebrow { margin-bottom: 2px; font-size: 9px; }

  .summary { gap: 8px; margin-bottom: 8px; }
  .summary article { padding: 13px 14px; border-radius: 12px; }
  .summary span { font-size: 11px; }
  .summary strong { font-size: 19px; line-height: 1.25; }

  .card { padding: 15px 14px; border-radius: 12px; }
  h2 { margin-bottom: 13px; font-size: 15px; line-height: 1.3; }
  .history h2 small { font-size: 11px; }

  .entry-form, .fixed-form, .profile-form { gap: 10px; }
  .entry-form label, .fixed-form label, .profile-form label { gap: 5px; font-size: 12px; }
  input, select { min-height: 38px; padding: 8px 10px; font-size: 13px; border-radius: 8px; }
  button { min-height: 38px; padding: 9px 11px; font-size: 13px; border-radius: 8px; }
  .entry-form button, .fixed-form button, .profile-form button { min-height: 42px; }

  .hint { margin: -4px 0 12px; font-size: 12px; line-height: 1.45; }
  .flash { margin: 0 0 8px; padding: 9px 11px; font-size: 12px; }

  .category-list li, .profile-list li { padding: 10px 0; font-size: 13px; }
  .category-list li b { font-size: 13px; }
  .profile-list small, .fixed-list small { font-size: 11px; line-height: 1.35; }
  .fixed-list { margin-top: 18px; }
  .fixed-list h3 { font-size: 13px; }

  .history tr { padding: 9px 0; }
  .history td { padding: 2px 0; font-size: 12px; }
  .history td[data-label]::before { width: 54px; font-size: 10px; }
  .history td.amount { font-size: 14px; }
  .badge { padding: 3px 6px; font-size: 10px; }
  .delete { padding: 5px 7px; font-size: 10px; }
}
/* Header controls must ignore the general mobile input/button minimum height. */
@media (max-width: 650px) {
  .header-actions input,
  .header-actions .profile-link,
  .header-actions .logout {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
  }
}
/* Keep transaction history type at the same readable scale as the mobile forms. */
@media (max-width: 650px) {
  .history td { font-size: 13px; line-height: 1.45; }
  .history td[data-label]::before { width: 58px; font-size: 11px; }
  .history td.amount { font-size: 15px; }
  .history .badge { font-size: 11px; }
}
@media (max-width: 650px) {
  .history td[data-label]::before { font-size: 13px; }
}
/* Self-hosted so the MoneyLog lettering renders identically on Android and desktop. */
@font-face {
  font-family: "MoneyLog Hand";
  src: url("fonts/NanumPenScript-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.brand-title { font-family: "MoneyLog Hand", cursive; font-weight: 400; }
/* Flowing English script, matching the original Gabriola-like MoneyLog treatment. */
@font-face {
  font-family: "MoneyLog Script";
  src: url("fonts/Allura-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.brand-title { font-family: "MoneyLog Script", cursive; font-weight: 400; }
/* Bold handwritten wordmark: clear at compact mobile header sizes. */
@font-face {
  font-family: "MoneyLog Script";
  src: url("fonts/DancingScript-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.brand-title { font-family: "MoneyLog Script", cursive; font-weight: 700; letter-spacing: 0; }
/* Give the descriptor and wordmark deliberate hierarchy instead of a crowded mix. */
.eyebrow {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #397465;
  font-weight: 800;
  letter-spacing: .16em;
}
.brand-title { line-height: 1; }
@media (max-width: 650px) {
  .eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: .15em; }
  .brand-title { gap: 7px; letter-spacing: .2px; }
  .brand-logo { width: 26px; height: 26px; }
}
/* Compact edit/delete controls for each editable record. */
.row-actions, .form-actions { display: inline-flex; align-items: center; gap: 7px; }
.row-actions form { margin: 0; }
.edit-link { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 9px; border: 1px solid #d8deea; border-radius: 7px; color: #45536b; background: #fff; text-decoration: none; font-size: 12px; font-weight: 700; }
.form-actions { grid-column: 1 / -1; justify-content: flex-end; }
.form-actions .profile-link { min-height: 42px; }
@media (max-width: 650px) {
  .row-actions { gap: 5px; }
  .edit-link { min-height: 28px; padding: 4px 7px; font-size: 11px; }
  .form-actions { display: flex; }
  .form-actions .profile-link { min-height: 42px; }
}
/* Search and statistics navigation. */
.quick-nav { display: flex; gap: 8px; margin: -10px 0 16px; }
.quick-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 11px; border: 1px solid #d8deea; border-radius: 8px; color: #526078; background: #fff; text-decoration: none; font-size: 13px; font-weight: 700; }
.quick-nav a[aria-current="page"] { color: #fff; border-color: #315ee8; background: #315ee8; }
.search-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.search-form label, .month-picker label { display: grid; gap: 6px; color: #526078; font-size: 13px; font-weight: 700; }
.search-form label:first-child { grid-column: span 3; }
.month-picker { margin: 0 0 12px; }
.month-picker input { width: 165px; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list li { margin-top: 14px; }
.stat-list li:first-child { margin-top: 0; }
.stat-list li > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.stat-list b { white-space: nowrap; }
.stat-list i { display: block; height: 8px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e8edf7; }
.stat-list i::after { content: ""; display: block; width: var(--ratio); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38a989, #315ee8); }
@media (max-width: 650px) {
  .quick-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 0 12px; }
  .quick-nav a { min-height: 38px; font-size: 12px; }
  .search-form { grid-template-columns: 1fr 1fr; gap: 10px; }
  .search-form label:first-child, .search-form .form-actions { grid-column: span 2; }
  .month-picker input { width: 100%; }
  .stats-grid { grid-template-columns: 1fr; gap: 10px; }
  .stat-list li > div { font-size: 13px; }
}
/* Compact global navigation: secondary pages no longer need oversized shortcut rows. */
.settings-page h1 { margin: 0; font-size: 28px; line-height: 1.15; }
.menu { position: relative; flex: 0 0 auto; }
.menu summary { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; list-style: none; border: 1px solid #d8deea; border-radius: 8px; color: #45536b; background: #fff; cursor: pointer; font-size: 20px; line-height: 1; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: #315ee8; color: #315ee8; }
.menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: grid; min-width: 172px; overflow: hidden; border: 1px solid #dfe5ef; border-radius: 10px; box-shadow: 0 12px 28px #17254a22; background: #fff; }
.menu-panel a, .menu-panel button { display: flex; width: 100%; min-height: 40px; padding: 10px 13px; align-items: center; border: 0; border-radius: 0; color: #45536b; background: #fff; font-size: 13px; font-weight: 700; text-align: left; text-decoration: none; }
.menu-panel a:hover, .menu-panel button:hover { background: #f3f6fb; }
.menu-panel form { margin: 0; border-top: 1px solid #edf0f5; }
.menu-panel button { color: #b53b49; }
@media (max-width: 650px) {
  .settings-page h1 { font-size: 22px; }
  .menu summary { width: 30px; height: 30px; border-radius: 7px; font-size: 17px; }
  .menu-panel { min-width: 160px; }
  .menu-panel a, .menu-panel button { min-height: 38px; font-size: 12px; }
}
/* With navigation collapsed into the menu, the month selector and menu trigger can use comfortable touch targets again. */
@media (max-width: 650px) {
  .header-actions input {
    width: 126px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 9px;
    font-size: 12px;
  }
  .menu summary {
    width: 36px;
    height: 36px;
    min-height: 36px;
    font-size: 19px;
  }
}
/* Shared brand header and a separate, consistent title for each secondary page. */
a.brand-title { color: inherit; text-decoration: none; }
.page-heading { margin: 0 0 16px; }
.page-heading h1 { margin: 0; font-size: 28px; line-height: 1.15; }
@media (max-width: 650px) {
  .page-heading { margin: 0 0 13px; }
  .page-heading h1 { font-size: 22px; }
}
/* Short, finance-app style navigation labels. */
.menu-panel a { letter-spacing: -.01em; }
/* Refined banking-app menu panel. */
.menu-panel {
  min-width: 208px;
  padding: 8px;
  border: 1px solid #e0e7e6;
  border-radius: 14px;
  box-shadow: 0 16px 36px #17254a26;
  background: linear-gradient(145deg, #ffffff 0%, #f6fbfa 100%);
}
.menu-panel::before {
  content: "QUICK MENU";
  padding: 4px 7px 7px;
  color: #80918e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}
.menu-panel a,
.menu-panel button {
  min-height: 42px;
  padding: 10px 11px;
  border-radius: 9px;
  gap: 10px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.menu-panel a::before {
  content: "";
  width: 3px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: #3ca78d;
}
.menu-panel a:nth-of-type(2)::before { background: #4c72d7; }
.menu-panel a:nth-of-type(3)::before { background: #8b63c7; }
.menu-panel a:nth-of-type(4)::before { background: #d79a4c; }
.menu-panel a:hover { color: #1d6e5c; background: #e9f6f1; transform: translateX(2px); }
.menu-panel form { margin: 5px 0 0; padding-top: 5px; border-top: 1px solid #e4ece9; }
.menu-panel button { justify-content: center; color: #b34d58; background: #fff4f5; text-align: center; }
.menu-panel button:hover { color: #a23541; background: #ffe9eb; }
@media (max-width: 650px) {
  .menu-panel { min-width: 196px; padding: 7px; border-radius: 12px; }
  .menu-panel a, .menu-panel button { min-height: 40px; font-size: 12px; }
}
/* Edit and delete actions share exactly the same control geometry. */
.row-actions .delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 30px;
  max-height: 30px;
  padding: 5px 9px;
  border: 1px solid #f0cbd0;
  border-radius: 7px;
  color: #b53b49;
  background: #fff5f6;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.row-actions .delete:hover { color: #9f2f3c; background: #ffe9eb; }
@media (max-width: 650px) {
  .row-actions .delete {
    min-height: 28px;
    max-height: 28px;
    padding: 4px 7px;
    font-size: 11px;
  }
}

/* Card-style page identity for each detailed screen. */
.page-heading {
  position: relative;
  overflow: hidden;
  margin: 0 0 16px;
  padding: 15px 16px;
  border: 1px solid #e3e9ef;
  border-radius: 14px;
  box-shadow: 0 3px 10px #17254a0a;
  background: linear-gradient(135deg, #ffffff 0%, #f6fbfa 100%);
}
.page-heading::after { display: none; /* decorative circle removed */
  content: "";
  position: absolute;
  top: -34px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #dff4eb;
}
.page-heading > div { position: relative; z-index: 1; }
.page-heading span { display: block; margin-bottom: 3px; color: #397465; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.page-heading h1 { margin: 0; font-size: 23px; line-height: 1.2; }
.page-heading p { margin: 5px 0 0; color: #708094; font-size: 12px; line-height: 1.45; }
.page-heading-search { background: linear-gradient(135deg, #fff 0%, #f4f8ff 100%); }
.page-heading-search::after { background: #e0ebff; }
.page-heading-search span { color: #456bc3; }
.page-heading-statistics { background: linear-gradient(135deg, #fff 0%, #faf5ff 100%); }
.page-heading-statistics::after { background: #efe0ff; }
.page-heading-statistics span { color: #7d56b4; }
.page-heading-payment { background: linear-gradient(135deg, #fff 0%, #fff8ef 100%); }
.page-heading-payment::after { background: #ffe8c8; }
.page-heading-payment span { color: #a96b23; }
@media (max-width: 650px) {
  .page-heading { margin-bottom: 13px; padding: 14px; border-radius: 12px; }
  .page-heading h1 { font-size: 20px; }
  .page-heading p { font-size: 11px; }
}
/* Separate the shared brand header from the page identity card. */
.page-heading { margin-top: 8px; }
@media (max-width: 650px) {
  .page-heading { margin-top: 10px; }
}
.page-heading-entry { background: linear-gradient(135deg, #fff 0%, #eefaf6 100%); }
.page-heading-entry span { color: #237d68; }
.entry-grid { align-items: start; }
.dashboard-category { max-width: 520px; }
@media (max-width: 650px) { .dashboard-category { max-width: none; } }
.page-heading-security { background: linear-gradient(135deg, #fff 0%, #f2f5ff 100%); }
.page-heading-security span { color: #506ac4; }
.toggle-label { display: flex !important; align-items: center; gap: 8px; }
.toggle-label input { width: auto; min-height: auto; }
.security-form, .security-disable { display: grid; gap: 12px; max-width: 440px; }
.security-form label, .security-disable label { display: grid; gap: 6px; color: #526078; font-size: 13px; font-weight: 700; }
.security-disable { margin-top: 24px; padding-top: 20px; border-top: 1px solid #edf0f5; }
.security-disable .delete { justify-self: start; min-height: 40px; border: 1px solid #f0cbd0; background: #fff5f6; color: #b53b49; }
/* Unified, restrained action controls for the transaction history screen. */
.search-form .form-actions { gap: 8px; }
.search-form .form-actions .profile-link,
.search-form .form-actions button,
.search-results .row-actions .edit-link,
.search-results .row-actions .delete {
  box-sizing: border-box;
  min-height: 38px;
  max-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
}
.search-form .form-actions .profile-link { color: #56677f; background: #fff; border-color: #d8e0eb; }
.search-form .form-actions button { background: #315ee8; }
.search-results .row-actions .edit-link { color: #287462; border-color: #bcded3; background: #eff9f5; }
.search-results .row-actions .delete { color: #b53b49; border-color: #f0cbd0; background: #fff5f6; }
@media (max-width: 650px) {
  .search-form .form-actions .profile-link,
  .search-form .form-actions button,
  .search-results .row-actions .edit-link,
  .search-results .row-actions .delete {
    min-height: 34px;
    max-height: 34px;
    padding: 0 10px;
    font-size: 11px;
  }
}
/* Restore comfortable rhythm between cards without making the mobile layout sparse. */
.history { margin-bottom: 16px; }
.settings-page > .card + .card { margin-top: 16px; }
@media (max-width: 650px) {
  .summary { margin-bottom: 14px; }
  .history { margin-bottom: 14px; }
  .grid, .stats-grid, .entry-grid { gap: 14px; }
  .settings-page > .card + .card { margin-top: 14px; }
}