/* ══════════════════════════════════════════════════════════
   SEOFAI Unified Dashboard — CSS
   Tabs: Bookmarks · My Tools · Profile
   ══════════════════════════════════════════════════════════ */

/* ── Reset & Container ── */
.sfc-dash { max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.sfc-dash *, .sfc-dash *::before, .sfc-dash *::after { box-sizing: border-box; }

/* ── Tab Navigation ── */
.sfc-dash-tabs {
    display: flex; align-items: center; gap: 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 32px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sfc-dash-tabs::-webkit-scrollbar { display: none; }
.sfc-dash-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border: none; background: none;
    font-size: 14px; font-weight: 600; color: #64748b;
    cursor: pointer; white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    font-family: inherit;
}
.sfc-dash-tab:hover { color: #334155; }
.sfc-dash-tab--active {
    color: #4f46e5; border-bottom-color: #4f46e5;
}
.sfc-dash-tab svg { flex-shrink: 0; }
.sfc-dash-tab__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    font-size: 11px; font-weight: 700; border-radius: 11px;
    background: #f1f5f9; color: #64748b;
}
.sfc-dash-tab--active .sfc-dash-tab__badge {
    background: #eef2ff; color: #4f46e5;
}
.sfc-dash-tab--logout {
    margin-left: auto; color: #ef4444;
}
.sfc-dash-tab--logout:hover { color: #dc2626; }
.sfc-dash-tab.sfc-drag-over { outline: 2px dashed #4f46e5; outline-offset: -3px; border-radius: 4px; }

/* ── Tab Panels ── */
.sfc-dash-panel { display: none; }
.sfc-dash-panel--active { display: block; }

/* ══════════════════════════════════════════════════════════
   BOOKMARKS TAB
   ══════════════════════════════════════════════════════════ */

/* Toolbar */
.sfc-bk-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px; flex-wrap: wrap;
}
.sfc-bk-toolbar__left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.sfc-bk-toolbar__right { display: flex; align-items: center; gap: 10px; }

.sfc-bk-search {
    display: flex; align-items: center; gap: 8px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 8px 14px;
    max-width: 320px; width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sfc-bk-search:focus-within {
    border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.06);
}
.sfc-bk-search svg { color: #94a3b8; flex-shrink: 0; }
.sfc-bk-search__input {
    border: none; outline: none; background: transparent;
    font-size: 14px; color: #1e293b; width: 100%;
    font-family: inherit;
}
.sfc-bk-search__input::placeholder { color: #94a3b8; }

.sfc-bk-count {
    font-size: 14px; color: #64748b; font-weight: 500;
    white-space: nowrap;
}
.sfc-bk-count strong { color: #4f46e5; font-weight: 700; }

/* Bulk action buttons */
.sfc-bk-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s; font-family: inherit;
}
.sfc-bk-btn--select {
    background: #f1f5f9; color: #334155; border-color: #e2e8f0;
}
.sfc-bk-btn--select:hover { background: #e2e8f0; }
.sfc-bk-btn--select.active {
    background: #eef2ff; color: #4f46e5; border-color: #c7d2fe;
}
.sfc-bk-btn--remove {
    background: #fef2f2; color: #dc2626; border-color: #fecaca;
    display: none;
}
.sfc-bk-btn--remove:hover { background: #fee2e2; }
.sfc-bk-btn--remove.visible { display: inline-flex; }
.sfc-bk-btn--selectall {
    background: #f0fdf4; color: #16a34a; border-color: #bbf7d0;
    display: none;
}
.sfc-bk-btn--selectall:hover { background: #dcfce7; }
.sfc-bk-btn--selectall.visible { display: inline-flex; }
.sfc-bk-btn--export {
    background: #f0fdf4; color: #059669; border-color: #bbf7d0;
}
.sfc-bk-btn--export:hover { background: #dcfce7; }

/* Sort & Category dropdowns */
.sfc-bk-select-dropdown {
    padding: 8px 32px 8px 12px; border: 1px solid #e2e8f0;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    color: #334155; background: #f8fafc;
    cursor: pointer; font-family: inherit;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    outline: none;
    transition: border-color 0.2s;
}
.sfc-bk-select-dropdown:hover { border-color: #c7d2fe; }
.sfc-bk-select-dropdown:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.06); }

/* Layout Switcher */
.sfc-bk-layout-switcher {
    display: flex; gap: 2px; background: #f1f5f9; border-radius: 8px; padding: 2px;
}
.sfc-bk-layout-btn {
    width: 32px; height: 32px; border: none; border-radius: 6px;
    background: transparent; color: #94a3b8; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.sfc-bk-layout-btn:hover { color: #4f46e5; }
.sfc-bk-layout-btn.active { background: #fff; color: #4f46e5; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ── GRID LAYOUT (Default) ── */
.sfc-bk-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.sfc-bk-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    background: #ffffff; border: 1px solid #e2e8f0;
    border-radius: 14px; padding: 24px 16px 18px;
    text-decoration: none; color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
}
.sfc-bk-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 16px rgba(79,70,229,0.08);
    transform: translateY(-2px);
}
.sfc-bk-card__body { display: contents; }

/* Selection checkbox */
.sfc-bk-card__check {
    position: absolute; top: 10px; left: 10px;
    width: 22px; height: 22px; border-radius: 6px;
    border: 2px solid #cbd5e1; background: #fff;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
    z-index: 2;
}
.sfc-bk-card__check svg { display: none; }
.sfc-bk-grid.selecting .sfc-bk-card__check { display: flex; }
.sfc-bk-card__check.checked { background: #4f46e5; border-color: #4f46e5; }
.sfc-bk-card__check.checked svg { display: block; }
.sfc-bk-grid.selecting .sfc-bk-card.selected {
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.15);
}

/* Card content */
.sfc-bk-card__logo {
    width: 52px; height: 52px; border-radius: 14px;
    object-fit: cover; background: #f8fafc;
    border: 1px solid #f1f5f9; margin-bottom: 12px; flex-shrink: 0;
}
.sfc-bk-card__logo-ph {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; margin-bottom: 12px; flex-shrink: 0;
}
.sfc-bk-card__name {
    font-size: 14px; font-weight: 600; color: #0f172a;
    text-align: center; line-height: 1.3;
    margin-bottom: 4px; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sfc-bk-card__name:hover { color: #4f46e5; }
.sfc-bk-card__tagline {
    font-size: 12px; color: #64748b; text-align: center;
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sfc-bk-card__cat {
    display: none; font-size: 11px; color: #4f46e5; background: #eef2ff;
    padding: 2px 8px; border-radius: 20px; font-weight: 600; margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sfc-bk-card__remove {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 8px;
    border: none; background: transparent;
    color: #cbd5e1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; opacity: 0; z-index: 2;
}
.sfc-bk-card:hover .sfc-bk-card__remove { opacity: 1; }
.sfc-bk-card__remove:hover { background: #fef2f2; color: #ef4444; }

/* ── PILL LAYOUT ── */
.sfc-bk-grid--pill { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sfc-bk-grid--pill .sfc-bk-card {
    flex-direction: row; align-items: center; padding: 12px 16px;
    border-radius: 50px; gap: 12px;
}
.sfc-bk-grid--pill .sfc-bk-card:hover { transform: translateY(-1px); }
.sfc-bk-grid--pill .sfc-bk-card__logo,
.sfc-bk-grid--pill .sfc-bk-card__logo-ph {
    width: 38px; height: 38px; border-radius: 50%; margin-bottom: 0;
    font-size: 15px; flex-shrink: 0;
}
.sfc-bk-grid--pill .sfc-bk-card__body {
    display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.sfc-bk-grid--pill .sfc-bk-card__name {
    text-align: left; font-size: 13px; -webkit-line-clamp: 1; margin-bottom: 0;
}
.sfc-bk-grid--pill .sfc-bk-card__tagline { display: none; }
.sfc-bk-grid--pill .sfc-bk-card__cat {
    display: inline-block; font-size: 10px; padding: 1px 6px; margin-top: 2px;
    align-self: flex-start;
}
.sfc-bk-grid--pill .sfc-bk-card__check { top: 50%; left: 8px; transform: translateY(-50%); }
.sfc-bk-grid--pill.selecting .sfc-bk-card { padding-left: 40px; }
.sfc-bk-grid--pill .sfc-bk-card__remove { top: 50%; right: 8px; transform: translateY(-50%); }

/* ── LIST LAYOUT ── */
.sfc-bk-grid--list { grid-template-columns: 1fr; gap: 8px; }
.sfc-bk-grid--list .sfc-bk-card {
    flex-direction: row; align-items: center; padding: 14px 18px;
    border-radius: 12px; gap: 16px;
}
.sfc-bk-grid--list .sfc-bk-card:hover { transform: none; }
.sfc-bk-grid--list .sfc-bk-card__logo,
.sfc-bk-grid--list .sfc-bk-card__logo-ph {
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 0;
    font-size: 17px; flex-shrink: 0;
}
.sfc-bk-grid--list .sfc-bk-card__body {
    display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.sfc-bk-grid--list .sfc-bk-card__name {
    text-align: left; font-size: 14px; -webkit-line-clamp: 1; margin-bottom: 2px;
}
.sfc-bk-grid--list .sfc-bk-card__tagline {
    text-align: left; -webkit-line-clamp: 1; font-size: 12px;
}
.sfc-bk-grid--list .sfc-bk-card__cat {
    display: inline-block; font-size: 10px; padding: 1px 6px; margin-top: 4px;
    align-self: flex-start;
}
.sfc-bk-grid--list .sfc-bk-card__check { top: 50%; left: 10px; transform: translateY(-50%); }
.sfc-bk-grid--list.selecting .sfc-bk-card { padding-left: 44px; }
.sfc-bk-grid--list .sfc-bk-card__remove { top: 50%; right: 10px; transform: translateY(-50%); }

/* ── MINIMAL LAYOUT ── */
.sfc-bk-grid--minimal { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sfc-bk-grid--minimal .sfc-bk-card {
    flex-direction: row; align-items: center; padding: 10px 14px;
    border-radius: 8px; gap: 10px; border-color: #f1f5f9;
    background: #fafbfc;
}
.sfc-bk-grid--minimal .sfc-bk-card:hover { transform: none; background: #fff; border-color: #c7d2fe; }
.sfc-bk-grid--minimal .sfc-bk-card__logo,
.sfc-bk-grid--minimal .sfc-bk-card__logo-ph {
    width: 28px; height: 28px; border-radius: 8px; margin-bottom: 0;
    font-size: 12px; flex-shrink: 0;
}
.sfc-bk-grid--minimal .sfc-bk-card__body {
    display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.sfc-bk-grid--minimal .sfc-bk-card__name {
    text-align: left; font-size: 12px; -webkit-line-clamp: 1; margin-bottom: 0;
}
.sfc-bk-grid--minimal .sfc-bk-card__tagline { display: none; }
.sfc-bk-grid--minimal .sfc-bk-card__cat { display: none; }
.sfc-bk-grid--minimal .sfc-bk-card__check { top: 50%; left: 6px; transform: translateY(-50%); width: 18px; height: 18px; }
.sfc-bk-grid--minimal.selecting .sfc-bk-card { padding-left: 30px; }
.sfc-bk-grid--minimal .sfc-bk-card__remove { top: 50%; right: 6px; transform: translateY(-50%); width: 24px; height: 24px; }

/* Empty state */
.sfc-bk-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding: 60px 20px; text-align: center;
}
.sfc-bk-empty svg { color: #cbd5e1; }
.sfc-bk-empty h3 { font-size: 18px; font-weight: 700; color: #334155; margin: 0; }
.sfc-bk-empty p { font-size: 14px; color: #64748b; margin: 0; max-width: 400px; }
.sfc-bk-empty__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 24px; border-radius: 10px;
    background: #4f46e5; color: #fff; font-size: 14px;
    font-weight: 600; text-decoration: none;
    transition: background 0.2s;
}
.sfc-bk-empty__btn:hover { background: #4338ca; color: #fff; text-decoration: none; }

/* Pagination */
.sfc-bk-pagination {
    display: flex; justify-content: center; gap: 6px;
    margin-top: 28px;
}
.sfc-bk-pagination a, .sfc-bk-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border-radius: 8px; font-size: 13px; font-weight: 600;
    text-decoration: none; transition: all 0.15s;
}
.sfc-bk-pagination a { color: #334155; background: #f8fafc; border: 1px solid #e2e8f0; }
.sfc-bk-pagination a:hover { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.sfc-bk-pagination .current { background: #4f46e5; color: #fff; border: 1px solid #4f46e5; }

/* Load More */
.sfc-bk-loadmore-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin-top: 28px;
}
.sfc-bk-btn--loadmore {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 28px; font-size: 14px; font-weight: 600;
    color: #4f46e5; background: #eef2ff; border: 1.5px solid #c7d2fe;
    border-radius: 10px; cursor: pointer; transition: all 0.15s;
}
.sfc-bk-btn--loadmore:hover { background: #e0e7ff; border-color: #a5b4fc; }
.sfc-bk-btn--loadmore:disabled { opacity: 0.6; cursor: wait; }
.sfc-bk-loadmore-info { font-size: 12px; color: #94a3b8; }
@keyframes sfc-spin { to { transform: rotate(360deg); } }
.sfc-spin { animation: sfc-spin 0.8s linear infinite; }

/* ══════════════════════════════════════════════════════════
   PROFILE TAB
   ══════════════════════════════════════════════════════════ */
.sfc-profile {
    max-width: 640px;
    margin: 0 auto;
}
.sfc-profile__header {
    display: flex; align-items: center; gap: 20px;
    margin-bottom: 32px; padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}
.sfc-profile__avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; flex-shrink: 0;
    overflow: hidden;
}
.sfc-profile__avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.sfc-profile__info h2 {
    font-size: 20px; font-weight: 700; color: #0f172a; margin: 0 0 2px;
}
.sfc-profile__info p {
    font-size: 13px; color: #64748b; margin: 0;
}

.sfc-profile__form { display: flex; flex-direction: column; gap: 20px; }
.sfc-profile__row { display: flex; gap: 16px; }
.sfc-profile__row > .sfc-profile__field { flex: 1; }
.sfc-profile__field { display: flex; flex-direction: column; gap: 6px; }
.sfc-profile__label {
    font-size: 13px; font-weight: 600; color: #334155;
}
.sfc-profile__input {
    padding: 10px 14px; border: 1px solid #e2e8f0;
    border-radius: 10px; font-size: 14px; color: #1e293b;
    background: #fff; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.sfc-profile__input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.06);
}
.sfc-profile__input:disabled {
    background: #f8fafc; color: #94a3b8; cursor: not-allowed;
}
.sfc-profile__hint {
    font-size: 11px; color: #94a3b8;
}

.sfc-profile__divider {
    border: none; border-top: 1px solid #f1f5f9; margin: 8px 0;
}

.sfc-profile__actions {
    display: flex; align-items: center; gap: 12px; padding-top: 8px;
}
.sfc-profile__save {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 28px; border: none; border-radius: 10px;
    background: #4f46e5; color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.2s; font-family: inherit;
}
.sfc-profile__save:hover { background: #4338ca; }
.sfc-profile__save:disabled { opacity: 0.6; cursor: not-allowed; }

.sfc-profile__msg {
    font-size: 13px; font-weight: 500;
    padding: 8px 14px; border-radius: 8px; display: none;
}
.sfc-profile__msg--success { display: block; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.sfc-profile__msg--error { display: block; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ── Section titles ── */
.sfc-profile__section-title {
    font-size: 15px; font-weight: 700; color: #0f172a;
    margin: 0 0 16px; display: flex; align-items: center;
}

/* ── Level Card ── */
.sfc-profile__level-card {
    display: flex; align-items: center; justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 16px;
    padding: 24px; margin-bottom: 28px; gap: 24px;
    flex-wrap: wrap;
}
.sfc-profile__level-left {
    display: flex; align-items: center; gap: 16px;
}
.sfc-profile__level-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    min-width: 180px;
}
.sfc-profile__level-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 14px 4px 10px; border-radius: 20px;
    background: var(--level-color, #64748b); color: #fff;
    font-size: 13px; font-weight: 700;
}
.sfc-profile__level-num { font-size: 12px; opacity: 0.85; }
.sfc-profile__level-name { font-size: 13px; }
.sfc-profile__xp { text-align: right; }
.sfc-profile__xp-text { font-size: 16px; font-weight: 700; color: #0f172a; }
.sfc-profile__xp-next { font-size: 11px; color: #94a3b8; display: block; }
.sfc-profile__progress {
    width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden;
}
.sfc-profile__progress-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

/* ── Badges ── */
.sfc-profile__badges { margin-bottom: 32px; }
.sfc-profile__all-badges { margin-bottom: 24px; }
.sfc-profile__badges-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.sfc-profile__badge {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 14px 8px 12px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    text-align: center; transition: border-color 0.2s, box-shadow 0.2s;
}
.sfc-profile__badge:hover {
    border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sfc-profile__badge--locked {
    opacity: 0.75; filter: grayscale(1);
}
.sfc-profile__badge-icon {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: #f8fafc; border-radius: 10px; color: #64748b;
}
.sfc-profile__badge--locked .sfc-profile__badge-icon { background: #f1f5f9; color: #94a3b8; }
.sfc-profile__badge-name {
    font-size: 11px; font-weight: 700; color: #334155; line-height: 1.2;
}
.sfc-profile__badge-time {
    font-size: 10px; color: #94a3b8; line-height: 1.2;
}

/* ── 2FA ── */
.sfc-profile__2fa { margin-top: 4px; }
.sfc-2fa-status {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-radius: 12px;
    margin-top: 8px;
}
.sfc-2fa-status--on { background: #f0fdf4; border: 1px solid #bbf7d0; }
.sfc-2fa-status--off { background: #f8fafc; border: 1px solid #e2e8f0; }
.sfc-2fa-status__icon { flex-shrink: 0; }
.sfc-2fa-enabled-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 12px; margin-bottom: 16px;
}
.sfc-2fa-backup-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.sfc-2fa-backup-grid code {
    display: block; text-align: center; padding: 8px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
    font-size: 13px; font-family: monospace; color: #334155; letter-spacing: 1px;
}

@media (max-width: 768px) {
    .sfc-profile__level-card { flex-direction: column; align-items: flex-start; }
    .sfc-profile__level-right { align-items: flex-start; width: 100%; }
    .sfc-profile__badges-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .sfc-2fa-backup-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════
   MY TOOLS EMBED
   ══════════════════════════════════════════════════════════ */
.sfc-dash-panel--tools .sfc-mt-header { margin-top: 0; }

/* ══════════════════════════════════════════════════════════
   LOGIN PROMPT
   ══════════════════════════════════════════════════════════ */
.sfc-dash-login {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; padding: 80px 20px; text-align: center;
}
.sfc-dash-login h1 { font-size: 24px; font-weight: 700; color: #0f172a; margin: 0; }
.sfc-dash-login p { font-size: 15px; color: #64748b; margin: 0; max-width: 420px; }
.sfc-dash-login__actions { display: flex; gap: 12px; margin-top: 8px; }
.sfc-dash-login__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 28px; border-radius: 10px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    transition: all 0.2s;
}
.sfc-dash-login__btn--primary { background: #4f46e5; color: #fff; }
.sfc-dash-login__btn--primary:hover { background: #4338ca; color: #fff; text-decoration: none; }
.sfc-dash-login__btn--ghost { background: #f8fafc; color: #334155; border: 1px solid #e2e8f0; }
.sfc-dash-login__btn--ghost:hover { background: #f1f5f9; text-decoration: none; color: #334155; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .sfc-bk-grid { grid-template-columns: repeat(3, 1fr); }
    .sfc-bk-grid--pill { grid-template-columns: repeat(2, 1fr); }
    .sfc-bk-grid--minimal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .sfc-bk-grid { grid-template-columns: repeat(2, 1fr); }
    .sfc-bk-grid--pill { grid-template-columns: 1fr; }
    .sfc-bk-grid--list { grid-template-columns: 1fr; }
    .sfc-bk-grid--minimal { grid-template-columns: repeat(2, 1fr); }
    .sfc-bk-toolbar { flex-direction: column; align-items: stretch; }
    .sfc-bk-toolbar__left { flex-direction: column; }
    .sfc-bk-toolbar__right { justify-content: flex-start; flex-wrap: wrap; }
    .sfc-bk-search { max-width: 100%; }
    .sfc-dash-tabs { gap: 0; }
    .sfc-dash-tab { padding: 12px 16px; font-size: 13px; }
    .sfc-profile__row { flex-direction: column; gap: 20px; }
}
@media (max-width: 480px) {
    .sfc-bk-grid { grid-template-columns: 1fr; }
    .sfc-bk-grid--minimal { grid-template-columns: 1fr; }
    .sfc-dash-tab span:not(.sfc-dash-tab__badge) { display: none; }
    .sfc-dash-tab { padding: 12px 14px; }
}

/* ── Toast notification ── */
.sfc-dash-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    padding: 12px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 600; color: #fff;
    background: #0f172a; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    z-index: 9999; opacity: 0; transition: opacity 0.3s;
    pointer-events: none;
}
.sfc-dash-toast.visible { opacity: 1; }
.sfc-dash-toast--success { background: #059669; }
.sfc-dash-toast--error { background: #dc2626; }