.writing-shell {
    --writing-accent: #7c5ce6;
    --writing-accent-dark: #5b3cc4;
    --writing-accent-soft: #f6f3ff;
    --writing-accent-border: #ddd6fe;
    --writing-page-bg: #fff;
    --writing-surface: #fbfaff;
    --writing-surface-strong: #f0ebff;
    --writing-card-bg: #fff;
    --writing-heading: #4f35a7;
    --writing-copy: #5c5470;
    --writing-muted: #746b8f;
    background: var(--writing-page-bg);
    color: var(--writing-copy);
    padding: 18px 0 42px;
}

.writing-shell a {
    text-decoration: none;
}

.writing-hero {
    background: linear-gradient(135deg, var(--writing-surface), var(--writing-surface-strong));
    border: 1px solid var(--writing-accent-border);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(60, 46, 90, .09);
    margin-bottom: 18px;
    overflow: hidden;
    padding: 20px;
    position: relative;
}

.writing-hero::after {
    background: radial-gradient(circle, rgba(124, 92, 230, .14), transparent 64%);
    content: "";
    height: 220px;
    pointer-events: none;
    position: absolute;
    right: -72px;
    top: -86px;
    width: 220px;
}

.writing-breadcrumb {
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.writing-breadcrumb-list {
    background: transparent;
    font-size: 13px;
    margin: 0;
    padding: 0;
}

.writing-breadcrumb-list .breadcrumb-item,
.writing-breadcrumb-list .breadcrumb-item::before,
.writing-breadcrumb-list .breadcrumb-item.active {
    color: var(--writing-muted);
}

.writing-breadcrumb-list a {
    color: var(--writing-accent-dark);
    font-weight: 800;
}

.writing-header {
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.writing-header h1 {
    color: var(--writing-heading);
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 8px 0 10px;
}

.writing-header p {
    color: var(--writing-copy);
    font-size: 1rem;
    line-height: 1.58;
    margin: 0;
    max-width: 900px;
}

.writing-hero-chips,
.writing-hero-actions,
.writing-hero-support-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.writing-hero-chips {
    margin-top: 14px;
}

.writing-hero-chip {
    align-items: center;
    background: var(--writing-card-bg);
    border: 1px solid var(--writing-accent-border);
    border-radius: 999px;
    color: var(--writing-accent-dark);
    display: inline-flex;
    font-size: .88rem;
    font-weight: 850;
    gap: 7px;
    padding: 7px 11px;
}

.writing-hero-actions {
    gap: 10px;
    margin-top: 16px;
}

.writing-hero-actions .btn,
.writing-filter .btn,
.writing-prompt-card .btn {
    border-radius: 999px;
    font-weight: 900;
}

.writing-shell .btn-primary {
    background: var(--writing-accent);
    border-color: var(--writing-accent);
    box-shadow: 0 10px 22px rgba(124, 92, 230, .18);
    color: #fff;
}

.writing-shell .btn-primary:hover,
.writing-shell .btn-primary:focus {
    background: var(--writing-accent-dark);
    border-color: var(--writing-accent-dark);
    color: #fff;
}

.writing-shell .btn-outline-primary {
    background: var(--writing-card-bg);
    border-color: var(--writing-accent);
    color: var(--writing-accent-dark);
}

.writing-shell .btn-outline-primary:hover,
.writing-shell .btn-outline-primary:focus {
    background: var(--writing-accent-dark);
    border-color: var(--writing-accent-dark);
    color: #fff;
}

.writing-hero-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding: 10px 15px;
}

.writing-hero-support-links {
    gap: 10px 14px;
    margin-top: 11px;
}

.writing-hero-support-links a {
    color: var(--writing-accent-dark);
    font-size: .92rem;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.writing-library-panel {
    background: linear-gradient(135deg, var(--writing-surface), var(--writing-surface-strong));
    border: 1px solid var(--writing-accent-border);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(60, 46, 90, .08);
    margin-bottom: 18px;
    padding: 16px;
}

.writing-library-toolbar {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.writing-library-eyebrow,
.writing-library-stat {
    background: var(--writing-card-bg);
    border: 1px solid var(--writing-accent-border);
    border-radius: 999px;
    color: var(--writing-accent-dark);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1;
    padding: 7px 10px;
}

.writing-library-eyebrow {
    margin-bottom: 6px;
    text-transform: uppercase;
}

.writing-library-heading {
    color: var(--writing-heading);
    font-size: 1.26rem;
    font-weight: 900;
    line-height: 1.25;
    margin: 0;
}

.writing-library-subtitle {
    color: var(--writing-muted);
    margin: 5px 0 0;
}

.writing-library-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.writing-library-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.writing-library-tabs {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.writing-library-chip {
    align-items: center;
    background: var(--skill-bg);
    border: 1px solid var(--skill-border);
    border-radius: 999px;
    box-shadow: 0 6px 14px var(--skill-shadow);
    color: var(--skill-color);
    display: inline-flex;
    font-size: .94rem;
    font-weight: 850;
    gap: 7px;
    line-height: 1;
    padding: 11px 15px;
}

.writing-library-chip.skill-speaking {
    --skill-bg: #eff6ff;
    --skill-border: #bfdbfe;
    --skill-color: #2563eb;
    --skill-shadow: rgba(37, 99, 235, .1);
}

.writing-library-chip.skill-reading {
    --skill-bg: #ecfdf5;
    --skill-border: #bbf7d0;
    --skill-color: #15803d;
    --skill-shadow: rgba(21, 128, 61, .1);
}

.writing-library-chip.skill-listening {
    --skill-bg: #fff7ed;
    --skill-border: #fed7aa;
    --skill-color: #c2410c;
    --skill-shadow: rgba(194, 65, 12, .1);
}

.writing-library-chip.skill-writing {
    --skill-bg: var(--writing-accent-soft);
    --skill-border: var(--writing-accent-border);
    --skill-color: var(--writing-accent);
    --skill-shadow: rgba(124, 92, 230, .12);
}

.writing-library-chip.skill-full {
    --skill-bg: #dc2626;
    --skill-border: #b91c1c;
    --skill-color: #dc2626;
    --skill-shadow: rgba(220, 38, 38, .22);
    color: #fff;
}

.writing-library-chip:not(.skill-full):hover,
.writing-library-chip:not(.skill-full).active {
    background: var(--skill-color);
    border-color: var(--skill-color);
    color: #fff;
}

.writing-library-chip.skill-full:hover,
.writing-library-chip.skill-full.active {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.writing-filter {
    background: linear-gradient(135deg, var(--writing-surface), #fff);
    border: 1px solid var(--writing-accent-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(60, 46, 90, .07);
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px;
}

.writing-filter.is-prompt-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.writing-filter.is-full-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.writing-filter .form-select {
    background-color: var(--writing-card-bg);
    border-color: var(--writing-accent-border);
    color: var(--writing-copy);
    font-weight: 750;
    min-height: 42px;
}

.writing-filter .form-select:focus {
    border-color: var(--writing-accent);
    box-shadow: 0 0 0 .18rem rgba(221, 214, 254, .58);
}

.writing-locked-filter {
    align-items: center;
    background: var(--writing-accent-soft);
    border: 1px solid var(--writing-accent-border);
    border-radius: .375rem;
    color: var(--writing-accent-dark);
    display: flex;
    font-weight: 850;
    min-height: 42px;
    padding: 6px 12px;
}

.writing-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.writing-category-list {
    display: grid;
    gap: 22px;
}

.writing-category-section {
    background: linear-gradient(135deg, var(--writing-surface), #fff);
    border: 1px solid var(--writing-accent-border);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(60, 46, 90, .06);
    padding: 16px;
}

.writing-category-head {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.writing-category-kicker,
.writing-category-count {
    background: var(--writing-card-bg);
    border: 1px solid var(--writing-accent-border);
    border-radius: 999px;
    color: var(--writing-accent-dark);
    display: inline-flex;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    padding: 7px 10px;
}

.writing-category-kicker {
    margin-bottom: 7px;
    text-transform: uppercase;
}

.writing-category-title {
    color: var(--writing-heading);
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
}

.writing-category-description {
    color: #3f3a4f;
    font-size: .9rem;
    font-weight: 650;
    line-height: 1.45;
    margin: 7px 0 0;
}

.writing-category-count {
    flex: 0 0 auto;
}

.writing-prompt-card,
.writing-empty {
    background: linear-gradient(135deg, var(--writing-card-bg) 0%, #fff 56%, var(--writing-accent-soft) 100%);
    border: 2px solid rgba(60, 46, 90, .08);
    border-radius: 8px;
    box-shadow: 0 13px 28px rgba(60, 46, 90, .08);
    color: var(--writing-copy);
    overflow: hidden;
    padding: 20px;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.writing-prompt-card::before,
.writing-empty::before {
    background: var(--writing-accent);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.writing-prompt-card:hover {
    border-color: var(--writing-accent);
    box-shadow: 0 18px 34px rgba(60, 46, 90, .14);
    transform: translateY(-3px);
}

.writing-prompt-card h2 {
    color: var(--writing-heading);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 12px 0 10px;
}

.writing-prompt-card p,
.writing-empty span,
.writing-task-mini-list span {
    color: var(--writing-muted);
    line-height: 1.5;
}

.writing-card-meta,
.writing-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.writing-card-meta span,
.writing-card-stats span {
    background: var(--writing-card-bg);
    border: 1px solid var(--writing-accent-border);
    border-radius: 999px;
    color: var(--writing-accent-dark);
    font-size: 12px;
    font-weight: 800;
    padding: 5px 9px;
}

.writing-card-stats {
    margin: 16px 0;
}

.writing-task-options {
    margin-top: 12px;
}

.writing-task-options summary {
    align-items: center;
    background: var(--writing-card-bg);
    border: 1px solid var(--writing-accent-border);
    border-radius: 999px;
    color: var(--writing-accent-dark);
    cursor: pointer;
    display: inline-flex;
    font-size: .88rem;
    font-weight: 900;
    gap: 7px;
    list-style: none;
    padding: 9px 13px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.writing-task-options summary::-webkit-details-marker {
    display: none;
}

.writing-task-options summary:hover,
.writing-task-options[open] summary {
    background: var(--writing-accent-soft);
    border-color: var(--writing-accent);
    color: var(--writing-accent-dark);
}

.writing-task-mini-list {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
}

.writing-task-mini-list li {
    list-style: none;
}

.writing-task-mini-list a {
    background: var(--writing-card-bg);
    border: 1px solid var(--writing-accent-border);
    border-radius: 8px;
    color: var(--writing-copy);
    display: block;
    padding: 10px 12px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.writing-task-mini-list a:hover {
    border-color: var(--writing-accent);
    box-shadow: 0 10px 20px rgba(124, 92, 230, .1);
    color: var(--writing-copy);
    transform: translateY(-1px);
}

.writing-task-mini-list strong,
.writing-task-mini-list span,
.writing-task-mini-list em {
    display: block;
}

.writing-task-mini-list strong {
    color: var(--writing-heading);
}

.writing-task-mini-list em {
    color: var(--writing-accent-dark);
    font-size: .78rem;
    font-style: normal;
    font-weight: 850;
    margin-top: 4px;
}

.writing-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.writing-card-actions .btn {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.writing-card-practice-label {
    color: var(--writing-heading);
    display: block;
    font-size: .82rem;
    font-weight: 900;
    margin: 12px 0 8px;
    text-transform: uppercase;
}

.writing-category-sidebar {
    align-self: start;
    max-height: calc(100vh - 36px);
    min-width: 0;
    overflow-y: auto;
    position: sticky;
    top: 18px;
}

.writing-category-filter {
    background: linear-gradient(180deg, #fff, var(--writing-accent-soft));
    border: 1px solid var(--writing-accent-border);
    border-top: 4px solid var(--writing-accent);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(91, 60, 196, .1);
    padding: 13px 11px 12px;
}

.writing-filter-label {
    align-items: center;
    color: var(--writing-heading);
    display: flex;
    font-size: .88rem;
    font-weight: 900;
    gap: 7px;
    letter-spacing: .02em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.writing-filter-label i {
    color: var(--writing-accent);
    font-size: 1rem;
}

.writing-filter-helper {
    color: var(--writing-muted);
    font-size: .78rem;
    line-height: 1.35;
    margin: 0 0 10px;
}

.writing-category-tree {
    display: grid;
    gap: 2px;
}

.writing-parent-category {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    color: var(--writing-muted);
    display: flex;
    font-size: .86rem;
    font-weight: 750;
    gap: 8px;
    line-height: 1.25;
    min-height: 0;
    padding: 8px 8px 8px 10px;
    width: 100%;
}

.writing-parent-category i {
    color: var(--writing-accent);
    flex: 0 0 auto;
    font-size: .82rem;
}

.writing-parent-category span {
    min-width: 0;
}

.writing-parent-category:hover {
    background: #f3efff;
    border-left-color: #b9a9f5;
    color: var(--writing-accent-dark);
}

.writing-parent-category.active {
    background: linear-gradient(90deg, #eee8ff, transparent);
    border-left-color: var(--writing-accent);
    color: var(--writing-heading);
    font-weight: 900;
}

.writing-parent-category.active i {
    color: #d97706;
}

.writing-category-node {
    min-width: 0;
}

.writing-category-node.is-active {
    background: linear-gradient(90deg, rgba(238, 232, 255, .72), transparent);
    border-radius: 7px;
}

.writing-subcategory-list {
    border-left: 1px solid #cfc4f4;
    display: grid;
    gap: 8px;
    margin: 2px 0 8px 15px;
    padding: 5px 4px 3px 11px;
}

.writing-subcategory-group {
    display: grid;
    gap: 5px;
}

.writing-subcategory-label {
    color: var(--writing-muted);
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .035em;
    line-height: 1.2;
    text-transform: uppercase;
}

.writing-subcategory-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.writing-subcategory-link {
    align-items: center;
    background: #fff;
    border: 1px solid #ddd6f7;
    border-radius: 999px;
    color: #625a79;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 800;
    gap: 5px;
    line-height: 1.2;
    min-height: 28px;
    padding: 5px 9px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.writing-subcategory-link:hover {
    background: #f3efff;
    border-color: #b9a9f5;
    color: var(--writing-accent-dark);
}

.writing-subcategory-link.active {
    background: var(--writing-accent);
    border-color: var(--writing-accent);
    color: #fff;
}

.writing-subcategory-link:focus-visible,
.writing-parent-category:focus-visible {
    box-shadow: 0 0 0 3px rgba(124, 92, 230, .2);
    outline: 0;
}

.writing-subcategory-month {
    border-radius: 7px;
}

.writing-library-layout {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
}

.writing-ad-rail {
    min-width: 0;
    position: sticky;
    top: 18px;
}

.writing-library-results {
    min-width: 0;
}

.writing-library-layout .writing-category-list {
    gap: 18px;
}

.writing-library-layout .writing-category-section {
    --category-accent: #0f766e;
    --category-soft: #ccfbf1;
    --category-surface: #f0fdfa;
    background: #fff;
    border: 1px solid var(--category-soft);
    border-left: 6px solid var(--category-accent);
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06);
    overflow: hidden;
    padding: 0;
}

.writing-library-layout .writing-category-section:nth-of-type(2n) {
    --category-accent: #b45309;
    --category-soft: #fde68a;
    --category-surface: #fffbeb;
}

.writing-library-layout .writing-category-section:nth-of-type(3n) {
    --category-accent: #2563eb;
    --category-soft: #bfdbfe;
    --category-surface: #eff6ff;
}

.writing-library-layout .writing-category-section:nth-of-type(4n) {
    --category-accent: #be123c;
    --category-soft: #fecdd3;
    --category-surface: #fff1f2;
}

.writing-library-layout .writing-category-head {
    align-items: center;
    background: linear-gradient(135deg, var(--category-surface), #fff);
    border-bottom: 1px solid var(--category-soft);
    margin-bottom: 0;
    padding: 14px 16px;
}

.writing-library-layout .writing-category-kicker,
.writing-library-layout .writing-category-count {
    border-color: var(--category-soft);
    color: var(--category-accent);
}

.writing-library-layout .writing-category-kicker {
    align-items: center;
    background: #fff;
    gap: 6px;
}

.writing-library-layout .writing-category-title {
    color: var(--category-accent);
    font-size: 1.2rem;
}

.writing-library-layout .writing-category-count {
    background: var(--category-accent);
    color: #fff;
}

.writing-library-layout .writing-grid {
    gap: 12px;
    padding: 16px;
}

.writing-library-layout .writing-prompt-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
    display: flex;
    flex-direction: column;
    min-height: 214px;
    padding: 14px;
}

.writing-library-layout .writing-prompt-card::before {
    background: var(--category-accent);
    height: 3px;
}

.writing-library-layout .writing-prompt-card:hover {
    border-color: var(--category-accent);
    box-shadow: 0 14px 26px rgba(15, 23, 42, .11);
    transform: translateY(-2px);
}

.writing-library-layout .writing-card-meta,
.writing-library-layout .writing-card-stats {
    gap: 6px;
}

.writing-library-layout .writing-card-meta span,
.writing-library-layout .writing-card-stats span {
    border-color: #e5e7eb;
    color: #475569;
    font-size: 11px;
    padding: 4px 7px;
}

.writing-library-layout .writing-card-meta span:first-child {
    background: var(--category-surface);
    border-color: var(--category-soft);
    color: var(--category-accent);
}

.writing-library-layout .writing-prompt-card h2 {
    color: var(--category-accent);
    display: -webkit-box;
    font-size: 1rem;
    line-height: 1.32;
    margin: 10px 0 6px;
    min-height: 2.64em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.writing-library-layout .writing-prompt-card p {
    display: -webkit-box;
    font-size: .88rem;
    line-height: 1.42;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.writing-library-layout .writing-card-stats {
    margin: 10px 0 0;
}

.writing-library-layout .writing-card-actions {
    margin-top: auto;
    padding-top: 12px;
}

.writing-library-layout .writing-card-actions .btn {
    justify-content: center;
    min-height: 38px;
    width: 100%;
}

.writing-library-layout .writing-task-options {
    margin-top: 8px;
}

.writing-library-layout .writing-task-options summary {
    border-color: #e5e7eb;
    border-radius: 8px;
    font-size: .82rem;
    justify-content: center;
    padding: 8px 10px;
    width: 100%;
}

.writing-group-actions {
    display: flex;
    justify-content: center;
    padding: 4px 16px 16px;
}

.writing-group-actions .btn {
    background: #fff;
    border: 1px solid var(--category-soft);
    border-radius: 999px;
    color: var(--category-accent);
    font-weight: 850;
    padding: 8px 16px;
}

.writing-group-actions .btn:hover {
    background: var(--category-accent);
    color: #fff;
}

@media (max-width: 991.98px) {
    .writing-library-toolbar,
    .writing-category-head,
    .writing-filter.is-prompt-filter,
    .writing-filter.is-full-filter,
    .writing-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .writing-library-stats {
        justify-content: flex-start;
    }

    .writing-category-count {
        justify-self: start;
    }

    .writing-library-layout {
        grid-template-columns: 1fr;
    }

    .writing-ad-rail {
        position: static;
    }

    .writing-category-filter {
        position: static;
    }

    .writing-category-sidebar {
        max-height: none;
        overflow: visible;
        position: static;
    }

    .writing-library-layout .writing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .writing-shell {
        padding: 16px 0 28px;
    }

    .writing-hero,
    .writing-library-panel,
    .writing-filter,
    .writing-prompt-card,
    .writing-empty {
        padding: 14px;
    }

    .writing-hero-actions,
    .writing-library-tabs {
        align-items: stretch;
        flex-direction: column;
    }

    .writing-hero-actions .btn,
    .writing-library-chip,
    .writing-filter .btn {
        justify-content: center;
        width: 100%;
    }

    .writing-library-layout .writing-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }
}