:root{
  --navy:#0b1f3a;
  --blue:#0f4c81;
  --cyan:#0ea5e9;
  --green:#10b981;
  --red:#dc2626;
  --bg:#eef4f8;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#dbe4ee;
  --shadow:0 12px 35px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.splash{position:fixed;inset:0;z-index:9999;display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#fff,#eef6ff)}
.splash img{width:130px;margin:0 auto 15px}.splash h1{margin:0;color:var(--blue)}.splash p{color:var(--muted)}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#dbeafe,transparent 35%),linear-gradient(135deg,#f8fafc,#edf4f8)}
.login-card{width:min(460px,100%);padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.login-logo{width:110px;margin-bottom:18px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:1.5px;color:var(--blue)}
.login-card h1{margin:8px 0}.login-card p{color:var(--muted);line-height:1.5}
.login-card label{display:block;margin:13px 0 6px;font-size:12px;font-weight:800}
.login-card input,.login-card select{width:100%;height:48px;border:1px solid var(--line);border-radius:13px;padding:0 13px;background:#f8fafc}
.primary,.secondary{border:0;border-radius:13px;padding:12px 16px;font-weight:900}
.primary{background:var(--navy);color:#fff}.secondary{background:#fff;border:1px solid var(--line);color:var(--navy)}
.wide{width:100%;margin-top:12px}.login-card small{display:block;margin-top:14px;color:var(--muted)}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;padding:16px;background:var(--navy);color:#fff;display:flex;flex-direction:column;z-index:20}
.brand{display:flex;gap:10px;align-items:center;padding:8px}.brand img{width:45px;background:#fff;border-radius:10px;padding:4px}.brand b{display:block}.brand span{font-size:10px;color:#b9c7d9}
.main-nav{display:flex;flex-direction:column;gap:6px;margin-top:24px}.main-nav button{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:0;border-radius:12px;background:transparent;color:#dce7f3;text-align:left}.main-nav button.active,.main-nav button:hover{background:rgba(255,255,255,.12);color:#fff}.main-nav button i{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;padding:3px 7px;font-size:9px;font-style:normal}
.user-mini{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px;border-radius:14px;background:rgba(255,255,255,.08)}.avatar{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--green));color:#fff;font-weight:900}.user-mini div:nth-child(2){min-width:0}.user-mini b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-mini span{font-size:10px;color:#cbd5e1}.user-mini>button{margin-left:auto;border:0;background:transparent;color:#fff;font-size:20px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.dot.online{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.workspace{min-width:0}.page{display:none}.page.active{display:block}
.chat-layout{display:grid;grid-template-columns:310px minmax(0,1fr) 280px;min-height:100vh}
.conversation-list,.details-panel{padding:18px;background:#fff;border-right:1px solid var(--line);overflow:auto}
.details-panel{border-right:0;border-left:1px solid var(--line)}
.panel-head{display:flex;justify-content:space-between;align-items:center}.panel-head span{font-size:9px;letter-spacing:1.2px;font-weight:900;color:var(--blue)}.panel-head h2,.panel-head h3{margin:3px 0}.icon-btn{width:38px;height:38px;border:0;border-radius:12px;background:#e8f2ff;color:var(--blue);font-size:20px}
.search{width:100%;height:42px;margin:14px 0;border:1px solid var(--line);border-radius:12px;padding:0 12px}
.section-label{margin:14px 0 7px;font-size:9px;font-weight:900;letter-spacing:1px;color:var(--muted)}
.conversation{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;cursor:pointer}.conversation:hover,.conversation.active{background:#eef6ff}.conversation .copy{min-width:0;flex:1}.conversation b,.conversation span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation span{font-size:10px;color:var(--muted)}.conversation time{font-size:9px;color:var(--muted)}
.chat-panel{display:grid;grid-template-rows:auto 1fr auto;min-width:0;background:linear-gradient(#f7fafc,#eef4f8)}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}.chat-head h3{margin:0}.chat-head span{font-size:10px;color:var(--muted)}.chat-actions{margin-left:auto;display:flex;gap:7px}.chat-actions button{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#fff}
.messages{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:14px}.message{display:flex;gap:9px;max-width:760px}.message.me{align-self:flex-end;flex-direction:row-reverse}.bubble{padding:11px 13px;border-radius:15px;background:#fff;border:1px solid var(--line);box-shadow:0 5px 14px rgba(15,23,42,.04)}.message.me .bubble{background:#dff2ff;border-color:#b8e2fb}.bubble b{font-size:11px}.bubble p{margin:5px 0;font-size:13px;line-height:1.45}.bubble time{font-size:9px;color:var(--muted)}
.composer{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:end;padding:12px 16px;background:#fff;border-top:1px solid var(--line)}.composer-tools{display:flex}.composer-tools button,.send-btn{width:38px;height:38px;border:0;border-radius:11px;background:#eef4f8}.send-btn{background:var(--blue);color:#fff}.composer textarea{min-height:44px;max-height:120px;resize:vertical;border:1px solid var(--line);border-radius:13px;padding:11px}
.detail-card{padding:14px;margin:12px 0;border:1px solid var(--line);border-radius:14px;background:#f8fafc}.detail-card p{color:var(--muted);font-size:12px;line-height:1.5}
.generic-page{padding:24px}.page-title span{font-size:10px;font-weight:900;letter-spacing:1.2px;color:var(--blue)}.page-title h1{margin:5px 0}.page-title p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.card{padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.05)}.card span{font-size:10px;color:var(--muted)}.card b{display:block;margin-top:6px;font-size:24px}
.list-card{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff}.row{display:grid;grid-template-columns:1.5fr 1fr 1fr auto;gap:10px;padding:12px;border-bottom:1px solid #eef2f7;align-items:center}.status{padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;background:#dcfce7;color:#047857}.status.pending{background:#fef3c7;color:#92400e}
.mobile-header,.mobile-bottom-nav{display:none}
.drawer{position:fixed;top:0;right:-390px;width:min(380px,92vw);height:100vh;padding:18px;background:#fff;box-shadow:-20px 0 50px rgba(15,23,42,.18);z-index:100;transition:.25s}.drawer.open{right:0}.drawer-head{display:flex;justify-content:space-between}.drawer-head button{border:0;background:transparent}.notice{padding:13px;border-bottom:1px solid var(--line)}.notice b,.notice span{display:block}.notice span{font-size:11px;color:var(--muted);margin-top:4px}.notice.unread{background:#eef6ff}
.user-menu{position:fixed;left:170px;bottom:85px;display:none;min-width:160px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow);z-index:100}.user-menu.open{display:grid}.user-menu button{padding:10px;border:0;background:#fff;text-align:left}.user-menu button.danger{color:var(--red)}

@media(max-width:1150px){
  .chat-layout{grid-template-columns:290px minmax(0,1fr)}.details-panel{display:none}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .app{display:block;padding-bottom:72px}.sidebar{position:fixed;left:-280px;width:260px;transition:.25s}.sidebar.open{left:0}
  .mobile-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:10px 12px;background:var(--navy);color:#fff}.mobile-header button{position:relative;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.1);color:#fff}.mobile-header i{position:absolute;top:-4px;right:-4px;background:var(--red);border-radius:999px;padding:2px 5px;font-size:8px;font-style:normal}
  .chat-layout{display:block;min-height:calc(100vh - 128px)}.conversation-list{display:none}.chat-panel{min-height:calc(100vh - 128px)}.chat-head{padding:10px}.chat-actions button:nth-child(2),.chat-actions button:nth-child(3){display:none}.messages{padding:12px}.composer{grid-template-columns:1fr auto}.composer-tools{grid-column:1 / -1}.composer textarea{width:100%}
  .mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);padding:7px;background:#fff;border-top:1px solid var(--line)}.mobile-bottom-nav button{display:grid;gap:2px;place-items:center;border:0;background:#fff;color:var(--muted);font-size:18px}.mobile-bottom-nav button span{font-size:8px}.mobile-bottom-nav button.active{color:var(--blue)}
  .generic-page{padding:14px}.cards{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr;gap:4px}.row>*{min-width:0}.user-menu{left:12px;bottom:82px}
}
@media(max-width:420px){.cards{grid-template-columns:1fr}.message{max-width:95%}}