.composition-hero{
    padding:92px 22px 76px;
    background:linear-gradient(155deg,#eaf2ee,#f8f1e5);
    text-align:center;
    position:relative;
    overflow:hidden;
}

.composition-hero::after{
    content:"文";
    position:absolute;
    right:5%;
    bottom:-110px;
    font-size:330px;
    color:rgba(49,95,85,.045);
    font-weight:700;
    line-height:1;
    pointer-events:none;
}

.composition-hero-inner{
    max-width:860px;
    margin:auto;
    position:relative;
    z-index:2;
}

.composition-hero h1{
    font-size:clamp(40px,6vw,68px);
    line-height:1.35;
    margin:15px 0;
}

.composition-hero p{
    font-size:17px;
    color:var(--muted);
    line-height:2;
}

.composition-feature-pills{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px;
}

.composition-feature-pills span{
    padding:7px 14px;
    background:rgba(255,255,255,.8);
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--jade);
    font-size:13px;
}

.composition-shell{
    max-width:1180px;
    margin:55px auto 90px;
    padding:0 22px;
}

.composition-tabs{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.composition-tabs button{
    border:1px solid var(--line);
    background:#fff;
    padding:11px 20px;
    border-radius:999px;
    color:var(--muted);
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.composition-tabs button:hover{
    color:var(--jade);
    border-color:var(--jade);
    transform:translateY(-1px);
}

.composition-tabs button.is-active{
    background:var(--jade);
    border-color:var(--jade);
    color:#fff;
}

.composition-workspace{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.composition-panel{
    display:none;
    padding:38px;
}

.composition-panel.is-active{
    display:block;
}

.composition-panel-heading{
    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:30px;
}

.composition-panel-heading h2{
    margin:0;
    font-size:29px;
}

.composition-panel-heading p{
    margin:4px 0 0;
    color:var(--muted);
}

.composition-step{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:16px;
    background:var(--red);
    color:#fff;
    font-size:24px;
    font-weight:700;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.18),
        0 8px 20px rgba(165,74,62,.15);
}

.composition-form{
    display:grid;
    gap:18px;
}

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

.composition-form label{
    display:block;
    color:var(--muted);
    font-size:14px;
}

.composition-form input,
.composition-form select,
.composition-form textarea{
    width:100%;
    margin-top:7px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--ink);
    outline:none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.composition-form textarea{
    resize:vertical;
    line-height:1.8;
}

.composition-form input:focus,
.composition-form select:focus,
.composition-form textarea:focus{
    border-color:var(--jade);
    box-shadow:0 0 0 3px rgba(49,95,85,.1);
}

.composition-submit{
    min-height:50px;
    font-weight:600;
}

.composition-upload-box{
    min-height:310px;
    border:2px dashed #cfc6b8 !important;
    border-radius:18px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    background:var(--paper);
    cursor:pointer;
    padding:28px;
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.composition-upload-box:hover{
    border-color:var(--jade) !important;
    background:#f0f5f2;
    transform:translateY(-2px);
}

.composition-upload-box input{
    display:none;
}

.composition-upload-icon{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:var(--jade);
    color:#fff;
    font-size:28px;
    margin-bottom:14px;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.15),
        0 10px 24px rgba(49,95,85,.16);
}

.composition-upload-box strong{
    font-size:20px;
    color:var(--ink);
}

.composition-upload-box small{
    margin-top:7px;
    color:var(--muted);
}

.composition-preview{
    max-width:100%;
    max-height:360px;
    margin-top:18px;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    object-fit:contain;
}

/*
 * hidden 属性修复。
 *
 * 必须放在组件 display 规则之后，
 * 并使用 !important，防止 display:flex 覆盖 hidden。
 */
.composition-progress[hidden],
.composition-result[hidden],
.composition-preview[hidden]{
    display:none !important;
}

/*
 * 只有移除 hidden 后才显示进度面板。
 */
.composition-progress:not([hidden]){
    display:flex;
}

.composition-result:not([hidden]){
    display:block;
}

.composition-preview:not([hidden]){
    display:block;
}

/* 作文处理进度 */
.composition-progress{
    margin-top:25px;
    padding:28px;
    background:linear-gradient(135deg,#edf3ef,#f7f1e6);
    border:1px solid var(--line);
    border-radius:20px;
    gap:24px;
    align-items:center;
    box-shadow:0 10px 28px rgba(39,52,47,.06);
}

.composition-progress-orbit{
    width:70px;
    height:70px;
    position:relative;
    flex:0 0 auto;
}

.composition-progress-orbit::before{
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(49,95,85,.16);
    border-radius:50%;
}

.composition-progress-orbit span{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--jade);
    animation:compositionOrbit 1.2s infinite ease-in-out;
}

.composition-progress-orbit span:nth-child(1){
    left:29px;
    top:0;
}

.composition-progress-orbit span:nth-child(2){
    right:4px;
    bottom:12px;
    animation-delay:.2s;
}

.composition-progress-orbit span:nth-child(3){
    left:4px;
    bottom:12px;
    animation-delay:.4s;
}

@keyframes compositionOrbit{
    0%,
    100%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(.5);
        opacity:.4;
    }
}

.composition-progress>div:last-child{
    flex:1;
    min-width:0;
}

.composition-progress strong{
    font-size:21px;
}

.composition-progress p{
    margin:4px 0 12px;
    color:var(--muted);
}

.composition-progress-track{
    height:8px;
    background:rgba(49,95,85,.12);
    border-radius:999px;
    overflow:hidden;
}

.composition-progress-track span{
    display:block;
    height:100%;
    width:5%;
    background:linear-gradient(
        90deg,
        var(--jade),
        var(--jade-2)
    );
    border-radius:999px;
    transition:width .35s ease;
}

.composition-progress small{
    display:block;
    margin-top:7px;
    color:var(--jade);
}

/* 作文生成结果 */
.composition-result{
    margin-top:28px;
}

.composition-result-header{
    padding:30px;
    text-align:center;
    background:linear-gradient(135deg,#edf3ef,#f7f1e6);
    border:1px solid var(--line);
    border-radius:20px;
    margin-bottom:20px;
}

.composition-result-header span{
    color:var(--red);
    letter-spacing:.2em;
}

.composition-result-header h2{
    font-size:36px;
    margin:8px;
}

.composition-result-header p{
    color:var(--muted);
}

.composition-result-grid{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
    gap:20px;
}

.composition-paper,
.composition-result-block{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 8px 24px rgba(39,52,47,.05);
}

.composition-paper{
    padding:36px;
    font-size:18px;
    line-height:2.15;
    white-space:normal;
    overflow-wrap:anywhere;
}

.composition-paper p{
    margin:0 0 1.35em;
    text-indent:2em;
}

.composition-paper p:last-child{
    margin-bottom:0;
}

.composition-paper.compact{
    padding:24px;
    font-size:16px;
}

.composition-result-block{
    padding:24px;
    margin-bottom:18px;
}

.composition-result-block h3{
    margin-top:0;
}

.composition-result-block li{
    margin:7px 0;
}

.composition-poetry-list{
    display:grid;
    gap:12px;
}

.composition-poetry-list article{
    padding:16px;
    background:var(--paper);
    border-left:3px solid var(--red);
    border-radius:0 12px 12px 0;
}

.composition-poetry-list blockquote{
    margin:0;
    font-size:18px;
}

.composition-poetry-list p,
.composition-poetry-list small{
    color:var(--muted);
}

.composition-change-list{
    display:grid;
    gap:14px;
}

.composition-change-list article,
.composition-issue{
    padding:16px;
    background:var(--paper);
    border-radius:12px;
}

.composition-score-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
    margin-bottom:20px;
}

.composition-score-grid div{
    padding:22px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    text-align:center;
}

.composition-score-grid strong,
.composition-score-grid span{
    display:block;
}

.composition-score-grid strong{
    font-size:27px;
    color:var(--red);
}

.composition-result-two-column{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.score-header h2 strong{
    font-size:54px;
    color:var(--red);
}

.composition-result-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
}

.composition-result-actions button{
    border:1px solid var(--jade);
    background:#fff;
    color:var(--jade);
    padding:10px 18px;
    border-radius:999px;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.composition-result-actions button:hover{
    background:var(--jade);
    color:#fff;
    transform:translateY(-1px);
}

.composition-error-card{
    padding:28px;
    border:1px solid #e2b7b2;
    background:#fff3f1;
    border-radius:18px;
    color:#8f3f35;
}

/* 首页作文栏目 */
.composition-home-section{
    width:calc(100% - 44px);
    max-width:1180px;
    margin:90px auto;
    padding:54px;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(390px,.9fr);
    gap:52px;
    background:linear-gradient(135deg,#f4eadf,#eaf2ee);
    border:1px solid var(--line);
    border-radius:28px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
}

.composition-home-section::before{
    content:"作";
    position:absolute;
    right:-20px;
    bottom:-100px;
    font-size:300px;
    color:rgba(49,95,85,.05);
    font-weight:700;
    line-height:1;
    pointer-events:none;
}

.composition-home-copy,
.composition-home-actions{
    position:relative;
    z-index:2;
}

.composition-home-copy h2{
    font-size:clamp(32px,4vw,44px);
    margin:8px 0 18px;
}

.composition-home-copy p{
    color:var(--muted);
    line-height:2;
}

.composition-home-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.composition-home-actions a{
    padding:24px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--line);
    border-radius:17px;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.composition-home-actions a:hover{
    transform:translateY(-3px);
    border-color:rgba(49,95,85,.4);
    box-shadow:0 14px 30px rgba(39,52,47,.09);
}

.composition-home-actions strong,
.composition-home-actions small{
    display:block;
}

.composition-home-actions strong{
    font-size:19px;
}

.composition-home-actions small{
    color:var(--muted);
    margin-top:5px;
}

.composition-home-actions span{
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    background:var(--jade);
    color:#fff;
    border-radius:12px;
    margin-bottom:12px;
    font-weight:700;
}

.composition-home-cta{
    display:inline-flex;
    margin-top:20px;
}

.quick-entry.is-seven{
    grid-template-columns:repeat(7,1fr);
}

@media(max-width:980px){
    .composition-result-grid,
    .composition-home-section{
        grid-template-columns:1fr;
    }

    .composition-score-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .composition-result-two-column{
        grid-template-columns:1fr;
    }

    .quick-entry.is-seven{
        grid-template-columns:repeat(4,1fr);
    }
}

@media(max-width:620px){
    .composition-hero{
        padding:60px 18px;
    }

    .composition-hero h1{
        font-size:38px;
    }

    .composition-shell{
        padding:0 15px;
    }

    .composition-panel{
        padding:23px 18px;
    }

    .composition-form-grid{
        grid-template-columns:1fr;
    }

    .composition-panel-heading{
        align-items:flex-start;
    }

    .composition-panel-heading h2{
        font-size:24px;
    }

    .composition-progress:not([hidden]){
        align-items:flex-start;
        gap:16px;
        padding:22px 18px;
    }

    .composition-progress-orbit{
        width:54px;
        height:54px;
    }

    .composition-progress-orbit span:nth-child(1){
        left:21px;
    }

    .composition-progress-orbit span:nth-child(2){
        right:1px;
        bottom:8px;
    }

    .composition-progress-orbit span:nth-child(3){
        left:1px;
        bottom:8px;
    }

    .composition-result-grid{
        grid-template-columns:1fr;
    }

    .composition-paper{
        padding:23px;
        font-size:16px;
    }

    .composition-score-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .composition-home-section{
        width:calc(100% - 30px);
        margin:48px auto;
        padding:28px 20px;
        grid-template-columns:1fr;
        border-radius:20px;
    }

    .composition-home-actions{
        grid-template-columns:1fr 1fr;
    }

    .quick-entry.is-seven{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:400px){
    .composition-home-actions{
        grid-template-columns:1fr;
    }

    .composition-progress:not([hidden]){
        flex-direction:column;
    }
}

.composition-poetry-used-text{
    margin:10px 0 4px;
    padding:8px 11px;
    color:var(--jade);
    background:rgba(49,95,85,.07);
    border-radius:8px;
    font-size:14px;
    line-height:1.7;
}