:root{--t:#03313d;--o:#ed7e23;--bg:#061724;--panel:#0a2231;--line:#173b4c;--txt:#e9f1f4;--muted:#9bb0ba}*{box-sizing:border-box}body{margin:0;background:#071824;color:var(--txt);font-family:Arial,sans-serif}.phead{height:82px;position:sticky;top:0;z-index:20;background:#04131e;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 28px}.pbrand{display:flex;align-items:center;gap:15px;color:#fff;text-decoration:none}.pbrand img{width:150px}.pbrand span{font-size:18px;font-weight:800;border-left:1px solid #274454;padding-left:15px}.pbrand small,.puser small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.puser{display:flex;align-items:center;gap:18px;text-align:right}.puser a,.button{background:var(--o);color:#fff;text-decoration:none;border:0;border-radius:10px;padding:10px 15px;font-weight:700;cursor:pointer}.shell{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 125px)}aside{padding:25px 14px;border-right:1px solid var(--line);background:#061521}aside a{display:block;color:#bcd0d8;text-decoration:none;padding:12px 14px;border-radius:10px;margin:3px 0;font-size:14px}aside a:hover{background:#0b2a3a;color:#fff}main{padding:28px;min-width:0}.page-title h1{font-size:30px;margin:0 0 24px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat,.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}.stat b{display:block;color:var(--o);font-size:30px}.stat span,.muted{color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.card h3{margin-top:0}.tag{display:inline-block;padding:5px 8px;border-radius:20px;background:#123849;color:#bfe2ef;font-size:11px}.priority-High,.priority-Critical{color:#ff8b70}.table-wrap{overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{color:#a9c0ca}input,select,textarea{width:100%;padding:11px;border:1px solid #285064;border-radius:9px;background:#071b29;color:#fff;font-size:15px}label{display:block;margin-bottom:12px;color:#c8d8df;font-size:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.alert{padding:12px;border-radius:10px;margin-bottom:15px}.ok{background:#123d2c}.err{background:#4b2424}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,#0a4a5c,#061724 50%)}.login-card{width:min(430px,calc(100% - 28px));padding:30px;border:1px solid var(--line);border-radius:20px;background:#081f2e}.login-card img{width:210px;display:block;margin:0 auto 20px}.solution{border-left:4px solid var(--o)}.ticket-message{white-space:pre-wrap;background:#071b29;padding:14px;border-radius:10px;margin:10px 0}.reply{border-left:3px solid #2d7897;padding:10px 14px;margin:10px 0;background:#08202f}.reply.staff{border-color:var(--o)}footer{text-align:center;padding:14px;color:#76919c;border-top:1px solid var(--line);font-size:11px}@media(max-width:900px){.shell{grid-template-columns:1fr}aside{display:flex;overflow:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}aside a{white-space:nowrap}.grid{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}.pbrand span{display:none}}@media(max-width:600px){.phead{padding:10px 14px}.pbrand img{width:125px}.puser span{display:none}main{padding:18px}.grid,.cards,.form-grid{grid-template-columns:1fr}}

/* =========================================================
   Delta Customer Hub — Professional Motion Layer
   ========================================================= */
body{position:relative}
.portal-ambient{position:fixed;inset:82px 0 0 230px;z-index:-1;overflow:hidden;pointer-events:none;background-image:linear-gradient(rgba(59,129,157,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(59,129,157,.035) 1px,transparent 1px);background-size:38px 38px}
.portal-ambient i{position:absolute;width:360px;height:360px;border-radius:50%;filter:blur(85px);opacity:.11;background:#1fb4cf;animation:ambientDrift 15s ease-in-out infinite}
.portal-ambient i:nth-child(1){left:8%;top:5%}.portal-ambient i:nth-child(2){right:4%;top:30%;background:#ed7e23;animation-delay:-5s}.portal-ambient i:nth-child(3){left:42%;bottom:2%;animation-delay:-9s}
@keyframes ambientDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(28px,-20px,0) scale(1.12)}}

.phead{overflow:hidden}
.phead:after{content:"";position:absolute;left:-35%;bottom:0;width:30%;height:1px;background:linear-gradient(90deg,transparent,#ed7e23,transparent);animation:headerScan 7s linear infinite}
@keyframes headerScan{to{left:110%}}
.pbrand img{transition:filter .3s ease,transform .3s ease}.pbrand:hover img{transform:translateY(-1px);filter:drop-shadow(0 0 10px rgba(237,126,35,.24))}

main>.page-title{animation:portalUp .5s ease both}
.stat,.card,.table-wrap,.tools-trial-card{animation:portalUp .55s ease both}
.grid .stat:nth-child(2),.cards .card:nth-child(2){animation-delay:.06s}.grid .stat:nth-child(3),.cards .card:nth-child(3){animation-delay:.12s}.grid .stat:nth-child(4){animation-delay:.18s}
@keyframes portalUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stat,.card{position:relative;overflow:hidden;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.stat:before,.card:before{content:"";position:absolute;inset:0 auto 0 -55%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.035),transparent);transform:skewX(-18deg);transition:left .65s ease}
.stat:hover:before,.card:hover:before{left:125%}
.stat:hover,.card:hover{transform:translateY(-3px);border-color:rgba(237,126,35,.32);box-shadow:0 16px 34px rgba(0,0,0,.16)}
.stat b{text-shadow:0 0 20px rgba(237,126,35,.12)}

aside a{position:relative;overflow:hidden;transition:.2s ease}
aside a:before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:#ed7e23;border-radius:5px;transform:translateY(-50%);transition:.2s ease}
aside a:hover:before{height:58%}
.button{transition:transform .2s ease,box-shadow .2s ease}.button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(237,126,35,.18)}

/* Login technology scene */
.login{position:relative;overflow:hidden}
.portal-tech-bg{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(64,162,190,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(64,162,190,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle at center,#000 20%,transparent 82%)}
.portal-tech-bg i{position:absolute;width:2px;height:34%;top:-35%;background:linear-gradient(transparent,#3dc3db,transparent);opacity:.25;animation:dataRain 7s linear infinite}
.portal-tech-bg i:nth-child(1){left:14%}.portal-tech-bg i:nth-child(2){left:37%;animation-delay:-2s}.portal-tech-bg i:nth-child(3){left:68%;animation-delay:-4s}.portal-tech-bg i:nth-child(4){left:88%;animation-delay:-6s}
@keyframes dataRain{to{top:115%}}
.data-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#ed7e23;box-shadow:0 0 15px #ed7e23;animation:dotFloat 6s ease-in-out infinite}.d1{left:12%;top:26%}.d2{right:14%;top:62%;animation-delay:-2s}.d3{left:72%;top:16%;animation-delay:-4s}
@keyframes dotFloat{50%{transform:translateY(-18px);opacity:.45}}
.login-orbit{position:fixed;width:560px;height:560px;border:1px solid rgba(68,180,205,.08);border-radius:50%;pointer-events:none;animation:orbitSpin 38s linear infinite}
.login-orbit:before{content:"";position:absolute;inset:72px;border:1px dashed rgba(237,126,35,.09);border-radius:50%}
.login-orbit span{position:absolute;padding:6px 9px;border:1px solid rgba(77,178,203,.12);border-radius:8px;background:rgba(6,31,46,.55);color:#6fa4b5;font-size:10px;font-weight:800}
.login-orbit span:nth-child(1){left:48%;top:-15px}.login-orbit span:nth-child(2){right:-20px;top:48%}.login-orbit span:nth-child(3){left:48%;bottom:-15px}.login-orbit span:nth-child(4){left:-22px;top:48%}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.portal-enter{position:relative;z-index:2;animation:loginEnter .7s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 30px 90px rgba(0,0,0,.35),0 0 0 1px rgba(89,179,207,.04)}
@keyframes loginEnter{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.login-card:before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:linear-gradient(130deg,rgba(237,126,35,.55),transparent 25%,transparent 70%,rgba(37,176,205,.45));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.login-card input:focus{outline:none;border-color:#ed7e23;box-shadow:0 0 0 3px rgba(237,126,35,.08)}

@media(max-width:900px){.portal-ambient{inset:145px 0 0 0}.login-orbit{width:440px;height:440px}}
@media(max-width:600px){.login-orbit{width:340px;height:340px}.portal-tech-bg{background-size:32px 32px}.portal-ambient{display:none}}
@media(hover:none){.stat:hover,.card:hover,.button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.project-card{border-top:3px solid #ed7e23}.portal-progress{height:8px;border-radius:20px;background:#071b29;overflow:hidden;margin:14px 0}.portal-progress i{display:block;height:100%;background:linear-gradient(90deg,#ed7e23,#ffab68);border-radius:20px}.renew-soon{color:#ff9d55;font-weight:900}

.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 20%,#0b5a67 0,#03313d 38%,#011c27 100%)}.auth-card{width:min(460px,100%);padding:30px;border:1px solid #ffffff20;border-radius:18px;background:#fff;box-shadow:0 20px 60px #0005}.auth-card h1{color:#03313d}.auth-card label{display:flex;flex-direction:column;gap:7px;margin:14px 0;color:#365560;font-weight:800}.auth-card input{height:45px;padding:10px 12px;border:1px solid #cadbe0;border-radius:9px}.auth-card input:focus{outline:0;border-color:#ed7e23;box-shadow:0 0 0 3px #ed7e2318}.auth-help{text-align:right;font-size:12px}.auth-help a{color:#ed7e23}

.integration-card{border-top:3px solid #ed7e23}.integration-card strong{color:#ff9a50}


.ticket-alert-center{position:fixed;z-index:99999;top:12px;left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 24px));overflow:hidden;border:1px solid #ff6b6b;border-radius:13px;background:#fff;box-shadow:0 15px 45px rgba(120,0,0,.28);font-family:inherit}.ticket-alert-center[hidden]{display:none!important}.ticket-alert-head{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;background:linear-gradient(90deg,#a91515,#d92c2c);color:#fff;font-weight:900}.ticket-alert-head b{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:20px;background:#fff;color:#bd1d1d;font-size:11px}.ticket-alert-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-top:1px solid #f1dada;background:#fff8f8}.ticket-alert-item:first-child{border-top:0}.ticket-alert-item strong,.ticket-alert-item span,.ticket-alert-item small{display:block}.ticket-alert-item strong{color:#8d1515;font-size:11px}.ticket-alert-item span{margin-top:2px;color:#493d3d;font-size:9px;font-weight:800}.ticket-alert-item small{margin-top:3px;color:#8d7777;font-size:8px}.ticket-alert-item a{flex:0 0 auto;padding:7px 10px;border-radius:8px;background:#bd2020;color:#fff!important;text-decoration:none!important;font-size:9px;font-weight:900}@media(max-width:600px){.ticket-alert-center{top:6px}.ticket-alert-item{align-items:flex-start}.ticket-alert-item strong{font-size:10px}}