/* ── Layout ── */
    .sc-wrap{max-width:1100px;margin:0 auto;padding:32px 24px 64px}

    /* ── Idle State ── */
    .sc-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:420px;text-align:center;gap:20px}
    .sc-idle__icon{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,rgba(74,58,255,.18),rgba(0,245,255,.08));border:1px solid rgba(74,58,255,.25);display:flex;align-items:center;justify-content:center;color:rgba(160,210,255,.85)}
    .sc-idle h1{font-size:1.8rem;font-weight:800;color:#f1f5f9;margin:0}
    .sc-idle p{font-size:14px;color:#64748b;max-width:440px;line-height:1.7;margin:0}
    .sc-idle__steps{display:flex;gap:24px;margin-top:8px;flex-wrap:wrap;justify-content:center}
    .sc-idle__step{display:flex;align-items:flex-start;gap:10px;text-align:left;max-width:180px}
    .sc-idle__step-num{width:22px;height:22px;border-radius:6px;background:var(--grad-brand,linear-gradient(135deg,#4a3aff,#00f5ff));display:grid;place-items:center;font-size:11px;font-weight:800;color:#0a1628;flex-shrink:0;margin-top:1px}
    .sc-idle__step p{font-size:12px;color:#64748b;margin:0;line-height:1.55}
    .btn-capture{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:linear-gradient(135deg,#4a3aff,#00f5ff);color:#0a1628;font-size:15px;font-weight:700;border:none;border-radius:999px;cursor:pointer;transition:box-shadow .2s,transform .2s;box-shadow:0 8px 28px rgba(74,58,255,.35)}
    .btn-capture:hover{box-shadow:0 12px 40px rgba(0,245,255,.3);transform:translateY(-2px)}
    .btn-capture:disabled{opacity:.5;cursor:not-allowed;transform:none}

    /* ── Crop State ── */
    .sc-crop{display:none;flex-direction:column;gap:16px}
    .sc-crop.is-active{display:flex}
    .sc-canvas-wrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#000;cursor:crosshair;user-select:none}
    #canvas-display{display:block;max-width:100%}
    #canvas-sel{position:absolute;inset:0;width:100%;height:100%}
    .sc-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .sc-hint{font-size:13px;color:#64748b;flex:1}

    /* ── Result State ── */
    .sc-result{display:none;flex-direction:column;gap:16px}
    .sc-result.is-active{display:flex}
    .sc-result__img-wrap{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:repeating-conic-gradient(#1e293b 0% 25%,#0f172a 0% 50%) 0 0/20px 20px}
    #canvas-result{display:block;max-width:100%}

    /* ── Shared Buttons ── */
    .btn-tool{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:background .15s,border-color .15s}
    .btn-tool--primary{background:rgba(0,245,255,.12);color:#00f5ff;border:1px solid rgba(0,245,255,.25)}
    .btn-tool--primary:hover{background:rgba(0,245,255,.18)}
    .btn-tool--ghost{background:rgba(255,255,255,.06);color:#94a3b8;border:1px solid rgba(255,255,255,.1)}
    .btn-tool--ghost:hover{background:rgba(255,255,255,.1);color:#f1f5f9}
    .btn-tool--danger{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2)}
    .btn-tool--danger:hover{background:rgba(239,68,68,.16)}

    /* ── Copy toast ── */
    .toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:#1e293b;border:1px solid rgba(0,245,255,.3);color:#e0fbff;padding:10px 20px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:9999}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

    /* ── Page title ── */
    .sc-page-title{margin:0 0 24px;font-size:1.1rem;font-weight:700;color:#f1f5f9;display:flex;align-items:center;gap:8px}
    .sc-page-title svg{opacity:.6}