:root {
            --watan-primary: #2f80ff;
            --watan-primary-strong: #1769e8;
            --watan-cyan: #57d5ff;
            --watan-ink: #070b13;
            --watan-panel: #0d1421;
            --watan-panel-2: #111c2c;
            --watan-line: rgba(255, 255, 255, .10);
            --watan-white: #f8fbff;
            --watan-muted: #9aa9bd;
            --watan-success: #54e39a;
            --watan-danger: #ff6f83;
            --watan-ease: cubic-bezier(.22, 1, .36, 1);
        }

        .watan-app-header,
        .watan-app-header *,
        .watan-app-header *::before,
        .watan-app-header *::after { box-sizing: border-box; }

        .watan-app-header {
            position: sticky;
            top: 0;
            z-index: 1100;
            color: var(--watan-white);
            font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
            isolation: isolate;
        }

        .watan-app-nav {
            position: relative;
            min-height: 76px;
            padding: 12px 0;
            overflow: hidden;
            background:
                radial-gradient(circle at 12% 0%, rgba(47,128,255,.20), transparent 30%),
                linear-gradient(110deg, #080d17, #0d1727 52%, #0a101c);
            border-bottom: 1px solid rgba(87,213,255,.22);
            box-shadow: 0 14px 40px rgba(0,0,0,.30);
            backdrop-filter: blur(18px);
        }

        .watan-app-nav::after {
            position: absolute;
            right: 0;
            bottom: -1px;
            left: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--watan-cyan), transparent);
            opacity: .65;
            content: '';
        }

        .watan-app-nav__inner { min-height: 52px; }

        .watan-app-brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            color: inherit;
            text-decoration: none;
        }

        .watan-app-brand__mark {
            position: relative;
            display: grid;
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            place-items: center;
            border: 1px solid rgba(255,255,255,.28);
            border-radius: 16px;
            background: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.03));
            box-shadow: 0 8px 25px rgba(0,0,0,.28), 0 0 28px rgba(47,128,255,.24);
            overflow: hidden;
            transition: transform .35s var(--watan-ease), box-shadow .35s var(--watan-ease);
        }

        .watan-app-brand__mark::after {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(255,255,255,.36), transparent 42%);
            pointer-events: none;
            content: '';
        }

        .watan-app-brand__mark img { width: 100%; height: 100%; object-fit: cover; }
        .watan-app-brand:hover .watan-app-brand__mark { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 36px rgba(47,128,255,.42); }
        .watan-app-brand__copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.1; }
        .watan-app-brand__copy strong { color: #fff; font-family: 'Dosis', 'Cairo', sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: 2.5px; }
        .watan-app-brand__copy small { margin-top: 5px; color: var(--watan-cyan); font-family: 'Dosis', sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: 1.8px; white-space: nowrap; }

        .watan-app-nav__status {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 9px 15px;
            border: 1px solid rgba(84,227,154,.24);
            border-radius: 999px;
            background: rgba(84,227,154,.07);
            color: #eafff3;
            box-shadow: inset 0 1px rgba(255,255,255,.06);
        }
        .watan-app-nav__status i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--watan-success); box-shadow: 0 0 0 5px rgba(84,227,154,.10), 0 0 15px rgba(84,227,154,.85); }
        .watan-app-nav__status span { font-family: 'Dosis', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
        .watan-app-nav__status small { color: var(--watan-muted); font-family: 'Dosis', sans-serif; font-size: .56rem; letter-spacing: 1px; white-space: nowrap; }

        .watan-sidebar-toggle,
        .watan-sidebar-close {
            display: inline-grid;
            place-items: center;
            border: 1px solid rgba(87,213,255,.30);
            color: #fff;
            cursor: pointer;
            background: linear-gradient(145deg, rgba(47,128,255,.25), rgba(47,128,255,.07));
            box-shadow: inset 0 1px rgba(255,255,255,.12), 0 7px 22px rgba(0,0,0,.20);
            transition: transform .3s var(--watan-ease), background .3s var(--watan-ease), border-color .3s var(--watan-ease), box-shadow .3s var(--watan-ease);
        }
        .watan-sidebar-toggle { width: 46px; height: 46px; border-radius: 15px; font-size: 1.35rem; }
        .watan-sidebar-toggle:hover, .watan-sidebar-close:hover { transform: translateY(-2px); border-color: var(--watan-cyan); background: linear-gradient(145deg, rgba(47,128,255,.45), rgba(47,128,255,.14)); box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 0 24px rgba(47,128,255,.25); }
        .watan-sidebar-toggle:focus-visible, .watan-sidebar-close:focus-visible, .watan-sidebar-link:focus-visible { outline: 3px solid rgba(87,213,255,.55); outline-offset: 3px; }

        .watan-sidebar-overlay { position: fixed; inset: 0; z-index: 1198; visibility: hidden; background: rgba(2,6,14,.72); opacity: 0; backdrop-filter: blur(8px); transition: opacity .35s ease, visibility 0s linear .35s; }
        .watan-sidebar-overlay.active { visibility: visible; opacity: 1; transition-delay: 0s; }

        .watan-sidebar { position: fixed; top: 0; right: 0; z-index: 1199; display: flex; width: min(410px, calc(100vw - 18px)); height: 100vh; height: 100dvh; flex-direction: column; overflow: hidden; border-left: 1px solid rgba(87,213,255,.30); border-radius: 24px 0 0 24px; background: linear-gradient(155deg, #101b2c 0%, #09111e 62%, #070c15 100%); box-shadow: -20px 0 60px rgba(0,0,0,.45), -2px 0 24px rgba(47,128,255,.12); transform: translateX(105%); visibility: hidden; transition: transform .55s var(--watan-ease), visibility 0s linear .55s; }
        .watan-sidebar.open { visibility: visible; transform: translateX(0); transition-delay: 0s; }
        .watan-sidebar::before { position: absolute; top: -90px; left: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(47,128,255,.16); filter: blur(35px); pointer-events: none; content: ''; }

        .watan-sidebar-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 25px 22px 20px; border-bottom: 1px solid var(--watan-line); background: linear-gradient(135deg, rgba(47,128,255,.15), rgba(255,255,255,.025)); }
        .watan-sidebar-header__user { display: flex; min-width: 0; align-items: center; gap: 12px; }
        .watan-sidebar-header__avatar { display: grid; width: 52px; height: 52px; flex: 0 0 52px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 17px; background: linear-gradient(145deg, var(--watan-primary), var(--watan-primary-strong)); color: #fff; font-family: 'Dosis', sans-serif; font-size: 1.4rem; font-weight: 800; box-shadow: 0 10px 25px rgba(23,105,232,.35); }
        .watan-sidebar-header__info { min-width: 0; }
        .watan-sidebar-header__info strong { display: block; overflow: hidden; color: #fff; font-size: .98rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
        .watan-sidebar-header__info small { display: block; margin-top: 4px; color: var(--watan-cyan); font-family: 'Dosis', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: 1.5px; }
        .watan-sidebar-close { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 13px; font-size: 1.05rem; }
        .watan-sidebar-close:hover { transform: rotate(90deg); }

        .watan-sidebar-body { position: relative; flex: 1; padding: 19px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(87,213,255,.35) transparent; scrollbar-width: thin; }
        .watan-sidebar-section { margin-bottom: 20px; }
        .watan-sidebar-section__label { display: flex; align-items: center; gap: 9px; margin: 0 8px 8px; color: var(--watan-cyan); font-family: 'Dosis', 'Cairo', sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: 2px; }
        .watan-sidebar-section__label::before { width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--watan-primary), var(--watan-cyan)); content: ''; }
        .watan-sidebar-link { display: flex; align-items: center; gap: 13px; min-height: 50px; margin-bottom: 5px; padding: 10px 13px; border: 1px solid transparent; border-radius: 15px; color: rgba(248,251,255,.84); font-size: .88rem; font-weight: 700; text-decoration: none; transition: transform .3s var(--watan-ease), background .3s var(--watan-ease), border-color .3s var(--watan-ease), color .3s var(--watan-ease), box-shadow .3s var(--watan-ease); }
        .watan-sidebar-link i { display: inline-grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid rgba(87,213,255,.15); border-radius: 10px; background: rgba(47,128,255,.12); color: var(--watan-cyan); font-size: 1.08rem; transition: inherit; }
        .watan-sidebar-link:hover { transform: translateX(-5px); border-color: rgba(87,213,255,.23); background: linear-gradient(90deg, rgba(47,128,255,.20), rgba(47,128,255,.06)); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.06); }
        .watan-sidebar-link:hover i { border-color: rgba(87,213,255,.35); background: rgba(47,128,255,.28); color: #fff; }
        .watan-sidebar-link.logout { color: #ffb0bb; }
        .watan-sidebar-link.logout i { border-color: rgba(255,111,131,.18); background: rgba(255,111,131,.10); color: var(--watan-danger); }
        .watan-sidebar-link.logout:hover { border-color: rgba(255,111,131,.28); background: rgba(255,111,131,.10); color: #fff; }
        .watan-sidebar-footer { padding: 15px 20px 20px; border-top: 1px solid var(--watan-line); text-align: center; }
        .watan-sidebar-footer small { color: var(--watan-muted); font-family: 'Dosis', sans-serif; font-size: .65rem; letter-spacing: 1.5px; }

        body.watan-drawer-open { overflow: hidden; }
        @media (max-width: 640px) { .watan-app-nav { min-height: 68px; padding: 10px 0; } .watan-app-brand__mark { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; } .watan-app-brand__copy strong { font-size: 1.1rem; } .watan-app-brand__copy small, .watan-app-nav__status { display: none; } .watan-sidebar-toggle { width: 42px; height: 42px; border-radius: 13px; } .watan-sidebar { width: min(390px, calc(100vw - 10px)); border-radius: 20px 0 0 20px; } }
        @media (prefers-reduced-motion: reduce) { .watan-app-header *, .watan-app-header *::before, .watan-app-header *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Exact visual language for rebuilt screens. */
.page-shell{min-height:calc(100vh - 76px);padding-top:42px}.page-shell>.card,.page-shell>.content-card{background:linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%);border:1.5px solid rgba(255,255,255,.09);border-radius:28px;padding:40px;box-shadow:0 35px 90px rgba(0,0,0,.62),inset 0 1px 2px rgba(255,255,255,.08);position:relative;overflow:hidden}.page-shell>.card:before,.page-shell>.content-card:before{content:'';position:absolute;top:0;left:40px;right:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}.page-shell h1,.page-shell h2{font-family:'Dosis','Cairo',sans-serif;font-weight:800;color:#fff}.page-shell label{display:block;color:rgba(255,255,255,.8);font-size:13px;font-weight:700;margin:12px 0 8px;letter-spacing:.5px}.page-shell input,.page-shell select,.page-shell textarea{background:rgba(255,255,255,.035);border:1.5px solid rgba(255,255,255,.1);border-radius:14px;min-height:50px;padding:14px 16px;font-family:'Cairo','Segoe UI',sans-serif;color:#fff}.page-shell input:focus,.page-shell select:focus,.page-shell textarea:focus{outline:none;border-color:#2f80ff;box-shadow:0 0 0 3px rgba(47,128,255,.16)}.page-shell .btn{background:linear-gradient(135deg,#0066ff,#0052cc);border-radius:14px;min-height:50px;padding:13px 22px;font-weight:800;box-shadow:0 12px 24px rgba(0,102,255,.24)}.page-shell table{background:rgba(0,0,0,.14);border-radius:14px;overflow:hidden}.page-shell th{color:#57d5ff;font-size:12px;letter-spacing:.6px}.page-shell td{color:rgba(255,255,255,.82)}

/* Standalone equivalents of the reference premium screens. */
.premium-container{width:100%;max-width:1120px;margin:0 auto}.premium-intro{margin-bottom:26px}.premium-intro-eyebrow{display:block;margin-bottom:8px;color:#57d5ff;font:800 .72rem/1 'Dosis','Cairo',sans-serif;letter-spacing:2px;text-transform:uppercase}.premium-intro h1{margin:0 0 8px;font:800 clamp(1.8rem,4vw,2.7rem)/1.1 'Dosis','Cairo',sans-serif}.premium-intro p{margin:0;color:#9aa9bd}.grid-container{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.premium-card{position:relative;grid-column:span 12;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(135deg,rgba(15,15,15,.96),rgba(26,26,26,.92));box-shadow:0 22px 55px rgba(0,0,0,.34),inset 0 1px 2px rgba(255,255,255,.06)}.premium-card--half{grid-column:span 6}.premium-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(47,128,255,.13),transparent)}.premium-header h2,.premium-header h3,.premium-header h5{margin:0;color:#fff;font:800 1.1rem/1.2 'Dosis','Cairo',sans-serif}.premium-header p{margin:6px 0 0;color:#9aa9bd;font-size:.82rem}.premium-body{padding:24px}.premium-table-wrapper{overflow:auto}.premium-table{width:100%;min-width:650px;border-collapse:collapse;background:transparent!important}.premium-table th{padding:13px 15px;color:#57d5ff;font:800 .72rem/1 'Dosis','Cairo',sans-serif;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}.premium-table td{padding:14px 15px;border-top:1px solid rgba(255,255,255,.07);color:rgba(248,251,255,.84);white-space:nowrap}.premium-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:.72rem;font-weight:800}.premium-badge-success{background:rgba(84,227,154,.12);color:#54e39a}.premium-badge-danger{background:rgba(255,111,131,.12);color:#ff9aa9}.premium-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 17px;border:0;border-radius:12px;background:linear-gradient(135deg,#2f80ff,#1769e8);color:#fff;text-decoration:none;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(23,105,232,.22)}.premium-btn--success{background:linear-gradient(135deg,#15966a,#0c694c)}.premium-btn--danger{background:linear-gradient(135deg,#c83f56,#8d2639)}.premium-btn--ghost{background:rgba(47,128,255,.1);border:1px solid rgba(87,213,255,.22);box-shadow:none}.premium-input,.premium-select,.premium-textarea{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.035);color:#fff}.premium-textarea{min-height:100px;resize:vertical}.premium-label{display:block;margin:0 0 8px;color:rgba(255,255,255,.78);font-weight:700}.premium-info-alert{margin-bottom:18px;padding:14px 17px;border:1px solid rgba(87,213,255,.22);border-radius:14px;background:rgba(47,128,255,.10);color:#c9edff}.premium-stat{font-size:2rem;font-weight:800;color:#54e39a}.premium-key{display:block;margin:9px 0;padding:12px 14px;border:1px solid rgba(87,213,255,.25);border-radius:12px;background:#070c15;color:#57d5ff;font:700 1.02rem/1.2 monospace;word-break:break-all}.premium-empty{text-align:center;padding:38px 18px;color:#9aa9bd}.premium-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.premium-form-grid .full{grid-column:1/-1}.premium-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}.premium-switch input{width:20px;min-height:20px;margin:0;accent-color:#2f80ff}.auth-error{max-width:468px;margin-right:auto;margin-left:auto}@media(max-width:760px){.premium-card--half{grid-column:span 12}.premium-form-grid{grid-template-columns:1fr}.premium-form-grid .full{grid-column:auto}.premium-header,.premium-body{padding:18px}.page-shell{padding:26px 13px 40px}}