@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

/* ==========================================================================
   DESIGN SYSTEM & VARIABLES (Hyper-Minimalist & Professional)
   ========================================================================== */
:root {
    /* Premium Glassmorphic Dark Theme (TKI inspired, default) */
    --bg-canvas: #060b16;       /* Deep dark blue-black */
    --bg-card: rgba(16, 22, 38, 0.65); /* Translucent dark cards */
    --bg-sidebar: rgba(8, 12, 24, 0.95);
    --border-card: rgba(255, 255, 255, 0.08); /* Fine borders */
    --border-hover: rgba(255, 255, 255, 0.15);
    --text-main: #ffffff;       /* Pure white text */
    --text-sub: #94a3b8;        /* Muted cool gray secondary text */
    --text-muted: #64748b;
    
    /* Brand Accent (Neon Blue / Cyan Glow) */
    --brand-accent: #38bdf8;
    --brand-accent-hover: #0ea5e9;
    --brand-accent-rgb: 56, 189, 248;
    --brand-accent-glow: rgba(56, 189, 248, 0.15);

    /* Glassmorphic Shadow & Radius */
    --radius-sharp: 4px;
    --radius-card: 12px;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: 'Fira Code', monospace;
    --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

[data-theme="light"] {
    /* Premium Light Theme (High Contrast Clean) */
    --bg-canvas: #f8fafc;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --border-card: #e2e8f0;
    --border-hover: #cbd5e1;
    --text-main: #0f172a;
    --text-sub: #475569;
    --text-muted: #94a3b8;
    
    --brand-accent: #0284c7;
    --brand-accent-hover: #0369a1;
    --brand-accent-rgb: 2, 132, 199;
    --brand-accent-glow: rgba(2, 132, 199, 0.1);
    
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

/* Reset & Base Setup */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 15px;
}

body {
    background-color: var(--bg-canvas);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-x: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-canvas);
}
::-webkit-scrollbar-thumb {
    background: var(--border-card);
    border-radius: var(--radius-sharp);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-hover);
}

/* ==========================================================================
   LANDING PAGE STYLES (Ultra-Minimalist Microsoft style)
   ========================================================================== */
.header-landing {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-card);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-landing {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-landing {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-main);
}

.logo-landing img {
    height: 20px;
    width: 20px;
}

.nav-links-landing {
    display: flex;
    gap: 24px;
    list-style: none;
}

.nav-link-landing {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-sub);
}

.nav-link-landing:hover {
    color: var(--text-main);
}

.btn-accent-flat {
    background-color: var(--brand-accent);
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: var(--radius-sharp);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-accent-flat:hover {
    background-color: var(--brand-accent-hover);
}

.btn-secondary-flat {
    background-color: transparent;
    border: 1px solid var(--border-card);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: var(--radius-sharp);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-secondary-flat:hover {
    background-color: var(--bg-canvas);
    border-color: var(--border-hover);
}

/* Hero Landing Section */
.hero-landing {
    padding: 100px 24px 80px 24px;
    background-color: var(--bg-card);
    text-align: center;
    border-bottom: 1px solid var(--border-card);
}

.hero-tagline {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-accent);
    margin-bottom: 16px;
}

.hero-landing h1 {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.hero-landing p {
    font-size: 1.1rem;
    color: var(--text-sub);
    max-width: 600px;
    margin: 0 auto 36px auto;
}

.hero-ctas {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Portfolio Showcase Grids */
.portfolio-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
}

.portfolio-header {
    text-align: center;
    margin-bottom: 48px;
}

.portfolio-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.portfolio-header p {
    color: var(--text-sub);
}

.portfolio-grid-landing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.card-landing {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.card-landing:hover {
    border-color: var(--brand-accent);
    transform: translateY(-2px);
}

.preview-box-landing {
    height: 190px;
    background-color: var(--bg-canvas);
    border-bottom: 1px solid var(--border-card);
    position: relative;
}

.preview-box-landing.vitrine {
    background-image: url('vitrine.png');
    background-size: cover;
    background-position: top center;
}

.preview-box-landing.petag {
    background-image: url('petag.png');
    background-size: cover;
    background-position: top center;
}

.preview-box-landing.orvix {
    background-image: url('orvix.png');
    background-size: cover;
    background-position: top center;
}

.status-badge-landing {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    background-color: #dff6dd;
    color: #107c41;
    text-transform: uppercase;
}

.status-badge-landing.dev {
    background-color: #fff4ce;
    color: #b75c00;
}

.content-box-landing {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.content-box-landing h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.content-box-landing a.domain {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--brand-accent);
    margin-bottom: 12px;
    display: inline-block;
}

.content-box-landing p {
    color: var(--text-sub);
    font-size: 0.9rem;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Call to Action flat block */
.banner-landing-cta {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 48px;
    text-align: center;
    box-shadow: var(--shadow-card);
    margin: 40px auto 0 auto;
    max-width: 1200px;
}

.banner-landing-cta h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.banner-landing-cta p {
    color: var(--text-sub);
    margin-bottom: 28px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

/* Footer Section */
.footer-landing {
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-card);
    padding: 40px 24px;
    font-size: 0.85rem;
    color: var(--text-sub);
}

.footer-grid-landing {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

.footer-col h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 16px;
}

.footer-col h4 img {
    height: 18px;
    width: 18px;
}

.footer-col h5 {
    color: var(--text-main);
    margin-bottom: 16px;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 8px;
}

.footer-bottom-landing {
    max-width: 1200px;
    margin: 24px auto 0 auto;
    border-top: 1px solid var(--border-card);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
}

/* ==========================================================================
   MICROSOFT ACCOUNT STYLE DASHBOARD (account.html Canvas)
   ========================================================================== */
.ms-header {
    background-color: #0067b8;  /* Microsoft Blue Header (Screenshot 2) */
    color: #ffffff;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 0.9rem;
}

.ms-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.ms-brand i.grid-menu {
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.9;
}

.ms-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Page wrapper matching Microsoft account dashboard template */
.ms-page-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: calc(100vh - 48px);
    overflow: hidden;
    transition: grid-template-columns 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ms-page-layout.sidebar-collapsed {
    grid-template-columns: 64px 1fr;
}

.ms-sidebar {
    background-color: var(--bg-sidebar);
    padding: 24px 0 0 0; /* padding bottom removed to allow flush footer placement */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--border-card);
    overflow: hidden;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.ms-sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.ms-sidebar-content::-webkit-scrollbar {
    display: none; /* Hide scrollbar for sidebar menu list */
}

.ms-sidebar-footer {
    flex-shrink: 0;
}

.ms-page-layout.sidebar-collapsed .ms-sidebar-link span,
.ms-page-layout.sidebar-collapsed .ms-sidebar span,
.ms-page-layout.sidebar-collapsed .ms-sidebar div div,
.ms-page-layout.sidebar-collapsed .ms-sidebar button span {
    display: none !important;
}

.ms-page-layout.sidebar-collapsed .ms-sidebar-link {
    justify-content: center;
    padding: 8px 0;
    margin: 2px 8px;
    gap: 0;
}

.ms-page-layout.sidebar-collapsed .ms-sidebar-link i {
    font-size: 1.2rem;
}

.ms-page-layout.sidebar-collapsed .ms-sidebar div[style*="padding: 20px"] {
    justify-content: center;
    padding: 20px 0 !important;
}

.ms-page-layout.sidebar-collapsed .ms-sidebar div[style*="padding: 16px"] {
    padding: 16px 0 !important;
    justify-content: center;
}

.ms-page-layout.sidebar-collapsed .ms-sidebar div[style*="padding: 16px"] .ms-avatar-lg {
    margin: 0 auto;
}

.ms-sidebar-menu {
    list-style: none;
}

.ms-sidebar-item {
    margin-bottom: 4px;
}

.ms-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    margin: 2px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-sub);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ms-sidebar-link:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--brand-accent);
}

.ms-sidebar-link.active {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(2, 132, 199, 0.08));
    color: var(--brand-accent);
    border-left: 3px solid var(--brand-accent);
    padding-left: 13px; /* Compensate for border-left */
    font-weight: 600;
}

/* Main canvas for cards */
.ms-main-content {
    padding: 40px;
    overflow-y: auto;
    width: 100%;
}

.ms-panel {
    display: none;
    animation: msFade 0.2s ease-out;
    max-width: 1080px;
    margin: 0 auto;
}

.ms-panel.active {
    display: block;
}

@keyframes msFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Profile header bar */
.ms-profile-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.ms-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--brand-accent);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 2px solid var(--border-card);
}

.ms-profile-info h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
}

.ms-profile-info p {
    font-size: 0.85rem;
    color: var(--text-sub);
}

/* Microsoft Cards Grid */
.ms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.ms-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.ms-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ms-card-header i {
    font-size: 1.3rem;
    color: var(--brand-accent);
}

.ms-card-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.ms-card-body {
    font-size: 0.9rem;
    color: var(--text-sub);
    margin-bottom: 20px;
}

/* Custom Storage Bar (Inspired by Screenshot 2: Microsoft Storage) */
.quota-bar-wrapper {
    margin-top: 16px;
}

.quota-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-bottom: 6px;
}

.quota-progress {
    height: 10px;
    background-color: var(--bg-canvas);
    border-radius: 5px;
    overflow: hidden;
    display: flex;
}

.quota-segment {
    height: 100%;
}

.quota-segment.vitrine {
    background-color: #0078d4;
}

.quota-segment.petag {
    background-color: #107c41;
}

.quota-segment.orvix {
    background-color: #f97316;
}

.quota-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--text-sub);
}

.quota-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quota-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Auth screens styled after Microsoft Minimal Auth Cards */
.ms-auth-wrapper {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.ms-auth-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    width: 100%;
    max-width: 440px;
    padding: 44px;
    border-radius: var(--radius-sharp);
}

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-sub);
}

.form-control {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-card);
    background-color: var(--bg-canvas);
    color: var(--text-main);
    border-radius: var(--radius-sharp);
    transition: border-color 0.15s ease;
    outline: none;
}

.form-control:focus {
    border-color: var(--brand-accent);
}

/* ==========================================================================
   SIMULATED PORTAL: PETAG DASHBOARD (Screenshot 3 Forest Green Theme)
   ========================================================================== */
.petag-portal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: #f4f6f8;
    color: #2c3e50;
    font-family: var(--font-sans);
    display: none;
    grid-template-rows: 48px 1fr;
}

.petag-header {
    background-color: #1e3f20;  /* Specific Forest Green from Screenshot 3 */
    color: #ffffff;
    display: grid;
    grid-template-columns: 240px 1fr auto;
    align-items: center;
    padding: 0 20px;
    font-size: 0.9rem;
}

.petag-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

.petag-search-bar {
    max-width: 400px;
    position: relative;
}

.petag-search-bar input {
    width: 100%;
    padding: 6px 12px 6px 36px;
    border-radius: 20px;
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.8rem;
}

.petag-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.petag-search-bar i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
}

.petag-header-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.petag-user-info {
    text-align: right;
    font-size: 0.75rem;
}

.petag-user-info strong {
    display: block;
    color: #ffffff;
    font-size: 0.85rem;
}

.petag-user-info span {
    color: rgba(255, 255, 255, 0.7);
}

.petag-btn-exit {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.petag-btn-exit:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.petag-main-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: calc(100vh - 48px);
}

.petag-sidebar {
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.petag-sidebar-list {
    list-style: none;
    padding: 12px 0;
}

.petag-sidebar-section {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 12px 20px 4px 20px;
    letter-spacing: 0.05em;
}

.petag-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    margin: 2px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.petag-sidebar-link:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

.petag-sidebar-link.active {
    background-color: rgba(16, 124, 65, 0.08);
    color: #107c41;
    font-weight: 600;
}

.petag-sidebar-link i {
    font-size: 1rem;
}

.petag-badge-red {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.petag-plan-box {
    margin: 16px;
    padding: 12px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #475569;
}

.petag-plan-box strong {
    color: #1e293b;
    display: block;
    margin-bottom: 2px;
}

.petag-content {
    padding: 30px;
    overflow-y: auto;
}

.petag-header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.petag-header-title h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
}

.petag-header-title p {
    font-size: 0.8rem;
    color: #64748b;
}

/* Metric Cards style Petag (Screenshot 3) */
.petag-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.petag-card-metric {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.petag-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 12px;
}

.petag-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.petag-card-icon.green { background-color: #e8f5e9; color: #2e7d32; }
.petag-card-icon.blue { background-color: #e3f2fd; color: #1565c0; }
.petag-card-icon.purple { background-color: #f3e5f5; color: #7b1fa2; }
.petag-card-icon.orange { background-color: #fff3e0; color: #ef6c00; }
.petag-card-icon.pink { background-color: #fce4ec; color: #c2185b; }

.petag-card-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
}

.petag-card-trend {
    font-size: 0.7rem;
    color: #10b981;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Two columns main card content */
.petag-layout-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
}

.petag-card-main {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.petag-card-main h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 20px;
}

/* ==========================================================================
   SIMULATED PORTAL: ORVIX GOVERNANCE (Screenshot 5 Navy Theme)
   ========================================================================== */
.orvix-portal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: #f1f5f9;
    color: #334155;
    font-family: var(--font-sans);
    display: none;
    grid-template-rows: 52px 1fr;
}

.orvix-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: 240px 1fr auto;
    align-items: center;
    padding: 0 20px;
}

.orvix-search-bar {
    max-width: 440px;
    position: relative;
}

.orvix-search-bar input {
    width: 100%;
    padding: 6px 12px 6px 36px;
    border-radius: 20px;
    border: none;
    background-color: #f1f5f9;
    color: #334155;
    font-size: 0.8rem;
}

.orvix-search-bar input::placeholder {
    color: #94a3b8;
}

.orvix-search-bar i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.orvix-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.orvix-header-icon {
    font-size: 1.1rem;
    color: #64748b;
    cursor: pointer;
}

.orvix-user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.orvix-avatar-blue {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #3b82f6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.orvix-username-display {
    font-size: 0.8rem;
    font-weight: 500;
}

.orvix-username-display span {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    font-weight: 400;
}

.orvix-main-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: calc(100vh - 52px);
}

.orvix-sidebar {
    background-color: #1e293b;  /* Specific Navy Dark Blue from Screenshot 5 */
    color: #94a3b8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.orvix-sidebar-top {
    padding: 16px 0;
}

.orvix-brand {
    padding: 0 20px 20px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.orvix-brand i {
    color: #3b82f6;
    font-size: 1.3rem;
}

.orvix-sidebar-menu {
    list-style: none;
    padding-top: 16px;
}

.orvix-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    margin: 2px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.orvix-sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.orvix-sidebar-link.active {
    background-color: #3b82f6;
    color: #ffffff;
    font-weight: 600;
}

.orvix-sidebar-link.deus-badge {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    font-weight: 700;
    border-left: 3px solid #3b82f6;
    padding-left: 17px;
}

.orvix-content {
    padding: 30px;
    overflow-y: auto;
}

/* Orvix Metric Cards (Screenshot 5) */
.orvix-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.orvix-metric-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.orvix-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.orvix-metric-icon.blue { background-color: #eff6ff; color: #3b82f6; }
.orvix-metric-icon.green { background-color: #ecfdf5; color: #10b981; }
.orvix-metric-icon.orange { background-color: #fff7ed; color: #f97316; }

.orvix-metric-info h4 {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.orvix-metric-info div.val {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
}

/* Orvix Grid Table components */
.orvix-grid-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.orvix-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 20px;
}

.orvix-box-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.orvix-box-header i {
    font-size: 1.1rem;
}

.orvix-box-header i.blue { color: #3b82f6; }
.orvix-box-header i.orange { color: #f97316; }
.orvix-box-header i.green { color: #10b981; }

.orvix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

.orvix-table th {
    color: #64748b;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
}

.orvix-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
}

.orvix-table tr:last-child td {
    border-bottom: none;
}

.orvix-placeholder-text {
    text-align: center;
    color: #94a3b8;
    font-size: 0.8rem;
    padding: 40px 0;
}

/* ==========================================================================
   MOCKUP DATA UTILS
   ========================================================================== */
.alert-incognito {
    background-color: #fff4ce;
    color: #3b3a39;
    border-bottom: 1px solid #f3ebe6;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1 / -1;
}

.badge-status-simple {
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 2px;
    text-transform: uppercase;
}

.badge-status-simple.active { background-color: #dff6dd; color: #107c41; }
.badge-status-simple.dev { background-color: #fff4ce; color: #b75c00; }
.badge-status-simple.blocked { background-color: #fde7e9; color: #a80000; }

/* ==========================================================================
   SIMULATED PORTAL: SUA VITRINE VIRTUAL (Screenshot 4 Royal Blue Theme)
   ========================================================================== */
.vitrine-portal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: #f3f4f6;
    color: #1f2937;
    display: none;
    grid-template-rows: 56px 1fr;
}

.vitrine-header {
    background-color: #0284c7;
    color: #ffffff;
    display: grid;
    grid-template-columns: 240px 1fr auto;
    align-items: center;
    padding: 0 20px;
    height: 56px;
}

.vitrine-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vitrine-brand .subtitle {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.7);
}

.vitrine-search-bar {
    max-width: 400px;
    position: relative;
}

.vitrine-search-bar input {
    width: 100%;
    padding: 6px 12px 6px 36px;
    border-radius: 20px;
    border: none;
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 0.8rem;
}

.vitrine-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.vitrine-search-bar i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.6);
}

.vitrine-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vitrine-user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vitrine-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.vitrine-main-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    height: calc(100vh - 56px);
}

.vitrine-sidebar {
    background-color: #ffffff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vitrine-menu {
    list-style: none;
    padding: 16px 0;
}

.vitrine-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    margin: 2px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #4b5563;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.vitrine-menu-link:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

.vitrine-menu-link.active {
    background-color: rgba(2, 132, 199, 0.08);
    color: #0284c7;
    font-weight: 600;
}

.vitrine-content-area {
    padding: 30px;
    overflow-y: auto;
    background-color: #f9fafb;
}

.vitrine-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.vitrine-metric-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.vitrine-metric-card .vitrine-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.vitrine-metric-card .icon-box {
    font-size: 1.1rem;
    color: #0284c7;
}

.vitrine-metric-card .vitrine-card-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
}

.vitrine-metric-card .vitrine-card-trend {
    font-size: 0.7rem;
    color: #10b981;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vitrine-charts-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
}

.vitrine-chart-box {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.vitrine-chart-box h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.vitrine-chart-box .subtitle {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 16px;
}

.vitrine-donut-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 20px auto;
}

.vitrine-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.vitrine-donut-center .num {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}

.vitrine-donut-center .lbl {
    font-size: 0.7rem;
    color: #6b7280;
}

/* ==========================================================================
   LINKED ACCOUNTS HUB & MODAL
   ========================================================================== */
.linked-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.linked-account-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 16px 24px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-card);
    transition: border-color 0.15s ease;
}

.linked-account-card:hover {
    border-color: var(--brand-accent);
}

.linked-account-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.linked-account-icon.blue { background-color: rgba(0, 120, 212, 0.1); color: #0078d4; }
.linked-account-icon.green { background-color: rgba(16, 124, 65, 0.1); color: #107c41; }
.linked-account-icon.orange { background-color: rgba(249, 115, 22, 0.1); color: #f97316; }
.linked-account-icon.purple { background-color: rgba(123, 31, 162, 0.1); color: #7b1fa2; }
.linked-account-icon.pink { background-color: rgba(194, 24, 91, 0.1); color: #c2185b; }

.linked-account-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.linked-account-info p {
    font-size: 0.8rem;
    color: var(--text-sub);
}

.linked-account-info .domain-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--brand-accent);
    margin-top: 4px;
    display: inline-block;
}

.linked-account-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Modal overlay styling */
.ms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: msFade 0.2s ease-out;
}

.ms-modal-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sharp);
    box-shadow: var(--shadow-card);
    width: 100%;
    max-width: 400px;
    padding: 36px;
    animation: msModalScale 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msModalScale {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Loading spinner */
.ms-spinner {
    border: 2px solid rgba(0, 120, 212, 0.1);
    border-top-color: #0078d4;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   ANNOUNCEMENTS & SYSTEM DASHBOARD CUSTOM STYLES
   ========================================================================== */
.announcements-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.announcement-post {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--shadow-card);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.announcement-post:hover {
    transform: translateY(-2px);
    border-color: var(--brand-accent);
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--brand-accent);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.post-metadata {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
}

.post-author-name {
    font-weight: 600;
    color: var(--text-main);
}

.post-date {
    color: var(--text-sub);
}

.post-tag {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 2px;
    text-transform: uppercase;
}

.tag-geral { background-color: #e1dfdd; color: #323130; }
.tag-vitrine { background-color: #deecf9; color: #0078d4; }
.tag-petag { background-color: #dff6dd; color: #107c41; }
.tag-orvix { background-color: #fed9cc; color: #f97316; }
.tag-maps { background-color: #fde7e9; color: #e81123; }

.post-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 4px 0 2px 0;
}

.post-content {
    font-size: 0.85rem;
    color: var(--text-sub);
    line-height: 1.4;
    white-space: pre-wrap;
}

.post-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--border-card);
    padding-top: 8px;
    margin-top: 4px;
}

.like-btn {
    background: transparent;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 2px;
    transition: background-color 0.2s;
}

.like-btn:hover {
    background-color: var(--border-card);
    color: var(--brand-accent);
}

.like-btn.liked {
    color: var(--brand-accent);
    font-weight: 600;
}

/* System summary layouts */
.sys-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    align-items: start;
}

.sys-stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 4px;
    padding: 20px;
    box-shadow: var(--shadow-card);
}

.sys-data-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 4px;
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.sys-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-card);
    font-size: 0.85rem;
}

.sys-info-row:last-child {
    border-bottom: none;
}

.sys-info-label {
    color: var(--text-sub);
    font-weight: 500;
}

.sys-info-value {
    color: var(--text-main);
    font-weight: 600;
}

.sys-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.sys-list-item {
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-card);
    border-radius: 4px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sys-list-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

.sys-list-item-sub {
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-top: 2px;
}

.sys-not-found {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-sub);
    font-size: 0.9rem;
}

.sys-not-found i {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: block;
}

/* ==========================================================================
   ADMIN TABLE & SERVICES TOGGLES STYLE (Fixes squeezed layout)
   ========================================================================== */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.admin-table th {
    padding: 14px 18px;
    background-color: var(--bg-canvas);
    font-weight: 600;
    color: var(--text-sub);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-card);
    white-space: nowrap;
}

.admin-table td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-card);
    font-size: 0.85rem;
    color: var(--text-main);
    vertical-align: middle;
}

.admin-table tr:hover td {
    background-color: rgba(255, 255, 255, 0.015);
}

.services-toggles {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.service-toggle-btn {
    border: 1px solid var(--border-card);
    background-color: var(--bg-canvas);
    color: var(--text-sub);
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.service-toggle-btn:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}

.service-toggle-btn.active {
    background-color: var(--brand-accent-glow);
    border-color: var(--brand-accent);
    color: var(--brand-accent);
}

/* ==========================================================================
   PREMIUM SYSTEMS DASHBOARDS & CHARTS STYLING
   ========================================================================== */
.sys-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    margin-top: 10px;
}

.sys-stat-card, .sys-data-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--shadow-card);
}

.sys-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-card);
    font-size: 0.85rem;
}

.sys-info-row:last-of-type {
    border-bottom: none;
}

.sys-info-label {
    color: var(--text-sub);
    font-weight: 500;
}

.sys-info-value {
    color: var(--text-main);
    font-weight: 600;
}

.sys-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sys-list-item {
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.sys-list-item:hover {
    transform: translateY(-2px);
    border-color: var(--brand-accent);
}

/* SVG Line Chart Glow */
.chart-glow {
    filter: drop-shadow(0px 4px 8px rgba(var(--brand-accent-rgb), 0.3));
}

/* Interactive SVG Bar chart */
.bar-chart-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 120px;
    padding: 10px 0;
    border-bottom: 1.5px solid var(--border-card);
    margin-bottom: 8px;
}

.chart-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
    position: relative;
    group: hover;
}

.chart-bar-fill {
    width: 60%;
    max-width: 24px;
    background: linear-gradient(180deg, var(--brand-accent) 0%, rgba(var(--brand-accent-rgb), 0.4) 100%);
    border-radius: 4px 4px 0 0;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.chart-bar-fill:hover {
    filter: brightness(1.2);
}

.chart-bar-fill::after {
    content: attr(data-value);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    padding: 2px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
    z-index: 10;
}

.chart-bar-fill:hover::after {
    opacity: 1;
}

.chart-bar-label {
    font-size: 0.7rem;
    color: var(--text-sub);
    margin-top: 6px;
    font-weight: 600;
}

@keyframes pulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 0.4; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

@keyframes dotMove {
    0% { left: 0%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Portfolio Showcase Carousel */
.portfolio-carousel-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
}

.portfolio-carousel-viewport {
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius-card);
}

.portfolio-carousel-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.portfolio-carousel-track .card-landing {
    flex: 0 0 calc((100% - (24px * 2)) / 3);
    max-width: calc((100% - (24px * 2)) / 3);
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .portfolio-carousel-track .card-landing {
        flex: 0 0 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 600px) {
    .portfolio-carousel-track .card-landing {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .portfolio-carousel-wrapper {
        padding: 0 24px;
    }
    .carousel-btn.prev { left: -12px; }
    .carousel-btn.next { right: -12px; }
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-card);
    color: var(--text-main);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-card);
}

.carousel-btn:hover:not(:disabled) {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #ffffff;
    box-shadow: 0 0 15px var(--brand-accent);
}

.carousel-btn.prev {
    left: -8px;
}

.carousel-btn.next {
    right: -8px;
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    box-shadow: none;
    background-color: var(--bg-card);
    border-color: var(--border-card);
    color: var(--text-sub);
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-card);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
}

.carousel-dot.active {
    background-color: var(--brand-accent);
    width: 24px;
    border-radius: 4px;
}

.preview-box-landing.quedele {
    background-image: url('quedele.png');
    background-size: cover;
    background-position: top center;
}

.preview-box-landing.vetatires {
    background-image: url('vetatires.png');
    background-size: cover;
    background-position: top center;
}