.integration-page{overflow:auto;color:#f2f0f8;background:#090a11;background-image:radial-gradient(circle at 78% 0,rgba(111,77,229,.15),transparent 31%),radial-gradient(circle at 13% 90%,rgba(28,200,142,.07),transparent 27%)}
.integration-shell{min-height:100vh;display:grid;grid-template-columns:76px minmax(0,1fr)}.integration-page .rail{position:sticky;top:0;height:100vh;box-sizing:border-box}.integration-page .brand-mark{text-decoration:none}.integration-main{min-width:0;padding:34px clamp(22px,3vw,52px) 52px}.integration-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:25px}.integration-header h1{margin:5px 0 4px;font-size:31px;letter-spacing:-.045em}.integration-header>div>p:last-child{margin:0;color:#85899c;font-size:12px}.integration-header-actions{display:flex;align-items:center;gap:10px}.integration-header-actions>span{color:#7f8395;font-size:10px}.integration-header-actions button{padding:10px 13px;border:1px solid #393451;border-radius:10px;color:#c9bfff;background:#211e34;font-size:11px;font-weight:800}.integration-header-actions button:hover{border-color:#65599d;background:#292343}.integration-header-actions button:disabled{opacity:.5}.integration-header-actions #profile{padding:10px 13px;border:1px solid #2f3240;border-radius:11px;color:#d9d6e2;background:#171923;font-size:10px;font-weight:800}
.integration-metrics{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:14px;margin-bottom:15px}.integration-metric{position:relative;min-height:128px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:19px;border:1px solid #292c39;border-radius:16px;background:linear-gradient(145deg,#191b26,#13151e);box-shadow:0 12px 32px rgba(0,0,0,.2)}.integration-metric:after{content:"";position:absolute;right:-28px;bottom:-43px;width:125px;height:125px;border-radius:50%;background:radial-gradient(circle,rgba(129,104,250,.14),transparent 67%)}.integration-metric:hover{transform:translateY(-2px);border-color:#40395c}.integration-metric header{display:flex;align-items:center;justify-content:space-between}.integration-metric header span{color:#979bad;font-size:9px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.integration-metric header i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#c8beff;background:rgba(131,109,255,.14);font-style:normal}.integration-metric strong{font-size:29px}.integration-metric small{color:#7f8395;font-size:9px}.integration-metric.green header i{color:#67e5ba;background:rgba(36,214,155,.11)}.integration-metric.amber header i{color:#f1bd70;background:rgba(240,179,91,.12)}.integration-metric.danger header i{color:#ff8e9b;background:rgba(255,104,120,.12)}
.integration-insights{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:15px;margin-bottom:15px}.integration-card{min-width:0;border:1px solid #292c39;border-radius:17px;background:linear-gradient(145deg,#171923,#13151e);box-shadow:0 12px 32px rgba(0,0,0,.18)}.card-heading,.records-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #292c39}.card-heading h2,.records-heading h2{margin:4px 0 0;font-size:15px}.card-heading>span,.records-heading>span{color:#6de6bd;font-size:10px;font-weight:800}.daily-chart{height:190px;display:flex;align-items:stretch;justify-content:space-around;gap:7px;padding:24px 18px 8px}.daily-day{min-width:16px;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}.daily-bars{height:145px;display:flex;align-items:flex-end;gap:3px}.daily-bars i{width:6px;min-height:3px;border-radius:5px 5px 1px 1px}.daily-bars .created{background:#564562}.daily-bars .sent{background:linear-gradient(#41dda9,#168b66)}.daily-bars .failed{background:#e75e70}.daily-day>span{color:#777b8c;font-size:8px}.chart-caption{display:flex;justify-content:center;gap:15px;padding:9px 15px 16px;color:#8c90a1;font-size:9px}.chart-caption span{display:flex;align-items:center;gap:5px}.chart-caption i{width:7px;height:7px;border-radius:3px}.chart-caption .created{background:#665270}.chart-caption .sent{background:#2bc998}.chart-caption .failed{background:#e75e70}
.template-ranking,.upcoming-list{max-height:265px;overflow:auto;scrollbar-width:none;padding:10px}.template-row{padding:11px;border-radius:11px}.template-row:hover,.upcoming-row:hover{background:rgba(131,109,255,.055)}.template-row>div:first-child{display:flex;justify-content:space-between;gap:8px}.template-row strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.template-row small{color:#85899b;font-size:9px}.template-progress{height:5px;margin-top:8px;overflow:hidden;border-radius:4px;background:#292b37}.template-progress i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#6549df,#35d6a3)}.template-status{display:flex;gap:9px;margin-top:6px;color:#777c8e;font-size:8px}.template-status .ok{color:#54dcae}.template-status .error{color:#f27a88}.upcoming-row{display:grid;grid-template-columns:39px 1fr;gap:10px;padding:10px;border-radius:11px}.upcoming-time{display:grid;place-content:center;text-align:center;border:1px solid #37334c;border-radius:10px;color:#c6bcff;background:#211e34;font-size:8px}.upcoming-time strong{font-size:13px}.upcoming-copy{min-width:0}.upcoming-copy strong,.upcoming-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upcoming-copy strong{font-size:10px}.upcoming-copy small{margin-top:3px;color:#85899b;font-size:9px}.integration-empty{padding:34px 15px;color:#7f8395;text-align:center;font-size:10px}
.records-card{overflow:hidden}.records-heading{padding:20px 22px}.integration-filters{display:grid;grid-template-columns:minmax(230px,1.5fr) 160px 190px 135px 135px auto auto;gap:9px;padding:14px 18px;border-bottom:1px solid #292c39}.integration-filters input,.integration-filters select,.integration-filters button{height:42px;border:1px solid #303342;border-radius:11px;color:#dedce7;background:#1b1d28;outline:0;font-size:10px}.integration-filters input:focus,.integration-filters select:focus{border-color:#6c5bb7;box-shadow:0 0 0 3px rgba(128,105,251,.09)}.integration-search{display:flex;align-items:center;padding:0 10px;border:1px solid #303342;border-radius:11px;background:#1b1d28}.integration-search svg{width:16px;color:#777b8d}.integration-search input{width:100%;border:0;background:transparent;box-shadow:none!important}.date-field{position:relative}.date-field span{position:absolute;z-index:1;top:4px;left:10px;color:#777b8d;font-size:7px;font-weight:800}.date-field input{width:100%;padding:13px 8px 2px}.integration-filters select{padding:0 10px}.integration-filters>button{padding:0 15px;border:0;color:#fff;background:linear-gradient(135deg,#7e66fa,#5d43d8);font-weight:800}.integration-filters .filter-clear{border:1px solid #303342;color:#aaaebe;background:#1b1d28}.records-table-wrap{overflow:auto;scrollbar-width:none}.records-table{width:100%;min-width:1050px;border-collapse:collapse}.records-table th{padding:12px 15px;border-bottom:1px solid #292c39;color:#7f8395;text-align:left;font-size:8px;letter-spacing:.08em;text-transform:uppercase}.records-table td{padding:13px 15px;border-bottom:1px solid #242733;color:#cbc9d4;font-size:10px}.records-table tbody tr{cursor:pointer}.records-table tbody tr:hover{background:rgba(131,109,255,.05)}.record-contact,.record-template{display:grid;gap:3px}.record-contact strong,.record-template strong{max-width:190px;overflow:hidden;color:#efedf5;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.record-contact small,.record-template small{color:#7d8193;font-size:8px}.record-status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:12px;font-size:8px;font-weight:850}.record-status:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.record-status.pending{color:#f0bd70;background:rgba(240,179,91,.11)}.record-status.processing{color:#b8aaff;background:rgba(131,109,255,.12)}.record-status.sent,.record-status.delivered,.record-status.read{color:#5fe1b5;background:rgba(36,214,155,.1)}.record-status.failed{color:#ff8d99;background:rgba(255,104,120,.11)}.record-status.cancelled{color:#999dad;background:#292b36}.record-time{display:grid;gap:3px;white-space:nowrap}.record-time small{color:#777b8d}.record-action{border:1px solid #353344;border-radius:9px;padding:6px 8px;color:#bdb5e8;background:#211f30;font-size:9px}.loading-cell{padding:50px!important;color:#7e8294!important;text-align:center}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:13px 18px}.pagination button{padding:8px 11px;border:1px solid #303342;border-radius:9px;color:#bbb8c7;background:#1c1e29;font-size:9px}.pagination button:disabled{opacity:.35}.pagination span{color:#828697;font-size:9px}
.integration-detail{width:min(650px,calc(100vw - 30px));max-height:88vh;padding:0;border:1px solid #303342;border-radius:19px;color:#efedf5;background:#151720;box-shadow:0 32px 100px rgba(0,0,0,.6)}.integration-detail::backdrop{background:rgba(5,6,10,.7);backdrop-filter:blur(5px)}.detail-shell>header{display:flex;align-items:flex-start;justify-content:space-between;padding:21px;border-bottom:1px solid #2b2e3a;background:linear-gradient(110deg,rgba(121,91,237,.15),rgba(30,207,149,.04))}.detail-shell h2{margin:5px 0 0;font-size:18px}.detail-shell>header button{width:32px;height:32px;border:0;border-radius:9px;color:#b0adbb;background:#242733;font-size:21px}.detail-shell>div{max-height:calc(88vh - 150px);overflow:auto;padding:20px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-field{padding:11px;border:1px solid #2c2f3c;border-radius:11px;background:#1a1c26}.detail-field span,.detail-message>span{display:block;margin-bottom:5px;color:#7e8294;font-size:8px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.detail-field strong{font-size:10px;overflow-wrap:anywhere}.detail-message{margin-top:11px;padding:14px;border-left:3px solid #775eea;border-radius:10px;background:#1b1d28}.detail-message p{margin:0;color:#d9d6e1;font-size:11px;line-height:1.65;white-space:pre-wrap}.detail-error{margin-top:10px;padding:11px;border:1px solid rgba(255,104,120,.18);border-radius:10px;color:#f19aa4;background:rgba(255,104,120,.07);font-size:10px}.detail-metadata{margin-top:10px;padding:11px;overflow:auto;border-radius:10px;color:#9ca0b0;background:#0e1017;font-size:9px}.detail-shell>footer{display:flex;justify-content:flex-end;padding:14px 20px;border-top:1px solid #2b2e3a}.open-conversation{padding:10px 14px;border-radius:10px;color:#fff;background:linear-gradient(135deg,#7d65f8,#5e45d8);text-decoration:none;font-size:10px;font-weight:800}
@media(max-width:1350px){.integration-insights{grid-template-columns:1fr 1fr}.volume-card{grid-column:1/-1}.integration-filters{grid-template-columns:1fr 1fr 1fr}.integration-search{grid-column:1/-1}}@media(max-width:900px){.integration-shell{grid-template-columns:1fr}.integration-page .rail{position:static;width:100%;height:68px;flex-direction:row;padding:10px 16px}.integration-page .rail-group{flex-direction:row}.integration-page .rail-bottom{margin-top:0;margin-left:auto}.integration-main{padding:22px 14px}.integration-header{align-items:flex-start;flex-direction:column}.integration-header-actions{width:100%;flex-wrap:wrap}.integration-metrics{grid-template-columns:1fr 1fr}.integration-insights{grid-template-columns:1fr}.volume-card{grid-column:auto}.integration-filters{grid-template-columns:1fr 1fr}.integration-search{grid-column:1/-1}}@media(max-width:560px){.integration-metrics{grid-template-columns:1fr}.integration-filters{grid-template-columns:1fr}.integration-search{grid-column:auto}.integration-header-actions #profile,.integration-header-actions>span{display:none}.detail-grid{grid-template-columns:1fr}}
.upcoming-row{color:#efedf5;text-decoration:none}