*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.inset-0{inset:0}.z-50{z-index:50}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.max-h-\[85vh\]{max-height:85vh}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-full{width:100%}.max-w-6xl{max-width:72rem}.max-w-none{max-width:none}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.rounded-lg{border-radius:.5rem}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-\[var\(--border\)\]{border-color:var(--border)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-1{padding:.25rem}.p-10{padding:2.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.tracking-wide{letter-spacing:.025em}.text-\[var\(--text\)\]{color:var(--text)}.text-\[var\(--text-dim\)\]{color:var(--text-dim)}.hover\:text-\[var\(--text\)\]:hover{color:var(--text)}@media (min-width:768px){.md\:h-14{height:3.5rem}.md\:w-14{width:3.5rem}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-6{padding:1.5rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:p-8{padding:2rem}}@media (min-width:1280px){.xl\:p-10{padding:2.5rem}}

    :root{
        --bg:#000000;
        --panel:#000000;
        --panel-2:#595959;
        --border:#7F7F7F;
        --text:#FFFFFF;
        --text-dim:#A6A6A6;
        --hazard:#BF973F;
        --hazard-dim:#CFB16F;
        --blue:#003DA6;
        --blue-deep:#003DA6;
        --red:#EF434D;
        --green:#04A75C;
        --radius:10px;
    }
    html.theme-light{
        --bg:#FFFFFF;
        --panel:#FFFFFF;
        --panel-2:#F2F2F2;
        --border:#D9D9D9;
        --text:#000000;
        --text-dim:#7F7F7F;
        --hazard:#BF973F;
        --hazard-dim:#DFCB9F;
        --blue:#003DA6;
        --blue-deep:#003DA6;
        --red:#EF434D;
        --green:#04A75C;
    }
    html.theme-light body{
        background:
            radial-gradient(1200px 600px at 10% -10%, rgba(0,61,166,0.05), transparent 60%),
            radial-gradient(1000px 500px at 100% 0%, rgba(191,151,63,0.06), transparent 55%),
            var(--bg);
    }
    html.theme-light .msg-row.user .bubble{color:#FFFFFF;}
    html.theme-light .btn-hazard{color:#000000;}
    html.theme-light .btn-blue{color:#FFFFFF;}
    html.theme-light .btn-danger{color:#FFFFFF;}
    *{box-sizing:border-box;}
    body{
        font-family:'Vazirmatn', Tahoma, sans-serif;
        background:
            radial-gradient(1200px 600px at 10% -10%, rgba(0,61,166,0.08), transparent 60%),
            radial-gradient(1000px 500px at 100% 0%, rgba(191,151,63,0.07), transparent 55%),
            var(--bg);
        color:var(--text);
        min-height:100vh;
    }
    html[lang="en"] body{font-family:'Inter','Vazirmatn',sans-serif;}
    .mono{font-family:'JetBrains Mono','Vazirmatn',monospace;}
    .display{font-family:'Rajdhani','Vazirmatn',sans-serif; letter-spacing:.3px;}
    #mainTitle{color:var(--blue);}

    .hazard-strip{
        height:6px;
        background:repeating-linear-gradient(135deg,var(--hazard) 0 14px, var(--blue-deep, var(--blue)) 14px 28px);
        border-radius:3px;
        opacity:.95;
    }
    .hazard-corner{position:relative;}
    .hazard-corner::before,.hazard-corner::after{
        content:"";
        position:absolute; width:14px; height:14px;
        border:2px solid var(--hazard-dim);
        opacity:.55;
    }
    html[dir="rtl"] .hazard-corner::before{top:-1px;right:-1px;border-left:none;border-bottom:none;}
    html[dir="rtl"] .hazard-corner::after{bottom:-1px;left:-1px;border-right:none;border-top:none;}
    html[dir="ltr"] .hazard-corner::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
    html[dir="ltr"] .hazard-corner::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

    .panel{
        background:var(--panel);
        border:1px solid var(--border);
        border-top:2px solid var(--blue);
        border-radius:var(--radius);
    }
    .kpi-card{
        background:linear-gradient(180deg, var(--panel-2), var(--panel));
        border:1px solid var(--border);
        border-radius:var(--radius);
        padding:1.25rem 1.4rem;
        position:relative;
        overflow:hidden;
    }
    .kpi-card .bar{position:absolute; top:0; right:0; left:0; height:3px;}
    .kpi-card .label{color:var(--text-dim); font-size:.78rem; letter-spacing:.5px;}
    .kpi-card h2{font-family:'JetBrains Mono',monospace; font-weight:600; letter-spacing:.5px; color:var(--hazard);}
    html.theme-light .kpi-card h2{color:var(--blue);}

    .chart-container{
        background:var(--panel);
        border:1px solid var(--border);
        border-top:2px solid var(--hazard-dim);
        border-radius:var(--radius);
        padding:1.25rem;
    }
    .chart-container h2{color:var(--blue);}
    #chartsWrapper{transition:opacity .3s ease;}
    #chartsWrapper.refreshing{opacity:.35;}
    .kpi-card h2{transition:color .2s ease;}
    .filter-select{
        border:1px solid var(--border);
        background:var(--panel-2);
        color:var(--text);
        padding:.55rem .7rem;
        border-radius:6px;
        width:100%;
        font-size:.88rem;
    }
    .filter-select:focus{outline:2px solid var(--blue); outline-offset:1px;}
    label.field-label{
        color:var(--text-dim); font-size:.72rem; letter-spacing:.5px; margin-bottom:.35rem; display:block;
        font-family:'Rajdhani','Vazirmatn',sans-serif; font-weight:600;
    }

    .btn{
        display:inline-flex; align-items:center; gap:.4rem;
        padding:.55rem .95rem; border-radius:7px; font-size:.85rem; font-weight:600;
        border:1px solid var(--border); background:var(--panel-2); color:var(--text);
        transition:.15s ease; cursor:pointer;
    }
    .btn:hover{filter:brightness(1.15); transform:translateY(-1px);}
    .btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
    .btn-hazard{background:linear-gradient(180deg,#DFCB9F,var(--hazard)); color:#000000; border-color:#BF973F;}
    .btn-blue{background:linear-gradient(180deg,#668ACA,var(--blue)); color:#FFFFFF; border-color:#003DA6;}
    .btn-ghost{background:transparent;}
    .btn-danger{background:linear-gradient(180deg,#F7A1A6,var(--red)); color:#000000; border-color:#EF434D;}

    .status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

    #dropZone{
        border:2px dashed var(--border);
        background:var(--panel);
        transition:.2s;
    }
    #dropZone:hover{border-color:var(--hazard-dim); background:var(--panel-2);}

    .modal-backdrop{background:rgba(0,0,0,.72); backdrop-filter:blur(2px);}
    .modal-box{background:var(--panel); border:1px solid var(--border); border-top:3px solid var(--blue); border-radius:12px;}

    table.data-table{border-collapse:collapse; width:100%;}
    table.data-table th{
        background:var(--panel-2); color:var(--text-dim); font-size:.75rem; font-weight:600;
        letter-spacing:.4px; padding:.6rem .7rem; position:sticky; top:0; border-bottom:1px solid var(--border); white-space:nowrap;
    }
    table.data-table td{padding:.55rem .7rem; border-bottom:1px solid var(--border); font-size:.85rem; white-space:nowrap;}
    table.data-table tr:hover td{background:rgba(255,255,255,.02);}

    ::-webkit-scrollbar{width:8px; height:8px;}
    ::-webkit-scrollbar-track{background:var(--panel);}
    ::-webkit-scrollbar-thumb{background:rgba(0,61,166,.55); border-radius:4px;}
    html.theme-light ::-webkit-scrollbar-thumb{background:rgba(0,61,166,.35);}

    .chat-header{
        padding:1rem 1.25rem; border-bottom:2px solid var(--hazard-dim);
        display:flex; align-items:center; justify-content:space-between;
        background:var(--panel-2); border-radius:12px 12px 0 0;
    }
    .chat-bot-avatar{
        width:34px;height:34px;border-radius:9px;
        background:linear-gradient(135deg,var(--blue),var(--blue-deep));
        display:flex;align-items:center;justify-content:center; font-size:16px; flex-shrink:0;
    }
    #chatHistory{flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.7rem; background:var(--bg);}
    .msg-row{display:flex; gap:.55rem; max-width:82%; align-items:flex-end;}
    .msg-row.user{margin-right:0; margin-left:auto; flex-direction:row-reverse;}
    .msg-row.bot{margin-left:0; margin-right:auto;}
    .msg-avatar{width:26px;height:26px;border-radius:7px; flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:13px;}
    .msg-avatar.bot{background:linear-gradient(135deg,var(--blue),var(--blue-deep));}
    .msg-avatar.user{background:linear-gradient(135deg,var(--hazard),#BF973F); color:#000000;}
    .bubble{
        padding:.6rem .85rem; border-radius:12px; font-size:.87rem; line-height:1.75; white-space:pre-line;
    }
    .msg-row.bot .bubble{background:var(--panel-2); border:1px solid var(--border); border-bottom-left-radius:3px;}
    .msg-row.user .bubble{background:linear-gradient(180deg,#668ACA,var(--blue)); color:#FFFFFF; border-bottom-right-radius:3px;}
    .msg-time{font-size:.65rem; color:var(--text-dim); margin-top:.2rem; font-family:'JetBrains Mono',monospace;}

    .typing-row .bubble{display:flex; align-items:center; gap:4px; padding:.7rem .9rem;}
    .typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim); animation:typingBlink 1.2s infinite ease-in-out;}
    .typing-dot:nth-child(2){animation-delay:.15s;}
    .typing-dot:nth-child(3){animation-delay:.3s;}
    @keyframes typingBlink{0%,60%,100%{opacity:.25; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}

    .caret{display:inline-block; width:2px; height:1em; background:var(--blue); vertical-align:-2px; animation:caretBlink 1s step-end infinite; margin-inline-start:1px;}
    @keyframes caretBlink{50%{opacity:0;}}

    .chat-input-bar{padding:.85rem; border-top:1px solid var(--border); display:flex; gap:.5rem; background:var(--panel-2); border-radius:0 0 12px 12px;}
    .chat-input-bar input{
        flex:1; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:.65rem .9rem; color:var(--text); font-size:16px;
    }
    .chat-input-bar input:focus{outline:2px solid var(--blue); outline-offset:1px;}

    #aiContent{white-space:pre-line;}

    #aiHubModal .modal-box{width:100%; max-width:720px; height:85vh; height:85dvh; display:flex; flex-direction:column; padding:0; overflow:hidden;}
    .ai-tabs{display:flex; gap:.3rem; padding:.6rem .8rem 0; border-bottom:1px solid var(--border); background:var(--panel-2); overflow-x:auto; flex-shrink:0; -webkit-overflow-scrolling:touch;}
    .ai-tab{
        padding:.6rem .9rem; font-size:.8rem; font-weight:600; color:var(--text-dim);
        background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer;
        white-space:nowrap; transition:.15s ease; font-family:'Vazirmatn','Rajdhani',sans-serif; flex-shrink:0;
    }
    .ai-tab:hover{color:var(--text);}
    .ai-tab.active{color:var(--hazard); border-bottom-color:var(--hazard);}
    .ai-panel{flex:1; min-height:0; overflow:hidden; padding:1.25rem; display:flex; flex-direction:column; gap:.9rem;}
    .ai-panel.hidden{display:none;}
    .ai-panel-desc{color:var(--text-dim); font-size:.8rem; line-height:1.7; flex-shrink:0; margin:0;}
    .ai-run-content{
        white-space:pre-line; line-height:1.75; font-size:.87rem;
        background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:1rem;
        flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    }
    .ai-panel-footer{flex-shrink:0;}
    .ai-panel-footer .btn{width:100%; justify-content:center;}
    #panel-chat{padding:0; overflow:hidden; gap:0;}
    .ai-run-content, .bubble{overflow-wrap:anywhere; word-break:break-word;}

    .ai-table-wrap{overflow-x:auto; margin:.7rem 0; border:1px solid var(--border); border-radius:8px; -webkit-overflow-scrolling:touch;}
    .ai-table{border-collapse:collapse; width:100%; min-width:360px; font-size:.8rem; table-layout:auto;}
    .ai-table th{background:var(--panel); color:var(--hazard); font-weight:700; padding:.55rem .7rem; white-space:nowrap; border-bottom:1px solid var(--border); border-inline-end:1px solid var(--border); text-align:right;}
    html[dir="ltr"] .ai-table th{text-align:left;}
    .ai-table th:last-child{border-inline-end:none;}
    .ai-table td{padding:.55rem .7rem; white-space:normal; word-break:break-word; border-bottom:1px solid var(--border); border-inline-end:1px solid var(--border); vertical-align:top; max-width:260px;}
    .ai-table td:last-child{border-inline-end:none;}
    .ai-table tr:last-child td{border-bottom:none;}
    .ai-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.02);}
    .ai-table tr:hover td{background:rgba(255,255,255,.04);}

    @media (max-width:640px){
        body{padding:.75rem; padding-bottom:6.5rem;}
        #aiHubModal, #repairModal{padding:0;}
        #aiHubModal .modal-box{max-width:100%; width:100%; height:100dvh; height:100svh; border-radius:0;}
        #repairModal .modal-box{max-width:100%; width:100%; height:100dvh; height:100svh; border-radius:0; max-height:none;}
        .chat-header{border-radius:0;}
        .ai-tabs{padding:.5rem .6rem 0;}
        .ai-tab{padding:.5rem .6rem; font-size:.72rem;}
        .ai-panel{padding:1rem; gap:.7rem;}
        .ai-panel-desc{font-size:.75rem;}
        .kpi-card{padding:1rem;}
        .kpi-card h2{font-size:1.6rem;}

        #headerActions{
            position:fixed;
            bottom:1.4rem;
            inset-inline-end:1.1rem;
            top:auto;
            flex-direction:column;
            flex-wrap:nowrap;
            gap:.7rem;
            z-index:40;
            width:auto;
        }
        #headerActions .fab-btn{
            position:relative;
            display:flex;
            width:52px;
            height:52px;
            padding:0;
            border-radius:50%;
            overflow:hidden;
            text-indent:-9999px;
            white-space:nowrap;
            box-shadow:0 8px 20px rgba(0,0,0,.4);
        }
        #headerActions .fab-btn::before{
            content:attr(data-fab-icon);
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            text-indent:0;
            font-size:1.4rem;
            line-height:1;
            white-space:nowrap;
        }
        #headerActions .fab-btn:hover{transform:translateY(-2px) scale(1.04);}

        #headerActions .fab-item{display:none;}
        #headerActions.fab-open .fab-item{display:flex; animation:fabItemIn .18s ease;}
        @keyframes fabItemIn{from{opacity:0; transform:translateY(8px) scale(.85);} to{opacity:1; transform:none;}}
        #fabToggle{background:linear-gradient(180deg,#DFCB9F,var(--hazard)); transition:transform .2s ease;}
        #headerActions.fab-open #fabToggle{transform:rotate(90deg);}
        .chart-container{padding:.9rem;}
    }
    #fabToggle{display:none;}

    /* ===== Crane Login / Lift Screen (added — does not modify dashboard styles above) ===== */
    #loginScreen{
        position:fixed; inset:0; z-index:9999; overflow:hidden;
        display:flex; flex-direction:column; align-items:center;
        background:
            radial-gradient(1200px 700px at 15% -10%, rgba(0,61,166,0.14), transparent 60%),
            radial-gradient(1000px 600px at 100% 10%, rgba(191,151,63,0.12), transparent 55%),
            #000000;
        font-family:'Vazirmatn', Tahoma, sans-serif;
    }
    #loginScreen *{box-sizing:border-box;}
    .crane-rail-wrap{
        width:100%; max-width:1100px; position:relative; z-index:30;
        padding-top:18px; flex-shrink:0;
    }
    .crane-girders{
        position:relative; width:100%; height:34px;
        background:repeating-linear-gradient(135deg, #BF973F 0 12px, #003DA6 12px 24px);
        border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.5);
    }
    .crane-girders::before, .crane-girders::after{
        content:""; position:absolute; top:34px; width:14px; height:46px; background:#7F7F7F;
        border:2px solid #595959;
    }
    .crane-girders::before{ left:2%; }
    .crane-girders::after{ right:2%; }
    .end-truck-wheels{position:absolute; top:78px; width:22px; height:10px; background:#000000; border-radius:3px;}
    .end-truck-wheels.left{left:1%;}
    .end-truck-wheels.right{right:1%;}
    .trolley{
        position:absolute; top:-14px; left:50%; transform:translateX(-50%);
        width:74px; height:30px; background:linear-gradient(180deg,#595959,#000000);
        border:2px solid #BF973F; border-radius:6px; z-index:40;
        box-shadow:0 4px 10px rgba(0,0,0,.6);
    }
    .trolley .trolley-wheel{
        position:absolute; bottom:-8px; width:12px; height:12px; border-radius:50%;
        background:#000000; border:2px solid #A6A6A6;
    }
    .trolley .trolley-wheel.wL{left:8px;}
    .trolley .trolley-wheel.wR{right:8px;}

    .lift-stage{
        position:relative; width:100%; flex:1; display:flex; justify-content:center;
        overflow:visible;
    }
    .lift-assembly{
        position:relative; margin-top:-2px; display:flex; flex-direction:column; align-items:center;
        transform-origin:top center; z-index:10; will-change:transform;
    }
    .cable-line{
        width:6px; height:16vh; min-height:110px; max-height:230px;
        background:linear-gradient(180deg,#A6A6A6,#595959);
        margin:0 auto;
    }
    .hook-visual{
        width:34px; height:34px; margin-top:-3px;
        border:6px solid #BF973F; border-top-color:transparent; border-left-color:transparent;
        border-radius:0 0 50% 50%; transform:rotate(45deg) translateY(-6px);
    }
    .login-card{
        margin-top:6px; width:min(92vw, 420px);
        background:#000000; border:1px solid #7F7F7F; border-top:3px solid #BF973F;
        border-radius:14px; padding:2rem 1.75rem 1.5rem; text-align:center;
        box-shadow:0 20px 50px rgba(0,0,0,.6);
    }
    .login-card .login-emoji{font-size:2.4rem; margin-bottom:.5rem;}
    .login-card h1{color:#FFFFFF; font-family:'Rajdhani','Vazirmatn',sans-serif; font-size:1.6rem; font-weight:800; margin:0 0 .4rem;}
    .login-card p{color:#A6A6A6; font-size:.9rem; margin:0 0 1.4rem; line-height:1.8;}
    .enter-btn{
        display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
        background:linear-gradient(180deg,#DFCB9F,#BF973F); color:#000000;
        border:1px solid #BF973F; border-radius:8px; font-weight:700; font-size:.95rem;
        padding:.75rem 1.6rem; width:100%; justify-content:center;
        transition:filter .15s ease, transform .15s ease;
    }
    .enter-btn:hover{filter:brightness(1.12); transform:translateY(-1px);}
    .enter-btn:disabled{opacity:.6; cursor:default; transform:none;}
    .designer-credit{
        margin-top:1.1rem; padding-top:.85rem; border-top:1px solid #595959;
        color:#7F7F7F; font-size:.68rem; line-height:1.9; letter-spacing:.2px;
    }

    @keyframes trolleyShake{
        0%,100%{ transform:translateX(-50%); }
        25%{ transform:translateX(calc(-50% - 3px)); }
        75%{ transform:translateX(calc(-50% + 3px)); }
    }
    .crane-rail-wrap.shaking .trolley{ animation:trolleyShake .22s ease-in-out 4; }

    @keyframes liftAssemblyUp{
        0%   { transform:translateY(0) rotate(0deg); }
        8%   { transform:translateY(-2vh) rotate(-2.5deg); }
        22%  { transform:translateY(-16vh) rotate(2.5deg); }
        40%  { transform:translateY(-42vh) rotate(-1.5deg); }
        60%  { transform:translateY(-78vh) rotate(1deg); }
        82%  { transform:translateY(-118vh) rotate(-.5deg); }
        100% { transform:translateY(-150vh) rotate(0deg); }
    }
    .lift-stage.lifting .lift-assembly{
        animation:liftAssemblyUp 2.1s cubic-bezier(.6,0,.4,1) forwards;
    }
    @keyframes fadeOutScene{
        0%,70%{ opacity:1; }
        100%{ opacity:0; }
    }
    #loginScreen.leaving{
        animation:fadeOutScene 2.4s ease forwards;
        pointer-events:none;
    }
    @media (max-width:640px){
        .login-card{padding:1.5rem 1.25rem 1.25rem;}
        .login-card h1{font-size:1.3rem;}
        .cable-line{height:12vh; min-height:80px;}
    }