.st-smm-page { max-width: 1320px; margin-inline: auto; }
.st-smm-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--st-space-5); margin-bottom: var(--st-space-4); padding: clamp(20px, 4vw, 36px); border: 1px solid var(--st-border); border-radius: var(--st-radius-lg); background: var(--st-surface); }
.st-smm-hero h1 { margin: var(--st-space-1) 0 var(--st-space-2); color: var(--st-text); font-size: 30px; line-height: 1.2; }
.st-smm-hero p { margin: 0; color: var(--st-text-secondary); font-size: 14px; }
.st-smm-hero-icon { display: grid; width: 68px; height: 68px; flex: 0 0 68px; place-items: center; border-radius: 20px; background: var(--st-primary-soft); color: var(--st-primary); font-size: 34px; }
.st-smm-panel { overflow: visible; }
.st-smm-panel-body { display: grid; align-content: start; grid-auto-rows: max-content; gap: var(--st-space-5); }
.st-smm-search { display: flex; min-height: 52px; align-items: center; gap: var(--st-space-2); padding: 0 var(--st-space-4); border: 1px solid var(--st-border-strong); border-radius: var(--st-radius-sm); background: var(--st-surface-soft); color: var(--st-primary); }
.st-smm-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--st-text); font-size: 15px; }
.st-smm-search button { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--st-text-secondary); cursor: pointer; }
.st-smm-search button:hover { background: var(--st-surface-hover); color: var(--st-text); }
.st-smm-platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--st-space-3); }
.st-smm-platforms button { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 0 var(--st-space-3); border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); background: var(--st-surface); color: var(--st-text-secondary); font-weight: 700; cursor: pointer; transition: border-color var(--st-transition), color var(--st-transition), background-color var(--st-transition); }
.st-smm-platforms button:hover, .st-smm-platforms button.is-active { border-color: var(--st-primary); background: var(--st-primary-soft); color: var(--st-primary-readable); }
.st-smm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-space-4); }
.st-smm-field { display: grid; min-width: 0; gap: var(--st-space-2); color: var(--st-text); font-size: 13px; font-weight: 800; }
.st-smm-field input, .st-smm-field select, .st-smm-field textarea { width: 100%; min-height: 50px; padding: 0 var(--st-space-3); border: 1px solid var(--st-border-strong); border-radius: var(--st-radius-sm); outline: 0; background: var(--st-surface); color: var(--st-text); font: inherit; font-weight: 500; }
.st-smm-field textarea { min-height: 104px; padding-block: var(--st-space-3); resize: vertical; }
.st-smm-field input:focus, .st-smm-field select:focus, .st-smm-field textarea:focus { border-color: var(--st-primary); box-shadow: 0 0 0 2px var(--st-focus-ring); }
.st-smm-field select:disabled { opacity: .65; cursor: not-allowed; }
.st-smm-field[hidden], .st-smm-subscription-fields[hidden] { display: none; }
.st-smm-subscription-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-space-4); }
.st-smm-field small { min-height: 18px; color: var(--st-text-secondary); font-size: 12px; font-weight: 600; }
.st-smm-description { display: block; align-self: start; height: max-content; min-height: 0; padding: var(--st-space-3); border-radius: var(--st-radius-sm); background: var(--st-surface-soft); color: var(--st-text-secondary); line-height: 1.65; white-space: normal; }
.st-smm-description-label { display: block; margin-bottom: var(--st-space-2); color: var(--st-text); font-size: 13px; font-weight: 800; }
.st-smm-description [data-smm-description-text] { height: auto; max-height: none; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
.st-smm-description [data-smm-description-text].is-scrollable { max-height: var(--st-smm-description-max-height, 260px); overflow: auto; }
.st-smm-fields-order { grid-template-columns: 1fr; gap: var(--st-space-4); }
.st-smm-drip { display: flex; align-items: center; gap: var(--st-space-2); color: var(--st-text); font-size: 13px; font-weight: 800; }
.st-smm-drip input { width: 16px; height: 16px; accent-color: var(--st-primary); }
.st-smm-drip small { color: var(--st-text-muted); font-weight: 600; }
.st-smm-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--st-space-3); padding-top: var(--st-space-3); border-top: 1px solid var(--st-border); color: var(--st-text-secondary); font-size: 13px; font-weight: 800; }
.st-smm-total strong { color: var(--st-primary-readable); font-size: 24px; }
.st-smm-submit { width: 100%; min-height: 50px; justify-content: center; }
.st-smm-state { display: flex; min-height: 20px; align-items: center; justify-content: center; gap: var(--st-space-2); color: var(--st-text-secondary); font-size: 13px; }
.st-smm-state[hidden], .st-smm-search button[hidden] { display: none; }
.st-smm-state[data-state="error"] { color: var(--st-danger); }
.st-smm-state button { padding: 0; border: 0; background: transparent; color: var(--st-primary); font: inherit; font-weight: 800; cursor: pointer; }
.st-category-smm-link { display: inline-flex; min-height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 var(--st-space-2); gap: 4px; border: 1px solid var(--st-primary); border-radius: var(--st-radius-sm); background: var(--st-primary-soft); color: var(--st-primary-readable); font-size: 12px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; }
.st-category-smm-link:hover, .st-category-smm-link:focus-visible { border-color: var(--st-primary); color: var(--st-primary-readable); text-decoration: none; }
.st-category-smm-link .material-icons-outlined { font-size: 17px; }

/* Brand glyphs are served from the existing local Font Awesome asset. No
   upstream image URL is loaded, so changing a provider cannot introduce an
   external request or expose provider credentials. */
@font-face { font-family: "SmmBrandIcons"; font-style: normal; font-weight: 400; font-display: block; src: url("/assets/static/font/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"); }
.st-smm-platform-icon { display: inline-block; width: 1.15em; flex: 0 0 1.15em; font-family: "SmmBrandIcons"; font-size: 17px; font-style: normal; font-weight: 400; line-height: 1; text-align: center; }
.st-smm-platform-icon--telegram::before { content: "\f2c6"; color: #229ed9; }
.st-smm-platform-icon--twitter::before { content: "\f099"; color: #1d9bf0; }
.st-smm-platform-icon--facebook::before { content: "\f09a"; color: #1877f2; }
.st-smm-platform-icon--instagram::before { content: "\f16d"; color: #d9467a; }
.st-smm-platform-icon--youtube::before { content: "\f167"; color: #ff0033; }
.st-smm-platform-icon--whatsapp::before { content: "\f232"; color: #25d366; }
.st-smm-platform-icon--tiktok::before { content: "\f001"; color: #111827; }
.st-smm-platform-icon--threads::before { content: "\40"; color: #111827; }
.st-smm-platform-icon--shopee::before { content: "\f290"; color: #ee4d2d; }
.st-smm-platform-icon--kuaishou::before { content: "\f03d"; color: #ff4d4f; }
.st-smm-platform-icon--douyin::before { content: "\f001"; color: #111827; }
.st-smm-platform-icon--xiaohongshu::before { content: "\f02d"; color: #e53935; }
@media (max-width: 767px) {
    .st-smm-page { padding-inline: var(--st-space-3); }
    .st-smm-hero { padding: var(--st-space-4); }
    .st-smm-hero h1 { font-size: 24px; }
    .st-smm-hero-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 16px; font-size: 26px; }
    .st-smm-fields { grid-template-columns: 1fr; }
    .st-smm-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.st-smm-account { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 var(--st-space-4); }
.st-smm-account-item { display: flex; min-width: 0; min-height: 86px; align-items: center; padding: 16px; gap: 12px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); color: var(--st-text); }
.st-smm-account-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 8px; background: var(--st-primary-soft); color: var(--st-primary-readable); font-size: 21px; }
.st-smm-account-copy { display: grid; min-width: 0; gap: 3px; }
.st-smm-account-copy small { color: var(--st-text-secondary); font-size: 12px; font-weight: 600; }
.st-smm-account-copy strong { overflow: hidden; color: var(--st-text); font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.st-smm-account-copy strong em { margin-right: 2px; color: var(--st-text-secondary); font-size: 12px; font-style: normal; font-weight: 700; }
.st-smm-account-balance { text-decoration: none; transition: border-color var(--st-transition), background-color var(--st-transition); }
.st-smm-account-balance:hover, .st-smm-account-balance:focus-visible { border-color: var(--st-primary); background: var(--st-primary-soft); color: var(--st-text); text-decoration: none; }
.st-smm-account-balance .st-smm-account-copy strong { font-size: 20px; }
.st-smm-account-action { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; margin-left: auto; border: 1px solid var(--st-border-strong); border-radius: 6px; color: var(--st-text-secondary); font-size: 18px; }
.st-smm-panel { border-color: var(--st-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 20, 25, .045); }
.st-smm-panel-body { gap: 18px; padding: 20px; }
.st-smm-search { min-height: 48px; border-color: var(--st-border-strong); border-radius: 7px; background: var(--st-surface); transition: border-color var(--st-transition), box-shadow var(--st-transition); }
.st-smm-search:focus-within { border-color: var(--st-primary); box-shadow: 0 0 0 3px var(--st-focus-ring); }
.st-smm-platforms { gap: 10px; }
.st-smm-platforms button { min-height: 44px; border-radius: 7px; font-size: 13px; }
    .st-smm-platforms button .material-icons-outlined, .st-smm-platform-icon { font-size: 18px; vertical-align: middle; }
.st-smm-field { gap: 7px; font-size: 12px; }
.st-smm-field input, .st-smm-field select, .st-smm-field textarea { min-height: 48px; border-radius: 7px; }
.st-smm-description { border-left: 3px solid var(--st-primary); border-radius: 0 7px 7px 0; background: var(--st-surface-soft); }
.st-smm-description-label { font-size: 12px; }
.st-smm-total { min-height: 66px; align-items: center; padding: 12px 16px; border: 1px solid var(--st-border); border-radius: 7px; background: var(--st-surface-soft); }
.st-smm-total strong { font-size: 22px; }
.st-smm-submit { min-height: 52px; border-radius: 7px; font-weight: 800; }

@media (max-width: 767px) {
    .st-smm-account { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .st-smm-account-item { min-height: 72px; padding: 10px; gap: 9px; }
    .st-smm-account-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; }
    .st-smm-account-copy small { font-size: 11px; }
    .st-smm-account-copy strong { font-size: 13px; }
    .st-smm-account-balance .st-smm-account-copy strong { font-size: 16px; }
    .st-smm-account-action { width: 24px; height: 24px; flex-basis: 24px; font-size: 16px; }
    .st-smm-panel-body { gap: 14px; padding: 14px; }
    .st-smm-platforms { gap: 8px; }
    .st-smm-platforms button { min-height: 42px; padding-inline: 8px; font-size: 12px; }
}

.st-store-smm-entry { display: none; }

@media (min-width: 1025px) {
    .st-store-smm-entry {
        display: flex;
        min-height: 56px;
        align-items: center;
        margin: 0 0 14px;
        padding: 0 16px;
        gap: 11px;
        border: 1px solid #efb927;
        border-radius: 8px;
        background: #ffd34d;
        box-shadow: 0 2px 0 rgba(112, 73, 0, .08);
        color: #252525;
        font-size: 15px;
        font-weight: 800;
        text-decoration: none;
        transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }
    .st-store-smm-entry:hover,
    .st-store-smm-entry:focus-visible {
        background: #ffca32;
        box-shadow: 0 3px 8px rgba(112, 73, 0, .15);
        color: #171717;
        text-decoration: none;
    }
    .st-store-smm-entry:focus-visible { outline: 3px solid rgba(239, 126, 0, .35); outline-offset: 2px; }
    .st-store-smm-entry:active { transform: translateY(1px); }
    .st-store-smm-entry__icon {
        display: grid;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        place-items: center;
        border-radius: 7px;
        background: #fff1bd;
        color: #a64712;
        font-size: 20px;
    }
    .st-store-smm-entry__label { min-width: 0; }
    .st-store-smm-entry__arrow { margin-left: auto; font-size: 20px; }
}