*{box-sizing:border-box}body{margin:0;background:#f4f5f5;color:#102b43;font-family:Arial,sans-serif}.header{height:280px;background:url("assets/header-reference.png") center/cover no-repeat}.shell{display:grid;grid-template-columns:190px 1fr;min-height:680px}aside{background:linear-gradient(#092840,#123d5e);padding:18px 12px}aside button{display:block;width:100%;border:0;background:transparent;color:white;padding:18px 12px;text-align:left;font-size:17px;border-radius:8px}aside button:hover{background:#ffffff18;color:#f4d43f}main{padding:20px 28px}.view{display:none}.view.active{display:block}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.tile{height:280px;border:0;border-radius:12px;background-size:cover;background-position:center;overflow:hidden;padding:0;text-align:left;color:#fff;box-shadow:0 3px 10px #0002}.tile>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:25px;background:linear-gradient(90deg,#061b2bd9,#061b2b33)}.tile h2{font-size:31px;margin:0 0 6px}.tile p{font-size:18px;max-width:360px;margin:0}.income{background-image:url("assets/income-reference.png")}.expense{background-image:url("assets/expense-reference.png")}.mileage{background-image:url("assets/mileage-reference.png")}.totals{background-image:url("assets/totals-reference.png")}.lower{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:15px;margin-top:16px}.lower>*{border:0;background:white;border-radius:9px;padding:17px;text-align:left}.lower div{background:#e7f4eb}.lower b,.lower small{display:block}.lower small{margin-top:5px}.subhero{height:170px;border-radius:12px;background-size:cover;background-position:center;margin-bottom:18px;box-shadow:inset 0 0 0 1000px #06203855}.subhero.settings{background-image:url("assets/header-reference.png")}.panel{max-width:720px;margin:auto;background:white;padding:28px;border-radius:12px;box-shadow:0 3px 12px #0001}.wide{max-width:1000px}.panel h1{font-family:Georgia,serif;margin-top:0;font-size:32px}form{display:grid;gap:16px}label{font-weight:bold;display:grid;gap:7px}input,select,textarea{width:100%;padding:12px;border:1px solid #bac5cc;border-radius:6px;font:inherit}textarea{min-height:90px}.actions,.types{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}button{font:inherit;cursor:pointer;border:1px solid #bbc5cc;background:#fff;color:#102b43;border-radius:7px;padding:11px 16px}.primary,.types .selected{background:#0b3553;color:white;border-color:#0b3553}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stats div{padding:20px;border-radius:9px;background:#f3f6f7;border-left:5px solid #e0bf36}.stats strong{display:block;font-size:25px;margin-top:8px}.settings{display:grid;gap:10px}.settings button{text-align:left;padding:15px}footer{height:90px;background:url("assets/footer-reference.png") center/cover no-repeat}#toast{position:fixed;right:20px;bottom:20px;background:#0b3553;color:#fff;padding:12px 18px;border-radius:8px;opacity:0;transition:.2s}#toast.show{opacity:1}@media(max-width:800px){.header{height:180px}.shell{grid-template-columns:65px 1fr}aside span{display:none}.grid{grid-template-columns:1fr}.tile{height:220px}.lower,.stats{grid-template-columns:1fr}main{padding:14px}.subhero{height:120px}}
/* V4: left navigation is the sole page navigation. */
.welcome{min-height:570px;border-radius:14px;background:linear-gradient(90deg,#071d30d9,#071d3070),url("assets/approved-main-screen-reference.png") center/cover no-repeat;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;box-shadow:0 3px 14px #0002}
.welcome h1{font-family:Georgia,serif;font-size:52px;margin:0;text-shadow:0 2px 4px #000}
.welcome h2{font-family:Georgia,serif;color:#f1cf45;font-size:34px;margin:7px 0}
.welcome p{letter-spacing:4px}
.home-status{margin-top:30px;background:#ffffffdd;color:#17432a;border-radius:9px;padding:14px 25px;display:grid;gap:4px}

/* Data-entry pages use the approved link-card photographs as page backgrounds. */
#income{background:url("assets/income-reference.png") center center/100% 100% no-repeat;border-radius:14px;padding:34px;min-height:620px}
#expense{background:url("assets/expense-reference.png") center center/100% 100% no-repeat;border-radius:14px;padding:34px;min-height:620px}
#mileage{background:url("assets/mileage-reference.png") center center/100% 100% no-repeat;border-radius:14px;padding:34px;min-height:620px}
#totals{background:url("assets/totals-reference.png") center center/100% 100% no-repeat;border-radius:14px;padding:34px;min-height:620px}
#settings{background:linear-gradient(#f4f6f7e8,#f4f6f7e8),url("assets/header-reference.png") center/cover fixed no-repeat;border-radius:14px;padding:34px;min-height:620px}
#income .panel,#expense .panel,#mileage .panel,#totals .panel,#settings .panel{background:#fffffff2;backdrop-filter:blur(2px);border:1px solid #ffffff;box-shadow:0 6px 24px #061b2b30}
.subhero{display:none!important}
@media(max-width:800px){#income,#expense,#mileage,#totals,#settings{padding:15px;background-attachment:scroll}.welcome h1{font-size:34px}.welcome h2{font-size:25px}}

/* V5: full-color photography fitted exactly to each working-page frame. */
#income,#expense,#mileage,#totals{
  background-size:100% 100%;
  background-position:center center;
  background-repeat:no-repeat;
}
#income .panel,#expense .panel,#mileage .panel,#totals .panel{
  background:rgba(255,255,255,.91);
  backdrop-filter:none;
}

/* V6 Home: user-selected beach scene fills the body area. */
.home-beach{
  width:100%;
  min-height:620px;
  border-radius:14px;
  background-image:url("assets/home-beach.png");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 3px 14px #0002;
}
@media(max-width:800px){
  .home-beach{min-height:520px;background-position:center center;}
}

/* V7 header revision: no standalone logo at left; title begins at far left.
   The paddle/logo contained in the approved header artwork is preserved. */
.hero-overlay{justify-content:flex-start;padding-left:28px}
.hero-overlay .logo{display:none!important}
.hero-title{margin-left:0!important;padding-left:0!important;border-left:0!important}

/* Settings now uses the same beach-and-lounge-chair scene as Home. */
#settings{
  background-image:url("assets/home-beach.png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  min-height:620px;
}
#settings .panel{
  background:rgba(255,255,255,.91);
  backdrop-filter:none;
}

/* V8 CORRECTION: the previous logo/title were baked into header-reference.png.
   This replacement background removes that baked left-side artwork while preserving
   the right-side paddle artwork, including its IT Guy Pickleball logo. */
.hero{
  background-image:url("assets/header-clean.png")!important;
  background-position:center center!important;
  background-size:cover!important;
}
.hero-overlay{
  justify-content:flex-start!important;
  padding:20px 28px!important;
}
.hero-title{
  margin:0!important;
  padding:0!important;
  border:0!important;
  text-align:left!important;
  max-width:720px;
}
.hero-title h1,.hero-title h2,.hero-title p{text-align:left!important}

/* V9: show the complete header artwork vertically.
   Previous cover sizing cropped the top of the paddle ITGPB logo. */
.hero{
  background-image:url("assets/header-clean.png")!important;
  background-size:100% 100%!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  overflow:visible!important;
}
@media(max-width:850px){
  .hero{background-size:100% 100%!important;background-position:center top!important;}
}

/* V10 — browser-fit correction.
   Keep the document in normal flow, prevent horizontal overflow, and scale the
   header/body to the available viewport instead of visually enlarging/cropping. */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  scroll-padding-top:0;
}
body{
  width:100%;
  max-width:100%;
  min-height:100vh;
  overflow-x:hidden;
  margin:0!important;
  padding:0!important;
}
.hero{
  width:100%;
  height:auto!important;
  aspect-ratio:1536 / 280;
  min-height:0!important;
  background-size:100% 100%!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  margin:0!important;
  padding:0!important;
}
.hero-overlay{
  width:100%;
  min-height:100%;
  margin:0!important;
}
.app-shell{
  width:100%;
  max-width:100vw;
  min-height:0!important;
}
main{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
img{
  max-width:100%;
  height:auto;
}
@media(max-width:850px){
  .hero{
    height:auto!important;
    aspect-ratio:1536 / 280;
    min-height:0!important;
  }
}

/* V12 — top-edge crop correction.
   The screenshot confirms the page itself begins at y=0, but the header artwork
   has content extending beyond its visible source frame. Add protected top space
   and anchor all header content below the browser edge. */
body{
  padding-top:8px!important;
  box-sizing:border-box!important;
}
.hero{
  box-sizing:border-box!important;
  margin-top:0!important;
  background-position:center top!important;
  overflow:hidden!important;
}
.hero-overlay{
  box-sizing:border-box!important;
  padding-top:12px!important;
}

/* V13 — structural correction based on browser-debug screenshot.
   The apparent second vertical nav was baked into the old header image.
   Use only the actual header portion of that image; the HTML aside is now the
   one and only navigation bar. */
body{
  padding-top:0!important;
}
.header{
  width:100%!important;
  height:auto!important;
  aspect-ratio: 2048 / 369!important;
  background-image:url("assets/header-v13.png")!important;
  background-size:100% 100%!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  margin:0!important;
}
.shell{
  margin-top:0!important;
}

/* V14 — Add Income post-save controls */
.saved-actions{
  margin-top:16px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(255,255,255,.94);
}
.saved-actions button{margin:10px 8px 0 0}

/* V21 Reports */
.report-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:16px 0 22px}
.report-block{margin-top:26px}
.report-block h2{margin-bottom:10px}
.report-block h3{margin:22px 0 8px}
.table-wrap{overflow:auto;background:rgba(255,255,255,.95);border-radius:10px}
.report-table{width:100%;border-collapse:collapse}
.report-table th,.report-table td{padding:10px 12px;border-bottom:1px solid #d7dde2;text-align:left;white-space:nowrap}
.report-table th{font-weight:700}
.report-table td:last-child,.report-table th:last-child{text-align:right}
.empty-report{padding:12px;background:rgba(255,255,255,.9);border-radius:8px}
@media(max-width:850px){.report-filters{grid-template-columns:1fr 1fr}}

/* V22 Records */
.record-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;margin:16px 0 22px}
.record-actions{display:flex;gap:7px;justify-content:flex-end}
.record-actions button{padding:7px 11px}
.record-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;overflow:auto;padding:30px}
.record-editor-card{max-width:620px;margin:30px auto;background:#fff;border-radius:14px;padding:24px;box-shadow:0 15px 45px rgba(0,0,0,.3)}
.record-editor-card label{display:block;margin:12px 0}
.record-editor-card input,.record-editor-card select{width:100%;box-sizing:border-box}
@media(max-width:850px){.record-filters{grid-template-columns:1fr 1fr}}

/* V29 Settings workspace */
.settings-menu{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;margin:12px 0 22px}
.settings-workspace{background:rgba(255,255,255,.94);border-radius:12px;padding:18px;min-height:180px}
.setting-add{display:flex;gap:10px;margin:12px 0 18px}.setting-add input{flex:1}
.setting-list{display:grid;gap:8px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid #d7dde2}
@media(max-width:850px){.settings-menu{grid-template-columns:1fr 1fr}}