:root {
            --bg-primary: #f4f7fb;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --bg-card-hover: #f7f9fc;
            --border-color: #dfe6ef;
            --text-primary: #162033;
            --text-secondary: #5f6c80;
            --accent-blue: #3b82f6;
            --accent-green: #10b981;
            --accent-red: #ef4444;
            --accent-orange: #f59e0b;
            --accent-purple: #8b5cf6;
            --accent-cyan: #06b6d4;
            --gradient-1: linear-gradient(135deg, #3b82f6, #8b5cf6);
            --gradient-2: linear-gradient(135deg, #10b981, #06b6d4);
            --gradient-3: linear-gradient(135deg, #f59e0b, #ef4444);
            --gradient-4: linear-gradient(135deg, #8b5cf6, #ec4899);
            --shadow: 0 4px 14px rgba(25,45,80,0.06);
            --shadow-lg: 0 18px 50px rgba(25,45,80,0.12);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            font-family: 'Segoe UI Variable','Segoe UI',system-ui,sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }
        /* ===== LOGIN ===== */
        .login-container {
            min-height:100vh; display:flex; align-items:center; justify-content:center;
            background: radial-gradient(ellipse at top, #ffffff 0%, #eef3fa 70%);
        }
        .login-box {
            background: var(--bg-card); border:1px solid var(--border-color);
            border-radius:20px; padding:48px; width:420px; box-shadow: var(--shadow-lg);
        }
        .login-box .logo { text-align:center; margin-bottom:32px; }
        .login-box .logo h1 { font-size:32px; font-weight:800; background:var(--gradient-1);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
        .login-box .logo p { color:var(--text-secondary); margin-top:4px; font-size:14px; }
        .form-floating { margin-bottom:16px; }
        .form-floating .form-control {
            background: var(--bg-secondary); border:1px solid var(--border-color);
            color:var(--text-primary); border-radius:12px; height:52px;
        }
        .form-floating .form-control:focus { border-color:var(--accent-blue); box-shadow:0 0 0 3px rgba(59,130,246,0.15); }
        .form-floating label { color:var(--text-secondary); }
        .btn-login {
            width:100%; padding:14px; border:none; border-radius:12px; font-weight:600;
            font-size:16px; background:var(--gradient-1); color:#fff; cursor:pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn-login:hover { transform:translateY(-2px); box-shadow: 0 8px 25px rgba(59,130,246,0.3); }

        /* ===== SIDEBAR ===== */
        .sidebar {
            width:260px; height:100vh; position:fixed; left:0; top:0;
            background: var(--bg-secondary); border-right:1px solid var(--border-color);
            display:flex; flex-direction:column; z-index:100;
            transition: transform 0.3s;
        }
        .sidebar-brand {
            padding:24px 20px; border-bottom:1px solid var(--border-color);
        }
        .sidebar-brand h2 {
            font-size:22px; font-weight:800; background:var(--gradient-1);
            -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        }
        .sidebar-brand small { color:var(--text-secondary); font-size:11px; }
        .sidebar-nav { flex:1; padding:12px; overflow-y:auto; }
        .nav-item {
            display:flex; align-items:center; gap:12px; padding:12px 16px;
            border-radius:12px; cursor:pointer; color:var(--text-secondary);
            transition: all 0.2s; margin-bottom:4px; text-decoration:none; font-size:14px;
        }
        .nav-item:hover { background:var(--bg-card); color:var(--text-primary); }
        .nav-item.active { background:var(--accent-blue); color:#fff; box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
        .nav-item i { font-size:18px; width:24px; text-align:center; }
        .nav-badge { margin-left:auto; background:var(--accent-red); color:#fff; font-size:11px;
            padding:2px 8px; border-radius:10px; font-weight:600; }
        .sidebar-footer { padding:16px; border-top:1px solid var(--border-color); }
        .user-info { display:flex; align-items:center; gap:12px; }
        .user-avatar { width:40px; height:40px; border-radius:12px; background:var(--gradient-4);
            display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
        .user-name { font-size:14px; font-weight:600; }
        .user-role { font-size:11px; color:var(--text-secondary); }

        /* ===== MAIN ===== */
        .main-content { margin-left:260px; min-height:100vh; }
        .top-bar {
            padding:16px 32px; border-bottom:1px solid var(--border-color);
            display:flex; align-items:center; justify-content:space-between;
            background: rgba(17,24,39,0.8); backdrop-filter:blur(20px);
            position:sticky; top:0; z-index:50;
        }
        .top-bar h3 { font-size:20px; font-weight:700; }
        .top-bar .live-indicator { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--accent-green); }
        .top-bar .live-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-green);
            animation: pulse 2s infinite; }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
        .page-content { padding:32px; }

        /* ===== STAT CARDS ===== */
        .stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:20px; margin-bottom:32px; }
        .stat-card {
            background: var(--bg-card); border:1px solid var(--border-color);
            border-radius:16px; padding:24px; position:relative; overflow:hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .stat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
        .stat-card::before {
            content:''; position:absolute; top:0; left:0; right:0; height:3px;
        }
        .stat-card:nth-child(1)::before { background:var(--gradient-1); }
        .stat-card:nth-child(2)::before { background:var(--gradient-2); }
        .stat-card:nth-child(3)::before { background:var(--gradient-3); }
        .stat-card:nth-child(4)::before { background:var(--gradient-4); }
        .stat-card:nth-child(5)::before { background:linear-gradient(135deg, #06b6d4, #3b82f6); }
        .stat-card:nth-child(6)::before { background:linear-gradient(135deg, #ec4899, #ef4444); }
        .stat-icon { width:48px; height:48px; border-radius:12px; display:flex;
            align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
        .stat-value { font-size:32px; font-weight:800; }
        .stat-label { color:var(--text-secondary); font-size:13px; margin-top:4px; }

        /* ===== TABLE ===== */
        .data-card {
            background:var(--bg-card); border:1px solid var(--border-color);
            border-radius:16px; overflow:hidden; margin-bottom:24px;
        }
        .data-card-header {
            padding:20px 24px; border-bottom:1px solid var(--border-color);
            display:flex; align-items:center; justify-content:space-between;
        }
        .data-card-header h5 { font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px; }
        .table-container { overflow-x:auto; }
        table { width:100%; border-collapse:collapse; }
        th { padding:12px 16px; text-align:left; font-size:12px; font-weight:600;
            color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px;
            background:var(--bg-secondary); border-bottom:1px solid var(--border-color); }
        td { padding:12px 16px; font-size:13px; border-bottom:1px solid var(--border-color);
            vertical-align:middle; }
        tr:hover td { background:var(--bg-card-hover); }
        .badge-online { background:rgba(16,185,129,0.15); color:var(--accent-green);
            padding:4px 12px; border-radius:8px; font-size:12px; font-weight:600; }
        .badge-offline { background:rgba(239,68,68,0.15); color:var(--accent-red);
            padding:4px 12px; border-radius:8px; font-size:12px; font-weight:600; }
        .badge-pending { background:rgba(245,158,11,0.15); color:var(--accent-orange);
            padding:4px 12px; border-radius:8px; font-size:12px; font-weight:600; }
        .badge-completed { background:rgba(16,185,129,0.15); color:var(--accent-green);
            padding:4px 12px; border-radius:8px; font-size:12px; font-weight:600; }
        .badge-failed { background:rgba(239,68,68,0.15); color:var(--accent-red);
            padding:4px 12px; border-radius:8px; font-size:12px; font-weight:600; }
        .badge-warning { background:rgba(245,158,11,0.15); color:var(--accent-orange);
            padding:4px 12px; border-radius:8px; font-size:12px; font-weight:600; }
        .badge-critical { background:rgba(239,68,68,0.15); color:var(--accent-red);
            padding:4px 12px; border-radius:8px; font-size:12px; font-weight:600; }

        /* ===== DEVICE DETAIL ===== */
        .detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px; }
        .detail-section { background:var(--bg-card); border:1px solid var(--border-color);
            border-radius:16px; padding:24px; }
        .detail-section h6 { font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px;
            color:var(--accent-blue); }
        .detail-row { display:flex; justify-content:space-between; padding:8px 0;
            border-bottom:1px solid rgba(42,48,80,0.5); font-size:13px; }
        .detail-row:last-child { border-bottom:none; }
        .detail-key { color:var(--text-secondary); }
        .detail-value { font-weight:600; text-align:right; max-width:60%; word-break:break-all; }
        .progress-bar-custom { height:8px; border-radius:4px; background:var(--bg-secondary); overflow:hidden; margin-top:4px; }
        .progress-fill { height:100%; border-radius:4px; transition:width 0.5s; }

        /* ===== BUTTONS ===== */
        .btn-action {
            padding:8px 16px; border:none; border-radius:10px; font-size:13px;
            font-weight:600; cursor:pointer; transition:all 0.2s; display:inline-flex;
            align-items:center; gap:6px;
        }
        .btn-primary-custom { background:var(--accent-blue); color:#fff; }
        .btn-primary-custom:hover { background:#2563eb; box-shadow:0 4px 12px rgba(59,130,246,0.3); }
        .btn-danger-custom { background:var(--accent-red); color:#fff; }
        .btn-success-custom { background:var(--accent-green); color:#fff; }
        .btn-warning-custom { background:var(--accent-orange); color:#fff; }
        .btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-color); }
        .btn-ghost:hover { background:var(--bg-card); color:var(--text-primary); }
        .btn-sm { padding:6px 12px; font-size:12px; }

        /* ===== SEARCH ===== */
        .search-box {
            background:var(--bg-secondary); border:1px solid var(--border-color);
            border-radius:12px; padding:10px 16px; color:var(--text-primary);
            width:300px; font-size:14px; outline:none;
        }
        .search-box:focus { border-color:var(--accent-blue); }

        /* ===== MODAL ===== */
        .modal-overlay {
            position:fixed; top:0; left:0; right:0; bottom:0;
            background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
            z-index:1000; display:flex; align-items:center; justify-content:center;
        }
        .modal-box {
            background:var(--bg-card); border:1px solid var(--border-color);
            border-radius:20px; padding:32px; width:560px; max-height:80vh;
            overflow-y:auto; box-shadow:var(--shadow-lg);
        }
        .modal-box h4 { font-weight:700; margin-bottom:24px; }
        .modal-box label { display:block; font-size:13px; color:var(--text-secondary);
            margin-bottom:6px; font-weight:500; }
        .modal-box input, .modal-box select, .modal-box textarea {
            width:100%; padding:10px 14px; background:var(--bg-secondary);
            border:1px solid var(--border-color); border-radius:10px;
            color:var(--text-primary); font-size:14px; margin-bottom:16px; outline:none;
            font-family:Consolas,'Cascadia Mono',monospace;
        }
        .modal-box textarea { min-height:120px; resize:vertical; }
        .modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus {
            border-color:var(--accent-blue); }
        .modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:8px; }

        /* ===== TOASTS ===== */
        .toast-container { position:fixed; top:20px; right:20px; z-index:2000; }
        .toast {
            background:var(--bg-card); border:1px solid var(--border-color);
            border-radius:12px; padding:16px 20px; margin-bottom:8px; min-width:300px;
            display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-lg);
            animation: slideIn 0.3s ease;
        }
        .toast.success { border-left:4px solid var(--accent-green); }
        .toast.error { border-left:4px solid var(--accent-red); }
        .toast.info { border-left:4px solid var(--accent-blue); }
        @keyframes slideIn { from{transform:translateX(100px);opacity:0} to{transform:translateX(0);opacity:1} }

        /* ===== RESPONSIVE ===== */
        @media (max-width:768px) {
            .sidebar { transform:translateX(-100%); }
            .sidebar.open { transform:translateX(0); }
            .main-content { margin-left:0; }
            .stats-grid { grid-template-columns:1fr 1fr; }
            .search-box { width:100%; }
        }
        .hidden { display:none !important; }
        .clickable { cursor:pointer; }
        .text-mono { font-family: 'Courier New', monospace; font-size:12px; }

.page-simple-help{font-size:11px;color:var(--text-secondary);margin-top:2px;max-width:760px;line-height:1.35}.sidebar-brand small{letter-spacing:0}.nn-simple-nav .nn-nav-group-title{font-weight:700}.nn-simple-nav .nav-item{font-size:12px}.nn-simple-nav .nn-nav-group:not(.open) .nn-nav-group-items{display:none}
@media(max-width:768px){.page-simple-help{display:none}}
.simple-guidance-panel{max-width:1120px}.simple-guidance-intro{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px 18px;margin:10px 0 16px;border:1px solid #e4e9f1;border-radius:14px;background:#fff}.simple-guidance-intro h4{margin:0 0 5px;font-size:17px;color:#26364d}.simple-guidance-intro p{margin:0;color:#6f7d91;font-size:11px}.simple-guidance-stats{display:flex;gap:8px}.simple-guidance-stats article{min-width:82px;padding:9px 11px;border:1px solid #e6eaf1;border-radius:10px;background:#fafbfe}.simple-guidance-stats span{display:block;font-size:8px;color:#7b8799}.simple-guidance-stats strong{display:block;margin-top:3px;font-size:16px;color:#31435d}.simple-guidance-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.simple-guidance-card{border:1px solid #e4e9f1;border-radius:14px;background:#fff;padding:14px}.simple-guidance-card.danger{border-left:4px solid #ef4444}.simple-guidance-card.warn{border-left:4px solid #f59e0b}.simple-guidance-card.ready{border-left:4px solid #3b82f6}.simple-guidance-card header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.simple-guidance-card h4{margin:4px 0 0;font-size:13px;color:#253650}.simple-guidance-priority{font-size:8px;font-weight:800;color:#718096;text-transform:uppercase}.simple-guidance-count{font-size:22px;color:#344861}.simple-guidance-explain{display:grid;gap:8px;margin-top:12px}.simple-guidance-explain section{border-top:1px solid #edf0f5;padding-top:8px}.simple-guidance-explain b{display:block;font-size:9px;color:#44546b}.simple-guidance-explain p{margin:3px 0 0;font-size:10px;line-height:1.5;color:#68768a}.simple-guidance-card footer{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.simple-guidance-empty{text-align:center;padding:46px 18px;border:1px solid #e4e9f1;border-radius:14px;background:#fff}.simple-guidance-empty i{font-size:32px;color:#22c55e}.simple-guidance-empty h4{margin:10px 0 4px}.simple-guidance-empty p{margin:0;color:#718096;font-size:11px}.simple-action-button{display:inline-flex;align-items:center;gap:7px;margin-top:12px}
@media(max-width:800px){.simple-guidance-list{grid-template-columns:1fr}.simple-guidance-intro{align-items:flex-start;flex-direction:column}.simple-guidance-stats{width:100%}.simple-guidance-stats article{flex:1}}

.technical-detail{display:none!important}.nn-show-technical-details .technical-detail{display:block!important}.technical-detail-inline{display:none!important}.nn-show-technical-details .technical-detail-inline{display:inline-flex!important}
.smart-group-panel{max-width:1180px}.smart-group-intro{padding:14px 16px;border:1px solid #e5e9f1;border-radius:12px;background:#fff;margin-bottom:14px}.smart-group-intro h4{margin:0 0 5px;font-size:14px;color:#2e4059}.smart-group-intro p{margin:0;font-size:10px;color:#718096}.smart-group-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:12px}.smart-group-builder,.smart-group-existing{border:1px solid #e5e9f1;border-radius:12px;background:#fff;padding:13px}.smart-group-builder>input{width:100%;margin-bottom:8px}.smart-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.smart-rule-grid input,.smart-rule-grid select,.smart-group-builder>input{border:1px solid #dfe5ee;border-radius:8px;padding:8px;font-size:9px;background:#fff;color:#35465e}.smart-preview{margin-top:10px;padding:9px;border:1px solid #e8ecf2;border-radius:9px;background:#fafbfe;font-size:9px;color:#657287}.smart-preview-head{display:flex;align-items:baseline;gap:6px}.smart-preview-head strong{font-size:18px;color:#334760}.smart-preview-list{display:grid;gap:4px;margin-top:7px}.smart-preview-list div{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #edf0f5;padding-top:4px}.smart-preview-list b{font-size:9px}.smart-preview-list span{font-size:8px;color:#7a8799}.smart-group-existing>[data-groups]{display:grid;gap:7px}.smart-group-card{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border:1px solid #e7ebf2;border-radius:10px;padding:9px}.smart-group-card span,.smart-group-card small{display:block;font-size:8px;color:#7b8799}.smart-group-card strong{display:block;font-size:10px;color:#31445d;margin:2px 0}.smart-group-count{text-align:center}.smart-group-count b{display:block;font-size:16px;color:#334760}.smart-group-card button{border:1px solid #dfe5ee;background:#fff;border-radius:7px;padding:6px 8px;font-size:8px;font-weight:700;color:#40516a}
@media(max-width:850px){.smart-group-layout{grid-template-columns:1fr}.smart-rule-grid{grid-template-columns:1fr}}

.device-detail-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.asset360-panel{width:min(1180px,95vw);max-height:92vh;overflow:auto}.asset360-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--border-color);border-radius:16px;background:linear-gradient(135deg,#fff,#f7f9fd);margin-bottom:12px}.asset360-hero h2{font-size:20px;margin:4px 0}.asset360-hero p{margin:0;color:var(--text-secondary);font-size:11px}.asset360-score{display:flex;align-items:baseline;gap:4px;padding:12px 16px;border-radius:14px;border:1px solid #dfe6f1;background:#fff}.asset360-score span,.asset360-score small{font-size:9px;color:var(--text-secondary)}.asset360-score strong{font-size:25px}.asset360-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0}.asset360-kpis article{border:1px solid var(--border-color);border-radius:12px;background:#fff;padding:10px}.asset360-kpis span{display:block;font-size:8px;color:var(--text-secondary)}.asset360-kpis strong{display:block;font-size:18px;margin-top:4px}.asset360-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.asset360-card{border:1px solid var(--border-color);background:#fff;border-radius:14px;padding:12px;min-width:0}.asset360-card.asset360-span{grid-column:1/-1}.asset360-card>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.asset360-card>header span{display:block;font-size:8px;color:var(--text-secondary)}.asset360-card>header strong{display:block;font-size:11px;margin-top:2px}.asset360-card>header button,.asset360-rec button,.software-estate-row button{border:1px solid #dbe3ef;background:#fff;border-radius:8px;padding:6px 8px;font-size:8px;font-weight:700;color:#40516a}.asset360-list{display:grid;gap:6px}.asset360-list>article{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e7ebf2;border-radius:10px;padding:8px;background:#fbfcfe}.asset360-list strong{display:block;font-size:9px}.asset360-list small,.asset360-list p{display:block;font-size:8px;color:var(--text-secondary);margin:3px 0 0}.asset360-rec{border-left:3px solid #aeb9ca!important}.asset360-rec.warn{border-left-color:#f3b24d!important}.asset360-rec.danger{border-left-color:#eb6d7a!important}.asset360-rec.ready{border-left-color:#63b6a0!important}.asset360-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.asset360-actions button{text-align:left;border:1px solid #e2e8f1;background:#fff;border-radius:10px;padding:9px}.asset360-actions button:hover{background:#f7f9fd;border-color:#cbd6e5}.asset360-actions strong,.asset360-actions small,.asset360-actions em{display:block}.asset360-actions strong{font-size:9px;color:#34445c}.asset360-actions small{font-size:8px;color:var(--text-secondary);margin-top:3px;line-height:1.35}.asset360-actions em{font-size:7px;color:#7f8da3;margin-top:4px;font-style:normal}.asset360-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.asset360-facts div{padding:8px;border-radius:9px;background:#f8fafd;border:1px solid #e7ebf2}.asset360-facts span,.asset360-facts b{display:block}.asset360-facts span{font-size:8px;color:var(--text-secondary)}.asset360-facts b{font-size:9px;margin-top:2px}.software-estate-table{display:grid;gap:4px;overflow:auto}.software-estate-row{display:grid;grid-template-columns:1.1fr 1.1fr .7fr .7fr .6fr .55fr;align-items:center;gap:7px;padding:7px 8px;border:1px solid #e7ebf2;border-radius:8px;min-width:760px;font-size:8px}.software-estate-row.head{font-weight:800;background:#f7f9fd;color:#69778c}.software-estate-row span{min-width:0;overflow:hidden;text-overflow:ellipsis}.software-estate-table.license .software-estate-row{grid-template-columns:1.5fr .55fr .55fr .55fr 1fr .8fr}
@media(max-width:900px){.asset360-kpis{grid-template-columns:repeat(3,1fr)}.asset360-grid{grid-template-columns:1fr}.asset360-card.asset360-span{grid-column:auto}}@media(max-width:620px){.asset360-kpis{grid-template-columns:repeat(2,1fr)}.asset360-actions,.asset360-facts{grid-template-columns:1fr}.asset360-hero{align-items:flex-start;flex-direction:column}}