@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#E4E3E1;
  --surface:#FCFBF8;
  --ink:#2B2A2D;
  --ink-soft:#6E6C70;
  --steel:#59575A;
  --line:#CBC8C4;
  --hazard:#F7941D;
  --good:#5C7A5A;
  --off:#9A9A9A;
  --danger:#A33;
  --danger-bg:#FBEAEA;
  --danger-line:#E3B8B8;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background-color:var(--bg);
  min-height:100vh;
}
a{color:inherit;}
button{font-family:inherit;}

#app-root{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  position:relative;
}
.app-inner{padding:14px 14px 60px;}

/* header */
.app-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:2px solid var(--ink);
  padding-bottom:10px;
  margin-bottom:14px;
}
.app-header h1{
  font-family:'Oswald',sans-serif;
  font-size:20px;
  font-weight:700;
  letter-spacing:0.02em;
  margin:0;
  line-height:1;
}
.app-header .tag{font-size:11px;color:var(--ink-soft);margin-top:4px;}
.app-header-right{text-align:right;font-size:10.5px;line-height:1.5;}
.app-header-right button{
  font-family:'Oswald',sans-serif;
  font-size:11px;
  background:none;
  border:1px solid var(--line);
  color:var(--ink-soft);
  padding:4px 8px;
  cursor:pointer;
}
.app-header-right button:hover{background:#fff;color:var(--ink);}

/* tabs */
.tabs{display:flex;gap:2px;background:var(--ink);padding:2px;margin-bottom:14px;}
.tab{
  flex:1;background:var(--surface);border:none;padding:9px 4px;
  font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:0.03em;
  color:var(--ink-soft);cursor:pointer;
}
.tab.active{background:var(--ink);color:#fff;}
.panel{display:none;}
.panel.active{display:block;}

/* toolbar */
.toolbar{display:flex;gap:8px;margin-bottom:10px;}
.toolbar input[type=text]{flex:1;}
.toolbar select{flex:0 0 auto;}
.toolbar-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.toolbar-row > *{flex:1;min-width:100px;}
.checkbox-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin-bottom:10px;}

input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], select, textarea{
  width:100%;border:1px solid var(--line);background:#fff;padding:7px 8px;
  font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);
}
textarea{resize:vertical;min-height:44px;}

.addbtn{
  width:100%;background:var(--surface);border:1.5px dashed var(--steel);color:var(--steel);
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:0.03em;padding:10px;
  cursor:pointer;margin-bottom:12px;
}
.addbtn:hover{background:#fff;}

/* forms */
.form-box{background:var(--surface);border:1px solid var(--ink);padding:12px;margin-bottom:14px;}
.form-box .form-title{font-family:'Oswald',sans-serif;font-size:13px;margin-bottom:10px;letter-spacing:0.02em;}
.field{margin-bottom:9px;}
.field label{
  display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--ink-soft);margin-bottom:3px;
}
.row2{display:flex;gap:8px;}
.row2 .field{flex:1;}
.form-btns{display:flex;gap:8px;margin-top:4px;}
.btn-primary, .btn-secondary{
  font-family:'Oswald',sans-serif;font-size:12.5px;letter-spacing:0.03em;
  padding:9px 14px;border:none;cursor:pointer;
}
.btn-primary{background:var(--ink);color:#fff;flex:1;}
.btn-primary:disabled{opacity:0.5;cursor:default;}
.btn-secondary{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
.checklist-item label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:normal;text-transform:none;letter-spacing:0;color:var(--ink);}
.form-error{color:var(--danger);font-size:11.5px;margin:-4px 0 8px;}

/* cards */
.card{
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--steel);
  padding:11px 12px;margin-bottom:10px;position:relative;
}
.card .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.card h3{font-family:'Oswald',sans-serif;font-size:14.5px;font-weight:600;margin:0 0 2px;line-height:1.25;}
.card .sub{font-size:11.5px;color:var(--ink-soft);}
.badge{
  font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:0.04em;padding:3px 7px;
  color:#fff;white-space:nowrap;height:fit-content;
}
.badge-active{background:var(--good);}
.badge-under-contract{background:var(--hazard);}
.badge-off-market{background:var(--off);}
.badge-sent{background:var(--off);}
.badge-viewed{background:var(--hazard);}
.badge-forwarded{background:#4C7EA8;}
.badge-closed{background:var(--good);}

.specs{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;padding-top:8px;border-top:1px dotted var(--line);}
.spec{font-size:11.5px;}
.spec b{font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;}
.spec .spec-label{color:var(--ink-soft);font-size:9.5px;text-transform:uppercase;letter-spacing:0.04em;display:block;}
.notes{font-size:12px;color:var(--ink-soft);margin-top:7px;font-style:italic;}

.broker-block{
  background:var(--danger-bg);border:1px solid var(--danger-line);border-left:3px solid var(--danger);
  padding:8px 10px;margin-top:9px;font-size:12px;
}
.broker-block .tag-internal{
  font-family:'Oswald',sans-serif;font-size:9.5px;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--danger);display:block;margin-bottom:4px;
}

.card-actions{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
.mini-btn{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;background:none;
  border:1px solid var(--line);color:var(--ink-soft);padding:5px 8px;cursor:pointer;
}
.mini-btn.danger{color:var(--danger);}
.mini-btn:hover{background:#fff;color:var(--ink);}

.empty{
  text-align:center;padding:30px 10px;color:var(--ink-soft);font-size:13px;
  border:1px dashed var(--line);background:var(--surface);
}

.tracker{display:flex;gap:10px;margin-top:8px;padding-top:8px;border-top:1px dotted var(--line);}
.tracker-stat{flex:1;text-align:center;}
.tracker-stat b{display:block;font-family:'Oswald',sans-serif;font-size:16px;}
.tracker-stat span{font-size:9.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.04em;}

.activity-badge{
  display:inline-block;font-size:10px;background:var(--danger-bg);color:var(--danger);
  border:1px solid var(--danger-line);padding:2px 6px;margin:2px 4px 0 0;
}
.activity-item{font-size:11.5px;color:var(--ink-soft);margin-top:4px;}

.file-current{
  display:flex;align-items:center;justify-content:space-between;background:#fff;
  border:1px solid var(--line);padding:6px 8px;font-size:12px;margin-bottom:6px;
}
.file-current .file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-remove{background:none;border:none;color:var(--danger);font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0;margin-left:8px;}
.photo-preview{display:block;width:100%;max-height:140px;object-fit:cover;margin-top:6px;border:1px solid var(--line);}
.card-photo{width:100%;height:130px;object-fit:cover;display:block;margin-bottom:9px;background:var(--bg);}

.toast{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:9px 16px;font-size:12.5px;
  z-index:100;max-width:90%;text-align:center;
}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:flex-end;
  justify-content:center;z-index:50;
}
.modal-box{
  background:var(--surface);width:100%;max-width:480px;max-height:88vh;overflow-y:auto;
  padding:16px 14px 20px;border-top:2px solid var(--ink);
}
.modal-title{font-family:'Oswald',sans-serif;font-size:15px;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center;}
.modal-close{background:none;border:none;font-size:18px;color:var(--ink-soft);cursor:pointer;}

.note-box{
  font-size:11px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--hazard);padding:9px 10px;margin-bottom:14px;line-height:1.5;
}
.note-box b{color:var(--ink);}

/* login page */
.login-wrap{max-width:340px;margin:15vh auto 0;padding:0 16px;}
.login-box{background:var(--surface);border:1px solid var(--ink);padding:20px 18px;}
.login-box h1{font-family:'Oswald',sans-serif;font-size:20px;margin:0 0 4px;}
.login-box .tag{font-size:12px;color:var(--ink-soft);margin-bottom:16px;}
.login-error{color:var(--danger);font-size:12px;margin-bottom:10px;}