.oc-spkg-frontend-wrap{max-width:1200px;margin:30px auto;padding:0 16px;font-family:Arial,Helvetica,sans-serif;color:#1f2937}.oc-spkg-hero{display:grid;grid-template-columns:1.7fr .9fr;gap:24px;align-items:stretch;margin-bottom:22px}.oc-spkg-badge{display:inline-block;background:linear-gradient(135deg,#e0f2fe,#eef2ff);color:#1d4ed8;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:14px}.oc-spkg-hero h2{font-size:38px;line-height:1.15;margin:0 0 12px;color:#0f172a}.oc-spkg-hero p{font-size:18px;line-height:1.7;margin:0;color:#475569}.oc-spkg-hero-box{background:linear-gradient(180deg,#ffffff,#f8fafc);border:1px solid #dbeafe;border-radius:24px;padding:24px;box-shadow:0 18px 50px rgba(15,23,42,.07);display:flex;flex-direction:column;gap:10px;justify-content:center}.oc-spkg-hero-box strong{font-size:15px;color:#334155}.oc-spkg-hero-box code{display:inline-block;background:#eff6ff;color:#1d4ed8;border-radius:12px;padding:12px 14px;font-size:16px;font-weight:700}.oc-spkg-hero-box span{font-size:14px;color:#64748b;line-height:1.6}.oc-spkg-frontend-ui{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #dbe7f3;border-radius:28px;padding:28px;box-shadow:0 24px 70px rgba(15,23,42,.08)}.oc-spkg-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:22px}.oc-spkg-output-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;margin-top:20px}.oc-spkg-output-card{background:#fff;border:1px solid #e5edf7;border-radius:22px;padding:18px}.oc-spkg-row{margin-bottom:18px}.oc-spkg-row label{display:block;margin-bottom:8px;color:#0f172a}.oc-spkg-input,.oc-spkg-textarea{width:100%;padding:14px 16px;border:1px solid #cbd5e1;border-radius:14px;background:#fff;box-sizing:border-box;font-size:15px;transition:.2s border-color,.2s box-shadow}.oc-spkg-input:focus,.oc-spkg-textarea:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.18)}.oc-spkg-textarea{min-height:120px;resize:vertical}.oc-spkg-primary.button,.oc-spkg-primary{background:linear-gradient(135deg,#2563eb,#4f46e5)!important;border:none!important;color:#fff!important;padding:12px 20px!important;border-radius:14px!important;box-shadow:0 12px 28px rgba(37,99,235,.24)}.oc-spkg-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}.oc-spkg-status{font-weight:600;color:#1d4ed8}.oc-spkg-preview-wrap{margin-top:14px;border-radius:18px;overflow:hidden;background:#f8fafc;border:1px solid #e2e8f0;min-height:120px;display:flex;align-items:center;justify-content:center}.oc-spkg-preview-wrap img{display:block;max-width:100%;height:auto}.oc-spkg-login-required{max-width:780px;margin:30px auto;padding:18px 22px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:18px;font-family:Arial,Helvetica,sans-serif}.oc-spkg-frontend-wrap .description{color:#64748b;font-size:13px;line-height:1.55;margin:6px 0 0}@media (max-width:960px){.oc-spkg-hero,.oc-spkg-grid,.oc-spkg-output-grid{grid-template-columns:1fr}.oc-spkg-hero h2{font-size:30px}.oc-spkg-frontend-ui{padding:20px}}