:root{--bg:#f4f2ec;--card:#fff;--ink:#171717;--muted:#6b6b6b;--gold:#b88a2e;--line:#ddd8cc;--danger:#a82828;--shadow:0 12px 34px rgba(0,0,0,.08)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;touch-action:manipulation}
button,input,select,textarea{font:inherit}
input,select,textarea{width:100%;border:1px solid #cec9bd;border-radius:10px;padding:12px;background:#fff;color:#171717;font-size:16px}
textarea{resize:vertical}
button{cursor:pointer}
.hidden{display:none!important}
.login-shell{min-height:100vh;position:relative;display:grid;place-items:center;padding:34px;overflow:hidden;background:
radial-gradient(circle at 16% 15%,rgba(211,168,74,.34),transparent 24%),
radial-gradient(circle at 86% 82%,rgba(255,255,255,.12),transparent 22%),
linear-gradient(135deg,#090909 0%,#171717 45%,#302818 100%)}
.login-stage{position:absolute;inset:0;pointer-events:none;perspective:1000px}
.glow{position:absolute;border-radius:50%;filter:blur(20px);opacity:.55}
.glow-one{width:420px;height:420px;left:-130px;top:-140px;background:rgba(222,171,57,.28)}
.glow-two{width:360px;height:360px;right:-110px;bottom:-120px;background:rgba(255,255,255,.12)}
.login-layout{position:relative;z-index:2;width:min(1120px,100%);display:grid;grid-template-columns:1.1fr .8fr;gap:58px;align-items:center}
.login-showcase{color:#fff;padding:20px 10px}
.showcase-badge{display:inline-block;border:1px solid rgba(218,174,78,.7);background:rgba(0,0,0,.28);padding:8px 12px;border-radius:999px;color:#e7c36e;font-size:11px;letter-spacing:.16em;font-weight:900}
.showcase-logo{width:min(520px,92%);height:200px;object-fit:contain;object-position:left center;filter:drop-shadow(0 16px 24px rgba(0,0,0,.36))}
.login-showcase h2{font-size:clamp(34px,4.2vw,62px);line-height:1.02;margin:10px 0 16px;letter-spacing:-.035em}
.login-showcase p{max-width:620px;color:#d7d7d7;font-size:17px;line-height:1.6}
.showcase-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.showcase-points span{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);padding:10px 12px;border-radius:11px;font-size:13px;backdrop-filter:blur(8px)}
.login-card{width:100%;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,242,232,.97));border:1px solid rgba(255,255,255,.72);border-radius:28px;padding:34px;box-shadow:
0 34px 80px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -8px 20px rgba(184,138,46,.08);text-align:center;position:relative}
.login-card-3d{transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);transition:transform .3s ease,box-shadow .3s ease}
.login-card-3d:hover{transform:perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-3px);box-shadow:0 42px 90px rgba(0,0,0,.46),inset 0 1px 0 #fff}
.login-icon-wrap{width:100px;height:100px;margin:-76px auto 20px;border-radius:26px;padding:7px;background:linear-gradient(145deg,#fff,#d9c187);box-shadow:0 18px 32px rgba(0,0,0,.25),inset 0 1px 0 #fff}
.login-app-icon{width:100%;height:100%;border-radius:21px;object-fit:cover}
.login-card h1{margin:.3rem 0;font-size:34px;letter-spacing:-.03em}
.login-form-modern{margin-top:24px}
.input-shell{display:flex;align-items:center;gap:9px;border:1px solid #cfc7b6;background:#fff;border-radius:13px;padding-left:12px;box-shadow:inset 0 2px 8px rgba(0,0,0,.04);transition:border-color .2s,box-shadow .2s,transform .2s}
.input-shell:focus-within{border-color:#b88a2e;box-shadow:0 0 0 4px rgba(184,138,46,.14),inset 0 2px 8px rgba(0,0,0,.03);transform:translateY(-1px)}
.input-shell input{border:0!important;box-shadow:none!important;background:transparent;padding-left:0}
.input-symbol{color:#a57a25;font-size:14px}
.password-wrap{display:flex}
.login-submit{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#101010,#332914);border:1px solid #b88a2e;box-shadow:0 12px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .2s,box-shadow .2s}
.login-submit:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(0,0,0,.28)}
.login-submit b{font-size:22px;color:#e6c36f}
.login-security-note{margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px;color:#6b6559;font-size:12px}
.security-dot{width:8px;height:8px;border-radius:50%;background:#3f9e58;box-shadow:0 0 0 4px rgba(63,158,88,.12)}
.floating-card{position:absolute;display:grid;padding:16px 20px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));color:#fff;backdrop-filter:blur(12px);box-shadow:0 20px 40px rgba(0,0,0,.24)}
.floating-card span{color:#e2bd63;font-size:12px}.floating-card b{font-size:19px}
.card-one{left:5%;bottom:8%;transform:rotate(-7deg)}
.card-two{right:4%;top:10%;transform:rotate(7deg)}
.floating-cube{position:absolute;right:15%;bottom:12%;width:54px;height:54px;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(35deg);opacity:.55}
.floating-cube i{position:absolute;inset:0;border:1px solid rgba(230,195,109,.7);background:rgba(184,138,46,.09)}
.floating-cube i:nth-child(1){transform:translateZ(27px)}.floating-cube i:nth-child(2){transform:rotateY(90deg) translateZ(27px)}.floating-cube i:nth-child(3){transform:rotateX(90deg) translateZ(27px)}.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#555}.eyebrow.gold{color:var(--gold)}
.form-stack{display:grid;gap:14px;text-align:left}.form-stack label,.form-grid label,.filters-grid label,.invoice-options label{display:grid;gap:7px;font-weight:700;font-size:13px;color:#333}
.password-wrap{display:flex;gap:8px}.password-wrap input{flex:1}
.text-btn,.icon-btn{border:0;background:transparent;font-weight:800}
.primary-btn,.secondary-btn,.danger-outline,.logout-btn{border-radius:10px;padding:11px 15px;font-weight:800;border:1px solid transparent}
.primary-btn{background:#171717;color:#fff}.primary-btn:hover{background:#2b2b2b}.secondary-btn{background:#fff;border-color:#bbb4a7;color:#222}.danger-outline{background:#fff;border-color:#d8a5a5;color:var(--danger)}
.large{padding:14px 18px}
.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#111;color:#fff;padding:20px;display:flex;flex-direction:column;z-index:30}
.brand-block{display:flex;align-items:center;gap:10px;padding-bottom:20px;border-bottom:1px solid #333}.brand-block img{width:46px;height:46px;object-fit:contain;background:#fff;border-radius:10px}.brand-block div{display:grid}.brand-block span{font-size:12px;color:#bbb}
.sidebar nav{display:grid;gap:7px;margin-top:22px}.nav-item,.more-desktop{width:100%;text-align:left;border:0;background:transparent;color:#ddd;padding:13px;border-radius:10px;font-weight:700}.nav-item.active,.nav-item:hover{background:#fff;color:#111}.more-desktop{margin-top:auto;border-color:#555;color:#fff}
.main{margin-left:240px;padding:24px;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.topbar h2{margin:0}.topbar p{margin:4px 0 0;color:var(--muted)}
.user-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:14px}.user-chip div{display:grid}.user-chip small{color:var(--muted)}.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#171717;color:#fff;font-weight:800}
.mobile-header,.bottom-nav{display:none}
.view{display:none}.active-view{display:block}
.welcome-row,.hero{background:linear-gradient(135deg,#111,#2b2b2b);color:#fff;border-radius:20px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;box-shadow:var(--shadow)}.welcome-row h1{margin:.3rem 0}.welcome-row p{margin:0;color:#ddd}
.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:18px 0}.stats-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat,.panel,.quick-grid button{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 18px rgba(0,0,0,.04)}
.stat{padding:18px;display:grid;gap:6px}.stat span{color:var(--muted);font-weight:700}.stat strong{font-size:27px}.stat small{color:#888}
.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.quick-grid button{text-align:left;padding:20px;border:1px solid var(--line)}.quick-grid b{display:block;font-size:17px}.quick-grid span{color:var(--muted);font-size:13px}
.panel{padding:20px;margin-bottom:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-head h3{margin:0}.panel-head p{margin:5px 0 0;color:var(--muted)}
.form-grid{display:grid;gap:14px;margin-bottom:16px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.section-title{font-weight:900;margin:22px 0 12px;padding-bottom:8px;border-bottom:2px solid #d1ac5b}
.choice-row{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}.choice-row label,.check-label{display:flex!important;align-items:center;gap:8px}.choice-row input,.check-label input{width:auto}
.badge{padding:8px 12px;border-radius:999px;font-weight:900}.badge.dark{background:#111;color:#fff}
.line-item{display:grid;grid-template-columns:1.5fr .7fr .85fr .7fr .8fr .35fr;gap:10px;align-items:end;border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:10px;background:#faf9f6}.line-item label{display:grid;gap:5px;font-size:12px;font-weight:800}.remove-line{height:44px;border:0;border-radius:10px;background:#fbeaea;color:#a82828;font-weight:900}
.invoice-bottom{display:grid;grid-template-columns:1fr 380px;gap:24px;margin-top:20px}.totals-card{background:#faf9f6;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:11px}.totals-card label{display:grid;grid-template-columns:1fr 130px;align-items:center;font-size:13px;font-weight:800}.totals-card div{display:flex;justify-content:space-between;border-top:1px solid #ddd;padding-top:10px}.totals-card .grand{font-size:21px;font-weight:900}
.action-row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.action-row.wrap{flex-wrap:wrap}
.filters-grid{display:grid;grid-template-columns:2fr repeat(4,1fr) auto;gap:10px;align-items:end;margin-bottom:14px}.summary-strip{padding:10px 12px;background:#f5f0e4;border-radius:10px;margin-bottom:12px;font-weight:700}
.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:12px;border-bottom:1px solid #e7e3da;text-align:left;vertical-align:top}.data-table th{font-size:12px;text-transform:uppercase;color:#666}.table-wrap{overflow:auto}
.status{display:inline-block;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:900}.status.Paid{background:#e6f7e9;color:#1d6f2b}.status.Unpaid{background:#fdeaea;color:#982020}.status.Partially-Paid{background:#fff2d9;color:#8a5a00}
.actions{display:flex;gap:7px;flex-wrap:wrap}.actions button{border:1px solid #cfc8b9;background:#fff;border-radius:8px;padding:7px 9px;font-size:12px;font-weight:800}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.more-drawer{position:fixed;top:0;right:-390px;width:min(380px,92vw);height:100vh;background:#fff;z-index:80;box-shadow:-20px 0 45px rgba(0,0,0,.18);transition:right .25s ease;padding:18px;overflow:auto}.more-drawer.open{right:0}.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:70}.drawer-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}.drawer-head div{display:grid}.drawer-head span{color:var(--muted);font-size:12px}.drawer-head .icon-btn{font-size:28px}.drawer-group{display:grid;gap:6px;margin-top:20px}.drawer-group small{color:#888;font-weight:900}.drawer-group button{border:0;background:#f7f5ef;text-align:left;padding:13px;border-radius:10px;font-weight:800}
dialog{border:0;border-radius:18px;padding:0;width:min(520px,92vw);box-shadow:0 20px 70px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(0,0,0,.48)}#modalForm{padding:20px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.modal-head h3{margin:0}.modal-head button{border:0;background:transparent;font-size:28px}
.file-label input{display:none}
.invoice-preview{position:fixed;inset:0;background:#fff;z-index:200;overflow:auto;padding:20px}
.invoice-sheet{width:8.5in;min-height:11in;margin:auto;background:#fff;color:#111;padding:.45in;box-shadow:0 0 20px rgba(0,0,0,.15);font-family:Arial,sans-serif}
.invoice-head{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;border-bottom:3px solid #111;padding-bottom:18px}.invoice-brand img{width:190px;height:80px;object-fit:contain}.invoice-title{text-align:right}.invoice-title h1{font-size:40px;margin:0}.invoice-title .number{display:inline-block;background:#111;color:#fff;padding:8px 16px;font-size:20px;font-weight:900}
.invoice-parties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.party{border-left:5px solid #b88a2e;padding:12px 14px;background:#fafafa}.party h3{margin:0 0 8px;font-size:17px}.party strong{font-size:18px}
.invoice-table{width:100%;border-collapse:collapse}.invoice-table th{background:#111;color:#fff;padding:10px;text-align:left}.invoice-table td{padding:10px;border-bottom:1px solid #ddd}.invoice-summary{margin-left:auto;width:330px;margin-top:20px}.invoice-summary div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ddd}.invoice-summary .final{font-size:20px;font-weight:900;border-top:3px solid #111;border-bottom:0}.thankyou{margin-top:40px;border-top:2px solid #b88a2e;padding-top:18px;font-size:26px;font-weight:900;text-align:center}.preview-actions{position:sticky;top:0;background:#fff;border-bottom:1px solid #ddd;padding:10px;display:flex;gap:8px;justify-content:center;z-index:3}
@media(max-width:900px){
  .sidebar,.topbar{display:none}.mobile-header{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:10px;background:#111;color:#fff;padding:10px 14px}.mobile-header img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:9px}.mobile-header div{display:grid;flex:1}.mobile-header span{font-size:12px;color:#ccc}.mobile-header .icon-btn{font-size:28px;color:#fff}
  .main{margin-left:0;padding:14px 14px 84px}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid #d6d0c4;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{border:0;background:#fff;padding:13px 4px;font-size:12px;font-weight:800}.bottom-nav button.active{color:#9a6a14;border-top:3px solid #b88a2e}
  .welcome-row{display:grid;padding:20px}.stats-grid,.stats-grid.compact{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr 1fr}.form-grid.two,.form-grid.three,.settings-grid{grid-template-columns:1fr}.line-item{grid-template-columns:1fr 1fr}.line-item .description{grid-column:1/-1}.invoice-bottom{grid-template-columns:1fr}.filters-grid{grid-template-columns:1fr 1fr}.filters-grid label:first-child{grid-column:1/-1}.data-table{min-width:760px}.panel{padding:14px}.panel-head{align-items:flex-start}.invoice-sheet{width:100%;min-height:auto;padding:18px}.invoice-head{grid-template-columns:1fr}.invoice-title{text-align:left}.invoice-parties{grid-template-columns:1fr}.invoice-summary{width:100%}.preview-actions{flex-wrap:wrap}
}

@media(max-width:760px){
  .login-shell{padding:82px 18px 30px;align-items:start}
  .login-layout{grid-template-columns:1fr;gap:28px}
  .login-showcase{display:none}
  .login-card{padding:28px 20px;border-radius:24px}
  .login-card-3d{transform:none}
  .login-icon-wrap{width:88px;height:88px;margin:-66px auto 16px;border-radius:23px}
  .login-app-icon{border-radius:18px}
  .login-card h1{font-size:30px}
  .card-one{left:-35px;bottom:5%}.card-two{right:-35px;top:4%;opacity:.35}
}
.toast{position:fixed;left:50%;bottom:28px;z-index:500;transform:translate(-50%,18px);opacity:0;background:#111;color:#fff;border:1px solid #b88a2e;border-radius:11px;padding:11px 16px;transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== iPhone-first navigation and mobile refinements ===== */
.mobile-header-btn{
  min-width:44px;min-height:44px;border:0;border-radius:12px;
  background:rgba(255,255,255,.08);color:#fff;font-size:26px;font-weight:800;
  display:grid;place-items:center;-webkit-tap-highlight-color:transparent
}
.mobile-header-btn:active{transform:scale(.94);background:rgba(255,255,255,.16)}
.mobile-back{font-size:34px;line-height:1}
.mobile-home{font-size:23px}
.mobile-title{min-width:0}
.mobile-title strong,.mobile-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-page-enter{animation:mobilePageIn .2s ease}
@keyframes mobilePageIn{from{opacity:.2;transform:translateX(12px)}to{opacity:1;transform:none}}
.confirm-dialog{border:0;border-radius:22px;width:min(390px,90vw);padding:0;box-shadow:0 26px 70px rgba(0,0,0,.3)}
.confirm-dialog::backdrop{background:rgba(0,0,0,.48);backdrop-filter:blur(3px)}
.confirm-dialog form{padding:26px;text-align:center}
.confirm-dialog h3{font-size:22px;margin:10px 0 6px}
.confirm-dialog p{color:var(--muted);margin:0}
.confirm-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#fff2d9;color:#8a5a00;font-size:25px;font-weight:900}
.unsaved-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:#e2b84f;position:absolute;right:8px;top:8px}
.swipe-hint{position:fixed;left:0;top:35%;width:4px;height:90px;border-radius:0 5px 5px 0;background:linear-gradient(#b88a2e,transparent);opacity:.35;z-index:44;pointer-events:none}
.mobile-card-list{display:none}
.mobile-record-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px;box-shadow:0 5px 14px rgba(0,0,0,.04)}
.mobile-record-card+.mobile-record-card{margin-top:10px}
.mobile-record-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.mobile-record-card small{color:var(--muted)}
.mobile-record-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.mobile-record-grid div{display:grid;gap:2px}
.mobile-record-grid span{font-size:11px;text-transform:uppercase;color:#888;font-weight:800}
.mobile-record-card .actions{padding-top:11px;border-top:1px solid #eee}
.mobile-record-card .actions button{min-height:40px;flex:1}
.mobile-form-actions{position:sticky;bottom:67px;z-index:12;background:rgba(244,242,236,.94);backdrop-filter:blur(12px);padding:10px;margin:18px -14px -14px;border-top:1px solid #d9d2c4}

@media(max-width:900px){
  body{overscroll-behavior-y:none}
  .mobile-header{
    padding-top:calc(8px + env(safe-area-inset-top));
    min-height:calc(62px + env(safe-area-inset-top));
    gap:8px;box-shadow:0 5px 18px rgba(0,0,0,.18)
  }
  .mobile-header img{width:42px;height:42px;flex:0 0 auto}
  .main{padding:12px 12px calc(88px + env(safe-area-inset-bottom))}
  .bottom-nav{padding-bottom:max(env(safe-area-inset-bottom),4px)}
  .bottom-nav button{min-height:54px;font-size:11px}
  .panel{border-radius:15px;margin-bottom:12px}
  .panel-head{gap:8px}
  .panel-head h3{font-size:20px}
  .panel-head .primary-btn{padding:10px 12px;white-space:nowrap}
  .welcome-row{border-radius:16px}
  .welcome-row h1{font-size:27px}
  .stats-grid.compact .stat{padding:15px}
  .stats-grid.compact .stat strong{font-size:26px}
  .quick-grid{gap:9px}
  .quick-grid button{padding:15px;min-height:92px}
  .quick-grid b{font-size:15px}
  .line-item{
    display:grid;grid-template-columns:1fr 1fr;gap:9px;
    border-radius:16px;padding:13px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.04)
  }
  .line-item .description{grid-column:1/-1}
  .line-item .remove-line{grid-column:2;justify-self:end;width:46px}
  .invoice-bottom{gap:12px}
  .totals-card{padding:13px}
  .action-row.wrap{position:sticky;bottom:calc(58px + env(safe-area-inset-bottom));z-index:14;background:rgba(244,242,236,.96);backdrop-filter:blur(10px);padding:10px 0;margin-bottom:-2px}
  .action-row.wrap button{flex:1;min-height:46px}
  .filters-grid{grid-template-columns:1fr 1fr;gap:9px}
  .filters-grid button{min-height:44px}
  .desktop-table{display:none!important}
  .mobile-card-list{display:block}
  .invoice-preview{padding:0;background:#ece9e1}
  .invoice-preview .preview-actions{
    padding-top:calc(8px + env(safe-area-inset-top));
    justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap
  }
  .invoice-preview .preview-actions button{white-space:nowrap;min-height:43px}
  .invoice-sheet{margin:8px auto 24px;border-radius:4px;box-shadow:0 5px 18px rgba(0,0,0,.14)}
  dialog{margin:auto}
}

.offline-banner{position:fixed;left:0;right:0;top:0;z-index:600;background:#8a5a00;color:#fff;text-align:center;padding:9px 12px;font-size:13px;font-weight:800}
.save-state{position:fixed;right:18px;bottom:86px;z-index:120;background:#fff;border:1px solid #d6d0c4;border-radius:999px;padding:8px 12px;box-shadow:0 7px 22px rgba(0,0,0,.13);font-size:12px;font-weight:900}
.quick-filter-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px}
.quick-filter-row button{white-space:nowrap;border:1px solid #cfc8b9;background:#fff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}
.quick-filter-row button.active{background:#111;color:#fff;border-color:#111}
.success-dialog{border:0;border-radius:24px;width:min(470px,92vw);padding:28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.success-dialog::backdrop{background:rgba(0,0,0,.48);backdrop-filter:blur(4px)}
.success-mark{width:68px;height:68px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#e9f7ec;color:#267238;font-size:34px;font-weight:900}
.success-dialog h3{font-size:25px;margin:14px 0 5px}.success-dialog p{color:var(--muted)}
.success-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.success-actions button{min-height:46px}
@media(max-width:900px){
 .offline-banner{padding-top:calc(9px + env(safe-area-inset-top))}
 .save-state{bottom:calc(78px + env(safe-area-inset-bottom))}
 .success-actions{grid-template-columns:1fr}
}

.topbar-actions{display:flex;align-items:center;gap:10px}
.sync-pill{display:inline-flex;align-items:center;justify-content:center;min-width:62px;padding:6px 9px;border-radius:999px;background:#eee8db;color:#5c513d;font-size:11px;font-weight:900;white-space:nowrap}
.sync-pill.cloud{background:#e8f6eb;color:#1f6d31}
.sync-pill.syncing{background:#fff2d9;color:#805700}
.sync-pill.error{background:#fdeaea;color:#982020}
@media(max-width:900px){
  .mobile-header .sync-pill{min-width:50px;padding:5px 7px;background:rgba(255,255,255,.12);color:#fff}
}

/* ===== V7 premium one-page color invoice ===== */
.premium-invoice{
  --pi-gold:#d49a20;--pi-black:#050505;
  width:8.5in;min-height:11in;height:11in;padding:.23in .25in .18in;
  background:#fff;color:#101010;overflow:hidden;font-family:Arial,Helvetica,sans-serif;
  display:flex;flex-direction:column;gap:.12in;box-shadow:0 15px 45px rgba(0,0,0,.16);
  -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important
}
.pi-header{display:grid;grid-template-columns:1.35fr .72fr .86fr;gap:.18in;align-items:start;min-height:1.8in}
.pi-logo{height:1.55in;display:flex;align-items:center}.pi-logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.pi-company{border-left:2px solid var(--pi-gold);padding-left:.16in;font-size:10.5px;line-height:1.34}.pi-company h3{margin:0 0 9px;font-size:13px}.pi-company p{margin:5px 0}
.pi-meta h1{font-size:33px;letter-spacing:1px;margin:0 0 14px;text-align:center;border-bottom:2px solid var(--pi-gold);padding-bottom:7px}
.pi-meta{font-size:10px}.pi-meta>div{display:flex;justify-content:space-between;gap:10px;padding:10px 8px;border:1px solid #e7d4a7;border-bottom:0}.pi-meta>div:nth-last-child(1){border-bottom:1px solid #e7d4a7}.pi-meta span{font-weight:800}
.pi-parties{display:grid;grid-template-columns:1fr 1fr;gap:.32in}.pi-party{border:1px solid #d8ac4a;min-height:1.82in;position:relative;border-radius:0 0 8px 8px}
.pi-party h2,.pi-payment h2{margin:-1px -1px 0;background:linear-gradient(90deg,#050505 0 82%,transparent 82%);color:#fff;font-size:15px;letter-spacing:1.3px;padding:10px 18px;border-left:12px solid var(--pi-gold)}
.pi-party h2 span,.pi-payment h2 span{color:var(--pi-gold);margin-right:12px}.pi-party-body{padding:14px 20px;font-size:11px;line-height:1.35}.pi-party-body strong{font-size:13px}.pi-party-body p{margin:7px 0}
.pi-table{width:100%;border-collapse:separate;border-spacing:0;font-size:10px;border:1px solid #d8ac4a;border-radius:7px;overflow:hidden}
.pi-table th{background:#050505!important;color:#fff!important;padding:10px 7px;font-size:9px;letter-spacing:.35px;border-right:1px solid #7f5a13}
.pi-table th:first-child{background:linear-gradient(135deg,#dfa630,#9d6510)!important}.pi-table td{padding:8px 7px;border-bottom:1px solid #ddd;border-right:1px solid #ddd}.pi-table tr:last-child td{border-bottom:0}.pi-table th:last-child,.pi-table td:last-child{border-right:0}.pi-table td:nth-child(1),.pi-table td:nth-child(n+3){text-align:center}.pi-table td:nth-child(2){width:38%}
.pi-bottom{display:grid;grid-template-columns:1fr 1.08fr;gap:.3in;margin-top:auto}
.pi-payment{border:1px solid #d8ac4a;border-radius:7px;overflow:hidden}.pi-status-row{display:grid;grid-template-columns:1fr 1fr;padding:13px 16px;gap:10px}.pi-status-row>div{display:grid;gap:4px}.pi-status-row>div+div{border-left:1px solid #d8ac4a;padding-left:15px}.pi-status-row small{font-size:9px;font-weight:800}.pi-status-row strong{font-size:17px;color:#b47808}.pi-support{border-top:1px solid #d8ac4a;padding:10px 16px;font-size:9px;line-height:1.4}
.pi-totals{padding:3px 0}.pi-totals>div{display:flex;justify-content:space-between;gap:16px;padding:7px 10px;border-bottom:1px solid #d8d8d8;font-size:11px}.pi-totals span{font-weight:800}.pi-total-due{background:#050505!important;color:#fff!important;border-left:14px solid var(--pi-gold)!important;border-radius:4px;margin-top:7px;padding:10px 14px!important;font-size:17px!important}
.pi-thanks{text-align:center;margin-top:.02in}.pi-thanks h2{font-size:27px;letter-spacing:2px;color:#bd7d08;margin:0}.pi-thanks p{font-size:11px;margin:2px 0 0}
.pi-footer{margin:.03in -.25in -.18in;background:linear-gradient(100deg,#dba22c,#050505 9%,#050505 91%,#dba22c);color:#fff!important;display:flex;justify-content:space-around;align-items:center;min-height:.42in;padding:8px 24px;font-size:9.5px}
.line-item-top{display:none}.line-result{display:flex;justify-content:space-between;align-items:center;background:#f5f1e8;border-radius:10px;padding:10px 12px;grid-column:1/-1}.line-result span{font-size:12px;color:#6d6659;font-weight:800}.line-result strong{font-size:17px}.line-mobile-grid{display:contents}

/* ===== simplified iPhone interface ===== */
@media(max-width:900px){
  .mobile-header{grid-template-columns:44px 1fr 44px!important;display:grid!important;padding-left:10px!important;padding-right:10px!important}
  .mobile-header>img,.mobile-header .mobile-home,.mobile-header .sync-pill{display:none!important}
  .mobile-title{display:block!important;text-align:left}.mobile-title strong{display:none}.mobile-title span{font-size:17px!important;color:#fff!important;font-weight:800}
  .mobile-header #moreBtn{grid-column:3}.mobile-header .mobile-back{grid-column:1}.mobile-header .mobile-title{grid-column:2;grid-row:1}
  .main{padding:10px 10px calc(82px + env(safe-area-inset-bottom))!important}
  .welcome-row{padding:16px!important}.welcome-row h1{font-size:23px!important}.welcome-row p{font-size:13px;margin:4px 0}
  .stats-grid.compact{grid-template-columns:1fr 1fr!important;gap:8px}.stats-grid.compact .stat{padding:12px!important}.stats-grid.compact .stat strong{font-size:21px!important}
  .quick-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.quick-grid button{min-height:76px!important;padding:12px!important}.quick-grid b{font-size:13px!important}
  .panel{padding:12px!important;border-radius:14px!important}.panel-head h3{font-size:18px!important}
  .line-item{display:block!important;padding:0!important;border:1px solid #ded7c8!important;border-radius:16px!important;overflow:hidden!important;background:#fff!important;margin-bottom:12px!important}
  .line-item-top{display:flex;align-items:center;gap:9px;background:#151515;color:#fff;padding:10px 12px}.line-number{width:25px;height:25px;border-radius:50%;background:#c89224;display:grid;place-items:center;font-size:12px;font-weight:900}.line-item-top strong{flex:1;font-size:13px}
  .line-item .remove-line{position:static!important;grid-column:auto!important;width:34px!important;height:34px!important;min-height:34px!important;background:rgba(255,255,255,.12)!important;color:#fff!important;border:0!important;border-radius:9px}
  .line-item>label.description{display:block;padding:12px 12px 5px;margin:0}
  .line-mobile-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:9px;padding:5px 12px 11px}
  .line-mobile-grid label{font-size:11px;font-weight:800;color:#625b4e}.line-mobile-grid input,.line-mobile-grid select{margin-top:5px;padding:11px 9px;border-radius:10px}
  .line-result{margin:0;background:#f5efe2;border-radius:0;padding:11px 13px}
  .invoice-bottom .totals-card{position:sticky;bottom:70px;z-index:5;box-shadow:0 -5px 18px rgba(0,0,0,.09)}
  .action-row.wrap{display:grid!important;grid-template-columns:1fr 1fr}.action-row.wrap button{width:100%}
  .premium-invoice{width:8.5in!important;height:11in!important;min-height:11in!important;padding:.23in .25in .18in!important;transform-origin:top left;zoom:calc(100vw / 816);margin:0!important}
  .invoice-preview{overflow:auto!important;background:#ddd!important}.preview-actions{position:sticky;top:0;z-index:10;background:#111;padding:8px!important;overflow-x:auto;flex-wrap:nowrap!important}.preview-actions button{font-size:12px;padding:9px 10px}
  .bottom-nav button{font-size:10px!important;padding:9px 2px!important}
}

@page{size:Letter portrait;margin:0}
@media print{
  html,body{width:8.5in!important;height:11in!important;margin:0!important;padding:0!important;background:#fff!important;overflow:hidden!important}
  body *{visibility:hidden!important}
  .invoice-preview,.invoice-preview *{visibility:visible!important}
  .invoice-preview{position:absolute!important;inset:0!important;width:8.5in!important;height:11in!important;padding:0!important;margin:0!important;background:#fff!important;overflow:hidden!important}
  .preview-actions{display:none!important}
  .premium-invoice{
    position:absolute!important;left:0!important;top:0!important;
    width:8.5in!important;height:11in!important;min-height:11in!important;margin:0!important;
    transform:scale(var(--print-scale,1))!important;transform-origin:top left!important;zoom:1!important;
    box-shadow:none!important;page-break-after:avoid!important;page-break-before:avoid!important;page-break-inside:avoid!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important
  }
  .premium-invoice *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
}

/* ===== V7.1 approved compact invoice and inventory refinements ===== */
.line-item{
  grid-template-columns:minmax(240px,1.7fr) minmax(120px,.65fr) minmax(130px,.65fr) minmax(150px,.8fr)!important;
  align-items:end
}
.line-item-top{
  display:flex!important;grid-column:1/-1;align-items:center;gap:10px;
  padding-bottom:9px;border-bottom:1px solid #e4dfd4;color:#252525
}
.line-item-top .line-number{width:27px;height:27px;border-radius:50%;background:#c89224;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
.line-item-top strong{flex:1;font-size:13px}.line-item-top .remove-line{width:38px;height:38px;min-height:38px}
.line-mobile-grid{display:contents!important}.line-result{grid-column:1/-1!important}

#inventoryView .panel-head h3{font-size:23px}
#inventoryView .panel-head p{font-size:14px;line-height:1.45}
#inventoryView .data-table th{font-size:13px;letter-spacing:.03em;font-weight:900;padding:14px 13px}
#inventoryView .data-table td{font-size:15px;line-height:1.45;padding:14px 13px}
#inventoryView .data-table td:first-child{font-size:16px;font-weight:850}
#inventoryView input,#inventoryView select,#inventoryView button{font-size:15px}

.premium-invoice{
  --pi-gold:#d39717;--pi-gold-dark:#b87800;--pi-black:#070707;--pi-gray:#ededed;
  width:8.5in!important;min-height:11in!important;height:auto!important;
  padding:.25in .28in .2in!important;margin:0 auto!important;
  display:block!important;overflow:visible!important;background:#fff!important;color:#111!important;
  font-family:Arial,Helvetica,sans-serif!important;box-shadow:0 15px 45px rgba(0,0,0,.15);
  -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important
}
.pi-header{
  display:grid!important;grid-template-columns:minmax(0,34fr) minmax(0,39fr) minmax(0,27fr)!important;gap:.16in!important;
  align-items:start!important;min-height:1.72in!important;padding-bottom:.12in!important;
  border-bottom:1.5px solid #d8a337!important
}
.pi-logo{height:1.58in!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;overflow:visible!important}
.pi-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:left center!important;filter:none!important}
.pi-company{
  min-height:1.58in!important;border-left:1.5px solid var(--pi-gold)!important;padding:0 0 0 .18in!important;
  font-size:11.5px!important;line-height:1.28!important;color:#101010!important
}
.pi-company h3{margin:2px 0 10px!important;font-size:18px!important;line-height:1.08!important;font-weight:900!important;letter-spacing:-.02em!important}
.pi-company-row{display:grid!important;grid-template-columns:24px 1fr!important;gap:8px!important;align-items:center!important;margin:7px 0!important}
.pi-company-row b{font-size:11.5px!important;line-height:1.34!important;overflow-wrap:anywhere!important}.pi-company-row:not(.pi-address-row) b{font-size:13px!important;font-weight:900!important}
.pi-company-row.pi-address-row{align-items:start!important}.pi-icon{color:var(--pi-gold)!important;width:21px!important;height:21px!important;display:grid!important;place-items:center!important}
.pi-icon svg,.pi-bill-icon svg,.pi-footer svg,.pi-bill-address svg{width:100%!important;height:100%!important;fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.pi-meta{font-size:10.5px!important;padding-left:.02in!important}
.pi-meta h1{font-size:31px!important;line-height:1!important;letter-spacing:.5px!important;margin:5px 0 15px!important;text-align:center!important;border-bottom:2px solid var(--pi-gold)!important;padding-bottom:10px!important;font-weight:900!important}
.pi-meta>div{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;align-items:center!important;padding:10px 0!important;border:0!important;border-bottom:1px solid #ddb24f!important}
.pi-meta span{font-size:10px!important;font-weight:900!important}.pi-meta b{font-size:10.5px!important;text-align:right!important;white-space:nowrap!important}

.pi-bill{margin:.14in 0 .16in!important;border-top:1px solid #dfac42!important;border-bottom:1px solid #dfac42!important;padding:.12in .04in .1in!important;break-inside:avoid!important}
.pi-bill-row{display:flex!important;align-items:center!important;gap:13px!important;min-width:0!important;white-space:nowrap!important}
.pi-bill-label{display:flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important}.pi-bill-label h2{margin:0!important;font-size:17px!important;letter-spacing:.2px!important;font-weight:900!important}
.pi-bill-icon{width:34px!important;height:34px!important;padding:6px!important;border-radius:6px!important;background:linear-gradient(145deg,#e6ad2f,#b97900)!important;color:#fff!important;display:grid!important;place-items:center!important}
.pi-customer-name{font-size:15px!important;font-weight:900!important;padding-left:12px!important;border-left:1px solid var(--pi-gold)!important;overflow:hidden!important;text-overflow:ellipsis!important}
.pi-bill-detail{font-size:12.5px!important;font-weight:700!important;padding-left:14px!important;border-left:1px solid var(--pi-gold)!important;overflow:hidden!important;text-overflow:ellipsis!important}
.pi-bill-detail.pi-email{flex:1!important}.pi-bill-address{display:flex!important;gap:9px!important;align-items:flex-start!important;margin:9px 0 0 9px!important;font-size:12px!important;font-weight:650!important;line-height:1.3!important}
.pi-bill-address svg{width:14px!important;height:14px!important;color:#111!important;flex:0 0 auto!important;margin-top:1px!important}

.pi-table{width:100%!important;border-collapse:collapse!important;border-spacing:0!important;border:1px solid #d5d5d5!important;border-radius:5px!important;overflow:visible!important;font-size:11.5px!important;table-layout:fixed!important}
.pi-table thead{display:table-header-group!important}.pi-table th{background:#ececec!important;color:#111!important;padding:10px 8px!important;font-size:10.5px!important;line-height:1.1!important;letter-spacing:.2px!important;font-weight:900!important;border:1px solid #d4d4d4!important;text-align:center!important}
.pi-table th:first-child{background:#ececec!important;color:#111!important}.pi-table th:nth-child(2){text-align:center!important}
.pi-table td{padding:8px 9px!important;min-height:33px!important;line-height:1.25!important;border:1px solid #dddddd!important;color:#111!important;vertical-align:middle!important;overflow-wrap:anywhere!important}
.pi-table td:nth-child(1),.pi-table td:nth-child(3),.pi-table td:nth-child(4),.pi-table td:nth-child(5),.pi-table td:nth-child(6){text-align:center!important}
.pi-table td:nth-child(5),.pi-table td:nth-child(6){font-weight:900!important;font-size:12px!important}.pi-table td:nth-child(2){font-weight:600!important}
.pi-col-no{width:7%}.pi-col-desc{width:34%}.pi-col-qty{width:11%}.pi-col-unit{width:14%}.pi-col-price{width:16%}.pi-col-amount{width:18%}
.pi-filler-row td{height:31px!important;color:transparent!important}.pi-table tr{break-inside:avoid!important;page-break-inside:avoid!important}

.pi-totals-wrap{display:flex!important;justify-content:flex-end!important;margin:.12in 0 0!important;break-inside:avoid!important;page-break-inside:avoid!important}
.pi-totals{width:3.45in!important;padding:0!important}.pi-totals>div{display:grid!important;grid-template-columns:1fr auto!important;gap:18px!important;align-items:center!important;padding:7px 10px!important;border-bottom:1px dotted #c8c8c8!important;font-size:11.5px!important}
.pi-totals span{font-weight:800!important}.pi-totals strong{font-size:13px!important;text-align:right!important}.pi-totals .pi-discount strong{color:#c72020!important}
.pi-total-due{grid-template-columns:1fr 1.35fr!important;background:transparent!important;color:#050505!important;border:1px solid #d6d6d6!important;border-left:0!important;border-radius:4px!important;margin-top:7px!important;padding:0!important;overflow:hidden!important;font-size:18px!important}
.pi-total-due span{padding:11px 13px!important;background:#f7f7f7!important;font-size:17px!important;font-weight:900!important;display:flex!important;align-items:center!important}
.pi-total-due strong{padding:10px 13px!important;background:linear-gradient(135deg,#e5aa2d,#cc8700)!important;color:#050505!important;font-size:22px!important;font-weight:900!important;display:flex!important;justify-content:flex-end!important;align-items:center!important}

.invoice-notes-field{margin-top:14px}.invoice-notes-field textarea{min-height:92px;resize:vertical}
.pi-notes{margin:.12in 0 0!important;padding:.1in .12in!important;border-left:3px solid var(--pi-gold)!important;background:#f8f8f8!important;break-inside:avoid!important;page-break-inside:avoid!important}
.pi-notes h3{margin:0 0 6px!important;font-size:16px!important;font-weight:900!important}.pi-notes p{margin:0!important;font-size:13px!important;font-weight:700!important;line-height:1.45!important;white-space:normal!important;overflow-wrap:anywhere!important}

.pi-thanks{display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:12px!important;align-items:center!important;text-align:center!important;margin:.14in auto .1in!important;break-inside:avoid!important;page-break-inside:avoid!important}
.pi-thanks-line{height:1px!important;background:#d49b22!important}.pi-thanks h2{font-size:20px!important;letter-spacing:.8px!important;color:#c18407!important;margin:0!important;font-weight:900!important}.pi-thanks p{grid-column:1/-1!important;font-size:10.5px!important;margin:0!important;color:#222!important}
.pi-footer{display:grid!important;grid-template-columns:1fr 1fr 1.35fr auto!important;gap:16px!important;align-items:center!important;margin:0!important;padding:.11in .08in .04in!important;min-height:.43in!important;border-top:1px solid #d39a22!important;background:#fff!important;color:#111!important;font-size:10px!important;break-inside:avoid!important;page-break-inside:avoid!important}
.pi-footer span{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}.pi-footer span svg{width:18px!important;height:18px!important;color:#111!important;flex:0 0 auto!important}.pi-footer b{font-size:12.5px!important;font-weight:900!important;line-height:1.25!important;overflow-wrap:anywhere!important}.pi-footer small{font-size:8px!important;color:#777!important;white-space:nowrap!important}

@media(max-width:900px){
  #inventoryView .data-table{min-width:680px!important}
  #inventoryView .data-table th{font-size:12px!important}#inventoryView .data-table td{font-size:14px!important}
  .line-item{display:block!important;padding:0!important}.line-item-top{padding:10px 12px!important;border-bottom:0!important;color:#fff!important}
  .line-mobile-grid{display:grid!important;grid-template-columns:1fr 1fr!important}.line-mobile-grid .price-label{grid-column:1/-1!important}
  .premium-invoice{width:8.5in!important;min-height:11in!important;height:auto!important;padding:.25in .28in .2in!important;zoom:calc((100vw - 10px) / 816)!important;transform:none!important;transform-origin:top left!important;margin:0!important}
  .invoice-preview{overflow:auto!important;background:#ddd!important}.preview-actions{position:sticky!important;top:0!important;z-index:10!important;background:#111!important;padding:8px!important;overflow-x:auto!important;flex-wrap:nowrap!important}.preview-actions button{font-size:12px!important;padding:9px 10px!important;white-space:nowrap!important}
}

@page{size:Letter portrait;margin:.22in}
@media print{
  html,body{width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important}
  body>*:not(#invoicePreview){display:none!important}
  body>#invoicePreview{display:block!important}
  body>#invoicePreview.hidden{display:none!important}
  body *{visibility:hidden!important}
  .invoice-preview,.invoice-preview *{visibility:visible!important}
  .invoice-preview{position:static!important;inset:auto!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;background:#fff!important;overflow:visible!important}
  .preview-actions{display:none!important}
  .premium-invoice{
    position:static!important;left:auto!important;top:auto!important;width:8.06in!important;min-height:10.56in!important;height:auto!important;
    margin:0 auto!important;padding:.12in .14in .08in!important;box-shadow:none!important;overflow:visible!important;
    transform:none!important;zoom:1!important;page-break-inside:auto!important;page-break-before:auto!important;page-break-after:auto!important
  }
  .pi-table thead{display:table-header-group!important}.pi-table tfoot{display:table-footer-group!important}
  .pi-table tr,.pi-totals-wrap,.pi-thanks,.pi-footer,.pi-header,.pi-bill{break-inside:avoid!important;page-break-inside:avoid!important}
  .pi-table tr.pi-break-after{break-after:page!important;page-break-after:always!important}
  .premium-invoice,.premium-invoice *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
}