@font-face{font-family:Akhand;src:url(/assets/Akhand-C0J0p83w.otf) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Akhand Black;src:url(/assets/Akhand%20Black-Bwp8krYE.otf) format("opentype");font-weight:900;font-style:normal}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100vh;overflow:hidden;font-family:Akhand,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;color:#f4d03f;background:linear-gradient(135deg,#0a0a0a,#1a1a1a,#0a0a0a)}body.modal-open{overflow:hidden!important}#root{height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{margin:0 0 .5em;font-weight:900;line-height:1.2;color:#d4af37}p{margin:0 0 1em}a{color:#d4af37;text-decoration:none;transition:color .3s ease}a:hover{color:#f4e37d}button{font-family:inherit;font-size:1rem;padding:.75rem 1.5rem;border:2px solid #d4af37;border-radius:4px;background-color:transparent;color:#d4af37;cursor:pointer;transition:all .3s ease;letter-spacing:1px;font-weight:600}button:hover{background-color:#d4af37;color:#000}button:focus{outline:none;outline-offset:2px}@media print{body{margin:0;padding:0;background:#fff!important;color:#000!important;font-family:Arial,sans-serif!important}body>*:not([data-print=true]){display:none!important}[data-print=true]{display:block!important;position:static!important;margin:0!important;padding:10mm!important;background:#fff!important;color:#000!important;font-size:11pt!important;line-height:1.2!important;box-shadow:none!important;border-radius:0!important;width:auto!important;max-width:none!important;height:auto!important}[data-print=true] table{border-collapse:collapse!important;width:100%!important;margin-bottom:8px!important;page-break-inside:avoid}[data-print=true] th,[data-print=true] td{border:1px solid black!important;padding:4px!important;font-size:10pt!important;background:#fff!important;color:#000!important}[data-print=true] input{border:none!important;background:transparent!important;color:#000!important;font-size:10pt!important;padding:2px!important}[data-print=true] button{display:none!important}[data-print=true] .signature-section{page-break-inside:avoid;margin-top:15px!important}[data-print=true] .page-break-before{page-break-before:always}[data-print=true] h1,[data-print=true] h2,[data-print=true] h3{color:#000!important;font-size:12pt!important;margin:8px 0 4px!important}}.app{height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}.header{position:fixed;top:2rem;left:0;right:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.5rem 0;position:relative}.header:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#ddac57 20%,#ddac57 80%,transparent 100%)}.header:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,#ddac57 20%,#ddac57 80%,transparent 100%)}.header-container{margin:0 auto;padding:1rem 10rem;display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center}.logo-image{height:40px;width:auto}.login-btn{font-size:1.8rem;padding:0 1.5rem;background:transparent;color:#ddac57;cursor:pointer;transition:all .3s ease;letter-spacing:1px;font-weight:400;border:none;font-family:Akhand Black}.login-btn:hover{background:#ddac57;color:#000;box-shadow:0 4px 15px #ddac574d}.user-section{display:flex;align-items:center;gap:1rem}.user-dropdown{position:relative}.username-btn{font-size:1.2rem;padding:.5rem 1rem;background:transparent;color:#ddac57;cursor:pointer;transition:all .3s ease;letter-spacing:1px;font-weight:600;border:2px solid transparent;border-radius:6px;font-family:Akhand;display:flex;align-items:center;gap:.5rem}.username-btn:hover{border-color:#ddac57;box-shadow:0 2px 10px #ddac5733}.dropdown-arrow{font-size:.8rem;transition:transform .3s ease}.dropdown-arrow.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:100%;right:0;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid #ddac57;border-radius:8px;padding:.5rem 0;min-width:150px;z-index:1000;margin-top:.5rem}.dropdown-item{width:100%;padding:.75rem 1rem;background:transparent;color:#ddac57;border:none;cursor:pointer;font-family:Akhand;font-size:1rem;text-align:left;transition:all .2s ease}.dropdown-item:hover{background:#ddac571a;color:#fff}.dropdown-item.logout{color:#ff6b6b}.dropdown-item.logout:hover{background:#ff6b6b1a;color:#ff8e8e}.dropdown-divider{margin:.5rem 0;border:none;border-top:1px solid rgba(221,172,87,.3)}.authenticated-section{display:flex;align-items:center;gap:2rem}.main-nav{display:flex;gap:1rem}.nav-btn{font-size:1.6rem;padding:.5rem 1.2rem;background:transparent;color:#ddac57;cursor:pointer;transition:all .3s ease;letter-spacing:1px;font-weight:400;border:2px solid transparent;border-radius:6px;font-family:Akhand}.nav-btn:hover{border-color:#ddac57;box-shadow:0 2px 10px #ddac5733}.nav-btn.active{background:#ddac57;color:#000;box-shadow:0 4px 15px #ddac574d}@media (max-width: 768px){.header-container{padding:1rem}.logo-image{height:32px}.login-btn{font-size:.8rem;padding:.4rem 1rem}.authenticated-section{gap:1rem}.main-nav{gap:.5rem}.nav-btn{font-size:1.2rem;padding:.4rem .8rem}.username-btn{font-size:1rem;padding:.4rem .8rem}.dropdown-menu{min-width:120px}.dropdown-item{font-size:.9rem;padding:.6rem .8rem}}.modal-overlay{position:fixed;inset:0;background:#0000;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:all .3s ease;opacity:0}.modal-overlay--visible{background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:1}.modal-content{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border:2px solid #ddac57;border-radius:8px;padding:2rem;width:90%;max-width:400px;position:relative;box-shadow:0 10px 30px #00000080;transform:scale(.7) translateY(-50px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.modal-content--visible{transform:scale(1) translateY(0);opacity:1}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:#ddac57;font-size:1.5rem;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .3s ease}.modal-close:hover{background:#ddac5733}.modal-title{font-family:Akhand,serif;font-size:2rem;font-weight:900;color:#ddac57;text-align:center;margin:0 0 1.5rem;text-transform:uppercase;letter-spacing:2px}.login-form{display:flex;flex-direction:column;gap:1.5rem}.error-message{background:#dc35451a;border:1px solid rgba(220,53,69,.5);color:#ff6b6b;padding:.75rem;border-radius:4px;text-align:center;font-size:.9rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{color:#ddac57;font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.form-group input{padding:.75rem;background:#0000004d;border:1px solid #ddac57;border-radius:4px;color:#fff;font-size:1rem;transition:all .3s ease}.form-group input:focus{outline:none;border-color:#f4d03f;box-shadow:0 0 10px #ddac574d;background:#00000080}.form-group input::placeholder{color:#ffffff80}.login-submit{background:transparent;border:2px solid #ddac57;color:#ddac57;padding:.75rem 2rem;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;border-radius:4px;cursor:pointer;transition:all .3s ease;margin-top:1rem}.login-submit:hover{background:#ddac57;color:#000;box-shadow:0 4px 15px #ddac5766}@media (max-width: 480px){.modal-content{padding:1.5rem;margin:1rem}.modal-title{font-size:1.5rem}}.footer{position:fixed;bottom:0;left:0;right:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.footer-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;text-align:center}.footer-text{color:#ddac57;font-size:1.2rem;font-weight:400;letter-spacing:1px;text-transform:uppercase;margin:0;font-family:Akhand,serif;position:relative}.footer-text:after{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:0;height:2px;width:300px;background:linear-gradient(90deg,transparent 0%,#ddac57 20%,#ddac57 80%,transparent 100%)}@media (max-width: 768px){.footer-container{padding:.75rem 1rem}.footer-text{font-size:.7rem;letter-spacing:1px}}.intro{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0;padding:0;box-sizing:border-box}.intro-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.intro-container{width:100%;text-align:center;z-index:1}.welcome-section{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:100%}.deco-figure{width:100vw;height:auto;min-width:1440px}.welcome-title{font-family:Akhand,serif;font-size:3rem;font-weight:900;color:#ddac57;text-transform:uppercase;letter-spacing:12px;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2}@media (max-width: 768px){.intro{padding:100px 1rem}.welcome-title{font-size:3.5rem;letter-spacing:8px}}@media (max-width: 480px){.welcome-title{font-size:2.5rem;letter-spacing:4px}}.home-page{position:absolute;top:0;left:0;width:100%;height:100vh;margin:0;padding:0}.webhook-env-indicator{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#ffffffe6;border-radius:8px;border:1px solid rgba(0,0,0,.1);font-size:.85rem;box-shadow:0 2px 8px #0000001a}.env-badge{padding:4px 8px;border-radius:4px;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.env-production{background:#f44;color:#fff;animation:pulse-red 2s infinite}.env-testing{background:orange;color:#fff}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.7}}.env-details{display:flex;align-items:center;gap:6px}.env-label{color:#666;font-weight:500}.env-value{color:#333;font-weight:600;text-transform:capitalize}.env-debug{margin-left:auto}.env-debug summary{cursor:pointer;color:#666;font-size:.8rem;-webkit-user-select:none;user-select:none}.env-debug summary:hover{color:#333}.debug-content{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid #ddd;border-radius:6px;padding:12px;box-shadow:0 4px 12px #00000026;min-width:300px;z-index:1000;font-family:monospace;font-size:.75rem;line-height:1.4}.debug-content div{margin-bottom:4px;word-break:break-all}.debug-content div:last-child{margin-bottom:0}@media (max-width: 768px){.webhook-env-indicator{flex-direction:column;align-items:flex-start;gap:8px}.env-details{flex-direction:column;align-items:flex-start;gap:2px}.debug-content{position:relative;right:auto;top:auto;margin-top:8px}}.report-page{position:relative;width:100%;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;margin:0;padding:1rem;padding-top:120px;box-sizing:border-box}.report-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.report-container{background:#fffffff2;padding:1.5rem;border-radius:12px;box-shadow:0 4px 20px #00000026;text-align:center;max-width:850px;width:100%;margin:0 auto 150px;position:relative;z-index:2;box-sizing:border-box}.report-container h1{color:#333;margin-bottom:2rem;font-size:2.5rem;font-family:Akhand,serif;font-weight:900;text-transform:uppercase;letter-spacing:4px;color:#ddac57}.current-status{margin-bottom:2rem;padding:1rem;background:#ddac571a;border-radius:8px;border-left:4px solid #ddac57}.current-status h2{color:#333;font-size:1.5rem;margin:0;font-family:Akhand,serif}.status-label{color:#ddac57;font-weight:700}.actions-section{margin-bottom:2rem;display:flex;flex-direction:column}.actions-section h3{color:#333;font-size:1.3rem;margin-bottom:1rem;font-family:Akhand,serif;text-transform:uppercase;letter-spacing:2px}.remarks-section{margin-bottom:1.5rem;padding:1rem;background:#ddac570d;border-radius:8px;border:1px solid rgba(221,172,87,.2)}.remarks-label{display:block;font-size:1rem;color:#333;font-weight:600;margin-bottom:.5rem;font-family:Akhand,serif}.remarks-input{width:100%;padding:.75rem;border:2px solid #ddd;border-radius:6px;font-size:.95rem;font-family:inherit;resize:vertical;min-height:60px;background:#fff;color:#333;transition:border-color .3s ease,box-shadow .3s ease}.remarks-input:focus{outline:none;border-color:#ddac57;box-shadow:0 0 0 3px #ddac571a}.remarks-input::placeholder{color:#999;font-style:italic}.action-buttons{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}.action-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:220px}.time-input-container{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin-bottom:.5rem}.time-label{font-size:.9rem;color:#555;font-weight:500;text-align:center}.time-input{padding:6px 10px;border:2px solid #ddd;border-radius:4px;font-size:.9rem;font-weight:600;color:#333;background:#fff;transition:border-color .3s ease;width:200px;min-width:200px}.time-input:focus{border-color:#007bff;outline:none;box-shadow:0 0 0 2px #007bff40}.arrival-time{margin-top:.5rem}.arrival-label{color:#e67e22;font-weight:600;font-size:.85rem}.arrival-input{border-color:#e67e22;background:#e67e220d}.arrival-input:focus{border-color:#e67e22;box-shadow:0 0 0 2px #e67e2240}.action-btn{padding:12px 24px;border:none;border-radius:6px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;min-width:150px}.action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003;opacity:.9}.action-btn:active{transform:translateY(0)}.new-trip-section{margin:2rem 0;padding:1rem;background:#ddac571a;border-radius:8px;border:2px dashed #ddac57}.new-trip-btn{background:linear-gradient(135deg,#ddac57,#b8941f);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 2px 8px #ddac574d;display:flex;align-items:center;gap:.5rem;margin:0 auto}.new-trip-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #ddac5766;background:linear-gradient(135deg,#b8941f,#9a7a1a)}.new-trip-btn:active{transform:translateY(0);box-shadow:0 2px 8px #ddac574d}.order-details-section{margin:1.5rem 0;display:flex;justify-content:center}.order-details-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;box-shadow:0 2px 8px #667eea4d;display:flex;align-items:center;gap:.5rem;margin:0 auto}.order-details-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #667eea66;background:linear-gradient(135deg,#5a67d8,#553c9a)}.order-details-btn:active{transform:translateY(0);box-shadow:0 2px 8px #667eea4d}.status-history{text-align:left;max-height:300px;overflow-y:auto}.status-history h3{color:#333;font-size:1.2rem;margin-bottom:1rem;font-family:Akhand,serif;text-transform:uppercase;letter-spacing:2px;text-align:center}.history-list{background:#f8f9facc;border-radius:6px;padding:1rem;max-height:200px;overflow-y:auto}.history-entry{padding:.8rem;border-bottom:1px solid rgba(0,0,0,.1);font-size:.95rem;color:#555;font-family:monospace}.history-entry:last-child{border-bottom:none}.history-entry .separator-entry{font-weight:700;color:#ddac57;text-align:center;font-style:italic;background:#ddac571a;padding:.8rem;border-radius:4px;margin:.5rem 0}.normal-display{display:flex;align-items:center}.time-display{font-weight:700;color:#ddac57;padding:2px 6px;border-radius:4px;transition:all .2s ease}.time-display.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.time-display.clickable:hover{background-color:#ddac571a;transform:scale(1.05)}.time-display:not(.clickable){cursor:default;opacity:.8;color:#888}.action-text{margin-left:.5rem;color:#333}.time-edit-mode{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.time-input{padding:4px 8px;border:2px solid #ddac57;border-radius:4px;font-family:monospace;font-size:.9rem;background:#fff;color:#333}.time-input:focus{outline:none;border-color:#b8941f;box-shadow:0 0 0 2px #ddac5733}.edit-buttons{display:flex;gap:.25rem;margin-left:auto}.save-btn,.cancel-btn{width:24px;height:24px;border:none;border-radius:50%;cursor:pointer;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.save-btn{background-color:#28a745;color:#fff}.save-btn:hover{background-color:#218838;transform:scale(1.1)}.cancel-btn{background-color:#dc3545;color:#fff}.cancel-btn:hover{background-color:#c82333;transform:scale(1.1)}.history-list::-webkit-scrollbar{width:6px}.history-list::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.history-list::-webkit-scrollbar-thumb{background:#ddac57;border-radius:3px}@media (max-width: 768px){.report-page{padding:1rem 0}.report-container{margin:1rem;padding:1.5rem}.report-container h1{font-size:2rem;letter-spacing:2px}.action-buttons{flex-direction:column;align-items:center}.action-btn{width:100%;max-width:250px}}@media (max-width: 480px){.report-container h1{font-size:1.5rem;letter-spacing:1px}.current-status h2{font-size:1.2rem}.actions-section h3{font-size:1.1rem}}.modal-overlay{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;background:#000c!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:2147483647!important;pointer-events:all!important}.modal-content{background:#fff;border-radius:12px;width:90%;max-width:800px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #0003;z-index:10000;position:relative}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e0e0e0;background:#f8f9fa;border-radius:12px 12px 0 0}.modal-header h2{margin:0;color:#333;font-size:1.5rem;font-weight:600}.modal-close{background:none;border:none;font-size:2rem;color:#666;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.modal-close:hover{background-color:#f0f0f0}.modal-body{padding:1.5rem}.form-section{margin-bottom:2rem}.form-row{display:flex;gap:1rem;margin-bottom:1rem}.form-field{flex:1}.form-field label{display:block;margin-bottom:.5rem;font-weight:600;color:#333}.form-field input{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.form-field input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.timesheet-table{margin-bottom:2rem}.timesheet-table table{width:100%;border-collapse:collapse;border:1px solid #ddd}.timesheet-table th,.timesheet-table td{padding:.5rem;text-align:left;border:1px solid #ddd}.timesheet-table th{background-color:#f8f9fa;font-weight:600}.timesheet-table tbody tr:nth-child(2n){background-color:#f8f9fa}.delay-section{margin-bottom:2rem}.delay-section h3{margin-bottom:1rem;color:#333;font-size:1.2rem}.delay-section table{width:100%;border-collapse:collapse;border:1px solid #ddd}.delay-section th,.delay-section td{padding:.5rem;text-align:center;border:1px solid #ddd}.delay-section th{background-color:#f8f9fa;font-weight:600}.delay-section td:first-child{text-align:left;font-weight:500}.delay-section input{width:100%;padding:.3rem;border:1px solid #ccc;border-radius:3px;font-size:.8rem}.signatures-section{display:flex;gap:2rem;margin-bottom:2rem}.signature-box{flex:1;border:1px solid #ddd;padding:1rem;border-radius:6px}.signature-box h4{margin:0 0 1rem;color:#333;font-size:1rem}.signature-field{margin-bottom:1rem}.signature-field label{display:block;margin-bottom:.3rem;font-weight:600;color:#333;font-size:.9rem}.signature-field input{width:100%;padding:.4rem;border:1px solid #ddd;border-radius:3px;font-size:.9rem}.signature-area{margin-top:1rem}.signature-area label{display:block;margin-bottom:.5rem;font-weight:600;color:#333;font-size:.9rem}.signature-box-area{width:100%;height:80px;border:1px solid #ddd;border-radius:3px;background-color:#f9f9f9}.modal-actions{display:flex;gap:1rem;justify-content:flex-end;padding-top:1rem;border-top:1px solid #e0e0e0}.modal-actions button{padding:.8rem 1.5rem;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.cancel-btn{background-color:#6c757d;color:#fff}.cancel-btn:hover{background-color:#5a6268}.submit-btn{background-color:#007bff;color:#fff}.submit-btn:hover{background-color:#0056b3}@media (max-width: 768px){.modal-content{width:95%;max-height:95vh}.form-row{flex-direction:column}.signatures-section{flex-direction:column;gap:1rem}.modal-actions{flex-direction:column}.modal-actions button{width:100%}}.operation-mode-section{margin-bottom:2rem;padding:1.5rem;background:#f8f9facc;border-radius:10px;border:2px solid rgba(52,152,219,.2)}.mode-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.mode-btn{padding:12px 24px;font-size:1.1rem;font-weight:600;border:2px solid #3498db;border-radius:8px;background:#fff;color:#3498db;cursor:pointer;transition:all .3s ease;min-width:140px;display:flex;align-items:center;justify-content:center;gap:8px}.mode-btn:hover{background:#3498db1a;transform:translateY(-2px);box-shadow:0 4px 12px #3498db33}.mode-btn.active{background:#3498db;color:#fff;box-shadow:0 4px 12px #3498db4d}.mode-btn.active:hover{background:#2980b9}.mode-description{color:#555;font-size:1rem;margin:0;text-align:center}.mode-description strong{color:#3498db;font-weight:600}@media (max-width: 768px){.mode-buttons{flex-direction:column;align-items:center}.mode-btn{width:200px}.data-persistence-info{flex-direction:column;gap:.5rem}.clear-data-btn{width:100%}}.data-persistence-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:1rem;background:#2ecc711a;border:1px solid rgba(46,204,113,.3);border-radius:8px;gap:1rem}.persistence-indicator{color:#27ae60;font-size:.95rem;font-weight:500;display:flex;align-items:center;gap:8px}.clear-data-btn{padding:8px 16px;font-size:.9rem;font-weight:500;background:#e74c3c;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.clear-data-btn:hover{background:#c0392b;transform:translateY(-1px);box-shadow:0 2px 8px #e74c3c4d}.document-requirement{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:2px solid #f39c12;border-radius:12px;padding:2rem;margin-bottom:2rem;text-align:center}.requirement-header{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.requirement-header h3{color:#d35400;margin:0;font-size:1.5rem;font-weight:700}.requirement-description{color:#8b6914;font-size:1.1rem;margin-bottom:1.5rem;line-height:1.5}.upload-section{background:#fffc;border-radius:8px;padding:1.5rem;margin-bottom:1rem}.upload-message{padding:.75rem 1rem;border-radius:6px;margin-bottom:1rem;font-weight:500;text-align:center}.upload-message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.upload-message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.uploaded-documents{margin-top:1rem}.uploaded-documents h4{color:#2c3e50;margin-bottom:.75rem;font-size:1.1rem}.document-item{display:flex;align-items:center;justify-content:space-between;background:#2ecc711a;border:1px solid #2ecc71;border-radius:6px;padding:.75rem 1rem;margin-bottom:.5rem}.document-info{display:flex;align-items:center;gap:.75rem}.document-name{font-weight:500;color:#2c3e50}.document-size{color:#7f8c8d;font-size:.9rem}.document-status{background:#2ecc71;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.8rem;font-weight:500}.controls-notice{background:linear-gradient(135deg,#d4edda,#c3e6cb);border:2px solid #28a745;border-radius:8px;padding:1rem;margin-bottom:1.5rem;text-align:center}.controls-notice p{color:#155724;margin:0;font-weight:600;font-size:1.1rem}@media (max-width: 768px){.report-page{padding:1rem .5rem}.report-container{padding:1.5rem}.report-container h1{font-size:2rem}}@media (max-width: 480px){.report-page{padding:1rem .25rem}.report-container{padding:1rem}.report-container h1{font-size:1.8rem;letter-spacing:2px}}.documents-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.5rem}.documents-header h3{margin:0;color:#2c3e50;flex:1;min-width:200px}.clear-documents-btn{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #e74c3c33;white-space:nowrap;flex-shrink:0}.clear-documents-btn:hover{background:linear-gradient(135deg,#c0392b,#a93226);transform:translateY(-1px);box-shadow:0 4px 8px #e74c3c4d}.clear-documents-btn:active{transform:translateY(0)}.order-details-info{margin-top:1.5rem;padding:1.5rem;background:linear-gradient(135deg,#e8f5e8,#d4edda);border:2px solid #28a745;border-radius:12px}.order-details-info h4{margin:0 0 1rem;color:#155724;font-size:1.2rem;font-weight:700;text-align:center}.order-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.order-info-item{background:#fffc;padding:.75rem;border-radius:6px;border:1px solid rgba(40,167,69,.2)}.order-info-item strong{color:#28a745;display:block;margin-bottom:.25rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.order-details-error{margin-top:1.5rem;padding:1.5rem;background:linear-gradient(135deg,#f8d7da,#f5c6cb);border:2px solid #dc3545;border-radius:12px}.order-details-error h4{margin:0 0 1rem;color:#721c24;font-size:1.2rem;font-weight:700;text-align:center}.order-details-error p{color:#721c24;margin:.5rem 0;line-height:1.5}.order-details-error .error-message{background:#fffc;padding:.75rem;border-radius:6px;border:1px solid rgba(220,53,69,.3);font-family:monospace;font-size:.9rem;color:#721c24;margin:1rem 0;word-break:break-word}.order-details-error em{font-style:italic;color:#856404}.retry-section{text-align:center;margin:1.5rem 0;padding:1rem;background:#17a2b80d;border-radius:8px;border:1px solid rgba(23,162,184,.2)}.retry-btn{background:linear-gradient(135deg,#17a2b8,#138496);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px #17a2b84d}.retry-btn:hover{background:linear-gradient(135deg,#138496,#117a8b);transform:translateY(-1px);box-shadow:0 2px 8px #17a2b84d}.retry-btn:active{transform:translateY(0)}@media (max-width: 768px){.order-info-grid{grid-template-columns:1fr}.documents-header{flex-direction:column;align-items:flex-start;gap:1rem}.documents-header h3{text-align:center;width:100%}.clear-documents-btn{align-self:center}.retry-section{margin:1.5rem 0}.retry-btn{width:100%;justify-content:center}}.order-quick-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}.quick-info-item{background:#ffffffb3;padding:.75rem;border-radius:8px;border:1px solid rgba(21,87,36,.2);text-align:left}.quick-info-item strong{color:#155724;display:block;margin-bottom:.25rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.view-details-section{text-align:center}.view-details-section p{margin:0 0 1rem;color:#155724;font-weight:600}.view-details-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 2px 8px #28a7454d}.view-details-btn:hover{background:linear-gradient(135deg,#218838,#1e9ecb);transform:translateY(-2px);box-shadow:0 4px 16px #28a74566}.order-success-compact{background:linear-gradient(135deg,#d4edda,#c3e6cb);border:1px solid #c3e6cb;border-radius:8px;padding:1rem;margin-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.success-indicator{color:#155724;font-weight:600;display:flex;align-items:center;gap:.5rem;flex:1;text-align:left}.view-details-btn-compact{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;box-shadow:0 2px 6px #28a74533}.view-details-btn-compact:hover{background:linear-gradient(135deg,#218838,#1e9ecb);transform:translateY(-1px);box-shadow:0 3px 10px #28a7454d}@media (max-width: 768px){.report-page{padding:.5rem;padding-top:100px}.report-container{padding:1rem;margin:0 auto}.report-container h1{font-size:2rem;margin-bottom:1.5rem}.order-success-compact{flex-direction:column;text-align:center}.success-indicator{text-align:center}.view-details-btn-compact{width:100%;justify-content:center}}@media (max-width: 480px){.report-page{padding:.25rem;padding-top:90px}.report-container{padding:.75rem}.report-container h1{font-size:1.75rem;margin-bottom:1rem}}.upload-section-minimal{background:#f8f9fa;padding:1rem;border-radius:8px;margin-bottom:1rem}.upload-section-minimal h3{margin:0 0 .5rem;font-size:1.1rem}.order-success-minimal{background:#d4edda;color:#155724;padding:.5rem;border-radius:4px;margin:.5rem 0;display:flex;align-items:center;gap:.5rem;font-size:.9rem}.view-details-btn-minimal{background:#007bff;color:#fff;border:none;padding:.25rem .5rem;border-radius:4px;cursor:pointer;font-size:.8rem}.mode-section-minimal{display:flex;gap:.5rem;margin:1rem 0;justify-content:center}.mode-section-minimal .mode-btn{padding:.5rem 1rem;border:2px solid #ddd;background:#fff;border-radius:6px;cursor:pointer;font-size:1.2rem}.mode-section-minimal .mode-btn.active{background:#007bff;border-color:#007bff;color:#fff}.submit-btn-minimal{background:#28a745;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;cursor:pointer;font-size:1rem;margin:1rem 0}.submit-btn-minimal:hover{background:#218838}.clear-documents-btn{background:#dc3545;color:#fff;border:none;padding:.25rem .5rem;border-radius:4px;cursor:pointer;font-size:.8rem}.route-selection{background:#ffffff0d;border-radius:10px;padding:20px;margin:20px 0;border:1px solid rgba(50,130,180,.3)}.route-selection h3{margin:0 0 15px;color:#f0f8ff;font-size:1.1em;text-align:center}.route-selectors{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}.route-selector{display:flex;flex-direction:column}.route-selector label{color:#87ceeb;font-size:.9em;margin-bottom:5px;font-weight:500}.route-selector select{padding:8px 12px;border-radius:6px;border:1px solid rgba(50,130,180,.3);background:#141e3cb3;color:#f0f8ff;font-size:.9em;cursor:pointer;transition:border-color .3s ease}.route-selector select:hover{border-color:#3282b499}.route-selector select:focus{outline:none;border-color:#4682b4;box-shadow:0 0 5px #4682b44d}.selected-route{margin-top:15px;padding:10px;background:#4682b41a;border-radius:6px;border:1px solid rgba(70,130,180,.3)}.route-display{display:flex;align-items:center;justify-content:center;gap:15px}.port-name{font-weight:500;padding:4px 8px;border-radius:4px}.port-name.origin{background:#32b43233;color:#90ee90;border:1px solid rgba(50,180,50,.3)}.port-name.destination{background:#b4323233;color:#ff7f7f;border:1px solid rgba(180,50,50,.3)}.route-arrow{color:#87ceeb;font-size:1.2em;font-weight:700}@media (max-width: 768px){.route-selectors{grid-template-columns:1fr;gap:10px}.route-display{flex-direction:column;gap:8px}}.file-upload-container{width:100%;max-width:600px;margin:0 auto}.file-upload-dropzone{border:2px dashed rgba(0,255,255,.3);border-radius:12px;padding:40px 20px;text-align:center;background:#0014284d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.file-upload-dropzone:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,255,.1),transparent);transition:left .5s ease}.file-upload-dropzone:hover{border-color:#0ff9;background:#001e3c66;transform:translateY(-2px);box-shadow:0 8px 32px #00ffff1a}.file-upload-dropzone:hover:before{left:100%}.file-upload-dropzone.drag-over{border-color:#0ff;background:#00ffff0d;transform:scale(1.02);box-shadow:0 0 30px #00ffff4d}.file-upload-dropzone.uploading{border-color:#ffa50099;background:#ffa5000d}.upload-icon{font-size:48px;margin-bottom:16px;opacity:.7;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.upload-text{color:#ffffffe6}.upload-primary{font-size:18px;font-weight:600;margin-bottom:8px;color:#0ff}.upload-secondary{font-size:14px;color:#fff9;line-height:1.4}.upload-progress-container{margin-top:20px;background:#00142866;border-radius:8px;padding:16px;border:1px solid rgba(0,255,255,.2)}.upload-progress-header{font-weight:600;color:#0ff;margin-bottom:12px;font-size:16px}.upload-progress-item{background:#000a1499;border-radius:6px;padding:12px;margin-bottom:8px;border:1px solid rgba(0,255,255,.1)}.upload-progress-item:last-child{margin-bottom:0}.upload-file-info{display:flex;align-items:center;gap:12px;margin-bottom:8px}.file-icon{font-size:24px;flex-shrink:0}.file-details{flex:1;min-width:0}.file-name{font-weight:500;color:#ffffffe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.file-size{font-size:12px;color:#fff9}.upload-status{font-size:20px;flex-shrink:0}.upload-status.uploading{animation:pulse 1.5s ease-in-out infinite}.upload-status.processing{color:#007bff;animation:spin 2s linear infinite}.upload-status.success{color:#0f8}.upload-status.error{color:#f44}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.progress-bar{width:100%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-top:8px;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#0ff,#08f);transition:width .3s ease;border-radius:2px;position:relative}.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;color:#ffffffe6;font-weight:500;white-space:nowrap;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.5)}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.upload-error{color:#ff6b6b;font-size:12px;margin-top:4px;padding:4px 8px;background:#ff6b6b1a;border-radius:4px;border-left:3px solid #ff6b6b}.supported-types{margin-top:16px;font-size:12px;color:#fff9}.supported-types details{cursor:pointer}.supported-types summary{padding:8px;background:#000a144d;border-radius:4px;border:1px solid rgba(0,255,255,.2);list-style:none;position:relative}.supported-types summary::-webkit-details-marker{display:none}.supported-types summary:after{content:"▼";position:absolute;right:8px;top:50%;transform:translateY(-50%);transition:transform .3s ease;color:#0ff}.supported-types[open] summary:after{transform:translateY(-50%) rotate(180deg)}.supported-types ul{list-style:none;padding:12px 8px 8px;margin:0;background:#000a1466;border:1px solid rgba(0,255,255,.2);border-top:none;border-radius:0 0 4px 4px}.supported-types li{padding:4px 0;color:#ffffffb3}.supported-types li:before{content:"• ";color:#0ff;margin-right:8px}@media (max-width: 768px){.file-upload-dropzone{padding:30px 16px}.upload-icon{font-size:36px}.upload-primary{font-size:16px}.upload-secondary{font-size:13px}.upload-file-info{flex-direction:column;align-items:flex-start;gap:8px}.file-details{width:100%}.upload-status{align-self:flex-end}}@media (prefers-color-scheme: dark){.file-upload-dropzone{background:#00142866}.upload-progress-container{background:#00142880}.upload-progress-item{background:#000a14b3}}@media (prefers-contrast: high){.file-upload-dropzone{border-color:#fff;background:#000c}.upload-primary,.file-name{color:#fff}.progress-fill{background:#fff}}.ai-page{position:relative;width:100%;min-height:100vh;overflow-x:hidden;overflow-y:auto;background:linear-gradient(135deg,#0a0a0a,#1a1a1a,#0a0a0a)}.ai-page:before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 800px at 10% 10%,rgba(255,255,255,.02),transparent 60%),radial-gradient(900px 700px at 90% 20%,rgba(255,255,255,.015),transparent 60%),radial-gradient(700px 600px at 20% 85%,rgba(255,255,255,.02),transparent 60%);pointer-events:none;mix-blend-mode:screen}.ai-page:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 2px,transparent 4px);opacity:.35;pointer-events:none;animation:scanFlicker 6s ease-in-out infinite}@keyframes scanFlicker{0%,to{opacity:.28}50%{opacity:.4}}.ai-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.aurora-layer{position:absolute;inset:-10%;background:radial-gradient(40% 30% at 20% 20%,rgba(156,39,176,.18),transparent 60%),radial-gradient(35% 25% at 80% 25%,rgba(79,195,247,.16),transparent 60%),radial-gradient(35% 35% at 50% 80%,rgba(244,208,63,.12),transparent 60%);filter:blur(35px) saturate(120%);animation:auroraDrift 18s ease-in-out infinite alternate}@keyframes auroraDrift{0%{transform:translateZ(0) scale(1)}50%{transform:translate3d(-20px,10px,0) scale(1.05)}to{transform:translate3d(20px,-10px,0) scale(1.03)}}.stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}.stars span{position:absolute;width:2px;height:2px;background:#ffffffd9;border-radius:50%;opacity:.8;animation:twinkle 3.5s ease-in-out infinite;box-shadow:0 0 4px #fff6}.stars span:nth-child(3n){background:#d4af37e6;box-shadow:0 0 6px #d4af3780}.stars span:nth-child(5n){background:#4fc3f7cc;box-shadow:0 0 5px #4fc3f766;width:1.5px;height:1.5px}.stars span:nth-child(7n){width:3px;height:3px;animation-duration:4.5s}@keyframes twinkle{0%,to{opacity:.2;transform:scale(1)}50%{opacity:1;transform:scale(1.8)}}.stars span:nth-child(1){top:8%;left:12%;animation-delay:.2s}.stars span:nth-child(2){top:15%;left:78%;animation-delay:1.1s}.stars span:nth-child(3){top:28%;left:30%;animation-delay:.7s}.stars span:nth-child(4){top:35%;left:65%;animation-delay:1.8s}.stars span:nth-child(5){top:52%;left:10%;animation-delay:.4s}.stars span:nth-child(6){top:60%;left:85%;animation-delay:2.1s}.stars span:nth-child(7){top:72%;left:22%;animation-delay:1.3s}.stars span:nth-child(8){top:80%;left:70%;animation-delay:2.6s}.stars span:nth-child(9){top:20%;left:50%;animation-delay:.9s}.stars span:nth-child(10){top:40%;left:5%;animation-delay:1.7s}.stars span:nth-child(11){top:12%;left:92%;animation-delay:.5s}.stars span:nth-child(12){top:66%;left:44%;animation-delay:1.4s}.stars span:nth-child(13){top:74%;left:58%;animation-delay:.8s}.stars span:nth-child(14){top:26%;left:14%;animation-delay:1.9s}.stars span:nth-child(15){top:48%;left:76%;animation-delay:.6s}.stars span:nth-child(16){top:86%;left:34%;animation-delay:2.2s}.stars span:nth-child(17){top:6%;left:56%;animation-delay:1s}.stars span:nth-child(18){top:58%;left:18%;animation-delay:1.6s}.stars span:nth-child(19){top:32%;left:88%;animation-delay:.3s}.stars span:nth-child(20){top:14%;left:38%;animation-delay:2s}.stars span:nth-child(21){top:68%;left:8%;animation-delay:1.2s}.stars span:nth-child(22){top:78%;left:88%;animation-delay:2.4s}.stars span:nth-child(23){top:44%;left:26%;animation-delay:.95s}.stars span:nth-child(24){top:54%;left:62%;animation-delay:1.55s}.stars span:nth-child(25){top:24%;left:72%;animation-delay:.35s}.stars span:nth-child(26){top:84%;left:46%;animation-delay:2.3s}.stars span:nth-child(27){top:10%;left:26%;animation-delay:1.25s}.stars span:nth-child(28){top:36%;left:94%;animation-delay:1.95s}.neon-grid{position:absolute;left:0;right:0;bottom:-20vh;height:60vh;perspective:800px;pointer-events:none}.neon-grid:before{content:"";position:absolute;inset:0;transform-origin:top center;transform:rotateX(65deg) translateZ(0);background:repeating-linear-gradient(to right,rgba(212,175,55,.1) 0px,rgba(212,175,55,.1) 2px,transparent 2px,transparent 40px),repeating-linear-gradient(to bottom,rgba(79,195,247,.12) 0px,rgba(79,195,247,.12) 2px,transparent 2px,transparent 40px);box-shadow:0 -10px 40px #d4af3726 inset;animation:gridScroll 14s linear infinite}@keyframes gridScroll{0%{background-position:0 0,0 0}to{background-position:200px 200px,0 240px}}.data-streams{position:absolute;inset:0;pointer-events:none;overflow:hidden}.data-streams span{position:absolute;width:2px;height:22vh;top:110%;background:linear-gradient(to top,#9c27b000,#9c27b0bf,#f4d03fe6);filter:blur(.3px);animation:streamRise 6s linear infinite}@keyframes streamRise{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-140vh);opacity:0}}.data-streams span:nth-child(odd){background:linear-gradient(to top,#4fc3f700,#4fc3f7bf,#f4d03fe6)}.data-streams span:nth-child(1){left:6%;animation-delay:.2s;height:18vh}.data-streams span:nth-child(2){left:18%;animation-delay:1s;height:16vh}.data-streams span:nth-child(3){left:28%;animation-delay:.6s;height:24vh}.data-streams span:nth-child(4){left:38%;animation-delay:1.8s;height:20vh}.data-streams span:nth-child(5){left:50%;animation-delay:.9s;height:26vh}.data-streams span:nth-child(6){left:60%;animation-delay:2.2s;height:22vh}.data-streams span:nth-child(7){left:70%;animation-delay:1.4s;height:20vh}.data-streams span:nth-child(8){left:78%;animation-delay:2.6s;height:24vh}.data-streams span:nth-child(9){left:86%;animation-delay:.4s;height:22vh}.data-streams span:nth-child(10){left:12%;animation-delay:2s;height:14vh}.data-streams span:nth-child(11){left:32%;animation-delay:1.2s;height:19vh}.data-streams span:nth-child(12){left:46%;animation-delay:2.3s;height:17vh}.data-streams span:nth-child(13){left:66%;animation-delay:.7s;height:23vh}.data-streams span:nth-child(14){left:90%;animation-delay:1.7s;height:21vh}.ai-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:200px 3rem 180px;z-index:1;box-sizing:border-box;perspective:1000px;overflow:hidden}.ai-container:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 40%,rgba(212,175,55,.02) 0%,transparent 70%);animation:depthPulse 20s ease-in-out infinite;pointer-events:none}@keyframes depthPulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}.ai-header{animation:fadeDown .7s ease .12s both}.ai-content{animation:fadeUp .8s ease .22s both}@keyframes fadeUp{0%{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeDown{0%{opacity:0;transform:translate3d(0,-12px,0)}to{opacity:1;transform:translateZ(0)}}.ai-header{text-align:center;margin-top:2.5rem;margin-bottom:3rem}.ai-title{font-size:3rem;font-weight:700;background:linear-gradient(45deg,#d4af37,#f4d03f,#ddac57);background-size:200% 200%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:goldShimmer 3s ease-in-out infinite;margin:0;text-shadow:0 0 30px rgba(212,175,55,.5)}.ai-subtitle{font-size:1.2rem;color:#f4d03f;opacity:.8;font-weight:300;letter-spacing:.1em;margin-top:.5rem}.ai-content{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:1400px;min-height:calc(100vh - 260px);padding:1rem}.ai-interface-layout{display:grid;grid-template-columns:280px 1fr 280px;grid-gap:8rem;width:100%;max-width:2000px;height:80vh;align-items:start;justify-items:center;padding:1rem 4rem;box-sizing:border-box;margin:0 auto}.hud-top{position:absolute;top:130px;left:0;right:0;height:56px;display:flex;align-items:center;z-index:90;pointer-events:none;animation:hudFlicker 8s ease-in-out infinite}@keyframes hudFlicker{0%,95%,to{opacity:1}96%,98%{opacity:.95}97%{opacity:.85}}.hud-top-inner{pointer-events:none;margin:0 auto;width:min(1400px,100%);padding:0 16px;display:flex;align-items:center;gap:12px}.hud-brand{font-weight:700;letter-spacing:.12em;color:#d4af37;text-shadow:0 0 14px rgba(212,175,55,.4)}.hud-divider{flex:1;height:1px;background:linear-gradient(90deg,#d4af3700,#d4af3766,#d4af3700)}.mode-pill{pointer-events:auto;padding:6px 12px;border-radius:999px;border:1px solid rgba(212,175,55,.4);color:#d4af37;background:#00000059;font-weight:600;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.mode-pill.production{color:#4caf50;border-color:#4caf5066}.hud-states{display:flex;gap:6px;margin-left:auto}.state-pill{padding:4px 10px;border-radius:999px;border:1px solid rgba(212,175,55,.25);color:#d4af3799;font-size:.75rem;pointer-events:auto}.state-pill.active{color:#f4d03f;border-color:#f4d03f8c;box-shadow:0 0 10px #f4d03f59 inset,0 0 12px #f4d03f33;animation:statePulse 2s ease-in-out infinite}@keyframes statePulse{0%,to{box-shadow:0 0 10px #f4d03f59 inset,0 0 12px #f4d03f33}50%{box-shadow:0 0 15px #f4d03f80 inset,0 0 20px #f4d03f4d}}.hud-bottom{position:absolute;left:0;right:0;bottom:120px;z-index:90;display:flex;justify-content:center}.hud-bottom-inner{width:min(1200px,95%);display:flex;flex-direction:column;gap:8px}.timeline{position:relative;height:10px;border:1px solid rgba(212,175,55,.25);border-radius:10px;overflow:hidden;background:#00000059}.timeline span{position:absolute;top:0;bottom:0;width:20%;background:linear-gradient(90deg,#d4af3700,#d4af3773,#d4af3700);filter:blur(1px);animation:sweepLine 6s linear infinite}.timeline span:nth-child(2){left:-10%;animation-delay:.8s}.timeline span:nth-child(3){left:-20%;animation-delay:1.6s}.timeline span:nth-child(4){left:-30%;animation-delay:2.4s}.timeline span:nth-child(5){left:-40%;animation-delay:3.2s}.timeline span:nth-child(6){left:-50%;animation-delay:4s}.timeline span:nth-child(7){left:-60%;animation-delay:4.8s}.timeline span:nth-child(8){left:-70%;animation-delay:5.6s}@keyframes sweepLine{to{transform:translate(160%)}}.hud-energy{position:relative;height:8px;border:1px solid rgba(79,195,247,.25);border-radius:8px;overflow:hidden;background:#00000059}.energy-fill{position:absolute;top:0;bottom:0;left:0;width:calc(var(--level, 0) * 100%);background:linear-gradient(90deg,#4fc3f7,#f4d03f);box-shadow:0 0 12px #4fc3f773;transition:width .15s ease}.hud-panel{position:relative}.hud-panel:before,.hud-panel:after{content:"";position:absolute;width:32px;height:12px}.hud-panel:before{top:10px;left:10px;border-top:2px solid rgba(212,175,55,.35);border-left:2px solid rgba(212,175,55,.35)}.hud-panel:after{bottom:10px;right:10px;border-bottom:2px solid rgba(212,175,55,.35);border-right:2px solid rgba(212,175,55,.35)}.mini-panel{margin-top:1rem}.session-panel .session-metrics{list-style:none;padding:0;margin:0 0 .75rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.session-panel .session-metrics li{padding:.4rem .6rem;border:1px solid rgba(212,175,55,.2);border-radius:8px;color:#d4af3799;font-size:.85rem}.session-panel .session-metrics li.on{color:#f4d03f;border-color:#f4d03f80;box-shadow:inset 0 0 10px #f4d03f26}.session-level{position:relative;height:10px;border:1px solid rgba(212,175,55,.25);border-radius:10px;background:#0000004d;overflow:hidden}.session-level:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#d4af371a,#f4d03f99,#d4af371a);width:calc(var(--level, 0) * 100%);box-shadow:0 0 10px #f4d03f59;transition:width .1s ease}.circuit-layer{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(212,175,55,.06) 1px,transparent 1px) 0 0 / 120px 120px,linear-gradient(0deg,rgba(212,175,55,.06) 1px,transparent 1px) 0 0 / 120px 120px,radial-gradient(circle at 25% 25%,rgba(212,175,55,.02) 1px,transparent 2px) 0 0 / 60px 60px;opacity:.3;mix-blend-mode:screen;animation:circuitPulse 12s ease-in-out infinite}@keyframes circuitPulse{0%,to{opacity:.3;background-position:0 0,0 0,0 0}50%{opacity:.5;background-position:60px 60px,30px 30px,15px 15px}}.left-panel{display:flex;flex-direction:column;justify-content:flex-start;height:auto;width:100%;max-width:280px;gap:3.5rem;position:relative;z-index:10;transform:translate(-40px) rotate(-1.5deg);transform-origin:center top}.right-panel{display:flex;flex-direction:column;justify-content:flex-start;height:auto;width:100%;max-width:280px;gap:3.5rem;position:relative;z-index:10;transform:translate(40px) rotate(1.5deg);transform-origin:center top}.center-panel{display:flex;justify-content:center;align-items:center;height:100%;position:relative;z-index:15;padding:2rem}.setting-panel,.instruction-panel{position:relative;overflow:hidden}.setting-panel:after,.instruction-panel:after{content:"";position:absolute;top:-50%;left:-10%;width:120%;height:200%;background:repeating-linear-gradient(45deg,rgba(212,175,55,.03) 0px,rgba(212,175,55,.03) 1px,transparent 1px,transparent 20px);pointer-events:none;animation:dataFlow 15s linear infinite;opacity:.6}@keyframes dataFlow{0%{transform:translate(-100px) translateY(-100px)}to{transform:translate(100px) translateY(100px)}}.hud-panel:before,.hud-panel:after{animation:borderGlow 4s ease-in-out infinite alternate}@keyframes borderGlow{0%{border-color:#d4af374d;box-shadow:0 0 5px #d4af3733}to{border-color:#d4af3799;box-shadow:0 0 15px #d4af3766}}@media (max-width: 1600px){.ai-interface-layout{grid-template-columns:280px 1fr 280px;grid-gap:3rem;max-width:1400px}}@media (max-width: 1400px){.ai-interface-layout{grid-template-columns:260px 1fr 260px;grid-gap:2rem;max-width:1200px}}@media (max-width: 1200px){.ai-interface-layout{display:flex;flex-direction:column;align-items:center;gap:3rem;padding:1rem}.left-panel,.right-panel{width:100%;max-width:600px;transform:none}.center-panel{order:1;width:100%;max-width:600px}.left-panel{order:2;flex-direction:row;gap:1.5rem}.right-panel{order:3;flex-direction:row;gap:1.5rem}.left-panel .setting-panel:not(.session-panel),.left-panel .session-panel,.right-panel .instruction-panel.hud-panel,.right-panel .mini-panel{transform:none;margin-top:0}}@media (max-width: 768px){.left-panel,.right-panel{flex-direction:column}.setting-panel,.instruction-panel{padding:1rem;margin:0}.instruction-panel li,.user-info-display p{font-size:.85rem}.aurora-layer{animation-duration:25s}.data-streams{opacity:.3}.setting-panel:after,.instruction-panel:after{display:none}}.voice-recorder{display:flex;flex-direction:column;align-items:center;width:100%}.voice-interface{position:relative;display:flex;flex-direction:column;align-items:center;gap:2rem}.voice-visualizer{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center}.voice-visualizer:before{content:"";position:absolute;inset:-15px;border-radius:50%;background:conic-gradient(from 0deg,#d4af3700,#d4af3766 30deg,#f4d03f99,#d4af3766 60deg,#d4af3700 90deg);filter:blur(8px);animation:scanRotate 8s linear infinite;pointer-events:none}.voice-visualizer:after{content:"";position:absolute;inset:-25px;border-radius:50%;background:conic-gradient(from 180deg,#4fc3f700,#4fc3f733,#4fc3f700 40deg);filter:blur(12px);animation:scanRotate 12s linear infinite reverse;pointer-events:none;opacity:.7}@keyframes scanRotate{to{transform:rotate(360deg)}}.holo-rings{position:absolute;inset:0;pointer-events:none}.holo-rings span{position:absolute;border-radius:50%;inset:12%;border:1px solid rgba(212,175,55,.28);box-shadow:0 0 10px #d4af372e inset;animation:holoSpin 8s linear infinite}.holo-rings span:nth-child(2),.holo-rings span:nth-child(3){display:none}@keyframes holoSpin{to{transform:rotate(360deg)}}.reticle{position:absolute;inset:0;pointer-events:none}.reticle:before,.reticle:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(212,175,55,.45) 0 2px,transparent 3px),linear-gradient(to right,#d4af3740,#d4af3700),linear-gradient(to left,#d4af3740,#d4af3700);width:90%;height:2px}.reticle:after{width:2px;height:90%;background:radial-gradient(circle,rgba(212,175,55,.45) 0 2px,transparent 3px),linear-gradient(to bottom,#d4af3740,#d4af3700),linear-gradient(to top,#d4af3740,#d4af3700)}.radial-grid{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(212,175,55,.12),transparent 60%),repeating-radial-gradient(circle at 50% 50%,rgba(212,175,55,.16) 0 1px,transparent 1px 22px),repeating-conic-gradient(rgba(212,175,55,.18) 0 1deg,transparent 1deg 12deg);filter:blur(.2px) saturate(110%);pointer-events:none}.radial-ticks{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(244,208,63,.45) 0 1deg,transparent 1deg 6deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 45%,#000 46% 52%,transparent 53% 100%);mask:radial-gradient(circle at 50% 50%,transparent 0 45%,#000 46% 52%,transparent 53% 100%);animation:ticksSpin 22s linear infinite;pointer-events:none}@keyframes ticksSpin{to{transform:rotate(-360deg)}}.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#f4d03f00,#f4d03f24 10deg,#f4d03f00 22deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 24%,#000 25%);mask:radial-gradient(circle at 50% 50%,transparent 0 24%,#000 25%);filter:blur(1.5px);animation:sweepRotate 6s linear infinite;pointer-events:none}@keyframes sweepRotate{to{transform:rotate(360deg)}}.orbits{display:none}@keyframes satelliteSpin{to{transform:translate(-50%) rotate(360deg)}}@keyframes orbitPulse{0%,to{box-shadow:0 0 #4fc3f726}50%{box-shadow:0 0 12px 2px #4fc3f740}}.audio-rings{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.audio-ring{position:absolute;top:50%;left:50%;border:2px solid;border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1)}.audio-ring.ring-0{width:80px;height:80px;margin-top:-40px;margin-left:-40px;border-color:#d4af37;box-shadow:0 0 20px #d4af3780}.audio-ring.ring-1{width:120px;height:120px;margin-top:-60px;margin-left:-60px;border-color:#f4d03f;box-shadow:0 0 15px #f4d03f66}.audio-ring.ring-2{width:160px;height:160px;margin-top:-80px;margin-left:-80px;border-color:#ddac57;box-shadow:0 0 12px #ddac574d}.audio-ring.ring-3{width:200px;height:200px;margin-top:-100px;margin-left:-100px;border-color:#c9932c;box-shadow:0 0 10px #c9932c40}.audio-ring.ring-4{width:240px;height:240px;margin-top:-120px;margin-left:-120px;border-color:#b8860b;box-shadow:0 0 8px #b8860b33}.audio-ring.active{animation:pulseRing 2s ease-in-out infinite}.audio-ring.ai-responding{border-color:#d4af37!important;box-shadow:0 0 15px #d4af3759!important;animation:aiRingPulse .9s ease-in-out infinite}.audio-ring.generating-ring{border-color:#ddac57!important;box-shadow:0 0 15px #ddac5759!important;animation:generatingRingPulse 1.2s ease-in-out infinite}.central-orb{position:relative;width:80px;height:80px;cursor:pointer;transition:all .3s ease;z-index:10}.central-orb:hover{transform:scale(1.1)}.orb-inner{width:100%;height:100%;position:relative;border-radius:50%;background:radial-gradient(circle at 30% 30%,#f4d03f,#d4af37);box-shadow:0 0 30px #d4af3799,inset 0 0 20px #ffffff1a;transition:all .3s ease;border:2px solid #d4af37;transform-style:preserve-3d}.orb-inner:after{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.2),transparent 60%),radial-gradient(circle at 70% 70%,rgba(212,175,55,.1),transparent 50%);filter:blur(10px);z-index:-1;animation:orbAura 6s ease-in-out infinite}@keyframes orbAura{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}.central-orb:hover .orb-inner{transform:translateZ(8px) scale(1.03)}.orb-inner.listening{background:radial-gradient(circle at 30% 30%,#f4e37d,#ddac57);box-shadow:0 0 40px #f4e37dcc,inset 0 0 20px #fff3;animation:orbPulse 1.5s ease-in-out infinite;border-color:#f4d03f}.orb-inner.ai-speaking{background:radial-gradient(circle at 30% 30%,#f4d03f,#d4af37);box-shadow:0 0 40px #d4af37cc,inset 0 0 20px #fff3;animation:aiSpeakingPulse .9s ease-in-out infinite;border-color:#d4af37}.orb-inner.generating{background:radial-gradient(circle at 30% 30%,#f0c75e,#c99a2c);box-shadow:0 0 40px #d4af37cc,inset 0 0 20px #ffffff26;animation:generatingPulse 1.2s ease-in-out infinite;border-color:#d4af37}.orb-pulse{position:absolute;inset:-10px;border:2px solid #d4af37;border-radius:50%;opacity:0;animation:orbRipple 2s ease-out infinite}.orb-inner.listening .orb-pulse{border-color:#f4d03f}.orb-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center}.mic-icon{width:24px;height:24px;fill:#333;transition:all .3s ease}.mic-icon.active{fill:#333;filter:drop-shadow(0 0 10px rgba(51,51,51,.8))}.ai-speaker-icon{width:24px;height:24px;fill:#333;transition:all .3s ease}.ai-speaker-icon.active{fill:#333;filter:drop-shadow(0 0 10px rgba(51,51,51,.8));animation:speakerPulse .8s ease-in-out infinite}.generating-icon{width:24px;height:24px;fill:#333;transition:all .3s ease}.generating-icon.active{fill:#333;filter:drop-shadow(0 0 10px rgba(51,51,51,.8));animation:generatingRotate 1.5s linear infinite}.voice-status{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.status-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#d4af371a;border:1px solid rgba(212,175,55,.3);border-radius:20px;transition:all .3s ease}.status-indicator.listening{background:#f4d03f33;border-color:#f4d03f80;box-shadow:0 0 20px #f4d03f4d}.status-dot{width:8px;height:8px;border-radius:50%;background:#d4af37;transition:all .3s ease}.status-indicator.listening .status-dot{background:#f4d03f;animation:statusBlink 1s ease-in-out infinite}.status-text{color:#d4af37;font-size:.9rem;font-weight:500;letter-spacing:.05em}.status-indicator.listening .status-text{color:#f4d03f}.voice-level-bar{width:300px;padding:.5rem;background:#0000004d;border-radius:15px;border:1px solid rgba(212,175,55,.2)}.level-bars{display:flex;gap:2px;height:20px;align-items:end}.level-bar{flex:1;height:4px;background:#d4af3733;border-radius:2px;transition:all .1s ease}.level-bar.active{background:linear-gradient(90deg,#d4af3700,#d4af37e6,#f4d03f00),linear-gradient(to top,#d4af37,#f4d03f);background-size:180% 100%,100% 100%;background-position:-50% 0,0 0;box-shadow:0 0 6px #d4af37bf;animation:barShimmer 1.4s linear infinite}@keyframes barShimmer{0%{background-position:-60% 0,0 0}to{background-position:160% 0,0 0}}.user-settings{width:100%}.setting-panel{background:linear-gradient(135deg,#2a2a2acc,#1c1c1ce6),radial-gradient(circle at 20% 20%,rgba(212,175,55,.05),transparent 60%);border:1px solid rgba(212,175,55,.3);border-radius:15px;padding:1.5rem;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);height:fit-content;animation:floatY 6s ease-in-out infinite;position:relative;transition:all .3s ease}.setting-panel:hover{transform:translateY(-2px);box-shadow:0 20px 60px #00000080,inset 0 0 0 1px #d4af3733,0 0 40px #d4af3726;border-color:#d4af3780}.setting-panel:before,.setting-panel:after{content:"";position:absolute;width:32px;height:12px;border-top:2px solid rgba(212,175,55,.4);border-left:2px solid rgba(212,175,55,.4);top:10px;left:10px}.setting-panel:after{inset:auto 10px 10px auto;border-left:0;border-top:0;border-bottom:2px solid rgba(212,175,55,.4);border-right:2px solid rgba(212,175,55,.4)}.setting-panel h3{color:#f4d03f;font-size:1.2rem;margin:0 0 1rem;text-align:center;font-weight:600}.user-info-display{text-align:center}.user-info-display p{color:#f4d03fe6;font-size:.95rem;margin:.5rem 0;line-height:1.4}.user-info-display strong{color:#d4af37}.user-info-display small{color:#f4d03f99;font-size:.8rem;display:block;margin-top:.5rem}.webhook-mode{padding:.3rem .8rem;border-radius:15px;font-size:.85rem!important;font-weight:600;margin:.7rem 0!important}.webhook-mode.test{background:#ffc10733;border:1px solid rgba(255,193,7,.4);color:#ffc107}.webhook-mode.production{background:#4caf5033;border:1px solid rgba(76,175,80,.4);color:#4caf50}.ai-instructions{width:100%}.instruction-panel{background:linear-gradient(135deg,#2a2a2acc,#1c1c1ce6),radial-gradient(circle at 80% 80%,rgba(79,195,247,.04),transparent 60%);border:1px solid rgba(212,175,55,.3);border-radius:15px;padding:1.5rem;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);height:fit-content;animation:floatY 7.5s ease-in-out infinite reverse;position:relative;transition:all .3s ease}.instruction-panel:hover{transform:translateY(-2px);box-shadow:0 20px 60px #00000080,inset 0 0 0 1px #d4af3733,0 0 40px #4fc3f71a;border-color:#d4af3780}.instruction-panel:before,.instruction-panel:after{content:"";position:absolute;width:32px;height:12px;border-top:2px solid rgba(244,208,63,.3);border-right:2px solid rgba(244,208,63,.3);top:10px;right:10px}.instruction-panel:after{inset:auto auto 10px 10px;border-right:0;border-top:0;border-bottom:2px solid rgba(244,208,63,.3);border-left:2px solid rgba(244,208,63,.3)}.hud-layout{align-items:start;padding-top:20px}.left-panel .setting-panel:not(.session-panel){position:relative;z-index:10;animation:floatY 7.5s ease-in-out infinite;animation-delay:0s;margin-top:1rem;margin-bottom:2rem;transform:rotate(.8deg)}.left-panel .session-panel{position:relative;z-index:10;animation:floatY 8.1s ease-in-out infinite;animation-delay:1.2s;margin-top:2rem;transform:rotate(-.5deg)}.right-panel .instruction-panel.hud-panel{position:relative;z-index:10;animation:floatY 6.8s ease-in-out infinite;animation-delay:2.1s;margin-top:3rem;margin-bottom:2rem;transform:rotate(-.6deg)}.right-panel .mini-panel{position:relative;z-index:10;animation:floatY 8.2s ease-in-out infinite;animation-delay:.7s;margin-top:1rem;transform:rotate(.9deg)}.setting-panel{box-shadow:0 15px 50px #0006,inset 0 0 0 1px #d4af371f,0 0 30px #d4af3714;will-change:transform}@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.instruction-panel h3{color:#f4d03f;font-size:1.2rem;margin:0 0 1rem;text-align:center;font-weight:600}.instruction-panel ul{list-style:none;padding:0;margin:0}.instruction-panel li{color:#f4d03fcc;font-size:.9rem;line-height:1.6;margin-bottom:.5rem;padding-left:1.5rem;position:relative}.instruction-panel li:before{content:"▶";position:absolute;left:0;color:#d4af37;font-size:.8rem}@keyframes goldShimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes pulseRing{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}@keyframes orbPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes orbRipple{0%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes aiSpeakingPulse{0%,to{transform:scale(1);box-shadow:0 0 40px #4fc3f7cc}50%{transform:scale(1.08);box-shadow:0 0 60px #4fc3f7}}@keyframes speakerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes aiRingPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:.9}}@keyframes generatingPulse{0%,to{transform:scale(1);box-shadow:0 0 40px #9c27b0cc}33%{transform:scale(1.05);box-shadow:0 0 50px #9c27b0}66%{transform:scale(.98);box-shadow:0 0 30px #9c27b099}}@keyframes generatingRotate{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}@keyframes generatingRingPulse{0%,to{transform:scale(1);opacity:.4}25%{transform:scale(1.05);opacity:.8}50%{transform:scale(.95);opacity:.6}75%{transform:scale(1.08);opacity:.9}}@keyframes statusBlink{0%,to{opacity:1}50%{opacity:.3}}@media (max-width: 768px){.ai-title{font-size:2rem}.voice-visualizer{width:250px;height:250px}.audio-ring.ring-0{width:60px;height:60px}.audio-ring.ring-1{width:90px;height:90px}.audio-ring.ring-2{width:120px;height:120px}.audio-ring.ring-3{width:150px;height:150px}.audio-ring.ring-4{width:180px;height:180px}.central-orb{width:60px;height:60px}.voice-level-bar{width:250px}}@media (max-width: 480px){.ai-container{padding:1rem}.voice-visualizer{width:200px;height:200px}.audio-ring.ring-0{width:50px;height:50px}.audio-ring.ring-1{width:70px;height:70px}.audio-ring.ring-2{width:90px;height:90px}.audio-ring.ring-3{width:110px;height:110px}.audio-ring.ring-4{width:130px;height:130px}.voice-level-bar{width:200px}}.debug-toggle-button{position:fixed;bottom:100px;right:20px;width:80px;height:35px;border-radius:8px;border:2px solid rgba(212,175,55,.4);background:linear-gradient(135deg,#000000d9,#2a2a2ad9),radial-gradient(circle at 30% 30%,rgba(212,175,55,.05),transparent 60%);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);color:#d4af37;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:9999;opacity:.7;box-shadow:0 4px 15px #0006;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.debug-toggle-button:hover{opacity:1;background:linear-gradient(135deg,#d4af3733,#f4d03f26),radial-gradient(circle at 30% 30%,rgba(212,175,55,.1),transparent 60%);border-color:#d4af37b3;box-shadow:0 0 25px #d4af3766,0 6px 20px #00000080;transform:translateY(-2px);color:#f4d03f}.debug-toggle-button:active{transform:translateY(0);box-shadow:0 0 30px #d4af3799,0 2px 10px #0009}.debug-toggle-button.active{opacity:1;background:linear-gradient(135deg,#f4d03f40,#d4af3733),radial-gradient(circle at 30% 30%,rgba(244,208,63,.15),transparent 60%);border-color:#f4d03fe6;box-shadow:0 0 30px #f4d03f99,inset 0 0 15px #f4d03f1a,0 6px 20px #00000080;color:#f4d03f;animation:debugActivePulse 2s ease-in-out infinite;transform:translateY(-1px)}@keyframes debugActivePulse{0%,to{box-shadow:0 0 30px #f4d03f99,inset 0 0 15px #f4d03f1a,0 6px 20px #00000080;border-color:#f4d03fe6}50%{box-shadow:0 0 40px #f4d03fcc,inset 0 0 20px #f4d03f33,0 6px 20px #00000080;border-color:#f4d03f}}.debug-icon{width:24px;height:24px;fill:currentColor}.debug-controls{margin-top:2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem;background:#0006;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:15px;border:1px solid rgba(212,175,55,.3);animation:debugSlideIn .3s ease-out}@keyframes debugSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.audio-controls{display:flex;gap:1rem;align-items:center}.control-button{width:50px;height:50px;border-radius:50%;border:2px solid #d4af37;background:linear-gradient(135deg,#d4af371a,#f4d03f1a);color:#d4af37;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.control-button:after{content:"";position:absolute;width:20px;height:20px;background:currentColor;opacity:.15;border-radius:50%;transform:scale(0);transition:transform .6s ease,opacity .6s ease}.control-button:active:after{transform:scale(6);opacity:0}.control-button:hover{background:linear-gradient(135deg,#d4af3733,#f4d03f33);box-shadow:0 0 20px #d4af374d;transform:scale(1.1)}.control-button.playing{background:linear-gradient(135deg,#d4af374d,#f4d03f4d);animation:playingPulse 2s ease-in-out infinite}.control-button.clear{border-color:#ff6b6b;color:#ff6b6b}.control-button.clear:hover{background:#ff6b6b33;box-shadow:0 0 20px #ff6b6b4d}.control-icon{width:20px;height:20px;fill:currentColor}@keyframes playingPulse{0%,to{box-shadow:0 0 20px #d4af374d}50%{box-shadow:0 0 30px #d4af3799}}.vad-controls{display:flex;flex-direction:column;gap:1rem;align-items:center;width:100%;max-width:300px}.vad-toggle{display:flex;align-items:center}.toggle-label{display:flex;align-items:center;gap:.5rem;color:#d4af37;font-size:.9rem;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-label input[type=checkbox]{display:none}.toggle-slider{width:50px;height:26px;background:#ffffff1a;border-radius:26px;position:relative;transition:all .3s ease;border:1px solid rgba(212,175,55,.3)}.toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#d4af37;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003}.toggle-label input[type=checkbox]:checked+.toggle-slider{background:linear-gradient(135deg,#d4af374d,#f4d03f4d);border-color:#d4af37}.toggle-label input[type=checkbox]:checked+.toggle-slider:before{transform:translate(24px);background:#f4d03f;box-shadow:0 2px 8px #d4af3766}.vad-threshold{width:100%}.threshold-label{display:flex;flex-direction:column;gap:.5rem;color:#d4af37;font-size:.9rem}.threshold-slider{width:100%;height:6px;background:#ffffff1a;border-radius:3px;outline:none;border:none;cursor:pointer;-webkit-appearance:none;appearance:none}.threshold-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#d4af37,#f4d03f);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #d4af374d;transition:all .3s ease}.threshold-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 2px 12px #d4af3780}.threshold-slider::-moz-range-thumb{width:18px;height:18px;background:linear-gradient(135deg,#d4af37,#f4d03f);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #d4af374d}@media (max-width: 768px){.debug-controls{padding:1rem;gap:1rem}.control-button{width:40px;height:40px}.control-icon{width:16px;height:16px}.vad-controls{max-width:250px}}.status-indicator.recording{background:linear-gradient(135deg,#ff6b6b33,#ff572233);border-color:#ff6b6b}.status-indicator.recording .status-dot{background:#ff6b6b;animation:recordingPulse 1s ease-in-out infinite}.status-indicator.processing{background:linear-gradient(135deg,#2196f333,#1e88e533);border-color:#2196f3}.status-indicator.processing .status-dot{background:#2196f3;animation:processingPulse 1.5s ease-in-out infinite}@keyframes recordingPulse{0%,to{transform:scale(1);box-shadow:0 0 #ff6b6bb3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #ff6b6b00}}@keyframes processingPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.7}}.central-orb .orb-inner.listening.recording{background:linear-gradient(135deg,#ff6b6b4d,#ff57224d);box-shadow:0 0 30px #ff6b6b80,inset 0 0 20px #ff6b6b33}.central-orb .orb-inner.listening.processing{background:linear-gradient(135deg,#2196f34d,#1e88e54d);box-shadow:0 0 30px #2196f380,inset 0 0 20px #2196f333}.audio-ring.recording{border-color:#ff6b6b99;box-shadow:0 0 20px #ff6b6b66}.audio-ring.processing{border-color:#2196f399;box-shadow:0 0 20px #2196f366}.noise-info{margin-top:1rem;padding:.8rem;background:#0003;border-radius:10px;border:1px solid rgba(212,175,55,.1)}.noise-stats{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:#d4af37cc;font-family:Courier New,monospace}.noise-stats span{padding:.2rem .5rem;background:#d4af370d;border-radius:4px;border-left:2px solid rgba(212,175,55,.3)}.status-indicator.calibrating{background:linear-gradient(135deg,#ffc10733,#ffeb3b33);border-color:#ffc107}.status-indicator.calibrating .status-dot{background:#ffc107;animation:calibrationPulse 2s ease-in-out infinite}@keyframes calibrationPulse{0%,to{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.2) rotate(180deg);opacity:.7}}.recalibrate-section{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin-top:.5rem}.control-button.recalibrate{border-color:#ffc107;color:#ffc107;width:40px;height:40px}.control-button.recalibrate:hover:not(:disabled){background:#ffc10733;box-shadow:0 0 20px #ffc1074d}.control-button.recalibrate:disabled{opacity:.5;cursor:not-allowed}.recalibrate-label{font-size:.7rem;color:#d4af37cc;text-align:center}.control-button.test-mic{border-color:#00bcd4;color:#00bcd4}.control-button.test-mic:hover{background:#00bcd433;box-shadow:0 0 20px #00bcd44d}.profile-page{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:visible!important;margin:0;padding:2rem 0;box-sizing:border-box}.profile-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.profile-container{background:#fffffff2;padding:2rem;border-radius:12px;box-shadow:0 4px 20px #00000026;max-width:600px;width:100%;margin:2rem;position:relative;z-index:2}.profile-container h1{color:#333;margin-bottom:2rem;font-size:2.5rem;font-family:Akhand,serif;font-weight:900;text-transform:uppercase;letter-spacing:4px;text-align:center}.profile-content{display:flex;flex-direction:column;gap:2rem}.profile-section h2{color:#555;margin-bottom:1.5rem;font-size:1.5rem;font-family:Akhand,serif;font-weight:600;border-bottom:2px solid #ddac57;padding-bottom:.5rem}.form-group{margin-bottom:1.5rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#555;font-weight:600;font-family:Akhand,serif}.form-group input{width:100%;padding:.75rem;border:2px solid #ddd;border-radius:6px;font-size:1rem;transition:all .3s ease;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#ddac57;box-shadow:0 0 0 3px #ddac571a}.form-group input:disabled{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}.profile-actions{display:flex;justify-content:center;padding-top:1rem}.edit-btn{padding:.75rem 2rem;background:linear-gradient(135deg,#ddac57,#c49647);color:#fff;border:none;border-radius:6px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Akhand,serif;text-transform:uppercase;letter-spacing:1px}.edit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #ddac574d}.edit-actions{display:flex;gap:1rem}.save-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#28a745,#20963b);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Akhand,serif}.save-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #28a7454d}.cancel-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Akhand,serif}.cancel-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #dc35454d}@media (max-width: 768px){.profile-page{padding:1rem}.profile-container{margin:1rem;padding:1.5rem}.profile-container h1{font-size:2rem;letter-spacing:2px}.form-row{grid-template-columns:1fr}.edit-actions{flex-direction:column}}.webhook-config-inline{background:#fff;border-radius:8px;padding:0;width:100%}.webhook-status-section{padding:1.5rem;border-bottom:1px solid rgba(221,172,87,.2);background:#f8f9fa80}.status-toggle{display:flex;justify-content:space-between;align-items:center}.toggle-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;color:#333;font-weight:600;font-family:Akhand,serif;font-size:1.1rem}.toggle-input{width:18px;height:18px;cursor:pointer}.status-indicator{padding:.5rem 1rem;border-radius:20px;font-weight:600;font-size:.9rem;font-family:Akhand,serif}.status-indicator.enabled{background:#28a7451a;color:#28a745;border:1px solid rgba(40,167,69,.3)}.status-indicator.disabled{background:#dc35451a;color:#dc3545;border:1px solid rgba(220,53,69,.3)}.endpoints-section{padding:1.5rem}.endpoints-section h3{margin:0 0 1.5rem;color:#333;font-family:Akhand,serif;font-size:1.3rem;font-weight:600}.endpoints-list{display:flex;flex-direction:column;gap:1.5rem}.endpoint-item{border:1px solid rgba(221,172,87,.2);border-radius:6px;padding:1rem;background:#f8f9fa4d}.endpoint-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.endpoint-label{color:#333;font-weight:600;font-family:Akhand,serif;font-size:1rem}.endpoint-actions{display:flex;gap:.5rem;align-items:center}.test-btn,.copy-btn{padding:.4rem .8rem;border:none;border-radius:4px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:Akhand,serif}.test-btn{background:linear-gradient(135deg,#17a2b8,#138496);color:#fff}.test-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #17a2b84d}.copy-btn{background:linear-gradient(135deg,#6c757d,#5a6268);color:#fff}.copy-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #6c757d4d}.test-result{font-size:1.2rem;font-weight:700;padding:.2rem}.test-result.success{color:#28a745}.test-result.error{color:#dc3545}.endpoint-input{width:100%;padding:.75rem;border:2px solid #ddd;border-radius:4px;font-size:.95rem;transition:border-color .3s ease;box-sizing:border-box}.endpoint-input:focus{outline:none;border-color:#ddac57;box-shadow:0 0 0 3px #ddac571a}.webhook-actions{padding:1.5rem;border-top:1px solid rgba(221,172,87,.2);background:#f8f9fa4d;display:flex;justify-content:space-between;align-items:center}.test-all-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#ddac57,#c49647);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Akhand,serif;text-transform:uppercase;letter-spacing:1px}.test-all-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #ddac574d}.test-all-btn:disabled{opacity:.6;cursor:not-allowed}.webhook-info{text-align:right}.webhook-info p{margin:0 0 .25rem;color:#666;font-size:.9rem;font-family:Akhand,serif}@media (max-width: 768px){.endpoint-header{flex-direction:column;align-items:flex-start;gap:.75rem}.endpoint-actions{align-self:stretch;justify-content:space-between}.webhook-actions{flex-direction:column;gap:1rem;align-items:stretch}.webhook-info{text-align:center}.status-toggle{flex-direction:column;gap:1rem;align-items:flex-start}}.settings-page{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:visible!important;margin:0;padding:2rem 0;box-sizing:border-box}.settings-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.settings-container{background:#fffffff2;border-radius:12px;box-shadow:0 4px 20px #00000026;max-width:1200px;width:100%;margin:2rem;position:relative;z-index:2;overflow:hidden}.settings-container h1{color:#333;margin:0;padding:2rem 2rem 1rem;font-size:2.5rem;font-family:Akhand,serif;font-weight:900;text-transform:uppercase;letter-spacing:4px;text-align:center;border-bottom:2px solid rgba(221,172,87,.3)}.settings-layout{display:flex;min-height:600px}.settings-sidebar{width:280px;background:#f8f9fae6;border-right:2px solid rgba(221,172,87,.2);padding:1rem 0}.settings-nav{display:flex;flex-direction:column;gap:.25rem;padding:0 1rem}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:transparent;border:none;border-radius:6px;color:#555;font-family:Akhand,serif;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:left;width:100%;box-sizing:border-box}.nav-item:hover{background:#ddac571a;color:#333}.nav-item.active{background:linear-gradient(135deg,#ddac57,#c49647);color:#fff;font-weight:600}.nav-icon{font-size:1.1rem;width:20px;text-align:center}.settings-content{flex:1;padding:2rem;overflow-y:auto;max-height:600px}.settings-tab-content h2{color:#333;margin:0 0 .5rem;font-size:1.8rem;font-family:Akhand,serif;font-weight:700}.settings-tab-content>p{color:#666;margin:0 0 2rem;font-size:1rem;line-height:1.5}.webhook-integration{background:#fffc;border-radius:8px;padding:1rem;border:1px solid rgba(221,172,87,.2)}.settings-group{display:flex;flex-direction:column;gap:1.5rem}.setting-item{display:flex;justify-content:space-between;align-items:flex-start;padding:1rem;background:#fffc;border-radius:6px;border:1px solid rgba(221,172,87,.2)}.setting-info{flex:1;margin-right:1rem}.setting-info label{display:block;color:#333;font-weight:600;font-family:Akhand,serif;font-size:1.1rem;margin-bottom:.25rem}.setting-description{color:#666;font-size:.9rem;line-height:1.4}.setting-item input[type=checkbox]{width:18px;height:18px;cursor:pointer}.setting-item select{padding:.5rem;border:2px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;font-family:Akhand,serif;min-width:120px}.setting-item select:focus{outline:none;border-color:#ddac57}.data-action{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:#fffc;border-radius:6px;border:1px solid rgba(221,172,87,.2)}.data-action.danger-zone{border-color:#dc35454d;background:#fff5f5cc}.action-info h3{margin:0 0 .5rem;color:#333;font-family:Akhand,serif;font-size:1.2rem}.action-info p{margin:0;color:#666;font-size:.9rem;line-height:1.4}.settings-btn{padding:.75rem 1.5rem;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Akhand,serif;text-transform:uppercase;letter-spacing:1px}.settings-btn.export{background:linear-gradient(135deg,#17a2b8,#138496);color:#fff}.settings-btn.export:hover{transform:translateY(-2px);box-shadow:0 4px 15px #17a2b84d}.settings-btn.import{background:linear-gradient(135deg,#28a745,#20963b);color:#fff}.settings-btn.import:hover{transform:translateY(-2px);box-shadow:0 4px 15px #28a7454d}.settings-btn.danger{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff}.settings-btn.danger:hover{transform:translateY(-2px);box-shadow:0 4px 15px #dc35454d}@media (max-width: 768px){.settings-page{padding:1rem}.settings-container{margin:1rem}.settings-container h1{font-size:2rem;letter-spacing:2px;padding:1.5rem 1.5rem 1rem}.settings-layout{flex-direction:column;min-height:auto}.settings-sidebar{width:100%;border-right:none;border-bottom:2px solid rgba(221,172,87,.2)}.settings-nav{flex-direction:row;overflow-x:auto;gap:.5rem;padding:.5rem 1rem}.nav-item{white-space:nowrap;min-width:auto}.settings-content{padding:1.5rem;max-height:none}.setting-item,.data-action{flex-direction:column;align-items:flex-start;gap:1rem}.setting-info{margin-right:0}}.order-details-page{position:relative;width:100%;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow-x:hidden;overflow-y:auto;margin:0;padding:1rem;padding-top:50px;padding-bottom:2rem;box-sizing:border-box}.order-details-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.background-image{width:100%;height:100%;object-fit:cover;opacity:.8}.order-details-container{background:#fffffff2;padding:1.5rem;border-radius:12px;box-shadow:0 4px 20px #00000026;max-width:1000px;width:100%;margin:0 auto 150px;position:relative;z-index:2;box-sizing:border-box}.order-details-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #eee}.order-details-header h1{color:#333;margin:0;font-size:2.5rem;font-family:Akhand,serif;font-weight:900}.user-info{color:#666;font-size:1rem;font-weight:500}.loading-section{text-align:center;padding:3rem 0}.spinner{border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-section{text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:2px solid #ffc107;border-radius:12px;color:#856404}.error-section h3{margin:0 0 1rem;font-size:1.5rem}.order-content{display:grid;grid-template-columns:1fr;gap:1.5rem}.info-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:2px solid #dee2e6;border-radius:10px;padding:1.25rem;transition:all .3s ease}.info-card:hover{transform:translateY(-1px);box-shadow:0 3px 12px #0000001a}.info-card h2{margin:0 0 1rem;color:#333;font-size:1.3rem;font-weight:700;border-bottom:2px solid #ddd;padding-bottom:.5rem}.basic-info{border-color:#007bff;background:linear-gradient(135deg,#e3f2fd,#bbdefb)}.order-info{border-color:#28a745;background:linear-gradient(135deg,#e8f5e8,#d4edda)}.cargo-info{border-color:#ffc107;background:linear-gradient(135deg,#fff3cd,#ffeaa7)}.port-info{border-color:#17a2b8;background:linear-gradient(135deg,#d1ecf1,#b8daff)}.debug-info{border-color:#6c757d;background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}.info-item{display:flex;flex-direction:column;gap:.2rem}.info-item label{font-weight:600;color:#555;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.info-item span{color:#333;font-size:.95rem;font-weight:500;padding:.4rem;background:#ffffffb3;border-radius:5px;border:1px solid rgba(0,0,0,.1)}.debug-info details{margin-top:1rem}.debug-info summary{cursor:pointer;font-weight:600;color:#666;padding:.5rem;background:#ffffff80;border-radius:6px;border:1px solid #ddd}.debug-info pre{background:#f8f9fa;padding:1rem;border-radius:6px;border:1px solid #dee2e6;overflow-x:auto;font-size:.8rem;max-height:300px;overflow-y:auto}.actions-section{display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem;padding-top:1rem;border-top:2px solid #eee}.refresh-btn,.clear-btn{padding:.6rem 1.2rem;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.4rem}.refresh-btn{background:linear-gradient(135deg,#28a745,#20c997);color:#fff;box-shadow:0 2px 8px #28a7454d}.refresh-btn:hover{background:linear-gradient(135deg,#218838,#1e9ecb);transform:translateY(-2px);box-shadow:0 4px 16px #28a74566}.clear-btn{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;box-shadow:0 2px 8px #dc35454d}.clear-btn:hover{background:linear-gradient(135deg,#c82333,#a71e2a);transform:translateY(-2px);box-shadow:0 4px 16px #dc354566}@media (max-width: 768px){.order-details-page{padding:.5rem;padding-top:100px;padding-bottom:1rem}.order-details-container{padding:1rem;margin:0 auto}.order-details-header{flex-direction:column;gap:.5rem;text-align:center;margin-bottom:1rem}.order-details-header h1{font-size:2rem}.order-content{gap:1rem}.info-grid{grid-template-columns:1fr;gap:.5rem}.info-card{padding:1rem}.info-card h2{font-size:1.2rem;margin-bottom:.75rem}.actions-section{flex-direction:column;margin-top:1rem;padding-top:.75rem}.refresh-btn,.clear-btn{width:100%;justify-content:center}}@media (max-width: 480px){.order-details-page{padding:.25rem;padding-top:90px}.order-details-container{padding:.75rem}.order-details-header h1{font-size:1.8rem}.info-card{padding:.75rem}.info-card h2{font-size:1.1rem}.info-item label{font-size:.8rem}.info-item span{font-size:.9rem;padding:.3rem}}.cargo-types .cargo-list{display:flex;flex-direction:column;gap:.5rem}.cargo-types .cargo-item{background:#fff3cd;color:#856404;padding:.5rem .75rem;border-radius:6px;border-left:4px solid #ffc107;font-weight:500;display:block}.loading-ports .ports-list{display:flex;flex-direction:column;gap:.5rem}.loading-ports .port-item.loading{background:#d1ecf1;color:#0c5460;border-left:4px solid #17a2b8}.discharge-ports .ports-list{display:flex;flex-direction:column;gap:.5rem}.ports-grid{width:100%}.port-item{display:inline-block;padding:.4rem .6rem;border-radius:6px;font-weight:600}.port-item.loading{background:#d1ecf1;color:#0c5460;border-left:4px solid #17a2b8}.port-item.discharge{background:#f8d7da;color:#721c24;border-left:4px solid #dc3545}.eta-cell{padding:.4rem .6rem;background:#ffffffd9;border-radius:6px;border:1px solid rgba(0,0,0,.06);text-align:left;color:#138496;font-weight:700}.discharge-ports .port-item{background:#e8f4fd;color:#0056b3;padding:.5rem .75rem;border-radius:6px;border-left:4px solid #007bff;font-weight:500;display:block}.discharge-ports .port-item.discharge{background:#f8d7da;color:#721c24;border-left:4px solid #dc3545}.discharge-ports .port-item:not(:last-child){margin-bottom:.25rem}@media (max-width: 768px){.cargo-types .cargo-list,.loading-ports .ports-list,.discharge-ports .ports-list{gap:.25rem}.cargo-types .cargo-item,.loading-ports .port-item,.discharge-ports .port-item{padding:.4rem .6rem;font-size:.9rem}}