/* ==========================================================================
   REIMEI TAILORED ELEMENT-BY-ELEMENT DESIGN STUDIO
   Exact 1-to-1 controls for Header, Hero, System, Operate, Engine,
   Why Reimei, FAQ, and Footer.
   ========================================================================== */

/* 1. STUDIO DOCK & CONTROLS UI */
.reimei-studio-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #111111;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 11px 20px;
    font-family: var(--reimei-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.32);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.reimei-studio-trigger:hover {
    background: #C45C26;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 32px rgba(196, 92, 38, 0.42);
}

.reimei-studio-trigger__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7EC6E8;
    box-shadow: 0 0 8px #7EC6E8;
    animation: studioDotPulse 2s infinite;
}

@keyframes studioDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Studio Drawer Dock */
.reimei-studio-dock {
    position: fixed;
    bottom: 82px;
    right: 24px;
    z-index: 100000;
    width: 390px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 104px);
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
    font-family: var(--reimei-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.reimei-studio-dock.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Dock Header */
.reimei-studio-dock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #111111;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.reimei-studio-dock__title {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.reimei-studio-dock__close {
    background: transparent;
    border: none;
    color: #aaaaaa;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s ease;
}

.reimei-studio-dock__close:hover {
    color: #ffffff;
}

/* Section Tabs / Navigation List */
.reimei-studio-section-list {
    display: flex;
    overflow-x: auto;
    background: #f4f4f8;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    gap: 4px;
    scrollbar-width: thin;
}

.reimei-studio-sec-tab {
    padding: 6px 11px;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: #555562;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.reimei-studio-sec-tab:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111111;
}

.reimei-studio-sec-tab.is-active {
    background: #ffffff;
    color: #111111;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Dock Body */
.reimei-studio-dock__body {
    padding: 16px 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Section Card Header inside Body */
.reimei-studio-sec-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.reimei-studio-sec-current-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #111111;
}

.reimei-studio-sec-jump-btn {
    font-size: 11px;
    font-weight: 600;
    color: #0284c7;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.reimei-studio-sec-jump-btn:hover {
    text-decoration: underline;
}

/* Element Control Group Box */
.reimei-studio-elem-box {
    background: #fbfbfd;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reimei-studio-elem-header {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22222a;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.reimei-studio-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reimei-studio-row-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #666672;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Clean Color Palette & Swatches (Visual only, no verbose text labels) */
.reimei-studio-palette {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.reimei-studio-color-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    flex-shrink: 0;
}

.reimei-studio-color-circle:hover {
    transform: scale(1.15);
    border-color: rgba(0, 0, 0, 0.35);
}

.reimei-studio-color-circle.is-active {
    border-color: #C45C26;
    box-shadow: 0 0 0 2px rgba(196, 92, 38, 0.45);
    transform: scale(1.18);
}

.reimei-studio-color-circle--clear {
    background: repeating-linear-gradient(45deg, #eee, #eee 4px, #fff 4px, #fff 8px);
}

/* Custom Color Input Box */
.reimei-studio-color-custom {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

.reimei-studio-color-custom input[type="color"] {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 44px;
    height: 44px;
    opacity: 0;
    cursor: pointer;
}

/* Segmented Buttons for Font, Shape, Size */
.reimei-studio-seg {
    display: flex;
    background: #eeeeee;
    padding: 2.5px;
    border-radius: 8px;
    gap: 2.5px;
}

.reimei-studio-seg-btn {
    flex: 1;
    padding: 6px 5px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #555562;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
    white-space: nowrap;
}

.reimei-studio-seg-btn:hover {
    color: #111111;
}

.reimei-studio-seg-btn.is-active {
    background: #ffffff;
    color: #111111;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Dock Footer */
.reimei-studio-dock__foot {
    padding: 12px 18px;
    background: #f8f8fa;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.reimei-studio-btn {
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #ffffff;
    font-size: 11px;
    font-weight: 600;
    color: #33333e;
    cursor: pointer;
    transition: all 0.18s ease;
}

.reimei-studio-btn:hover {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}

.reimei-studio-btn--primary {
    background: #C45C26;
    color: #ffffff;
    border-color: #C45C26;
}

.reimei-studio-btn--primary:hover {
    background: #a94a1a;
    border-color: #a94a1a;
}


/* --------------------------------------------------------------------------
   2. ELEMENT-SPECIFIC DYNAMIC CSS HOOKS
   -------------------------------------------------------------------------- */

/* Target Sections */
#reimei-header,
#reimei-hero-2,
#reimei-hero-transition-glow,
#reimei-services,
#reimei-operate,
#reimei-engine,
#reimei-why,
#reimei-faq,
#reimei-footer {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 2.1 HEADER */
#reimei-header[style*="--hdr-bg"] .reimei-header__inner { background: var(--hdr-bg) !important; }
#reimei-header[style*="--hdr-border"] .reimei-header__inner { border-color: var(--hdr-border) !important; }
#reimei-header[style*="--hdr-radius"] .reimei-header__inner { border-radius: var(--hdr-radius) !important; }
#reimei-header[style*="--hdr-logo-color"] .reimei-brand__word { color: var(--hdr-logo-color) !important; }
#reimei-header[style*="--hdr-logo-font"] .reimei-brand__word { font-family: var(--hdr-logo-font) !important; }
#reimei-header[style*="--hdr-link-color"] .reimei-nav__link { color: var(--hdr-link-color) !important; }
#reimei-header[style*="--hdr-link-font"] .reimei-nav__link { font-family: var(--hdr-link-font) !important; }
#reimei-header[style*="--hdr-btn-bg"] .reimei-cta { background-color: var(--hdr-btn-bg) !important; border-color: var(--hdr-btn-bg) !important; }
#reimei-header[style*="--hdr-btn-color"] .reimei-cta { color: var(--hdr-btn-color) !important; }
#reimei-header[style*="--hdr-btn-radius"] .reimei-cta { border-radius: var(--hdr-btn-radius) !important; }

/* 2.2 HERO SECTION */
#reimei-hero-2[style*="--hero-bg"] { background-color: var(--hero-bg) !important; }

/* Hero Pill */
#reimei-hero-2[style*="--hero-pill-bg"] .reimei-hero-pill { background-color: var(--hero-pill-bg) !important; }
#reimei-hero-2[style*="--hero-pill-border"] .reimei-hero-pill { border-color: var(--hero-pill-border) !important; }
#reimei-hero-2[style*="--hero-pill-dot"] .reimei-hero-pill__dot { background-color: var(--hero-pill-dot) !important; box-shadow: 0 0 6px var(--hero-pill-dot) !important; }
#reimei-hero-2[style*="--hero-pill-text-color"] .reimei-hero-pill { color: var(--hero-pill-text-color) !important; }
#reimei-hero-2[style*="--hero-pill-radius"] .reimei-hero-pill { border-radius: var(--hero-pill-radius) !important; }

/* Hero Title & Lead */
#reimei-hero-2[style*="--hero-title-color"] #reimei-hero-title-2,
#reimei-hero-2[style*="--hero-title-color"] .reimei-brand-lead,
#reimei-hero-2[style*="--hero-title-color"] .reimei-hero-title__lead-text,
#reimei-hero-2[style*="--hero-title-color"] .reimei-hero-title__fixed {
    color: var(--hero-title-color) !important;
}
#reimei-hero-2[style*="--hero-title-font"] #reimei-hero-title-2,
#reimei-hero-2[style*="--hero-title-font"] .reimei-brand-lead,
#reimei-hero-2[style*="--hero-title-font"] .reimei-hero-title__lead-text,
#reimei-hero-2[style*="--hero-title-font"] .reimei-hero-title__fixed {
    font-family: var(--hero-title-font) !important;
}
#reimei-hero-2[data-hero-title-size="sm"] #reimei-hero-title-2 { font-size: clamp(28px, 3.2vw, 42px) !important; }
#reimei-hero-2[data-hero-title-size="lg"] #reimei-hero-title-2 { font-size: clamp(40px, 4.8vw, 64px) !important; }
#reimei-hero-2[data-hero-title-size="xl"] #reimei-hero-title-2 { font-size: clamp(48px, 5.8vw, 76px) !important; }

#reimei-hero-2[style*="--hero-typewriter-color"] .reimei-hero-typed,
#reimei-hero-2[style*="--hero-typewriter-color"] .reimei-hero-typed__text {
    color: var(--hero-typewriter-color) !important;
}

/* Hero Buttons */
#reimei-hero-2[style*="--hero-btn1-bg"] .reimei-hero-btn--primary { background-color: var(--hero-btn1-bg) !important; border-color: var(--hero-btn1-bg) !important; }
#reimei-hero-2[style*="--hero-btn1-color"] .reimei-hero-btn--primary { color: var(--hero-btn1-color) !important; }
#reimei-hero-2[style*="--hero-btn1-radius"] .reimei-hero-btn--primary { border-radius: var(--hero-btn1-radius) !important; }

#reimei-hero-2[style*="--hero-btn2-bg"] .reimei-hero-btn--secondary { background-color: var(--hero-btn2-bg) !important; }
#reimei-hero-2[style*="--hero-btn2-color"] .reimei-hero-btn--secondary { color: var(--hero-btn2-color) !important; }
#reimei-hero-2[style*="--hero-btn2-radius"] .reimei-hero-btn--secondary { border-radius: var(--hero-btn2-radius) !important; }

/* 2.3 TRANSITION / BLUR GRADIENT AREA */
#reimei-hero-transition-glow[style*="--glow-bg"] { background-color: var(--glow-bg) !important; }
#reimei-hero-transition-glow[style*="--glow-mist"] .reimei-hero-transition-glow__mist-upper {
    background: radial-gradient(ellipse 70% 60% at 50% 50%, var(--glow-mist) 0%, transparent 80%) !important;
}
#reimei-hero-transition-glow[style*="--glow-cloud"] .reimei-hero-transition-glow__cloud {
    background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--glow-cloud) 0%, transparent 70%) !important;
}

/* 2.4 THE REIMEI SYSTEM (#reimei-services) */
#reimei-services[style*="--sys-bg"] { background-color: var(--sys-bg) !important; }
#reimei-services[style*="--sys-title-color"] h2 { color: var(--sys-title-color) !important; }
#reimei-services[style*="--sys-title-font"] h2 { font-family: var(--sys-title-font) !important; }
#reimei-services[style*="--sys-desc-color"] .reimei-services__desc { color: var(--sys-desc-color) !important; }

#reimei-services[style*="--sys-card-bg"] .reimei-service-item { background-color: var(--sys-card-bg) !important; }
#reimei-services[style*="--sys-card-border"] .reimei-service-item { border-color: var(--sys-card-border) !important; }
#reimei-services[style*="--sys-card-radius"] .reimei-service-item { border-radius: var(--sys-card-radius) !important; }
#reimei-services[style*="--sys-card-title-color"] .reimei-service-item__title { color: var(--sys-card-title-color) !important; }
#reimei-services[style*="--sys-card-desc-color"] .reimei-service-item__desc { color: var(--sys-card-desc-color) !important; }
#reimei-services[style*="--sys-badge-bg"] .reimei-service-item__badge { background-color: var(--sys-badge-bg) !important; }
#reimei-services[style*="--sys-badge-color"] .reimei-service-item__badge { color: var(--sys-badge-color) !important; }

/* 2.5 WHAT WE OPERATE (#reimei-operate) */
#reimei-operate[style*="--op-bg"] { background-color: var(--op-bg) !important; }
#reimei-operate[style*="--op-title-color"] .reimei-operate__title { color: var(--op-title-color) !important; }
#reimei-operate[style*="--op-title-font"] .reimei-operate__title { font-family: var(--op-title-font) !important; }
#reimei-operate[style*="--op-eyebrow-color"] .reimei-operate__eyebrow { color: var(--op-eyebrow-color) !important; }

#reimei-operate[style*="--op-card-bg"] .reimei-operate-item { background-color: var(--op-card-bg) !important; }
#reimei-operate[style*="--op-card-border"] .reimei-operate-item { border-color: var(--op-card-border) !important; }
#reimei-operate[style*="--op-card-radius"] .reimei-operate-item { border-radius: var(--op-card-radius) !important; }
#reimei-operate[style*="--op-card-title-color"] .reimei-operate-item__title { color: var(--op-card-title-color) !important; }
#reimei-operate[style*="--op-card-desc-color"] .reimei-operate-item__desc { color: var(--op-card-desc-color) !important; }
#reimei-operate[style*="--op-card-num-color"] .reimei-operate-item__num { color: var(--op-card-num-color) !important; }

#reimei-operate[style*="--op-btn-bg"] .reimei-operate-cta__btn { background-color: var(--op-btn-bg) !important; border-color: var(--op-btn-bg) !important; }
#reimei-operate[style*="--op-btn-color"] .reimei-operate-cta__btn { color: var(--op-btn-color) !important; }
#reimei-operate[style*="--op-btn-radius"] .reimei-operate-cta__btn { border-radius: var(--op-btn-radius) !important; }

/* 2.6 HOW THE ENGINE CONNECTS (#reimei-engine) */
#reimei-engine[style*="--eng-bg"] { background-color: var(--eng-bg) !important; }
#reimei-engine[style*="--eng-title-color"] .reimei-engine-v2__title { color: var(--eng-title-color) !important; }
#reimei-engine[style*="--eng-title-font"] .reimei-engine-v2__title { font-family: var(--eng-title-font) !important; }
#reimei-engine[style*="--eng-desc-color"] .reimei-engine-v2__desc { color: var(--eng-desc-color) !important; }

#reimei-engine[style*="--eng-node-bg"] .reimei-engine-step { background-color: var(--eng-node-bg) !important; }
#reimei-engine[style*="--eng-node-border"] .reimei-engine-step { border-color: var(--eng-node-border) !important; }
#reimei-engine[style*="--eng-node-radius"] .reimei-engine-step { border-radius: var(--eng-node-radius) !important; }
#reimei-engine[style*="--eng-node-title-color"] .reimei-engine-step__title { color: var(--eng-node-title-color) !important; }
#reimei-engine[style*="--eng-node-desc-color"] .reimei-engine-step__desc { color: var(--eng-node-desc-color) !important; }
#reimei-engine[style*="--eng-node-badge-bg"] .reimei-engine-step__badge { background-color: var(--eng-node-badge-bg) !important; color: #ffffff !important; }

#reimei-engine[style*="--eng-hub-bg"] .reimei-engine-v2__center { background-color: var(--eng-hub-bg) !important; }
#reimei-engine[style*="--eng-hub-border"] .reimei-engine-v2__center { border-color: var(--eng-hub-border) !important; }
#reimei-engine[style*="--eng-line-flow"] .reimei-engine-line--active { background-color: var(--eng-line-flow) !important; }

/* 2.7 WHY REIMEI (#reimei-why) */
#reimei-why[style*="--why-bg"] { background-color: var(--why-bg) !important; }
#reimei-why[style*="--why-title-color"] .reimei-why__title { color: var(--why-title-color) !important; }
#reimei-why[style*="--why-title-font"] .reimei-why__title { font-family: var(--why-title-font) !important; }
#reimei-why[style*="--why-desc-color"] .reimei-why__desc { color: var(--why-desc-color) !important; }

#reimei-why[style*="--why-card-bg"] .reimei-why-card { background-color: var(--why-card-bg) !important; }
#reimei-why[style*="--why-card-border"] .reimei-why-card { border-color: var(--why-card-border) !important; }
#reimei-why[style*="--why-card-radius"] .reimei-why-card { border-radius: var(--why-card-radius) !important; }
#reimei-why[style*="--why-card-title-color"] .reimei-why-card__title { color: var(--why-card-title-color) !important; }
#reimei-why[style*="--why-card-desc-color"] .reimei-why-card__desc { color: var(--why-card-desc-color) !important; }
#reimei-why[style*="--why-icon-color"] .reimei-why-card__icon { color: var(--why-icon-color) !important; }
#reimei-why[style*="--why-icon-bg"] .reimei-why-card__icon { background-color: var(--why-icon-bg) !important; }

/* 2.8 FAQ (#reimei-faq) */
#reimei-faq[style*="--faq-bg"] { background-color: var(--faq-bg) !important; }
#reimei-faq[style*="--faq-title-color"] .reimei-faq-dark__title { color: var(--faq-title-color) !important; }
#reimei-faq[style*="--faq-title-font"] .reimei-faq-dark__title { font-family: var(--faq-title-font) !important; }
#reimei-faq[style*="--faq-desc-color"] .reimei-faq-dark__desc { color: var(--faq-desc-color) !important; }

#reimei-faq[style*="--faq-card-bg"] .reimei-faq-item { background-color: var(--faq-card-bg) !important; }
#reimei-faq[style*="--faq-card-border"] .reimei-faq-item { border-color: var(--faq-card-border) !important; }
#reimei-faq[style*="--faq-card-radius"] .reimei-faq-item { border-radius: var(--faq-card-radius) !important; }
#reimei-faq[style*="--faq-card-q-color"] .reimei-faq-item__btn { color: var(--faq-card-q-color) !important; }
#reimei-faq[style*="--faq-card-a-color"] .reimei-faq-item__ans p { color: var(--faq-card-a-color) !important; }
#reimei-faq[style*="--faq-icon-bg"] .reimei-faq-item__icon { background-color: var(--faq-icon-bg) !important; color: #ffffff !important; }

/* 2.9 FOOTER (#reimei-footer) */
#reimei-footer[style*="--ftr-bg"] { background-color: var(--ftr-bg) !important; }
#reimei-footer[style*="--ftr-border"] { border-top-color: var(--ftr-border) !important; }
#reimei-footer[style*="--ftr-logo-color"] .reimei-footer__brand-word { color: var(--ftr-logo-color) !important; }
#reimei-footer[style*="--ftr-logo-font"] .reimei-footer__brand-word { font-family: var(--ftr-logo-font) !important; }
#reimei-footer[style*="--ftr-desc-color"] .reimei-footer__brand-desc { color: var(--ftr-desc-color) !important; }
#reimei-footer[style*="--ftr-dot-color"] .reimei-footer__status-dot { background-color: var(--ftr-dot-color) !important; }
#reimei-footer[style*="--ftr-heading-color"] .reimei-footer__col-title { color: var(--ftr-heading-color) !important; }
#reimei-footer[style*="--ftr-heading-font"] .reimei-footer__col-title { font-family: var(--ftr-heading-font) !important; }
#reimei-footer[style*="--ftr-link-color"] .reimei-footer__links a { color: var(--ftr-link-color) !important; }