/* --- FRUTIGER AERO STYLES --- */
        :root {
            --glass-border: 1px solid rgba(255, 255, 255, 0.6);
            --aero-grad: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.2) 100%);
        }
        body {
            margin: 0;
            background: linear-gradient(135deg, #0077b6 0%, #48cae4 25%, #90e0ef 50%, #caf0f8 75%, #ade8f4 100%) no-repeat center center fixed;
            background-size: cover;
            font-family: 'Verdana', 'Trebuchet MS', sans-serif;
            font-size: 11px;
            color: #333;
        }
        #wrapper {
            width: 960px; margin: 20px auto;
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid #fff; border-radius: 8px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
            overflow: hidden; backdrop-filter: blur(5px);
        }
        header {
            height: 120px;
            background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
            position: relative; border-bottom: 1px solid #8bb0cc;
        }
        .logo-area { position: absolute; top: 20px; left: 20px; }
        h1 { margin: 0; font-family: 'Trebuchet MS', sans-serif; font-size: 32px; color: #0055aa; text-shadow: 2px 2px 2px rgba(255,255,255,0.8); letter-spacing: -1px; }
        .beta-badge { font-size: 10px; color: #fff; background: #ff9900; padding: 2px 5px; border-radius: 4px; vertical-align: middle; border: 1px solid #cc7a00; }

        /* NAV */
        #nav-bar { position: absolute; bottom: 0; right: 20px; display: flex; gap: 3px; }
        .nav-tab {
            display: block; padding: 8px 12px;
            background: linear-gradient(to bottom, #fff 0%, #e6e6e6 100%);
            border-radius: 8px 8px 0 0; border: 1px solid #aaa; border-bottom: none;
            text-decoration: none; color: #555; font-weight: bold; transition: all 0.2s;
            font-size: 11px; white-space: nowrap;
        }
        .nav-tab:hover { background: linear-gradient(to bottom, #d4f4ff 0%, #a3e4ff 100%); color: #0055aa; }
        .nav-tab.active { background: #fff; padding-bottom: 9px; color: #000; margin-bottom: -1px; z-index: 10; }

        /* CONTENT */
        #main-body { display: flex; padding: 20px; gap: 20px; background: linear-gradient(to bottom, #fff 0%, #f4f4f4 100%); }
        .sidebar { width: 220px; flex-shrink: 0; }
        .content { flex-grow: 1; }

        /* WIDGETS */
        .widget { background: #fcfcfc; border: 1px solid #d9d9d9; border-radius: 5px; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
        .widget-header { background: linear-gradient(to bottom, #e3f7ff 0%, #bce0ee 100%); padding: 8px 10px; border-bottom: 1px solid #a7c5d6; border-radius: 5px 5px 0 0; color: #336699; font-weight: bold; text-shadow: 0 1px 0 #fff; font-size: 12px; }
        .widget-body { padding: 10px; }

        /* INPUTS */
        input[type="text"], input[type="password"] { width: 90%; padding: 4px; border: 1px solid #7f9db9; margin-bottom: 5px; font-family: verdana; font-size: 10px; }
        .btn-glass {
            background: linear-gradient(to bottom, #88dd88 0%, #55bb55 50%, #44aa44 51%, #339933 100%);
            border: 1px solid #2d6b2d; color: #fff; font-weight: bold; font-size: 11px; padding: 4px 12px; border-radius: 15px; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
        }
        .btn-glass:hover { filter: brightness(1.1); }

        /* TABLES & HERO */
        .hero-highlight { background: #e6f2ff; border: 1px solid #b3d9ff; padding: 15px; display: flex; gap: 15px; margin-bottom: 20px; border-radius: 5px; position: relative; }
        .hero-highlight::after { content: ""; position: absolute; bottom: -20px; left: 0; width: 100%; height: 20px; background: linear-gradient(to bottom, rgba(230,242,255,0.5), transparent); transform: scaleY(-1); opacity: 0.3; }
        
        .glossy-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .glossy-table th { background: linear-gradient(to bottom, #fff 0%, #eee 100%); padding: 6px; border: 1px solid #ccc; text-align: left; color: #555; }
        .glossy-table td { padding: 6px; border: 1px solid #e0e0e0; background: #fff; }
        .glossy-table tr:nth-child(even) td { background: #f9f9f9; }

        footer { text-align: center; padding: 20px; color: #666; border-top: 1px solid #ccc; background: #f0f0f0; font-size: 10px; }