:root {
    /* Page Background */
    --page-background: linear-gradient(135deg, #443E40 0%, #3a353f 100%);

    /* Primary Brand Colors - Green Theme */
    --brand-primary: #4CAF50;
    --brand-primary-dark: #388E3C;
    --brand-secondary: #2E7D32;
    
    /* Gradient */
    --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    
    /* Button Colors */
    --button-primary-bg: var(--brand-gradient);
    --button-primary-hover: var(--brand-primary-dark);
    --button-secondary-bg: #f5f5f5;
    --button-secondary-hover: #e8e8e8;
    --button-danger-bg: #f44336;
    --button-danger-hover: #da190b;
    
    /* Status Colors */
    --status-success-bg: #e8f5e9;
    --status-success-border: #4CAF50;
    --status-success-text: #2e7d32;
    
    --status-error-bg: #ffebee;
    --status-error-border: #f44336;
    --status-error-text: #c62828;
    
    --status-info-bg: #e3f2fd;
    --status-info-border: #2196F3;
    --status-info-text: #1565c0;
    
    --status-warning-bg: #fff3e0;
    --status-warning-border: #ff9800;
    --status-warning-text: #e65100;
    
    /* Links */
    --link-color: var(--brand-primary);
    --link-hover-color: var(--brand-primary-dark);
}

/* Apply brand colors */
.header {
    background: var(--brand-gradient) !important;
    user-select: none;
    -webkit-user-select: none; /* Safari */
}

.button-primary {
    background: var(--brand-primary) !important;
}

.button-primary:hover {
    background: var(--button-primary-hover) !important;
}

.button-secondary {
    background: var(--button-secondary-bg) !important;
}

.button-secondary:hover {
    background: var(--button-secondary-hover) !important;
}

.button-danger {
    background: var(--button-danger-bg) !important;
}

.button-danger:hover {
    background: var(--button-danger-hover) !important;
}

.status-success {
    background: var(--status-success-bg) !important;
    border-left-color: var(--status-success-border) !important;
    color: var(--status-success-text) !important;
}

.status-error {
    background: var(--status-error-bg) !important;
    border-left-color: var(--status-error-border) !important;
    color: var(--status-error-text) !important;
}

.status-info {
    background: var(--status-info-bg) !important;
    border-left-color: var(--status-info-border) !important;
    color: var(--status-info-text) !important;
}

.status-warning {
    background: var(--status-warning-bg) !important;
    border-left-color: var(--status-warning-border) !important;
    color: var(--status-warning-text) !important;
}

a {
    color: var(--link-color) !important;
}

a:hover {
    color: var(--link-hover-color) !important;
}

/* EXCEPTION: Links styled as buttons should keep button colors */
a.logout-btn,
a.back-link,
a.button,
a.button-primary,
a.button-secondary,
a.button-danger {
    color: white !important;
    text-decoration: none !important;
}

a.button-secondary {
    color: #333 !important;
}

.tab.active {
    color: var(--brand-primary) !important;
    border-bottom-color: var(--brand-primary) !important;
}

.tab:hover {
    color: var(--brand-primary) !important;
}

.credential-name.editable {
    color: var(--brand-primary) !important;
}

.session-badge {
    background: var(--status-success-border) !important;
}

.activity-type.success {
    color: var(--status-success-border) !important;
}

.activity-type.failed {
    color: var(--status-error-border) !important;
}

/* Form focus states */
input:focus {
    border-color: var(--brand-primary) !important;
}

/* Logout button */
.logout-btn {
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.3) !important;
}

.nav a:hover {
    background: rgba(255,255,255,0.2) !important;
}

.nav .account-link {
    background: rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

/* Page background for login and other full-page layouts */
body {
    background: var(--page-background) !important;
}

/* Logo Container */
.logo-container {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: top;
    margin-right: 15px;
    margin-bottom: 10px;
    position: relative;
}

.header-title {
    display: inline-flex;
    align-items: center;
}

.header-title h1 {
    display: inline-block;
    margin: 0;
}

.zebby_logo_container {
    width: 25px;
    height: 40px;
    perspective: 400px;
    display: flex;
    justify-content: left;
    align-items: top;
}

.zebby_logo_container > div {
    zoom: 0.2;
}

.zebby_logo_stairs {
    width: 120px;
    height: 120px;
    position: relative;
    transform-style: preserve-3d;
    animation: zebby_logo_rotate 8s linear infinite;
    transform-origin: 60px 60px 60px;
    top: 40px;
    z-index: 2;
}

@keyframes zebby_logo_rotate {
    from {
        transform: rotateX(-10deg) rotateY(0deg);
    }
    to {
        transform: rotateX(-10deg) rotateY(360deg);
    }
}

.zebby_logo_face {
    position: absolute;
}

/* Back face - square */
.zebby_logo_back {
    width: 120px;
    height: 120px;
    background: #a8a8a8;
    transform: translateZ(0px);
}

/* Bottom face - square */
.zebby_logo_bottom {
    width: 120px;
    height: 120px;
    background: #989898;
    transform: translateY(120px) rotateX(90deg);
    transform-origin: top left;
}

/* Left side - zigzag polygon */
.zebby_logo_left {
    width: 120px;
    height: 120px;
    transform: translateX(0px) rotateY(-90deg);
    transform-origin: center left;
}

/* Right side - zigzag polygon */
.zebby_logo_right {
    width: 120px;
    height: 120px;
    transform: translateX(120px) rotateY(-90deg);
    transform-origin: center left;
}

/* Step surfaces - common properties */
.zebby_logo_step1_top,
.zebby_logo_step2_top,
.zebby_logo_step3_top {
    width: 120px;
    height: 40px;
    background: #f5f5f5;
    transform-origin: top left;
}

.zebby_logo_step1_front,
.zebby_logo_step2_front,
.zebby_logo_step3_front {
    width: 120px;
    height: 40px;
    background: #e8e8e8;
}

/* Step 1 (bottom) - unique transforms */
.zebby_logo_step1_top {
    transform: translateY(80px) translateZ(120px) rotateX(-90deg);
}

.zebby_logo_step1_front {
    transform: translateY(80px) translateZ(120px);
}

/* Step 2 (middle) - unique transforms */
.zebby_logo_step2_top {
    transform: translateY(40px) translateZ(80px) rotateX(-90deg);
}

.zebby_logo_step2_front {
    transform: translateY(40px) translateZ(80px);
}

/* Step 3 (top) - unique transforms */
.zebby_logo_step3_top {
    transform: translateY(0px) translateZ(40px) rotateX(-90deg);
}

.zebby_logo_step3_front {
    transform: translateY(0px) translateZ(40px);
}

/* SVG faces */
.zebby_logo_left svg,
.zebby_logo_right svg {
    width: 100%;
    height: 100%;
}

/* Shadow */
.zebby_logo_shadow {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 80px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.4), transparent);
    border-radius: 50%;
    z-index: 1;
    filter: blur(8px);
}