.scld-wrap{font-family:'Roboto',sans-serif;color:#333;display:flex;min-height:600px;background:#F7F8FA;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);position:relative}
.scld-wrap *{margin:0;padding:0;box-sizing:border-box}
.scld-sidebar{width:270px;background:#fff;border-right:1px solid #E8ECF1;padding:24px;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
.scld-logo{font-size:19px;font-weight:700;color:#1A365D;margin-bottom:28px}.scld-logo span{color:#2A4A7F;font-weight:400}
.scld-cat{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:#888;margin:20px 0 8px;font-weight:600}
.scld-sbtn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:6px;font-size:13px;color:#555;cursor:pointer;transition:all .2s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.scld-sbtn:hover,.scld-sbtn.active{background:rgba(206,110,97,.08);color:#CE6E61}
.scld-ic{width:28px;height:28px;border-radius:6px;background:rgba(206,110,97,.08);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.scld-tag{display:inline-block;padding:2px 8px;border-radius:100px;font-size:10px;font-weight:600;background:rgba(206,110,97,.1);color:#CE6E61;margin-left:6px}
.scld-main{flex:1;padding:40px;max-width:880px}
.scld-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}
.scld-topbar h2{font-size:26px;font-weight:700;color:#1A365D;margin:0}
.scld-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .3s}
.scld-btn-coral{background:#CE6E61;color:#fff}.scld-btn-coral:hover{background:#B85A4D;transform:translateY(-1px)}
.scld-btn-blue{background:#1A365D;color:#fff}.scld-btn-blue:hover{background:#2A4A7F}
.scld-btn-green{background:#48BB78;color:#fff}.scld-btn-green:hover{background:#38A169}
.scld-btn-o{background:transparent;color:#1A365D;border:1px solid #E8ECF1}.scld-btn-o:hover{border-color:#1A365D}
.scld-wizard{display:none}.scld-wizard.active{display:block}
.scld-dots{display:flex;gap:8px;margin-bottom:28px}
.scld-dot{height:4px;flex:1;border-radius:4px;background:#E8ECF1}.scld-dot.done{background:#CE6E61}.scld-dot.cur{background:#CE6E61;opacity:.6}
.scld-fg{margin-bottom:18px}.scld-fg label{display:block;font-size:13px;font-weight:500;color:#555;margin-bottom:5px}
.scld-fg input,.scld-fg select,.scld-fg textarea{width:100%;padding:11px 14px;border-radius:6px;border:1px solid #E8ECF1;color:#333;font-size:14px;font-family:inherit;outline:none;transition:border .3s;background:#fff}
.scld-fg input:focus,.scld-fg select:focus,.scld-fg textarea:focus{border-color:#CE6E61}
.scld-fg textarea{min-height:100px;resize:vertical}
.scld-acts{display:flex;gap:12px;margin-top:20px;justify-content:flex-end}
.scld-empty{text-align:center;padding:80px 40px}.scld-big{font-size:56px;margin-bottom:18px}
.scld-empty h3{font-size:22px;color:#1A365D;margin-bottom:8px}.scld-empty p{color:#555;font-size:15px}
.scld-preview-box{background:#fff;border:1px solid #E8ECF1;border-radius:12px;padding:32px;line-height:1.8;font-size:14px;color:#555;white-space:pre-wrap;max-height:500px;overflow-y:auto;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.scld-preview-box h2{color:#1A365D;font-size:16px;text-align:center;margin-bottom:16px}.scld-preview-box b{color:#333}
.scld-loading{display:none;text-align:center;padding:60px}.scld-loading.on{display:block}
.scld-loading h3{color:#1A365D}.scld-loading p{color:#888;margin-top:6px}
.scld-spin{width:40px;height:40px;border:3px solid #E8ECF1;border-top-color:#CE6E61;border-radius:50%;animation:scld-sp 1s linear infinite;margin:0 auto 18px}
@keyframes scld-sp{to{transform:rotate(360deg)}}
.scld-toast{position:fixed;bottom:30px;right:30px;background:#48BB78;color:#fff;padding:13px 24px;border-radius:6px;font-size:14px;font-weight:600;transform:translateY(100px);opacity:0;transition:all .4s;z-index:10000;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.scld-toast.show{transform:translateY(0);opacity:1}

/* Mobile hamburger toggle */
.scld-mobile-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E8ECF1;background:#fff;cursor:pointer;font-size:20px;flex-shrink:0;transition:all .2s}
.scld-mobile-toggle:hover{background:rgba(206,110,97,.06);border-color:#CE6E61}

/* Mobile overlay */
.scld-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:9998;opacity:0;transition:opacity .3s}
.scld-overlay.show{display:block;opacity:1}

/* Mobile close button inside sidebar */
.scld-sidebar-close{display:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid #E8ECF1;background:#fff;cursor:pointer;font-size:18px;position:absolute;top:16px;right:16px;transition:all .2s}
.scld-sidebar-close:hover{background:rgba(206,110,97,.08);color:#CE6E61}

/* ==================== RESPONSIVE ==================== */
@media(max-width:800px){
    .scld-wrap{flex-direction:column;min-height:0;border-radius:8px}

    /* Sidebar → slide-out drawer */
    .scld-sidebar{
        position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;
        z-index:9999;transform:translateX(-100%);transition:transform .3s ease;
        padding:24px;padding-top:56px;border-right:1px solid #E8ECF1;
        box-shadow:4px 0 20px rgba(0,0,0,.15)
    }
    .scld-sidebar.open{transform:translateX(0)}
    .scld-sidebar-close{display:flex}

    /* Hamburger visible */
    .scld-mobile-toggle{display:flex}

    /* Main content adjustments */
    .scld-main{padding:20px 16px;max-width:100%}
    .scld-topbar{margin-bottom:20px;gap:12px}
    .scld-topbar h2{font-size:20px}

    /* Empty state */
    .scld-empty{padding:40px 20px}
    .scld-big{font-size:44px;margin-bottom:14px}
    .scld-empty h3{font-size:18px}
    .scld-empty p{font-size:13px}

    /* Forms */
    .scld-fg input,.scld-fg select,.scld-fg textarea{font-size:16px;padding:12px 14px}
    .scld-fg textarea{min-height:80px}

    /* Buttons stack on mobile */
    .scld-acts{flex-direction:column;gap:10px}
    .scld-acts .scld-btn{width:100%;justify-content:center;padding:12px 20px}

    /* Preview box */
    .scld-preview-box{padding:20px 16px;font-size:13px;max-height:400px;border-radius:8px}
    .scld-preview-box h2{font-size:15px}

    /* Loading */
    .scld-loading{padding:40px 20px}

    /* Toast */
    .scld-toast{bottom:16px;right:16px;left:16px;text-align:center;font-size:13px;padding:12px 16px}
}

@media(max-width:400px){
    .scld-main{padding:16px 12px}
    .scld-topbar h2{font-size:18px}
    .scld-preview-box{padding:16px 12px;font-size:12px}
    .scld-fg input,.scld-fg select,.scld-fg textarea{font-size:16px}
}