:root{--font-primary:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-size-xl:24px;--font-size-lg:16px;--font-size-md:14px;--font-size-sm:12px;--primary-50:#eef1ff;--primary-100:#d9dfff;--primary-200:#c0c8ff;--primary-400:#7b8cff;--primary-500:#5162ff;--primary-600:#3d4bd6;--gray-50:#f7f8ff;--gray-100:#eef0fb;--gray-200:#dfe3f8;--gray-300:#c8ceef;--gray-400:#a7b0d6;--gray-500:#7c85b3;--gray-600:#596190;--gray-700:#3c426c;--gray-800:#262a4b;--success-500:#32c98d;--warning-500:#ffb74a;--danger-500:#ff6b6b;--info-500:#4d9bff;--surface-blank:#fff;--surface-muted:#ffffffdb;--surface-glass:#ffffffb8;--text-primary:var(--gray-800);--text-secondary:var(--gray-600);--text-tertiary:var(--gray-500);--border-subtle:#6173c624;--border-strong:#4d67db38;--shadow-sm:0 6px 14px #5d6ec614;--shadow-md:0 12px 24px #5d6ec61f;--radius-lg:16px;--radius-md:12px;--radius-sm:8px;--action-gap:12px;--sidebar-width:64px;--header-height:52px;--bg-gradient-start:#f3f4ff;--bg-gradient-mid:#dfe4ff;--bg-gradient-end:#cad4fe}*{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(160% 120% at 20% 10%,#ffffffe6 0%,#eaeeffcc 30%,#d2dcffe6 55%,#c6cdf8f2 100%),linear-gradient(180deg,var(--bg-gradient-start)0%,var(--bg-gradient-mid)55%,var(--bg-gradient-end)100%);max-width:100vw;color:var(--text-primary);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}.action-group{align-items:center;display:inline-flex}.action-group>*+*{margin-left:var(--action-gap)}.app-shell{width:100%;min-height:100vh;display:flex}.card{background:var(--surface-blank);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:12px}.grid-2col{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.grid-3col{grid-template-columns:320px 1fr 320px;gap:10px;display:grid}.btn-primary{background:var(--primary-500);color:#fff;letter-spacing:.01em;cursor:pointer;border:none;border-radius:999px;padding:8px 16px;font-weight:600;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 18px #5162ff26}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px #5162ff2e}.btn-primary.subtle{color:var(--primary-500);box-shadow:none;background:#5162ff24}.btn-pill{background:var(--primary-100);color:var(--primary-500);letter-spacing:.03em;cursor:pointer;border:none;border-radius:999px;padding:8px 16px;font-weight:600;transition:transform .2s,box-shadow .2s}.btn-pill:hover{transform:translateY(-1px);box-shadow:0 10px 20px #5162ff26}.pill{text-transform:uppercase;letter-spacing:.08em;background:var(--gray-200);color:var(--gray-700);border-radius:999px;justify-content:center;align-items:center;padding:4px 10px;font-size:10px;font-weight:700;display:inline-flex}.pill.success{color:var(--success-500);background:#32c98d29}.pill.warn{color:var(--warning-500);background:#ffb74a2e}.pill.danger{color:var(--danger-500);background:#ff6b6b2e}.pill.info{color:var(--info-500);background:#4d9bff2e}.msg{background:#ffffffe6;border:1px solid #7a93ff29;border-radius:16px;flex-direction:column;gap:10px;max-width:540px;padding:16px 18px;display:flex;box-shadow:0 8px 18px #7688d01a}.msg.admin{background:linear-gradient(135deg,var(--primary-500),var(--primary-400));color:#fff;border:none;margin-left:auto;box-shadow:0 12px 26px #5162ff2e}.msg-header{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:12px;display:flex}.msg.admin .msg-header{color:#ffffffd9}.msg .role{text-transform:uppercase;letter-spacing:.08em;color:inherit;opacity:.7;font-size:11px}.msg .time{color:var(--text-tertiary);font-size:11px}.msg.admin .time{color:#ffffffc7}.attachment-chip{color:var(--primary-500);background:#5162ff1f;border:1px dashed #5162ff66;border-radius:12px;align-self:flex-start;padding:8px 12px;font-size:12px;font-weight:600}.msg.admin .attachment-chip{color:#fff;background:#ffffff29;border-color:#fff9}.customer-card{flex-direction:column;gap:18px;display:flex}.customer-avatar{background:linear-gradient(135deg,var(--primary-500),var(--primary-300));color:#fff;border-radius:20px;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:10px;font-size:18px;font-weight:700;display:flex}.stat-tiles{gap:12px;display:grid}.stat-tile{color:var(--text-secondary);background:#ffffffe6;border:1px solid #7a93ff29;border-radius:14px;justify-content:space-between;align-items:center;padding:14px 16px;font-size:13px;display:flex}.stat-value{color:var(--text-primary);font-weight:700}.tag-list{flex-wrap:wrap;gap:8px;display:flex}.kpi-row{border-bottom:1px solid #7a93ff1a;justify-content:space-between;align-items:center;padding:14px 0;display:flex}.kpi-row:last-child{border-bottom:none}.kpi-chip{text-transform:uppercase;letter-spacing:.08em;background:var(--primary-100);color:var(--primary-500);border-radius:999px;justify-content:center;align-items:center;padding:6px 12px;font-size:11px;font-weight:700;display:inline-flex}.nav-menu{flex-direction:column;align-items:center;gap:12px;display:flex}.nav-item{cursor:pointer;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:56px;height:56px;transition:transform .2s,box-shadow .2s,background .2s;display:flex}.nav-item:hover{background:var(--primary-100);transform:translateY(-3px)}.nav-item.active{background:var(--primary-100);box-shadow:0 10px 20px #5162ff26}.nav-item svg{stroke:currentColor;stroke-width:1.75px;fill:none;width:22px;height:22px;transition:stroke .2s}.nav-item.active svg{stroke:var(--primary-500)}.nav-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);font-size:10px;font-weight:600}.nav-item.active .nav-label{color:var(--primary-500)}.icon-glyph{stroke:currentColor;width:22px;height:22px}.topbar-buttons{align-items:center;gap:12px;display:flex}.title-block h2,.title-block h1{color:var(--text-primary);font-size:24px;font-weight:700}.title-block p{color:var(--text-secondary);font-size:14px}.label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);font-size:11px}.body-text{color:var(--text-secondary);font-size:14px;line-height:1.6}.heading-lg{color:var(--text-primary);font-size:20px;font-weight:700}.heading-md{color:var(--text-primary);font-size:18px;font-weight:600}.heading-sm{color:var(--text-primary);font-size:16px;font-weight:600}.input-base{background:#fffffff5;border:1px solid #7a93ff47;border-radius:14px;width:100%;padding:14px;font-size:14px}.input-base:focus{border-color:var(--primary-400);outline:none;box-shadow:0 0 0 3px #5162ff2e}.notification-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:300;background:#0f122059;position:fixed;inset:0}.notification-drawer{z-index:310;opacity:0;pointer-events:none;background:#fff;border:1px solid #ced3ffa6;border-radius:0;flex-direction:column;gap:12px;width:min(420px,100vw);height:100vh;padding:16px;transition:transform .25s,opacity .2s;display:flex;position:fixed;top:0;right:0;transform:translate(110%);box-shadow:0 18px 40px #6371c333}.notification-drawer.open{opacity:1;pointer-events:auto;transform:translate(0)}.notification-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.notification-actions{align-items:center;display:inline-flex}.notification-header h3{color:var(--text-primary);margin:0;font-size:16px}.notification-header p{color:var(--text-tertiary);margin:4px 0 0;font-size:12px}.mark-read-button{color:#3d5bff;cursor:pointer;background:#5162ff14;border:1px solid #5162ff4d;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-flex}.mark-read-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.notification-list{flex-direction:column;flex:1;gap:10px;padding-right:4px;display:flex;overflow-y:auto}.notification-item{text-align:left;cursor:pointer;background:#f8f9ffe6;border:1px solid #7a93ff2e;border-radius:14px;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;padding:12px;transition:all .2s;display:grid}.notification-item.unread{background:#edf0fff2;border-color:#5162ff66}.notification-item:hover{background:#5162ff0f;border-color:#5162ff80}.notification-icon{color:var(--primary-500)}.notification-content{min-width:0}.notification-title{color:var(--text-primary);margin-bottom:4px;font-size:13px;font-weight:600}.notification-body{color:var(--text-secondary);font-size:12px;line-height:1.4}.notification-time{color:var(--text-tertiary);white-space:nowrap;font-size:11px}.notification-empty{text-align:center;color:var(--text-tertiary);padding:18px 0;font-size:13px}.notification-close{color:#4c5eff;cursor:pointer;background:#5162ff14;border:1px solid #5162ff33;border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;display:inline-flex}@media (max-width:767px){.notification-drawer{border-radius:0;width:100vw}body{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}}