:root { --ink:#f3f6fa; --muted:#91a0b5; --panel:#111923; --line:rgba(255,255,255,.09); }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#071019; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { color:inherit; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:1.08fr .92fr; background:#0b121a; }
.login-story { position:relative; padding:54px 64px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:radial-gradient(circle at 75% 30%,rgba(37,88,147,.35),transparent 38%),linear-gradient(145deg,#08111b 5%,#0d2439 60%,#071019); }
.login-story:after { content:""; position:absolute; width:520px; height:520px; right:-170px; bottom:-210px; border:1px solid rgba(120,174,231,.13); border-radius:50%; box-shadow:0 0 0 80px rgba(120,174,231,.035),0 0 0 160px rgba(120,174,231,.025); }
.brand,.mobile-brand { display:flex; align-items:center; gap:14px; letter-spacing:.13em; font-size:11px; color:#c7d3df; z-index:1; }
.brand-mark { width:44px; height:44px; border:1px solid #78aee7; display:grid; place-items:center; transform:rotate(45deg); border-radius:8px; color:#8ab9ed; font-weight:800; letter-spacing:-.05em; }
.brand-mark::first-line { transform:rotate(-45deg); }
.brand .brand-mark,.mobile-brand .brand-mark { line-height:44px; text-align:center; }
.story-copy { max-width:620px; position:relative; z-index:1; }
.eyebrow,.coming { color:#76a9df; font-size:11px; font-weight:800; letter-spacing:.2em; }
.story-copy h1 { font-size:clamp(46px,5vw,76px); line-height:.98; letter-spacing:-.055em; margin:24px 0 26px; }
.story-copy p { color:#aebdcd; line-height:1.7; max-width:540px; font-size:16px; }
.department-row { display:flex; gap:10px; margin-top:34px; flex-wrap:wrap; }
.department-row span { border:1px solid rgba(137,184,230,.25); background:rgba(43,94,143,.18); padding:10px 14px; border-radius:7px; color:#acc8e3; font-size:11px; font-weight:800; letter-spacing:.12em; }
.story-foot { font-size:9px; letter-spacing:.26em; color:#617389; z-index:1; }
.login-panel { display:grid; place-items:center; padding:42px; background:linear-gradient(145deg,#111923,#0b1219); }
.login-card { width:min(420px,100%); }
.mobile-brand { display:none; }
.status-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:99px; border:1px solid rgba(68,211,151,.2); background:rgba(34,153,104,.07); color:#59d5a3; font-size:9px; letter-spacing:.14em; font-weight:800; }
.status-pill i,.online i,.enabled i { width:6px;height:6px;border-radius:50%;background:#4fdaa0;box-shadow:0 0 12px #4fdaa0; }
.login-card h2 { margin:34px 0 8px; font-size:34px; letter-spacing:-.035em; }
.muted { color:var(--muted); margin:0 0 34px; }
.login-card label { display:block; color:#bdc7d3; font-size:12px; font-weight:700; margin:20px 0; }
.login-card input { display:block; width:100%; margin-top:9px; border:1px solid #263445; border-radius:8px; padding:14px 15px; background:#0b121a; color:#f5f7fa; outline:none; transition:.2s; }
.login-card input:focus { border-color:#568cd0; box-shadow:0 0 0 3px rgba(86,140,208,.12); }
.primary-button { width:100%; border:0; border-radius:8px; padding:15px 18px; background:linear-gradient(135deg,#3f7ec7,#315fa0); display:flex; justify-content:space-between; font-weight:750; cursor:pointer; margin-top:26px; box-shadow:0 12px 30px rgba(31,88,151,.2); }
.primary-button:disabled { opacity:.55; cursor:not-allowed; }
.form-error { color:#ff8c82; background:rgba(238,85,70,.08); border:1px solid rgba(238,85,70,.2); padding:10px 12px; border-radius:7px; font-size:12px; }
.secure-note { color:#657488; font-size:10px; text-align:center; margin-top:20px; }
.loading-screen { min-height:100vh; display:grid; place-content:center; text-align:center; color:#7e90a5; font-size:12px; letter-spacing:.12em; }
.loader { width:32px; height:32px; border:2px solid #1f3143; border-top-color:#62a1e3; border-radius:50%; animation:spin .8s linear infinite; margin:auto; }
@keyframes spin { to{transform:rotate(360deg)} }
.desktop { min-height:100vh; --accent:#5b8def; background:radial-gradient(circle at 75% 20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 35%),linear-gradient(145deg,#09121c,#101b27 58%,#091019); background-size:cover;background-position:center; overflow:hidden; }
.desktop.dept-lscso{background-image:linear-gradient(rgba(3,9,15,.12),rgba(3,9,15,.24)),url("images/lscso-wallpaper-branded-v3.png")}
.desktop:before { content:""; position:fixed; inset:0; opacity:.17; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.topbar { height:76px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(5,11,18,.64); backdrop-filter:blur(18px); position:relative; z-index:4; }
.dept-identity,.top-actions,.profile,.window-bar>span,.table-row>span:first-child { display:flex;align-items:center;gap:12px; }
.mini-badge { width:42px;height:42px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent);display:grid;place-items:center;border-radius:8px;color:var(--accent);font-size:10px;font-weight:900; }
.dept-identity b { font-size:13px;display:block; }.dept-identity small,.profile small { font-size:9px;color:#74859a;display:block;margin-top:3px;letter-spacing:.08em;text-transform:uppercase; }
.online { display:flex;align-items:center;gap:7px;font-size:10px;color:#84d8b4;border-right:1px solid var(--line);padding-right:20px; }
.profile { border:0;background:transparent;cursor:pointer;text-align:left; }
.profile>span:first-child { width:34px;height:34px;border-radius:8px;background:color-mix(in srgb,var(--accent) 20%,#15202c);display:grid;place-items:center;color:var(--accent);font-size:11px;font-weight:800; }
.profile b { font-size:11px;display:block; }
.workspace { min-height:calc(100vh - 132px); padding:clamp(40px,7vh,76px) clamp(24px,6vw,86px) 100px; position:relative; z-index:1; }
.welcome h1 { font-size:clamp(30px,4vw,50px);letter-spacing:-.045em;margin:15px 0 8px; }.welcome p { color:#7f90a4;margin:0; }
.app-grid { display:grid;grid-template-columns:repeat(3,minmax(160px,260px));gap:18px;margin-top:52px; }
.app-icon { min-height:145px;border:1px solid var(--line);border-radius:13px;padding:20px;background:rgba(13,23,34,.68);text-align:left;cursor:pointer;transition:.2s;backdrop-filter:blur(12px); }
.app-icon:hover { transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:rgba(19,32,46,.85);box-shadow:0 18px 50px rgba(0,0,0,.2); }
.icon-tile,.window-symbol,.large-symbol { display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,#111b27);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);font-weight:850; }
.icon-tile { width:40px;height:40px;border-radius:9px;margin-bottom:18px; }
.icon-tile[class*="icon-"]{width:48px;height:48px;background-size:cover;background-position:center;color:transparent;border:0}.icon-persons{background-image:url("images/icon-persons-v3.png")!important}
.icon-vehicles{background-image:url("images/icon-vehicles-v3.png")!important}.icon-service{background-image:url("images/icon-service-v3.png")!important}.icon-fines{background-image:url("images/icon-fines-v3.png")!important}
.icon-members{background-image:url("images/icon-members-v3.png")!important}.icon-users{background-image:url("images/icon-users-v3.png")!important}.icon-admin{background-image:url("images/icon-admin-v3.png")!important}.icon-catalog{background-image:url("images/icon-catalog-v3.png")!important}
.app-icon b { display:block;font-size:13px;margin-bottom:5px; }.app-icon small { display:block;color:#728297;font-size:10px;line-height:1.45; }
.taskbar { height:56px;position:fixed;z-index:6;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-top:1px solid var(--line);background:rgba(5,10,16,.82);backdrop-filter:blur(20px); }
.task-left{display:flex;align-items:center;gap:12px}.launcher{border:0;width:34px;height:34px;border-radius:8px;background:url("images/start-home-v3.png") center/cover no-repeat;color:transparent;font-size:0;cursor:pointer}.task-divider{width:1px;height:24px;background:var(--line)}.active-task{border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);padding:7px 13px;font-size:10px}.clock{text-align:right}.clock span,.clock small{display:block}.clock span{font-size:11px;font-weight:700}.clock small{font-size:8px;color:#74859a;margin-top:2px}
.window-layer { position:fixed;z-index:20;inset:76px 0 56px;pointer-events:none; }
.app-window { position:absolute;width:min(860px,calc(100% - 40px));height:min(570px,calc(100% - 40px));min-width:340px;min-height:240px;resize:both;pointer-events:auto;border:1px solid #283749;border-radius:12px;overflow:hidden;background:#0c151f;box-shadow:0 30px 100px rgba(0,0,0,.55); }
.window-layer.maximized .app-window{inset:0!important;width:100%!important;height:100%!important;max-width:none;border-radius:0;resize:none}.window-layer.minimized{display:none}.window-controls{display:flex!important;gap:2px!important}.window-controls button{width:34px;height:30px;border:0;background:transparent;color:#8797aa;cursor:pointer}.window-controls button:hover{background:rgba(255,255,255,.07);color:#fff}.window-controls .window-close:hover{background:#bc3d48}.window-bar{cursor:move;user-select:none}
.window-bar { height:52px;border-bottom:1px solid var(--line);padding:0 14px 0 18px;display:flex;align-items:center;justify-content:space-between;background:#101b27; }
.window-symbol { width:26px;height:26px;border-radius:6px;font-size:9px; }.window-bar b{font-size:11px}.window-bar>button{border:0;background:transparent;font-size:23px;color:#728195;cursor:pointer;padding:5px 10px}.window-bar>button:hover{color:#fff}
.window-body{height:calc(100% - 52px);overflow:auto}.placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:36px}.large-symbol{width:68px;height:68px;border-radius:16px;margin-bottom:24px}.placeholder h2{font-size:30px;margin:10px 0}.placeholder p{max-width:490px;color:#7d8da1;line-height:1.6}.outline-button{border:1px solid #34475a;border-radius:7px;background:transparent;padding:10px 18px;margin-top:18px;cursor:pointer}
.admin-page{padding:34px}.window-heading{display:flex;justify-content:space-between;align-items:flex-start}.window-heading h2{font-size:26px;margin:8px 0 4px}.window-heading p{color:#7f90a4;margin:0;font-size:12px}.compact{width:auto;margin:0;padding:11px 15px;font-size:11px;gap:24px}.role-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}.role-summary>div{padding:15px;border:1px solid var(--line);border-radius:8px;background:#101b27}.role-summary span,.role-summary b{display:block}.role-summary span{color:#74859a;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.role-summary b{font-size:13px;margin-top:7px}.user-table{border:1px solid var(--line);border-radius:9px;overflow:hidden}.table-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;align-items:center;min-height:53px;padding:0 17px;border-bottom:1px solid var(--line);font-size:10px;color:#aab6c4}.table-row:last-child{border:0}.table-head{min-height:38px;background:#101b27;color:#607186;text-transform:uppercase;letter-spacing:.1em;font-size:8px}.avatar{width:27px;height:27px;border-radius:6px;display:grid;place-items:center;background:#18283a;color:var(--accent);font-style:normal;font-size:8px}.table-row em{font-style:normal;color:var(--accent);font-weight:800}.enabled{color:#65cf9f;display:flex;align-items:center;gap:7px}.admin-note{font-size:10px;color:#65778b;margin-top:16px}
.form-layer{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:rgba(2,6,10,.72);backdrop-filter:blur(7px)}.user-form{width:min(430px,100%);padding:28px;border:1px solid #2a3b4e;border-radius:12px;background:#0d1823;box-shadow:0 24px 80px rgba(0,0,0,.55)}.form-heading{display:flex;align-items:flex-start;justify-content:space-between}.form-heading h2{font-size:24px;margin:7px 0 0}.form-close{border:0;background:transparent;color:#7f90a4;font-size:24px;cursor:pointer}.user-form>.muted{font-size:11px;margin:10px 0 22px}.user-form label{display:block;margin:14px 0;color:#aebaca;font-size:10px;font-weight:750}.user-form input,.user-form select{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #2a3a4c;border-radius:7px;background:#09121b;color:#f3f6fa;outline:none}.user-form input:focus,.user-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.password-rule{display:block;color:#64758a;font-size:9px;margin-top:-6px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.form-actions .outline-button,.form-actions .primary-button{margin:0;width:auto}.form-actions .primary-button{justify-content:center}
.info-box{padding:13px 14px;margin:18px 0 4px;border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);border-radius:7px;background:color-mix(in srgb,var(--accent) 7%,transparent);color:#91a4ba;font-size:10px;line-height:1.5}.pending{color:#e5b95b;display:flex;align-items:center;gap:7px}.pending i{width:6px;height:6px;border-radius:50%;background:#e5b95b}.credential-card{text-align:center}.success-mark{width:42px;height:42px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:rgba(63,205,145,.12);border:1px solid rgba(63,205,145,.3);color:#57d6a0;font-size:20px}.credential-card h2{font-size:28px;margin:8px 0}.credential-card label{text-align:left}.credential-value{margin-top:7px;padding:12px;border:1px solid #2a3a4c;border-radius:7px;background:#08111a;color:#dce6f0;font-size:13px;user-select:all}.password-value{color:#75b1f0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:16px;letter-spacing:.06em}.credential-card .outline-button{width:100%;margin-top:10px}.password-screen{min-height:100vh;background:radial-gradient(circle at 50% 20%,rgba(63,126,199,.16),transparent 34%),#08111a}.password-panel{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px}.password-panel>.brand{margin-bottom:34px}.first-login-form h1{font-size:28px;line-height:1.1;margin:24px 0 10px}.first-login-form .primary-button{margin-top:24px}
.module-page{padding:28px;height:100%;overflow:auto}.module-head{display:flex;align-items:center;justify-content:space-between}.module-head h2{font-size:26px;margin:7px 0}.searchbar{display:flex;gap:9px;margin:20px 0}.searchbar input,.catalog-search{flex:1;padding:11px 13px;border:1px solid #29394b;border-radius:8px;background:#09121b;color:#fff;outline:none}.searchbar .primary-button{margin:0;width:auto}.result-list,.fine-list{display:grid;gap:9px}.empty-state{padding:50px;text-align:center;color:#66788d;border:1px dashed #28394b;border-radius:9px}.record-card,.fine-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:9px;background:#101b27}.record-card>div,.fine-row>div{flex:1}.record-card b,.record-card small,.fine-row b,.fine-row small{display:block}.record-card small,.fine-row small{color:#728398;font-size:10px;margin-top:5px}.record-card .outline-button{margin:0}.record-status{font-size:9px;text-transform:uppercase;font-weight:800}.record-status.active{color:#54d29d}.record-status.returned{color:#8795a6}.catalog-search{width:100%;margin:18px 0}.fine-row button{width:28px;height:28px;border:1px solid #304258;background:#0b151f;color:#d8e2ed;border-radius:6px;cursor:pointer}.fine-count{width:20px;text-align:center}.fine-total{position:sticky;bottom:-28px;margin:20px -28px -28px;padding:17px 28px;display:flex;align-items:center;gap:14px;background:#111d29;border-top:1px solid var(--line)}.fine-total span{color:#718298;font-size:10px}.fine-total b{margin-right:18px}
.start-menu{position:fixed;z-index:100;left:14px;bottom:66px;width:290px;padding:14px;border:1px solid #2b3b4d;border-radius:12px;background:rgba(10,18,27,.96);box-shadow:0 20px 70px rgba(0,0,0,.55);backdrop-filter:blur(20px)}.start-menu[hidden]{display:none}.start-user{display:flex;align-items:center;gap:12px;padding:10px 8px 17px;border-bottom:1px solid var(--line);margin-bottom:8px}.start-user>span,.avatar-image{width:40px;height:40px;border-radius:9px;background:#213247;display:grid;place-items:center;overflow:hidden}.avatar-image img{width:100%;height:100%;object-fit:cover}.start-user b,.start-user small{display:block}.start-user small{font-size:9px;color:#74859a;margin-top:3px}.start-menu>button{display:block;width:100%;padding:11px;border:0;border-radius:7px;background:transparent;text-align:left;color:#bdc8d5;cursor:pointer}.start-menu>button:hover{background:rgba(255,255,255,.06)}.running-apps{display:flex;gap:6px}.settings-page{display:grid;grid-template-columns:190px 1fr;height:100%}.settings-page aside{padding:24px 14px;border-right:1px solid var(--line);background:#101a25}.settings-page aside h3{padding:0 9px;margin:0 0 18px}.setting-tab{display:block;width:100%;padding:10px;border:0;border-radius:7px;background:transparent;color:#8797aa;text-align:left;cursor:pointer}.setting-tab.active{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.settings-page main{padding:30px;overflow:auto}.settings-page main h2{margin-top:0}.settings-form{max-width:520px;margin-top:22px}.settings-form label{display:block;margin:15px 0;font-size:11px;color:#aab7c7}.settings-form input{display:block;width:100%;margin-top:7px;padding:11px;border:1px solid #2c3c4e;border-radius:7px;background:#09131c;color:#fff}.drop-zone{padding:34px!important;border:1px dashed #40556c!important;border-radius:10px;text-align:center}.drop-zone input{margin-top:15px}.rank-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}.rank-chips>span{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#101b27}.rank-chips b,.rank-chips small{display:block}.rank-chips small{font-size:8px;color:#718297;margin-top:3px}.permission-list{border:1px solid var(--line);border-radius:8px;margin:18px 0;padding:12px}.permission-list legend{font-size:10px;color:#8191a4}.permission-list label{display:flex!important;align-items:center;gap:8px;margin:9px 0!important}.permission-list input{width:auto!important;margin:0!important}
@media(max-width:800px){.login-shell{grid-template-columns:1fr}.login-story{display:none}.login-panel{min-height:100vh;padding:24px}.mobile-brand{display:flex;margin-bottom:42px}.topbar{padding:0 16px}.dept-identity>span:last-child{display:none}.online{display:none}.workspace{padding:38px 18px 90px}.app-grid{grid-template-columns:repeat(2,1fr);gap:11px;margin-top:34px}.app-icon{min-height:130px;padding:16px}.window-layer{padding:10px}.role-summary{grid-template-columns:1fr}.table-row{grid-template-columns:1.6fr .7fr .8fr}.table-row>span:nth-child(2){display:none}.admin-page{padding:22px}.window-heading{display:block}.compact{margin-top:18px}.top-actions{gap:0}}
@media(max-width:470px){.app-grid{grid-template-columns:1fr 1fr}.app-icon small{display:none}.app-icon{min-height:105px}.icon-tile{margin-bottom:12px}.profile>span:last-child{display:none}.window-heading .compact{width:100%}.table-row{grid-template-columns:1.5fr .7fr}.table-row>span:nth-child(3){display:none}}