:root{--member-green:#176b49;--member-dark:#102e23;--member-soft:#edf5f0;--member-line:#dfe6e2;--member-muted:#66736c}.header-account{min-height:38px;display:inline-flex;align-items:center;padding:0 13px;border:1px solid var(--line);border-radius:7px;color:var(--green);background:#fff;font-size:13px;font-weight:800;white-space:nowrap}.member-auth-page{min-height:calc(100vh - 82px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);background:#fff}.member-auth-visual{position:relative;overflow:hidden;min-height:720px;padding:72px max(6vw,40px);color:#fff;background:var(--member-dark)}.member-auth-visual .eyebrow{color:#9fc6b5}.member-auth-visual h1{margin:16px 0;font-size:44px;line-height:1.18}.member-auth-visual p{max-width:570px;color:#b7ccc2;font-size:17px}.member-auth-visual img{position:absolute;left:11%;bottom:-4%;width:96%;border:1px solid #ffffff1f;border-radius:7px 0 0 0;box-shadow:0 26px 60px #071a1373}.member-auth-form{width:min(430px,calc(100% - 48px));margin:auto;display:grid;gap:18px}.member-auth-form h2{margin:7px 0;font-size:28px}.member-auth-form>div>p,.auth-switch{color:var(--member-muted)}.member-auth-form label{display:grid;gap:7px;color:#34453d;font-size:13px;font-weight:800}.member-auth-form .form-grid{gap:12px}.auth-switch{text-align:center}.auth-switch a{color:var(--member-green);font-weight:800}.member-center{padding:52px 0 72px;background:#f3f6f4}.member-center-head{display:flex;align-items:center;gap:30px;padding:34px 38px;border:1px solid var(--member-line);border-radius:7px;background:linear-gradient(110deg,#fff 0%,#fff 68%,#edf5ef 68%,#f8edda 100%)}.member-center-head h1{margin:7px 0;font-size:30px}.member-center-head p{color:var(--member-muted)}.member-balance{margin-left:auto;min-width:170px;display:grid;text-align:center}.member-balance span,.member-balance small{color:var(--member-muted);font-size:12px}.member-balance strong{color:var(--member-dark);font-size:42px;line-height:1.15}.member-actions{display:flex;gap:10px;margin-top:15px}.member-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;border:1px solid var(--member-line);border-radius:7px;background:#fff}.member-metrics div{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-right:1px solid var(--member-line)}.member-metrics div:last-child{border:0}.member-metrics span{color:var(--member-muted);font-size:13px}.member-metrics strong{font-size:25px}.member-section{margin-top:22px;border:1px solid var(--member-line);border-radius:7px;background:#fff;overflow:hidden}.member-section-head{display:flex;align-items:flex-end;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--member-line)}.member-section-head h2{margin:0 0 5px;font-size:19px}.member-section-head p{margin:0;color:var(--member-muted);font-size:12px}.member-section-head a{color:var(--member-green);font-weight:800}.member-table{overflow:auto}.member-table table{width:100%;border-collapse:collapse;min-width:620px}.member-table th,.member-table td{padding:13px 16px;border-bottom:1px solid #edf1ef;text-align:left;font-size:13px}.member-table th{color:#75817a;background:#fafbfa;font-size:11px}.member-table tr:last-child td{border-bottom:0}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}.empty-cell{padding:34px!important;color:#8b9690;text-align:center!important}.member-two-columns{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}.code-list{display:grid}.code-list>div{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:15px 20px;border-bottom:1px solid #edf1ef}.code-list>div:last-child{border:0}.code-list small{grid-column:1/-1;color:var(--member-muted)}.state{display:inline-flex;padding:4px 8px;border-radius:12px;color:#5f6b65;background:#edf1ef;font-size:11px}.state-completed,.state-active,.state-paid{color:#17633f;background:#e5f3ea}.state-queued,.state-pending{color:#8a5c0d;background:#fff2d8}.state-processing,.state-storing{color:#285f7a;background:#e8f1f7}.state-failed,.state-cancelled,.state-disabled{color:#9b3737;background:#f9e8e8}
.studio-page{min-height:calc(100vh - 82px);display:grid;grid-template-columns:178px minmax(0,1fr);background:#eef2ef}.studio-nav{padding:22px 12px;display:flex;flex-direction:column;background:#132d23;color:#fff}.studio-nav>div{display:grid;gap:5px}.studio-nav-label{padding:0 10px 12px;color:#8faaa0;font-size:11px}.studio-nav button,.studio-nav>a{min-height:42px;border:0;border-radius:6px;padding:0 11px;color:#b9cbc2;background:transparent;text-align:left;font:inherit;cursor:pointer}.studio-nav button.active,.studio-nav button:hover{color:#154d36;background:#edf7f1;font-weight:800}.studio-nav>a{margin-top:auto;display:flex;align-items:center;text-decoration:none}.studio-workspace{min-width:0}.studio-topbar{height:66px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--member-line);background:#fff}.studio-topbar>div:first-child{display:grid}.studio-topbar span{color:var(--member-muted);font-size:11px}.studio-points{margin-left:auto;display:flex!important;align-items:center;gap:8px}.studio-points strong{font-size:19px}.studio-points a{color:var(--member-green);font-weight:800}.studio-view{display:none;padding:20px}.studio-view.active{display:block}.studio-create-grid{min-height:calc(100vh - 148px);display:grid;grid-template-columns:minmax(0,1fr) 300px;border:1px solid var(--member-line);border-radius:7px;overflow:hidden;background:#fff}.studio-canvas-column{min-width:0;display:grid;grid-template-rows:56px minmax(400px,1fr) auto;background:#e9eeeb}.studio-modebar{display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--member-line);background:#fff}.studio-modebar>span{color:var(--member-muted);font-size:12px}.studio-segments{display:flex;padding:3px;border-radius:6px;background:#edf1ef}.studio-segments button{height:31px;border:0;border-radius:4px;padding:0 13px;color:#66736c;background:transparent}.studio-segments button.active{color:#183d2f;background:#fff;box-shadow:0 1px 5px #1b342923;font-weight:800}.studio-canvas{display:grid;place-items:center;padding:20px}.studio-empty{text-align:center;max-width:430px}.studio-empty>b{width:58px;height:58px;display:grid;place-items:center;margin:auto;border-radius:50%;color:var(--member-green);background:#fff;font-size:28px}.studio-empty h2{margin:14px 0 7px}.studio-empty p{color:var(--member-muted)}.studio-prompt{margin:0 18px 18px;border:1px solid #cbd6d0;border-radius:7px;background:#fff;overflow:hidden;box-shadow:0 8px 24px #24392f12}.studio-prompt>textarea{min-height:100px;border:0;border-radius:0;box-shadow:none;resize:none}.studio-prompt>div:last-child{display:flex;align-items:center;padding:8px 10px;border-top:1px solid #edf1ef}.studio-prompt>div:last-child>span{margin-right:auto;color:#8b9690;font-size:11px}.studio-inspector{padding:18px;display:flex;flex-direction:column;gap:18px;border-left:1px solid var(--member-line);background:#fff}.studio-inspector-title{display:grid;padding-bottom:14px;border-bottom:1px solid var(--member-line)}.studio-inspector-title span{color:var(--member-muted);font-size:11px}.studio-inspector label,.studio-parameters label{display:grid;gap:7px;color:#33453c;font-size:12px;font-weight:800}.studio-parameters{display:grid;gap:18px}.studio-upload{position:relative;padding:14px!important;border:1px dashed #9eb5a9;text-align:center}.studio-upload>input{position:absolute;inset:0;opacity:0;cursor:pointer}.studio-upload>span{color:var(--member-muted);font-weight:400}.studio-upload>div{display:flex;gap:5px;position:relative;z-index:1}.studio-upload img{width:42px;height:42px;border-radius:4px;object-fit:cover}.studio-stepper{height:39px;display:grid;grid-template-columns:40px 1fr 40px;border:1px solid var(--member-line);border-radius:6px}.studio-stepper button{border:0;background:#f2f5f3}.studio-stepper strong{display:grid;place-items:center}.studio-inspector summary{font-size:12px;font-weight:800;cursor:pointer}.studio-inspector details textarea{min-height:65px;margin-top:8px}.studio-cost{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:6px;padding:13px;border-radius:6px;background:var(--member-soft)}.studio-cost strong{color:var(--member-green)}.studio-cost small{grid-column:1/-1;color:var(--member-muted)}.studio-job-progress{text-align:center;width:min(420px,100%)}.studio-job-progress>span{color:var(--member-green);font-size:12px}.studio-job-progress h2{margin:10px}.studio-job-progress>div{height:7px;border-radius:5px;background:#d7e0db;overflow:hidden}.studio-job-progress i{height:100%;display:block;background:var(--member-green)}.studio-job-progress p{color:var(--member-muted)}.studio-results{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.studio-results figure{position:relative;margin:0}.studio-results img{width:100%;max-height:600px;object-fit:contain}.studio-results a{position:absolute;right:9px;bottom:9px;padding:8px 11px;border-radius:5px;color:#fff;background:#173f30;text-decoration:none;font-size:12px}.studio-template-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.studio-template-fields header{grid-column:1/-1;display:flex;justify-content:space-between}.studio-template-fields header button{border:0;color:var(--member-green);background:transparent}.studio-template-fields label{display:grid;gap:5px;font-size:12px;font-weight:800}.studio-template-fields textarea{min-height:60px}.studio-library-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}.studio-library-head h1{margin:0 0 5px}.studio-library-head p{margin:0;color:var(--member-muted)}.studio-filters{display:flex;gap:5px}.studio-filters button{height:35px;border:1px solid var(--member-line);border-radius:5px;padding:0 12px;background:#fff}.studio-filters button.active{color:#fff;border-color:var(--member-dark);background:var(--member-dark)}.studio-template-grid,.studio-jobs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.studio-template-grid>article,.studio-jobs-grid>article{border:1px solid var(--member-line);border-radius:7px;overflow:hidden;background:#fff}.studio-template-cover,.studio-work-preview{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:#e5ebe7;color:#7f8c85}.studio-template-cover img,.studio-work-preview img{width:100%;height:100%;object-fit:cover}.studio-template-cover span,.studio-work-preview .state{position:absolute;top:9px;right:9px}.studio-template-grid article>div:last-child,.studio-jobs-grid article>div:last-child{padding:14px;display:grid;gap:8px}.studio-template-grid h3{margin:0}.studio-template-grid p,.studio-jobs-grid p{margin:0;color:var(--member-muted);font-size:12px}.studio-template-grid small,.studio-jobs-grid small{color:#8b9690}.studio-jobs-grid article>div:last-child>a{color:var(--member-green);font-weight:800}.studio-jobs-grid em{color:#a13b3b;font-size:12px}.studio-empty-list{grid-column:1/-1;padding:60px;color:#85918b;text-align:center}
@media(max-width:1080px){.header-inner{gap:14px}.nav{gap:14px}.studio-template-grid,.studio-jobs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.member-two-columns{grid-template-columns:1fr}.studio-create-grid{grid-template-columns:minmax(0,1fr) 270px}}
@media(max-width:760px){.header-account{position:absolute;right:0;top:12px;max-width:46%;overflow:hidden;text-overflow:ellipsis}.member-auth-page{display:block}.member-auth-visual{display:none}.member-auth-form{min-height:calc(100vh - 150px);padding:36px 0}.member-center{padding-top:18px}.member-center-head{display:block;padding:24px}.member-balance{margin:24px 0 0;text-align:left}.member-actions{display:grid;grid-template-columns:1fr}.member-metrics{grid-template-columns:1fr}.member-metrics div{border-right:0;border-bottom:1px solid var(--member-line)}.member-metrics div:last-child{border:0}.studio-page{display:block}.studio-nav{padding:7px;display:flex;flex-direction:row;overflow-x:auto}.studio-nav>div{display:flex}.studio-nav-label,.studio-nav>a{display:none}.studio-nav button{white-space:nowrap}.studio-topbar{height:58px;padding:0 12px}.studio-topbar>div:first-child span{display:none}.studio-view{padding:10px}.studio-create-grid{display:block;min-height:0}.studio-canvas-column{min-height:640px}.studio-inspector{border-left:0;border-top:1px solid var(--member-line)}.studio-prompt{margin:0 9px 9px}.studio-modebar>span{display:none}.studio-segments{width:100%}.studio-segments button{flex:1;padding:0 5px}.studio-library-head{align-items:flex-start;flex-direction:column;gap:12px}.studio-filters{width:100%;overflow-x:auto}.studio-template-grid,.studio-jobs-grid{grid-template-columns:1fr}.studio-template-fields{grid-template-columns:1fr}.studio-template-fields header{grid-column:auto}}

/* Registration is a focused account workflow, separate from the login split screen. */
.member-register-page {
    min-height: calc(100vh - 76px);
    display: block;
    padding: 40px 24px;
    background: #f1f5f6;
}

.member-bind-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 14px;
    padding: 20px 22px;
}

.member-bind-form label {
    display: grid;
    gap: 7px;
}

.member-bind-form label span {
    color: var(--member-muted);
    font-size: 12px;
    font-weight: 800;
}

.member-bind-form input {
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--member-line);
    border-radius: 6px;
    font: 600 14px ui-monospace, SFMono-Regular, Consolas, monospace;
    text-transform: uppercase;
}

.member-bind-form small {
    grid-column: 1 / -1;
    min-height: 18px;
    color: var(--member-muted);
}

.member-bind-form small.success { color: #176b49; }
.member-bind-form small.error { color: #a13b3b; }

.member-password-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr)) auto;
    align-items: end;
    gap: 14px;
    padding: 20px 22px;
}

.member-password-form label {
    display: grid;
    gap: 7px;
}

.member-password-form label span {
    color: var(--member-muted);
    font-size: 12px;
    font-weight: 800;
}

.member-password-form input {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--member-line);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

.member-password-form small {
    grid-column: 1 / -1;
    min-height: 18px;
    color: var(--member-muted);
}

.member-password-form small.success { color: #176b49; }
.member-password-form small.error { color: #a13b3b; }

@media (max-width: 760px) {
    .member-bind-form { grid-template-columns: 1fr; }
    .member-bind-form small { grid-column: auto; }
    .member-password-form { grid-template-columns: 1fr; }
    .member-password-form small { grid-column: auto; }
}

/* Member productivity overview */
.member-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.member-actions .btn svg {
    width: 16px;
    height: 16px;
}

.member-actions .member-logout {
    margin-left: auto;
}

.member-insight-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 22px;
    margin-top: 22px;
}

.member-insight {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--member-line);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(28, 42, 49, .045);
}

.member-insight > header,
.member-insight > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.member-insight > header span,
.member-insight > footer span {
    color: var(--member-muted);
    font-size: 12px;
}

.member-insight > header h2 {
    margin: 4px 0 0;
    font-size: 19px;
}

.member-insight > header > b {
    color: #176b49;
    font-size: 25px;
}

.member-insight > footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e5ebe8;
}

.member-insight > footer a {
    color: #176b49;
    font-size: 13px;
    font-weight: 800;
}

.member-capacity-card {
    background: #f1f7f4;
}

.member-capacity-track {
    height: 8px;
    margin: 20px 0;
    overflow: hidden;
    border-radius: 4px;
    background: #d8e5df;
}

.member-capacity-track i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #1a8f68;
}

.member-capacity-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.member-capacity-values > div {
    display: grid;
    gap: 4px;
    padding: 13px;
    border-left: 3px solid #4e9d7f;
    background: rgba(255, 255, 255, .7);
}

.member-capacity-values strong {
    font-size: 22px;
}

.member-capacity-values span {
    color: var(--member-muted);
    font-size: 11px;
}

.member-model-card {
    background: #f1f6f8;
}

.member-model-usage {
    min-height: 112px;
    display: grid;
    align-content: center;
    gap: 12px;
    margin-top: 18px;
}

.member-model-usage > p {
    margin: 0;
    color: var(--member-muted);
    font-size: 13px;
}

.member-model-usage > div {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto;
    gap: 5px 12px;
}

.member-model-usage span,
.member-model-usage strong {
    font-size: 12px;
}

.member-model-usage i {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: #dce6ea;
}

.member-model-usage i b {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #397a92;
}

@media (max-width: 900px) {
    .member-insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .member-actions .member-logout {
        margin-left: 0;
    }

    .member-capacity-values {
        grid-template-columns: 1fr;
    }

    .member-insight {
        padding: 18px;
    }
}

.member-register-shell {
    width: min(1180px, 100%);
    min-height: 680px;
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(480px, 1.06fr);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #d8e2e5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(20, 48, 59, .1);
}

.member-register-page .member-auth-visual {
    min-height: 680px;
    display: flex;
    flex-direction: column;
    padding: 46px 44px 36px;
    background: #123b32;
}

.member-register-intro {
    max-width: 490px;
}

.member-register-page .member-register-intro h2 {
    margin: 15px 0 13px;
    color: #fff;
    font-size: 34px;
    line-height: 1.25;
}

.member-register-page .member-register-intro p {
    margin: 0;
    color: #bad0c7;
    font-size: 15px;
    line-height: 1.8;
}

.member-register-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 28px 0;
}

.member-register-benefits div {
    padding-top: 13px;
    border-top: 2px solid rgba(232, 132, 45, .78);
}

.member-register-benefits dt {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.member-register-benefits dd {
    margin: 5px 0 0;
    color: #9fbcb1;
    font-size: 11px;
    line-height: 1.55;
}

.member-register-preview {
    margin: auto 0 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(3, 20, 15, .34);
}

.member-register-page .member-register-preview img {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center top;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.member-register-preview figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    color: #244238;
    background: #fff;
}

.member-register-preview figcaption strong {
    font-size: 12px;
}

.member-register-preview figcaption span {
    color: #708079;
    font-size: 10px;
    text-align: right;
}

.member-register-form {
    width: min(470px, calc(100% - 64px));
    gap: 0;
    padding: 46px 0 38px;
}

.member-register-form-head > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #60716a;
    font-size: 12px;
    font-weight: 800;
}

.member-register-form-head > div > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.member-register-form-head > div > span::before {
    width: 18px;
    height: 3px;
    content: "";
    background: var(--orange);
}

.member-register-form-head a {
    color: var(--member-green);
}

.member-register-form h1 {
    margin: 15px 0 8px;
    color: #122f3a;
    font-size: 30px;
    line-height: 1.25;
}

.member-register-form-head p {
    margin: 0;
    color: var(--member-muted);
    font-size: 13px;
    line-height: 1.75;
}

.member-register-form > .alert {
    margin: 20px 0 0;
}

.member-register-fields {
    display: grid;
    gap: 15px;
    margin-top: 25px;
}

.member-register-form label {
    gap: 6px;
}

.member-register-form input {
    height: 45px;
    border-color: #d5e0e4;
    background: #fbfcfc;
}

.member-register-form input::placeholder {
    color: #9aa7a2;
}

.member-register-code > span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.member-register-code > span small {
    padding: 2px 6px;
    border-radius: 4px;
    color: #766048;
    background: #fff3e4;
    font-size: 10px;
    font-weight: 700;
}

.member-register-code > small {
    color: #85928c;
    font-size: 11px;
    font-weight: 400;
}

.member-password-grid {
    gap: 12px;
}

.member-register-submit {
    min-height: 49px;
    margin-top: 24px;
    box-shadow: 0 12px 26px rgba(15, 155, 115, .18);
}

.member-register-form .auth-switch {
    margin: 15px 0 0;
    font-size: 12px;
}

@media (max-width: 1020px) {
    .member-register-page {
        padding: 28px 20px;
    }

    .member-register-shell {
        grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
    }

    .member-register-page .member-auth-visual {
        padding: 40px 30px 32px;
    }

    .member-register-page .member-register-intro h2 {
        font-size: 29px;
    }

    .member-register-benefits {
        gap: 12px;
    }
}

@media (max-width: 760px) {
    .member-register-page {
        min-height: calc(100vh - 68px);
        padding: 0;
        background: #fff;
    }

    .member-register-shell {
        display: block;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .member-register-page .member-auth-visual {
        display: none;
    }

    .member-register-form {
        width: calc(100% - 36px);
        max-width: 500px;
        min-width: 0;
        min-height: calc(100vh - 138px);
        padding: 34px 0 48px;
    }

    .member-register-form-head > div {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .member-register-form h1 {
        font-size: 27px;
    }

    .member-password-grid {
        grid-template-columns: 1fr;
    }

    .member-register-fields,
    .member-register-fields label,
    .member-register-fields input,
    .member-register-submit {
        min-width: 0;
        max-width: 100%;
    }
}

/* Login is a compact product workspace, with a focused mobile flow. */
.member-login-body {
    background: #f1f4f3;
}

.member-login-page {
    min-height: calc(100vh - 76px);
    display: block;
    padding: 38px 24px;
    background: #f1f4f3;
}

.member-login-shell {
    width: min(1160px, 100%);
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #d6e0de;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 54px rgba(25, 49, 51, .11);
}

.member-login-page .member-auth-visual {
    min-height: 650px;
    display: flex;
    flex-direction: column;
    padding: 48px 46px 38px;
    background: #143d36;
}

.member-login-intro {
    max-width: 500px;
}

.member-login-page .member-login-intro h1 {
    margin: 15px 0 13px;
    color: #fff;
    font-size: 36px;
    line-height: 1.23;
}

.member-login-page .member-login-intro p {
    max-width: 480px;
    margin: 0;
    color: #bed1ca;
    font-size: 14px;
    line-height: 1.8;
}

.member-login-preview {
    margin: auto 0 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(3, 20, 16, .3);
}

.member-login-page .member-login-preview img {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 8.5;
    display: block;
    object-fit: cover;
    object-position: center top;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.member-login-preview figcaption {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 13px;
    color: #213d36;
    background: #fff;
}

.member-login-preview figcaption strong {
    font-size: 12px;
}

.member-login-preview figcaption span {
    color: #6f7e79;
    font-size: 10px;
    text-align: right;
}

.member-login-form {
    width: min(420px, calc(100% - 64px));
    gap: 0;
    padding: 60px 0 48px;
}

.member-login-form-head > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #5f706a;
    font-size: 12px;
    font-weight: 800;
}

.member-login-form-head > div > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.member-login-form-head > div > span::before {
    width: 18px;
    height: 3px;
    content: "";
    background: #e27a2e;
}

.member-login-form-head a,
.member-login-footer a {
    color: var(--member-green);
    font-weight: 800;
}

.member-login-form h1 {
    margin: 18px 0 8px;
    color: #122f3a;
    font-size: 32px;
    line-height: 1.2;
}

.member-login-form-head p {
    margin: 0;
    color: var(--member-muted);
    font-size: 13px;
    line-height: 1.75;
}

.member-login-form > .alert {
    margin: 20px 0 0;
}

.member-login-fields {
    display: grid;
    gap: 17px;
    margin-top: 30px;
}

.member-login-form label {
    gap: 7px;
}

.member-login-form input {
    height: 48px;
    border-color: #d3dfe1;
    border-radius: 6px;
    background: #fbfcfc;
    box-shadow: none;
}

.member-login-form input:focus {
    border-color: #4f9f88;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(23, 107, 73, .1);
}

.member-login-form input::placeholder {
    color: #9aa7a3;
}

.member-login-submit {
    min-height: 49px;
    margin-top: 24px;
    border-radius: 6px;
    box-shadow: 0 12px 26px rgba(15, 155, 115, .2);
}

.member-login-footer {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 19px;
    padding-top: 17px;
    border-top: 1px solid #e6ecea;
    color: var(--member-muted);
    font-size: 12px;
}

.member-login-footer a:last-child {
    margin-left: auto;
    color: #65756f;
    font-weight: 700;
}

@media (max-width: 980px) {
    .member-login-page {
        padding: 28px 20px;
    }

    .member-login-shell {
        grid-template-columns: minmax(0, .92fr) minmax(410px, 1.08fr);
    }

    .member-login-page .member-auth-visual {
        padding: 42px 30px 34px;
    }

    .member-login-page .member-login-intro h1 {
        font-size: 31px;
    }
}

@media (max-width: 760px) {
    .member-login-body {
        background: #fff;
    }

    .member-login-page {
        min-height: calc(100vh - 68px);
        padding: 0;
        background: #fff;
    }

    .member-login-shell {
        display: block;
        min-height: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .member-login-page .member-auth-visual {
        display: none;
    }

    .member-login-form {
        width: calc(100% - 36px);
        max-width: 500px;
        min-width: 0;
        min-height: calc(100vh - 138px);
        padding: 36px 0 48px;
    }

    .member-login-form-head > div {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .member-login-form h1 {
        margin-top: 17px;
        font-size: 28px;
    }

    .member-login-fields,
    .member-login-fields label,
    .member-login-fields input,
    .member-login-submit {
        min-width: 0;
        max-width: 100%;
    }

    .member-login-footer {
        flex-wrap: wrap;
    }
}
.member-workspace-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) 120px minmax(0, 1.7fr);
    align-items: center;
    gap: 22px;
    margin-top: 22px;
    padding: 24px;
    border: 1px solid #d7e2de;
    border-radius: 7px;
    background: #eaf3ef;
}

.member-workspace-section > header {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 5px;
}

.member-workspace-section > header > div > span,
.member-workspace-summary span,
.member-workspace-summary small {
    color: var(--member-muted);
    font-size: 11px;
}

.member-workspace-section > header h2 {
    margin: 3px 0 4px;
    color: var(--member-dark);
    font-size: 20px;
}

.member-workspace-section > header p {
    margin: 0;
    color: var(--member-muted);
    font-size: 12px;
    line-height: 1.6;
}

.member-workspace-section > header .btn {
    min-height: 35px;
    margin-top: 9px;
    padding: 0 12px;
    font-size: 11px;
}

.member-workspace-summary {
    min-height: 106px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border-left: 1px solid #d0ddd7;
    border-right: 1px solid #d0ddd7;
    text-align: center;
}

.member-workspace-summary strong {
    color: #176b49;
    font-size: 34px;
}

.member-workspace-list {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.member-workspace-list > a {
    min-width: 0;
    min-height: 59px;
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #dbe5e1;
    border-radius: 6px;
    color: inherit;
    background: rgba(255, 255, 255, .78);
    text-decoration: none;
}

.member-workspace-list > a:hover {
    border-color: #a9c4b8;
    background: #fff;
}

.member-workspace-list > a > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.member-workspace-list > a strong,
.member-workspace-list > a small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-workspace-list > a strong {
    color: var(--member-dark);
    font-size: 12px;
}

.member-workspace-list > a small {
    color: var(--member-muted);
    font-size: 9px;
}

.member-workspace-list > a > svg {
    width: 14px;
    color: #668078;
}

.member-workspace-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    color: #247151;
    background: #e3f0ea;
}

.member-workspace-icon svg {
    width: 15px;
    height: 15px;
}

.member-workspace-list .member-workspace-empty {
    grid-column: 1 / -1;
    grid-template-columns: 32px minmax(0, 1fr);
}

.member-workspace-empty > svg {
    width: 20px;
    color: #267353;
}

.member-workspace-empty > span {
    grid-column: 2;
    color: var(--member-muted);
    font-size: 10px;
}

@media (max-width: 980px) {
    .member-workspace-section { grid-template-columns: minmax(0, 1fr) 110px; }
    .member-workspace-list { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .member-workspace-section { grid-template-columns: 1fr; padding: 19px; }
    .member-workspace-summary { min-height: 72px; border: 0; border-top: 1px solid #d0ddd7; border-bottom: 1px solid #d0ddd7; }
    .member-workspace-list { grid-column: auto; grid-template-columns: 1fr; }
}

.member-resume-strip {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    align-items: stretch;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid #d6e1dc;
    border-radius: 7px;
    background: #fff;
}

.member-resume-strip > header {
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 18px 20px;
    color: #fff;
    background: #173f34;
}

.member-resume-strip > header span {
    color: #9dc6b6;
    font-size: 10px;
}

.member-resume-strip > header strong {
    font-size: 15px;
}

.member-resume-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.member-resume-grid > a {
    min-width: 0;
    min-height: 92px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 9px;
    padding: 14px;
    border-right: 1px solid #e5ece8;
    color: inherit;
    text-decoration: none;
}

.member-resume-grid > a:last-child {
    border-right: 0;
}

.member-resume-grid > a:hover {
    background: #f4f8f6;
}

.member-resume-grid > a > svg:first-child {
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 6px;
    color: #1d7355;
    background: #e5f2ec;
}

.member-resume-grid > a > svg:last-child {
    width: 14px;
    color: #8a9992;
}

.member-resume-grid > a > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.member-resume-grid small,
.member-resume-grid em {
    overflow: hidden;
    color: var(--member-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-style: normal;
}

.member-resume-grid strong {
    overflow: hidden;
    color: var(--member-dark);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

@media (max-width: 1080px) {
    .member-resume-strip { grid-template-columns: 120px minmax(0, 1fr); }
    .member-resume-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .member-resume-grid > a:nth-child(2) { border-right: 0; }
    .member-resume-grid > a:nth-child(-n+2) { border-bottom: 1px solid #e5ece8; }
}

@media (max-width: 760px) {
    .member-resume-strip { grid-template-columns: 1fr; }
    .member-resume-strip > header { min-height: 66px; }
    .member-resume-grid { grid-template-columns: 1fr; }
    .member-resume-grid > a { min-height: 76px; border-right: 0; border-bottom: 1px solid #e5ece8; }
    .member-resume-grid > a:nth-child(3) { border-bottom: 1px solid #e5ece8; }
    .member-resume-grid > a:last-child { border-bottom: 0; }
}

.member-custom-recharge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, .95fr);
    gap: 26px;
    align-items: center;
    margin-top: 22px;
    padding: 24px 28px;
    border: 1px solid #d8e5de;
    border-radius: 7px;
    background: linear-gradient(112deg, #eaf6ef 0%, #fff 58%, #fff2df 100%);
}

.member-custom-recharge-copy > span {
    color: #176b49;
    font-size: 11px;
    font-weight: 900;
}

.member-custom-recharge-copy h2 {
    margin: 5px 0 6px;
    font-size: 21px;
}

.member-custom-recharge-copy p {
    margin: 0;
    color: var(--member-muted);
    font-size: 13px;
}

.member-custom-recharge-form {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.member-custom-recharge-form label {
    display: grid;
    gap: 6px;
    color: #34453d;
    font-size: 11px;
    font-weight: 800;
}

.member-custom-recharge-form label > div {
    height: 42px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    border: 1px solid var(--member-line);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.member-custom-recharge-form label b {
    padding-left: 11px;
    color: var(--member-green);
}

.member-custom-recharge-form input {
    height: 40px;
    border: 0;
    border-radius: 0;
    font-weight: 900;
}

.member-custom-recharge-form dl {
    height: 42px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
}

.member-custom-recharge-form dl div {
    display: grid;
    align-content: center;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(255,255,255,.78);
}

.member-custom-recharge-form dt {
    color: var(--member-muted);
    font-size: 9px;
}

.member-custom-recharge-form dd {
    margin: 0;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
}

.member-custom-recharge-form dd strong {
    color: var(--member-green);
    font-size: 16px;
}

.member-custom-recharge-form .btn {
    height: 42px;
}

@media (max-width: 980px) {
    .member-custom-recharge { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .member-custom-recharge { padding: 20px; }
    .member-custom-recharge-form { grid-template-columns: 1fr; }
    .member-custom-recharge-form dl { height: auto; }
}