/* UpTime Invoice Pro V17.12.2 — app-base.css
   Base shell, forms, public document foundations and early mobile compatibility.
   Cascade segment 1-620; keep load order unchanged. */
/*
  UpTime Invoice Pro - App Core Styles
  Split from public_html/app/index.html
  Version: 16.2
  Notes: Core app, mobile, portal, projects, recurring, payments, proof review and App Shell Polish Pro styles plus Dashboard Executive Pro styles.
  Services Command Center CSS stays separated in /assets/services-command-center.css
*/

*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at 20% 10%,rgba(37,214,162,.16),transparent 26%),radial-gradient(circle at 90% 0,rgba(96,165,250,.14),transparent 30%),linear-gradient(135deg,#050814,#0a1020 48%,#050814);color:var(--txt);min-height:100vh}.glass,.panel{background:linear-gradient(180deg,rgba(17,27,48,.86),rgba(9,15,28,.94));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.loginWrap{min-height:100vh;display:grid;place-items:center;padding:28px}.loginCard{width:min(480px,100%);border-radius:var(--r);padding:34px}.logo{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-weight:900;letter-spacing:-.06em;color:#001811;background:linear-gradient(135deg,var(--brand),#bef264)}.eyebrow{margin:0 0 8px;color:var(--brand);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.16em}.muted{color:var(--muted)}h1,h2,h3{margin:0 0 12px;letter-spacing:-.04em}h1{font-size:38px}.stack{display:grid;gap:14px}.footer{font-size:12px;color:var(--muted);margin-top:22px;line-height:1.45}label{display:grid;gap:7px;color:#c9d7ef;font-size:13px}input,select,textarea{width:100%;border:1px solid var(--line);background:#07101f;color:var(--txt);border-radius:14px;padding:12px 13px;outline:none}input:focus,select:focus,textarea:focus{border-color:rgba(37,214,162,.7);box-shadow:0 0 0 4px rgba(37,214,162,.1)}button{border:0;border-radius:14px;padding:11px 14px;font-weight:800;cursor:pointer;color:var(--txt);background:#17233a}.primary{background:linear-gradient(135deg,var(--brand),#2dd4bf);color:#062014}.ghost{background:rgba(255,255,255,.06);border:1px solid var(--line)}.tiny{padding:8px 10px;font-size:12px}.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh;gap:18px;padding:18px}.side{border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:18px;height:calc(100vh - 36px)}.brand{display:flex;gap:12px;align-items:center}.brand .logo{width:42px;height:42px;border-radius:14px}.brand span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.nav{display:grid;gap:8px}.nav button{display:flex;gap:10px;align-items:center;justify-content:flex-start;background:transparent;color:#c6d4ed}.nav button.active,.nav button:hover{background:rgba(37,214,162,.12);color:white;border:1px solid rgba(37,214,162,.22)}.main{display:grid;gap:18px;align-content:start}.top{border-radius:var(--r);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.topActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.panel{border-radius:var(--r);padding:20px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.two{display:grid;grid-template-columns:380px 1fr;gap:16px}.wide{grid-column:1/-1}.metric span{display:block;color:var(--muted);font-size:13px}.metric strong{font-size:28px;display:block;margin-top:8px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:12px 10px;vertical-align:top}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.tableWrap{overflow:auto}.badge{display:inline-flex;border-radius:99px;padding:5px 9px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;background:rgba(96,165,250,.14);color:#bfdbfe}.badge.paid,.badge.approved,.badge.converted{background:rgba(52,211,153,.15);color:#bbf7d0}.badge.partial,.badge.sent,.badge.viewed{background:rgba(251,191,36,.14);color:#fde68a}.badge.overdue,.badge.rejected,.badge.cancelled{background:rgba(251,113,133,.14);color:#fecdd3}.actions{display:flex;gap:8px;flex-wrap:wrap}.danger{background:rgba(251,113,133,.14);border:1px solid rgba(251,113,133,.35);color:#fecdd3}.success{background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.35);color:#bbf7d0}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.searchBox{max-width:360px}.toast{position:fixed;right:18px;bottom:18px;z-index:20;max-width:430px;border-radius:18px;padding:14px 16px;background:#07101f;border:1px solid rgba(37,214,162,.35);box-shadow:var(--shadow)}.hidden{display:none!important}.alert{border:1px solid rgba(251,113,133,.35);background:rgba(251,113,133,.1);color:#fecdd3;border-radius:14px;padding:12px}.loading{position:fixed;inset:0;display:grid;place-items:center}.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.docWrap{min-height:100vh;padding:22px;display:grid;place-items:start center}.docCard{width:min(920px,100%);border-radius:24px;padding:24px}.docHead{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.docTotal{font-size:38px;font-weight:900;letter-spacing:-.05em}.docActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}@media(max-width:1000px){.app{grid-template-columns:1fr}.side{position:relative;height:auto}.grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}}@media(max-width:620px){.grid{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.loginCard{padding:24px}h1{font-size:32px}.app{padding:10px}.split{grid-template-columns:1fr}}


    /* V9 Mobile App Responsive Fix */
    html,body{max-width:100%;overflow-x:hidden}
    img,svg,video,canvas{max-width:100%;height:auto}
    a,button,input,select,textarea{max-width:100%}
    .docCard,.panel,.glass{min-width:0}
    .tableWrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    @media(max-width:760px){
      body{background:radial-gradient(circle at 0 0,rgba(37,214,162,.18),transparent 32%),linear-gradient(180deg,#081423,#070b14)}
      .docWrap{display:block;min-height:100vh;width:100%;padding:10px 10px 24px;place-items:unset}
      .docCard{width:100%;max-width:100%;border-radius:22px;padding:18px 16px;box-shadow:0 16px 44px rgba(0,0,0,.32)}
      .docHead{display:grid;grid-template-columns:1fr;gap:16px}
      .docHead>div{min-width:0}
      .docHead>div:last-child{text-align:left!important;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
      .docTotal{font-size:34px;line-height:1}
      .docActions{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
      .docActions button,.docActions a{width:100%;text-align:center;justify-content:center}
      .split{grid-template-columns:1fr!important;gap:12px}
      .panel{border-radius:20px;padding:16px}
      h1{font-size:34px;line-height:1.06;word-break:break-word}
      h2{font-size:24px}h3{font-size:19px}
      .eyebrow{font-size:11px;letter-spacing:.14em}
      .logo{width:50px;height:50px;border-radius:17px}
      .muted{line-height:1.35}
      .app{display:block;padding:0}
      .side{position:relative;height:auto;border-radius:0 0 22px 22px;margin:0 0 12px;padding:14px}
      .nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
      .nav button{font-size:13px;padding:10px 9px;justify-content:center}
      .main{padding:0 10px 18px;gap:12px}
      .top{border-radius:22px;padding:16px}.topActions{width:100%}.topActions button{flex:1}
      .two{grid-template-columns:1fr!important}.grid{grid-template-columns:1fr!important;gap:10px}
      .toolbar{align-items:stretch}.toolbar .searchBox{max-width:none;width:100%}
      table{font-size:12px}
      th,td{padding:10px 8px}
      .actions{display:grid;grid-template-columns:1fr;gap:8px}.actions button,.actions a{width:100%}
      .toast{left:10px;right:10px;bottom:10px;max-width:none}
      /* Public estimate/invoice tables become mobile cards */
      .docCard table,.docCard thead,.docCard tbody,.docCard tr,.docCard th,.docCard td{display:block;width:100%}
      .docCard thead{display:none}
      .docCard tr{border:1px solid var(--line);border-radius:16px;padding:10px;margin:0 0 12px;background:rgba(255,255,255,.025)}
      .docCard td{border:0;padding:6px 4px;overflow-wrap:anywhere}
      .docCard td:nth-child(1){font-weight:900;color:var(--txt)}
      .docCard td:nth-child(2){color:var(--muted);line-height:1.35}
      .docCard td:nth-last-child(-n+3){display:flex;justify-content:space-between;gap:12px}
      .docCard td:nth-child(3)::before{content:'Qty';color:var(--muted);font-weight:800}
      .docCard td:nth-child(4)::before{content:'Price';color:var(--muted);font-weight:800}
      .docCard td:nth-child(5)::before{content:'Total';color:var(--muted);font-weight:800}
    }
    @media(max-width:390px){
      .docCard{padding:16px 12px;border-radius:18px}
      h1{font-size:30px}.docTotal{font-size:30px}
      .panel{padding:14px}.nav button{font-size:12px}
    }



    /* V10.5 App UI Button Polish + Mobile Pro + Logo Fix */
    .logo{overflow:hidden;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 10px 26px rgba(37,214,162,.18)}
    .logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:inherit}
    .side .brand .logo{width:50px;height:50px;border-radius:18px;background:linear-gradient(135deg,rgba(37,214,162,.18),rgba(190,242,100,.12));padding:0}
    .side .brand .logo img{object-fit:cover;object-position:center top;transform:scale(1.28);transform-origin:center top}
    .brand strong{font-size:17px;line-height:1.1;letter-spacing:-.03em}
    button,.button,a.tiny,a.ghost,a.success,a.primary{appearance:none;-webkit-appearance:none;text-decoration:none!important;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));color:#eaf2ff;font-weight:900;line-height:1;white-space:nowrap;box-shadow:0 10px 22px rgba(0,0,0,.16);transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}
    button:hover,a.tiny:hover,a.ghost:hover,a.success:hover,a.primary:hover{transform:translateY(-1px);border-color:rgba(37,214,162,.35);box-shadow:0 14px 28px rgba(0,0,0,.22)}
    button:active,a.tiny:active,a.ghost:active,a.success:active,a.primary:active{transform:translateY(0) scale(.98)}
    .primary,a.primary{background:linear-gradient(135deg,#25d6a2,#2dd4bf);color:#041914;border-color:rgba(37,214,162,.65)}
    .success,a.success{background:linear-gradient(135deg,rgba(37,214,162,.22),rgba(20,184,166,.15));color:#bbf7d0;border-color:rgba(37,214,162,.42)}
    .ghost,a.ghost{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border-color:rgba(255,255,255,.13);color:#eaf2ff}
    .danger,a.danger{background:linear-gradient(135deg,rgba(251,113,133,.22),rgba(244,63,94,.12));border-color:rgba(251,113,133,.42);color:#fecdd3}
    .tiny{padding:9px 13px;font-size:12px;min-height:36px}
    .actions{gap:9px;align-items:center}
    .actions .primary,.actions .success,.actions .ghost,.actions .danger,.actions button,.actions a{margin:0}
    .tableWrap{border-radius:18px;overflow:auto;border:1px solid rgba(255,255,255,.055)}
    .tableWrap table{min-width:760px;background:rgba(255,255,255,.015)}
    th{background:rgba(255,255,255,.025)}
    td{background:rgba(255,255,255,.006)}
    tr:hover td{background:rgba(37,214,162,.025)}
    .panel h3{font-size:20px}
    .top{position:relative;overflow:hidden}.top:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 0,rgba(37,214,162,.12),transparent 36%);pointer-events:none}
    input,select,textarea{min-height:44px}

    @media(max-width:760px){
      .side .brand{gap:12px}.side .brand .logo{width:46px;height:46px;border-radius:16px}.brand strong{font-size:16px}
      .nav{display:flex;overflow:auto;padding-bottom:4px;gap:8px;scroll-snap-type:x proximity}
      .nav button{flex:0 0 auto;min-width:max-content;border-radius:999px;padding:10px 13px;scroll-snap-align:start}
      .side{gap:12px}.side .footer{display:none}
      .top{border-radius:20px;margin:0}.top h2{font-size:24px}
      .panel{border-radius:22px;padding:16px}
      .tableWrap{border:0;overflow:visible}
      .main .tableWrap table,.main .tableWrap thead,.main .tableWrap tbody,.main .tableWrap tr,.main .tableWrap th,.main .tableWrap td{display:block;width:100%;min-width:0}
      .main .tableWrap thead{display:none}
      .main .tableWrap tr{background:linear-gradient(180deg,rgba(17,27,48,.9),rgba(8,14,27,.96));border:1px solid rgba(255,255,255,.09);border-radius:20px;margin:0 0 12px;padding:13px;box-shadow:0 14px 34px rgba(0,0,0,.18)}
      .main .tableWrap td{border:0;padding:7px 4px;background:transparent!important;overflow-wrap:anywhere}
      .main .tableWrap td:first-child{font-size:16px;font-weight:900;color:#fff}
      .main .tableWrap td:nth-last-child(1){padding-top:12px}
      .main .tableWrap .actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%}
      .main .tableWrap .actions button,.main .tableWrap .actions a{width:100%;min-height:42px;padding:10px 8px;font-size:12px}
      .main .tableWrap .actions .primary,.main .tableWrap .actions .success{grid-column:auto}
      .two{gap:12px}.split{gap:10px}
      .searchBox{min-height:46px;border-radius:16px}
      .docActions{gap:9px}.docActions button,.docActions a{min-height:46px;border-radius:16px}
    }
    @media(max-width:420px){
      .main .tableWrap .actions{grid-template-columns:1fr}
      .topActions button{width:100%}.panel h3{font-size:18px}
    }


    /* V10.8 Smart Logo Auto Fit - main app header logo */
    .brandFree{
      display:flex!important;
      align-items:center!important;
      gap:12px!important;
      min-width:0!important;
      overflow:hidden!important;
    }
    .brandFree > div{
      min-width:0!important;
      overflow:hidden!important;
    }
    .brandFree strong{
      display:block!important;
      white-space:nowrap!important;
      overflow:hidden!important;
      text-overflow:ellipsis!important;
      line-height:1.08!important;
      font-size:17px!important;
    }
    .brandFree span{
      display:block!important;
      white-space:nowrap!important;
      overflow:hidden!important;
      text-overflow:ellipsis!important;
      font-size:12px!important;
      color:var(--muted)!important;
      margin-top:2px!important;
    }
    .brandLogoFree{
      width:52px!important;
      height:52px!important;
      max-width:52px!important;
      max-height:52px!important;
      min-width:52px!important;
      min-height:52px!important;
      flex:0 0 52px!important;
      object-fit:contain!important;
      object-position:center!important;
      display:block!important;
      background:transparent!important;
      border:0!important;
      outline:0!important;
      box-shadow:none!important;
      border-radius:0!important;
      padding:0!important;
      margin:0!important;
    }
    .brandFallback{
      width:52px!important;
      height:52px!important;
      flex:0 0 52px!important;
      display:grid!important;
      place-items:center!important;
      color:#062014!important;
      background:linear-gradient(135deg,var(--brand),#bef264)!important;
      border-radius:14px!important;
      font-weight:900!important;
    }
    @media(max-width:760px){
      .brandLogoFree{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;min-width:46px!important;min-height:46px!important;flex-basis:46px!important}
      .brandFree strong{font-size:16px!important}
    }

  

    /* V10.9 Mobile App Navigation */
    .mobileTop{display:none}
    .mobileBackdrop{display:none}
    .mobileMenuBtn{
      width:44px;height:44px;min-width:44px;border-radius:15px;
      display:grid;place-items:center;font-size:21px;
      background:rgba(255,255,255,.07);border:1px solid var(--line);
      box-shadow:0 12px 34px rgba(0,0,0,.22)
    }
    @media(max-width:1000px){
      body{overflow-x:hidden}
      .mobileTop{
        display:flex;align-items:center;gap:12px;
        position:sticky;top:0;z-index:80;
        margin:0;padding:10px 12px;
        border-radius:0 0 22px 22px;
        border-left:0;border-right:0;border-top:0;
        backdrop-filter:blur(18px)
      }
      .mobileTop .brandLogoFree{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;flex-basis:38px!important}
      .mobileTop .brandFree strong{font-size:15px!important}
      .mobileTop .brandFree span{font-size:11px!important;color:var(--brand)!important}
      .app{display:block;padding:12px;min-height:auto}
      .side{
        position:fixed!important;left:12px;top:12px;bottom:12px;z-index:100;
        width:min(315px,calc(100vw - 24px));height:auto!important;
        transform:translateX(calc(-100% - 24px));transition:transform .24s ease;
        border-radius:26px;padding:18px;overflow:auto;
        box-shadow:0 28px 80px rgba(0,0,0,.65)
      }
      .side.open{transform:translateX(0)}
      .mobileBackdrop.show{display:block;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.58);backdrop-filter:blur(4px)}
      .side .nav{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:9px!important;padding-bottom:0!important;scroll-snap-type:none!important}
      .side .nav button{
        width:100%!important;min-width:0!important;justify-content:flex-start!important;
        border-radius:17px!important;padding:13px 14px!important;font-size:15px!important;
        min-height:48px!important;scroll-snap-align:none!important;
        background:rgba(255,255,255,.04);border:1px solid transparent
      }
      .side .nav button.active{background:rgba(37,214,162,.14)!important;border-color:rgba(37,214,162,.28)!important}
      .main{gap:12px;margin-top:10px}
      .top{display:none!important}
      .footer{font-size:11px}
      .side #logout{min-height:48px;border-radius:17px;width:100%;margin-top:auto}
    }

  
    /* V11.0 Services Pro Editor Plus */
    .catPill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900;letter-spacing:.05em;white-space:nowrap;border:1px solid rgba(255,255,255,.1)}
    .cat-it{background:rgba(52,211,153,.13);color:#bbf7d0}.cat-web{background:rgba(168,85,247,.14);color:#e9d5ff}.cat-linkroot{background:rgba(59,130,246,.15);color:#bfdbfe}.cat-evento{background:rgba(251,191,36,.14);color:#fde68a}.cat-seo{background:rgba(45,212,191,.14);color:#ccfbf1}.cat-design{background:rgba(244,114,182,.14);color:#fbcfe8}.cat-maint{background:rgba(34,197,94,.13);color:#bbf7d0}.cat-digi{background:rgba(99,102,241,.15);color:#c7d2fe}.cat-default{background:rgba(148,163,184,.13);color:#e2e8f0}
    .inlineServiceInput{border-radius:12px;padding:9px 10px;min-width:160px;background:rgba(7,16,31,.78);border:1px solid rgba(255,255,255,.1)}.inlinePrice{min-width:110px;max-width:130px}.usedPill{display:inline-flex;border-radius:999px;padding:5px 9px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#cbd5e1;font-size:12px;font-weight:800}.serviceCards{display:none}.serviceCard{border:1px solid var(--line);border-radius:20px;padding:14px;background:rgba(255,255,255,.035);display:grid;gap:11px}.serviceCard.isOff{opacity:.72}.serviceCardHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.serviceCardBody{display:grid;gap:4px}.serviceStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.serviceStats span{border-radius:14px;background:rgba(255,255,255,.05);padding:8px 9px;text-align:center;font-size:12px;color:#dbeafe;font-weight:800}.serviceActions button{white-space:nowrap}
    @media(max-width:820px){.serviceTable{display:none}.serviceCards{display:grid;gap:12px}.inlineServiceInput{min-width:0}.serviceStats{grid-template-columns:1fr 1fr 1fr}.serviceActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.serviceActions button{width:100%}}

  
    /* V12.1 White Label Ready */
    .portalCard{--portal-brand:var(--brand)}
    .portalBrandLogo{width:54px;height:54px;object-fit:contain;display:block;flex:0 0 auto}
    .portalBrandText strong{font-size:18px}
    .portalBrandText span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
    .portalCard .eyebrow,.portalCard .docTotal{color:var(--portal-brand)}
    .portalCard .primary,.portalCard .success{background:var(--portal-brand)!important;color:#061411!important;border-color:transparent!important}


/* V12.3 Customer Portal true mobile cards fix */
.portalMobileList{display:none}.portalBalance{text-align:right}.portalSection{overflow:hidden}.portalTable{max-width:100%}.portalItemCard{border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:22px;padding:16px;display:grid;gap:14px;box-shadow:0 16px 40px rgba(0,0,0,.18)}.portalItemTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.portalItemTop strong{display:block;font-size:20px;letter-spacing:.02em}.portalItemTop span{display:block;color:var(--muted);font-weight:800;margin-top:3px}.portalInfoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.portalInfoGrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.portalInfoGrid div{border-radius:16px;background:rgba(3,9,20,.35);border:1px solid rgba(255,255,255,.07);padding:10px}.portalInfoGrid span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.portalInfoGrid b{display:block;margin-top:5px;font-size:15px;word-break:break-word}.portalOpenBtn{display:inline-flex;align-items:center;justify-content:center;width:max-content;min-width:132px;border-radius:999px;padding:12px 18px;background:var(--portal-brand,var(--brand));color:#04130f;text-decoration:none;font-weight:950;box-shadow:0 12px 30px rgba(37,214,162,.15)}
@media(max-width:760px){
  html,body,#root{max-width:100%;overflow-x:hidden!important}.docWrap.portalWrap{padding:14px!important;align-items:stretch!important}.portalWrap .docCard{width:100%!important;max-width:100%!important;padding:18px!important;border-radius:26px!important;overflow:hidden!important}.portalWrap .docHead{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}.portalBalance{text-align:left!important}.portalWrap .docTotal{font-size:36px!important}.portalMetrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.portalMetrics .metric{padding:13px!important}.portalToolbar{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;align-items:start!important}.portalToolbar .tiny{width:max-content}.portalWrap .portalTable{display:none!important}.portalWrap .portalMobileList{display:grid!important;gap:12px!important}.portalSection{margin-bottom:22px!important;padding:16px!important;border-radius:24px!important}.portalSection h3{font-size:22px!important}.portalItemTop strong{font-size:24px!important}.portalInfoGrid,.portalInfoGrid.three{grid-template-columns:1fr!important}.portalOpenBtn{width:100%;min-width:0}.portalWrap table,.portalWrap thead,.portalWrap tbody,.portalWrap tr,.portalWrap td,.portalWrap th{display:revert}.portalWrap td::before{content:none!important;display:none!important}.portalWrap .tableWrap{overflow:visible!important}.portalWrap .brandFree{align-items:center!important}.portalBrandLogo{width:48px!important;height:48px!important}.portalBrandText strong{font-size:16px!important}.portalWrap h1{font-size:34px!important;line-height:1.05!important;word-break:break-word}.portalWrap .muted{line-height:1.45!important}.footer{word-break:break-word;overflow-wrap:anywhere}
}

    /* V14 Project Workspace */
    .projectGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .projectCard{border:1px solid var(--line);border-radius:20px;padding:16px;background:rgba(255,255,255,.035)}
    .projectMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
    .projectMeta div{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(0,0,0,.12)}
    .projectMeta span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.projectMeta b{font-size:14px}
    @media(max-width:760px){.projectGrid{grid-template-columns:1fr}.projectMeta{grid-template-columns:1fr}.projectCard .actions{display:grid}.projectCard .actions>*{width:100%;text-align:center;justify-content:center}}

    /* V13 Recurring Billing Engine */
    .subStatus{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;background:rgba(96,165,250,.14);color:#bfdbfe}
    .subStatus.active{background:rgba(52,211,153,.15);color:#bbf7d0}.subStatus.paused{background:rgba(251,191,36,.14);color:#fde68a}.subStatus.cancelled{background:rgba(251,113,133,.14);color:#fecdd3}
    .planHint{border:1px solid rgba(37,214,162,.22);background:rgba(37,214,162,.07);border-radius:18px;padding:14px;color:#c9d7ef}
    .miniGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    .miniGrid .panel{padding:14px;border-radius:18px;box-shadow:none}
    @media(max-width:760px){.miniGrid{grid-template-columns:1fr}.subscriptionCards{display:grid;gap:12px}.subscriptionCards .portalItemCard{display:block}.subscriptionTable{display:none!important}}
    @media(min-width:761px){.subscriptionCards{display:none}}


    .miniStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:12px}
    .miniStats div{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px}
    .miniStats span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
    .miniStats strong{font-size:24px}
    .metric small{display:block;color:var(--muted);font-size:12px;margin-top:8px;font-weight:700}
    @media(max-width:760px){.miniStats{grid-template-columns:1fr}.miniStats strong{font-size:21px}}
  

    /* V13.5 Client Payment Actions + Proof Upload */
    .paymentActionGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
    .payActionCard{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.035)}
    .payActionCard b{display:block;margin-bottom:6px;color:#fff}
    .payActionCard span{display:block;color:var(--muted);font-size:12px;line-height:1.35}
    .proofForm{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
    .proofForm .primary{width:100%}
    .proofResult{margin-top:10px;border-radius:14px;padding:12px;background:rgba(37,214,162,.10);border:1px solid rgba(37,214,162,.25);color:#bbf7d0;font-size:13px}
    @media(max-width:760px){.paymentActionGrid{grid-template-columns:1fr}.payActionCard{padding:13px}.proofForm .split{grid-template-columns:1fr!important}}

  
    /* V13.6 Proof Review Center */
    .proofGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
    .proofCard{display:grid;gap:12px;border:1px solid var(--line);border-radius:20px;padding:16px;background:rgba(255,255,255,.035)}
    .proofTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .proofMeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .proofMeta div{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(0,0,0,.12)}
    .proofMeta span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:.08em}
    .proofMeta b{display:block;margin-top:4px;overflow-wrap:anywhere}
    .proofPreview{display:block;width:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#050814;min-height:96px}
    .proofPreview img{width:100%;max-height:220px;object-fit:cover;display:block}
    .proofReviewActions{display:flex;gap:8px;flex-wrap:wrap}
    @media(max-width:900px){.proofGrid{grid-template-columns:1fr}.proofMeta{grid-template-columns:1fr}.proofReviewActions{display:grid}.proofReviewActions button,.proofReviewActions a{width:100%;text-align:center}}

/* V14.5 App Shell Polish Pro
   Purpose: premium app shell, global cards, tables, forms, mobile menu and loading polish.
   Scope: CSS only. No Supabase/PHP/DB logic changes.
*/
:root{
  --panelGlow:rgba(37,214,162,.13);
  --panelGlow2:rgba(96,165,250,.11);
  --softLine:rgba(255,255,255,.075);
  --strongLine:rgba(255,255,255,.14);
  --cardTop:rgba(17,27,48,.92);
  --cardBottom:rgba(7,12,24,.96);
  --appRadius:26px;
}
::selection{background:rgba(37,214,162,.32);color:#fff}
body{
  background:
    radial-gradient(circle at 8% -5%,rgba(37,214,162,.20),transparent 30%),
    radial-gradient(circle at 94% 2%,rgba(96,165,250,.18),transparent 34%),
    radial-gradient(circle at 65% 88%,rgba(168,85,247,.10),transparent 28%),
    linear-gradient(135deg,#040710,#08101f 44%,#050814);
}
body:before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.62),transparent 72%);
  z-index:-1;
}
.glass,.panel{
  background:linear-gradient(180deg,var(--cardTop),var(--cardBottom));
  border-color:var(--softLine);
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045);
}
.app{
  gap:20px;
  padding:20px;
}
.side{
  border-radius:30px;
  padding:20px;
  background:
    radial-gradient(circle at 20% 0,rgba(37,214,162,.13),transparent 36%),
    linear-gradient(180deg,rgba(15,25,45,.94),rgba(6,11,22,.96));
  border-color:rgba(255,255,255,.105);
}
.side .brand{
  padding:10px;
  border-radius:22px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.side .brandFree span{color:rgba(142,160,189,.92)!important}
.side .footer{
  margin-top:auto;
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  overflow-wrap:anywhere;
}
.nav{gap:10px}
.nav button{
  position:relative;
  min-height:46px;
  border-radius:18px;
  padding:12px 13px;
  border:1px solid transparent;
  color:#d7e3f8;
  background:rgba(255,255,255,.026);
  box-shadow:none;
}
.nav button span:first-child{
  width:28px;
  height:28px;
  display:inline-grid;
  place-items:center;
  border-radius:11px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.nav button.active{
  background:linear-gradient(135deg,rgba(37,214,162,.18),rgba(96,165,250,.075));
  border-color:rgba(37,214,162,.30);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07);
}
.nav button.active:after{
  content:'';
  position:absolute;
  right:12px;
  width:7px;
  height:7px;
  border-radius:99px;
  background:var(--brand);
  box-shadow:0 0 18px rgba(37,214,162,.85);
}
.nav button:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.11);
}
.main{gap:16px;min-width:0}
.top{
  min-height:88px;
  border-radius:30px;
  padding:20px 22px;
  background:
    radial-gradient(circle at 88% 0,rgba(37,214,162,.14),transparent 34%),
    radial-gradient(circle at 55% 120%,rgba(96,165,250,.10),transparent 38%),
    linear-gradient(180deg,rgba(17,27,48,.94),rgba(8,14,27,.95));
  border-color:rgba(255,255,255,.09);
}
.top h2{
  margin-bottom:0;
  font-size:30px;
  line-height:1;
}
.top .eyebrow{margin-bottom:7px}
.topActions .ghost:before{content:'Live';font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--brand);padding-right:2px}
.panel{
  border-radius:26px;
  padding:22px;
  position:relative;
}
.panel:where(:not(.servicesCommandHero)):hover{
  border-color:rgba(255,255,255,.12);
}
.panel h3{
  font-size:21px;
  line-height:1.08;
}
.metric{
  overflow:hidden;
  min-height:132px;
}
.metric:after{
  content:'';
  position:absolute;
  width:125px;
  height:125px;
  right:-48px;
  top:-52px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(37,214,162,.16),transparent 68%);
  pointer-events:none;
}
.metric span{
  color:#a9b8d2;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.095em;
  font-weight:900;
}
.metric strong{
  color:#fff;
  font-size:30px;
  line-height:1.08;
}
.metric small{color:#93a6c5!important}
.toolbar{
  align-items:center;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.toolbar h3{margin-bottom:4px}
.searchBox{
  max-width:390px;
  background:rgba(4,10,21,.62);
  border-color:rgba(255,255,255,.11);
}
input,select,textarea{
  background:linear-gradient(180deg,rgba(4,10,21,.76),rgba(7,16,31,.86));
  border-color:rgba(255,255,255,.11);
  border-radius:16px;
  color:#f4f8ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
input::placeholder,textarea::placeholder{color:rgba(142,160,189,.74)}
label{color:#d6e2f6;font-weight:700}
button,.button,a.tiny,a.ghost,a.success,a.primary{
  min-height:40px;
  letter-spacing:-.01em;
}
.primary,a.primary{
  box-shadow:0 14px 30px rgba(37,214,162,.16),inset 0 1px 0 rgba(255,255,255,.26);
}
.ghost,a.ghost{
  color:#ecf4ff;
}
.danger,a.danger{
  box-shadow:0 12px 24px rgba(251,113,133,.08);
}
.tableWrap{
  border-radius:22px;
  border-color:rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.010));
}
.tableWrap table{background:transparent}
th{
  padding:14px 12px;
  color:#9fb1cf;
  background:rgba(255,255,255,.032);
}
td{
  padding:14px 12px;
  border-bottom-color:rgba(255,255,255,.066);
}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(37,214,162,.035)}
.badge{
  border:1px solid rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.actions{gap:9px}
.toast{
  border-radius:20px;
  background:linear-gradient(180deg,rgba(10,19,36,.98),rgba(4,10,21,.98));
  border-color:rgba(37,214,162,.42);
  box-shadow:0 24px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.035) inset;
}
.loading{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#dffcf5;
  font-weight:900;
  letter-spacing:-.02em;
  background:
    radial-gradient(circle at 50% 42%,rgba(37,214,162,.18),transparent 24%),
    linear-gradient(135deg,#040710,#08101f 48%,#050814);
}
.loading:before{
  content:'';
  width:46px;
  height:46px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--brand);
  animation:uptimeSpin .82s linear infinite;
  flex:0 0 auto;
}
@keyframes uptimeSpin{to{transform:rotate(360deg)}}
form.panel.stack{gap:13px}
form.panel.stack h3{
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.miniStats div,.projectCard,.payActionCard,.proofCard,.portalItemCard{
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.alert{
  border-radius:18px;
}

@media(max-width:1000px){
  .mobileTop{
    background:linear-gradient(180deg,rgba(15,25,45,.92),rgba(7,13,25,.92));
    border-bottom:1px solid rgba(255,255,255,.09)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.34);
  }
  .mobileMenuBtn{
    border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
  }
  .side{
    border-radius:28px!important;
    background:
      radial-gradient(circle at 20% 0,rgba(37,214,162,.16),transparent 38%),
      linear-gradient(180deg,rgba(15,25,45,.98),rgba(5,10,20,.98))!important;
    overflow:auto!important;
  }
  .side .brand{padding:9px}
  .main{margin-top:12px}
}
@media(max-width:760px){
  .app{padding:10px!important}
  .main{padding:0 0 18px!important;gap:12px!important}
  .panel{border-radius:24px;padding:17px}
  .grid{gap:12px!important}
  .metric{min-height:112px}
  .metric strong{font-size:25px}
  .toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:stretch!important;
  }
  .toolbar .searchBox{width:100%;max-width:none}
  .mobileTop{padding:10px 12px!important;border-radius:0 0 24px 24px!important}
  .side .footer{display:block!important}
  .nav button.active:after{right:14px}
  .tableWrap{border:0;background:transparent}
  .main .tableWrap tr{
    border-radius:22px!important;
    border-color:rgba(255,255,255,.105)!important;
    background:linear-gradient(180deg,rgba(16,27,49,.94),rgba(7,13,25,.98))!important;
  }
  .main .tableWrap td:first-child{font-size:17px!important}
  .actions button,.actions a{min-height:43px}
}
@media(max-width:420px){
  .panel{padding:15px;border-radius:21px}
  .metric strong{font-size:23px}
  .side{left:10px!important;right:10px!important;top:10px!important;bottom:10px!important;width:calc(100vw - 20px)!important}
}