:root {
    --figma-orange: #ff7518;
    --figma-orange-soft: rgba(255, 117, 24, 0.14);
    --figma-frame-bg: #f5f5f5;
    --figma-panel-bg: #f7f7f7;
    --figma-canvas-bg: #ececec;
    --figma-border-strong: rgba(0, 0, 0, 0.12);
    --figma-border-soft: rgba(0, 0, 0, 0.08);
    --figma-text-strong: rgba(0, 0, 0, 0.86);
    --figma-text-soft: rgba(0, 0, 0, 0.55);
}

.figma-container {
    background: var(--figma-frame-bg) !important;
}

.figma-top-bar {
    height: 48px !important;
    padding: 0 12px !important;
    border-bottom: 1px solid var(--figma-border-strong) !important;
    background: var(--figma-panel-bg) !important;
}

.figma-sidebar-left,
.figma-sidebar-right {
    background: var(--figma-panel-bg) !important;
}

.figma-sidebar-left {
    border-right: 1px solid var(--figma-border-strong) !important;
}

.figma-sidebar-right {
    border-left: 1px solid var(--figma-border-strong) !important;
}

.sidebar-rail {
    width: 52px !important;
    border-right: 1px solid var(--figma-border-strong) !important;
    background: var(--figma-panel-bg) !important;
}

.rail-icon,
.toolbar-tool {
    border-radius: 8px !important;
}

.rail-icon.active,
.toolbar-tool.active,
.list-item.active,
.prop-tab.active,
.btn-share,
.btn-export {
    background: var(--figma-orange) !important;
    color: #fff !important;
    border-color: var(--figma-orange) !important;
}

.list-item.active::before {
    background: var(--figma-orange) !important;
}

.status-badge.blue,
.list-item.active,
.rail-icon.active {
    color: var(--figma-orange) !important;
}

.rail-icon.active,
.list-item.active:not(.btn-export) {
    background: var(--figma-orange-soft) !important;
}

.figma-canvas-container {
    background: var(--figma-canvas-bg) !important;
}

.ruler-h,
.ruler-v,
.sidebar-panel-header,
.property-tabs,
.sidebar-section,
.section-label {
    border-color: var(--figma-border-strong) !important;
}

.ruler-h,
.ruler-v,
.sidebar-panel-header,
.sidebar-right-header,
.property-tabs {
    background: var(--figma-panel-bg) !important;
}

.figma-tab {
    color: var(--figma-text-soft) !important;
}

.figma-tab.active {
    background: #ffffff !important;
    color: var(--figma-text-strong) !important;
    box-shadow: 0 0 0 1px var(--figma-border-strong) !important;
}

.figma-tab:hover,
.rail-icon:hover:not(.active),
.toolbar-tool:hover:not(.active),
.list-item:hover {
    background: rgba(255, 117, 24, 0.08) !important;
}

.prop-block,
.prop-block-custom,
.input-with-icon,
.align-group,
.resizing-group {
    border: 1px solid var(--figma-border-soft) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.figma-toolbar-pill {
    bottom: 26px !important;
    border-radius: 14px !important;
    padding: 7px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

.grid-overlay {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

.user-avatar {
    background: var(--figma-orange) !important;
}

@media (max-width: 1024px) {
    .figma-top-bar {
        height: 46px !important;
    }
}

@media (max-width: 768px) {
    .figma-toolbar-pill {
        transform: translateX(-50%) scale(0.88) !important;
        bottom: 14px !important;
    }
}