* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --ink:#1a1a2e; --warm:#f8f6f3; --accent:#e8734a; --accent2:#2d6a4f; --accent3:#264653;
  --soft:#ddd5c7; --muted:#8a8578;
  --bg:#f8f6f3; --surface:#ffffff; --surface2:#f0ece6; --border:rgba(26,26,46,0.08);
  --text:#1a1a2e; --text2:#8a8578; --text3:#b0a99e;
  --accent-bg:rgba(232,115,74,0.10);
  --red:#e05252; --red-bg:rgba(224,82,82,0.10);
  --amber:#c08b20; --amber-bg:rgba(192,139,32,0.10);
  --blue:#3b82c4; --blue-bg:rgba(59,130,196,0.10);
  --violet:#7c5cbf; --violet-bg:rgba(124,92,191,0.10);
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
html,body { height:100%; background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; overflow:hidden; position:fixed; width:100%; }

.app { height:100%; display:flex; flex-direction:column; }
.status-bar { height:calc(12px + var(--safe-top)); background:var(--bg); padding-top:var(--safe-top); }

/* Header */
.header { padding:16px 20px 12px; background:var(--bg); position:relative; z-index:10; }
.header-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.logo { font-family:'Playfair Display',serif; font-size:24px; font-weight:700; }
.logo span { color:var(--accent); }
.logo-img { height:28px; }
.header-actions { display:flex; gap:8px; }
.header-btn { width:36px; height:36px; border-radius:12px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--text2); font-size:16px; cursor:pointer; position:relative; }
.quick-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; text-align:center; cursor:pointer; transition:all 0.2s; }
.stat-card:active { transform:scale(0.96); }
.stat-card.active { border-color:var(--accent); background:var(--accent-bg); }
.stat-val { font-size:22px; font-weight:700; line-height:1; }
.stat-label { font-size:10px; color:var(--text2); margin-top:4px; letter-spacing:0.3px; }

/* Content */
.content { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px 100px; }
.section-head { display:flex; align-items:center; justify-content:space-between; padding:20px 4px 10px; }
.section-title { font-size:15px; font-weight:600; }
.section-action { font-size:12px; color:var(--accent); cursor:pointer; }

/* Unit cards */
.unit-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:10px; cursor:pointer; transition:all 0.2s; animation:slideUp 0.4s ease both; }
.unit-card:active { transform:scale(0.98); background:var(--surface2); }
.unit-card:nth-child(2) { animation-delay:0.05s; }
.unit-card:nth-child(3) { animation-delay:0.1s; }
.unit-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
.unit-address { font-size:14px; font-weight:600; line-height:1.3; }
.unit-meta { font-size:11px; color:var(--text2); margin-top:3px; }
.unit-status { font-size:10px; font-weight:600; padding:4px 10px; border-radius:20px; white-space:nowrap; }
.status-leased { background:var(--accent-bg); color:var(--accent); }
.status-vacant { background:var(--amber-bg); color:var(--amber); }
.unit-bottom { display:flex; align-items:center; justify-content:space-between; }
.unit-rent { font-size:16px; font-weight:700; }
.unit-rent small { font-size:11px; color:var(--text2); font-weight:400; }
.unit-tenant { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text2); }
.tenant-avatar { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:600; color:white; }

/* Empty state */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state .icon { font-size:48px; margin-bottom:16px; }
.empty-state h3 { font-size:16px; margin-bottom:8px; }
.empty-state p { font-size:13px; color:var(--text2); margin-bottom:20px; }
.empty-btn { padding:12px 24px; background:var(--accent); color:white; border:none; border-radius:14px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; }

/* Detail view */
.detail-view { position:fixed; inset:0; background:var(--bg); z-index:100; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; overflow:hidden; }
.detail-view.open { transform:translateX(0); }
.detail-header { padding:calc(12px + var(--safe-top)) 16px 14px; background:var(--bg); display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); }
.back-btn { width:34px; height:34px; border-radius:10px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text2); font-size:18px; cursor:pointer; }
.detail-title { font-size:16px; font-weight:600; flex:1; }
.detail-content { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 16px 40px; }
.detail-hero { background:linear-gradient(135deg,var(--surface),var(--surface2)); border:1px solid var(--border); border-radius:20px; padding:24px 20px; text-align:center; margin-bottom:20px; }
.detail-rent-big { font-size:32px; font-weight:700; }
.detail-rent-big small { font-size:14px; color:var(--text2); font-weight:400; }
.detail-status-row { display:flex; justify-content:center; gap:8px; margin-top:10px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.info-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; }
.info-label { font-size:10px; color:var(--text3); margin-bottom:4px; letter-spacing:0.5px; text-transform:uppercase; }
.info-value { font-size:13px; font-weight:600; }

/* Task rows */
.task-row { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:6px; }
.task-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.task-info { flex:1; }
.task-title { font-size:13px; font-weight:500; }
.task-date { font-size:10px; color:var(--text2); margin-top:2px; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); z-index:200; display:none; align-items:flex-end; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-panel { width:100%; max-width:480px; background:var(--surface); border:1px solid var(--border); border-radius:20px 20px 0 0; padding:24px 20px calc(20px + var(--safe-bottom)); transform:translateY(100%); transition:transform 0.3s ease; }
.modal-overlay.open .modal-panel { transform:translateY(0); }
.modal-title { font-size:18px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; }
.modal-close { background:none; border:none; color:var(--text2); font-size:20px; cursor:pointer; }
.modal-field { margin-bottom:14px; }
.modal-field label { display:block; font-size:11px; color:var(--text2); margin-bottom:4px; font-weight:500; text-transform:uppercase; letter-spacing:0.3px; }
.modal-field input, .modal-field select { width:100%; padding:12px 14px; background:var(--surface2); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:14px; font-family:inherit; outline:none; }
.modal-field input:focus, .modal-field select:focus { border-color:rgba(233,116,74,0.5); }
.modal-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-btn { width:100%; padding:14px; background:var(--accent); color:white; border:none; border-radius:14px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; margin-top:8px; }
.modal-btn:active { transform:scale(0.97); }
.modal-btn.danger { background:var(--red-bg); color:var(--red); margin-top:12px; }

/* FAB */
.fab { position:fixed; bottom:calc(80px + var(--safe-bottom)); right:20px; width:52px; height:52px; border-radius:16px; border:none; background:linear-gradient(135deg,#e9744a,#d4623b); color:white; font-size:24px; font-weight:300; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(233,116,74,0.35); cursor:pointer; z-index:50; transition:all 0.2s; }
.fab:active { transform:scale(0.9); }

/* Tab bar */
.tab-bar { display:flex; justify-content:space-around; align-items:center; padding:8px 0 calc(8px + var(--safe-bottom)); background:var(--surface); border-top:1px solid var(--border); position:relative; z-index:50; }
.tab { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 16px; cursor:pointer; transition:all 0.2s; border-radius:12px; }
.tab.active { color:var(--accent); }
.tab:not(.active) { color:var(--text3); }
.tab:active { background:var(--accent-bg); }
.tab-icon { font-size:20px; line-height:1; }
.tab-label { font-size:9px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }

.screen { display:none; }
.screen.active { display:block; }

/* Toast */
.toast { position:fixed; top:calc(20px + var(--safe-top)); left:50%; transform:translateX(-50%) translateY(-100px); background:var(--surface2); border:1px solid var(--accent); border-radius:14px; padding:12px 20px; font-size:13px; font-weight:500; z-index:300; transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.toast.show { transform:translateX(-50%) translateY(0); }

@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }