:root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --text:#172133;
    --muted:#72809a;
    --border:#e6ebf2;
    --primary:#2f6fec;
    --sidebar:#ffffff;
}
html,body{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;background:var(--bg);color:var(--text);}
.min-vh{min-height:100vh}
.guest-shell{background:linear-gradient(180deg,#f8fbff 0,#eef4ff 100%)}
.guest-brand{text-align:center;margin-bottom:1.5rem}
.guest-logo,.brand-pill{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2f6fec,#5d94ff);color:#fff;padding:.75rem 1rem;border-radius:18px;font-weight:700;box-shadow:0 12px 30px rgba(47,111,236,.18)}
.soft-box{border:1px solid var(--border);border-radius:22px;box-shadow:0 14px 36px rgba(13,39,80,.06)}
.app-layout{display:flex;min-height:100vh}
.app-sidebar{width:280px;background:var(--sidebar);border-inline-end:1px solid var(--border);padding:1.25rem;position:sticky;top:0;height:100vh}
.sidebar-brand{padding:1rem 0 1.25rem}
.sidebar-brand small{display:block;margin-top:.6rem;color:var(--muted)}
.app-main{flex:1;min-width:0}
.app-navbar{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);background:rgba(255,255,255,.72);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.navbar-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.menu-list a{padding:.85rem 1rem;border-radius:14px;color:var(--text)}
.menu-list a.is-active,.menu-list a:hover{background:#eef4ff;color:var(--primary);font-weight:600}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;min-height:120px;justify-content:center;box-shadow:0 14px 36px rgba(13,39,80,.05)}
.kpi-card span{color:var(--muted);font-size:.95rem}
.kpi-card strong{font-size:2rem;line-height:1}
.ticket-thread{display:flex;flex-direction:column;gap:1rem}
.thread-item{background:#f8fbff;border:1px solid #e8eef9;border-radius:18px;padding:1rem}
.thread-item.internal-note{background:#fff8e8;border-color:#f5e0a6}
.thread-head{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--muted);margin-bottom:.6rem}
.attachment-line{padding:.55rem 0;border-bottom:1px dashed var(--border)}
.flex-wrap{flex-wrap:wrap}
.gap-sm{gap:.75rem}
@media (max-width: 1023px){
  .app-layout{display:block}
  .app-sidebar{width:100%;height:auto;position:relative;border-inline-end:0;border-bottom:1px solid var(--border)}
  .app-navbar{position:relative}
}