:root{--font-sans: "Plus Jakarta Sans", sans-serif;--font-display: "Sora", sans-serif;--color-brand-primary: #3d4f8f;--color-brand-primary-strong: #2f3e74;--color-brand-soft: #e7ebf9;--color-accent-primary: #af7a2f;--color-bg-canvas: #f3f2f7;--color-bg-surface: #ffffff;--color-bg-muted: #e8e7ee;--color-bg-overlay: #f8f7fc;--color-text-primary: #232537;--color-text-secondary: #555b73;--color-text-muted: #767d98;--color-text-inverse: #f7f8fd;--color-border-default: #d8dbe8;--color-border-soft: #e7e9f1;--color-status-success-bg: #dcfce7;--color-status-success-text: #166534;--color-status-warning-bg: #fef3c7;--color-status-warning-text: #92400e;--color-status-danger-bg: #fee2e2;--color-status-danger-text: #991b1b;--radius-xs: 6px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 14px;--radius-xl: 20px;--radius-pill: 9999px;--shadow-sm: 0 6px 16px rgba(20, 19, 17, .05);--shadow-md: 0 12px 26px rgba(20, 19, 17, .1);--shadow-lg: 0 18px 40px rgba(20, 19, 17, .16)}:root[data-theme=warm-smart-living]{--color-brand-primary: #005b50;--color-brand-primary-strong: #0a7467;--color-brand-soft: #e7f3f1;--color-accent-primary: #c56b23;--color-bg-canvas: #f7f4ec;--color-bg-surface: #fffdf9;--color-bg-muted: #f1ece2;--color-bg-overlay: #fffcf7;--color-text-primary: #1d1a16;--color-text-secondary: #4f4942;--color-text-muted: #786f63;--color-text-inverse: #f8faf9;--color-border-default: #d9d2c8;--color-border-soft: #e8e1d6}:root[data-theme=urban-slate]{--color-brand-primary: #1f4a66;--color-brand-primary-strong: #1a3f57;--color-brand-soft: #e6eef4;--color-accent-primary: #b8792f;--color-bg-canvas: #f3f5f8;--color-bg-surface: #ffffff;--color-bg-muted: #e8edf3;--color-bg-overlay: #f8fbff;--color-text-primary: #1a2430;--color-text-secondary: #4f5f70;--color-text-muted: #6e7f90;--color-text-inverse: #f6f8fb;--color-border-default: #d7e0ea;--color-border-soft: #e5ebf1}:root[data-theme=evergreen-pro]{--color-brand-primary: #0b665b;--color-brand-primary-strong: #07544b;--color-brand-soft: #e3f2ef;--color-accent-primary: #c08f2f;--color-bg-canvas: #f2f6f2;--color-bg-surface: #fbfdfa;--color-bg-muted: #e5efe9;--color-bg-overlay: #f7fbf8;--color-text-primary: #1d2723;--color-text-secondary: #4e5f58;--color-text-muted: #71837b;--color-text-inverse: #f6f9f7;--color-border-default: #d2dfd7;--color-border-soft: #e2ebe5}:root{--brand: var(--color-brand-primary);--brand-strong: var(--color-brand-primary-strong);--ink: var(--color-text-primary);--muted: var(--color-text-secondary);--line: var(--color-border-default);--surface: var(--color-bg-surface);--canvas: var(--color-bg-canvas)}*{box-sizing:border-box}html,body{margin:0;font-family:var(--font-sans);background:radial-gradient(circle at 0% 0%,color-mix(in srgb,var(--color-accent-primary) 26%,transparent),#0000 40%),radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--color-brand-primary) 24%,transparent),#0000 44%),linear-gradient(180deg,#fafbff 0%,var(--canvas) 68%,#eff1f8 100%);color:var(--ink)}.material-symbols-outlined{font-size:20px;line-height:1}.workspace{max-width:1120px;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:680px;font-size:14px}.view-switch{margin-top:14px;display:inline-flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}.view-btn{border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;cursor:pointer}.view-btn.active{background:var(--brand-soft);color:var(--brand-strong)}.app-stage{display:flex;justify-content:center;margin-top:14px}.design-system-stage{margin-top:18px}.ds-intro h2{margin:6px 0 0;font-size:clamp(24px,3.3vw,34px);letter-spacing:-.02em}.ds-intro p{margin:8px 0 0;color:var(--muted);max-width:760px}.theme-picker{margin-top:14px;display:grid;gap:10px;grid-template-columns:repeat(4,minmax(160px,1fr))}.theme-option{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px;text-align:left;display:flex;flex-direction:column;gap:5px;cursor:pointer;box-shadow:var(--shadow-sm)}.theme-option.active{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent)}.theme-name{font-size:12px;font-weight:800;color:var(--ink)}.theme-meta{font-size:11px;color:var(--muted)}.theme-swatches{display:flex;gap:6px;margin-top:2px}.theme-swatches span{width:14px;height:14px;border-radius:999px;border:1px solid #ffffffcc;background:var(--sw)}.theme-active-label{margin:12px 0 0;color:var(--muted);font-size:13px}.theme-active-label strong{color:var(--ink)}.ds-grid{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:12px}.ds-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-sm);padding:14px}.ds-card h3{margin:0;font-size:14px}.ds-kicker{margin:4px 0 0;color:var(--muted);font-size:11px}.ds-display{margin:10px 0 8px;font-family:var(--font-display);font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.02em}.ds-card p{margin:8px 0 0}.ds-button-row{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}.ds-badge-row{margin-top:10px;display:flex;gap:8px}.ds-stat-grid{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.ds-stat-grid>div{border:1px solid var(--line);border-radius:10px;background:var(--color-bg-overlay);padding:8px}.ds-stat-grid small{display:block;color:var(--muted);font-size:10px}.ds-stat-grid strong{font-size:18px}.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,#eceffb,#f7f8fd 35% 100%);border:1px solid var(--line);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%,#005b503d,#005b5014 45%,#005b5000 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:#c6ddd9;background:var(--color-brand-soft)}.billing-card{border-radius:14px;background:linear-gradient(145deg,#4f61a0,#3d4f8f 70%,#2f3e74);box-shadow:0 14px 26px #242c5247;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:#eef1fb;border:1px solid #d9deef;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:var(--brand);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:var(--color-brand-soft);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:var(--color-brand-soft);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:#d9e4de;background:var(--color-bg-overlay)}.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:var(--color-bg-overlay);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:var(--color-status-warning-text);background:var(--color-status-warning-bg)}.status.paid{color:var(--color-status-success-text);background:var(--color-status-success-bg)}.status.late{color:var(--color-status-danger-text);background:var(--color-status-danger-bg)}.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:var(--color-accent-primary);border-color:var(--color-accent-primary);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,#dbe1f5,#ccd4ef)}.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:#d5dcf5;background:var(--color-brand-soft);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}.theme-picker{grid-template-columns:1fr 1fr}.ds-grid{grid-template-columns:1fr}.screen-card{width:100%}.phone{width:100%;max-width:390px;margin:0 auto}.greeting h3{font-size:34px}}