/**
 * Kemii Core - Stylesheet
 * Light, clean, modern design with !important overrides for Hello/Elementor
 */

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

.kemii-hero,
.kemii-how,
.kemii-feed,
.kemii-final-cta,
.kemii-single,
.kemii-my-posts {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    box-sizing: border-box !important;
}

.kemii-hero *,
.kemii-how *,
.kemii-feed *,
.kemii-final-cta *,
.kemii-single *,
.kemii-my-posts * {
    box-sizing: border-box !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.kemii-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 22px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.kemii-btn:hover { transform: translateY(-1px) !important; opacity: 0.95 !important; }
.kemii-btn:active { transform: translateY(0) !important; }

.kemii-btn-dark { background: #1A1A1A !important; color: #fff !important; }
.kemii-btn-light { background: #fff !important; color: #1A1A1A !important; border: 1.5px solid #E5E7EB !important; }
.kemii-btn-pink { background: #FF4D6D !important; color: #fff !important; }
.kemii-btn-lg { padding: 14px 28px !important; font-size: 16px !important; }
.kemii-btn-sm { padding: 9px 16px !important; font-size: 13px !important; }

/* ==========================================================================
   FULL-WIDTH BREAKOUT
   Bryder sektionerne ud af Elementor/Hello-containere så baggrunde går 100% ud
   ========================================================================== */

.kemii-hero,
.kemii-how,
.kemii-feed,
.kemii-final-cta {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw !important;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.kemii-hero {
    padding: 80px 24px 100px !important;
    background: #FAFAF7 !important;
    overflow: hidden !important;
    text-align: center !important;
}

.kemii-hero-blob {
    position: absolute !important;
    border-radius: 50% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
.kemii-blob-1 {
    top: -80px !important; right: -80px !important;
    width: 380px !important; height: 380px !important;
    background: radial-gradient(circle, #FFE4EA 0%, #FAFAF7 70%) !important;
}
.kemii-blob-2 {
    bottom: -120px !important; left: -100px !important;
    width: 320px !important; height: 320px !important;
    background: radial-gradient(circle, #FFF1D4 0%, #FAFAF7 70%) !important;
}

.kemii-hero-inner {
    position: relative !important;
    z-index: 1 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

.kemii-live-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    padding: 7px 14px !important;
    border-radius: 100px !important;
    margin-bottom: 28px !important;
    border: 1px solid #EFEFEC !important;
    font-size: 13px !important;
    color: #1A1A1A !important;
    font-weight: 500 !important;
}

.kemii-hero-title {
    font-size: clamp(36px, 6vw, 64px) !important;
    font-weight: 500 !important;
    margin: 0 0 20px !important;
    color: #1A1A1A !important;
    letter-spacing: -2px !important;
    line-height: 1.05 !important;
}

.kemii-gradient-text {
    background: linear-gradient(90deg, #FF4D6D 0%, #FF8A5B 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.kemii-hero-sub {
    font-size: 19px !important;
    color: #6B7280 !important;
    max-width: 520px !important;
    margin: 0 auto 36px !important;
    line-height: 1.5 !important;
}

.kemii-hero-ctas {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 40px !important;
}

.kemii-trust-row {
    display: flex !important;
    justify-content: center !important;
    gap: 32px !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
    color: #9CA3AF !important;
}

.kemii-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ==========================================================================
   PULSE DOT (live / klar nu indicator)
   ========================================================================== */

.kemii-pulse-dot {
    position: relative !important;
    display: inline-flex !important;
    width: 8px !important;
    height: 8px !important;
    flex-shrink: 0 !important;
}
.kemii-pulse-dot span:first-child {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    background: #10B981 !important;
    border-radius: 50% !important;
    opacity: 0.4 !important;
    animation: kemiiPulse 2s infinite !important;
}
.kemii-pulse-dot span:last-child {
    position: relative !important;
    width: 8px !important;
    height: 8px !important;
    background: #10B981 !important;
    border-radius: 50% !important;
}
.kemii-pulse-small,
.kemii-pulse-small span {
    width: 6px !important;
    height: 6px !important;
}

@keyframes kemiiPulse {
    0%   { transform: scale(1);   opacity: 0.4; }
    50%  { transform: scale(2.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 0; }
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */

.kemii-how {
    background: #fff !important;
    padding: 80px 24px !important;
    border-top: 1px solid #EFEFEC !important;
}

.kemii-how-inner {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.kemii-section-head {
    text-align: center !important;
    margin-bottom: 56px !important;
}

.kemii-eyebrow {
    font-size: 13px !important;
    color: #FF4D6D !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

.kemii-eyebrow-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.kemii-section-title {
    font-size: clamp(28px, 4vw, 38px) !important;
    font-weight: 500 !important;
    margin: 12px 0 16px !important;
    color: #1A1A1A !important;
    letter-spacing: -1px !important;
    line-height: 1.15 !important;
}

.kemii-section-sub {
    font-size: 17px !important;
    color: #6B7280 !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
}

.kemii-section-sub-small {
    font-size: 16px !important;
    color: #6B7280 !important;
    margin: 4px 0 0 !important;
}

.kemii-how-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.kemii-how-card {
    background: #FAFAF7 !important;
    border: 1.5px solid #EFEFEC !important;
    border-radius: 16px !important;
    padding: 28px !important;
    position: relative !important;
}

.kemii-how-num {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    font-size: 48px !important;
    font-weight: 500 !important;
    color: #F0EFE9 !important;
    line-height: 1 !important;
    letter-spacing: -2px !important;
}

.kemii-how-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

.kemii-icon-pink  { background: #FFE4EA !important; color: #FF4D6D !important; }
.kemii-icon-amber { background: #FFF1D4 !important; color: #F59E0B !important; }
.kemii-icon-green { background: #DCFCE7 !important; color: #10B981 !important; }

.kemii-how-card h3 {
    font-size: 18px !important;
    font-weight: 500 !important;
    margin: 0 0 8px !important;
    color: #1A1A1A !important;
}

.kemii-how-card p {
    font-size: 14px !important;
    color: #6B7280 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */

.kemii-stats-bar {
    margin-top: 48px !important;
    padding: 28px !important;
    background: #1A1A1A !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.kemii-stat {
    text-align: center !important;
}

.kemii-stat-bordered {
    border-left: 1px solid #2A2A2A !important;
    border-right: 1px solid #2A2A2A !important;
}

.kemii-stat-num {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #fff !important;
    letter-spacing: -1px !important;
    line-height: 1 !important;
}

.kemii-stat-pink {
    color: #FF4D6D !important;
}

.kemii-stat-label {
    font-size: 13px !important;
    color: #A1A1AA !important;
    margin-top: 6px !important;
}

/* ==========================================================================
   FEED
   ========================================================================== */

.kemii-feed {
    background: #FAFAF7 !important;
    padding: 80px 24px !important;
    border-top: 1px solid #EFEFEC !important;
}

.kemii-feed-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.kemii-feed-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-bottom: 32px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.kemii-filter-pills {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 24px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    flex-wrap: wrap !important;
}

.kemii-pill {
    background: #fff !important;
    color: #1A1A1A !important;
    border: 1px solid #E5E7EB !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.15s !important;
}
.kemii-pill:hover { border-color: #1A1A1A !important; }
.kemii-pill.is-active { background: #1A1A1A !important; color: #fff !important; border-color: #1A1A1A !important; font-weight: 500 !important; }
.kemii-pill-ready { background: #FFE4EA !important; color: #FF4D6D !important; border-color: #FFD4DD !important; font-weight: 500 !important; }
.kemii-pill-ready.is-active { background: #FF4D6D !important; color: #fff !important; }

/* ==========================================================================
   CARDS
   ========================================================================== */

.kemii-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 900px) {
    .kemii-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .kemii-how-grid { grid-template-columns: 1fr !important; }
    .kemii-stats-bar { grid-template-columns: 1fr !important; }
    .kemii-stat-bordered { border: none !important; border-top: 1px solid #2A2A2A !important; border-bottom: 1px solid #2A2A2A !important; padding: 12px 0 !important; }
}
@media (max-width: 600px) {
    .kemii-card-grid { grid-template-columns: 1fr !important; }
    .kemii-hero { padding: 60px 20px 70px !important; }
    .kemii-how, .kemii-feed { padding: 60px 20px !important; }
}

.kemii-card {
    background: #fff !important;
    border-radius: 14px !important;
    border: 1.5px solid #EFEFEC !important;
    padding: 20px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.2s !important;
}
.kemii-card:hover {
    border-color: #FFD4DD !important;
    transform: translateY(-2px) !important;
}

.kemii-card-stripe {
    height: 3px !important;
    border-radius: 100px !important;
    margin: -20px -20px 16px !important;
}

.kemii-card-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
}

.kemii-badge {
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.kemii-badge-boost {
    background: #FEF3C7 !important;
    color: #B45309 !important;
}

.kemii-ready-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: #10B981 !important;
    font-weight: 500 !important;
}

.kemii-ready-dot {
    width: 6px !important;
    height: 6px !important;
    background: #10B981 !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.kemii-card-meta-inline {
    font-size: 11px !important;
    color: #6B7280 !important;
}

.kemii-card-title,
.kemii-card-title-lg {
    font-weight: 500 !important;
    margin: 0 0 6px !important;
    color: #1A1A1A !important;
    line-height: 1.3 !important;
}
.kemii-card-title { font-size: 16px !important; }
.kemii-card-title-lg { font-size: 22px !important; letter-spacing: -0.3px !important; margin-bottom: 8px !important; }

.kemii-card-desc {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin: 0 0 16px !important;
    line-height: 1.55 !important;
}

.kemii-card-foot {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 14px !important;
    border-top: 1px solid #F4F4F2 !important;
    font-size: 11px !important;
    color: #9CA3AF !important;
}

/* Boosted (full width) card */
.kemii-card-boosted {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1.5px solid #FFD4DD !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    overflow: hidden !important;
}

.kemii-card-bg-shape {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: linear-gradient(135deg, #FFE4EA 0%, #FFF1D4 100%) !important;
    width: 200px !important;
    height: 100% !important;
    opacity: 0.4 !important;
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%) !important;
    pointer-events: none !important;
}

.kemii-card-content {
    position: relative !important;
    z-index: 1 !important;
}

.kemii-card-row {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.kemii-card-main {
    flex: 1 !important;
    min-width: 280px !important;
}

.kemii-badges {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.kemii-card-meta {
    display: flex !important;
    gap: 16px !important;
    font-size: 12px !important;
    color: #9CA3AF !important;
    flex-wrap: wrap !important;
}

.kemii-card-cta {
    flex-shrink: 0 !important;
}

.kemii-feed-cta {
    text-align: center !important;
    margin-top: 36px !important;
}

.kemii-empty {
    text-align: center !important;
    padding: 48px 24px !important;
    background: #fff !important;
    border-radius: 16px !important;
    border: 1.5px dashed #E5E7EB !important;
}

/* ==========================================================================
   CREATE FORM
   ========================================================================== */

.kemii-form {
    max-width: 560px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 1.5px solid #EFEFEC !important;
    border-radius: 16px !important;
    padding: 40px 20px 80px !important;
}

@media (min-width: 600px) {
    .kemii-form { padding: 40px 36px 80px !important; }
}

.kemii-label {
    display: block !important;
    margin-bottom: 20px !important;
}

.kemii-label > span {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    margin-bottom: 8px !important;
}

.kemii-label small {
    display: block !important;
    font-size: 12px !important;
    color: #9CA3AF !important;
    margin-top: 6px !important;
}

.kemii-form input[type="text"],
.kemii-form textarea,
.kemii-form select {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    background: #fff !important;
    font-family: inherit !important;
    color: #1A1A1A !important;
    transition: border-color 0.15s !important;
}

.kemii-form input:focus,
.kemii-form textarea:focus,
.kemii-form select:focus {
    outline: none !important;
    border-color: #FF4D6D !important;
}

.kemii-toggle {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    cursor: pointer !important;
    background: #FAFAF7 !important;
    border: 1.5px solid #EFEFEC !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
}

.kemii-toggle input {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.kemii-toggle-track {
    width: 40px !important;
    height: 22px !important;
    background: #D1D5DB !important;
    border-radius: 100px !important;
    position: relative !important;
    transition: background 0.15s !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}
.kemii-toggle-knob {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 18px !important;
    height: 18px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: left 0.15s !important;
}
.kemii-toggle input:checked ~ .kemii-toggle-track {
    background: #10B981 !important;
}
.kemii-toggle input:checked ~ .kemii-toggle-track .kemii-toggle-knob {
    left: 20px !important;
}

.kemii-toggle-label strong {
    display: block !important;
    font-size: 14px !important;
    color: #1A1A1A !important;
    margin-bottom: 4px !important;
}
.kemii-toggle-label small {
    font-size: 12px !important;
    color: #6B7280 !important;
    line-height: 1.4 !important;
}

.kemii-form-fineprint {
    font-size: 12px !important;
    color: #9CA3AF !important;
    text-align: center !important;
    margin: 12px 0 0 !important;
}

.kemii-error-box {
    background: #FEF2F2 !important;
    border: 1.5px solid #FECACA !important;
    color: #B91C1C !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
}
.kemii-error-box p { margin: 4px 0 !important; }

.kemii-success-box {
    max-width: 560px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border: 1.5px solid #DCFCE7 !important;
    border-radius: 16px !important;
    padding: 40px 36px !important;
    text-align: center !important;
}
.kemii-success-box h3 {
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    margin: 0 0 8px !important;
}
.kemii-success-box p {
    color: #6B7280 !important;
    margin: 0 0 24px !important;
}
.kemii-success-ctas {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */

.kemii-single {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 40px 20px 80px !important;
}

.kemii-back-link {
    display: inline-block !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    margin-bottom: 24px !important;
}
.kemii-back-link:hover { color: #1A1A1A !important; }

.kemii-single-card {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1.5px solid #EFEFEC !important;
    padding: 32px 28px !important;
    overflow: hidden !important;
    position: relative !important;
}

.kemii-single-stripe {
    height: 4px !important;
    border-radius: 100px !important;
    margin: -32px -28px 24px !important;
}

.kemii-single-badges {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.kemii-single-title {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    margin: 0 0 16px !important;
}

.kemii-single-meta {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    font-size: 14px !important;
    color: #6B7280 !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #F4F4F2 !important;
    margin-bottom: 24px !important;
}

.kemii-single-desc {
    font-size: 16px !important;
    color: #1A1A1A !important;
    line-height: 1.6 !important;
    margin-bottom: 32px !important;
}

.kemii-react-form {
    background: #FAFAF7 !important;
    border: 1.5px solid #EFEFEC !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

.kemii-react-form textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    margin-bottom: 12px !important;
    background: #fff !important;
    resize: vertical !important;
}

.kemii-success-inline {
    background: #ECFDF5 !important;
    color: #047857 !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
}

.kemii-cta-box {
    text-align: center !important;
    padding: 24px !important;
    background: #FAFAF7 !important;
    border-radius: 12px !important;
}

.kemii-owner-box {
    background: #F0F9FF !important;
    border: 1.5px solid #BAE6FD !important;
    border-radius: 12px !important;
    padding: 20px !important;
}
.kemii-owner-box p { margin: 0 0 12px !important; font-size: 14px !important; }
.kemii-reaction-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}
.kemii-reaction-list li {
    background: #fff !important;
    border: 1px solid #BAE6FD !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.kemii-muted { color: #9CA3AF !important; font-size: 14px !important; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.kemii-final-cta {
    background: #1A1A1A !important;
    padding: 64px 24px !important;
    text-align: center !important;
    overflow: hidden !important;
}

.kemii-cta-glow {
    position: absolute !important;
    top: -50% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(255,77,109,0.15) 0%, transparent 60%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.kemii-cta-inner {
    position: relative !important;
    z-index: 1 !important;
}

.kemii-final-cta h2 {
    color: #fff !important;
    font-size: clamp(26px, 4vw, 36px) !important;
    font-weight: 500 !important;
    margin: 0 0 12px !important;
    letter-spacing: -1px !important;
}

.kemii-final-cta p {
    color: #A1A1AA !important;
    font-size: 16px !important;
    margin: 0 0 28px !important;
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.kemii-dashboard {
    display: flex !important;
    min-height: 700px !important;
    background: #FAFAF7 !important;
    border: 1.5px solid #EFEFEC !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 24px auto !important;
    max-width: 1200px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.kemii-dashboard *,
.kemii-dashboard *::before,
.kemii-dashboard *::after {
    box-sizing: border-box !important;
}

/* SIDEBAR */
.kemii-sidebar {
    width: 240px !important;
    background: #fff !important;
    border-right: 1px solid #EFEFEC !important;
    padding: 24px 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.kemii-sidebar-user {
    padding: 0 20px 20px !important;
    border-bottom: 1px solid #EFEFEC !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.kemii-avatar {
    width: 40px !important;
    height: 40px !important;
    background: linear-gradient(135deg, #FF4D6D 0%, #FF8A5B 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.kemii-avatar-sm {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
}

.kemii-sidebar-user-info {
    min-width: 0 !important;
}

.kemii-sidebar-username {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.kemii-sidebar-plan {
    font-size: 12px !important;
    color: #6B7280 !important;
    margin-top: 2px !important;
}

.kemii-sidebar-nav {
    padding: 0 12px !important;
    flex: 1 !important;
}

.kemii-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color: #4B5563 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    margin-bottom: 2px !important;
    transition: background 0.15s, color 0.15s !important;
}

.kemii-nav-link:hover {
    background: #FAFAF7 !important;
    color: #1A1A1A !important;
}

.kemii-nav-link.is-active {
    background: #FEF3F5 !important;
    color: #FF4D6D !important;
    font-weight: 500 !important;
}

.kemii-nav-link svg {
    flex-shrink: 0 !important;
}

.kemii-nav-link span:first-of-type {
    flex: 1 !important;
}

.kemii-nav-badge {
    margin-left: auto !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 100px !important;
    color: #fff !important;
    font-weight: 500 !important;
}

.kemii-nav-badge-dark { background: #1A1A1A !important; }
.kemii-nav-badge-pink { background: #FF4D6D !important; }

.kemii-sidebar-upsell {
    padding: 24px 16px 0 !important;
    margin-top: 24px !important;
    border-top: 1px solid #EFEFEC !important;
}

.kemii-upsell-box {
    background: linear-gradient(135deg, #FFE4EA 0%, #FFF1D4 100%) !important;
    padding: 16px !important;
    border-radius: 12px !important;
    text-align: center !important;
}

.kemii-upsell-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    margin-bottom: 4px !important;
}

.kemii-upsell-text {
    font-size: 11px !important;
    color: #6B7280 !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
}

.kemii-btn-block {
    width: 100% !important;
    justify-content: center !important;
}

.kemii-sidebar-foot {
    padding: 16px 20px 0 !important;
}

.kemii-sidebar-logout {
    font-size: 12px !important;
    color: #9CA3AF !important;
    text-decoration: none !important;
}
.kemii-sidebar-logout:hover { color: #1A1A1A !important; }

/* MAIN */
.kemii-dashboard-main {
    flex: 1 !important;
    padding: 32px 36px !important;
    overflow: hidden !important;
}

.kemii-dash-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.kemii-dash-head h1 {
    font-size: 28px !important;
    font-weight: 500 !important;
    margin: 0 0 4px !important;
    color: #1A1A1A !important;
    letter-spacing: -0.5px !important;
}

.kemii-dash-head p {
    font-size: 14px !important;
    color: #6B7280 !important;
    margin: 0 !important;
}

/* STAT CARDS */
.kemii-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
}

.kemii-stat-card {
    background: #fff !important;
    border: 1.5px solid #EFEFEC !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

.kemii-stat-card-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
}

.kemii-stat-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.kemii-stat-icon.kemii-icon-pink  { background: #FEF3F5 !important; color: #FF4D6D !important; }
.kemii-stat-icon.kemii-icon-rose  { background: #FFE4EA !important; color: #FF4D6D !important; }
.kemii-stat-icon.kemii-icon-green { background: #DCFCE7 !important; color: #10B981 !important; }
.kemii-stat-icon.kemii-icon-amber { background: #FEF3C7 !important; color: #F59E0B !important; }

.kemii-stat-delta {
    font-size: 11px !important;
    color: #10B981 !important;
    font-weight: 500 !important;
}

.kemii-stat-value {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    line-height: 1 !important;
}

.kemii-stat-label {
    font-size: 12px !important;
    color: #6B7280 !important;
    margin-top: 4px !important;
}

/* PANELS */
.kemii-panel {
    background: #fff !important;
    border: 1.5px solid #EFEFEC !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin-bottom: 16px !important;
}

.kemii-panel-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

.kemii-panel-head h2,
.kemii-panel-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    margin: 0 0 18px !important;
    color: #1A1A1A !important;
}

.kemii-panel-head h2 {
    margin: 0 !important;
}

.kemii-panel-head a {
    font-size: 13px !important;
    color: #6B7280 !important;
    text-decoration: none !important;
}
.kemii-panel-head a:hover { color: #1A1A1A !important; }

/* REACTION FEED */
.kemii-reaction-feed {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.kemii-reaction-row {
    display: flex !important;
    gap: 12px !important;
    padding: 12px !important;
    background: #FAFAF7 !important;
    border-radius: 10px !important;
    align-items: center !important;
}

.kemii-reaction-row.is-blurred .kemii-avatar-sm,
.kemii-reaction-row.is-blurred .kemii-reaction-name,
.kemii-reaction-row.is-blurred .kemii-reaction-msg {
    filter: blur(4px) !important;
    user-select: none !important;
}

.kemii-reaction-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.kemii-reaction-line {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 2px !important;
    flex-wrap: wrap !important;
}

.kemii-reaction-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
}

.kemii-reaction-msg {
    font-size: 12px !important;
    color: #6B7280 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* MINI BUTTONS */
.kemii-btn-mini {
    background: #fff !important;
    color: #6B7280 !important;
    border: 1px solid #E5E7EB !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
}
.kemii-btn-mini:hover { border-color: #1A1A1A !important; color: #1A1A1A !important; }

.kemii-btn-mini-dark {
    background: #1A1A1A !important;
    color: #fff !important;
    border: none !important;
    font-weight: 500 !important;
}
.kemii-btn-mini-dark:hover { color: #fff !important; opacity: 0.9 !important; }

.kemii-btn-locked {
    background: #fff !important;
    color: #6B7280 !important;
    border: 1.5px dashed #E5E7EB !important;
}

.kemii-btn-boost {
    background: #FFE4EA !important;
    color: #FF4D6D !important;
    border: none !important;
    font-weight: 500 !important;
}
.kemii-btn-boost:hover { background: #FF4D6D !important; color: #fff !important; }

.kemii-btn-danger {
    color: #DC2626 !important;
    border-color: #FECACA !important;
}
.kemii-btn-danger:hover { background: #FEF2F2 !important; color: #DC2626 !important; border-color: #DC2626 !important; }

/* POST ROWS */
.kemii-post-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.kemii-post-row {
    border: 1.5px solid #EFEFEC !important;
    border-radius: 10px !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #fff !important;
}

.kemii-post-row.is-boosted {
    border-color: #FFD4DD !important;
    background: linear-gradient(90deg, #FFFBFC 0%, #fff 50%) !important;
}

.kemii-post-stripe {
    width: 4px !important;
    height: 40px !important;
    border-radius: 100px !important;
    flex-shrink: 0 !important;
}

.kemii-post-row-body {
    flex: 1 !important;
    min-width: 0 !important;
}

.kemii-post-row-title {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    margin-bottom: 4px !important;
    flex-wrap: wrap !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
}

.kemii-post-row-meta {
    font-size: 12px !important;
    color: #6B7280 !important;
}

.kemii-post-row-actions {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.kemii-badge-muted {
    background: #F3F4F6 !important;
    color: #6B7280 !important;
}

/* TAB BAR */
.kemii-tab-bar {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #EFEFEC !important;
}

.kemii-tab {
    padding: 10px 14px !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -1px !important;
}

.kemii-tab:hover { color: #1A1A1A !important; }
.kemii-tab.is-active {
    color: #FF4D6D !important;
    border-bottom-color: #FF4D6D !important;
    font-weight: 500 !important;
}

/* PROFILE FORM */
.kemii-form-inline .kemii-label {
    margin-bottom: 18px !important;
}

.kemii-form-row {
    display: grid !important;
    grid-template-columns: 1fr 120px !important;
    gap: 16px !important;
}

.kemii-form-inline input[type="text"],
.kemii-form-inline input[type="number"],
.kemii-form-inline textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    background: #fff !important;
    color: #1A1A1A !important;
}

.kemii-form-inline input:focus,
.kemii-form-inline textarea:focus {
    outline: none !important;
    border-color: #FF4D6D !important;
}

.kemii-flash-success {
    background: #ECFDF5 !important;
    color: #047857 !important;
    border: 1px solid #A7F3D0 !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
}

/* PRICING */
.kemii-pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

.kemii-price-card {
    background: #fff !important;
    border: 1.5px solid #EFEFEC !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    position: relative !important;
}

.kemii-price-featured {
    border-color: #FF4D6D !important;
    border-width: 2px !important;
}

.kemii-price-badge {
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #FF4D6D !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    border-radius: 100px !important;
}

.kemii-price-tag {
    font-size: 14px !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

.kemii-price-amount {
    font-size: 36px !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    letter-spacing: -1px !important;
    line-height: 1 !important;
}

.kemii-price-period {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin-bottom: 20px !important;
}

.kemii-price-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}

.kemii-price-features li {
    font-size: 13px !important;
    color: #4B5563 !important;
    padding: 6px 0 !important;
    line-height: 1.5 !important;
}

.kemii-panel-premium-active {
    text-align: center !important;
    padding: 48px !important;
    background: linear-gradient(135deg, #FFE4EA 0%, #FFF1D4 100%) !important;
    border: none !important;
}
.kemii-panel-premium-active h2 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
}

/* SETTINGS ROWS */
.kemii-setting-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid #F4F4F2 !important;
}
.kemii-setting-row:last-child { border-bottom: none !important; }
.kemii-setting-row strong {
    font-size: 14px !important;
    color: #1A1A1A !important;
    display: block !important;
    margin-bottom: 2px !important;
}
.kemii-setting-row p {
    margin: 0 !important;
    font-size: 13px !important;
}

/* UPGRADE PROMPT */
.kemii-upgrade-prompt {
    text-align: center !important;
    padding: 24px !important;
    background: linear-gradient(135deg, #FFE4EA 0%, #FFF1D4 100%) !important;
    border-radius: 12px !important;
    margin-top: 16px !important;
}
.kemii-upgrade-prompt p {
    margin: 0 0 12px !important;
    color: #1A1A1A !important;
    font-size: 14px !important;
}

.kemii-empty-inline {
    text-align: center !important;
    padding: 32px 16px !important;
}
.kemii-empty-inline p {
    color: #6B7280 !important;
    margin: 0 0 16px !important;
}

/* DASHBOARD RESPONSIVE */
@media (max-width: 900px) {
    .kemii-dashboard {
        flex-direction: column !important;
        margin: 12px !important;
    }
    .kemii-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #EFEFEC !important;
        padding: 16px !important;
    }
    .kemii-sidebar-nav {
        display: flex !important;
        gap: 4px !important;
        overflow-x: auto !important;
        padding: 0 !important;
    }
    .kemii-nav-link {
        white-space: nowrap !important;
    }
    .kemii-nav-link span:first-of-type {
        flex: initial !important;
    }
    .kemii-sidebar-upsell { display: none !important; }
    .kemii-sidebar-foot { display: none !important; }
    .kemii-dashboard-main { padding: 20px !important; }
    .kemii-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .kemii-pricing-grid { grid-template-columns: 1fr !important; }
    .kemii-form-row { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
    .kemii-stat-grid { grid-template-columns: 1fr !important; }
    .kemii-post-row {
        flex-wrap: wrap !important;
    }
    .kemii-post-row-actions {
        width: 100% !important;
    }
}