*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0D0F14; --surface:#13151C; --surface2:#1A1D27; --border:#1E2130;
  --text:#FFFFFF; --muted:#AAA; --dim:#777;
  --accent:#FF4D6D; --accent-dim:#FF4D6D18;
  --danger:#FF453A; --danger-dim:#FF453A18;
  --radius:10px; --shadow:0 4px 24px #00000060;
}
body { font-family:'Courier New',Courier,monospace; background:var(--bg); color:var(--text); height:100vh; display:flex; overflow:hidden; }

/* SIDEBAR */
#sidebar { width:240px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:20px 16px; gap:6px; flex-shrink:0; overflow-y:auto; transition:transform .3s; z-index:50; }
.logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.logo-icon { font-size:26px; }
.logo-title { font-size:18px; font-weight:700; letter-spacing:4px; color:var(--accent); }
.logo-sub { font-size:10px; letter-spacing:5px; color:var(--dim); margin-top:-2px; }
.nav { display:flex; flex-direction:column; gap:4px; }
.nav-btn { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; text-align:left; font-family:inherit; transition:all .2s; width:100%; }
.nav-btn:hover { background:var(--border); color:var(--text); }
.nav-btn.active { background:var(--accent-dim); color:var(--accent); font-weight:700; }
.side-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:5px; }
.side-label { font-size:11px; letter-spacing:3px; color:var(--dim); margin-bottom:4px; font-weight:600; }
.filter-chip { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:13px; text-align:left; font-family:inherit; width:100%; transition:all .2s; }
.filter-chip.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.stat-row { display:flex; align-items:center; gap:8px; padding:3px 0; }
.stat-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.stat-label { flex:1; font-size:13px; color:var(--muted); }
.stat-count { font-size:16px; font-weight:700; }
.add-btn { margin-top:auto; padding:14px; border-radius:var(--radius); border:none; background:var(--accent); color:#fff; cursor:pointer; font-size:14px; font-weight:700; letter-spacing:1px; font-family:inherit; }
.add-btn:hover { opacity:.85; }
.hamburger { display:none; position:fixed; top:16px; left:16px; z-index:60; background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:20px; width:40px; height:40px; border-radius:8px; cursor:pointer; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:#00000066; z-index:40; }

/* MAIN */
#main { flex:1; display:flex; flex-direction:column; padding:24px; gap:20px; overflow:hidden; }
.view { display:none; flex-direction:column; gap:16px; flex:1; overflow-y:auto; }
.view.active { display:flex; }

/* CALENDAR */
.cal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; }
.cal-title { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; letter-spacing:2px; }
.nav-arrow { background:var(--surface2); border:none; color:var(--text); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:18px; transition:background .2s; }
.nav-arrow:hover { background:var(--border); }
#cal-month-label { min-width:190px; text-align:center; }
.total-badge { background:var(--surface2); padding:8px 16px; border-radius:20px; font-size:13px; color:var(--muted); white-space:nowrap; font-weight:600; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; flex-shrink:0; }
.day-label { text-align:center; font-size:12px; letter-spacing:2px; color:var(--dim); padding:8px 0; font-weight:600; }
.cal-cell { min-height:70px; background:var(--surface); border-radius:8px; padding:7px; cursor:pointer; border:2px solid transparent; transition:all .15s; }
.cal-cell:hover { border-color:var(--border); }
.cal-cell.selected { border-color:var(--accent); background:var(--accent-dim); }
.cal-cell.today { border-color:#0A84FF44; }
.cell-day { font-size:14px; color:var(--muted); margin-bottom:4px; font-weight:600; }
.cell-day.today-num { color:#0A84FF; font-weight:700; }
.cell-dots { display:flex; flex-wrap:wrap; gap:3px; }
.cell-dot { width:8px; height:8px; border-radius:50%; }
.cell-more { font-size:9px; color:var(--dim); }

/* DAY PANEL */
.day-panel { background:var(--surface); border-radius:var(--radius); padding:18px; overflow-y:auto; max-height:260px; flex-shrink:0; }
.day-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.day-panel-title { font-size:16px; font-weight:700; letter-spacing:1px; }
.empty { color:var(--dim); font-size:14px; text-align:center; padding:20px 0; }

/* SESSION CARD */
.session-card { background:var(--bg); border-radius:8px; padding:14px; margin-bottom:10px; border-left:4px solid #888; }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.card-brand { font-size:11px; letter-spacing:2px; font-weight:700; margin-bottom:2px; }
.card-title { font-size:16px; font-weight:700; color:var(--text); }
.card-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.status-badge { font-size:11px; letter-spacing:1px; padding:4px 10px; border-radius:20px; font-weight:700; }
.icon-btn { background:none; border:none; cursor:pointer; font-size:14px; padding:4px 5px; border-radius:6px; transition:background .15s; }
.icon-btn:hover { background:var(--border); }
.card-meta { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--muted); margin-bottom:8px; }
.crew-row { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:5px; }
.crew-chip { font-size:12px; padding:4px 10px; border-radius:20px; background:var(--surface2); color:#ccc; }
.card-notes { font-size:13px; color:#888; margin-top:4px; }

/* BRANDS VIEW */
.section-header { display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.section-title { font-size:20px; font-weight:700; letter-spacing:2px; }
.brands-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.brand-card { background:var(--surface); border-radius:var(--radius); overflow:hidden; border:2px solid var(--border); }
.brand-card-top { display:flex; align-items:center; gap:12px; padding:14px 16px; }
.brand-avatar { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#fff; flex-shrink:0; }
.brand-card-name { font-size:16px; font-weight:700; }
.brand-card-sub { font-size:13px; color:var(--muted); margin-top:2px; }
.brand-card-actions { margin-left:auto; display:flex; gap:4px; }
.brand-card-body { padding:0 16px 14px; }
.brand-section-title { font-size:11px; letter-spacing:3px; color:var(--dim); margin:10px 0 6px; font-weight:600; }
.brand-stats { display:flex; gap:16px; }
.brand-stat-item { text-align:center; }
.brand-stat-num { font-size:22px; font-weight:700; }
.brand-stat-lb { font-size:12px; color:#888; }

/* CREW GRID */
.crew-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.crew-card { background:var(--surface); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; align-items:center; gap:7px; border:1px solid var(--border); position:relative; }
.crew-card-actions { position:absolute; top:8px; right:8px; display:flex; gap:4px; opacity:0; transition:opacity .2s; }
.crew-card:hover .crew-card-actions { opacity:1; }
.crew-avatar { width:44px; height:44px; border-radius:50%; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--accent); }
.crew-name { font-size:14px; text-align:center; color:#ddd; font-weight:600; }
.crew-role { font-size:11px; color:var(--accent); }
.crew-phone { font-size:11px; color:var(--dim); }
.crew-sub { font-size:11px; color:var(--dim); }

/* MODAL */
.overlay { position:fixed; inset:0; background:#00000088; display:none; align-items:center; justify-content:center; z-index:100; padding:16px; }
.overlay.show { display:flex; }
.modal { background:var(--surface); border-radius:16px; width:100%; max-width:520px; max-height:90vh; display:flex; flex-direction:column; border:1px solid var(--border); box-shadow:var(--shadow); animation:slideUp .2s ease; }
@keyframes slideUp { from{transform:translateY(30px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:18px 24px 14px; border-bottom:1px solid var(--border); }
.modal-title { font-size:18px; font-weight:700; letter-spacing:1px; }
.close-btn { background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; }
.modal-body { padding:18px 24px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.modal-footer { padding:14px 24px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* FORM */
.form-group { display:flex; flex-direction:column; gap:5px; }
.form-label { font-size:12px; letter-spacing:2px; color:var(--muted); font-weight:600; }
.form-control { padding:12px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:15px; font-family:inherit; outline:none; width:100%; transition:border .2s; }
.form-control:focus { border-color:var(--accent); }
.form-row { display:flex; gap:12px; }
.form-row .form-group { flex:1; }
.tag-picker { display:flex; flex-wrap:wrap; gap:6px; min-height:36px; }
.tag-btn { padding:6px 12px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:13px; font-family:inherit; transition:all .2s; }
.tag-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

/* BUTTONS */
.btn-outline { padding:8px 16px; border-radius:8px; border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; font-size:13px; font-weight:700; font-family:inherit; transition:all .2s; }
.btn-outline:hover { background:var(--accent-dim); }
.btn-cancel { padding:12px 24px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:14px; font-weight:600; font-family:inherit; }
.btn-primary { padding:12px 24px; border-radius:8px; border:none; background:var(--accent); color:#fff; cursor:pointer; font-size:14px; font-weight:700; font-family:inherit; }
.btn-primary:hover { opacity:.85; }
.btn-danger { padding:12px 24px; border-radius:8px; border:none; background:var(--danger); color:#fff; cursor:pointer; font-size:14px; font-weight:700; font-family:inherit; }
.btn-danger:hover { opacity:.85; }
.btn-icon-edit { background:var(--surface2); border:1px solid var(--border); color:#aaa; border-radius:6px; padding:3px 7px; cursor:pointer; font-size:13px; }
.btn-icon-edit:hover { color:var(--accent); border-color:var(--accent); }
.btn-icon-del { background:var(--surface2); border:1px solid var(--border); color:#aaa; border-radius:6px; padding:3px 7px; cursor:pointer; font-size:13px; }
.btn-icon-del:hover { color:var(--danger); border-color:var(--danger); }

/* COLOR PICKER */
.color-picker { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.color-dot { width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:transform .15s; }
.color-dot:hover { transform:scale(1.1); }
.color-dot.selected { border-color:#fff; transform:scale(1.1); }

/* LOGIN SCREEN */
.login-screen { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:500; }
.login-box { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:36px 32px; width:100%; max-width:380px; display:flex; flex-direction:column; gap:20px; align-items:center; box-shadow:var(--shadow); }
.login-welcome { font-size:16px; color:var(--muted); letter-spacing:1px; font-weight:600; }
.login-tabs { display:flex; gap:8px; width:100%; }
.login-tab { flex:1; padding:12px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:13px; font-weight:600; font-family:inherit; transition:all .2s; }
.login-tab.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); font-weight:700; }
.admin-form { display:flex; flex-direction:column; gap:12px; width:100%; }
.login-error { color:var(--danger); font-size:13px; min-height:16px; font-weight:600; }
.login-btn { width:100%; padding:14px; font-size:15px; letter-spacing:1px; }

/* LOADING SCREEN */
.loading-screen { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:500; gap:16px; }
.loading-spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:14px; color:var(--muted); letter-spacing:2px; font-weight:600; }

/* AUTH INFO */
.auth-info { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.auth-badge { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:8px; font-size:12px; letter-spacing:1px; font-weight:600; }
.auth-badge.admin { background:#30D15818; color:#30D158; }
.auth-badge.user { background:#0A84FF18; color:#0A84FF; }
.auth-logout { background:none; border:1px solid currentColor; color:inherit; padding:3px 8px; border-radius:6px; cursor:pointer; font-size:10px; font-family:inherit; opacity:.7; transition:opacity .2s; }
.auth-logout:hover { opacity:1; }

/* TOAST */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border); color:var(--text); padding:12px 24px; border-radius:20px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .3s; z-index:200; white-space:nowrap; font-weight:600; }
.toast.show { opacity:1; }

/* RESPONSIVE */
@media (max-width:768px) {
  body { flex-direction:column; }
  #sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-100%); z-index:50; }
  #sidebar.open { transform:translateX(0); }
  .sidebar-backdrop.show { display:block; }
  .hamburger { display:flex; align-items:center; justify-content:center; }
  #main { padding:16px; padding-top:68px; }
  .cal-cell { min-height:50px; padding:5px; }
  #cal-month-label { min-width:140px; font-size:14px; }
  .form-row { flex-direction:column; gap:12px; }
  .brands-grid { grid-template-columns:1fr; }
}