:root{
    --turq:#00D1D2;--turq-700:#0AA8AA;--teal-900:#0E3A3A;--slate-900:#1C2B2E;--slate-700:#2F373E;
    --muted:#6B7E82;--line:#E3ECEC;--bg:#F4F8F8;--panel:#FFFFFF;--soft:#E9F8F8;
    --amber:#E8A23D;--rose:#E0556B;--green:#1FAE8A;
    --shadow:0 20px 50px rgba(14,58,58,.08);--radius:20px;--r-sm:13px;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:'Inter','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--slate-900);-webkit-font-smoothing:antialiased}
  button,input,select,textarea{font:inherit}
  button{cursor:pointer}
  .hidden{display:none!important}
  h1,h2,h3{letter-spacing:-.02em}
  .app{display:flex;min-height:100vh}

  .sidebar{width:264px;background:var(--slate-900);color:#fff;padding:26px 20px;position:fixed;inset:0 auto 0 0;overflow:auto}
  .brand{display:flex;gap:13px;align-items:center;margin-bottom:30px}
  .logo{width:44px;height:44px;border-radius:13px;background:var(--turq);display:grid;place-items:center;font-weight:900;color:var(--slate-900);font-size:20px}
  .brand b{font-size:17px}
  .brand small{color:#7E9698;font-size:12px}
  .nav button{width:100%;border:0;background:transparent;color:#A7BDBE;display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;font-size:14.5px;text-align:left;margin-bottom:4px;transition:.15s}
  .nav button:hover{background:rgba(0,209,210,.08);color:#fff}
  .nav button.active{background:var(--turq);color:var(--slate-900);font-weight:700}
  .nav .ico{width:20px;text-align:center;opacity:.9}
  .badge{margin-left:auto;background:var(--rose);color:#fff;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700}
  .nav button.active .badge{background:var(--slate-900);color:#fff}
  .nav-group{margin-top:22px;padding-left:13px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#5E7577;margin-bottom:8px}

  .main{margin-left:264px;width:calc(100% - 264px);padding:24px 28px}
  .topbar{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:22px}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  input,select,textarea{border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px 13px;color:var(--slate-900);outline:none;transition:.15s}
  input:focus,select:focus,textarea:focus{border-color:var(--turq);box-shadow:0 0 0 3px var(--soft)}
  textarea{resize:vertical}
  .search{min-width:340px}
  .company-switch{font-weight:600;color:var(--teal-900);background:var(--soft);border-color:transparent}
  .user{display:flex;align-items:center;gap:11px}
  .avatar{width:42px;height:42px;border-radius:50%;background:var(--turq);color:var(--slate-900);display:grid;place-items:center;font-weight:800}
  .user b{font-size:14px}.user .muted{font-size:12px}

  .section{display:none}
  .section.active{display:block;animation:fade .25s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .page-head{margin-bottom:18px}
  .page-head h1{margin:0;font-size:24px}
  .page-head p{margin:4px 0 0;color:var(--muted);font-size:14px}

  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
  .card h3{margin:0 0 14px;font-size:16px}

  .btn{border:0;background:var(--turq);color:var(--slate-900);border-radius:11px;padding:11px 15px;font-weight:700;transition:.15s}
  .btn:hover{background:var(--turq-700);color:#fff}
  .btn.secondary{background:#EEF4F4;color:var(--slate-700)}
  .btn.secondary:hover{background:#E0ECEC;color:var(--slate-900)}
  .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--slate-700)}
  .btn.ghost:hover{border-color:var(--turq);background:var(--soft)}
  .btn.dark{background:var(--slate-900);color:#fff}.btn.dark:hover{background:var(--teal-900)}
  .btn.danger{background:#FCEAEE;color:#B33049}.btn.danger:hover{background:var(--rose);color:#fff}
  .btn.small{padding:7px 11px;font-size:12.5px;border-radius:9px}
  .btn.full{width:100%;justify-content:center}
  .icon-btn{border:1px solid var(--line);background:#fff;border-radius:9px;width:34px;height:34px;display:grid;place-items:center;color:var(--muted);transition:.13s;padding:0}
  .icon-btn:hover{border-color:var(--turq);color:var(--teal-900);background:var(--soft)}
  .icon-btn.danger:hover{border-color:var(--rose);color:var(--rose);background:#FCEAEE}

  .pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700;background:#EEF4F4;color:var(--slate-700)}
  .pill.turq{background:var(--soft);color:var(--teal-900)}
  .pill.green{background:#E2F6EF;color:#0F7757}
  .pill.amber{background:#FBF0DC;color:#9A6713}
  .pill.rose{background:#FCEAEE;color:#B33049}
  .pill .x{cursor:pointer;opacity:.5;font-weight:900}.pill .x:hover{opacity:1}
  .muted{color:var(--muted)}
  .empty{color:var(--muted);text-align:center;padding:26px;border:1px dashed var(--line);border-radius:14px;font-size:14px}

  .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .stat{position:relative;overflow:hidden}
  .stat .metric{font-size:34px;font-weight:900;margin:10px 0 2px;letter-spacing:-.03em}
  .stat .label{color:var(--muted);font-size:13px}
  .stat::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:var(--soft);opacity:.6}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  .chart{height:210px;display:flex;align-items:flex-end;gap:10px;padding-top:18px}
  .bar{flex:1;min-height:14px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--turq),#0AA8AA);position:relative;transition:.2s}
  .bar:hover{filter:brightness(1.08)}
  .bar span{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--teal-900)}
  .bar small{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted)}

  .helpdesk-layout{display:grid;grid-template-columns:228px 360px minmax(0,1fr);gap:14px;height:calc(100vh - 210px);min-height:620px}
  .folders,.tickets,.chat-panel{min-height:0;display:flex;flex-direction:column;padding:16px}
  .folders h3,.tickets .head h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  .folder{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid transparent;background:transparent;border-radius:11px;padding:11px 12px;margin-bottom:4px;text-align:left;color:var(--slate-700);transition:.13s;font-size:14px}
  .folder:hover{background:var(--bg)}
  .folder.active{background:var(--soft);color:var(--teal-900);font-weight:700}
  .folder .count{background:#E7EEEE;border-radius:999px;padding:2px 9px;font-size:12px;color:var(--slate-700);font-weight:700}
  .folder.active .count{background:var(--turq);color:var(--slate-900)}
  .folder-actions{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}
  .folder-actions .muted{font-size:12px;margin:10px 0 0}
  .folder-del{margin-left:6px;opacity:0;color:var(--muted);font-weight:900}
  .folder:hover .folder-del{opacity:.55}
  .folder-del:hover{opacity:1;color:var(--rose)}

  .tickets .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .ticket-list{overflow:auto;display:flex;flex-direction:column;gap:9px;padding-right:4px}
  .ticket{border:1px solid var(--line);border-radius:15px;padding:14px;background:#fff;transition:.13s;cursor:pointer}
  .ticket:hover{border-color:var(--turq);transform:translateY(-1px)}
  .ticket.active{background:var(--soft);border-color:var(--turq)}
  .ticket-title{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:14.5px}
  .ticket-title .tt{color:var(--teal-900)}
  .ticket-preview{margin:7px 0;color:#54686B;font-size:13.5px;line-height:1.4}
  .ticket-tags{display:flex;gap:5px;flex-wrap:wrap}
  .ticket-meta{display:flex;justify-content:space-between;margin-top:9px;font-size:12px;color:var(--muted)}

  .chat-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
  .chat-head h3{margin:0;font-size:17px}
  .chat-head .sub{color:var(--muted);font-size:12.5px;margin:3px 0 9px}
  .prechat-box{background:var(--soft);border:1px solid #BDEEEE;border-radius:13px;padding:11px 13px;margin-bottom:12px;font-size:13px}
  .prechat-box b{color:var(--teal-900)}
  .prechat-box .pc-row{display:flex;gap:6px;margin-top:4px}
  .prechat-box .pc-row span:first-child{color:var(--muted);min-width:120px}
  .messages{flex:1;overflow:auto;display:flex;flex-direction:column;gap:13px;padding-right:6px}
  .msg-wrap{display:flex;flex-direction:column;max-width:76%;gap:5px}
  .msg-wrap.client{align-self:flex-start}
  .msg-wrap.operator{align-self:flex-end;align-items:flex-end}
  .msg-wrap.internal{align-self:center;max-width:88%}
  .msg{padding:12px 15px;border-radius:16px;line-height:1.5;background:#F1F6F6;font-size:14px}
  .client .msg{border-bottom-left-radius:5px}
  .operator .msg{background:var(--turq);color:var(--slate-900);border-bottom-right-radius:5px}
  .internal .msg{background:#FBF0DC;border:1px dashed var(--amber);color:#7A5410}
  .msg.deleted{font-style:italic;color:var(--muted);background:#F6FAFA;border:1px dashed var(--line)}
  .msg small{display:block;margin-top:7px;opacity:.7;font-size:11.5px}
  .msg-actions{display:flex;gap:6px}
  .media{margin-top:9px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.55);border:1px solid rgba(14,58,58,.1);border-radius:11px;padding:9px}
  .operator .media{background:rgba(255,255,255,.4)}
  .media-thumb{width:48px;height:38px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-size:18px;flex-shrink:0}
  .media b{font-size:13px}.media .muted{font-size:11.5px}

  .composer{border-top:1px solid var(--line);padding-top:14px;margin-top:12px}
  .composer textarea{width:100%;min-height:84px}
  .composer-tabs{display:flex;gap:7px;margin-bottom:9px;flex-wrap:wrap}
  .composer-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font-size:13px;color:var(--slate-700)}
  .composer-tabs button:hover{border-color:var(--turq)}
  .composer-tabs button.active{background:var(--slate-900);color:#fff;border-color:var(--slate-900)}
  .editbox{background:#FBF0DC;border:1px solid var(--amber);border-radius:12px;padding:10px 12px;margin-bottom:9px;display:none;font-size:13px;color:#7A5410;align-items:center;justify-content:space-between}

  .table{width:100%;border-collapse:collapse}
  .table th,.table td{padding:13px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
  .table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:#F8FBFB}
  .table tr:last-child td{border-bottom:0}
  .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .form-grid label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:13.5px}
  .full{grid-column:1/-1}
  .code{background:var(--slate-900);color:var(--turq);border-radius:13px;padding:16px;overflow:auto;font-family:Consolas,Monaco,monospace;font-size:13px;line-height:1.6}
  .api-row{display:grid;grid-template-columns:90px 280px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:center}
  .api-row:last-child{border-bottom:0}
  .method{font-weight:800;font-size:12px;padding:4px 9px;border-radius:7px;text-align:center}
  .method.get{background:#E2F6EF;color:#0F7757}.method.post{background:var(--soft);color:var(--teal-900)}
  .api-row code{font-family:Consolas,monospace;font-size:13px;color:var(--slate-900)}

  .pc-field{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;background:#fff;transition:.13s}
  .pc-field:hover{border-color:#BDEEEE}
  .pc-field .pc-head{display:flex;align-items:center;gap:10px}
  .pc-field .drag{color:var(--muted);cursor:grab;font-size:18px;user-select:none}
  .pc-field .pc-grid{display:grid;grid-template-columns:1.4fr 1fr auto;gap:10px;flex:1;align-items:center}
  .pc-field .pc-opts{margin-top:10px;padding-left:28px}
  .pc-req{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--slate-700);white-space:nowrap}
  .pc-req input{width:18px;height:18px;accent-color:var(--turq)}
  .typebadge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;background:var(--soft);color:var(--teal-900)}

  .widget-demo{position:relative;min-height:560px;background:linear-gradient(135deg,#E9F8F8,#F4F8F8);border-radius:var(--radius);padding:24px;overflow:hidden;border:1px solid var(--line)}
  .widget-window{position:absolute;right:26px;bottom:104px;width:368px;background:#fff;border-radius:20px;box-shadow:0 26px 64px rgba(14,58,58,.22);overflow:hidden;display:flex;flex-direction:column;max-height:460px}
  .widget-window header{background:var(--slate-900);color:#fff;padding:16px 18px;flex-shrink:0}
  .widget-window header b{font-size:15px}
  .widget-window header .status{font-size:12px;color:var(--turq);display:flex;align-items:center;gap:6px;margin-top:3px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--turq);box-shadow:0 0 0 3px rgba(0,209,210,.25)}
  .widget-body{padding:16px;display:flex;flex-direction:column;gap:11px;background:#F8FBFB;overflow:auto}
  .wf-label{font-size:13px;font-weight:700;color:var(--slate-700);display:flex;gap:5px;margin-bottom:5px}
  .wf-label .req{color:var(--rose)}
  .widget-body input,.widget-body select{width:100%;font-size:14px}
  .wf-err{color:var(--rose);font-size:12px}
  .wf-progress{display:flex;gap:5px;margin-bottom:4px}
  .wf-progress i{flex:1;height:4px;border-radius:3px;background:#DDEAEA}
  .wf-progress i.done{background:var(--turq)}
  .mini-msg{background:#F1F6F6;border-radius:14px;padding:11px 13px;font-size:13.5px;max-width:82%}
  .mini-msg.me{background:var(--turq);color:var(--slate-900);align-self:flex-end}
  .offnote{background:#FBF0DC;border:1px solid var(--amber);color:#7A5410;border-radius:12px;padding:12px;font-size:13px;line-height:1.45}
  .widget-bubble{position:absolute;right:26px;bottom:26px;width:64px;height:64px;border-radius:50%;background:var(--turq);color:var(--slate-900);display:grid;place-items:center;font-size:28px;box-shadow:0 16px 34px rgba(0,209,210,.45)}
  .demo-toggle{position:absolute;left:24px;top:24px;display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 12px;font-size:13px}

  .toast{position:fixed;right:26px;bottom:26px;background:var(--slate-900);color:#fff;border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);z-index:50;font-size:14px;border-left:4px solid var(--turq);max-width:340px}
  .modal-backdrop{position:fixed;inset:0;background:rgba(14,58,58,.4);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:40}
  .modal{width:min(640px,92vw);background:#fff;border-radius:22px;padding:24px;box-shadow:0 34px 90px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
  .modal h3{margin-top:0}
  .modal .opt{width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:13px 15px;margin-bottom:9px;color:var(--slate-700);transition:.13s}
  .modal .opt:hover{border-color:var(--turq);background:var(--soft)}
  .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .modal label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:13px;margin-bottom:10px}

  @media(max-width:1200px){.helpdesk-layout{grid-template-columns:190px 300px 1fr}.cards{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:980px){.sidebar{position:static;width:100%;height:auto}.app{display:block}.main{margin-left:0;width:100%}.nav{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.nav-group{grid-column:1/-1}.helpdesk-layout{height:auto;grid-template-columns:1fr}.folders,.tickets,.chat-panel{min-height:auto}.api-row{grid-template-columns:1fr}.form-grid,.grid2,.modal-grid{grid-template-columns:1fr}.pc-field .pc-grid{grid-template-columns:1fr}}
  @media(max-width:600px){.main{padding:16px}.topbar{align-items:stretch;flex-direction:column}.search{min-width:0;width:100%}.cards{grid-template-columns:1fr}.msg-wrap{max-width:92%}.widget-window{width:calc(100% - 36px);right:18px}}

/* ===== additions for integrated dashboard (login, toast, modal, misc) ===== */
.login-body{display:block;background:linear-gradient(135deg,#0E3A3A,#00D1D2)}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:#fff;border-radius:22px;padding:36px 32px;width:min(380px,92vw);box-shadow:0 30px 80px rgba(14,58,58,.35);text-align:center}
.login-card h1{margin:14px 0 2px;font-size:24px}
.login-card p{margin:0 0 6px}
.login-card .logo.big{width:60px;height:60px;border-radius:16px;font-size:30px;margin:0 auto}
.field{text-align:left;margin:14px 0}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--slate-700)}
.field input,.field textarea{width:100%}
.error{color:var(--rose);font-size:13px;margin-top:10px;min-height:16px}
.link{background:none;border:0;color:var(--turq-700);font-size:13px;margin-top:12px;text-decoration:underline;cursor:pointer}
.close-x{position:absolute;right:16px;top:12px;border:0;background:none;font-size:26px;color:var(--muted);cursor:pointer;line-height:1;padding:0;width:auto;height:auto}
.close-x:hover{color:var(--slate-900)}
.list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:0}
.btn.green{background:var(--green);color:#fff}
.btn.green:hover{filter:brightness(1.08)}
.toast.hidden{display:none}
.toast.warn{border-left-color:var(--amber)}
.menu-toggle{display:none}
.sidebar-foot{margin-top:20px}
.section .page-head:first-child{margin-top:0}
@media(max-width:980px){.menu-toggle{display:grid}}