*{
            box-sizing:border-box;
        }

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background: var(--bg-page);
            color: var(--text-main);
        }

        :root {
            --bg-page: #eef2f7;
            --bg-surface: #ffffff;
            --bg-surface-soft: #f8fafc;

            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-strong: #020617;

            --border-soft: #e2e8f0;

            --primary: #2388ff;
            --primary-dark: #1b4f72;

            --success: #22c55e;
            --warning: #f59e0b;
            --danger: #ef4444;

            --shadow-soft: 0 18px 50px rgba(15, 23, 42, .08);
        }

        body.dark-mode {
            --bg-page: #071225;
            --bg-surface: #0f172a;
            --bg-surface-soft: #111827;

            --text-main: #e2e8f0;
            --text-muted: #94a3b8;
            --text-strong: #ffffff;

            --border-soft: rgba(148, 163, 184, .16);

            --shadow-soft: 0 18px 50px rgba(0, 0, 0, .35);
        }

        .card,
        .box,
        .panel,
        .container-card,
        .form-card,
        .table-card {
            background: var(--bg-surface);
            color: var(--text-main);
            border: 1px solid var(--border-soft);
            box-shadow: var(--shadow-soft);
        }

        input,
        select,
        textarea {
            background: var(--bg-surface-soft);
            color: var(--text-main);
            border: 1px solid var(--border-soft);
        }

        input::placeholder,
        textarea::placeholder {
            color: var(--text-muted);
        }

        table {
            background: var(--bg-surface);
            color: var(--text-main);
        }

        th {
            background: var(--bg-surface-soft);
            color: var(--text-strong);
        }

        td {
            border-color: var(--border-soft);
        }

        a {
            color: var(--primary);
        }

        hr {
            border-color: var(--border-soft);
        }

        .app-shell{
            min-height:100vh;
            display:flex;
        }

        /* SIDEBAR */

        .sidebar{
            width:280px;
            min-height:100vh;

            background:
                radial-gradient(circle at top left,
                rgba(35,136,255,.18),
                transparent 35%),

                linear-gradient(180deg,
                #071225,
                #0f172a);

            color:white;

            padding:22px 16px;

            position:fixed;
            left:0;
            top:0;
            bottom:0;

            z-index:900;

            border-right:1px solid rgba(148,163,184,.16);

            box-shadow:18px 0 60px rgba(15,23,42,.32);

            display:flex;
            flex-direction:column;
            overflow-y:auto;
            overflow-x:hidden;
        }

        .brand{
            display:flex;
            align-items:center;
            gap:12px;

            padding:8px 10px 22px;

            border-bottom:1px solid rgba(148,163,184,.14);

            margin-bottom:18px;
        }

        .brand-logo{
            width:48px;
            height:48px;

            border-radius:16px;

            background:white;

            padding:7px;

            box-shadow:0 14px 32px rgba(35,136,255,.22);
        }

        .brand-logo img{
            width:100%;
            height:100%;
            object-fit:contain;
        }

        .brand-title{
            font-weight:900;
            font-size:18px;
            letter-spacing:-.03em;
        }

        .brand-subtitle{
            font-size:11px;
            color:#94a3b8;
            margin-top:3px;
        }

        .nav-section{
            margin-top:18px;
        }

        .nav-label{
            padding:0 12px 8px;

            color:#64748b;

            font-size:11px;

            text-transform:uppercase;

            letter-spacing:.08em;

            font-weight:bold;
        }

        .nav-link{
            display:flex;
            align-items:center;
            gap:11px;

            padding:12px 13px;

            border-radius:15px;

            color:#cbd5e1;

            text-decoration:none;

            font-size:14px;
            font-weight:700;

            margin-bottom:6px;

            transition:.2s ease;
        }

        .nav-link:hover{
            color:white;
            background:rgba(255,255,255,.08);
            transform:translateX(3px);
        }

        .nav-link.active{
            color:white;

            background:
                linear-gradient(
                    135deg,
                    #2388ff,
                    #1b4f72
                );

            box-shadow:0 14px 30px rgba(35,136,255,.25);
        }

        .nav-icon{
            width:22px;
            text-align:center;
            font-size:16px;
        }

        .sidebar-footer {
            margin-top: auto;
            padding: 14px;
            border-radius: 18px;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(148,163,184,.14);
            color: #94a3b8;
            font-size: 12px;
            line-height: 1.45;

            .sidebar::-webkit-scrollbar{
    width:6px;
}

        .sidebar::-webkit-scrollbar-track{
            background:transparent;
        }

        .sidebar::-webkit-scrollbar-thumb{
            background:rgba(148,163,184,.25);
            border-radius:999px;
        }

        .sidebar::-webkit-scrollbar-thumb:hover{
            background:rgba(148,163,184,.45);
        }
}

        /* MAIN */

        .main-area{
            margin-left:280px;

            width:calc(100% - 280px);
            max-width:calc(100% - 280px);

            min-height:100vh;

            display:flex;
            flex-direction:column;

            overflow-x:hidden;
        }

        /* TOPBAR */

        .topbar{

            width:100%;
            min-width:100%;

            flex-shrink:0;

            height:74px;

            background:rgba(248,250,252,.92);

            backdrop-filter:blur(18px);

            border-bottom:1px solid #e2e8f0;

            display:flex;
            align-items:center;
            justify-content:space-between;

            padding:0 26px;

            position:sticky;
            top:0;

            z-index:700;

            overflow:hidden;
        }

        .topbar-left{
            display:flex;
            align-items:center;
            gap:14px;
        }

        .mobile-menu-btn{
            display:none;

            width:42px;
            height:42px;

            border:none;

            border-radius:14px;

            background:#e2e8f0;

            color:#0f172a;

            font-size:20px;

            cursor:pointer;
        }

        .page-title{
            font-weight:900;
            font-size:20px;
            letter-spacing:-.03em;
            color:#64748b;
        }

        body.dark-mode .page-title{
            color:#f8fafc;
        }

        .page-subtitle{
            color:#64748b;
        }

        body.dark-mode .page-subtitle{
            color:#94a3b8;
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            z-index: 5;
            background: transparent !important;
        }

        .topbar {
            overflow: hidden;
        }

        .system-status{
            display:inline-flex;
            align-items:center;
            gap:8px;

            padding:9px 13px;

            border-radius:999px;

            background:#dcfce7;
            color:#166534;

            font-size:12px;
            font-weight:bold;
        }

        .status-dot{
            width:8px;
            height:8px;

            background:#22c55e;

            border-radius:50%;

            animation:pulse 1.5s infinite;
        }

        @keyframes pulse{
            0%{
                opacity:1;
                transform:scale(1);
            }

            50%{
                opacity:.45;
                transform:scale(1.45);
            }

            100%{
                opacity:1;
                transform:scale(1);
            }
        }

        .topbar-btn{
            height:40px;
            min-width:40px;

            border:none;

            border-radius:14px;

            background:#e2e8f0;

            color:#0f172a;

            font-weight:bold;

            cursor:pointer;

            padding:0 12px;
        }

        .user-pill{
            display:flex;
            align-items:center;
            gap:8px;

            background:#0f172a;
            color:white;

            padding:9px 13px;

            border-radius:999px;

            font-size:12px;
            font-weight:bold;
        }

        /* CONTENT */

        .content-shell{
            flex:1;
            padding:26px;
        }

        .sidebar-overlay{
            display:none;
        }

        /* DARK MODE */

        body.dark-mode{
            background:#071225;
            color:#e2e8f0;
        }

        body.dark-mode .topbar{
            background:rgba(15,23,42,.88);
            border-bottom-color:rgba(148,163,184,.16);
        }

        body.dark-mode .page-subtitle{
            color:#94a3b8;
        }

        body.dark-mode .topbar-btn{
            background:#1e293b;
            color:#e2e8f0;
        }

        .content-shell {
            flex: 1;
            padding: 26px;
            background: var(--bg-page);
        }

        /* NOC / FULLSCREEN PAGES */

        .content-shell.noc-content{
            padding:0 !important;
            background:#081120 !important;
        }

        body.noc-body{
            background:#081120 !important;
            overflow-x:hidden;
            overflow-y:auto;
        }

        body.noc-body .page-subtitle{
            color:#94a3b8 !important;
        }

        /* RESPONSIVO */

        @media(max-width:1050px){

            @media(max-width:1050px){

            .app-shell > .main-area {
                margin-left: 0 !important;
                width: 100vw !important;
                max-width: 100vw !important;
            }

            .sidebar{
                transform:translateX(-105%);
                transition:.25s ease;
            }

            body.sidebar-open .sidebar{
                transform:translateX(0);
            }

            .main-area{
                margin-left:0;
                width:100%;
            }

            .mobile-menu-btn{
                display:inline-grid;
                place-items:center;
            }

            .sidebar-overlay{
                display:none;

                position:fixed;
                inset:0;

                background:rgba(15,23,42,.55);

                z-index:800;
            }

            body.sidebar-open .sidebar-overlay{
                display:block;
            }
        }

            .sidebar{
                transform:translateX(-105%);
                transition:.25s ease;
            }

            body.sidebar-open .sidebar{
                transform:translateX(0);
            }

            .main-area{
                margin-left:0;
                width:100%;
            }

            .mobile-menu-btn{
                display:inline-grid;
                place-items:center;
            }

            .sidebar-overlay{
                display:none;

                position:fixed;
                inset:0;

                background:rgba(15,23,42,.55);

                z-index:800;
            }

            body.sidebar-open .sidebar-overlay{
                display:block;
            }
        }

        @media(max-width:720px){

            .topbar{
                height:auto;

                min-height:74px;

                padding:14px 16px;

                align-items:flex-start;

                gap:12px;
            }

            .topbar-actions{
                flex-wrap:wrap;
                justify-content:flex-end;
            }

            .system-status{
                display:none;
            }

            .content-shell{
                padding:16px;
            }

            .user-pill{
                display:none;
            }
        }

        .nav-button-danger {
            width: 100%;
            border: none;
            cursor: pointer;
            text-align: left;
            background: transparent;
            font-family: inherit;
        }

        .nav-button-danger:hover {
            background: rgba(239,68,68,.16);
            color: #fecaca;
        }

        .reset-modal{

            width:90%;
            max-width:420px;

            background:
                linear-gradient(
                    180deg,
                    #0f172a,
                    #111827
                );

            border:1px solid rgba(148,163,184,.14);

            border-radius:28px;

            padding:32px 28px;

            box-shadow:
                0 30px 80px rgba(0,0,0,.45);

            display:flex;
            flex-direction:column;
            gap:18px;

            color:white;

            backdrop-filter:blur(18px);
        }

        .reset-icon{

            width:70px;
            height:70px;

            border-radius:22px;

            background:
                linear-gradient(
                    135deg,
                    rgba(239,68,68,.18),
                    rgba(220,38,38,.25)
                );

            display:flex;
            align-items:center;
            justify-content:center;

            font-size:32px;

            margin:0 auto 6px;

            border:1px solid rgba(239,68,68,.22);
        }

        .reset-modal h3{

            margin:0;

            text-align:center;

            font-size:24px;
            font-weight:900;

            letter-spacing:-.03em;
        }

        .reset-modal p{

            margin:0;

            text-align:center;

            line-height:1.6;

            color:#94a3b8;

            font-size:15px;
        }

        .reset-modal input{

            height:52px;

            border:none;
            outline:none;

            border-radius:16px;

            padding:0 18px;

            background:#1e293b;

            color:white;

            border:1px solid rgba(148,163,184,.14);

            font-size:15px;
        }

        .reset-modal input::placeholder{
            color:#94a3b8;
        }

        .btn-reset-confirmar{

            height:52px;

            border:none;

            border-radius:16px;

            background:
                linear-gradient(
                    135deg,
                    #ef4444,
                    #dc2626
                );

            color:white;

            font-weight:800;

            font-size:15px;

            cursor:pointer;

            transition:.2s ease;
        }

        .btn-reset-confirmar:hover{
            transform:translateY(-1px);
            box-shadow:0 16px 35px rgba(239,68,68,.25);
        }

        .btn-reset-cancelar{

            height:48px;

            border:none;

            border-radius:16px;

            background:#1e293b;

            color:#cbd5e1;

            font-weight:700;

            cursor:pointer;
        }

        /* APP SHELL RESPONSIVO CORRETO */

        .app-shell {
            width: 100%;
            min-height: 100dvh;
            display: flex;
        }

        .main-area {
            margin-left: 280px;
            width: calc(100% - 280px);
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        .topbar {
            width: 100%;
        }

        .content-shell {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }

        @media (max-width: 1050px) {
            .app-shell {
                display: block !important;
                width: 100% !important;
            }

            .main-area {
                margin-left: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .content-shell {
                padding: 14px !important;
                width: 100% !important;
                max-width: 100% !important;
            }
        }

        /* MOBILE FIX GLOBAL - APP SHELL */
        @media (max-width: 1050px) {

            html,
            body {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden !important;
            }

            .app-shell {
                width: 100% !important;
                max-width: 100% !important;
                min-height: 100dvh !important;
                display: block !important;
            }

            .sidebar {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                bottom: 0 !important;
                width: 280px !important;
                transform: translateX(-105%) !important;
                transition: .25s ease !important;
                z-index: 9999 !important;
            }

            body.sidebar-open .sidebar {
                transform: translateX(0) !important;
            }

            .main-area {
                margin-left: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
            }

            .topbar {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 100% !important;
                height: auto !important;
                min-height: 72px !important;
                padding: 14px 16px !important;
                gap: 12px !important;
            }

            .mobile-menu-btn {
                display: inline-grid !important;
                place-items: center !important;
                flex-shrink: 0 !important;
            }

            .topbar-actions {
                margin-left: auto !important;
                gap: 8px !important;
            }

            .system-status {
                display: none !important;
            }

            .user-pill {
                display: none !important;
            }

            .content-shell {
                width: 100% !important;
                max-width: 100% !important;
                padding: 16px !important;
                overflow-x: hidden !important;
            }

            .sidebar-overlay {
                position: fixed !important;
                inset: 0 !important;
                background: rgba(15,23,42,.55) !important;
                z-index: 9998 !important;
                display: none !important;
            }

            body.sidebar-open .sidebar-overlay {
                display: block !important;
            }
        }