:root{--brand: #66b2b2;--brand-strong: #4a9698;--ink: #1f2937;--muted: #64748b;--line: #e5ecef;--surface: #ffffff;--canvas: #f1f6f6}*{box-sizing:border-box}html,body{margin:0;font-family:Plus Jakarta Sans,sans-serif;background:radial-gradient(circle at 0% 0%,#d5ecec,#f5f8f8 42%,#eef3f3);color:var(--ink)}.material-symbols-outlined{font-size:20px;line-height:1}.workspace{max-width:460px;margin:0 auto;padding:18px 16px 30px}.page-header h1{margin:4px 0;font-size:24px}.page-header .eyebrow{margin:0;color:var(--brand-strong);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.page-header .lede{margin:0;color:var(--muted);max-width:420px;font-size:14px}.app-stage{display:flex;justify-content:center;margin-top:14px}.screen-grid{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px}.screen-card{display:flex;flex-direction:column;width:min(390px,100%);gap:8px}.screen-card h2{margin:0;font-size:17px}.screen-card p{margin:0;font-size:12px;color:var(--muted)}.phone{position:relative;width:390px;height:844px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#ecf5f5,#f7f8f8 35% 100%);border:1px solid #dce6ea;box-shadow:0 14px 30px #0f172a21;margin:0 auto}.phone-bg-glow{position:absolute;inset:-110px auto auto -70px;width:320px;height:320px;border-radius:999px;background:radial-gradient(circle at 35% 35%,#66b2b270,#66b2b224 45%,#66b2b200 75%);pointer-events:none}.phone-content{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;overflow:auto;padding:18px 16px 88px;scrollbar-width:thin}.native-header{display:flex;align-items:center;justify-content:space-between}.header-title{display:flex;flex-direction:column;align-items:center;gap:2px}.header-title strong{font-size:17px}.header-title span{color:var(--brand-strong);font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:#475569;cursor:pointer}.is-hidden{visibility:hidden;pointer-events:none}.greeting p{margin:0;font-size:13px;color:#4b5563}.greeting h3{margin:2px 0 4px;font-size:43px;line-height:1.05;letter-spacing:-.02em}.chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:#475569;font-size:11px}.chip{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);padding:6px 10px;background:#fff;font-size:11px;font-weight:700;cursor:pointer}.chip-primary{color:var(--brand-strong);border-color:#cfe7e7;background:#eaf6f6}.billing-card{border-radius:14px;background:linear-gradient(145deg,#66b2b2,#4a9698 70%,#3f8486);box-shadow:0 14px 26px #438a8c4d;padding:16px;color:#fff}.billing-top{display:flex;justify-content:space-between}.billing-top .label{margin:0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.07em;opacity:.9}.billing-top h4{margin:0;font-size:42px}.billing-top p{margin:4px 0 0;opacity:.9;font-size:12px}.billing-top .material-symbols-outlined{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#ffffff38}.billing-actions{display:flex;gap:8px;margin-top:10px}.billing-card small{display:block;margin-top:7px;font-size:11px;font-weight:600;opacity:.9}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.quick-action{border:1px solid var(--line);border-radius:9px;background:#fff;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#4b5563;font-size:11px;font-weight:700;cursor:pointer}.quick-action .material-symbols-outlined{background:#eef6f6;border:1px solid #dce8eb;border-radius:6px;padding:7px;font-size:15px;color:#64748b}.card{border-radius:12px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 18px #1118270d;padding:12px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-head h5{margin:0;font-size:13px}.card-head a{color:var(--brand-strong);text-decoration:none;font-size:11px;font-weight:700}.list-row{display:flex;align-items:center;justify-content:space-between;margin-top:9px;gap:8px}.list-row.muted{margin-top:7px;color:var(--muted);font-size:11px}.date-pill{width:58px;border-radius:8px;border:1px solid #e6ecef;background:#f8fcfc;text-align:center;padding:7px 0}.date-pill small{display:block;font-size:9px;color:#64748b;font-weight:700}.date-pill strong{font-size:24px}.row-copy{flex:1;display:flex;flex-direction:column}.row-copy strong{font-size:14px}.row-copy span{font-size:11px;color:var(--muted)}.pill-number{min-width:32px;height:32px;border-radius:999px;background:#66b2b2;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}.bottom-nav{position:absolute;left:12px;right:12px;bottom:10px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border:1px solid rgba(255,255,255,.55);background:#ffffffb8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 24px #1118271a}.nav-item{width:66px;height:34px;border-radius:8px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;color:#98a2b3;cursor:pointer}.nav-item.active{background:#66b2b229;color:var(--brand-strong)}.drawer{position:absolute;left:12px;right:12px;bottom:70px;border-radius:14px;border:1px solid rgba(229,236,240,.95);background:#ffffffdb;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 30px #11182724;padding:10px 12px 12px}.drawer.hidden{display:none}.drawer-handle{width:56px;height:4px;border-radius:999px;margin:0 auto 8px;background:#d4dbe2}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head h6{margin:0;font-size:13px}.drawer-head span{font-size:10px;font-weight:800;color:var(--brand-strong);background:#eaf6f6;border-radius:999px;padding:3px 8px}.drawer-items{display:flex;flex-direction:column;gap:6px;margin-top:8px}.drawer-item{width:100%;padding:10px;border-radius:9px;border:1px solid #e8edf1;background:#fff;display:flex;justify-content:space-between;font-size:12px;font-family:inherit;cursor:pointer}.drawer-item-featured{border-color:#dcedee;background:#f8fcfc}.drawer-item span:last-child{color:#64748b;font-weight:700}.search-box{height:40px;border-radius:9px;border:1px solid var(--line);background:#fff;padding:0 10px;display:flex;align-items:center;gap:8px;color:#94a3b8;font-size:12px;font-weight:600}.table-card{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}.table-head,.table-row{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:10px;align-items:center;padding:10px 12px}.table-head{background:#f8fcfc;color:#64748b;font-size:11px;font-weight:800}.table-row{border-top:1px solid #eef2f4;font-size:12px}.status{display:inline-flex;align-items:center;justify-content:center;width:fit-content;border-radius:7px;padding:4px 8px;font-size:10px;font-weight:800}.status.pending{color:#92400e;background:#fef3c7}.status.paid{color:#166534;background:#dcfce7}.status.late{color:#991b1b;background:#fee2e2}.table-meta{display:flex;justify-content:space-between;color:#64748b;font-size:11px}.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn{min-height:38px;border-radius:9px;border:1px solid transparent;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer}.btn-primary{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff}.btn-warning{background:#f59e0b;border-color:#f59e0b;color:#fff}.btn-outline{background:#fff;border-color:#d9e2e7;color:#334155;font-weight:700}.btn-white{background:#fff;border-color:#fff;color:var(--brand-strong);flex:1}.btn-ghost{background:#ffffff1a;border-color:#ffffff57;color:#fff;width:94px}.form-card h5,.detail-grid h5,.event-card h5,.legend-card h5{margin:0;font-size:12px}label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#64748b;font-weight:700}input,textarea{border:1px solid #d9e2e7;border-radius:9px;min-height:40px;padding:0 10px;font:inherit;font-size:12px;color:#111827}textarea{min-height:74px;padding:10px}.input-error{border-color:#fca5a5}label small{color:#dc2626;font-size:10px;font-weight:700}.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toggles label{flex-direction:row;align-items:center;color:#334155}.toggles input{min-height:auto}.switch-row{display:flex;justify-content:space-between;align-items:center;margin-top:2px;color:#334155;font-size:11px;font-weight:700}.switch{width:42px;height:24px;border-radius:999px;background:#cbd5e1;position:relative}.switch:after{content:"";width:18px;height:18px;border-radius:999px;background:#fff;position:absolute;top:3px;left:3px}.switch.on{background:var(--brand)}.switch.on:after{left:21px}.dropzone{min-height:72px;border:1px dashed #a9bbc5;border-radius:10px;background:#f8fcfc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#475569;font-size:11px;font-weight:700}.hero-media{width:100%;height:132px;border-radius:10px;background:linear-gradient(145deg,#d6ecec,#b8dddd)}.subtext{margin:4px 0 0;color:#64748b;font-size:11px}.detail-grid>div{display:flex;justify-content:space-between;font-size:11px}.detail-grid>div span{color:#64748b}.detail-grid>div strong{font-weight:700}.detail-grid p{margin:3px 0 0;font-size:11px;color:#334155}.card p{margin:5px 0 0;color:#475569;font-size:12px}.demo-dialog{border:0;border-radius:14px;padding:0;max-width:320px;width:calc(100% - 32px);box-shadow:0 20px 36px #0f172a47}.demo-dialog::backdrop{background:#0f172a6b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.demo-dialog-body{display:flex;flex-direction:column;gap:10px;padding:16px;background:#fff}.demo-dialog-body h3{margin:0;font-size:16px}.demo-dialog-body p{margin:0;color:#475569;font-size:13px}.timeline{margin:6px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px}.timeline li{font-size:11px;color:#334155}.timeline li span{display:block;color:#64748b;font-size:10px;margin-top:2px}.attachment-row{border:1px solid var(--line);border-radius:9px;background:#f8fcfc;padding:9px 10px;display:flex;justify-content:space-between;font-size:11px}.calendar-strip{display:flex;gap:6px}.calendar-strip button{width:44px;min-height:54px;border-radius:9px;border:1px solid var(--line);background:#f8fcfc;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#475569}.calendar-strip button small{font-size:9px;font-weight:700}.calendar-strip button strong{font-size:15px}.calendar-strip button.active{border-color:#cfe7e7;background:#eaf6f6;color:var(--brand-strong)}.event-card strong{margin-top:2px;font-size:15px}.legend-card p{margin:0;display:flex;align-items:center;gap:8px;font-size:11px}.dot{width:8px;height:8px;border-radius:999px}.dot.teal{background:var(--brand-strong)}.dot.yellow{background:#f59e0b}.dot.red{background:#ef4444}@media(max-width:899px){.workspace{padding:14px}.screen-card{width:100%}.phone{width:100%;max-width:390px;margin:0 auto}.greeting h3{font-size:34px}}