:root {
    --egt-primary: #6366f1;
    --egt-primary-dark: #4f46e5;
    --egt-primary-light: #eef2ff;
    --egt-surface: #ffffff;
    --egt-surface-alt: #f8fafc;
    --egt-text: #0f172a;
    --egt-text-secondary: #475569;
    --egt-text-muted: #94a3b8;
    --egt-border: #e2e8f0;
    --egt-border-light: #f1f5f9;
    --egt-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --egt-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --egt-shadow-md: 0 4px 6px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04);
    --egt-shadow-lg: 0 10px 15px rgba(0,0,0,.05), 0 4px 6px rgba(0,0,0,.04);
    --egt-shadow-xl: 0 20px 40px rgba(0,0,0,.08);
    --egt-radius: 20px;
    --egt-radius-md: 14px;
    --egt-radius-sm: 10px;
    --egt-radius-xs: 8px;
    --egt-transition: .25s cubic-bezier(.4,0,.2,1);
    --egt-transition-fast: .15s cubic-bezier(.4,0,.2,1);
    --egt-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --egt-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* ========== RESET ========== */
.egt-portal-container,
.egt-portal-container *,
.egt-portal-container *::before,
.egt-portal-container *::after { box-sizing:border-box }

.egt-portal-container button,
.egt-portal-container input,
.egt-portal-container select,
.egt-portal-container textarea {
    font-family:var(--egt-font);
    font-size:inherit;line-height:inherit;
    margin:0;padding:0;border:none;
    background:none;color:inherit;
    appearance:none;-webkit-appearance:none;
    border-radius:0;box-shadow:none;outline:none
}
.egt-portal-container button {cursor:pointer;text-align:center;white-space:nowrap}
.egt-portal-container a {text-decoration:none;color:inherit}
.egt-portal-container img {max-width:none;border:none}
.egt-portal-container h1,.egt-portal-container h2,.egt-portal-container h3,
.egt-portal-container h4,.egt-portal-container h5,.egt-portal-container h6,
.egt-portal-container p {margin:0;padding:0;font-weight:inherit;font-size:inherit;line-height:inherit}

.egt-portal-container {
    max-width:1340px;
    margin:0 auto;
    font-family:var(--egt-font);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.egt-portal-no-data {
    text-align:center;
    padding:80px 40px;
    color:var(--egt-text-muted);
    font-size:15px;
    font-weight:500;
    background:var(--egt-surface);
    border-radius:var(--egt-radius);
    border:2px dashed var(--egt-border);
}
.egt-portal-no-data::before {
    content:'';
    display:block;
    width:64px;height:64px;
    margin:0 auto 20px;
    background:var(--egt-primary-light);
    border-radius:50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%236366f1' stroke-width='1.5'%3E%3Crect x='3' y='3' width='22' height='22' rx='4'/%3E%3Cpath d='M9 13l3 3 7-7'/%3E%3C/svg%3E");
    background-position:center;
    background-repeat:no-repeat;
}

/* ========== GROUPED LAYOUT ========== */
.egt-portal-grouped {
    background:var(--egt-surface);
    border-radius:var(--egt-radius);
    overflow:hidden;
    box-shadow:var(--egt-shadow-lg);
    border:1px solid var(--egt-border);
}

.egt-portal-group-nav {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:20px 28px;
    background:linear-gradient(180deg, #fafbfd 0%, #f1f5f9 100%);
    border-bottom:1px solid var(--egt-border);
    position:relative;
    z-index:2;
}

.egt-portal-group-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    border:none;
    background:transparent;
    color:var(--egt-text-secondary);
    cursor:pointer;
    font-size:13.5px;
    font-weight:600;
    border-radius:var(--egt-radius-sm);
    transition:all var(--egt-transition);
    position:relative;
    letter-spacing:-.2px;
}

.egt-portal-group-btn::after {
    content:'';
    position:absolute;
    inset:0;
    background:var(--group-color, var(--egt-primary));
    opacity:0;
    border-radius:var(--egt-radius-sm);
    transition:opacity var(--egt-transition);
    z-index:-1;
}

.egt-portal-group-btn:hover {
    color:var(--egt-text);
    background:rgba(255,255,255,.7);
}

.egt-portal-group-btn.active {
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.egt-portal-group-btn.active::after {
    opacity:1;
}

.egt-portal-group-icon {font-size:18px;line-height:1}

.egt-portal-group-count {
    background:rgba(0,0,0,.05);
    padding:2px 9px;
    border-radius:99px;
    font-size:11px;
    font-weight:700;
}

.egt-portal-group-btn.active .egt-portal-group-count {
    background:rgba(255,255,255,.25);
    color:#fff;
}

.egt-portal-groups-content {min-height:300px}

.egt-portal-group-panel {
    display:none;
    animation:egtFadeSlide .35s ease;
}
.egt-portal-group-panel.active {display:block}

@keyframes egtFadeSlide {
    0% {opacity:0;transform:translateY(10px)}
    100% {opacity:1;transform:translateY(0)}
}

.egt-portal-group-header {
    padding:32px 40px;
    display:flex;
    align-items:center;
    gap:18px;
    color:#fff;
    position:relative;
    overflow:hidden;
}

.egt-portal-group-header::before {
    content:'';
    position:absolute;
    right:-60px;top:-60px;
    width:240px;height:240px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
}
.egt-portal-group-header::after {
    content:'';
    position:absolute;
    right:80px;bottom:-80px;
    width:180px;height:180px;
    background:rgba(255,255,255,.04);
    border-radius:50%;
}

.egt-portal-group-header-icon {font-size:38px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}

.egt-portal-group-header h2 {
    margin:0;
    font-size:28px;
    font-weight:800;
    flex:1;
    letter-spacing:-.8px;
    position:relative;
    z-index:1;
}

.egt-portal-group-header-count {
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
    padding:7px 20px;
    border-radius:99px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.3px;
}

.egt-portal-group-cards {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
    gap:24px;
    padding:36px 40px;
    background:linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* ========== GRID LAYOUT ========== */
.egt-portal-grid {
    display:grid;
    grid-template-columns:repeat(var(--grid-columns, 4), 1fr);
    gap:24px;
}

/* ========== TABS V2 LAYOUT ========== */
.egt-portal-tabs-v2 {
    background:var(--egt-surface);
    border-radius:var(--egt-radius);
    overflow:hidden;
    box-shadow:var(--egt-shadow-lg);
    border:1px solid var(--egt-border);
}

.egt-tabs-cat-nav {
    display:flex;
    flex-wrap:wrap;
    gap:0;
    background:#fff;
    padding:6px 24px 0;
    border-bottom:2px solid var(--egt-border);
}

.egt-tabs-cat-btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 22px;
    border:none;
    background:transparent;
    color:var(--egt-text-muted);
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    border-bottom:3px solid transparent;
    margin-bottom:-2px;
    transition:all var(--egt-transition);
    letter-spacing:-.2px;
    position:relative;
}

.egt-tabs-cat-btn:hover {
    color:var(--egt-text);
    background:var(--egt-surface-alt);
}

.egt-tabs-cat-btn.active {
    color:var(--cat-color, var(--egt-primary));
    border-bottom-color:var(--cat-color, var(--egt-primary));
    background:transparent;
}

.egt-tabs-cat-icon {font-size:20px;line-height:1}
.egt-tabs-cat-text {position:relative}

.egt-tabs-cat-count {
    background:var(--egt-border-light);
    padding:2px 9px;
    border-radius:99px;
    font-size:11px;
    font-weight:700;
    color:var(--egt-text-muted);
    min-width:22px;
    text-align:center;
}
.egt-tabs-cat-btn.active .egt-tabs-cat-count {
    background:color-mix(in srgb, var(--cat-color, var(--egt-primary)) 12%, transparent);
    color:var(--cat-color, var(--egt-primary));
}

.egt-tabs-portal-nav-wrap {
    background:var(--egt-surface-alt);
    border-bottom:1px solid var(--egt-border);
}

.egt-tabs-portal-nav {
    display:flex;
    flex-wrap:wrap;
    padding:4px 12px 0;
    gap:2px;
}

.egt-portal-tab-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border:none;
    background:transparent;
    color:var(--egt-text-secondary);
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    border-radius:var(--egt-radius-sm) var(--egt-radius-sm) 0 0;
    transition:all var(--egt-transition);
    letter-spacing:-.2px;
    position:relative;
}

.egt-portal-tab-btn:hover {
    color:var(--egt-primary);
    background:rgba(99,102,241,.04);
}

.egt-portal-tab-btn.active {
    color:var(--egt-primary-dark);
    background:#fff;
    box-shadow:0 -1px 3px rgba(0,0,0,.04);
}

.egt-portal-tab-btn.active::after {
    content:'';
    position:absolute;
    bottom:-1px;left:0;right:0;
    height:3px;
    background:var(--portal-color, var(--egt-primary));
    border-radius:3px 3px 0 0;
}

.egt-portal-tab-btn img {width:20px;height:20px;border-radius:5px;object-fit:contain}

.egt-portal-tabs-content {background:#fff;min-height:250px}
.egt-portal-tab-panel {display:none;padding:36px 40px;animation:egtFadeSlide .3s ease}
.egt-portal-tab-panel.active {display:block}

.egt-portal-info-header {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:28px;
}
.egt-portal-info-icon {
    width:48px;height:48px;
    border-radius:12px;
    object-fit:contain;
    background:var(--egt-surface-alt);
    padding:8px;
    border:1px solid var(--egt-border);
}
.egt-portal-info h3 {
    margin:0 0 4px;
    font-size:24px;
    font-weight:800;
    color:var(--egt-text);
    letter-spacing:-.5px;
}
.egt-portal-info-cat {
    font-size:13px;
    font-weight:600;
}

/* ========== CARD ========== */
.egt-portal-card {
    background:var(--egt-surface);
    border-radius:var(--egt-radius-md);
    box-shadow:var(--egt-shadow);
    overflow:hidden;
    transition:all var(--egt-transition);
    border:1px solid var(--egt-border);
    display:flex;
    flex-direction:column;
}

.egt-portal-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--egt-shadow-xl);
    border-color:transparent;
}

.egt-portal-card-header {
    background:linear-gradient(135deg, var(--card-color, var(--egt-primary)), color-mix(in srgb, var(--card-color, var(--egt-primary)) 80%, #000));
    color:#fff;
    padding:20px 24px;
    display:flex;
    align-items:center;
    gap:14px;
    position:relative;
    overflow:hidden;
}

.egt-portal-card-header::before {
    content:'';
    position:absolute;
    right:-40px;top:-40px;
    width:140px;height:140px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
}
.egt-portal-card-header::after {
    content:'';
    position:absolute;
    right:40px;bottom:-30px;
    width:80px;height:80px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
}

.egt-portal-card-header img {
    width:32px;height:32px;
    border-radius:8px;
    object-fit:contain;
    background:rgba(255,255,255,.18);
    padding:5px;
    position:relative;
    z-index:1;
    backdrop-filter:blur(4px);
}

.egt-portal-card-header h3 {
    margin:0;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.3px;
    position:relative;
    z-index:1;
}

.egt-portal-card-body {padding:22px 24px;flex:1}

.egt-portal-card-footer {
    padding:16px 24px;
    border-top:1px solid var(--egt-border-light);
    background:var(--egt-surface-alt);
}

/* ========== FIELDS ========== */
.egt-portal-info h3 {
    margin:0 0 32px;
    font-size:26px;
    color:var(--egt-text);
    font-weight:800;
    letter-spacing:-.6px;
}

.egt-portal-field {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 16px;
    margin-bottom:8px;
    background:var(--egt-surface-alt);
    border-radius:var(--egt-radius-xs);
    border:1px solid transparent;
    transition:all var(--egt-transition-fast);
}

.egt-portal-field:hover {
    border-color:var(--egt-primary);
    background:#fff;
    box-shadow:0 2px 8px rgba(99,102,241,.06);
}

.egt-portal-field:last-child {margin-bottom:0}

.egt-portal-field label {
    font-weight:600;
    color:var(--egt-text-secondary);
    min-width:100px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.6px;
    flex-shrink:0;
}

.egt-portal-field a {
    color:var(--egt-primary);
    font-weight:500;
    transition:color .15s;
    font-size:13.5px;
    word-break:break-all;
}
.egt-portal-field a:hover {
    color:var(--egt-primary-dark);
    text-decoration:underline;
}

.egt-portal-value {
    flex:1;
    font-family:var(--egt-font-mono);
    font-size:13.5px;
    color:var(--egt-text);
    background:#fff;
    padding:7px 12px;
    border-radius:6px;
    border:1px solid var(--egt-border);
    letter-spacing:-.2px;
    word-break:break-all;
}

.egt-portal-extra-fields {
    margin-top:24px;
    padding-top:24px;
    border-top:2px dashed var(--egt-border);
}

.egt-portal-extra-fields h4 {
    margin:0 0 18px;
    font-size:14px;
    color:var(--egt-text-secondary);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
}

/* ========== BUTTONS ========== */
.egt-portal-copy,
.egt-portal-toggle-password {
    padding:7px 14px;
    border:1px solid var(--egt-border);
    background:#fff;
    border-radius:7px;
    cursor:pointer;
    font-size:12px;
    font-weight:600;
    color:var(--egt-text-secondary);
    transition:all var(--egt-transition-fast);
    flex-shrink:0;
    letter-spacing:-.2px;
}

.egt-portal-copy:hover,
.egt-portal-toggle-password:hover {
    background:var(--egt-primary);
    border-color:var(--egt-primary);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(99,102,241,.3);
}

.egt-portal-copy:active,
.egt-portal-toggle-password:active {transform:translateY(0)}

.egt-portal-go-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 32px;
    background:linear-gradient(135deg, var(--egt-primary), var(--egt-primary-dark));
    color:#fff;
    text-decoration:none;
    border-radius:var(--egt-radius-sm);
    font-weight:700;
    font-size:14px;
    letter-spacing:-.3px;
    transition:all var(--egt-transition);
    box-shadow:0 4px 16px rgba(99,102,241,.3);
    position:relative;
    overflow:hidden;
    width:100%;
}

.egt-portal-go-btn::after {
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:100%;height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transition:left .6s;
}

.egt-portal-go-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 25px rgba(99,102,241,.4);
}

.egt-portal-go-btn:hover::after {left:100%}

.egt-portal-password {letter-spacing:2px;user-select:none}

.egt-portal-actions {
    margin-top:24px;
    display:flex;
    gap:12px;
}

/* ========== INLINE EDIT (Admin) ========== */
.egt-portal-edit-inline {
    padding:4px 10px;
    border:1px solid var(--egt-border);
    background:#fff;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    color:#f59e0b;
    transition:all var(--egt-transition-fast);
    flex-shrink:0;
    line-height:1;
}
.egt-portal-edit-inline:hover {
    background:#fef3c7;
    border-color:#f59e0b;
    color:#d97706;
}

.egt-inline-input {
    flex:1;
    min-width:120px;
    padding:7px 12px;
    border:2px solid var(--egt-primary);
    border-radius:7px;
    font-size:13.5px;
    font-family:var(--egt-font-mono);
    outline:none;
    box-shadow:0 0 0 4px rgba(99,102,241,.1);
    transition:box-shadow var(--egt-transition-fast);
}
.egt-inline-input:focus {box-shadow:0 0 0 4px rgba(99,102,241,.2)}

.egt-inline-save,
.egt-inline-cancel {
    padding:7px 14px;
    border:none;
    border-radius:7px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:all var(--egt-transition-fast);
    flex-shrink:0;
    line-height:1;
}

.egt-inline-save {
    background:#10b981;
    color:#fff;
    box-shadow:0 2px 8px rgba(16,185,129,.25);
}
.egt-inline-save:hover {
    background:#059669;
    box-shadow:0 4px 12px rgba(16,185,129,.35);
}

.egt-inline-cancel {
    background:var(--egt-surface-alt);
    color:var(--egt-text-secondary);
    border:1px solid var(--egt-border);
}
.egt-inline-cancel:hover {
    background:var(--egt-border);
    color:var(--egt-text);
}

/* ========== SKELETON LOADING ========== */
@keyframes egtShimmer {
    0% {background-position:-400px 0}
    100% {background-position:400px 0}
}
.egt-portal-skeleton {
    background:linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size:800px 100%;
    animation:egtShimmer 1.5s infinite;
    border-radius:6px;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
    .egt-portal-grid {grid-template-columns:repeat(3, 1fr)}
    .egt-portal-group-cards {grid-template-columns:repeat(2, 1fr)}
    .egt-portal-group-header {padding:24px 28px}
    .egt-portal-group-header h2 {font-size:22px}
    .egt-portal-group-header-icon {font-size:30px}
}

@media (max-width: 768px) {
    .egt-portal-grid {grid-template-columns:repeat(2, 1fr);gap:16px}
    .egt-portal-group-cards {grid-template-columns:1fr;padding:20px}
    .egt-portal-group-nav {
        overflow-x:auto;
        flex-wrap:nowrap;
        -webkit-overflow-scrolling:touch;
        padding:14px 16px;
    }
    .egt-portal-group-btn {white-space:nowrap;flex-shrink:0;padding:9px 16px;font-size:12.5px}
    .egt-portal-tabs-nav {overflow-x:auto;flex-wrap:nowrap}
    .egt-portal-tab-btn {white-space:nowrap;flex-shrink:0;padding:10px 16px;font-size:12px}
    .egt-portal-tab-panel {padding:24px 20px}
    .egt-portal-field {flex-wrap:wrap;gap:8px}
    .egt-portal-field label {min-width:100%;margin-bottom:4px;font-size:11px}
    .egt-portal-value {width:100%}
    .egt-portal-group-header {padding:20px 24px}
    .egt-portal-group-header h2 {font-size:20px}
    .egt-portal-group-header-icon {font-size:26px}
    .egt-portal-card-header {padding:16px 20px}
    .egt-portal-card-body {padding:18px 20px}
    .egt-portal-card-footer {padding:14px 20px}
    .egt-portal-group-cards {padding:20px}
    .egt-tabs-cat-nav {padding:10px 14px;gap:2px}
    .egt-tabs-cat-btn {padding:8px 14px;font-size:12px}
}

@media (max-width: 480px) {
    .egt-portal-grid {grid-template-columns:1fr}
    .egt-portal-tab-panel {padding:20px 16px}
    .egt-portal-info h3 {font-size:20px}
    .egt-portal-group-header h2 {font-size:18px}
    .egt-portal-go-btn {width:100%}
    .egt-portal-group-header {flex-wrap:wrap;gap:12px}
    .egt-portal-group-header-count {font-size:12px;padding:5px 14px}
}