:root{--blue:#2297d3;--blue-dark:#1479ae;--yellow:#ffeb2f;--cream:#fffbea;--ink:#20242a;--muted:#737981;--red:#ef5b52;--green:#209447;--line:#e5e8eb;--white:#fff;--shadow:0 18px 50px rgba(22,55,74,.13)}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#f3f6f8}button,input{font:inherit}button{cursor:pointer}.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#f8fbfd 0 55%,#dff2fc 55%)}.login-card{width:min(430px,100%);padding:38px;background:#fff;border-radius:22px;box-shadow:var(--shadow)}.mark{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--yellow);color:var(--blue-dark);font-weight:900;margin-bottom:22px}.eyebrow,.app-kicker{margin:0 0 7px;color:var(--blue-dark);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em}.login-card h1{font-size:2rem;line-height:1.08;margin:0 0 12px}.muted{color:var(--muted);line-height:1.6}.login-card form{display:grid;gap:16px;margin-top:26px}label{display:grid;gap:7px;font-size:.84rem;font-weight:700}input{width:100%;padding:13px 14px;border:1px solid #ccd4da;border-radius:10px;outline:none}input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(34,151,211,.13)}button[type=submit]{border:0;border-radius:10px;background:var(--blue);color:#fff;padding:14px;font-weight:800}.status{min-height:20px;color:var(--red);margin:0;font-size:.85rem}
.app-header{min-height:82px;padding:14px clamp(18px,4vw,58px);display:flex;align-items:center;gap:18px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.app-header h1{margin:0;font-size:1.35rem}.header-actions{margin-left:auto;display:flex;align-items:center;gap:18px;color:var(--muted);font-size:.83rem}.text-button,.icon-button{border:0;background:transparent;color:var(--blue-dark);font-weight:800}.icon-button{font-size:1.6rem}.selection-view{padding:38px clamp(18px,5vw,72px);max-width:1250px;margin:auto}.selection-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.selection-heading h2{font-size:1.75rem;margin:0}.count-pill{padding:7px 12px;border-radius:999px;background:#e1f2fb;color:var(--blue-dark);font-weight:800;font-size:.78rem}.selection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.selection-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:20px;text-align:left;box-shadow:0 6px 22px rgba(35,63,78,.06);transition:.2s}.selection-card:hover{transform:translateY(-2px);border-color:#8dcced}.selection-card .avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#e4f5fd;color:var(--blue-dark);font-weight:900;margin-bottom:15px}.selection-card strong{display:block;font-size:1rem}.selection-card small{display:block;color:var(--muted);margin-top:6px}.empty{text-align:center;padding:50px;color:var(--muted)}
.mobile-app{width:min(960px,100%);margin:28px auto 60px;background:var(--cream);box-shadow:var(--shadow);min-height:640px;overflow:hidden;border-radius:18px}.mobile-titlebar{height:78px;padding:0 26px;display:flex;align-items:center;gap:24px;background:var(--yellow);color:var(--blue-dark);font-size:1.35rem}.mobile-titlebar strong{flex:1}.menu-glyph{color:#62673c}.sync-glyph{font-size:2rem}.tabs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--yellow)}.tab{padding:14px 8px 12px;border:0;border-bottom:4px solid transparent;background:transparent;color:#35392f;font-weight:700}.tab span{display:block;font-size:1.25rem;color:#747953;margin-bottom:8px}.tab.active{border-color:var(--blue);color:#111}.app-meta{display:flex;justify-content:space-between;padding:12px 20px;background:#fff9c9;color:#73735e;font-size:.78rem}.data-content{padding:20px}.client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 14px}.client-card{text-align:center;min-width:0}.folder{width:58px;height:46px;margin:10px auto 8px;background:linear-gradient(90deg,#ffd91c,#fff62b 70%,#eab900);border-radius:3px 3px 7px 7px;position:relative;box-shadow:-8px 9px 0 -3px #8c8c82}.folder:before{content:"";position:absolute;width:28px;height:9px;background:#ffd91c;top:-7px;left:4px;border-radius:3px 3px 0 0}.client-name{color:var(--blue-dark);font-weight:800;font-size:.84rem;overflow-wrap:anywhere}.balance{margin-top:6px;font-size:.84rem;font-weight:800}.negative{color:var(--red)}.positive{color:var(--green)}.neutral{color:#111}.transaction-list{display:grid;gap:2px}.transaction{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:14px;padding:12px 8px;border-bottom:1px solid rgba(0,0,0,.04)}.transaction-icon{width:58px;height:58px;border-radius:50%;background:repeating-radial-gradient(circle,#68c8ef 0 2px,#e7fbff 3px 5px);border:2px solid #52b7e2}.transaction strong{display:block}.transaction time{display:block;color:var(--blue);margin:4px 0}.transaction p{margin:0;font-style:italic;line-height:1.25}.transaction-amount{align-self:center;text-align:right;font-weight:800}.credits-view{background:linear-gradient(#fffdf1 35%,#ffd5c3)}.payments-view{background:linear-gradient(#fffdf1 35%,#d9efc2)}
@media(max-width:680px){.app-header{min-height:68px}.header-actions #identity{display:none}.selection-view{padding-top:24px}.mobile-app{margin:0;border-radius:0;min-height:calc(100vh - 68px)}.client-grid{grid-template-columns:repeat(3,1fr)}.transaction{grid-template-columns:50px minmax(0,1fr) auto}.transaction-icon{width:48px;height:48px}.data-content{padding:14px 10px}}@media(max-width:430px){.client-grid{grid-template-columns:repeat(2,1fr)}.mobile-titlebar{padding:0 18px}.transaction{gap:9px}.transaction-amount{font-size:.85rem}}