:root {
  --blue-deep:   #003087;
  --blue-mid:    #0047B3;
  --blue-bright: #0066CC;
  --blue-light:  #E8F0FB;
  --blue-pale:   #F0F5FF;
  --yellow:      #FFD100;
  --yellow-dark: #E6BC00;
  --yellow-light:#FFF8CC;
  --cream:       #FDFAF2;
  --white:       #FFFFFF;
  --text-dark:   #0A1628;
  --text-mid:    #2C3E6B;
  --text-light:  #6B7FAB;
  --red:         #D32F2F;
  --green:       #1B7A3E;
  --orange:      #E65100;
  --card-bg:     #FFFFFF;
  --border:      #D6E2F5;
  --shadow:      0 4px 20px rgba(0,48,135,0.08);
  --shadow-lg:   0 12px 48px rgba(0,48,135,0.14);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--cream); color:var(--text-dark); min-height:100vh; overflow-x:hidden; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--cream); }
::-webkit-scrollbar-thumb { background:var(--blue-bright); border-radius:3px; }

/* ===== LOGIN ===== */
#loginScreen {
  position:fixed; inset:0; z-index:1000;
  background:linear-gradient(145deg, var(--blue-deep) 0%, var(--blue-mid) 60%, #0055AA 100%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.6s ease, transform 0.6s ease;
}
#loginScreen.hidden { opacity:0; pointer-events:none; transform:scale(1.04); }

.login-bg { position:absolute; inset:0; overflow:hidden; }
.gctu-stripe {
  position:absolute; width:100%; height:8px;
  background:repeating-linear-gradient(90deg,
    var(--yellow) 0, var(--yellow) 40px,
    var(--white) 40px, var(--white) 56px,
    var(--blue-deep) 56px, var(--blue-deep) 96px,
    var(--yellow) 96px, var(--yellow) 136px);
}
.gctu-stripe.top { top:0; }
.gctu-stripe.bottom { bottom:0; }

.l-orb { position:absolute; border-radius:50%; filter:blur(90px); }
.l-orb-1 { width:500px; height:500px; background:var(--yellow); opacity:0.08; top:-150px; right:-150px; animation:orbFloat 9s ease-in-out infinite; }
.l-orb-2 { width:350px; height:350px; background:#4D90FE; opacity:0.12; bottom:-100px; left:-80px; animation:orbFloat 7s ease-in-out infinite reverse; }
.l-orb-3 { width:200px; height:200px; background:var(--yellow); opacity:0.06; bottom:30%; right:20%; animation:orbFloat 11s ease-in-out infinite 2s; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(15px,-20px)} }

.login-split {
  position:relative; z-index:2;
  display:flex; width:880px; max-width:96vw;
  background:var(--white); border-radius:28px;
  overflow:hidden; box-shadow:0 32px 80px rgba(0,0,0,0.3);
  animation:cardUp 0.9s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }

.login-brand {
  width:340px; flex-shrink:0;
  background:linear-gradient(160deg, var(--blue-deep), var(--blue-mid));
  padding:52px 40px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.brand-logo-wrap {
  width:72px; height:72px;
  background:var(--yellow); border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; margin-bottom:24px;
  box-shadow:0 8px 24px rgba(255,209,0,0.35);
}
.brand-name {
  font-family:'Space Grotesk',sans-serif;
  font-size:32px; font-weight:700;
  color:var(--white); line-height:1; margin-bottom:6px;
}
.brand-name span { color:var(--yellow); }
.brand-tagline { font-size:13px; color:rgba(255,255,255,0.5); margin-bottom:32px; }
.brand-features { display:flex; flex-direction:column; gap:14px; }
.brand-feature { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,0.7); font-size:13px; font-weight:500; }
.bf-icon { width:32px; height:32px; background:rgba(255,209,0,0.15); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.brand-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  border-radius:30px; padding:8px 16px;
  font-size:12px; color:rgba(255,255,255,0.6);
}
.brand-badge span { color:var(--yellow); font-weight:600; }

.login-form-area {
  flex:1; padding:52px 44px;
  display:flex; flex-direction:column; justify-content:center;
}
.lf-header { margin-bottom:32px; }
.lf-header h2 { font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; color:var(--text-dark); margin-bottom:4px; }
.lf-header p { font-size:14px; color:var(--text-light); }

.login-tabs { display:flex; gap:4px; background:var(--blue-pale); border-radius:12px; padding:4px; margin-bottom:28px; }
.login-tab { flex:1; padding:10px; border:none; background:transparent; color:var(--text-mid); font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:600; border-radius:9px; cursor:pointer; transition:all 0.2s; }
.login-tab.active { background:var(--blue-deep); color:white; }

.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:11px; font-weight:700; color:var(--text-mid); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:8px; }
.form-group input, .form-group select {
  width:100%; padding:13px 16px;
  border:1.5px solid var(--border);
  border-radius:12px; outline:none;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; color:var(--text-dark);
  background:var(--white); transition:border-color 0.2s, box-shadow 0.2s;
}
.form-group input::placeholder { color:#B0BECC; }
.form-group input:focus, .form-group select:focus { border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(0,102,204,0.1); }

.login-btn {
  width:100%; padding:14px;
  background:linear-gradient(135deg, var(--blue-deep), var(--blue-bright));
  border:none; border-radius:12px;
  color:white; font-family:'Space Grotesk',sans-serif;
  font-size:15px; font-weight:700; cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s; margin-top:8px;
  letter-spacing:0.3px;
}
.login-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,48,135,0.35); }
.demo-hint { text-align:center; margin-top:16px; color:var(--text-light); font-size:12px; }
.demo-hint span { color:var(--blue-bright); cursor:pointer; font-weight:600; }
.demo-hint span:hover { text-decoration:underline; }

/* ===== APP SHELL ===== */
#app { display:none; min-height:100vh; }
#app.visible { display:flex; }

/* SIDEBAR */
.sidebar {
  width:256px; background:var(--blue-deep);
  min-height:100vh; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto; flex-shrink:0;
}
.sidebar-header {
  padding:24px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  background:rgba(0,0,0,0.15);
}
.sidebar-logo { display:flex; align-items:center; gap:11px; }
.sidebar-logo-icon {
  width:40px; height:40px; background:var(--yellow);
  border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:19px; box-shadow:0 4px 12px rgba(255,209,0,0.3); flex-shrink:0;
}
.sidebar-logo-text h2 { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; color:white; }
.sidebar-logo-text p { font-size:10px; color:rgba(255,255,255,0.35); margin-top:1px; }

.sidebar-user {
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex; align-items:center; gap:11px;
}
.user-avatar {
  width:38px; height:38px;
  background:linear-gradient(135deg, var(--yellow-dark), var(--yellow));
  border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:var(--blue-deep);
  font-family:'Space Grotesk',sans-serif; flex-shrink:0;
}
.user-info { flex:1; min-width:0; }
.user-info .name { font-size:13px; font-weight:600; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-info .role { font-size:10px; color:var(--yellow); text-transform:uppercase; letter-spacing:0.5px; margin-top:1px; }

.sidebar-nav { flex:1; padding:14px 10px; }
.nav-section-title { font-size:9px; font-weight:700; color:rgba(255,255,255,0.2); text-transform:uppercase; letter-spacing:1.2px; padding:0 12px; margin:14px 0 5px; }
.nav-item {
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; border-radius:11px; cursor:pointer;
  transition:all 0.2s; color:rgba(255,255,255,0.5);
  font-size:13px; font-weight:500;
}
.nav-item:hover { background:rgba(255,255,255,0.07); color:white; }
.nav-item.active { background:rgba(255,209,0,0.18); color:var(--yellow); }
.nav-item .icon { font-size:17px; width:22px; text-align:center; }
.nav-badge { margin-left:auto; background:var(--red); color:white; font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; }
.nav-badge.yellow { background:var(--yellow); color:var(--blue-deep); }
.nav-badge.green { background:#1B7A3E; }
.sidebar-footer { padding:14px 10px; border-top:1px solid rgba(255,255,255,0.07); }

/* MAIN */
.main-content { flex:1; overflow-y:auto; background:var(--cream); min-height:100vh; }
.top-bar {
  position:sticky; top:0; z-index:100;
  background:rgba(253,250,242,0.92); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 30px; height:62px;
  display:flex; align-items:center; justify-content:space-between;
}
.top-bar-left { display:flex; align-items:center; gap:14px; }
.page-title { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; color:var(--text-dark); }
.top-bar-right { display:flex; align-items:center; gap:10px; }
.search-bar {
  display:flex; align-items:center; gap:9px;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:11px; padding:8px 13px; width:230px;
}
.search-bar input { border:none; outline:none; background:transparent; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; color:var(--text-dark); flex:1; }
.search-bar input::placeholder { color:var(--text-light); }
.icon-btn {
  width:38px; height:38px; border:1.5px solid var(--border); border-radius:11px;
  background:var(--white); cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:15px; transition:all 0.2s; position:relative;
}
.icon-btn:hover { background:var(--blue-deep); color:white; border-color:var(--blue-deep); }
.notif-dot { position:absolute; top:8px; right:8px; width:7px; height:7px; background:var(--red); border-radius:50%; border:2px solid var(--cream); }

/* PAGES */
.page { display:none; padding:28px; animation:pageIn 0.38s cubic-bezier(0.16,1,0.3,1); }
.page.active { display:block; }
@keyframes pageIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

/* ===== DASHBOARD ===== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px; }
.stat-card {
  background:var(--white); border:1.5px solid var(--border);
  border-radius:18px; padding:22px;
  position:relative; overflow:hidden;
  transition:transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.stat-card.blue-bar::before { background:linear-gradient(90deg,var(--blue-deep),var(--blue-bright)); }
.stat-card.yellow-bar::before { background:linear-gradient(90deg,var(--yellow-dark),var(--yellow)); }
.stat-card.red-bar::before { background:linear-gradient(90deg,#D32F2F,#FF5252); }
.stat-card.green-bar::before { background:linear-gradient(90deg,#1B7A3E,#43A047); }
.stat-icon { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:14px; }
.si-blue { background:var(--blue-light); }
.si-yellow { background:var(--yellow-light); }
.si-red { background:rgba(211,47,47,0.08); }
.si-green { background:rgba(27,122,62,0.1); }
.stat-value { font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:var(--text-dark); line-height:1; margin-bottom:5px; }
.stat-label { font-size:12px; color:var(--text-light); font-weight:500; }
.stat-change { position:absolute; top:22px; right:20px; font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px; }
.sc-up { background:rgba(27,122,62,0.1); color:var(--green); }
.sc-down { background:rgba(211,47,47,0.1); color:var(--red); }

.dashboard-grid { display:grid; grid-template-columns:1fr 360px; gap:18px; }
.card { background:var(--white); border:1.5px solid var(--border); border-radius:18px; overflow:hidden; }
.card-header { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:var(--text-dark); }
.card-action { font-size:13px; color:var(--blue-bright); font-weight:600; cursor:pointer; }
.card-action:hover { text-decoration:underline; }
.card-body { padding:22px; }

.alert-banner { border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.ab-warning { background:#FFF8E1; border:1px solid #FFE082; }
.ab-info { background:var(--blue-light); border:1px solid #BDD3F7; }
.alert-icon { font-size:20px; }
.alert-text h4 { font-size:13px; font-weight:700; color:var(--text-dark); margin-bottom:2px; }
.alert-text p { font-size:12px; color:var(--text-mid); }
.alert-close { margin-left:auto; cursor:pointer; font-size:16px; color:var(--text-light); opacity:0.6; flex-shrink:0; }

.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:20px; }
.quick-btn {
  padding:13px 15px; background:var(--white); border:1.5px solid var(--border);
  border-radius:13px; display:flex; align-items:center; gap:10px;
  cursor:pointer; transition:all 0.2s; font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px; font-weight:600; color:var(--text-dark); text-align:left;
}
.quick-btn:hover { background:var(--blue-deep); color:white; border-color:var(--blue-deep); transform:translateY(-2px); box-shadow:var(--shadow); }
.quick-btn .q-icon { font-size:19px; }

.occupancy-bars { display:flex; flex-direction:column; gap:11px; }
.occ-row { display:flex; align-items:center; gap:11px; }
.occ-label { width:76px; font-size:12px; color:var(--text-mid); font-weight:600; flex-shrink:0; }
.occ-bar-bg { flex:1; height:9px; background:var(--blue-pale); border-radius:5px; overflow:hidden; }
.occ-bar { height:100%; border-radius:5px; background:linear-gradient(90deg,var(--blue-bright),var(--yellow-dark)); }
.occ-pct { width:36px; text-align:right; font-size:12px; font-weight:700; color:var(--text-dark); }

.activity-list { display:flex; flex-direction:column; }
.activity-item { padding:12px 0; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:11px; }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.ad-blue { background:var(--blue-bright); }
.ad-yellow { background:var(--yellow-dark); }
.ad-red { background:var(--red); }
.ad-green { background:var(--green); }
.activity-text { font-size:12px; color:var(--text-mid); line-height:1.5; flex:1; }
.activity-text strong { color:var(--text-dark); font-weight:600; }
.activity-time { font-size:10px; color:var(--text-light); flex-shrink:0; }

/* ===== COMMON ===== */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.section-header h2 { font-family:'Space Grotesk',sans-serif; font-size:21px; font-weight:700; color:var(--text-dark); }
.btn { padding:9px 18px; border-radius:11px; border:none; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.btn-primary { background:var(--blue-deep); color:white; }
.btn-primary:hover { background:var(--blue-mid); transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-yellow { background:var(--yellow); color:var(--blue-deep); }
.btn-yellow:hover { background:var(--yellow-dark); transform:translateY(-1px); box-shadow:0 4px 14px rgba(255,209,0,0.35); }
.btn-outline { background:transparent; color:var(--text-mid); border:1.5px solid var(--border); }
.btn-outline:hover { background:var(--white); border-color:var(--blue-bright); color:var(--blue-bright); }
.btn-danger { background:rgba(211,47,47,0.08); color:var(--red); border:1px solid rgba(211,47,47,0.2); }
.btn-danger:hover { background:var(--red); color:white; }
.btn-sm { padding:6px 13px; font-size:12px; border-radius:8px; }

.filters { display:flex; gap:9px; margin-bottom:22px; flex-wrap:wrap; }
.filter-btn { padding:7px 15px; border-radius:30px; border:1.5px solid var(--border); background:var(--white); font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:600; color:var(--text-mid); cursor:pointer; transition:all 0.2s; }
.filter-btn:hover, .filter-btn.active { background:var(--blue-deep); color:white; border-color:var(--blue-deep); }

/* ROOMS */
.room-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:15px; }
.room-card {
  background:var(--white); border:2px solid var(--border);
  border-radius:16px; padding:18px; cursor:pointer; transition:all 0.2s; position:relative;
}
.room-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--blue-bright); }
.room-card.occupied { border-color:rgba(211,47,47,0.25); background:rgba(211,47,47,0.02); }
.room-card.maintenance { border-color:rgba(230,81,0,0.25); }
.room-card.selected { border-color:var(--yellow-dark); box-shadow:0 0 0 3px rgba(255,209,0,0.2); }
.room-status-badge { position:absolute; top:13px; right:13px; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:0.4px; }
.badge-available { background:rgba(27,122,62,0.1); color:var(--green); }
.badge-occupied { background:rgba(211,47,47,0.1); color:var(--red); }
.badge-maintenance { background:rgba(230,81,0,0.1); color:var(--orange); }
.room-number { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:var(--text-dark); margin-bottom:3px; }
.room-type { font-size:12px; color:var(--text-light); margin-bottom:11px; }
.room-details { display:flex; gap:10px; flex-wrap:wrap; }
.room-detail { font-size:11px; color:var(--text-light); }
.room-price { margin-top:13px; padding-top:13px; border-top:1px solid var(--border); font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; color:var(--blue-deep); }
.room-price span { font-size:11px; font-weight:400; color:var(--text-light); }

/* FORMS */
.complaint-form { background:var(--white); border:1.5px solid var(--border); border-radius:18px; padding:26px; margin-bottom:24px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.form-field { margin-bottom:14px; }
.form-field label { display:block; font-size:11px; font-weight:700; color:var(--text-mid); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:7px; }
.form-field input, .form-field select, .form-field textarea { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:11px; outline:none; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:var(--text-dark); background:var(--white); transition:border-color 0.2s; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(0,102,204,0.08); }

/* TABLES */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:11px 15px; font-size:10px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:0.7px; border-bottom:1.5px solid var(--border); background:var(--blue-pale); }
.data-table td { padding:13px 15px; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-dark); vertical-align:middle; }
.data-table tr:hover td { background:var(--blue-pale); }
.data-table tr:last-child td { border-bottom:none; }

.priority-badge, .status-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:0.3px; }
.p-high { background:rgba(211,47,47,0.1); color:var(--red); }
.p-medium { background:rgba(230,81,0,0.1); color:var(--orange); }
.p-low { background:rgba(27,122,62,0.1); color:var(--green); }
.s-open { background:rgba(211,47,47,0.1); color:var(--red); }
.s-progress { background:var(--blue-light); color:var(--blue-deep); }
.s-resolved { background:rgba(27,122,62,0.1); color:var(--green); }

/* PAYMENTS */
.payment-hero {
  background:linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
  border-radius:22px; padding:34px; color:white; margin-bottom:22px;
  position:relative; overflow:hidden;
}
.payment-hero::before {
  content:''; position:absolute; right:-20px; top:-20px;
  width:200px; height:200px;
  background:var(--yellow); opacity:0.06; border-radius:50%;
}
.payment-hero::after {
  content:'₵'; position:absolute; right:40px; top:50%; transform:translateY(-50%);
  font-family:'Space Grotesk',sans-serif; font-size:110px; font-weight:700;
  color:rgba(255,255,255,0.04); line-height:1;
}
.payment-hero h3 { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:600; opacity:0.6; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.payment-hero .amount { font-family:'Space Grotesk',sans-serif; font-size:46px; font-weight:700; margin-bottom:6px; }
.payment-hero .due { font-size:13px; opacity:0.65; }
.payment-actions { display:flex; gap:11px; margin-top:22px; }
.pay-btn { padding:11px 22px; border-radius:11px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; cursor:pointer; border:none; transition:all 0.2s; }
.pay-btn-primary { background:var(--yellow); color:var(--blue-deep); }
.pay-btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,209,0,0.4); }
.pay-btn-secondary { background:rgba(255,255,255,0.12); color:white; border:1px solid rgba(255,255,255,0.2); }

.payment-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-bottom:24px; }
.pay-method { background:var(--white); border:2px solid var(--border); border-radius:15px; padding:18px; text-align:center; cursor:pointer; transition:all 0.2s; }
.pay-method:hover, .pay-method.selected { border-color:var(--yellow-dark); background:var(--yellow-light); box-shadow:0 0 0 3px rgba(255,209,0,0.15); }
.pay-method .pm-icon { font-size:30px; margin-bottom:7px; }
.pay-method .pm-name { font-size:13px; font-weight:700; color:var(--text-dark); }
.pay-method .pm-desc { font-size:11px; color:var(--text-light); margin-top:2px; }

/* LAUNDRY */
.laundry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:24px; }
.machine-card { background:var(--white); border:2px solid var(--border); border-radius:16px; padding:18px; text-align:center; cursor:pointer; transition:all 0.2s; }
.machine-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.machine-card.in-use { border-color:rgba(0,102,204,0.3); background:var(--blue-pale); }
.machine-card.available { border-color:rgba(27,122,62,0.3); }
.machine-icon { font-size:38px; margin-bottom:10px; }
.machine-id { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; color:var(--text-dark); }
.machine-time { font-size:11px; color:var(--text-light); margin-top:4px; }

/* WATER */
.water-hero { background:linear-gradient(135deg, #003087, #0055B3); border-radius:22px; padding:30px; color:white; margin-bottom:22px; position:relative; overflow:hidden; }
.water-hero::after { content:'💧'; position:absolute; right:30px; top:50%; transform:translateY(-50%); font-size:90px; opacity:0.08; }
.water-schedule-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:9px; margin-bottom:18px; }
.water-day { background:var(--white); border:1.5px solid var(--border); border-radius:13px; padding:12px 8px; text-align:center; }
.water-day.today { background:var(--blue-deep); border-color:var(--blue-deep); }
.water-day .day-name { font-size:10px; font-weight:700; color:var(--text-light); text-transform:uppercase; }
.water-day.today .day-name { color:rgba(255,255,255,0.55); }
.water-day .day-num { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; margin:3px 0; color:var(--text-dark); }
.water-day.today .day-num { color:var(--yellow); }
.water-icon { font-size:16px; }

/* MARKETPLACE */
.market-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.market-item { background:var(--white); border:1.5px solid var(--border); border-radius:18px; overflow:hidden; cursor:pointer; transition:all 0.2s; }
.market-item:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.market-img { height:130px; display:flex; align-items:center; justify-content:center; font-size:52px; }
.mi-bg1 { background:linear-gradient(135deg, var(--blue-pale), #C9DCFC); }
.mi-bg2 { background:linear-gradient(135deg, var(--yellow-light), #FFF0A0); }
.mi-bg3 { background:linear-gradient(135deg, #E3F5EC, #B8E6CC); }
.mi-bg4 { background:linear-gradient(135deg, #FFF3E0, #FFE0B2); }
.market-body { padding:14px; }
.market-name { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:var(--text-dark); margin-bottom:3px; }
.market-seller { font-size:12px; color:var(--text-light); margin-bottom:9px; }
.market-footer { display:flex; align-items:center; justify-content:space-between; }
.market-price { font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; color:var(--blue-deep); }
.market-condition { font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; }
.cond-new { background:rgba(27,122,62,0.1); color:var(--green); }
.cond-used { background:rgba(230,81,0,0.1); color:var(--orange); }

/* NOTICES */
.notice-card { background:var(--white); border:1.5px solid var(--border); border-radius:16px; padding:22px; margin-bottom:14px; position:relative; overflow:hidden; transition:all 0.2s; }
.notice-card:hover { box-shadow:var(--shadow); transform:translateX(4px); }
.notice-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }
.notice-card.urgent::before { background:var(--red); }
.notice-card.info::before { background:var(--blue-bright); }
.notice-card.general::before { background:var(--green); }
.notice-card.event::before { background:var(--yellow-dark); }
.notice-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:9px; }
.notice-title { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; color:var(--text-dark); padding-right:10px; }
.notice-type-badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; text-transform:uppercase; flex-shrink:0; }
.nt-urgent { background:rgba(211,47,47,0.1); color:var(--red); }
.nt-info { background:var(--blue-light); color:var(--blue-deep); }
.nt-general { background:rgba(27,122,62,0.1); color:var(--green); }
.nt-event { background:var(--yellow-light); color:#A07000; }
.notice-body { font-size:13px; color:var(--text-mid); line-height:1.65; }
.notice-footer { display:flex; align-items:center; gap:14px; margin-top:12px; }
.notice-meta { font-size:11px; color:var(--text-light); }

/* PROFILE */
.profile-hero {
  background:linear-gradient(135deg, var(--blue-deep), var(--blue-mid));
  border-radius:22px; padding:34px; color:white; margin-bottom:22px;
  display:flex; align-items:center; gap:26px;
}
.profile-avatar-large {
  width:84px; height:84px; border-radius:22px;
  background:var(--yellow); display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-size:32px; font-weight:700;
  color:var(--blue-deep); flex-shrink:0; border:3px solid rgba(255,255,255,0.3);
}
.profile-info h2 { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; margin-bottom:4px; }
.profile-info .student-id { font-size:13px; opacity:0.55; }
.profile-tags { display:flex; gap:7px; margin-top:11px; flex-wrap:wrap; }
.profile-tag { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:20px; padding:4px 12px; font-size:11px; font-weight:600; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* TOAST */
.toast-container { position:fixed; bottom:22px; right:22px; z-index:9999; display:flex; flex-direction:column; gap:9px; }
.toast { padding:13px 18px; border-radius:13px; display:flex; align-items:center; gap:11px; font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); animation:toastIn 0.4s cubic-bezier(0.16,1,0.3,1); max-width:320px; color:white; }
.toast.success { background:var(--blue-deep); }
.toast.error { background:var(--red); }
.toast.warning { background:#E65100; }
@keyframes toastIn { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }

/* MODAL */
.modal-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,30,80,0.5); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--white); border-radius:22px; padding:34px; width:500px; max-width:92vw; transform:scale(0.95) translateY(18px); transition:transform 0.3s cubic-bezier(0.16,1,0.3,1); max-height:88vh; overflow-y:auto; }
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.modal-title { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; color:var(--text-dark); }
.modal-close { cursor:pointer; font-size:20px; color:var(--text-light); opacity:0.6; }
.modal-close:hover { opacity:1; }

/* GCTU accent bar in header */
.gctu-top-accent {
  height:4px;
  background:repeating-linear-gradient(90deg,
    var(--yellow) 0, var(--yellow) 30px,
    var(--blue-deep) 30px, var(--blue-deep) 60px,
    var(--white) 60px, var(--white) 70px,
    var(--blue-deep) 70px, var(--blue-deep) 100px);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width:1100px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
}

@media (max-width:900px) {
  .login-split { flex-direction:column; width:420px; }
  .login-brand { width:100%; padding:28px 32px; }
  .brand-features { flex-direction:row; flex-wrap:wrap; }
  .sidebar { width:200px; }
  .page-title { font-size:17px; }
}

@media (max-width:768px) {
  /* LOGIN SCREEN */
  .login-split { width:96vw; max-width:100%; border-radius:18px; }
  .login-brand { padding:28px 20px; }
  .brand-name { font-size:24px; }
  .brand-tagline { font-size:12px; margin-bottom:20px; }
  .brand-features { gap:10px; }
  .brand-feature { font-size:12px; gap:8px; }
  .login-form-area { padding:28px 20px; }
  .lf-header h2 { font-size:22px; }

  /* LAYOUT */
  body { overflow-x:hidden; }
  .sidebar { width:100%; height:auto; position:relative; min-height:auto; flex-direction:row; align-items:center; justify-content:space-between; padding:12px 16px; }
  .sidebar-header { padding:0; border:none; background:transparent; flex:1; }
  .sidebar-logo { margin-right:auto; }
  .sidebar-nav { display:none; padding:0; flex:none; }
  .sidebar-nav.mobile-open { display:flex; position:absolute; top:60px; left:0; right:0; flex-direction:column; background:var(--blue-deep); border-bottom:1px solid rgba(255,255,255,0.1); z-index:90; }
  .sidebar-footer { display:none; }
  .hamburger-menu { display:block !important; }

  /* TOP BAR */
  .top-bar { padding:0 16px; height:56px; }
  .page-title { font-size:16px; margin-right:auto; }
  .search-bar { display:none; }
  .top-bar-right { gap:6px; }

  /* PAGES */
  .page { padding:16px; }
  #app { flex-direction:column; }

  /* STATS GRID */
  .stats-grid { grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
  .stat-card { padding:16px; border-radius:14px; }
  .stat-icon { width:40px; height:40px; font-size:18px; }
  .stat-value { font-size:24px; }
  .stat-label { font-size:11px; }

  /* DASHBOARD GRID */
  .dashboard-grid { grid-template-columns:1fr; gap:16px; }

  /* CARDS */
  .card { border-radius:14px; }
  .card-header { padding:14px 16px; }
  .card-title { font-size:14px; }
  .card-body { padding:16px; }

  /* BUTTONS */
  .btn { padding:8px 16px; font-size:12px; border-radius:9px; }
  .btn-sm { padding:6px 12px; font-size:11px; }

  /* QUICK ACTIONS */
  .quick-actions { grid-template-columns:1fr; gap:10px; }
  .quick-btn { padding:12px 14px; font-size:12px; }

  /* FORMS */
  .complaint-form { padding:18px; border-radius:14px; }
  .form-row { grid-template-columns:1fr; gap:12px; }
  .form-field { margin-bottom:12px; }
  .form-field input, .form-field select, .form-field textarea { padding:10px 12px; font-size:13px; }
  .form-field label { font-size:10px; margin-bottom:6px; }

  /* ROOMS */
  .room-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .room-card { padding:14px; border-radius:14px; }
  .room-number { font-size:18px; }
  .room-type { font-size:11px; }
  .room-price { font-size:15px; margin-top:10px; padding-top:10px; }

  /* TABLES */
  .data-table th { padding:9px 12px; font-size:9px; }
  .data-table td { padding:11px 12px; font-size:12px; }

  /* PAYMENT */
  .payment-hero { padding:24px; border-radius:18px; margin-bottom:18px; }
  .payment-hero .amount { font-size:36px; }
  .payment-methods { grid-template-columns:1fr; gap:12px; }
  .pay-method { padding:16px; border-radius:12px; }
  .pay-method .pm-icon { font-size:24px; }
  .pay-method .pm-name { font-size:12px; }

  /* LAUNDRY */
  .laundry-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .machine-card { padding:14px; border-radius:14px; }
  .machine-icon { font-size:30px; }
  .machine-id { font-size:15px; }

  /* WATER */
  .water-schedule-grid { grid-template-columns:repeat(4,1fr); gap:8px; }
  .water-day { padding:10px 6px; border-radius:10px; }
  .water-day .day-name { font-size:9px; }
  .water-day .day-num { font-size:16px; }

  /* MARKETPLACE */
  .market-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .market-item { border-radius:14px; }
  .market-img { height:110px; font-size:40px; }
  .market-body { padding:12px; }
  .market-name { font-size:13px; }
  .market-seller { font-size:11px; }
  .market-footer { font-size:9px; }

  /* NOTICES */
  .notice-card { padding:16px; border-radius:14px; margin-bottom:12px; }
  .notice-title { font-size:14px; }
  .notice-body { font-size:12px; }

  /* PROFILE */
  .profile-hero { padding:20px; gap:16px; border-radius:16px; }
  .profile-avatar-large { width:70px; height:70px; font-size:28px; border-radius:16px; }
  .profile-info h2 { font-size:18px; }
  .profile-grid { grid-template-columns:1fr; gap:14px; }

  /* MODAL */
  .modal { width:90vw; max-width:100%; padding:20px; border-radius:18px; }
  .modal-title { font-size:17px; }

  /* FILTERS */
  .filters { gap:7px; }
  .filter-btn { padding:6px 12px; font-size:11px; border-radius:25px; }

  /* SECTION HEADER */
  .section-header h2 { font-size:18px; }

  /* OCCUPANCY BARS */
  .occ-label { width:60px; font-size:11px; }
  .occ-pct { width:32px; font-size:11px; }
}

@media (max-width:600px) {
  /* LOGIN SCREEN */
  .login-split { border-radius:12px; }
  .login-brand { padding:20px 16px; }
  .brand-logo-wrap { width:60px; height:60px; font-size:28px; }
  .brand-name { font-size:20px; }
  .lf-header h2 { font-size:18px; }
  .lf-header p { font-size:12px; }
  .login-tabs { gap:2px; margin-bottom:20px; }
  .login-tab { padding:8px; font-size:11px; }
  .form-group label { font-size:10px; }
  .form-group input, .form-group select { padding:11px 12px; font-size:13px; }
  .login-btn { padding:12px; font-size:14px; margin-top:6px; }
  .demo-hint { font-size:11px; margin-top:12px; }

  /* SIDEBAR - MOBILE HAMBURGER */
  .hamburger-menu { display:block !important; }
  .sidebar-logo-text h2 { font-size:15px; }
  .sidebar-logo-text p { font-size:9px; }
  .sidebar-user { padding:10px 16px; }
  .user-avatar { width:34px; height:34px; font-size:12px; }
  .user-info .name { font-size:12px; }
  .user-info .role { font-size:9px; }

  /* TOP BAR */
  .top-bar { height:52px; padding:0 12px; gap:8px; }
  .page-title { font-size:14px; }
  .icon-btn { width:34px; height:34px; font-size:14px; }

  /* MAIN CONTENT */
  .main-content { min-height:100vh; }

  /* STATS GRID */
  .stats-grid { grid-template-columns:1fr; gap:10px; }
  .stat-card { padding:14px; border-radius:12px; }
  .stat-icon { width:36px; height:36px; font-size:16px; margin-bottom:10px; }
  .stat-value { font-size:20px; margin-bottom:4px; }
  .stat-label { font-size:10px; }
  .stat-change { font-size:10px; padding:3px 8px; top:14px; right:14px; }

  /* CARDS & SECTIONS */
  .card { border-radius:12px; }
  .card-header { padding:12px 14px; }
  .card-title { font-size:13px; }
  .card-body { padding:14px; }

  /* BUTTONS */
  .btn { padding:8px 14px; font-size:11px; border-radius:8px; }
  .btn-sm { padding:6px 10px; font-size:10px; }
  .quick-btn { padding:11px 13px; font-size:11px; }

  /* PAGES */
  .page { padding:12px; }

  /* FORMS */
  .complaint-form { padding:16px; border-radius:12px; margin-bottom:16px; }
  .form-field { margin-bottom:11px; }
  .form-field label { font-size:9px; }
  .form-field input, .form-field select, .form-field textarea { padding:9px 11px; font-size:12px; border-radius:9px; }

  /* ROOMS */
  .room-grid { grid-template-columns:1fr; gap:10px; }
  .room-card { padding:12px; }
  .room-status-badge { font-size:9px; top:10px; right:10px; }
  .room-number { font-size:16px; }
  .room-type { font-size:10px; }
  .room-details { gap:8px; }
  .room-detail { font-size:10px; }
  .room-price { font-size:14px; margin-top:9px; }

  /* TABLES */
  .data-table { font-size:12px; }
  .data-table th { padding:8px 10px; font-size:8px; }
  .data-table td { padding:10px 10px; font-size:11px; }
  .priority-badge, .status-badge { font-size:8px; padding:2px 7px; }

  /* PAYMENT */
  .payment-hero { padding:20px; border-radius:16px; }
  .payment-hero::before { width:150px; height:150px; right:-10px; top:-10px; }
  .payment-hero h3 { font-size:11px; }
  .payment-hero .amount { font-size:32px; }
  .payment-hero .due { font-size:12px; }
  .payment-actions { gap:8px; margin-top:16px; }
  .pay-btn { padding:9px 18px; font-size:12px; border-radius:9px; }
  .payment-methods { grid-template-columns:1fr; }
  .pay-method { padding:14px; }

  /* LAUNDRY */
  .laundry-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .machine-card { padding:12px; }
  .machine-icon { font-size:28px; }
  .machine-id { font-size:14px; }

  /* WATER */
  .water-schedule-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
  .water-day { padding:8px 4px; border-radius:8px; }
  .water-day .day-name { font-size:8px; }
  .water-day .day-num { font-size:14px; margin:2px 0; }
  .water-icon { font-size:14px; }

  /* MARKETPLACE */
  .market-grid { grid-template-columns:1fr; gap:10px; }
  .market-item { border-radius:12px; }
  .market-img { height:100px; font-size:36px; }
  .market-body { padding:11px; }
  .market-name { font-size:12px; }
  .market-seller { font-size:10px; }
  .market-price { font-size:15px; }

  /* NOTICES */
  .notice-card { padding:14px; border-radius:12px; }
  .notice-header { margin-bottom:8px; }
  .notice-title { font-size:13px; }
  .notice-body { font-size:11px; line-height:1.5; }
  .notice-footer { gap:10px; margin-top:10px; }

  /* PROFILE */
  .profile-hero { padding:18px; gap:14px; flex-direction:column; }
  .profile-avatar-large { width:64px; height:64px; font-size:26px; margin:0 auto; }
  .profile-info { text-align:center; }
  .profile-info h2 { font-size:16px; }
  .profile-tags { justify-content:center; }
  .profile-grid { grid-template-columns:1fr; }

  /* MODAL */
  .modal { width:95vw; padding:18px; border-radius:16px; }
  .modal-title { font-size:16px; }

  /* SEARCH BAR (MOBILE) */
  .search-bar { width:100%; }

  /* TOAST */
  .toast { max-width:90vw; font-size:12px; padding:11px 16px; border-radius:11px; }

  /* ACTIVITY & OTHER ELEMENTS */
  .activity-item { padding:10px 0; font-size:11px; }
  .activity-dot { width:7px; height:7px; }
  .activity-time { font-size:9px; }

  /* OCCUPANCY BARS */
  .occupancy-bars { gap:10px; }
  .occ-row { gap:8px; }
  .occ-label { font-size:10px; }
  .occ-bar-bg { height:8px; }
  .occ-pct { font-size:10px; }

  /* ALERTS */
  .alert-banner { padding:12px 14px; gap:10px; border-radius:12px; }
  .alert-icon { font-size:18px; }
  .alert-text h4 { font-size:12px; }
  .alert-text p { font-size:11px; }

  /* FILTERS */
  .filters { gap:6px; margin-bottom:16px; }
  .filter-btn { padding:6px 11px; font-size:10px; }

  /* SECTION HEADER */
  .section-header { margin-bottom:16px; }
  .section-header h2 { font-size:16px; }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width:4px; }
}

@media (max-width:480px) {
  /* EXTRA SMALL PHONES */
  .hamburger-menu { display:block !important; }
  .login-split { width:98vw; }
  .login-brand { padding:16px 12px; }
  .brand-logo-wrap { width:52px; height:52px; font-size:24px; }
  .brand-name { font-size:18px; margin-bottom:4px; }
  .brand-tagline { font-size:11px; margin-bottom:14px; }
  .brand-feature { font-size:11px; }

  .top-bar { height:48px; }
  .page-title { font-size:13px; }
  .icon-btn { width:32px; height:32px; font-size:13px; }

  .stats-grid { gap:8px; margin-bottom:14px; }
  .stat-card { padding:12px; border-radius:11px; }
  .stat-value { font-size:18px; }

  .room-grid { gap:8px; }
  .market-grid { gap:8px; }

  .page { padding:10px; }
  .form-field { margin-bottom:10px; }

  .payment-hero .amount { font-size:28px; }
  .laundry-grid { gap:8px; }
  .water-schedule-grid { gap:5px; }

  .card-header { padding:11px 12px; }
  .card-body { padding:12px; }

  .notice-card { padding:12px; }
  .modal { width:97vw; padding:16px; }
}