*{margin:0;padding:0;box-sizing:border-box} :root{ --ink:#0f172a;--muted:#64748b;--line:rgba(255,255,255,0.4); --pri:#2563eb;--cyan:#0ea5e9;--ok:#10b981;--warn:#f59e0b;--bad:#ef4444; } body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,system-ui,sans-serif;color:var(--ink);font-size:14px;overflow:hidden;height:100vh;width:100vw;-webkit-font-smoothing:antialiased} /* ========================================================= 全局极光背景 (让液态玻璃有底色可折射) ========================================================= */ .bg-aurora{ position:fixed;inset:0;z-index:-1; background-color:#eef2f8; background-image: radial-gradient(at 0% 0%, rgba(37,99,235,0.15) 0, transparent 50%), radial-gradient(at 100% 0%, rgba(14,165,233,0.15) 0, transparent 50%), radial-gradient(at 100% 100%, rgba(236,72,153,0.08) 0, transparent 50%), radial-gradient(at 0% 100%, rgba(59,130,246,0.1) 0, transparent 50%); animation:auroraMove 20s ease-in-out infinite alternate; } @keyframes auroraMove{0%{background-position:0% 0%}100%{background-position:100% 100%}} /* ========================================================= 1. 登录页 (左液态玻璃，右 3D) ========================================================= */ #loginPage{display:flex;height:100vh;width:100vw;overflow:hidden;position:absolute;inset:0;z-index:100;transition:opacity 0.8s ease} .login-left{width:40%;flex:0 0 40%;display:flex;align-items:center;justify-content:center;position:relative;z-index:10;padding:40px} .glass-card{width:100%;max-width:420px;padding:48px 40px;border-radius:40px;position:relative;overflow:hidden; background:linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2)); backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%); border:1px solid rgba(255,255,255,0.8); box-shadow:0 30px 60px -12px rgba(15,23,42,0.2), inset 0 0 0 1px rgba(255,255,255,0.6), inset 0 20px 40px -20px rgba(255,255,255,0.9); transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .glass-card:hover{transform:translateY(-5px)} .glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent);z-index:2} .glass-card::after{content:'';position:absolute;top:0;left:0;width:100%;height:40%;background:linear-gradient(180deg,rgba(255,255,255,0.5) 0%,transparent 100%);pointer-events:none;border-radius:40px 40px 0 0} .login-logo{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#3b82f6,#0ea5e9);display:grid;place-items:center;font-size:32px;color:#fff;margin-bottom:24px;box-shadow:0 12px 24px -8px rgba(37,99,235,0.8), inset 0 2px 4px rgba(255,255,255,0.6)} .login-title{font-size:26px;font-weight:800;color:#0f172a;letter-spacing:1px;position:relative;z-index:3} .login-sub{font-size:13.5px;color:#475569;margin-top:8px;margin-bottom:32px;line-height:1.7;position:relative;z-index:3} .login-field{margin-bottom:20px;position:relative;z-index:3} .login-field label{display:block;font-size:13px;color:#334155;margin-bottom:8px;font-weight:600} .login-field input{width:100%;height:52px;border:1px solid rgba(255,255,255,0.6);border-radius:16px;padding:0 16px;font-size:15px;color:#0f172a;outline:none; background:linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4)); backdrop-filter:blur(10px);box-shadow:inset 0 2px 4px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.02);transition:all .3s;} .login-field input:focus{border-color:#60a5fa;background:rgba(255,255,255,0.95);box-shadow:0 0 0 4px rgba(59,130,246,0.2), inset 0 2px 4px rgba(0,0,0,0.05)} .code-row{display:flex;gap:10px} .btn-code{height:52px;padding:0 18px;border:1px solid rgba(255,255,255,0.6);border-radius:16px;background:rgba(255,255,255,0.5);color:#2563eb;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;backdrop-filter:blur(10px)} .btn-code:hover{background:rgba(255,255,255,0.9);border-color:#93c5fd} .login-btn{width:100%;height:54px;border:0;border-radius:16px;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:1px; box-shadow:0 12px 24px -8px rgba(37,99,235,0.6), inset 0 1px 1px rgba(255,255,255,0.4);transition:all .3s;position:relative;overflow:hidden;z-index:3} .login-btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:left 0.6s} .login-btn:hover::after{left:100%} .login-btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(37,99,235,0.8), inset 0 1px 1px rgba(255,255,255,0.5)} .demo-accounts{margin-top:24px;padding:16px;background:rgba(255,255,255,0.4);border:1px solid rgba(255,255,255,0.6);border-radius:16px;font-size:12.5px;color:#475569;line-height:1.9;position:relative;z-index:3;backdrop-filter:blur(10px);box-shadow:inset 0 1px 2px rgba(255,255,255,0.6)} .demo-accounts b{color:#1d4ed8;font-weight:700} .login-right{width:60%;flex:1;position:relative;overflow:hidden;z-index:1} #carCanvas{width:100%;height:100%;display:block;outline:none;cursor:grab} #carCanvas:active{cursor:grabbing} .car-title{position:absolute;right:50px;top:50px;text-align:right;pointer-events:none;z-index:10} .car-title h2{font-size:32px;color:#0f172a;letter-spacing:3px;font-weight:900;background:linear-gradient(90deg,#0f172a,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .car-title p{font-size:14px;color:#475569;margin-top:10px;font-weight:500} .car-tip{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);background:rgba(15,23,42,0.8);backdrop-filter:blur(10px);color:#fff;padding:12px 24px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:0.5px;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,0.2);display:flex;align-items:center;gap:8px;z-index:10} .car-tip i{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981;animation:pulse 1.5s infinite} /* ========================================================= 2. 主系统框架 ========================================================= */ #app{display:none;height:100vh;width:100vw;flex-direction:row;animation:fadeIn 0.6s ease;position:relative} .sidebar{width:252px;flex:0 0 252px;height:calc(100vh - 32px);margin:16px 0 16px 16px;border-radius:24px;display:flex;flex-direction:column;padding:22px 16px 18px; background:linear-gradient(180deg, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.65) 100%); backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%); border:1px solid rgba(255,255,255,0.15); box-shadow:0 20px 40px -10px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2); color:#cbd5e1;z-index:10} .brand{display:flex;gap:11px;align-items:center;padding:0 8px 22px} .brand .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#3b82f6,#0ea5e9);display:grid;place-items:center;font-weight:700;color:#fff;font-size:17px;box-shadow:0 8px 20px -6px rgba(37,99,235,.9)} .brand h1{font-size:14.5px;color:#fff;letter-spacing:.4px} .brand p{font-size:11px;color:#94a3b8;margin-top:3px} .nav{display:flex;flex-direction:column;gap:4px;margin-top:4px;overflow-y:auto} .nav::-webkit-scrollbar{width:0} .nav-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;font-size:13.5px;color:#94a3b8;cursor:pointer;transition:.18s;border:1px solid transparent;user-select:none;margin-bottom:2px} .nav-item:hover{background:rgba(255,255,255,0.08);color:#fff} .nav-item.active{background:linear-gradient(90deg,rgba(59,130,246,0.9),rgba(14,165,233,0.6));color:#fff;border-color:rgba(255,255,255,0.2);box-shadow:0 8px 24px -8px rgba(37,99,235,0.8), inset 0 1px 1px rgba(255,255,255,0.2)} .nav-item .ico{width:18px;text-align:center;font-size:14px} .side-foot{margin-top:auto;padding:14px;border-radius:16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1)} .side-foot .nm{font-size:12.5px;color:#fff;font-weight:600;line-height:1.45} .side-foot .st{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:11.5px;color:#34d399} .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(16,185,129,.18)} .main{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 16px 0 16px} .topbar{height:64px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;margin-bottom:16px; background:linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4)); backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%); border:1px solid rgba(255,255,255,0.8); box-shadow:0 10px 30px -10px rgba(15,23,42,0.05), inset 0 1px 1px rgba(255,255,255,0.9); z-index:30} .crumb{font-size:13px;color:var(--muted)} .crumb b{color:var(--ink);font-weight:600} .topbar-right{display:flex;align-items:center;gap:16px} .sync-tip{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#0f9d6e;background:rgba(16,185,129,0.15);padding:6px 12px;border-radius:999px;border:1px solid rgba(16,185,129,0.2)} .sync-tip .pulse{width:7px;height:7px;border-radius:50%;background:#10b981;animation:pulse 1.8s infinite} /* 右上角账号切换下拉 */ .user-menu-wrap{position:relative} .user-menu-trigger{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:12px;transition:0.15s;border:1px solid transparent} .user-menu-trigger:hover{background:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.8)} .avatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#1e293b,#334155);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,0.1)} .user-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:220px;padding:8px;border-radius:16px; background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,0.9); box-shadow:0 20px 40px -10px rgba(15,23,42,0.15), inset 0 1px 1px rgba(255,255,255,1); display:none;flex-direction:column;gap:2px;z-index:100;transform-origin:top right;animation:pop 0.2s ease} .user-dropdown.show{display:flex} .dropdown-title{font-size:11.5px;color:var(--muted);padding:8px 12px 4px;font-weight:600;letter-spacing:0.5px} .user-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:0.15s;border:1px solid transparent} .user-option:hover{background:rgba(255,255,255,0.8)} .user-option.active{background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.2)} .user-option .u-avatar{width:28px;height:28px;border-radius:8px;background:#cbd5e1;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff} .user-option.active .u-avatar{background:linear-gradient(135deg,#3b82f6,#0ea5e9)} .user-option .u-info{flex:1} .user-option .u-name{font-size:13px;font-weight:600;color:var(--ink)} .user-option .u-role{font-size:11px;color:var(--muted);margin-top:2px} .divider{height:1px;background:rgba(0,0,0,0.05);margin:6px 0} .logout-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;font-size:13px;color:#ef4444;cursor:pointer;transition:0.15s;font-weight:600} .logout-btn:hover{background:rgba(239,68,68,0.1)} .content{padding:0 0 24px 0;flex:1;overflow-y:auto;position:relative} /* ========================================================= 3. 通用组件 (全方位液态玻璃) ========================================================= */ .card,.stat{position:relative;border-radius:20px; background:linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3)) !important; backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%); border:1px solid rgba(255,255,255,0.8) !important; box-shadow:0 10px 30px -10px rgba(15,23,42,0.08), inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 1px rgba(0,0,0,0.02); --mx:50%;--my:50%;transition:transform .25s,box-shadow .35s; } .card::after,.stat::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.6),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:1} .card:hover::after,.stat:hover::after{opacity:1} .card>*,.stat>*{position:relative;z-index:3} .card-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,0.5);gap:12px;flex-wrap:wrap} .card-h h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px} .card-h .hint{font-size:12px;color:var(--muted);font-weight:400} .card-b{padding:20px 22px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .grid-2{display:grid;grid-template-columns:1.65fr 1fr;gap:16px} .stack{display:flex;flex-direction:column;gap:16px} .mt16{margin-top:16px} .stat{overflow:hidden;padding:20px} .stat:hover{transform:translateY(-3px);box-shadow:0 20px 40px -15px rgba(37,99,235,0.2)} .stat .lb{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px} .stat .vl{font-size:28px;font-weight:800;letter-spacing:-.6px;margin-top:9px} .stat .sb{font-size:12px;color:var(--muted);margin-top:7px} .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{text-align:left;padding:12px 14px;font-size:12px;color:var(--muted);font-weight:600;background:rgba(255,255,255,0.3);border-bottom:1px solid rgba(255,255,255,0.5);white-space:nowrap} .tbl td{padding:14px;border-bottom:1px solid rgba(255,255,255,0.4);vertical-align:middle} .tbl tbody tr{transition:background 0.2s} .tbl tbody tr:hover{background:rgba(255,255,255,0.5)} .tbl tbody tr:last-child td{border-bottom:0} .tbl.mini td,.tbl.mini th{padding:8px 10px} .tbl .c{text-align:center} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:#334155} .sub{font-size:12px;color:var(--muted);margin-top:3px} .strong{font-weight:600} .text-bad{color:var(--bad)!important} .text-ok{color:var(--ok)!important} .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.6;white-space:nowrap;backdrop-filter:blur(4px)} .b-ok{background:rgba(16,185,129,0.15);color:#0f9d6e;border:1px solid rgba(16,185,129,0.2)} .b-info{background:rgba(59,130,246,0.15);color:#1d4ed8;border:1px solid rgba(59,130,246,0.2)} .b-run{background:rgba(99,102,241,0.15);color:#4338ca;border:1px solid rgba(99,102,241,0.2)} .b-warn{background:rgba(245,158,11,0.15);color:#b45309;border:1px solid rgba(245,158,11,0.2)} .b-bad{background:rgba(239,68,68,0.15);color:#dc2626;border:1px solid rgba(239,68,68,0.2)} .b-mute{background:rgba(148,163,184,0.15);color:#64748b;border:1px solid rgba(148,163,184,0.2)} .b-cyan{background:rgba(14,165,233,0.15);color:#0e7490;border:1px solid rgba(14,165,233,0.2)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:12px;font-size:13px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:.16s;background:rgba(255,255,255,0.7);color:var(--ink);font-family:inherit;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,0.02)} .btn-pri{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;box-shadow:0 8px 20px -8px rgba(37,99,235,0.8), inset 0 1px 1px rgba(255,255,255,0.4)} .btn-pri:hover{filter:brightness(1.1);transform:translateY(-1px)} .btn-gh{background:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.9);color:#334155;box-shadow:0 2px 5px rgba(0,0,0,0.02)} .btn-gh:hover{background:rgba(255,255,255,0.9);border-color:#93c5fd} .btn-sm{padding:6px 12px;font-size:12.5px;border-radius:9px} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;filter:none!important} .filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px 16px;background:linear-gradient(135deg,rgba(255,255,255,0.6),rgba(255,255,255,0.3));backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.8);border-radius:16px;box-shadow:0 8px 24px -12px rgba(15,23,42,0.05);flex-wrap:wrap} .filter-label{font-size:12.5px;color:var(--muted);margin-right:4px;font-weight:600} .chip-filter{padding:6px 14px;border-radius:999px;font-size:12.5px;color:var(--muted);cursor:pointer;background:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.8);transition:all .2s;user-select:none} .chip-filter:hover{color:var(--ink);border-color:#93b4f6;background:rgba(255,255,255,0.8)} .chip-filter.active{color:#fff;background:linear-gradient(135deg,#2563eb,#0ea5e9);border-color:transparent;box-shadow:0 6px 16px -6px rgba(37,99,235,0.6)} .data-base-tip{margin-left:auto;font-size:11.5px;color:var(--muted);padding:4px 10px;border-radius:8px;background:rgba(255,255,255,0.4);border:1px solid rgba(255,255,255,0.6)} .tabs{display:flex;gap:6px;padding:14px 20px 0;border-bottom:1px solid rgba(255,255,255,0.5);flex-wrap:wrap} .tab{padding:8px 14px;border-radius:9px 9px 0 0;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:.15s;user-select:none} .tab:hover{color:var(--ink);background:rgba(255,255,255,0.3)} .tab.active{color:var(--pri);border-bottom-color:var(--pri);font-weight:600} .in{width:100%;padding:10px 12px;border:1px solid rgba(255,255,255,0.8);border-radius:10px;font-size:13px;font-family:inherit;color:var(--ink);background:rgba(255,255,255,0.6);outline:none;transition:.16s} .in:focus{border-color:#93b4f6;background:rgba(255,255,255,0.9);box-shadow:0 0 0 3px rgba(37,99,235,.12)} .in:disabled{background:rgba(255,255,255,0.3);color:var(--muted)} .in.sm{padding:6px 9px;font-size:12.5px} select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px} select[multiple].in{background-image:none;padding-right:12px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px} .fld{display:flex;flex-direction:column;gap:6px} .fld>span{font-size:12.5px;color:var(--muted);font-weight:500} .sec-title{margin:20px 0 10px;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px} .sec-title .hint{font-size:12px;color:var(--muted);font-weight:400} .summary{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding:14px 16px;background:rgba(255,255,255,0.4);border:1px dashed rgba(255,255,255,0.8);border-radius:12px} .sum-item{display:flex;flex-direction:column;gap:3px;min-width:110px} .sum-item span{font-size:11.5px;color:var(--muted)} .sum-item b{font-size:14px;font-weight:700} .todo{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,0.8);background:rgba(255,255,255,0.5);cursor:pointer;transition:.16s} .todo:hover{border-color:#bfd4f7;background:rgba(255,255,255,0.8);transform:translateX(2px)} .todo .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex:0 0 36px} .todo .tt{font-size:13px;font-weight:600} .todo .dd{font-size:11.5px;color:var(--muted);margin-top:2px} .todo .ar{margin-left:auto;color:#cbd5e1;font-size:15px} .timeline{position:relative;padding-left:24px} .timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:8px;width:2px;background:linear-gradient(180deg,#bfd4f7,rgba(255,255,255,0.2))} .tl-item{position:relative;padding-bottom:20px} .tl-item:last-child{padding-bottom:0} .tl-item::before{content:'';position:absolute;left:-24px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #2563eb;box-sizing:border-box} .tl-item.ok::before{border-color:#10b981} .tl-item.bad::before{border-color:#ef4444} .tl-item .tt{font-size:13px;font-weight:600} .tl-item .td{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.6} .tl-item .tm{font-size:11.5px;color:#94a3b8;margin-top:5px;font-family:ui-monospace,monospace} .station-chips{display:flex;flex-wrap:wrap;gap:4px;max-width:360px} .station-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:11px;border-radius:6px;background:rgba(59,130,246,0.1);color:#1d4ed8;border:1px solid rgba(59,130,246,0.2);white-space:nowrap;line-height:1.5} .station-chip .st-dot{width:5px;height:5px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.15);flex-shrink:0} .station-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px} .station-opt{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(255,255,255,0.8);border-radius:10px;font-size:12.5px;cursor:pointer;transition:.15s;background:rgba(255,255,255,0.5);user-select:none} .station-opt:hover{border-color:#93b4f6;background:rgba(255,255,255,0.8)} .station-opt:has(input:checked){border-color:#2563eb;background:rgba(37,99,235,0.1);color:#1d4ed8;font-weight:600;box-shadow:0 4px 12px -6px rgba(37,99,235,.2)} .station-opt input{accent-color:#2563eb;width:15px;height:15px;cursor:pointer} .role-check-grid{display:flex;flex-wrap:wrap;gap:8px} .role-check{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid rgba(255,255,255,0.8);border-radius:10px;font-size:12.5px;cursor:pointer;background:rgba(255,255,255,0.5);user-select:none} .role-check:has(input:checked){border-color:#2563eb;background:rgba(37,99,235,0.1);color:#1d4ed8;font-weight:600} .role-check input{accent-color:#2563eb;width:15px;height:15px} /* 弹窗与聊天 */ .overlay{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px} .modal{background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,0.9);border-radius:24px;width:100%;max-width:1000px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 40px 100px -20px rgba(15,23,42,.4);animation:pop .2s} .modal-h{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,0.5)} .modal-h h3{font-size:16px;font-weight:700} .modal-b{padding:24px;overflow:auto} .modal-f{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.3);border-radius:0 0 24px 24px} .x{border:0;background:rgba(0,0,0,0.05);width:32px;height:32px;border-radius:10px;cursor:pointer;color:#64748b;font-size:16px;transition:.15s} @keyframes pop{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}} /* Toast */ #toastRoot{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center} .toast{background:rgba(15,23,42,0.9);backdrop-filter:blur(10px);color:#fff;padding:12px 24px;border-radius:12px;font-size:14px;border-left:4px solid #10b981;box-shadow:0 10px 30px rgba(0,0,0,0.5);animation:slideIn 0.3s ease;display:flex;align-items:center;gap:8px;font-weight:500} .toast.bad{border-left-color:#ef4444} @keyframes slideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}} /* 包裹照片缩略图 */ .photo-thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,0.8);cursor:pointer;transition:transform 0.2s;margin-right:-8px} .photo-thumb:hover{transform:scale(1.1);z-index:2;position:relative;box-shadow:0 4px 12px rgba(0,0,0,0.15)} .photo-stack{display:flex;align-items:center} .photo-more{width:32px;height:32px;border-radius:6px;background:rgba(0,0,0,0.4);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:bold;border:1px solid rgba(255,255,255,0.8);margin-left:4px;cursor:pointer} /* === Autonomous Vehicle / 3D Digital Twin Showcase: scoped to login right === */ .login-right{ isolation:isolate; background:linear-gradient(105deg, rgba(226,238,251,.06) 0%,#8c9eb7 10%,#4b6687 25%, #1b2a41 43%,#0c172b 66%,#060d1c 100%); } .login-right::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 76% 46% at 71% 45%,rgba(55,112,186,.30),transparent 74%), radial-gradient(ellipse 43% 30% at 31% 75%,rgba(120,191,253,.21),transparent 72%), radial-gradient(ellipse 60% 29% at 86% 91%,rgba(34,104,210,.17),transparent 77%), linear-gradient(180deg,rgba(135,180,229,.08),transparent 43%,rgba(3,11,27,.28)); } .login-right::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,rgba(224,237,250,.58),rgba(192,215,235,.20) 12%,transparent 31%), linear-gradient(180deg,rgba(3,9,24,.24),transparent 23%,transparent 76%,rgba(4,11,26,.34)); } #carCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;touch-action:none;cursor:grab} #carCanvas:active{cursor:grabbing} .car-title{position:absolute;left:clamp(26px,4vw,76px);right:clamp(24px,3.6vw,64px);top:clamp(32px,5vh,67px);z-index:5; text-align:left;pointer-events:none} .car-title .tech-eyebrow{display:flex;align-items:center;gap:12px;color:#b5d6f3;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase} .car-title .tech-eyebrow::before{content:"";width:23px;height:1px;background:#5fc9ff;box-shadow:0 0 9px #5fc9ff} .car-title h2{margin:15px 0 8px;font-size:clamp(21px,2.6vw,36px);line-height:1.16;letter-spacing:3px;font-weight:800; background:linear-gradient(110deg,#fff 8%,#c6e5ff 62%,#59bafb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .car-title h2 em{font-style:normal;font-weight:300;letter-spacing:1px} .car-title p{color:#a5bfd8;font-size:12px;letter-spacing:1px;margin:0;line-height:1.7;font-weight:400} .showroom-top-tag{position:absolute;right:clamp(24px,3vw,55px);top:37px;display:flex;align-items:center;gap:9px;z-index:5; font:600 10px ui-monospace,SFMono-Regular,monospace;letter-spacing:1.5px;color:#9ac6e7} .showroom-top-tag .live-dot{width:6px;height:6px;border-radius:50%;background:#52ceff;box-shadow:0 0 13px #2dbeff;animation:pulse 2.5s ease-in-out infinite} .car-twin-index{position:absolute;left:clamp(26px,4vw,76px);top:clamp(165px,19vh,206px);z-index:4; border-left:1px solid rgba(116,199,255,.37);padding-left:13px;pointer-events:none; color:#a0bcd6;font:500 10px ui-monospace,SFMono-Regular,monospace;letter-spacing:1.7px;line-height:2} .car-twin-index b{color:#f2faff;font-size:11px;font-weight:600} .car-twin-index .meta-faint{opacity:.52} .car-bottom-metrics{position:absolute;left:clamp(26px,3.4vw,58px);bottom:35px;z-index:5;pointer-events:none; display:flex;gap:22px;align-items:center;color:#d8e9f8} .car-bottom-metrics .metric{display:flex;flex-direction:column;gap:6px;min-width:77px} .car-bottom-metrics .metric span{font:500 9px ui-monospace,SFMono-Regular,monospace;letter-spacing:1.6px;color:#779abb} .car-bottom-metrics .metric b{font-size:12px;font-weight:600;letter-spacing:.2px} .car-bottom-metrics .metric + .metric{border-left:1px solid rgba(137,188,226,.23);padding-left:19px} .car-commands{position:absolute;z-index:7;right:clamp(20px,3.5vw,58px);bottom:31px;display:flex;align-items:center;gap:8px} .car-commands button{font:600 12px "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.2px;padding:11px 17px;border-radius:11px; color:#e3f4ff;background:rgba(14,35,59,.65);border:1px solid rgba(130,185,235,.26);cursor:pointer; transition:background .2s,border-color .2s,transform .2s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .car-commands button:hover{background:rgba(39,80,130,.81);border-color:rgba(136,214,255,.60);transform:translateY(-2px)} .car-commands button:focus-visible{outline:2px solid #7dd3fc;outline-offset:3px} .car-commands .car-primary-action{background:linear-gradient(120deg,rgba(32,110,218,.87),rgba(16,145,200,.82)); border-color:rgba(153,226,255,.42);box-shadow:0 7px 25px rgba(16,88,212,.24)} .car-tip{position:absolute;bottom:99px;left:auto;right:clamp(20px,3.5vw,58px);transform:none;z-index:5; border-radius:7px;padding:0;background:none;border:0;box-shadow:none; color:#9dc4df;font-size:11px;letter-spacing:.4px;gap:8px;white-space:nowrap} .car-tip i{height:6px;width:6px;background:#69d6ff;box-shadow:0 0 10px #31baff} .car-showroom-note{position:absolute;right:clamp(24px,3.6vw,64px);top:clamp(157px,19vh,220px);z-index:4;text-align:right;pointer-events:none} .car-showroom-note .data-label{font:600 10px ui-monospace,SFMono-Regular,monospace;color:#78bcea;letter-spacing:2.2px} .car-showroom-note .data-value{font:500 11px ui-monospace,SFMono-Regular,monospace;color:#c8dfef;letter-spacing:1.1px;margin-top:7px} .car-showroom-note .data-bar{width:88px;height:1px;background:linear-gradient(90deg,transparent,#5fcaff);margin:12px 0 0 auto} #carError{position:absolute;z-index:11;left:14%;right:10%;top:52%;padding:16px;border:1px solid #60a5fa; border-radius:12px;background:rgba(9,24,45,.9);color:#d3ecff;text-align:center;font-size:13px} #carError[hidden]{display:none} @media(max-width:1180px){ .car-twin-index,.car-showroom-note{display:none} .car-title{top:40px;left:30px} .car-title h2{font-size:25px} .car-commands{right:20px} .car-commands button{padding:10px 12px;font-size:11px} .car-bottom-metrics{left:28px;gap:11px} .car-bottom-metrics .metric + .metric{padding-left:12px} } @media(max-width:900px){ .login-left{width:43%;flex-basis:43%;padding:22px} .glass-card{padding:34px 24px;border-radius:29px} .car-title h2{font-size:20px;letter-spacing:1.2px} .car-title p{font-size:10px} .car-tip{display:none} .car-bottom-metrics{bottom:84px} .car-commands{bottom:22px} .car-commands button{padding:9px 10px} .showroom-top-tag{right:20px;top:17px;font-size:9px} } @media(max-width:700px){ body{height:auto;min-height:100vh;overflow:auto} #loginPage{position:relative;display:flex;flex-direction:column;min-height:100vh;height:auto;overflow:visible} .login-left{width:100%;flex:0 0 auto;padding:24px 22px;min-height:unset} .glass-card{max-width:440px;margin:auto;padding:28px 26px} .login-right{width:100%;flex:0 0 480px;height:480px;min-height:480px} .login-right::after{background:linear-gradient(180deg,rgba(211,228,243,.39),transparent 20%,transparent 82%,rgba(4,11,26,.4))} .car-title{top:32px;left:25px} .car-title h2{font-size:23px} .car-bottom-metrics{left:22px;bottom:75px} .car-commands{left:20px;right:auto;bottom:17px} .car-commands button{font-size:11px} #app{min-height:100vh} } @media(prefers-reduced-motion:reduce){.login-right .live-dot{animation:none}} /* ================================================================ XD / 07 | AURORA TITANIUM EXPERIENCE — V2 Scoped to #loginPage. Business administration CSS is untouched. ================================================================ */ #loginPage{ --twin-silver:#eff7ff;--twin-ice:#83e3ff;--twin-blue:#328dff; color:#f0f7ff; background: radial-gradient(ellipse 56% 68% at 75% 51%,rgba(47,107,159,.20) 0,rgba(27,68,118,.07) 51%,transparent 80%), radial-gradient(ellipse 52% 67% at 15% 45%,rgba(18,67,123,.33),transparent 83%), radial-gradient(ellipse 60% 58% at 58% 105%,rgba(7,111,190,.20),transparent 85%), linear-gradient(107deg,#0b1a30 0%,#091628 36%,#0b1c32 64%,#030a16 100%); } #loginPage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 42% 50% at 58% 48%,rgba(104,184,255,.08),transparent), repeating-linear-gradient(90deg,transparent 0,transparent 119px,rgba(132,201,255,.018) 120px), repeating-linear-gradient(0deg,transparent 0,transparent 119px,rgba(132,201,255,.016) 120px); mask-image:linear-gradient(90deg,rgba(0,0,0,.33),#000 38%,#000 88%,rgba(0,0,0,.6));} #loginPage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 56% 95% at 50% 38%,transparent 43%,rgba(1,6,15,.26) 100%);} #loginPage .login-left{position:relative;z-index:3;width:39%;flex:0 0 39%; padding:40px clamp(25px,3.45vw,70px);} #loginPage .login-left::before{content:"SECURE ACCESS / XD LOGISTICS";position:absolute; top:clamp(26px,3.3vh,47px);left:clamp(27px,3.65vw,72px);z-index:3; color:#7c9cb8;letter-spacing:2.25px;font:600 10px ui-monospace,SFMono-Regular,Consolas,monospace; text-shadow:0 0 16px rgba(70,176,255,.18)} #loginPage .login-left::after{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px; background:linear-gradient(180deg,transparent,rgba(100,182,255,.075),transparent);pointer-events:none} #loginPage .glass-card{max-width:440px;width:100%;padding:43px 42px 33px; border-radius:30px;overflow:hidden;position:relative; background: radial-gradient(ellipse 140% 75% at -30% -10%,rgba(137,195,243,.16),transparent 67%), linear-gradient(155deg,rgba(33,59,90,.81) 0%,rgba(9,25,47,.92) 51%,rgba(7,22,42,.90) 100%); border:1px solid rgba(156,208,249,.23); box-shadow:0 37px 90px -26px rgba(0,0,0,.62),0 0 75px -30px rgba(50,154,255,.14), inset 0 1px 0 rgba(237,249,255,.30),inset 0 -1px 0 rgba(84,153,206,.12),inset 0 0 48px rgba(100,168,235,.027); backdrop-filter:blur(38px) saturate(175%);-webkit-backdrop-filter:blur(38px) saturate(175%); transition:box-shadow .35s,transform .35s ease;} #loginPage .glass-card:hover{transform:translateY(-3px);box-shadow:0 44px 95px -26px rgba(0,0,0,.68),0 0 100px -33px rgba(52,174,255,.19),inset 0 1px 0 rgba(240,248,255,.28)} #loginPage .glass-card::before{content:"";height:2px;position:absolute;top:0;left:30px;right:30px;z-index:2; background:linear-gradient(90deg,transparent,rgba(120,207,255,.34) 21%,#d0efff 52%,rgba(61,166,255,.26) 82%,transparent); box-shadow:0 0 24px rgba(92,185,255,.37)} #loginPage .glass-card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(117deg,rgba(237,249,255,.095) 0%,transparent 28%,transparent 72%,rgba(65,147,241,.025) 100%); border-radius:inherit} #loginPage .glass-card>*{position:relative;z-index:2} #loginPage .login-logo{margin-bottom:19px;width:58px;height:58px;border-radius:17px; display:grid;place-items:center;color:#eafaff;font-size:0; background:linear-gradient(145deg,rgba(78,145,215,.44),rgba(10,39,75,.77)); border:1px solid rgba(169,223,255,.41); box-shadow:inset 0 1px 0 rgba(230,250,255,.39),inset 0 -4px 12px rgba(7,44,95,.32), 0 10px 26px -8px rgba(16,122,244,.35),0 0 28px rgba(61,166,255,.12)} #loginPage .login-logo svg{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(99,211,255,.58))} #loginPage .login-superlabel{margin:0 0 9px;color:#81bbdf;font:600 10px ui-monospace,monospace;letter-spacing:2.7px} #loginPage .login-title{font-size:clamp(25px,2.25vw,31px);font-weight:750;letter-spacing:.45px; color:#edf6ff;-webkit-text-fill-color:#edf6ff;text-shadow:0 2px 21px rgba(204,231,255,.09)} #loginPage .login-sub{margin-top:10px;margin-bottom:29px;color:#9cb7d2;font-size:12.5px;line-height:1.85;font-weight:400} #loginPage .login-field{margin-bottom:18px} #loginPage .login-field label{font-size:11.5px;letter-spacing:.55px;color:#b2cce6;font-weight:550;margin-bottom:9px} #loginPage .login-field input{height:51px;border-radius:12px;padding:0 15px;font-size:14px; background:linear-gradient(135deg,rgba(2,14,30,.60),rgba(12,37,68,.69)); color:#f1f9ff;border:1px solid rgba(125,181,229,.22); box-shadow:inset 0 2px 8px rgba(0,5,17,.28),inset 0 1px 0 rgba(187,222,249,.03),0 4px 18px rgba(0,7,20,.12); backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);font-weight:500;letter-spacing:.3px} #loginPage .login-field input::placeholder{color:#66849d} #loginPage .login-field input:focus{color:#fff;background:linear-gradient(145deg,rgba(9,38,68,.91),rgba(6,31,57,.91)); border-color:#69cafa;box-shadow:0 0 0 3px rgba(38,149,233,.12),inset 0 1px 2px rgba(0,0,0,.15),0 0 17px rgba(27,144,237,.08)} #loginPage .code-row{gap:9px} #loginPage .btn-code{height:51px;border-radius:12px;padding:0 12px;flex:0 0 101px; background:linear-gradient(135deg,rgba(23,58,94,.76),rgba(14,41,72,.91)); border:1px solid rgba(85,179,244,.25);color:#9adfff;font-size:11.5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} #loginPage .btn-code:hover{background:rgba(30,90,147,.74);color:#fff;border-color:rgba(91,204,255,.56)} #loginPage .login-btn{height:54px;margin-top:1px;border:1px solid rgba(171,231,255,.43);border-radius:12px; background:linear-gradient(105deg,#1266dc 0%,#178de7 56%,#16b5f1 100%); color:#fff;letter-spacing:1.15px;font-size:14px;font-weight:700; box-shadow:0 10px 29px rgba(0,98,235,.27),0 0 34px rgba(42,165,255,.18), inset 0 1px 1px rgba(233,252,255,.47),inset 0 -1px 0 rgba(0,44,129,.6)} #loginPage .login-btn:hover{transform:translateY(-2px);filter:brightness(1.12); box-shadow:0 14px 35px rgba(0,98,235,.39),0 0 43px rgba(42,165,255,.25),inset 0 1px 0 rgba(255,255,255,.47)} #loginPage .demo-accounts{margin-top:22px;padding:15px 16px 16px;line-height:1.85;border-radius:13px; background:linear-gradient(145deg,rgba(89,146,202,.075),rgba(5,27,48,.38)); border:1px solid rgba(115,170,225,.14);color:#91a9c4;font-size:11.5px; box-shadow:inset 0 1px 0 rgba(196,233,255,.045)} #loginPage .demo-accounts b{color:#9cdefe} #loginPage .login-security{margin-top:18px;display:flex;align-items:center;gap:7px; color:#678da9;font:500 10px ui-monospace,monospace;letter-spacing:.7px} #loginPage .login-security svg{width:13px;height:13px;stroke:#72badf} #loginPage .login-right{width:61%;flex:1;z-index:2;background:none;isolation:isolate;position:relative;} #loginPage .login-right::before{z-index:0;position:absolute;inset:0;content:"";pointer-events:none; background: radial-gradient(ellipse 54% 31% at 50% 58%,rgba(16,105,192,.18) 0,transparent 87%), radial-gradient(ellipse 60% 63% at 71% 43%,rgba(43,91,145,.12),transparent 81%), linear-gradient(90deg,transparent,rgba(15,55,101,.024) 38%,rgba(0,0,0,.06));} #loginPage .login-right::after{z-index:3;position:absolute;inset:0;pointer-events:none;content:""; background:linear-gradient(180deg,rgba(2,7,18,.11),transparent 22%,transparent 77%,rgba(1,6,17,.38));} #loginPage .vehicle-photoplate{position:absolute;left:-2%;top:54%;width:107%;height:auto;display:block;transform:translateY(-50%); opacity:.96;pointer-events:none;z-index:1;filter:contrast(1.07) saturate(1.05) brightness(.99); mix-blend-mode:screen; transition:opacity 1s ease} #loginPage.twin-running .vehicle-photoplate{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s} #loginPage #carCanvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;background:transparent; touch-action:none;cursor:grab} #loginPage #carCanvas:active{cursor:grabbing} #loginPage .car-title{top:clamp(48px,6.3vh,78px);left:clamp(30px,4vw,66px);right:clamp(20px,3vw,48px); z-index:5;text-align:left;pointer-events:none} #loginPage .car-title .tech-eyebrow{color:#82abc8;font-size:10px;font-weight:600;letter-spacing:2.8px;gap:11px} #loginPage .car-title .tech-eyebrow::before{width:25px;height:2px;background:linear-gradient(90deg,#248fe5,#89e8ff);box-shadow:0 0 16px rgba(48,173,255,.7)} #loginPage .car-title h2{font-size:clamp(23px,2.45vw,37px);margin:17px 0 8px;letter-spacing:2px;font-weight:760;line-height:1.17; background:linear-gradient(112deg,#ffffff 0%,#d4ecff 38%,#8ccaff 75%,#e9f7ff 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; text-shadow:none;filter:drop-shadow(0 4px 22px rgba(86,162,248,.20))} #loginPage .car-title h2 em{font-weight:300;letter-spacing:1.3px} #loginPage .car-title p{color:#87a9c6;font-size:12px;letter-spacing:1px;margin-top:9px} #loginPage .showroom-top-tag{top:25px;right:clamp(28px,3.3vw,54px);font-size:9.5px;color:#88b6d4;letter-spacing:1.6px;z-index:6} #loginPage .showroom-top-tag .live-dot{background:#67d8ff;box-shadow:0 0 11px rgba(69,193,255,.8)} #loginPage .car-twin-index{top:clamp(163px,20vh,213px);left:clamp(30px,4vw,66px);z-index:5; color:#728ca4;font-size:9.5px;letter-spacing:1.5px;border-left-color:rgba(91,177,238,.45)} #loginPage .car-twin-index b{color:#c8ecff;font-size:11px} #loginPage .car-showroom-note{right:clamp(32px,3.2vw,56px);top:clamp(175px,21vh,231px);z-index:5} #loginPage .car-showroom-note .data-label{color:#71b5e5;font-size:9px} #loginPage .car-showroom-note .data-value{color:#d8f4ff;font-size:10px} #loginPage .car-showroom-note .data-bar{background:linear-gradient(90deg,transparent,#85e5ff)} #loginPage .car-bottom-metrics{left:clamp(32px,4vw,65px);bottom:clamp(47px,6vh,68px);z-index:6;gap:14px} #loginPage .car-bottom-metrics .metric{min-width:96px;gap:9px} #loginPage .car-bottom-metrics .metric span{color:#6e92b3;font-size:9px} #loginPage .car-bottom-metrics .metric b{color:#c9e8fb;font-size:11.5px;font-weight:540} #loginPage .car-bottom-metrics .metric+.metric{border-left-color:rgba(98,156,204,.22);padding-left:15px} #loginPage .car-tip{bottom:127px;right:clamp(24px,3.3vw,56px);z-index:6;color:#93b7d1;font-size:10.5px;letter-spacing:.5px} #loginPage .car-tip i{background:#68dafe;box-shadow:0 0 11px rgba(72,204,255,.8)} #loginPage .car-commands{right:clamp(23px,3.3vw,56px);bottom:clamp(43px,5vh,57px);z-index:7;gap:8px} #loginPage .car-commands button{padding:12px 15px;min-height:40px;border-radius:9px;font-size:11px;font-weight:650; background:linear-gradient(145deg,rgba(23,53,86,.81),rgba(8,27,53,.82)); color:#b8dcf2;border:1px solid rgba(124,189,234,.25); backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 rgba(205,236,255,.09),0 7px 20px rgba(0,3,14,.13)} #loginPage .car-commands button:hover{background:rgba(34,85,132,.84);color:#fff;border-color:rgba(126,223,255,.57)} #loginPage .car-commands .car-primary-action{color:#fff;background:linear-gradient(120deg,rgba(30,101,209,.96),rgba(16,143,214,.95)); border:1px solid rgba(137,231,255,.38);box-shadow:inset 0 1px 0 rgba(220,247,255,.26),0 7px 28px rgba(24,128,245,.25)} #loginPage .car-commands button:disabled{opacity:.38;cursor:not-allowed;transform:none} #loginPage .ambient-meter{position:absolute;z-index:4;pointer-events:none;left:8%;right:8%;bottom:18%;height:1px; background:linear-gradient(90deg,transparent,rgba(56,139,203,.12) 26%,rgba(84,179,241,.16) 50%,rgba(39,132,208,.11) 75%,transparent)} #loginPage .showroom-corner{position:absolute;z-index:4;right:clamp(30px,3.2vw,53px);bottom:clamp(177px,21vh,230px); display:flex;gap:9px;align-items:center;color:#5a819e;font:500 9px ui-monospace,monospace;letter-spacing:2.2px;pointer-events:none} #loginPage .showroom-corner i{width:16px;height:1px;background:rgba(89,172,230,.55)} #loginPage .showroom-halo{position:absolute;left:16%;right:4%;top:25%;bottom:12%;z-index:0;pointer-events:none; background:radial-gradient(ellipse 60% 45% at 50% 65%,rgba(21,118,191,.13),transparent 82%); animation:twinRoomGlow 11s ease-in-out infinite alternate} @keyframes twinRoomGlow{0%{opacity:.55;transform:scale(.96)}100%{opacity:1;transform:scale(1.035)}} #loginPage #carError{left:clamp(32px,4vw,65px);right:auto;top:auto;bottom:125px;max-width:325px;padding:7px 11px; border:1px solid rgba(91,180,250,.12);border-radius:7px;background:rgba(5,18,36,.45);color:#7a9bb5; backdrop-filter:blur(12px);font-size:10px;letter-spacing:.25px;line-height:1.5;z-index:8} #loginPage #carError[hidden]{display:none} @keyframes twinBreathe{0%,100%{opacity:.48}50%{opacity:.90}} #loginPage .showroom-top-tag .live-dot{animation:twinBreathe 2.8s ease-in-out infinite} @media(max-width:1250px){ #loginPage .login-left{width:41%;flex:0 0 41%;padding:35px 23px} #loginPage .glass-card{padding:38px 30px 31px} #loginPage .car-title{left:32px} #loginPage .car-title h2{font-size:27px} #loginPage .car-twin-index,.login-right .car-showroom-note{display:none} #loginPage .car-bottom-metrics .metric:nth-child(3){display:none} #loginPage .car-bottom-metrics{bottom:104px} #loginPage .car-commands{bottom:36px} #loginPage .car-tip{bottom:93px} } @media(max-width:960px){ #loginPage .login-left{width:44%;flex:0 0 44%;padding:32px 18px} #loginPage .glass-card{padding:32px 22px;border-radius:24px} #loginPage .login-title{font-size:24px} #loginPage .login-superlabel{font-size:9px} #loginPage .login-sub{font-size:11.5px} #loginPage .login-right{width:56%} #loginPage .car-title h2{font-size:24px;letter-spacing:.5px} #loginPage .car-commands{right:16px;left:16px;justify-content:flex-end;gap:5px} #loginPage .car-commands button{padding:9px 9px;font-size:10px} #loginPage .car-bottom-metrics{left:25px;bottom:104px} #loginPage .car-bottom-metrics .metric:nth-child(2){display:none} #loginPage .car-tip{right:17px;font-size:9px} #loginPage .vehicle-photoplate{left:-15%;width:132%} } @media(max-width:700px){ #loginPage{height:auto;min-height:100vh;position:relative;flex-direction:column;overflow:visible} #loginPage .login-left{width:100%;flex:0 0 auto;padding:87px 24px 22px;min-height:unset} #loginPage .login-left::before{top:29px;left:27px} #loginPage .glass-card{max-width:470px;padding:30px 27px 26px} #loginPage .login-right{width:100%;flex:0 0 530px;height:530px;min-height:530px} #loginPage .car-title{top:30px;left:27px} #loginPage .car-title h2{font-size:25px} #loginPage .car-bottom-metrics{bottom:104px;left:25px} #loginPage .car-commands{bottom:32px;right:21px;left:21px;justify-content:center} #loginPage .car-tip{bottom:89px;right:24px} #loginPage .vehicle-photoplate{top:52%;left:-3%;width:106%} #loginPage #carError{left:19px;right:19px;bottom:110px;max-width:none;text-align:center;font-size:9.5px} #loginPage .showroom-top-tag{top:12px;right:22px} #loginPage .showroom-corner{display:none} #loginPage .login-left::after{display:none} #app{min-height:100vh} } @media(prefers-reduced-motion:reduce){#loginPage .showroom-top-tag .live-dot,#loginPage .showroom-halo{animation:none}#loginPage .glass-card{transition:none}} /* ============================================================== XD /07 TITANIUM GLASS SHOWROOM V3 Full viewport 3D lives BEHIND the login; business UI unaffected. ============================================================== */ #loginPage{ isolation:isolate; background: radial-gradient(ellipse 42% 60% at 61% 54%,rgba(41,130,202,.19),transparent 83%), radial-gradient(ellipse 37% 57% at 20% 35%,rgba(46,102,171,.18),transparent 90%), radial-gradient(ellipse 60% 55% at 72% 105%,rgba(12,108,193,.17),transparent 84%), linear-gradient(114deg,#0b1d33 0%,#07172b 41%,#0b2037 69%,#020a16 100%); } #loginPage::before{z-index:0;opacity:.75} #loginPage .login-right{ position:absolute!important;inset:0!important;width:100%!important; height:100%!important;min-height:100%!important;z-index:1!important; flex:none!important;isolation:auto!important;pointer-events:none; overflow:hidden; } #loginPage .login-right::before{ background:radial-gradient(ellipse 56% 41% at 64% 63%,rgba(21,119,201,.12),transparent 85%), linear-gradient(90deg,rgba(13,36,64,.04) 0%,transparent 44%,rgba(0,4,12,.26) 100%); } #loginPage .login-right::after{ background:linear-gradient(180deg,rgba(2,7,18,.10),transparent 25%,transparent 70%,rgba(1,7,19,.30)); } #loginPage #carCanvas{ position:absolute!important;inset:0!important;width:100%!important;height:100%!important; pointer-events:auto;filter:contrast(1.095) saturate(1.08); } /* Back-up visual is NEVER the active 3D model; it is displayed only when the Three.js dependency cannot load. It sits behind the real glass. */ #loginPage .vehicle-photoplate{ width:min(83%,1450px);max-width:none;left:auto;right:-1.5%;top:54%; opacity:.90;transform:translateY(-50%);mix-blend-mode:screen; filter:brightness(.89) contrast(1.18) saturate(1.16); mask-image:radial-gradient(ellipse 70% 72% at 56% 51%,black 37%,rgba(0,0,0,.88) 58%,transparent 100%); } #loginPage.twin-running .vehicle-photoplate{opacity:0;visibility:hidden} #loginPage .login-left{ width:39%;flex:0 0 39%;z-index:20!important;pointer-events:none; padding:44px clamp(28px,4vw,72px); } #loginPage .login-left::before{z-index:23;color:#8ebce0;} #loginPage .glass-card{ pointer-events:auto;position:relative;z-index:30; width:100%;max-width:485px; padding:clamp(30px,3vw,45px) clamp(28px,2.9vw,44px) 32px; overflow:hidden;border-radius:36px; border:1px solid rgba(214,245,255,.37); background: radial-gradient(ellipse 96% 29% at 12% -5%,rgba(239,252,255,.26),transparent 90%), radial-gradient(ellipse 90% 80% at 115% 15%,rgba(99,181,247,.15),transparent 76%), linear-gradient(133deg,rgba(153,200,245,.17) 0%,rgba(26,63,105,.54) 17%,rgba(8,29,54,.74) 54%,rgba(9,33,58,.69) 100%); -webkit-backdrop-filter:blur(31px) saturate(205%) brightness(1.09); backdrop-filter:blur(31px) saturate(205%) brightness(1.09); box-shadow: 0 34px 85px -24px rgba(0,2,12,.65), 0 0 100px -32px rgba(50,165,245,.27), 0 0 0 .8px rgba(156,221,255,.22), inset 0 2px 1px rgba(255,255,255,.51), inset 2px 1px 2px rgba(206,246,255,.21), inset -2px -2px 7px rgba(10,63,134,.43), inset 0 0 32px rgba(143,209,255,.11); transition:box-shadow .4s,transform .4s; } #loginPage .glass-card:hover{ transform:translateY(-3px); box-shadow:0 45px 90px -25px rgba(0,3,18,.78),0 0 130px -30px rgba(72,180,255,.33), 0 0 0 1px rgba(185,232,255,.4),inset 0 2px 1px rgba(255,255,255,.55), inset 0 0 37px rgba(143,209,255,.13); } /* Chromatic multi-stop refraction around the edges. No flat neon border. */ #loginPage .glass-card::before{ content:"";position:absolute;inset:0;left:0;right:0;top:0;height:auto;z-index:1; border-radius:inherit;padding:2.5px; background:conic-gradient(from 216deg at 49% 52%, rgba(67,149,240,.08) 0deg,rgba(187,234,255,.9) 52deg, rgba(242,253,255,.96) 82deg,rgba(113,191,252,.20) 133deg, rgba(51,128,219,.08) 185deg,rgba(190,231,255,.44) 243deg, rgba(244,254,255,.85) 284deg,rgba(68,151,245,.11) 325deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none;box-shadow:none; } /* Top-left liquid highlight, curved side reflection and lower optical caustic. */ #loginPage .glass-card::after{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none; background: radial-gradient(ellipse 50% 21% at 45% 0%,rgba(244,253,255,.29),transparent 100%), linear-gradient(114deg,rgba(245,254,255,.18) 0%,rgba(255,255,255,.045) 8%,transparent 19%,transparent 80%,rgba(112,196,255,.065) 100%), radial-gradient(ellipse 8% 79% at 0% 42%,rgba(217,250,255,.18),transparent 93%), radial-gradient(ellipse 50% 11% at 66% 100%,rgba(83,173,244,.21),transparent 100%); box-shadow:inset 0 0 0 7px rgba(220,247,255,.012),inset 0 8px 14px -13px rgba(255,255,255,.85); } #loginPage .glass-card>*{position:relative;z-index:3} #loginPage .login-logo{ border:1px solid rgba(218,246,255,.6); background:linear-gradient(137deg,rgba(136,217,255,.38),rgba(11,63,117,.24)); box-shadow:inset 1px 2px 1px rgba(250,255,255,.42),inset -2px -2px 10px rgba(2,21,52,.32), 0 5px 24px rgba(45,163,255,.18),0 0 0 5px rgba(119,218,255,.028); backdrop-filter:blur(10px) } #loginPage .login-title{color:#f2fbff;-webkit-text-fill-color:#f2fbff;text-shadow:0 2px 23px rgba(190,232,255,.21)} #loginPage .login-sub{color:#adc7de} #loginPage .login-field label{color:#c7e1f5} #loginPage .login-field input{ border:1px solid rgba(164,218,252,.28); background:linear-gradient(140deg,rgba(2,21,39,.46),rgba(22,57,92,.30)); box-shadow:inset 0 1px 0 rgba(195,235,255,.16),inset 0 -4px 12px rgba(1,15,38,.22),0 4px 18px rgba(0,10,28,.09); -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px); } #loginPage .btn-code{ border:1px solid rgba(166,226,255,.37); background:linear-gradient(145deg,rgba(100,172,229,.25),rgba(8,41,79,.39)); box-shadow:inset 0 1px 0 rgba(237,253,255,.22),0 3px 13px rgba(2,16,38,.15); } #loginPage .login-btn{ border:1px solid rgba(190,239,255,.68); background:linear-gradient(112deg,#2366cc,#278ff3 54%,#52caff); box-shadow:inset 0 2px 0 rgba(240,254,255,.46),inset 0 -4px 11px rgba(1,63,157,.21), 0 8px 38px rgba(27,124,241,.42),0 0 34px rgba(44,167,255,.19); } #loginPage .demo-accounts{ border:1px solid rgba(169,218,249,.23); background:linear-gradient(142deg,rgba(140,200,245,.12),rgba(7,35,69,.18)); box-shadow:inset 0 2px 1px rgba(215,246,255,.1); color:#a7bed6;-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px); } #loginPage .login-security{color:#91bada} /* HUD is independent from the card; move left title beyond its right edge. */ #loginPage .car-title{ left:clamp(610px,45vw,870px);right:clamp(22px,3.5vw,62px); top:clamp(56px,7.8vh,98px);z-index:5; } #loginPage .car-title h2{font-size:clamp(25px,2.5vw,39px);letter-spacing:.6px;white-space:nowrap} #loginPage .car-title p{font-size:11.5px} #loginPage .car-twin-index{left:clamp(610px,45vw,870px);top:clamp(185px,21vh,236px);z-index:5} #loginPage .car-showroom-note{right:clamp(28px,3.3vw,60px);top:clamp(176px,21vh,228px)} #loginPage .car-bottom-metrics{left:clamp(610px,45vw,870px);bottom:clamp(37px,5vh,63px);z-index:5} #loginPage .car-commands{z-index:6;bottom:clamp(35px,4.7vh,60px);right:clamp(24px,3.5vw,64px)} #loginPage .car-tip{bottom:clamp(106px,12vh,152px);right:clamp(26px,3.5vw,64px)} #loginPage .showroom-top-tag{right:clamp(24px,3.5vw,64px);z-index:6} #loginPage .showroom-halo{left:36%;right:3%} #loginPage .ambient-meter{left:33%;right:4%;bottom:19%} #loginPage .showroom-corner{bottom:clamp(176px,20vh,218px)} #loginPage #carError{left:45%;right:auto;width:auto;max-width:46%;bottom:11px;top:auto;z-index:7; padding:5px 10px;font-size:9.5px;letter-spacing:.2px;background:rgba(3,14,30,.22); border:1px solid rgba(130,199,255,.12);box-shadow:none;color:#789cb5;opacity:.80} @media(max-width:1400px){ #loginPage .glass-card{padding:34px 32px 29px} #loginPage .login-left{padding-left:clamp(25px,3.3vw,60px);padding-right:15px} #loginPage .car-title{left:44%;} #loginPage .car-title h2{font-size:clamp(22px,2.6vw,35px)} #loginPage .car-twin-index{left:44%} #loginPage .car-bottom-metrics{left:44%} #loginPage .car-bottom-metrics .metric:nth-child(2){display:none} } @media(max-width:950px){ #loginPage .login-left{width:47%;flex-basis:47%;padding:36px 16px 32px} #loginPage .glass-card{padding:28px 23px 25px;border-radius:29px} #loginPage .car-title{left:49%;right:18px} #loginPage .car-title h2{white-space:normal;font-size:25px} #loginPage .car-twin-index,.login-right .car-showroom-note{display:none} #loginPage .car-bottom-metrics{display:none} #loginPage .car-commands{right:16px} #loginPage .car-tip{right:16px} #loginPage .vehicle-photoplate{width:99%;right:-12%} } @media(max-width:700px){ body{overflow:auto;height:auto;min-height:100vh} #loginPage{height:auto!important;min-height:1100px;position:relative;flex-direction:column;overflow:hidden} #loginPage .login-left{width:100%;flex:0 0 auto;padding:57px 20px 15px;z-index:20;min-height:unset} #loginPage .login-left::before{top:17px;left:23px} #loginPage .glass-card{width:100%;max-width:500px;padding:27px 25px 25px;border-radius:30px} #loginPage .login-right{position:absolute!important;inset:0!important;width:100%!important;height:100%!important} #loginPage #carCanvas{inset:420px 0 0!important;width:100%!important;height:calc(100% - 420px)!important} #loginPage .vehicle-photoplate{width:145%;top:80%;right:-24%} #loginPage .car-title{left:24px;right:20px;top:77%;} #loginPage .car-title h2{font-size:23px;white-space:normal} #loginPage .car-title p{font-size:10px} #loginPage .car-twin-index,.login-right .car-showroom-note,#loginPage .showroom-corner{display:none} #loginPage .car-tip{display:none} #loginPage .car-commands{bottom:15px;left:14px;right:14px;display:flex;justify-content:center} #loginPage .car-commands button{padding:10px 10px} #loginPage .showroom-top-tag{display:none} #loginPage .car-bottom-metrics{display:none} #loginPage #carError{right:5%;left:5%;bottom:68px;max-width:none;font-size:9px} } @media(prefers-reduced-motion:reduce){#loginPage .glass-card:hover{transform:none}} /* ============================================================ V4 — IRIDESCENT OPTICAL GLASS + HDR TITANIUM DIGITAL TWIN Entire block is LOGIN SCOPED. Business styles untouched. ============================================================ */ #loginPage { --pX:66%; --pY:48%; background: radial-gradient(ellipse 37% 40% at 67% 48%,rgba(23,112,199,.075),transparent 100%), radial-gradient(ellipse 38% 71% at 25% 45%,rgba(29,93,153,.21),transparent 86%), radial-gradient(ellipse 48% 38% at 77% 91%,rgba(23,120,219,.15),transparent 86%), linear-gradient(106deg,#061526 0%,#081b31 28%,#091b30 54%,#061528 79%,#030a17 100%); } #loginPage .login-left {width:36%;flex:0 0 36%;padding-left:clamp(28px,3.5vw,65px);padding-right:clamp(15px,2vw,34px)} #loginPage .glass-card { --glassX:26%; --glassY:8%; --glassGlow:.27; max-width:500px; border-radius:38px; padding:clamp(29px,2.7vw,43px) clamp(28px,2.85vw,46px) 29px; border:1px solid rgba(228,248,255,.50); isolation:isolate; background: radial-gradient(ellipse 100% 35% at 27% -11%,rgba(249,255,255,.24),transparent 83%), radial-gradient(ellipse 90% 73% at 109% 13%,rgba(123,210,255,.23),transparent 79%), linear-gradient(124deg,rgba(189,235,255,.25) 0%,rgba(46,104,152,.35) 11%,rgba(6,27,53,.53) 40%,rgba(5,26,52,.53) 78%,rgba(61,144,200,.30) 100%); -webkit-backdrop-filter:blur(44px) saturate(190%) contrast(117%) brightness(112%); backdrop-filter:blur(44px) saturate(190%) contrast(117%) brightness(112%); box-shadow: 0 49px 105px -24px rgba(0,4,21,.80), 0 5px 36px rgba(45,175,255,.16), 0 0 0 1px rgba(144,216,255,.14), 0 0 0 4px rgba(154,230,255,.038), inset 0 2px 2px rgba(255,255,255,.79), inset 2px 2px 5px rgba(232,252,255,.37), inset -2px -1px 5px rgba(123,222,255,.22), inset 0 -4px 13px rgba(14,102,184,.27), inset 0 0 52px rgba(158,218,255,.13); transition:transform .36s cubic-bezier(.2,.7,.3,1),box-shadow .4s; } #loginPage .glass-card:hover { transform:translateY(-3px); box-shadow:0 56px 122px -23px rgba(0,4,21,.90),0 7px 55px rgba(46,161,247,.23), 0 0 0 1px rgba(185,245,255,.38),inset 0 2px 2px rgba(255,255,255,.85), inset 2px 2px 5px rgba(236,251,255,.44),inset -2px -1px 8px rgba(122,210,254,.35), inset 0 -5px 19px rgba(24,125,209,.26),inset 0 0 66px rgba(187,234,255,.15); } #loginPage .glass-card::before { content:"";position:absolute;inset:-.5px;width:auto;height:auto;z-index:1; border-radius:inherit;padding:3.25px; background:conic-gradient(from 207deg at 51% 48%, rgba(116,187,255,.19) 0deg,rgba(248,254,255,1) 41deg, rgba(163,236,255,.77) 67deg,rgba(19,115,217,.13) 139deg, rgba(132,204,255,.22) 188deg,rgba(246,255,255,.98) 236deg, rgba(105,181,244,.21) 301deg,rgba(238,252,255,.76) 334deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; pointer-events:none;box-shadow:none; } #loginPage .glass-card::after { content:"";position:absolute;inset:0;height:auto!important;width:auto!important;border-radius:inherit;z-index:1;pointer-events:none; background: radial-gradient(ellipse 34% 18% at var(--glassX) var(--glassY),rgba(250,255,255,.16),transparent 100%), radial-gradient(ellipse 76% 19% at 46% -2%,rgba(245,252,255,.38),rgba(144,210,255,.065) 72%,transparent 98%), linear-gradient(109deg,rgba(249,255,255,.20),transparent 15%,transparent 78%,rgba(137,216,255,.09) 98%), radial-gradient(ellipse 13% 81% at -.5% 41%,rgba(221,248,255,.26),transparent 90%), radial-gradient(ellipse 66% 13% at 56% 100%,rgba(119,200,255,.32),transparent 100%); box-shadow:inset 0 0 0 7px rgba(207,246,255,.022),inset 0 11px 14px -13px rgba(255,255,255,.99), inset 0 -13px 20px -18px rgba(76,180,255,.90); } #loginPage .glass-card .glass-optic { pointer-events:none;position:absolute;inset:0;z-index:2!important;border-radius:inherit; } #loginPage .glass-card .glass-optic--sheen { background: radial-gradient(ellipse 41% 35% at var(--glassX) var(--glassY),rgba(227,248,255,.065),transparent 85%), linear-gradient(144deg,rgba(255,255,255,.13),rgba(155,221,255,.085) 12%,transparent 39%); mix-blend-mode:screen; } #loginPage .glass-card .glass-optic--edge { inset:7px; border-radius:31px; border-top:1px solid rgba(230,251,255,.39); border-left:1px solid rgba(228,251,255,.18); border-right:1px solid rgba(147,212,255,.13); border-bottom:1px solid rgba(140,204,255,.22); box-shadow:0 -5px 11px -10px #fff,inset 0 3px 16px rgba(224,246,255,.07), inset 0 -9px 15px -14px rgba(134,205,255,.56); } #loginPage .glass-card .glass-optic--caustic { inset:auto -14% -7% -10%;height:37%;border-radius:50%; background:radial-gradient(ellipse 58% 50% at var(--glassX) 80%,rgba(93,191,255,.18),transparent 92%); filter:blur(13px); } #loginPage .glass-card > *:not(.glass-optic){z-index:3} #loginPage .login-logo{ border-radius:18px; border:1px solid rgba(238,254,255,.63); background:linear-gradient(142deg,rgba(185,236,255,.37),rgba(27,95,152,.20) 61%,rgba(7,38,81,.27)); box-shadow:inset 0 2px 2px rgba(255,255,255,.64),inset -2px -3px 10px rgba(12,58,108,.39), 0 10px 32px rgba(17,146,244,.20),0 0 0 4px rgba(140,215,255,.038); } #loginPage .login-title{color:#f4fbff;-webkit-text-fill-color:#f4fbff} #loginPage .login-sub{color:#bdd7eb} #loginPage .login-field input { background:linear-gradient(130deg,rgba(1,17,34,.45),rgba(41,91,131,.27)); border:1px solid rgba(191,237,255,.32); box-shadow:inset 0 1px 1px rgba(236,251,255,.20),inset 0 -3px 14px rgba(1,15,37,.35), 0 6px 14px rgba(0,11,27,.12); } #loginPage .login-field input:focus{border-color:rgba(160,231,255,.85);box-shadow:0 0 0 3px rgba(78,187,255,.16),inset 0 1px 1px rgba(255,255,255,.19)} #loginPage .btn-code{ background:linear-gradient(133deg,rgba(173,227,255,.23),rgba(23,72,114,.26)); border-color:rgba(196,237,255,.45); box-shadow:inset 0 2px 1px rgba(248,254,255,.25),0 5px 14px rgba(2,26,51,.18); } #loginPage .login-btn { border:1px solid rgba(213,250,255,.82); background:linear-gradient(107deg,#135cc8,#1b9ced 53%,#6edaff); box-shadow:inset 0 2px 1px rgba(255,255,255,.63),inset 0 -4px 9px rgba(0,62,142,.42), 0 14px 40px rgba(18,127,235,.40),0 0 42px rgba(52,185,255,.20); } #loginPage .demo-accounts { background:linear-gradient(130deg,rgba(151,215,248,.15),rgba(5,27,56,.25)); border-color:rgba(197,237,255,.30); box-shadow:inset 0 2px 1px rgba(233,251,255,.17),inset 0 -5px 14px rgba(9,36,70,.13); } #loginPage .login-right::before { background: radial-gradient(ellipse 42% 34% at 65% 55%,rgba(64,170,245,.055),transparent 96%), linear-gradient(90deg,rgba(4,13,28,.09),transparent 31%,rgba(3,9,21,.18)); } #loginPage #carCanvas{filter:none!important} #loginPage .vehicle-photoplate { width:min(67%,1220px);right:1.6%;top:56%;opacity:.94; filter:brightness(.96) contrast(1.13) saturate(1.06); } #loginPage .car-title {top:clamp(58px,7.4vh,94px);left:clamp(590px,42vw,800px)} #loginPage .car-title h2{font-size:clamp(23px,2.3vw,38px)} #loginPage .car-twin-index{left:clamp(590px,42vw,800px)} #loginPage .car-bottom-metrics{left:clamp(590px,42vw,800px)} #loginPage .car-tip{bottom:clamp(112px,13vh,158px)} /* The login is always in front; pointer capture remains in the vehicle-only area. */ #loginPage .login-left{z-index:30!important} #loginPage .login-right{z-index:1!important} #loginPage .glass-card{z-index:40} #loginPage .car-commands button { border:1px solid rgba(155,219,255,.37); box-shadow:inset 0 1px 1px rgba(232,252,255,.18),0 8px 29px rgba(0,5,20,.18); } #loginPage .car-commands button:focus-visible,.login-btn:focus-visible{outline:2px solid #abecff;outline-offset:3px} @media(max-width:1350px){ #loginPage .car-title{left:42%} #loginPage .car-twin-index{left:42%} #loginPage .car-bottom-metrics{left:42%} #loginPage .glass-card{padding:32px 30px 28px} #loginPage .login-left{padding-left:clamp(21px,3vw,49px)} } @media(max-width:950px){ #loginPage .login-left{width:44%;flex-basis:44%;padding:27px 15px} #loginPage .glass-card{padding:26px 22px 25px;border-radius:29px} #loginPage .car-title{left:47%} #loginPage .car-title h2{font-size:25px;white-space:normal} #loginPage .vehicle-photoplate{width:78%;right:-11%} } @media(max-width:700px){ #loginPage .login-left{width:100%;flex-basis:auto;padding:56px 19px 17px} #loginPage .glass-card{max-width:490px;padding:27px 26px 24px;border-radius:31px} #loginPage{min-height:1250px!important} #loginPage .car-title{top:1107px;left:23px;right:18px} #loginPage .car-title .tech-eyebrow{display:none} #loginPage .car-title h2{font-size:19px;margin:0 0 5px} #loginPage .car-title p{font-size:10px;margin:0} #loginPage .vehicle-photoplate{width:148%;right:-29%;top:76%} #loginPage .glass-card .glass-optic--edge{border-radius:24px} } @media(prefers-reduced-motion:reduce){ #loginPage .glass-optic--sheen,#loginPage .glass-card{transition:none!important} } /* V5 | Reference-calibrated silver / true photo-studio illumination */ #loginPage {background: radial-gradient(ellipse 42% 56% at 63% 59%,rgba(31,92,154,.11),transparent 88%), linear-gradient(107deg,#091728 0%,#0a1c30 35%,#0a1c31 68%,#040b18 100%);} #loginPage .login-right::before {background: radial-gradient(ellipse 54% 48% at 75% 55%,rgba(40,116,185,.073),transparent 84%), linear-gradient(90deg,rgba(8,23,41,.02),transparent 36%,rgba(3,10,23,.2));} #loginPage .vehicle-photoplate {mix-blend-mode:normal;filter:brightness(.99) contrast(1.04) saturate(.96);opacity:.96} /* Stable, optical edge highlights. Only the very soft INNER reflection follows the pointer. */ #loginPage .glass-card { border-color:rgba(222,244,255,.55); background: radial-gradient(ellipse 100% 23% at 31% -8%,rgba(245,252,255,.28),transparent 93%), linear-gradient(126deg,rgba(169,209,239,.24) 0%,rgba(39,85,128,.37) 15%, rgba(9,28,54,.54) 45%,rgba(7,27,53,.58) 79%,rgba(48,108,161,.28) 100%); box-shadow:0 34px 81px -22px rgba(0,4,17,.70), 0 0 85px -41px rgba(112,196,244,.20), inset 0 2px 1px rgba(247,254,255,.64), inset 2px 0 4px rgba(203,239,255,.18), inset -2px -2px 5px rgba(19,91,154,.26), inset 0 -10px 19px -16px rgba(147,222,255,.57); } #loginPage .glass-card::after { background:radial-gradient(ellipse 26% 16% at var(--glassX) var(--glassY),rgba(250,255,255,.14),transparent 100%), radial-gradient(ellipse 70% 17% at 40% -2%,rgba(248,254,255,.33),transparent 95%), linear-gradient(107deg,rgba(250,254,255,.13),transparent 17%,transparent 80%,rgba(171,218,245,.08)), radial-gradient(ellipse 16% 81% at -1% 48%,rgba(209,244,255,.19),transparent 85%); box-shadow:inset 0 0 0 6px rgba(231,249,255,.028), inset 0 10px 16px -13px rgba(255,255,255,.89); } #loginPage #carError {font-size:11px;max-width:75%;border-color:rgba(165,219,255,.28); color:#c5e3f9;background:rgba(2,14,29,.71);opacity:1;line-height:1.7;} /* ==================================================================== XD / 07 — UNIFIED TITANIUM GLASS DESIGN SYSTEM | V6 Post-login experience only. Original business logic, DOM IDs and login-page styling remain unchanged. Styled selectors include dialogs. ==================================================================== */ #app, #modalRoot, #toastRoot { --xd-night:#061323; --xd-void:#020b17; --xd-navy:#0a1d35; --xd-glass:rgba(13,34,59,.74); --xd-glass-2:rgba(23,54,84,.54); --xd-ice:#a5e6ff; --xd-cyan:#67cfff; --xd-blue:#238cf2; --xd-ink:#e9f5ff; --xd-soft:#a8c2d9; --xd-dim:#7295b3; --xd-line:rgba(148,207,250,.19); --xd-line-hi:rgba(174,226,255,.42); --xd-shine:inset 0 1px 0 rgba(234,251,255,.22), inset 0 -1px 0 rgba(42,117,189,.12); --xd-shadow:0 22px 62px -28px rgba(0,4,14,.67),0 9px 27px -17px rgba(13,111,204,.15); color:var(--xd-ink); color-scheme:dark; } #app *,#modalRoot * {scrollbar-color:rgba(101,171,227,.38) rgba(4,16,32,.19);scrollbar-width:thin} #app ::selection,#modalRoot ::selection{background:rgba(54,153,236,.51);color:#fff} #app { position:relative;isolation:isolate;overflow:hidden; background:radial-gradient(ellipse 65% 68% at 75% 42%,rgba(22,79,138,.22),transparent 75%), radial-gradient(ellipse 62% 75% at 8% 105%,rgba(16,87,166,.18),transparent 81%), linear-gradient(112deg,#0a1c33 0%,#071629 44%,#081b31 68%,#020a17 100%); } #app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(139,199,255,.022) 120px), repeating-linear-gradient(0deg,transparent 0 119px,rgba(139,199,255,.017) 120px), radial-gradient(ellipse 44% 34% at 80% 18%,rgba(83,181,250,.06),transparent 88%); mask-image:linear-gradient(90deg,transparent 2%,#000 34%,#000 95%);} #app::after{content:"";position:absolute;left:22%;right:3%;top:0;height:1px;z-index:1;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(134,211,255,.20),transparent)} #app>.sidebar,#app>.main{position:relative;z-index:2} #app .sidebar { width:248px;flex:0 0 248px;margin:16px 0 16px 16px; background:radial-gradient(ellipse 100% 42% at 11% 0%,rgba(94,157,218,.19),transparent 90%), linear-gradient(157deg,rgba(25,55,86,.80),rgba(6,24,46,.91) 53%,rgba(5,22,42,.94)); border:1px solid rgba(159,212,248,.26);border-radius:26px; -webkit-backdrop-filter:blur(32px) saturate(155%);backdrop-filter:blur(32px) saturate(155%); box-shadow:var(--xd-shadow),inset 0 1px 0 rgba(238,251,255,.27),inset -1px 0 0 rgba(80,165,236,.08); padding:25px 16px 16px; } #app .sidebar::before{content:"";pointer-events:none;position:absolute;inset:0;border-radius:inherit;padding:1.4px; background:linear-gradient(148deg,rgba(238,253,255,.56) 0%,rgba(124,203,255,.12) 26%,transparent 65%,rgba(143,219,255,.22) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude} #app .brand{padding:4px 8px 23px;border-bottom:1px solid rgba(142,209,255,.12);margin-bottom:12px;align-items:center} #app .brand .logo{ background:linear-gradient(136deg,rgba(117,203,255,.31),rgba(8,43,82,.90)); color:#b4e8ff;border:1px solid rgba(186,238,255,.56);border-radius:13px; box-shadow:inset 0 1px 0 rgba(242,252,255,.40),inset 0 -5px 10px rgba(7,41,87,.32),0 0 25px rgba(73,169,250,.16); } #app .brand h1{font-size:14px;letter-spacing:.45px;color:#f3fbff;font-weight:700} #app .brand p{color:var(--xd-dim);font-size:10.5px;letter-spacing:.32px;margin-top:5px} #app .brand::after{content:"XD / AUTONOMOUS";position:absolute;left:26px;top:82px; font:600 8px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.55px;color:rgba(113,186,231,.49);pointer-events:none} #app .nav{gap:5px;margin-top:12px;padding:0 0 10px} #app .nav-item{ color:#96b4ce;border-radius:13px;padding:12px 13px;border:1px solid transparent; font-weight:530;font-size:12.8px;letter-spacing:.15px;position:relative;margin:0; transition:background .2s,color .2s,border-color .2s,box-shadow .2s; } #app .nav-item .ico{font-size:15px;color:#7cabca} #app .nav-item:hover{background:rgba(101,162,215,.09);color:#f1f9ff;border-color:rgba(158,216,255,.14)} #app .nav-item.active{background:linear-gradient(105deg,rgba(29,104,195,.33),rgba(59,149,222,.10)); border-color:rgba(131,204,255,.38);color:#f4fcff; box-shadow:inset 0 1px 0 rgba(229,246,255,.11),0 9px 27px -17px rgba(46,151,251,.35)} #app .nav-item.active::before{content:"";position:absolute;left:-1px;top:24%;bottom:24%;width:3px;border-radius:5px; background:#78ddff;box-shadow:0 0 12px rgba(70,193,255,.73)} #app .nav-item.active .ico{color:#99e8ff} #app .nav-badge{margin-left:auto;min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 4px; border-radius:6px;background:rgba(65,162,246,.20);color:#b5ecff;font-size:10px} #app .side-foot{margin-top:auto;padding:17px 13px 14px;border-radius:16px; background:linear-gradient(145deg,rgba(91,160,222,.11),rgba(4,24,44,.36)); border:1px solid rgba(136,200,244,.19);box-shadow:inset 0 1px 0 rgba(226,247,255,.10)} #app .side-foot .nm{color:#daefff;font-size:12px;line-height:1.6} #app .side-foot .st{color:#8de0bd;font-size:11px;line-height:1.55} #app .main{padding:16px 18px 0 18px;min-width:0} #app .topbar { background:radial-gradient(ellipse 74% 140% at 16% -49%,rgba(171,220,255,.13),transparent 88%), linear-gradient(112deg,rgba(31,63,95,.66),rgba(10,34,61,.66)); height:66px;min-height:66px;border-radius:19px;margin-bottom:17px; border:1px solid rgba(154,213,250,.24);box-shadow:var(--xd-shine),0 10px 35px -21px rgba(0,3,14,.75); -webkit-backdrop-filter:blur(29px) saturate(165%);backdrop-filter:blur(29px) saturate(165%); } #app .crumb{color:var(--xd-dim);font-size:12.5px;letter-spacing:.45px} #app .crumb::before{content:"▰";display:inline-block;margin-right:11px;color:var(--xd-cyan);font-size:12px;filter:drop-shadow(0 0 5px rgba(75,185,255,.46))} #app .crumb b{color:#ecf9ff;font-weight:670} #app .sync-tip{background:rgba(26,90,113,.20);border:1px solid rgba(94,211,206,.23); color:#9de5d7;font-size:11.3px;box-shadow:inset 0 1px 0 rgba(161,251,227,.05)} #app .sync-tip .pulse{background:#66e3c4;box-shadow:0 0 14px rgba(65,234,198,.48)} #app .user-menu-trigger{color:#e6f6ff;border-radius:12px;border:1px solid transparent} #app .user-menu-trigger:hover{background:rgba(113,184,240,.14);border-color:rgba(151,218,255,.23)} #app #topName{color:#e9f6ff!important} #app .avatar,#app .u-avatar{color:#eefaff;background:linear-gradient(125deg,rgba(74,151,228,.55),rgba(14,57,105,.87)); border:1px solid rgba(174,221,253,.3);box-shadow:inset 0 1px 0 rgba(240,254,255,.19)} #app .user-dropdown{background:linear-gradient(144deg,rgba(34,71,107,.97),rgba(7,27,49,.98)); border:1px solid rgba(160,222,255,.31);box-shadow:0 24px 65px rgba(0,3,14,.60),inset 0 1px 0 rgba(235,250,255,.20); -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px)} #app .dropdown-title{color:#8db2d1} #app .user-option{border:1px solid transparent} #app .user-option:hover{background:rgba(105,181,237,.12);border-color:rgba(145,216,255,.16)} #app .user-option.active{background:rgba(37,130,223,.20);border-color:rgba(113,200,255,.33)} #app .user-option .u-name{color:#e7f6ff} #app .user-option .u-role{color:#91b2cd} #app .divider{background:rgba(130,196,245,.14)} #app .logout-btn{color:#ffa9a9} #app .logout-btn:hover{background:rgba(255,112,129,.13)} #app .content{position:relative;padding:20px 1px 28px;color:#ddefff;scrollbar-gutter:stable} #app .content::before{content:"XD / AUTONOMOUS LOGISTICS · CONTROL CENTER";display:block; margin:0 0 15px 4px;color:#7faccc;letter-spacing:2.1px;font:600 10px ui-monospace,SFMono-Regular,Consolas,monospace} #app .content::after{content:"";display:block;height:14px} /* Main glass components: preserve the fine refractive edge used on the login card. */ #app .card,#app .stat { position:relative;overflow:hidden; border-radius:21px; color:var(--xd-ink); background: radial-gradient(ellipse 90% 46% at 12% -20%,rgba(171,220,255,.14),transparent 89%), linear-gradient(139deg,rgba(35,72,106,.69),rgba(10,30,53,.81) 55%,rgba(9,29,55,.71))!important; border:1px solid rgba(155,214,252,.26)!important; box-shadow:var(--xd-shadow),inset 0 1px 0 rgba(243,253,255,.24),inset -1px -1px 0 rgba(82,155,221,.09)!important; -webkit-backdrop-filter:blur(24px) saturate(167%);backdrop-filter:blur(24px) saturate(167%); } #app .card::before,#app .stat::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit; background:linear-gradient(124deg,rgba(255,255,255,.10) 0%,transparent 14%,transparent 78%,rgba(93,176,250,.025)); box-shadow:inset 0 1px 0 rgba(234,252,255,.07)} #app .card::after,#app .stat::after{background:radial-gradient(430px circle at var(--mx,50%) var(--my,50%),rgba(128,207,255,.075),transparent 62%)} #app .card:hover::after,#app .stat:hover::after{opacity:1} #app .stat:hover{transform:translateY(-2px);box-shadow:0 24px 51px -23px rgba(0,3,16,.68),0 0 35px -24px rgba(52,157,250,.28)!important} #app .stat{min-height:135px;padding:21px 20px} #app .stat .lb{font-size:11.5px;color:#a0c1de;font-weight:550;gap:9px} #app .stat .lb span{color:#92dcff;font-size:18px;line-height:1} #app .stat .vl{color:#f2fbff;font-size:clamp(21px,2vw,30px);font-weight:760;letter-spacing:-.8px; text-shadow:0 1px 24px rgba(163,220,255,.085)} #app .stat .sb{color:#7fa3bf;font-size:11px;line-height:1.5} #app .card-h{padding:18px 21px;min-height:62px;border-bottom:1px solid rgba(149,206,249,.16); background:linear-gradient(90deg,rgba(124,203,250,.05),transparent 75%)} #app .card-h h3{font-size:14px;color:#f2f9ff;font-weight:680;letter-spacing:.2px} #app .card-h h3::before{content:"";display:inline-block;width:3px;height:14px;border-radius:8px;margin-right:9px; background:linear-gradient(#b5f0ff,#2696e7);box-shadow:0 0 10px rgba(66,182,255,.38)} #app .card-h .hint,#app .hint{color:#83a7c3;font-size:11px;font-weight:430;letter-spacing:0} #app .card-b{padding:20px 21px} #app .grid-4,#app .grid-5,#app .grid-2,#app .stack{gap:15px} #app .grid-2{grid-template-columns:minmax(0,1.6fr) minmax(330px,1fr)} #app .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} #app .grid-5{grid-template-columns:repeat(5,minmax(0,1fr))} #app .mt16{margin-top:16px} #app .mono,#modalRoot .mono{color:#afd4ef;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px} #app .strong,#modalRoot .strong{color:#e6f4ff} #app .sub,#modalRoot .sub{color:#86a8c2;font-size:11.5px;line-height:1.65} #app .sec-title,#modalRoot .sec-title{color:#cfeaff;font-weight:680;font-size:13px;gap:9px} #app .sec-title::before,#modalRoot .sec-title::before{content:"";width:3px;height:13px;border-radius:4px;background:#69cfff;box-shadow:0 0 9px #379fe866} #app .filter-bar{background:linear-gradient(140deg,rgba(34,73,108,.66),rgba(7,31,57,.72)); border:1px solid rgba(150,210,255,.24);border-radius:16px;box-shadow:inset 0 1px 0 rgba(243,252,255,.17),var(--xd-shadow); -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);padding:12px 16px;margin-bottom:17px} #app .filter-label{color:#a8c9e1;font-size:11.5px} #app .chip-filter,#app .tab{color:#94b4ce;border:1px solid rgba(140,204,247,.15);background:rgba(66,128,188,.09)} #app .chip-filter:hover,#app .tab:hover{color:#e6f7ff;background:rgba(97,172,238,.16);border-color:rgba(144,216,255,.38)} #app .chip-filter.active,#app .tab.active{color:#f1fcff;background:linear-gradient(117deg,rgba(31,108,206,.82),rgba(24,153,222,.70)); border:1px solid rgba(148,225,255,.49);box-shadow:inset 0 1px 0 rgba(235,253,255,.23),0 5px 17px -8px rgba(48,157,255,.42)} #app .tabs{padding:12px 18px 0;border-bottom:1px solid rgba(133,202,247,.18);gap:7px} #app .tab{border-radius:9px 9px 0 0;padding:8px 13px;font-size:12px} #app .tab.active{border-bottom:2px solid #a6eeff} #app .data-base-tip{margin-left:auto;background:rgba(15,51,86,.65);border:1px solid rgba(124,192,238,.18);color:#8cb5d1} #app .tbl,#modalRoot .tbl{width:100%;color:#d5e9f9;font-size:12.4px;border-collapse:separate;border-spacing:0} #app .tbl th,#modalRoot .tbl th{ background:rgba(82,147,204,.095);color:#9fbfda;font-size:11px;font-weight:630; letter-spacing:.35px;border-bottom:1px solid rgba(134,206,252,.18); padding:13px 12px;white-space:nowrap} #app .tbl td,#modalRoot .tbl td{color:#d6eaf8;border-bottom:1px solid rgba(123,188,240,.115);padding:14px 12px; font-size:12px;line-height:1.65} #app .tbl tbody tr:hover,#modalRoot .tbl tbody tr:hover{background:rgba(83,164,235,.10)} #app .tbl tbody tr:last-child td,#modalRoot .tbl tbody tr:last-child td{border-bottom:0} #app .tbl.mini td,#modalRoot .tbl.mini td{padding:9px 10px} #app .tbl .mono,#modalRoot .tbl .mono{color:#afd8f3} #app .btn,#modalRoot .btn{ border-radius:10px;border:1px solid rgba(157,215,255,.28);color:#cbe9fa; background:linear-gradient(140deg,rgba(71,137,199,.18),rgba(14,48,83,.69)); font-weight:640;font-size:12.3px;box-shadow:inset 0 1px 0 rgba(234,252,255,.12),0 7px 20px -12px rgba(0,4,18,.35); transition:transform .18s,border-color .18s,background .18s,box-shadow .18s; } #app .btn:hover,#modalRoot .btn:hover{background:linear-gradient(125deg,rgba(80,158,222,.32),rgba(17,69,112,.86)); border-color:rgba(166,233,255,.55);color:#fff} #app .btn-pri,#modalRoot .btn-pri{ color:#fff;border:1px solid rgba(185,237,255,.52); background:linear-gradient(112deg,#1a61c2,#268ce4 55%,#3ab6ee); box-shadow:inset 0 1px 0 rgba(239,253,255,.33),0 8px 23px -8px rgba(23,110,239,.39)} #app .btn-pri:hover,#modalRoot .btn-pri:hover{ color:#fff;filter:brightness(1.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.43),0 10px 29px -8px rgba(33,137,251,.48)} #app .btn-gh,#modalRoot .btn-gh{background:linear-gradient(120deg,rgba(89,148,204,.16),rgba(7,33,62,.61));color:#c5e2f8; border-color:rgba(139,205,254,.24)} #app .btn-sm,#modalRoot .btn-sm{font-size:11.5px;padding:7px 12px} #app .btn:disabled,#modalRoot .btn:disabled{opacity:.42} #app .in,#modalRoot .in,#app #chatInput { color:#e9f8ff;background:linear-gradient(137deg,rgba(3,20,39,.69),rgba(15,49,80,.67)); border:1px solid rgba(133,194,235,.26);border-radius:10px; box-shadow:inset 0 1px 0 rgba(211,242,255,.075),inset 0 3px 9px rgba(0,7,23,.24); -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px); font-size:12.7px;outline:none} #app .in:focus,#modalRoot .in:focus,#app #chatInput:focus{ background:rgba(12,42,73,.93);border-color:#6bcbff; box-shadow:0 0 0 3px rgba(58,154,236,.14),inset 0 1px 0 rgba(235,251,255,.1)} #app .in:disabled,#modalRoot .in:disabled{background:rgba(29,51,74,.38);color:#9cb8d0;border-color:rgba(151,207,243,.16);opacity:.98} #app .in::placeholder,#modalRoot .in::placeholder,#app #chatInput::placeholder{color:#668eac} #app input[type="date"],#modalRoot input[type="date"]{color-scheme:dark} #app select.in,#modalRoot select.in{background-color:rgba(12,37,65,.89);color-scheme:dark} #app select.in option,#modalRoot select.in option{background:#0b2743;color:#d9efff} #app select[multiple].in,#modalRoot select[multiple].in{background-image:none} #app .fld>span,#modalRoot .fld>span{color:#acc8e2;font-size:11.9px} #app .summary,#modalRoot .summary{background:linear-gradient(135deg,rgba(75,148,210,.13),rgba(12,42,75,.37)); border:1px dashed rgba(133,212,255,.29);border-radius:14px} #app .sum-item>span,#modalRoot .sum-item>span{color:#8fb0ca} #app .sum-item>b,#modalRoot .sum-item>b{color:#e5f8ff;font-size:13.5px} #app .todo{background:linear-gradient(120deg,rgba(64,126,180,.13),rgba(11,40,74,.37)); border:1px solid rgba(137,204,249,.17);border-radius:12px;color:#d9efff;box-shadow:inset 0 1px 0 rgba(228,247,255,.06)} #app .todo:hover{border-color:rgba(148,220,255,.43);background:rgba(71,150,212,.15);transform:translateX(2px)} #app .todo .ic{border:1px solid rgba(139,219,255,.21);color:#98dfff!important;background:rgba(65,134,201,.19)!important} #app .todo .tt{color:#dff4ff;font-size:12.5px} #app .todo .dd{color:#8aabc5;font-size:11.5px} #app .todo .ar{color:#6ebfef} #app .timeline::before,#modalRoot .timeline::before{background:linear-gradient(#75cafe,rgba(61,128,185,.16))} #app .tl-item::before,#modalRoot .tl-item::before{background:#0b2849;border:3px solid #6caee8;box-shadow:0 0 0 4px rgba(67,151,230,.07)} #app .tl-item.ok::before,#modalRoot .tl-item.ok::before{border-color:#62ddbc} #app .tl-item.bad::before,#modalRoot .tl-item.bad::before{border-color:#fa929c} #app .tl-item .tt,#modalRoot .tl-item .tt{color:#e0f4ff} #app .tl-item .td,#modalRoot .tl-item .td{color:#a0b8d1} #app .tl-item .tm,#modalRoot .tl-item .tm{color:#7096b4} #app .station-chip{background:rgba(55,146,229,.16);color:#a8ddff;border-color:rgba(126,207,255,.28)} #app .station-chip .st-dot{background:#7ed5ff} #app .station-opt,#modalRoot .station-opt,#app .role-check,#modalRoot .role-check{ background:rgba(52,112,173,.13);color:#b8d4e9;border:1px solid rgba(128,196,249,.21);border-radius:10px} #app .station-opt:hover,#modalRoot .station-opt:hover{background:rgba(83,151,208,.2);border-color:rgba(128,210,255,.43)} #app .station-opt:has(input:checked),#modalRoot .station-opt:has(input:checked),#app .role-check:has(input:checked),#modalRoot .role-check:has(input:checked){ background:rgba(42,135,226,.23);border-color:rgba(123,216,255,.60);color:#d8f3ff} #app input[type="checkbox"],#modalRoot input[type="checkbox"]{accent-color:#48b5ff} /* Semantic status accents — legible on the dark liquid glass. */ #app .badge,#modalRoot .badge{border:1px solid transparent;font-size:11px;font-weight:590;padding:4px 10px; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} #app .b-ok,#modalRoot .b-ok{background:rgba(31,154,124,.20);color:#99f0d1;border-color:rgba(94,231,185,.27)} #app .b-info,#modalRoot .b-info{background:rgba(40,136,243,.23);color:#a9dcff;border-color:rgba(122,201,255,.30)} #app .b-run,#modalRoot .b-run{background:rgba(108,112,240,.20);color:#c0c5ff;border-color:rgba(173,174,255,.26)} #app .b-warn,#modalRoot .b-warn{background:rgba(206,130,32,.19);color:#ffd28f;border-color:rgba(250,193,93,.25)} #app .b-bad,#modalRoot .b-bad{background:rgba(198,70,81,.20);color:#ffb5bf;border-color:rgba(252,143,157,.28)} #app .b-mute,#modalRoot .b-mute{background:rgba(111,147,179,.16);color:#b5cfe0;border-color:rgba(161,200,229,.20)} #app .b-cyan,#modalRoot .b-cyan{background:rgba(42,176,209,.16);color:#a0eff6;border-color:rgba(124,227,246,.26)} #app .text-bad,#modalRoot .text-bad{color:#ffaab5!important} #app .text-ok,#modalRoot .text-ok{color:#81efd1!important} #app .empty,#modalRoot .empty{padding:44px 20px;color:#80a6c3;text-align:center;line-height:1.8} #app .empty .big,#modalRoot .empty .big{display:block;color:#6bd1ff;font-size:35px;opacity:.65;margin-bottom:8px} /* CSS-only bridge for a few legacy dynamically generated inline light panels. */ #app .content [style*="background:rgba(255,255,255"], #modalRoot .modal [style*="background:rgba(255,255,255"]{ background:linear-gradient(125deg,rgba(67,134,190,.14),rgba(8,39,70,.34))!important; border-color:rgba(147,207,248,.19)!important; } #app .content [style*="background:#f8fafc"],#modalRoot .modal-b[style*="background:#f8fafc"]{ background:rgba(8,27,49,.7)!important} #app .content [style*="color:#1e40af"],#app .content [style*="color:#1d4ed8"],#app .content [style*="color:#4338ca"]{ color:#9ddcff!important} #app .content [style*="color:#475569"],#app .content [style*="color:#64748b"]{color:#9abbd6!important} #app .content [style*="color:#0f172a"]{color:#eaf7ff!important} /* Tickets are generated with inline styles; style their container and bubbles. */ #app .ticket-item{border-color:rgba(151,208,248,.08)!important;color:#c3def2;background:transparent!important} #app .ticket-item:hover{background:rgba(91,170,232,.10)!important;border-color:rgba(141,221,255,.24)!important} #app .ticket-item.active{background:linear-gradient(117deg,rgba(39,132,229,.28),rgba(18,59,99,.43))!important; border:1px solid rgba(141,221,255,.40)!important;box-shadow:inset 0 1px 0 rgba(234,251,255,.12)} #app #chatMsgs{background:linear-gradient(150deg,rgba(2,19,39,.39),rgba(14,44,76,.21))!important} #app #chatMsgs [style*="background:rgba(255,255,255,0.7)"]{ background:rgba(49,88,125,.62)!important;color:#e6f5ff!important; border-color:rgba(154,213,248,.26)!important} #app #chatInput{font-family:inherit!important;min-height:44px} /* Modals: match login glass, with strong separation from the background. */ #modalRoot .overlay{background:rgba(1,7,18,.67);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} #modalRoot .modal{ background:radial-gradient(ellipse 76% 33% at 0% 0%,rgba(127,193,243,.18),transparent 87%), linear-gradient(139deg,rgba(28,63,97,.96),rgba(7,27,50,.98) 60%,rgba(7,26,46,.97)); border:1px solid rgba(168,226,255,.39);border-radius:25px;color:#e8f6ff; -webkit-backdrop-filter:blur(42px) saturate(166%);backdrop-filter:blur(42px) saturate(166%); box-shadow:0 40px 110px rgba(0,3,14,.75),inset 0 2px 1px rgba(225,250,255,.29),inset 0 -2px 1px rgba(90,165,221,.12)} #modalRoot .modal-h{border-bottom:1px solid rgba(137,199,241,.21);background:rgba(101,179,236,.052)} #modalRoot .modal-h h3{color:#f3fbff;font-size:15px} #modalRoot .modal-b{color:#cfe8f8} #modalRoot .modal-f{background:rgba(8,27,47,.61);border-top:1px solid rgba(133,202,248,.20)} #modalRoot .x{background:rgba(104,163,209,.15);border:1px solid rgba(153,212,245,.20);color:#bfdef3} #modalRoot .x:hover{background:rgba(95,165,226,.29);color:#fff} #modalRoot .modal .sub,#modalRoot .modal .hint{color:#88abc6} #modalRoot .modal [style*="color:#64748b"]{color:#9cbcd6!important} #modalRoot canvas[data-qr],#modalRoot .qr-mini{background:#fff!important;color-scheme:light} #modalRoot .photo-thumb,#app .photo-thumb{border-color:rgba(163,221,253,.26)} /* Toast follows the same cobalt/glass language. */ #toastRoot .toast{background:linear-gradient(130deg,rgba(23,65,104,.97),rgba(7,27,49,.97)); color:#effaff;border:1px solid rgba(145,221,255,.39);border-left:3px solid #65e1c2; border-radius:13px;box-shadow:0 18px 49px rgba(0,4,18,.51),inset 0 1px 0 rgba(242,253,255,.21)} #toastRoot .toast.bad{border-left-color:#ff879c} /* Accessible focus & motion. */ #app :is(button,.nav-item,.chip-filter,.tab,.todo,.user-menu-trigger,.ticket-item):focus-visible, #modalRoot :is(button,input,select,textarea):focus-visible{outline:2px solid #90e4ff;outline-offset:3px} @media(max-width:1350px){ #app .grid-5{grid-template-columns:repeat(3,minmax(0,1fr))} #app .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} #app .grid-2{grid-template-columns:minmax(0,1fr)} #app .stat{min-height:118px} } @media(max-width:1000px){ #app .sidebar{width:217px;flex-basis:217px;padding:20px 10px 14px} #app .nav-item{font-size:11.8px;padding:10px 10px} #app .main{padding:13px 12px 0} #app .topbar{padding:0 14px} #app .grid-5{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:700px){ #app{height:auto;min-height:100dvh;overflow:visible;flex-direction:column} #app .sidebar{height:auto;width:auto;flex:0 0 auto;margin:10px 12px 0;padding:13px 13px 8px;border-radius:19px} #app .brand{padding:0 3px 10px;margin-bottom:3px;border-bottom:0} #app .brand::after{display:none} #app .brand .logo{height:36px;width:36px;font-size:13px} #app .nav{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin-top:2px;padding-bottom:5px} #app .nav-item{white-space:nowrap;flex:none;padding:10px 11px;font-size:11px} #app .nav-item.active::before{left:22%;right:22%;top:auto;bottom:0;width:auto;height:2px} #app .side-foot{display:none} #app .main{padding:11px 12px 0} #app .topbar{height:auto;min-height:62px;padding:12px 14px;gap:12px;flex-wrap:wrap;margin-bottom:8px} #app .topbar-right{margin-left:auto;gap:8px} #app .sync-tip{font-size:10px;padding:6px 7px} #app .content{padding:15px 1px 24px;overflow:visible;scrollbar-gutter:auto} #app .content::before{font-size:9px;letter-spacing:1.2px;margin-bottom:13px} #app .grid-5,#app .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #app .stat{padding:16px 14px;min-height:116px;border-radius:16px} #app .stat .vl{font-size:21px;word-break:break-word} #app .grid-2{grid-template-columns:minmax(0,1fr)} #app .card{border-radius:17px} #app .card-h{padding:14px 15px} #app .card-b{padding:15px} #app .filter-bar{gap:8px;padding:12px} #app .filter-bar .data-base-tip{margin-left:0} #app .form-grid{grid-template-columns:minmax(0,1fr)} #app .station-grid{grid-template-columns:minmax(0,1fr)} #app .content [style*="grid-template-columns:320px 1fr"]{grid-template-columns:1fr!important;height:auto!important;min-height:unset!important} #app .content [style*="grid-template-columns:320px 1fr"]>.card:first-child{max-height:310px;min-height:240px} #app .content [style*="grid-template-columns:320px 1fr"]>.card:last-child{min-height:520px} #modalRoot .overlay{padding:10px;align-items:center} #modalRoot .modal{max-height:94dvh;border-radius:18px} #modalRoot .modal-h,#modalRoot .modal-b{padding:16px} #modalRoot .modal-f{padding:13px 14px;flex-wrap:wrap} } @media(max-width:395px){ #app .grid-5,#app .grid-4{grid-template-columns:1fr 1fr} #app .topbar-right .sync-tip{display:none} #app .stat .vl{font-size:19px} #app .content::before{font-size:8px} } @media(prefers-reduced-motion:reduce){#app .card,#app .stat,#app .btn,#app .nav-item{transition:none!important}} /* V6 responsive finishing: date filter and data density remain usable at 390px. */ @media(max-width:700px){ #app .filter-bar>span[style*="display:flex"]{flex:1 1 100%;min-width:0;max-width:100%;flex-wrap:wrap;margin-left:0!important;gap:7px!important} #app .filter-bar input[type="date"].in{width:112px!important;min-width:0;flex:1 1 104px;font-size:11px} #app .filter-bar .btn{flex:0 0 auto} #app .card:has(.tbl) [style*="overflow:auto"]{max-width:100%;overflow-x:auto!important;overscroll-behavior-x:contain} #app .tbl{min-width:700px} #app .tbl th,#app .tbl td{white-space:nowrap} #app .tbl .sub{white-space:normal;max-width:160px} #app .card:has(.tbl) .card-h::after{content:"左右滑动查看完整表格 ↔";color:#7faac8;font-size:10px;letter-spacing:.15px;flex-basis:100%;text-align:right} #app .content{max-width:100%;min-width:0} #app .card{max-width:100%} } /* Remove the last legacy light surfaces (chat composer and role illustrations). */ #app #chatInput{ background:linear-gradient(137deg,rgba(3,20,39,.78),rgba(15,49,80,.70))!important; color:#e9f8ff!important;border:1px solid rgba(133,194,235,.27)!important; box-shadow:inset 0 1px 0 rgba(211,242,255,.075),inset 0 3px 9px rgba(0,7,23,.24)!important; } #app #chatInput:focus{border-color:#79d8ff!important;box-shadow:0 0 0 3px rgba(58,154,236,.14)!important} #app .content [style*="width:44px;height:44px"]{ background:linear-gradient(136deg,rgba(77,169,231,.24),rgba(14,51,89,.46))!important; color:#a3e7ff!important;border:1px solid rgba(141,214,255,.26)!important; } /* ==================================================================== V7 | 登录页配色对齐登录后界面（仅 #loginPage，登录后样式不动） ==================================================================== */ #loginPage{ --lp-night:#061323; --lp-void:#020b17; --lp-navy:#0a1d35; --lp-glass:rgba(13,34,59,.74); --lp-glass-2:rgba(23,54,84,.54); --lp-ice:#a5e6ff; --lp-cyan:#67cfff; --lp-blue:#238cf2; --lp-ink:#e9f5ff; --lp-soft:#a8c2d9; --lp-dim:#7295b3; --lp-line:rgba(148,207,250,.19); --lp-line-hi:rgba(174,226,255,.42); background: radial-gradient(ellipse 48% 58% at 72% 42%,rgba(35,140,242,.10),transparent 82%), radial-gradient(ellipse 40% 48% at 12% 82%,rgba(16,87,166,.12),transparent 84%), linear-gradient(112deg,#0a1c33 0%,#071629 44%,#081b31 68%,#020a17 100%); color:var(--lp-ink); } #loginPage .login-left::before{content:none} #loginPage .login-left::after{background:linear-gradient(180deg,transparent,var(--lp-line),transparent)} #loginPage .glass-card{ border:1px solid var(--lp-line); background: radial-gradient(ellipse 90% 40% at 30% -10%,rgba(165,230,255,.07),transparent 82%), linear-gradient(145deg,var(--lp-glass),var(--lp-glass-2)); -webkit-backdrop-filter:blur(38px) saturate(145%); backdrop-filter:blur(38px) saturate(145%); box-shadow: 0 30px 76px -24px rgba(0,4,17,.72), 0 0 62px -38px rgba(35,140,242,.22), inset 0 1px 0 rgba(234,251,255,.14), inset 0 -1px 0 rgba(42,117,189,.12); } #loginPage .glass-card:hover{ transform:translateY(-3px); box-shadow: 0 38px 92px -24px rgba(0,4,17,.82), 0 0 78px -34px rgba(35,140,242,.28), inset 0 1px 0 rgba(234,251,255,.28), inset 0 -1px 0 rgba(42,117,189,.14); } #loginPage .glass-card::before{ background:linear-gradient(135deg,rgba(165,230,255,.22),transparent 32%,transparent 68%,rgba(103,207,255,.12)); box-shadow:none; } #loginPage .glass-card::after{ background: radial-gradient(ellipse 34% 18% at var(--glassX) var(--glassY),rgba(165,230,255,.10),transparent 100%), radial-gradient(ellipse 70% 17% at 42% -2%,rgba(165,230,255,.07),transparent 96%), linear-gradient(107deg,rgba(165,230,255,.04),transparent 20%,transparent 80%,rgba(103,207,255,.04)); box-shadow:inset 0 1px 0 rgba(234,251,255,.12); } #loginPage .glass-card .glass-optic--sheen{ background: radial-gradient(ellipse 41% 35% at var(--glassX) var(--glassY),rgba(165,230,255,.05),transparent 85%), linear-gradient(144deg,rgba(165,230,255,.07),rgba(103,207,255,.04) 12%,transparent 39%); } #loginPage .glass-card .glass-optic--edge{ border-top-color:rgba(174,226,255,.18); border-left-color:rgba(148,207,250,.12); border-right-color:rgba(103,207,255,.10); border-bottom-color:rgba(103,207,255,.12); box-shadow:inset 0 3px 14px rgba(165,230,255,.05),inset 0 -8px 14px -14px rgba(35,140,242,.36); } #loginPage .glass-card .glass-optic--caustic{ background:radial-gradient(ellipse 58% 50% at var(--glassX) 80%,rgba(35,140,242,.12),transparent 92%); } #loginPage .login-logo{ border:1px solid var(--lp-line-hi); background:linear-gradient(142deg,rgba(103,207,255,.28),rgba(35,140,242,.18) 60%,rgba(6,19,35,.4)); box-shadow:inset 0 1px 1px rgba(234,251,255,.34),inset 0 -3px 10px rgba(2,11,23,.4),0 8px 26px rgba(35,140,242,.18); } #loginPage .login-title{color:var(--lp-ink);-webkit-text-fill-color:var(--lp-ink);text-shadow:0 2px 18px rgba(165,230,255,.14)} #loginPage .login-sub{color:var(--lp-soft)} #loginPage .login-field label{color:var(--lp-soft)} #loginPage .login-field input{ background:linear-gradient(130deg,rgba(2,11,23,.52),rgba(23,54,84,.42)); border:1px solid var(--lp-line); color:var(--lp-ink); box-shadow:inset 0 1px 0 rgba(234,251,255,.12),inset 0 -3px 12px rgba(2,11,23,.32); } #loginPage .login-field input::placeholder{color:var(--lp-dim)} #loginPage .login-field input:focus{ border-color:var(--lp-line-hi); background:linear-gradient(130deg,rgba(2,11,23,.7),rgba(23,54,84,.56)); box-shadow:0 0 0 3px rgba(35,140,242,.16),inset 0 1px 0 rgba(234,251,255,.14); } #loginPage .btn-code{ background:linear-gradient(133deg,rgba(23,54,84,.62),rgba(13,34,59,.72)); border-color:var(--lp-line); color:var(--lp-ice); } #loginPage .btn-code:hover{background:rgba(35,140,242,.24);border-color:var(--lp-line-hi);color:#fff} #loginPage .login-btn{ border:1px solid var(--lp-line-hi); background:linear-gradient(112deg,#1a61c2,#268ce4 55%,#3ab6ee); box-shadow:inset 0 1px 0 rgba(234,251,255,.28),0 12px 34px rgba(13,111,204,.34); } #loginPage .login-btn:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(234,251,255,.32),0 16px 42px rgba(13,111,204,.42)} #loginPage .demo-accounts{ background:linear-gradient(130deg,rgba(23,54,84,.46),rgba(13,34,59,.58)); border:1px solid var(--lp-line); color:var(--lp-soft); box-shadow:inset 0 1px 0 rgba(234,251,255,.10); } #loginPage .demo-accounts b{color:var(--lp-ice)} #loginPage .showroom-halo{ background:radial-gradient(ellipse 60% 45% at 50% 65%,rgba(21,118,191,.10),transparent 82%); } #loginPage .car-title h2{ background:linear-gradient(112deg,#f2fbff 0%,#c7ecff 38%,#8fd4ff 72%,#e6f7ff 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } #loginPage .car-showroom-note .data-label{color:var(--lp-dim)} #loginPage .car-showroom-note .data-value{color:var(--lp-ice)} #loginPage .car-showroom-note .data-bar{background:linear-gradient(90deg,transparent,var(--lp-cyan))} #loginPage .car-tip{color:var(--lp-soft)} #loginPage .car-tip i{background:var(--lp-cyan);box-shadow:0 0 10px rgba(103,207,255,.7)} #loginPage .vehicle-photoplate{filter:brightness(.93) contrast(1.06) saturate(.95)} #loginPage .car-commands button{ color:var(--lp-soft); background:linear-gradient(145deg,rgba(23,54,84,.72),rgba(13,34,59,.78)); border:1px solid var(--lp-line); box-shadow:inset 0 1px 0 rgba(234,251,255,.12),0 7px 20px rgba(0,3,14,.18); } #loginPage .car-commands button:hover{background:rgba(35,140,242,.26);color:#fff;border-color:var(--lp-line-hi)} #loginPage .car-commands .car-primary-action{ color:#fff;background:linear-gradient(120deg,#1a61c2,#268ce4 55%,#3ab6ee); border-color:var(--lp-line-hi); box-shadow:inset 0 1px 0 rgba(234,251,255,.26),0 7px 24px rgba(13,111,204,.26); } #loginPage #carError{color:var(--lp-soft);background:rgba(2,11,23,.78);border-color:var(--lp-line)} @keyframes staticCruise{ from{transform:translateY(-50%) translateX(-1.2%) scale(1)} to{transform:translateY(-50%) translateX(1.2%) scale(1.025)} } #loginPage .vehicle-photoplate.static-cruise{animation:staticCruise 5.2s ease-in-out infinite alternate} @media(prefers-reduced-motion:reduce){#loginPage .vehicle-photoplate.static-cruise{animation:none}}