:root {
  --bg:#0b0f1a; --bg-card:#141926; --bg-card-hover:#1a2035;
  --border:#1e2740; --border-light:#2a3555;
  --accent:#3b82f6; --accent-glow:rgba(59,130,246,0.15); --accent-dark:#2563eb;
  --green:#10b981; --green-bg:rgba(16,185,129,0.12); --green-border:rgba(16,185,129,0.3);
  --orange:#f59e0b; --orange-bg:rgba(245,158,11,0.12); --orange-border:rgba(245,158,11,0.3);
  --red:#ef4444; --red-bg:rgba(239,68,68,0.12); --red-border:rgba(239,68,68,0.3);
  --gray:#64748b; --gray-light:#94a3b8; --white:#f1f5f9; --white-dim:#cbd5e1;
  --font-display:'Outfit',sans-serif; --font-body:'DM Sans',sans-serif;
  --radius:12px; --radius-lg:18px; --radius-pill:50px;
  --shadow:0 4px 24px rgba(0,0,0,0.3);
  --fb-blue:#1877f2; --fb-blue-bg:rgba(24,119,242,0.12); --fb-blue-border:rgba(24,119,242,0.3);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); background:var(--bg); color:var(--white); min-height:100vh; min-height:100dvh; overflow-x:hidden; }

@keyframes fadeIn  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes slideIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes spin    { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; min-height:100dvh; padding:1.2rem; background:radial-gradient(ellipse at 30% 20%,rgba(59,130,246,0.08),transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(16,185,129,0.05),transparent 60%),var(--bg); }
.login-card { width:100%; max-width:420px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow); animation:fadeIn .5s ease; }
.login-logo { text-align:center; margin-bottom:1.5rem; }
.login-logo h1 { font-family:var(--font-display); font-size:1.6rem; font-weight:800; letter-spacing:-1px; }
.login-logo h1 span { color:var(--accent); }
.login-logo p { color:var(--gray); font-size:.82rem; margin-top:.3rem; }
.login-field { margin-bottom:1rem; }
.login-field label { display:block; font-size:.72rem; font-weight:700; color:var(--gray-light); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.4rem; }
.login-field input { width:100%; padding:.8rem .9rem; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); color:var(--white); font-family:inherit; font-size:1rem; transition:all .25s; -webkit-appearance:none; }
.login-field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.login-btn { width:100%; padding:.85rem; background:var(--accent); color:white; border:none; border-radius:var(--radius); font-family:inherit; font-size:.95rem; font-weight:700; cursor:pointer; transition:all .25s; margin-top:.5rem; -webkit-appearance:none; }
.login-btn:hover { background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(59,130,246,0.3); }
.login-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.login-error { color:var(--red); font-size:.82rem; text-align:center; margin-top:.8rem; min-height:1.2rem; }

.dashboard { display:none; animation:fadeIn .4s ease; }
.dash-header { background:var(--bg-card); border-bottom:1px solid var(--border); padding:.8rem 1rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); gap:.5rem; }
.dash-brand { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.dash-brand h2 { font-family:var(--font-display); font-size:1.1rem; font-weight:800; letter-spacing:-.5px; }
.dash-brand h2 span { color:var(--accent); }
.dash-user { display:flex; align-items:center; gap:.6rem; min-width:0; }
.dash-user-info { text-align:right; min-width:0; }
.dash-user-info .name { font-weight:700; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-user-info .role { font-size:.65rem; color:var(--gray); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-avatar { width:34px; height:34px; min-width:34px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.75rem; color:white; }
.btn-logout { background:transparent; border:1px solid var(--border); color:var(--gray-light); padding:.4rem .7rem; border-radius:var(--radius); font-family:inherit; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .25s; white-space:nowrap; flex-shrink:0; }
.btn-logout:hover { border-color:var(--red); color:var(--red); background:var(--red-bg); }
.dash-main { max-width:1200px; margin:0 auto; padding:1rem; }

.status-section { margin-bottom:1.5rem; }
.section-label { font-family:var(--font-display); font-size:.7rem; font-weight:700; color:var(--accent); letter-spacing:.15em; text-transform:uppercase; margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem; }
.section-label::after { content:''; flex:1; height:1px; background:var(--border); }
.status-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.status-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem .8rem; transition:all .25s; }
.status-card .number { font-family:var(--font-display); font-size:1.8rem; font-weight:800; line-height:1; }
.status-card .label { font-size:.7rem; color:var(--gray); margin-top:.2rem; font-weight:500; }
.status-card.active .number { color:var(--green); }
.status-card.lunch  .number { color:var(--orange); }
.status-card.idle   .number { color:var(--gray-light); }
.status-card.out    .number { color:var(--red); }

.clock-section { margin-bottom:1.5rem; }
.clock-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.clock-btn { padding:1rem .6rem; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--bg-card); color:var(--white); font-family:inherit; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .3s; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.clock-btn i { font-size:1.2rem; }
.clock-btn:hover:not(:disabled) { transform:translateY(-3px); box-shadow:var(--shadow); }
.clock-btn:disabled { opacity:.35; cursor:not-allowed; transform:none; }
.clock-btn.clock-in    { border-color:var(--green-border);  color:var(--green); }  .clock-btn.clock-in:hover:not(:disabled)    { background:var(--green-bg); }
.clock-btn.lunch-start { border-color:var(--orange-border); color:var(--orange); } .clock-btn.lunch-start:hover:not(:disabled) { background:var(--orange-bg); }
.clock-btn.lunch-end   { border-color:var(--accent);        color:var(--accent); } .clock-btn.lunch-end:hover:not(:disabled)   { background:var(--accent-glow); }
.clock-btn.clock-out   { border-color:var(--red-border);    color:var(--red); }    .clock-btn.clock-out:hover:not(:disabled)   { background:var(--red-bg); }

.current-status { text-align:center; margin-bottom:1rem; padding:1rem .8rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.current-status .status-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:var(--radius-pill); font-size:.78rem; font-weight:700; }
.status-badge.online   { background:var(--green-bg);  color:var(--green);  border:1px solid var(--green-border); }
.status-badge.on-lunch { background:var(--orange-bg); color:var(--orange); border:1px solid var(--orange-border); }
.status-badge.offline  { background:var(--red-bg);    color:var(--red);    border:1px solid var(--red-border); }
.status-badge.idle     { background:rgba(100,116,139,.12); color:var(--gray-light); border:1px solid rgba(100,116,139,.3); }
.current-time { font-family:var(--font-display); font-size:2.2rem; font-weight:800; margin-bottom:.2rem; letter-spacing:-1px; }
.current-date { color:var(--gray); font-size:.8rem; }

.team-section { margin-bottom:1.5rem; }
.team-table { width:100%; border-collapse:collapse; background:var(--bg-card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.team-table thead th { background:rgba(59,130,246,.06); color:var(--accent); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.7rem .5rem; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.team-table tbody td { padding:.6rem .5rem; font-size:.8rem; color:var(--white-dim); border-bottom:1px solid var(--border); }
.team-table tbody tr:last-child td { border-bottom:none; }
.team-table tbody tr:hover { background:var(--bg-card-hover); }
.emp-status { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .5rem; border-radius:var(--radius-pill); font-size:.65rem; font-weight:700; white-space:nowrap; }
.emp-status.online   { background:var(--green-bg);  color:var(--green); }
.emp-status.on-lunch { background:var(--orange-bg); color:var(--orange); }
.emp-status.offline  { background:var(--red-bg);    color:var(--red); }
.emp-status.idle     { background:rgba(100,116,139,.12); color:var(--gray-light); }
.emp-status::before  { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.brand-tag { display:inline-block; padding:.12rem .5rem; border-radius:var(--radius-pill); font-size:.65rem; font-weight:600; background:var(--accent-glow); color:var(--accent); border:1px solid rgba(59,130,246,.2); white-space:nowrap; }
.btn-refresh { background:var(--accent-glow); border:1px solid rgba(59,130,246,.3); color:var(--accent); padding:.35rem .8rem; border-radius:var(--radius); font-family:inherit; font-size:.72rem; font-weight:700; cursor:pointer; transition:all .25s; display:inline-flex; align-items:center; gap:.4rem; }
.btn-refresh:hover { background:var(--accent); color:white; transform:translateY(-1px); }
.btn-refresh:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-refresh .fa-sync-alt.spinning { animation:spin .8s linear infinite; }

.team-cards { display:none; flex-direction:column; gap:.6rem; }
.team-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem; }
.team-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.team-card-name { font-weight:700; font-size:.88rem; color:var(--white); }
.team-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:.3rem .8rem; font-size:.75rem; color:var(--gray-light); margin-top:.4rem; }
.team-card-grid .lbl { color:var(--gray); font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.team-card-grid .val { color:var(--white-dim); }

/* ── COMMS TABS ── */
.comms-tabs { display:flex; gap:.4rem; margin-bottom:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:.3rem; }
.comms-tab { flex:1; padding:.65rem .8rem; border:none; border-radius:10px; background:transparent; color:var(--gray-light); font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer; transition:all .25s; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.comms-tab:hover { color:var(--white); background:rgba(255,255,255,.04); }
.comms-tab.active { background:var(--accent); color:white; box-shadow:0 4px 16px rgba(59,130,246,.3); }
.comms-tab i { font-size:.9rem; }

.messages-section { margin-bottom:1.5rem; }
.messages-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; flex-wrap:wrap; gap:.5rem; }
.messages-header .section-label { margin-bottom:0; }
.messages-filters { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; }
.filter-btn { padding:.3rem .7rem; border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--bg-card); color:var(--gray-light); font-family:inherit; font-size:.68rem; font-weight:600; cursor:pointer; transition:all .25s; white-space:nowrap; }
.filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.filter-btn.active { background:var(--accent); color:white; border-color:var(--accent); }
.filter-btn .badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:8px; font-size:.55rem; font-weight:800; margin-left:4px; background:rgba(255,255,255,.2); color:white; }
.filter-btn:not(.active) .badge { background:var(--accent-glow); color:var(--accent); }
.messages-count { font-size:.72rem; color:var(--gray); margin-bottom:.6rem; }

.inbox-container { display:grid; grid-template-columns:320px 1fr; height:600px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.inbox-list { border-right:1px solid var(--border); overflow-y:auto; background:var(--bg-card); }
.inbox-list::-webkit-scrollbar { width:3px; }
.inbox-list::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:3px; }
.inbox-item { display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem; border-bottom:1px solid var(--border); cursor:pointer; transition:all .2s; }
.inbox-item:hover { background:var(--bg-card-hover); }
.inbox-item.active { background:var(--accent-glow); border-left:3px solid var(--accent); }
.inbox-avatar { width:36px; height:36px; min-width:36px; border-radius:50%; background:var(--accent-glow); border:1px solid rgba(59,130,246,.3); display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; color:var(--accent); }
.inbox-info { flex:1; min-width:0; }
.inbox-name { font-size:.8rem; font-weight:700; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-preview { font-size:.68rem; color:var(--gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.1rem; }
.inbox-meta { display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; flex-shrink:0; }
.inbox-time { font-size:.58rem; color:var(--gray); white-space:nowrap; }
.inbox-brand-tag { font-size:.5rem; padding:.1rem .35rem; border-radius:4px; font-weight:700; background:var(--accent-glow); color:var(--accent); white-space:nowrap; max-width:80px; overflow:hidden; text-overflow:ellipsis; }
.inbox-msg-count { font-size:.55rem; font-weight:800; color:var(--accent); background:var(--accent-glow); border-radius:8px; padding:0 5px; min-width:18px; text-align:center; }

.chat-panel { display:flex; flex-direction:column; background:var(--bg); overflow:hidden; min-height:0; }
.chat-header { padding:.6rem .8rem; border-bottom:1px solid var(--border); background:var(--bg-card); display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.chat-header-name  { font-size:.85rem; font-weight:700; color:var(--white); }
.chat-header-brand { font-size:.6rem; color:var(--accent); font-weight:600; }
.chat-header-info  { flex:1; }
.btn-delete-convo { background:transparent; border:1px solid var(--border); color:var(--gray-light); width:32px; height:32px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; font-size:.75rem; flex-shrink:0; }
.btn-delete-convo:hover { border-color:var(--red); color:var(--red); background:var(--red-bg); }
.chat-body { flex:1; overflow-y:auto; padding:.8rem; display:flex; flex-direction:column; gap:.3rem; min-height:0; }
.chat-body::-webkit-scrollbar { width:3px; }
.chat-body::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:3px; }
.chat-empty { display:flex; align-items:center; justify-content:center; height:100%; color:var(--gray); font-size:.85rem; flex-direction:column; gap:.5rem; }
.chat-reply { display:none; padding:.5rem .6rem; border-top:1px solid var(--border); background:var(--bg-card); gap:.4rem; align-items:center; flex-shrink:0; }
.chat-reply.active { display:flex; }
.chat-reply input { flex:1; padding:.55rem .75rem; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); color:var(--white); font-family:inherit; font-size:.82rem; transition:all .25s; -webkit-appearance:none; }
.chat-reply input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.chat-reply input::placeholder { color:var(--gray); }
.btn-send { width:36px; height:36px; min-width:36px; border-radius:50%; background:var(--accent); border:none; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; font-size:.8rem; }
.btn-send:hover { background:var(--accent-dark); transform:scale(1.05); }
.btn-send:disabled { opacity:.4; cursor:not-allowed; transform:none; }

.msg-bubble { max-width:80%; padding:.5rem .75rem; border-radius:12px; position:relative; word-break:break-word; }
.msg-row { display:flex; align-items:flex-end; gap:.4rem; margin-bottom:.15rem; }
.msg-row.received { justify-content:flex-start; }
.msg-row.sent     { justify-content:flex-end; }
.msg-row.received .msg-bubble { background:var(--bg-card); border:1px solid var(--border); border-bottom-left-radius:4px; color:var(--white); }
.msg-row.sent .msg-bubble     { background:rgba(16,185,129,0.15); border:1px solid var(--green-border); border-bottom-right-radius:4px; color:var(--white); }
.msg-bubble-text  { font-size:.82rem; line-height:1.5; }
.msg-bubble-img   { max-width:240px; max-height:240px; border-radius:8px; margin-bottom:.3rem; cursor:pointer; display:block; object-fit:cover; border:1px solid var(--border); }
.msg-bubble-img:hover { opacity:.85; }
.msg-img-expired  { font-size:.72rem; color:var(--gray); font-style:italic; padding:.3rem 0; }
.msg-bubble-footer{ display:flex; align-items:center; gap:.4rem; margin-top:.2rem; justify-content:flex-end; }
.msg-bubble-time  { font-size:.55rem; color:var(--gray); white-space:nowrap; }
.msg-date-divider { text-align:center; padding:.4rem 0; font-size:.58rem; color:var(--gray); font-weight:600; position:relative; }
.msg-date-divider span { background:var(--bg); padding:0 .5rem; position:relative; z-index:1; }
.msg-date-divider::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border); }
.msg-empty   { text-align:center; color:var(--gray); padding:2.5rem 1rem; font-size:.85rem; }
.msg-loading { text-align:center; padding:2rem; color:var(--gray); }
.msg-loading i { animation:spin 1s linear infinite; margin-right:.4rem; }

/* ── FACEBOOK COMMENTS ── */
.comments-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; flex-wrap:wrap; gap:.5rem; }
.comments-header .section-label { margin-bottom:0; }
.comments-filters { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; }
.comments-count { font-size:.72rem; color:var(--gray); margin-bottom:.6rem; }
.comments-list { display:flex; flex-direction:column; gap:.5rem; max-height:700px; overflow-y:auto; padding-right:.3rem; }
.comments-list::-webkit-scrollbar { width:3px; }
.comments-list::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:3px; }
.comment-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem; transition:all .25s; animation:fadeIn .3s ease; }
.comment-card:hover { border-color:var(--border-light); background:var(--bg-card-hover); }
.comment-card-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.comment-card-brand { font-size:.6rem; padding:.15rem .5rem; border-radius:var(--radius-pill); font-weight:700; background:var(--fb-blue-bg); color:var(--fb-blue); border:1px solid var(--fb-blue-border); }
.comment-card-time { font-size:.6rem; color:var(--gray); white-space:nowrap; }
.comment-card-post { font-size:.72rem; color:var(--gray-light); margin-bottom:.5rem; padding:.4rem .6rem; background:rgba(255,255,255,.03); border-radius:8px; border-left:3px solid var(--border-light); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.comment-card-body { display:flex; align-items:flex-start; gap:.5rem; }
.comment-card-avatar { width:30px; height:30px; min-width:30px; border-radius:50%; background:var(--fb-blue-bg); border:1px solid var(--fb-blue-border); display:flex; align-items:center; justify-content:center; font-size:.6rem; color:var(--fb-blue); }
.comment-card-content { flex:1; min-width:0; }
.comment-card-name { font-size:.75rem; font-weight:700; color:var(--white); margin-bottom:.15rem; }
.comment-card-text { font-size:.82rem; color:var(--white-dim); line-height:1.5; word-break:break-word; }
.comment-card-text:empty::after { content:'(reaction/emoji only)'; color:var(--gray); font-style:italic; font-size:.75rem; }

.log-section { margin-bottom:2rem; }
.log-list { display:flex; flex-direction:column; gap:.4rem; }
.log-item { display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); animation:slideIn .3s ease; font-size:.8rem; }
.log-item .log-time   { font-family:var(--font-display); font-weight:700; color:var(--accent); min-width:58px; font-size:.78rem; }
.log-item .log-action { font-weight:600; }
.log-item .log-name   { color:var(--gray-light); }

@media (max-width:768px) {
  .inbox-container { grid-template-columns:1fr; height:auto; }
  .inbox-list { max-height:300px; border-right:none; border-bottom:1px solid var(--border); }
  .chat-panel { height:400px; min-height:400px; }
  .dash-main { padding:.8rem; }
  .status-grid { grid-template-columns:repeat(2,1fr); }
  .clock-grid  { grid-template-columns:repeat(2,1fr); }
  .current-time { font-size:2rem; }
  .team-table thead th, .team-table tbody td { padding:.5rem .4rem; font-size:.72rem; }
  .dash-user-info { display:none; }
  .comms-tab { font-size:.75rem; padding:.55rem .5rem; }
  .comms-tab i { font-size:.8rem; }
}
@media (max-width:480px) {
  .inbox-container { height:auto; }
  .inbox-list { max-height:250px; }
  .chat-panel { height:350px; min-height:350px; }
  .msg-bubble { max-width:90%; }
  .msg-bubble-text { font-size:.78rem; }
  .messages-filters, .comments-filters { gap:.3rem; }
  .filter-btn { padding:.25rem .5rem; font-size:.62rem; }
  .login-card { padding:1.5rem 1.2rem; border-radius:var(--radius); }
  .login-logo h1 { font-size:1.4rem; }
  .dash-header { padding:.6rem .8rem; }
  .dash-brand h2 { font-size:1rem; }
  .dash-avatar { width:30px; height:30px; min-width:30px; font-size:.7rem; }
  .btn-logout { padding:.35rem .5rem; font-size:.7rem; }
  .btn-logout span { display:none; }
  .dash-main { padding:.6rem; }
  .current-time { font-size:1.8rem; }
  .current-date { font-size:.72rem; }
  .current-status { padding:.8rem .6rem; }
  .status-grid { grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .status-card { padding:.8rem .6rem; }
  .status-card .number { font-size:1.5rem; }
  .status-card .label { font-size:.65rem; }
  .clock-grid { grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .clock-btn { padding:.8rem .5rem; font-size:.72rem; }
  .clock-btn i { font-size:1.1rem; }
  .section-label { font-size:.62rem; margin-bottom:.6rem; }
  .team-table { display:none; }
  .team-cards { display:flex; }
  .log-item { padding:.6rem .7rem; gap:.6rem; font-size:.75rem; }
  .log-item .log-time { min-width:52px; font-size:.72rem; }
  .comment-card { padding:.6rem; }
  .comment-card-post { font-size:.68rem; }
  .comments-list { max-height:500px; }
  .comms-tab { font-size:.7rem; padding:.5rem .4rem; gap:.3rem; }
}
@media (max-width:360px) {
  .login-card { padding:1.2rem 1rem; }
  .current-time { font-size:1.5rem; }
  .status-card { padding:.6rem .5rem; }
  .status-card .number { font-size:1.3rem; }
  .status-card .label { font-size:.6rem; }
  .clock-btn { padding:.7rem .4rem; font-size:.68rem; gap:.3rem; }
  .clock-btn i { font-size:1rem; }
}