/* ============================================================
   ADVANCED DESIGN CANVAS HERO SPECIFIC STYLES - FLAGSHIP REFINE
   ============================================================ */

:root {
    --canvas-bg: #07040d;
    --canvas-border: rgba(255, 255, 255, 0.05);
    --guide-cyan: rgba(6, 182, 212, 0.25);
    --guide-purple: rgba(168, 85, 247, 0.2);
    --sticky-bg: #fef08a; /* Solid Post-It yellow */
    --sticky-border: #eab308;
    --wireframe-bg: rgba(255, 255, 255, 0.015);
    --wireframe-border: rgba(255, 255, 255, 0.1);
    --system-bg: rgba(20, 16, 32, 0.55);
    --system-border: rgba(255, 255, 255, 0.05);
    --final-bg: #090514; /* Premium Figma-like dark canvas bg */
    --final-border: rgba(255, 255, 255, 0.05);
    --feedback-bg: #0a0d14;
    --feedback-border: rgba(255, 255, 255, 0.06);
}

.hero-layout-design-canvas {
    background: #05010a;
    overflow: hidden;
}

@media (min-width: 1025px) {
    .hero-layout-design-canvas .service_details-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: clamp(2rem, 3vw, 3.5rem);
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        align-items: center;
    }
}

/* Faint grid background overlay across the entire section */
.hero-bg-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(168, 85, 247, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 1;
}

/* Subtle radial purple glow behind left-side text elements */
.heading-glow-radial {
    position: absolute;
    top: 15%;
    left: -20%;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.075) 0%, transparent 75%);
    pointer-events: none;
    z-index: 1;
    filter: blur(40px);
}

/* Ambient Back-Glowing Lights for Right Side */
.canvas-ambient-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    filter: blur(50px);
}
.light-purple-bg {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 80%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.light-purple-soft {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.07) 0%, transparent 80%);
    top: -50px;
    right: -50px;
}

/* Canvas Workspace Container */
.canvas-workspace-wrapper {
    width: 100%;
    max-width: 820px;
    height: 410px;
    background: var(--canvas-bg);
    border: 1px solid var(--canvas-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.95),
                0 0 40px 0 rgba(168, 85, 247, 0.03);
    z-index: 5;
    margin: 0 auto;
}
@media (min-width: 1280px) {
    .canvas-workspace-wrapper {
        max-width: 820px;
        height: 410px;
    }
}


/* Header Chrome Bar with Tools */
.canvas-editor-header {
    height: 38px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--canvas-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    z-index: 10;
    user-select: none;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.canvas-window-dots {
    display: flex;
    gap: 6px;
    width: 80px;
}
.canvas-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

/* Mid Toolbar Group */
.canvas-toolbar-group {
    display: flex;
    align-items: center;
    gap: 18px; /* Increased horizontal spacing between tools to look like Figma */
}
.canvas-tool-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.canvas-tool-indicator:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.03);
}
.canvas-tool-indicator.active {
    color: #06b6d4; /* Highlight tool selection with Cyan active style */
    background: rgba(6, 182, 212, 0.12);
}
.tool-icon {
    width: 11px;
    height: 11px;
}
.tool-text-icon {
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
}
.canvas-tool-separator {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.08);
}

/* Actions Group */
.canvas-actions-group {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    width: 150px;
}
.canvas-action-btn {
    border: none;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}
.action-preview {
    background: #a855f7;
    color: #fff;
    box-shadow: 0 4px 10px rgba(168, 85, 247, 0.2);
}
.action-preview:hover {
    background: #b56bf8;
}
.action-share {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.08);
}
.action-share:hover {
    background: rgba(255,255,255,0.1);
}
.canvas-header-close {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transition: all 0.2s ease;
}
.canvas-header-close:hover {
    color: #fff;
}

/* Feedback comment badge (breakout top edge) */
.canvas-feedback-badge {
    display: none !important;
    gap: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6),
                0 0 15px rgba(168, 85, 247, 0.15);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(5px);
    transition: all 0.4s ease;
}
.feedback-avatar {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ec4899;
    color: #fff;
    font-size: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.feedback-avatar::before {
    content: "2";
}
.feedback-close {
    font-size: 8px;
    opacity: 0.4;
    cursor: pointer;
}

/* Canvas Body Area */
.canvas-body {
    flex: 1;
    position: relative;
    overflow: visible; /* Overlapping card breakout */
    cursor: default;
    transform-style: preserve-3d;
}

/* Grid Overlay */
.canvas-grid-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 16px 16px;
    pointer-events: none;
    z-index: 1;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    overflow: hidden;
}

/* Guides */
.canvas-layout-guide {
    position: absolute;
    pointer-events: none;
    z-index: 2;
}
.guide-v {
    width: 0;
    height: 100%;
    border-left: 1px dashed rgba(255, 255, 255, 0.05);
}
.guide-h {
    height: 0;
    width: 100%;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}
.guide-v-1 { left: 24%; }
.guide-v-2 { left: 52%; }
.guide-h-1 { top: 30%; }
.guide-h-2 { top: 70%; }

/* Smart Measurement Guide - Cyan Accent */
.canvas-smart-guide {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    font-size: 9px;
    font-family: monospace;
    color: #06b6d4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
.guide-measurement {
    top: 130px;
    left: 235px;
    width: 60px;
    height: 20px;
}
.guide-line-segment {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #06b6d4;
}
.guide-line-segment::before,
.guide-line-segment::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 7px;
    background: #06b6d4;
    top: -3px;
}
.guide-line-segment::before { left: 0; }
.guide-line-segment::after { right: 0; }

.guide-badge {
    background: #06b6d4;
    color: #000;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    z-index: 2;
    transform: translateY(-8px);
}

/* Active Snapping Selection Outline */
.canvas-active-outline {
    position: absolute;
    border: 1px solid #06b6d4;
    pointer-events: none;
    z-index: 28;
    opacity: 0;
}
.outline-node {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #fff;
    border: 1px solid #06b6d4;
    border-radius: 1px;
}
.outline-node.nw { top: -3px; left: -3px; }
.outline-node.ne { top: -3px; right: -3px; }
.outline-node.se { bottom: -3px; right: -3px; }
.outline-node.sw { bottom: -3px; left: -3px; }
.outline-label {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #06b6d4;
    color: #000;
    font-size: 7px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
}

/* SVG Connection Lines - Purple Primary */
.canvas-prototype-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}
.proto-line {
    fill: none;
    stroke: #a855f7;
    stroke-width: 1px;
    stroke-linecap: round;
    opacity: 0.3;
}

/* Cursors */
.canvas-cursor {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
}
.cursor-pointer-svg {
    width: 14px;
    height: 14px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.cursor-tag {
    display: none !important;
}

/* 3D Artboard Bases */
.canvas-artboard {
    position: absolute;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--canvas-border);
    border-radius: 12px;
    padding: 12px;
    user-select: none;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    z-index: 10;
}

.artboard-label {
    position: absolute;
    top: -16px;
    left: 2px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============================================================
   ARTBOARD 01: RESEARCH STICKY (REAL DESIGNER POST-IT STYLE)
   ============================================================ */
.artboard-research {
    top: 15px;
    left: 1.5%;
    width: 14%;
    height: 90px;
    background: #fffdf0; /* Warm premium cream */
    border: 1px solid #fef08a;
    transform: translate3d(0, 0, 10px) rotateZ(-1.5deg);
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 0 15px rgba(254, 240, 138, 0.1);
    color: #0f172a; /* Sharp readable dark text */
    padding: 6px;
    opacity: 0.95;
    display: block;
}
.research-sticky-content {
    position: relative;
    color: #0f172a;
}
.sticky-title {
    font-size: 8.5px;
    font-weight: 900;
    color: #854d0e; /* Dark gold */
    margin: 0 0 2px 0;
    letter-spacing: 0.05em;
    text-align: left;
}
.sticky-notes-list {
    margin: 0;
    padding: 0 0 0 6px;
    font-size: 7px;
    font-weight: 600;
    line-height: 1.25;
    color: #334155;
    text-align: left;
}
.sticky-notes-list li {
    margin-bottom: 2px;
}

/* ============================================================
   ARTBOARD 02: WIREFRAME LAYOUT (HIGH-CONTRAST DRAFT STYLE)
   ============================================================ */
.artboard-wireframe {
    top: 115px;
    left: 1.5%;
    width: 14%;
    height: 245px;
    background: rgba(13, 9, 23, 0.6);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    transform: translate3d(0, 0, 5px);
    z-index: 8;
    opacity: 0.7;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    padding: 6px;
    display: block;
}
.wireframe-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wf-row-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    padding-bottom: 5px;
}
.wf-box {
    background: rgba(255, 255, 255, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.25);
}
.wf-logo-box {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.wf-profile-box {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.wf-line {
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}
.wf-w40 { width: 40%; }
.wf-w30 { width: 30%; }
.wf-w50 { width: 50%; }
.wf-w60 { width: 60%; }
.wf-w70 { width: 70%; }
.wf-w80 { width: 80%; }

.wf-main-content {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 5px;
}
.wf-sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-right: 1px dashed rgba(255, 255, 255, 0.15);
    padding-right: 5px;
}
.wf-body-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wf-hero-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wf-grid-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.wf-grid-card {
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 4px;
}
.wf-bar-loader {
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 1px;
    margin-top: 3px;
    width: 80%;
}

/* ============================================================
   ARTBOARD 03: DESIGN SYSTEM PANEL (COMPACT & SEPARATE)
   ============================================================ */
.artboard-system {
    top: 15px;
    right: 1.5%;
    left: auto;
    width: 22%;
    max-width: 160px;
    height: 345px;
    background: rgba(9, 5, 20, 0.78);
    border: 1px solid rgba(168, 85, 247, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translate3d(0, 0, 10px);
    z-index: 10;
    opacity: 0.92;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}
.system-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.sys-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}
.sys-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sys-title {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    text-align: left;
}

/* Color tokens */
.color-swatches-grid {
    display: flex;
    gap: 6px;
}
.swatch {
    flex: 1;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    cursor: pointer;
}
.swatch-purple { background: #A055F7; }
.swatch-cyan { background: #06B6D4; }
.swatch-dark { background: #1A1D30; }
.swatch-white { background: #FFFFFF; }
.swatch-lbl {
    font-size: 8px;
    font-family: monospace;
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
}
.swatch:hover .swatch-lbl {
    opacity: 1;
}

/* Typography scale */
.typo-fonts {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4px;
}
.font-lbl {
    font-weight: 600;
}
.typo-preview {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: #fff;
    margin-top: 4px;
}
.preview-letters {
    font-size: 16px;
    font-weight: 700;
}
.font-main { font-family: 'Outfit', sans-serif; }
.font-sec { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 400; }

/* Spacing Scale */
.spacing-indicator-grid {
    display: flex;
    align-items: center;
    gap: 6px;
}
.space-block {
    height: 10px;
    background: rgba(6, 182, 212, 0.15);
    border-left: 1px solid rgba(6, 182, 212, 0.5);
    border-right: 1px solid rgba(6, 182, 212, 0.5);
}
.space-label {
    font-size: 9px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.35);
    margin-left: auto;
}

/* Component Library elements */
.sys-elements-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.sys-btn {
    border: none;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
}
.sys-btn-primary {
    background: #A055F7;
    color: #fff;
}
.sys-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.sys-switch {
    width: 24px;
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}
.sys-switch.active {
    background: #A055F7;
}
.sys-switch-thumb {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s ease;
}
.sys-switch.active .sys-switch-thumb {
    left: 14px;
}
.sys-checkbox {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
}
.sys-checkbox.checked {
    background: #a855f7;
    border-color: #a855f7;
    color: #fff;
}

/* Variables */
.variables-grid {
    display: flex;
    gap: 6px;
}
.var-tag {
    font-size: 9px;
    font-family: monospace;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.45);
    padding: 2px 6px;
    border-radius: 3px;
}

/* ============================================================
   ARTBOARD 04: FLAGSHIP CENTERPIECE UI (FINFLOW PRO DASHBOARD)
   ============================================================ */
.artboard-final {
    top: 65px;
    left: 17%;
    width: 52%;
    height: 295px;
    background: rgba(9, 5, 20, 0.88);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 10px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    transform: translate3d(0, 0, 15px);
    z-index: 10;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 25px 70px -10px rgba(0, 0, 0, 0.95),
                0 0 25px rgba(168, 85, 247, 0.2);
    opacity: 1.0;
    display: block;
}







.final-ui-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.final-header {
    height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.12);
}
.final-logo-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.logo-icon {
    display: flex;
    align-items: center;
}
.logo-text {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}
.logo-badge {
    font-size: 8px;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
    color: #fff;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 2px;
}
.final-search-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 3px 8px;
    width: 120px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
}
.final-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.notification-icon {
    position: relative;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}
.notification-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ef4444;
    border-radius: 50%;
    top: 0;
    right: 0;
}
.final-user-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #06b6d4);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.final-avatar-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
    bottom: -1px;
    right: -1px;
    border: 0.5px solid #090514;
}

.final-body-grid {
    display: grid;
    grid-template-columns: 100px 1fr;
    height: calc(100% - 36px);
}

/* Sidebar navigation */
.final-ui-sidebar {
    background: rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
}
.sidebar-item:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.02);
}
.sidebar-item.active {
    background: rgba(168, 85, 247, 0.08);
    color: #fff;
    font-weight: 700;
}
.sb-icon {
    font-size: 10px;
}
.sb-text {
    font-size: 10px;
    font-weight: 500;
}

/* Main Dashboard Panel */
.final-ui-main {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.final-ui-main::-webkit-scrollbar {
    display: none;
}
.main-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-title-text {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}
.main-filter-dropdown {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.metric-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.mc-label {
    font-size: 7.5px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.mc-value {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}
.mc-trend {
    font-size: 8px;
    font-weight: 600;
}
.mc-trend.positive { color: #10b981; }

.mid-grid {
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 8px;
}
.growth-card, .sync-card, .activity-card, .channels-card {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.card-title {
    font-size: 8.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
}
.chart-container {
    height: 45px;
    position: relative;
}
.sparkline-svg {
    width: 100%;
    height: 100%;
}
.chart-tooltip {
    position: absolute;
    background: #a855f7;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 6px;
    border-radius: 3px;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(168, 85, 247, 0.3);
    white-space: nowrap;
    opacity: 0;
}

/* Circular progress sync card */
.sync-radial-container {
    display: flex;
    justify-content: center;
    position: relative;
    width: 45px;
    height: 45px;
    margin: 2px auto;
}
.circular-chart {
    width: 100%;
    height: 100%;
}
.circle-bg {
    stroke: rgba(255, 255, 255, 0.04);
}
.circle {
    stroke: #06b6d4;
    transition: stroke-dashoffset 1s ease-out;
}
.sync-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}
.sync-num {
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}
.sync-lbl {
    font-size: 5px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}
.sync-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
}
.status-dot {
    width: 3px;
    height: 3px;
    background: #10b981;
    border-radius: 50%;
}
.status-text {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.45);
}

/* Bottom Grid and Activity list */
.bottom-grid {
    display: grid;
    grid-template-columns: 1fr 115px;
    gap: 8px;
}
.activity-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.activity-list li {
    display: flex;
    align-items: center;
    gap: 5px;
}
.activity-icon-bullet {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
.activity-icon-bullet.purple-bg { background: #a855f7; }
.activity-icon-bullet.cyan-bg { background: #06b6d4; }
.activity-icon-bullet.yellow-bg { background: #eab308; }
.activity-text-col {
    display: flex;
    justify-content: space-between;
    flex: 1;
}
.activity-desc {
    font-size: 8.5px;
    color: rgba(255, 255, 255, 0.65);
}
.activity-time {
    font-size: 7.5px;
    color: rgba(255, 255, 255, 0.35);
}

/* CSS donut chart for Top Channels */
.channels-content {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.donut-chart-css {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(#A055F7 0% 46%, #06B6D4 46% 74%, #ec4899 74% 92%, #eab308 92% 100%);
    position: relative;
    flex-shrink: 0;
}
.donut-center-cutout {
    position: absolute;
    width: 28px;
    height: 28px;
    background: #090514;
    border-radius: 50%;
    top: 6px;
    left: 6px;
}
.channels-legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.legend-item {
    display: flex;
    align-items: center;
    font-size: 8.5px;
}
.legend-bullet {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 3px;
}
.legend-bullet.direct { background: #A055F7; }
.legend-bullet.organic { background: #06B6D4; }
.legend-bullet.social { background: #ec4899; }
.legend-bullet.referral { background: #eab308; }
.legend-lbl {
    color: rgba(255, 255, 255, 0.45);
    margin-right: auto;
    font-size: 8px;
}
.legend-val {
    color: #fff;
    font-weight: 700;
    font-size: 8px;
}

/* ============================================================
   ARTBOARD 05: CLIENT FEEDBACK CARD
   ============================================================ */
.artboard-feedback {
    top: 12px;
    left: 29%;
    right: auto;
    width: 27%;
    max-width: 175px;
    height: 46px;
    background: rgba(10, 13, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    z-index: 12;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.95;
}
.feedback-inner {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.feedback-text-group {
    display: flex;
    flex-direction: column;
}
.feedback-title {
    font-size: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.feedback-status {
    font-size: 10.5px;
    color: #fff;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
}
.feedback-handoff {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #10b981;
    font-size: 9px;
    font-weight: 800;
    margin-top: 1px;
}
.check-icon {
    font-size: 9px;
}
/* ============================================================
   FOCUS STAGES LOGIC (CMS HIGHLIGHT & ACCENTS)
   ============================================================ */
.canvas-workspace-wrapper.focus-research .artboard-research {
    transform: translate3d(0, 0, 30px) scale(1.04) rotateZ(-3deg) !important;
    border-color: #eab308;
    box-shadow: 0 20px 45px rgba(234, 179, 8, 0.35);
    z-index: 25;
}
.canvas-workspace-wrapper.focus-wireframe .artboard-wireframe {
    display: flex !important;
    transform: translate3d(0, 0, 25px) scale(1.02) !important;
    border-color: #a855f7;
    box-shadow: 0 20px 45px rgba(168, 85, 247, 0.35);
    z-index: 25;
    opacity: 1 !important;
}
.canvas-workspace-wrapper.focus-system .artboard-system {
    display: flex !important;
    transform: translate3d(0, 0, 25px) scale(1.02) !important;
    border-color: #a855f7;
    box-shadow: 0 20px 45px rgba(168, 85, 247, 0.35);
    z-index: 25;
    opacity: 1 !important;
}
.canvas-workspace-wrapper.focus-final .artboard-final {
    transform: translate3d(0, 0, 20px) !important;
    border-color: #a855f7;
    box-shadow: 0 35px 85px -10px rgba(168, 85, 247, 0.4),
                0 0 30px rgba(168, 85, 247, 0.25);
    z-index: 10;
}


/* Prototype Mode: Highlight connecting lines */
.canvas-workspace-wrapper.focus-prototype .canvas-artboard:not(.artboard-final):not(.artboard-wireframe):not(.artboard-system):not(.artboard-research) {
    opacity: 0.25;
}
.canvas-workspace-wrapper.focus-prototype .proto-line {
    stroke-width: 2.5;
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.75));
}

/* ============================================================
   RESPONSIVE COMPOSITION OVERRIDES
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1279px) {
    .hero-layout-design-canvas .service_details-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        gap: 1.5rem;
    }
    
    .canvas-workspace-wrapper {
        width: 100% !important;
        max-width: 740px !important;
        height: 380px !important;
        margin: 0 auto;
    }
    
    .artboard-research {
        top: 12px !important;
        left: 12px !important;
        width: 120px !important;
        height: 85px !important;
    }
    .artboard-wireframe {
        top: 108px !important;
        left: 12px !important;
        width: 120px !important;
        height: 220px !important;
    }
    .artboard-feedback {
        top: 10px !important;
        left: 260px !important;
        right: auto !important;
        width: 160px !important;
        height: 44px !important;
    }
    .artboard-final {
        top: 60px !important;
        left: 145px !important;
        width: 440px !important;
        height: 270px !important;
    }
    .artboard-system {
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        width: 125px !important;
        height: 320px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .canvas-workspace-wrapper {
        width: 100% !important;
        max-width: 580px !important;
        height: 440px !important;
        margin: 0 auto;
    }
    
    .artboard-wireframe,
    .artboard-system,
    .canvas-smart-guide,
    .canvas-active-outline,
    .canvas-prototype-svg,
    .canvas-cursor,
    .canvas-grid-overlay,
    .canvas-layout-guide,
    .canvas-ambient-glow,
    .hero-bg-grid-overlay {
        display: none !important;
    }

    .artboard-final {
        display: block !important;
        top: 50px !important;
        left: 12px !important;
        right: 12px !important;
        width: calc(100% - 24px) !important;
        height: 375px !important;
    }

    .artboard-research {
        display: block !important;
        top: 10px !important;
        left: 12px !important;
        width: 130px !important;
        height: 80px !important;
    }

    .artboard-feedback {
        display: flex !important;
        top: 10px !important;
        right: 12px !important;
        width: 140px !important;
        height: 46px !important;
    }
}

@media (max-width: 767px) {
    .canvas-workspace-wrapper {
        width: min(100%, calc(100vw - 32px)) !important;
        max-width: 440px !important;
        height: 400px !important;
        margin: 0 auto;
    }
    
    .artboard-wireframe,
    .artboard-system,
    .canvas-smart-guide,
    .canvas-active-outline,
    .canvas-prototype-svg,
    .canvas-cursor,
    .canvas-grid-overlay,
    .canvas-layout-guide,
    .canvas-ambient-glow,
    .hero-bg-grid-overlay {
        display: none !important;
    }

    .artboard-research {
        display: block !important;
        top: 8px !important;
        left: 8px !important;
        width: 120px !important;
        height: 72px !important;
        font-size: 8px !important;
        padding: 5px !important;
    }

    .artboard-feedback {
        display: none !important;
    }

    .artboard-final {
        display: block !important;
        top: 48px !important;
        left: 8px !important;
        right: 8px !important;
        width: calc(100% - 16px) !important;
        height: 338px !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .canvas-workspace-wrapper {
        height: 360px !important;
        max-width: 100% !important;
        width: min(100%, calc(100vw - 20px)) !important;
    }
    
    .artboard-research {
        top: 6px !important;
        left: 6px !important;
        width: 105px !important;
        height: 65px !important;
    }

    .artboard-final {
        top: 45px !important;
        left: 6px !important;
        right: 6px !important;
        width: calc(100% - 12px) !important;
        height: 302px !important;
    }
    
    .final-body-grid {
        grid-template-columns: 50px 1fr !important;
    }
    .final-ui-sidebar {
        padding: 4px 2px !important;
    }
    .sidebar-item {
        padding: 3px 2px !important;
        gap: 2px !important;
    }
    .sb-text {
        font-size: 7.5px !important;
    }
    .metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }
    .metric-card {
        padding: 4px !important;
    }
    .mc-label {
        font-size: 7px !important;
    }
    .mc-value {
        font-size: 9px !important;
    }
    .mc-trend {
        font-size: 7px !important;
    }
}