:root { --ink:#151515; --muted:#717171; --paper:#fff; --bg:#f5f3f0; --violet:#292929; --soft:#e8e3de; --green:#287a62; --orange:#9d5c20; --red:#a2393d; --pink:#e7a7c7; }
.welcome{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#151515,#343030);color:#fff;border-radius:20px;padding:19px;margin-bottom:12px;box-shadow:0 10px 26px #0002}.welcome .eyebrow,.welcome .sub{color:#e7e1dc}.welcome h1{margin:4px 0 0;font-size:26px}.welcome-mark{width:48px;height:48px;border:1px solid #ffffff55;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:27px;font-weight:800;color:var(--pink)}.highlight{background:linear-gradient(135deg,#fff,#fff6fa);border:1px solid #f0dce6}.highlight strong{font-size:28px}.highlight small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.brand-lockup{display:flex;align-items:center;gap:10px}.logo{width:47px;height:47px;border-radius:50%;object-fit:cover;box-shadow:0 4px 13px #0003}
.backup{display:block;width:100%;margin:12px 0 2px;padding:10px;border-radius:12px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;border:1px dashed #d8d1ca}.backup:active{background:#eee8e3}
.sync-error-card{margin:0 0 14px;padding:12px;border:1px solid #f0b4b4;border-radius:12px;background:#fff2f2;color:#8e3030;font-size:12px;line-height:1.4;word-break:break-word}.sync-error-card b{display:block;margin-bottom:6px}.sync-error-card div{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;white-space:pre-wrap}
.profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.edit-client{padding:9px 12px;border-radius:10px;background:#f2ece7;color:var(--ink);font-size:12px;font-weight:800}.customer-header{border:1px solid #eee7e1;box-shadow:0 8px 22px #32271e0a}.customer-header h1{letter-spacing:-.8px}.metrics .metric small{line-height:1.35}.bottom-nav{border-color:#f4ede8}.bottom-nav button.active{outline:1px solid #ffffff33}.ai-card{box-shadow:0 12px 28px #17120d24}
.privacy-toggle{display:inline-grid;place-items:center;width:21px;height:21px;margin-left:5px;padding:0;border-radius:7px;background:#eee8e3;color:var(--ink);font-size:13px;vertical-align:middle}.privacy-toggle:active{transform:scale(.92)}.private-hidden{letter-spacing:2px;color:#6e6864!important}
.sync-wrap{display:flex;align-items:center;gap:7px}.sync-indicator{max-width:150px;font-size:9px;text-align:right;color:var(--muted);line-height:1.2}.sync-indicator::before{content:"●";font-size:8px;color:#c7932b;margin-right:3px}.sync-indicator.is-live::before{color:#287a62}.sync-indicator.is-error{color:#b64242}.sync-indicator.is-error::before{color:#b64242}.sync-indicator:not(:empty){display:block}
.nav-icon{font-size:18px;line-height:1}.desktop-nav button{display:inline-flex;align-items:center;gap:6px}.metric{transition:transform .18s ease,box-shadow .18s ease}.metric:active{transform:scale(.98)}.metric.success strong,.metric.profit strong{color:var(--green)}.metric.expense strong,.expense-amount{color:var(--red)}.expense-dot{width:34px;height:34px;border-radius:11px;background:#fff0f0;color:var(--red);display:grid;place-items:center;font-weight:900}.primary{transition:transform .16s ease,box-shadow .16s ease}.primary:active{transform:translateY(1px) scale(.985);box-shadow:0 2px 8px #0003}.list{border:1px solid #eee8e3}.row{transition:background .15s ease}.row:active{background:#faf5f7}#app{padding-bottom:42px}@media(min-width:650px){.desktop-nav{display:flex}}@media(max-width:649px){.desktop-nav{display:flex;overflow-x:auto;margin-bottom:18px}.desktop-nav button{flex:0 0 auto;padding:8px 10px}}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric label{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.delta{font-size:10px;font-weight:700;padding:1px 5px;border-radius:999px}
.delta.up{background:#e8f5e9;color:#287a62}.delta.down{background:#fdeaea;color:#a2393d}
.visual-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.visual-row.two-col{grid-template-columns:1fr 1fr}
.card{background:var(--paper);border-radius:16px;padding:16px;box-shadow:0 2px 12px #b5aaa933}
.card h3{font-size:13px;font-weight:700;color:var(--muted);margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}
.circular-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.circular-wrap{position:relative;width:110px;height:110px;margin:0 auto 8px}
.circular{position:relative;width:100%;height:100%}
.circular::before{content:"";position:absolute;inset:0;border-radius:50%;border:8px solid #eee8e3}
.circular::after{content:"";position:absolute;inset:0;border-radius:50%;border:8px solid var(--color);transform:rotate(-90deg);animation:circ 1s ease-out forwards;clip-path:polygon(50% 50%,50% 0,100% 0,100% 100%,50% 100%,50% 50%)}
@keyframes circ{from{clip-path:polygon(50% 50%,50% 0,50% 0,50% 0,50% 50%,50% 50%)}to{clip-path:polygon(50% 50%,50% 0,100% 0,100% 100%,50% 100%,50% 50%)}}
.circular span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--ink)}
.circular-label{font-size:11px;color:var(--muted);margin:0}
.spark-card{grid-column:span 3}
.sparkline-wrap{height:60px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 4px 8px}
.spark{height:100%}
.spark-legend{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:0 4px}
.kw-list{display:flex;flex-direction:column;gap:8px}
.kw-item{display:flex;align-items:center;gap:8px;font-size:12px}
.kw-rank{width:20px;height:20px;border-radius:50%;background:var(--soft);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:11px}
.kw-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kw-value{font-weight:700;color:var(--ink);white-space:nowrap}
.kw-bar{height:4px;background:linear-gradient(90deg,#4f46e5,#287a62);border-radius:2px;min-width:20px}
@media(max-width:649px){
  .visual-row{grid-template-columns:1fr}
  .visual-row.two-col{grid-template-columns:1fr}
  .spark-card{grid-column:auto}
  .metrics-grid{grid-template-columns:1fr}
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 92% 12%,#ecc7df55,transparent 25%),var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} button,input,textarea{font:inherit} button{border:0;cursor:pointer} #app{max-width:720px;margin:auto;min-height:100vh;padding:22px 16px 100px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.brand-lockup{display:flex;align-items:center;gap:10px}.logo{width:47px;height:47px;border-radius:50%;object-fit:cover;box-shadow:0 4px 13px #0003}.brand{font-size:21px;font-weight:900;letter-spacing:1px}.sub{font-size:12px;color:var(--muted);margin-top:3px}.avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800}.nav{display:flex;gap:7px;overflow:auto;margin:0 -3px 22px;padding:3px}.nav button{background:transparent;color:var(--muted);padding:9px 12px;border-radius:10px;font-size:13px;white-space:nowrap}.nav button.active{background:var(--ink);color:#fff;box-shadow:0 3px 10px #0002;font-weight:700}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{background:var(--paper);border-radius:16px;padding:15px;box-shadow:0 2px 12px #b5aaa933}.metric.wide{grid-column:span 2}.metric label,.eyebrow{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}.metric strong{display:block;font-size:23px;margin-top:7px;letter-spacing:-.7px}.metric.pending strong{color:var(--orange)}h1{font-size:26px;letter-spacing:-.8px;margin:0 0 5px}h2{font-size:17px;margin:27px 0 12px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.primary,.secondary,.danger{padding:14px 15px;border-radius:13px;font-weight:700;text-align:center}.primary{color:#fff;background:var(--ink);box-shadow:0 5px 14px #0003}.secondary{background:var(--paper);color:var(--ink);border:1px solid #e6e1dd}.danger{background:#fff0f0;color:var(--red)}.ai-card{margin-top:24px;background:linear-gradient(135deg,#171717,#413a3d);color:#fff;padding:18px;border-radius:18px;border-bottom:3px solid var(--pink)}.ai-card h2{margin:0 0 5px}.ai-card p{font-size:13px;margin:0 0 15px;opacity:.85}.ai-row{display:flex;gap:8px}.ai-row input{width:100%;border:0;border-radius:11px;padding:12px}.mic{width:47px;border-radius:11px;background:#ffffff25;color:white;font-size:19px}.list{background:var(--paper);border-radius:16px;overflow:hidden;box-shadow:0 2px 12px #b5aaa933}.row{padding:15px 14px;border-bottom:1px solid #f0ece8;display:flex;align-items:center;gap:11px}.row:last-child{border:0}.row-main{flex:1;min-width:0}.row-title{font-weight:700}.row-detail{font-size:13px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.amount{text-align:right;font-weight:750;font-size:14px}.amount small{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:3px}.badge{font-size:10px;padding:5px 7px;border-radius:20px;font-weight:800;text-transform:uppercase}.badge.paid{background:#e6f7f0;color:var(--green)}.badge.partial{background:#fff3df;color:var(--orange)}.badge.pending{background:#fff0f0;color:var(--red)}.search{width:100%;border:1px solid #e2ddd8;border-radius:12px;padding:13px;background:white;margin:13px 0}.empty{text-align:center;color:var(--muted);padding:32px 18px;background:var(--paper);border-radius:16px}.fab{position:fixed;bottom:20px;right:max(18px,calc((100vw - 720px)/2 + 18px));width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;font-size:29px;box-shadow:0 5px 18px #0004}.modal-backdrop{position:fixed;inset:0;background:#15151580;display:flex;align-items:flex-end;z-index:10}.modal{width:100%;max-width:720px;margin:auto;background:var(--bg);border-radius:23px 23px 0 0;padding:23px 16px max(22px,env(safe-area-inset-bottom));max-height:94vh;overflow:auto}.modal h2{margin:0 0 18px}.field{display:block;font-size:12px;font-weight:700;color:var(--muted);margin:15px 0 6px}.field input,.field textarea,.field select{display:block;width:100%;padding:13px;border-radius:11px;border:1px solid #e1dcd7;background:white;color:var(--ink);margin-top:6px}.field textarea{min-height:75px;resize:vertical}.modal-actions{display:flex;gap:10px;margin-top:21px}.modal-actions button{flex:1}.confirm-grid{background:#fff;border-radius:14px;padding:14px;margin:12px 0}.confirm-grid div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #eee}.confirm-grid div:last-child{border:0}.notice{font-size:13px;padding:11px;border-radius:10px;background:#fff4f8;color:#7d3557;margin:12px 0}.customer-header{background:var(--paper);border-radius:18px;padding:18px}.customer-header h1{font-size:24px}.back{background:transparent;color:var(--ink);font-weight:700;padding:0 0 16px}.payment-history{padding:8px 0 0 12px;border-left:2px solid var(--pink);margin:10px 0 2px 4px}.payment-item{font-size:12px;color:var(--muted);margin:6px 0}.voice-listening{animation:pulse 1s infinite;background:#fff!important;color:var(--ink)!important}@keyframes pulse{50%{transform:scale(1.08)}}@media(min-width:650px){#app{padding-top:35px}.metrics{grid-template-columns:repeat(4,1fr)}.metric.wide{grid-column:span 1}.actions{grid-template-columns:repeat(3,1fr)}}