:root{
  --bg:#070b14;
  --panel:#0b1222;
  --panel2:#0a1020;
  --text:#eaf2ff;
  --muted:#a8b6d8;
  --line:rgba(160,190,255,.18);
  --blue:#67b7ff;
  --blue2:#8fd4ff;
  --danger:#ff6b6b;
  --ok:#5CFFB0;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(103,183,255,.14), transparent 60%),
              radial-gradient(1000px 600px at 80% 30%, rgba(143,212,255,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  min-height:100vh;
}
.bg-glow{
  position:fixed; inset:-100px;
  pointer-events:none;
  background: radial-gradient(600px 300px at 50% 0%, rgba(103,183,255,.12), transparent 70%);
  filter: blur(12px);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  background: rgba(8,12,20,.65);
  backdrop-filter: blur(8px);
  position:sticky; top:0;
  z-index: 100;
}
.brand{display:flex; gap:12px; align-items:center}
.logo-mark{
  width:34px;height:34px;border-radius:10px;
  background: linear-gradient(180deg, rgba(103,183,255,.30), rgba(103,183,255,.06));
  border:1px solid rgba(103,183,255,.35);
  box-shadow: 0 0 18px rgba(103,183,255,.25);
}
.brand-title{font-weight:800; letter-spacing:.6px}
.brand-subtitle{color:var(--muted); font-size:12px; margin-top:2px}

.nav-links{display:flex; align-items:center; gap:16px}
.nav-links a{color:var(--muted); text-decoration:none; font-size:14px}
.nav-links a:hover{color:var(--text)}
.user-info{color:var(--muted); font-size:13px}

.container{max-width:1100px;margin:0 auto;padding:20px}
.footer{
  padding:18px 20px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:40px;
  background: rgba(8,12,20,.45);
}

.card{
  background: linear-gradient(180deg, rgba(16,24,44,.75), rgba(10,16,32,.75));
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}
.neon-card{
  box-shadow:
    0 0 0 1px rgba(103,183,255,.12),
    0 0 26px rgba(103,183,255,.18);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 1px rgba(103,183,255,.12), 0 0 22px rgba(103,183,255,.16);}
  50%{ box-shadow: 0 0 0 1px rgba(143,212,255,.20), 0 0 34px rgba(103,183,255,.26);}
}

h1, .h1{margin:10px 0 6px; font-size:26px}
h2{font-size:20px; margin:0 0 12px}
h3{font-size:16px; margin:0 0 10px}
.muted{color:var(--muted); margin:0}
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.col-6{grid-column: span 6;}
.col-12{grid-column: span 12;}
@media (max-width:900px){
  .col-6{grid-column: span 12;}
}

.btn{
  display:inline-block;
  border:1px solid var(--line);
  background: rgba(103,183,255,.08);
  color: var(--text);
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
  font-size:14px;
  text-decoration:none;
}
.btn:hover{filter:brightness(1.1); text-decoration:none}
.btn-primary{
  background: linear-gradient(180deg, rgba(103,183,255,.26), rgba(103,183,255,.10));
  border:1px solid rgba(103,183,255,.35);
  box-shadow: 0 0 18px rgba(103,183,255,.20);
}
.btn-secondary{
  background: rgba(160,190,255,.08);
  border:1px solid rgba(160,190,255,.22);
}
.btn-outline{
  background: transparent;
  border:1px solid var(--line);
}
.btn-danger{
  background: rgba(255,107,107,.12);
  border:1px solid rgba(255,107,107,.35);
  color:#ffecec;
}
.btn-sm{padding:6px 12px; font-size:12px}
.btn-block{width:100%}
.btn-ghost{background: transparent}

.input, .select, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"]{
  width:100%;
  margin:6px 0 12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(5,10,22,.65);
  color:var(--text);
  outline:none;
  font-size:14px;
}
input[type="file"]{
  margin:6px 0 12px;
  color:var(--muted);
}
.label, label{font-size:12px;color:var(--muted); display:block; margin-bottom:4px}
.form-group{margin-bottom:16px}
.form-row{display:flex; gap:16px}
.form-row .form-group{flex:1}
.row{display:flex; gap:10px; flex-wrap:wrap}

.kpi{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(8,12,22,.55);
}
.kpi .n{font-size:28px; font-weight:900}
.kpi .t{color:var(--muted); font-size:12px}

.table, .data-table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
}
.table th, .table td, .data-table th, .data-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(160,190,255,.10);
  text-align:left;
  font-size:14px;
}
.table th, .data-table th{color:var(--muted); font-weight:700; background: rgba(8,12,20,.35)}
.table-container{overflow-x:auto}

.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(160,190,255,.22);
  background: rgba(103,183,255,.10);
  font-size:12px;
}
.badge.ok, .status-badge.status-completed{border-color: rgba(92,255,176,.35); background: rgba(92,255,176,.10); color:var(--ok)}
.badge.warn, .status-badge.status-in-progress, .status-badge.status-waiting{border-color: rgba(255,214,102,.35); background: rgba(255,214,102,.10); color:#ffd666}
.badge.danger, .status-badge.status-open{border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.10); color:var(--danger)}

.priority-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
}
.priority-badge.priority-low{background: rgba(160,190,255,.12); color:var(--muted)}
.priority-badge.priority-normal{background: rgba(103,183,255,.15); color:var(--blue)}
.priority-badge.priority-high{background: rgba(255,214,102,.15); color:#ffd666; border:1px solid rgba(255,214,102,.3)}
.priority-badge.priority-emergency{background: rgba(255,107,107,.15); color:var(--danger); border:1px solid rgba(255,107,107,.3)}

.status-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:6px;
  font-size:11px;
  font-weight:600;
}

.role-badge{
  display:inline-block;
  padding:2px 6px;
  border-radius:4px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
}
.role-badge.role-admin{background: rgba(103,183,255,.15); color:var(--blue)}
.role-badge.role-maintenance{background: rgba(92,255,176,.12); color:var(--ok)}

a{color: var(--blue2); text-decoration:none}
a:hover{text-decoration:underline}

.alert{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,107,107,.35);
  background: rgba(255,107,107,.10);
  color: #ffecec;
  margin: 10px 0 14px;
}
.alert-error{
  border-color: rgba(255,107,107,.35);
  background: rgba(255,107,107,.10);
}
.alert-success{
  border-color: rgba(92,255,176,.35);
  background: rgba(92,255,176,.10);
  color:#d4ffec;
}
.flash{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(103,183,255,.25);
  background: rgba(103,183,255,.10);
  margin: 0 0 14px;
}
.flash.success, .alert-success{border-color: rgba(92,255,176,.35); background: rgba(92,255,176,.10)}
.flash.error, .alert-error{border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.10)}

.login-wrap{max-width:520px; margin:40px auto}
.login-header{text-align:center; margin-bottom:24px}
.login-header h1{margin:0 0 6px}
.login-header p{color:var(--muted); margin:0}
.demo-section{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.demo-grid{display:grid; gap:10px; margin-top:10px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color: var(--muted)}
.divider{height:1px;background:rgba(160,190,255,.12);margin:16px 0}

.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  flex-wrap:wrap;
  gap:12px;
}
.page-header h1{margin:0}

.stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
  margin-bottom:24px;
}
.stat-card{
  background: linear-gradient(180deg, rgba(16,24,44,.75), rgba(10,16,32,.75));
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  display:flex;
  flex-direction:column;
}
.stat-content h3{font-size:28px; margin:0; font-weight:900}
.stat-content p{color:var(--muted); margin:4px 0 0; font-size:13px}
.stat-link{color:var(--blue2); font-size:12px; margin-top:10px}

.quick-actions{margin-top:24px}
.quick-actions h2{margin-bottom:12px}
.action-buttons{display:flex; gap:10px; flex-wrap:wrap}

.property-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
.property-card{
  background: linear-gradient(180deg, rgba(16,24,44,.75), rgba(10,16,32,.75));
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.property-card-content{padding:16px}
.property-card h3{margin:0 0 6px}
.address{color:var(--muted); font-size:13px; margin:0}
.address-line2{color:var(--muted); font-size:12px; margin:2px 0 0}
.property-meta{margin:10px 0; display:flex; gap:10px}
.unit-count{
  background: rgba(103,183,255,.12);
  padding:3px 8px;
  border-radius:6px;
  font-size:12px;
  color:var(--blue);
}
.property-actions{margin-top:12px}

.form-container{
  background: linear-gradient(180deg, rgba(16,24,44,.75), rgba(10,16,32,.75));
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
  margin-top:20px;
}

.empty-state{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:900px){ .photo-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .photo-grid{grid-template-columns:1fr} }
.photo-item, .photo{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background: rgba(0,0,0,.15);
}
.photo-item img, .photo img{display:block;width:100%;height:200px;object-fit:cover}
.photo-info, .photo .meta{padding:10px}
.photo-kind{
  display:inline-block;
  padding:2px 6px;
  border-radius:4px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  background: rgba(103,183,255,.12);
  color:var(--blue);
}
.photo-user{display:block; font-size:11px; color:var(--muted); margin-top:4px}
.small{font-size:12px;color:var(--muted)}

.ticket-detail{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap:20px;
}
@media (max-width:900px){
  .ticket-detail{grid-template-columns:1fr}
}
.ticket-main{
  background: linear-gradient(180deg, rgba(16,24,44,.75), rgba(10,16,32,.75));
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px;
}
.ticket-header-info{display:flex; gap:8px; margin-bottom:12px}
.ticket-meta{color:var(--muted); font-size:13px; margin-bottom:16px}
.ticket-meta p{margin:4px 0}
.ticket-description-box{
  background: rgba(5,10,22,.5);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  margin-bottom:16px;
}
.ticket-description-box h3{margin:0 0 8px; font-size:14px}
.ticket-description-box p{margin:0; font-size:14px}

.ticket-sidebar .sidebar-card{
  background: linear-gradient(180deg, rgba(16,24,44,.75), rgba(10,16,32,.75));
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  margin-bottom:16px;
}
.sidebar-card h3{margin:0 0 12px; font-size:14px}

.updates-section{margin-top:20px}
.updates-section h3{margin-bottom:12px}
.update-item{
  background: rgba(5,10,22,.4);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  margin-bottom:10px;
}
.update-header{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px}
.update-date{color:var(--muted); font-size:11px}
.update-item p{margin:0; font-size:13px}

.photos-section{margin-top:20px}
.photos-section h3{margin-bottom:12px}

.property-info{
  background: rgba(5,10,22,.4);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  margin-bottom:16px;
  font-size:13px;
  color:var(--muted);
}

.text-muted{color:var(--muted); font-size:13px}

/* Modal */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index:1000;
  align-items:center;
  justify-content:center;
}
.modal.active{display:flex}
.modal-content{
  background: linear-gradient(180deg, rgba(16,24,44,.95), rgba(10,16,32,.95));
  border:1px solid var(--line);
  border-radius:16px;
  padding:0;
  max-width:520px;
  width:90%;
  max-height:90vh;
  overflow-y:auto;
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.modal-header h2{margin:0; font-size:18px}
.close-btn{
  background:none;
  border:none;
  color:var(--muted);
  font-size:24px;
  cursor:pointer;
  line-height:1;
}
.close-btn:hover{color:var(--text)}
.modal-content form{padding:20px}
.modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}