.webksibu-settings-wrap{
    max-width: 980px;
    margin: 18px 0;
}

.webksibu-settings-hero{
    background: linear-gradient(135deg, var(--webksibu-primary), #022b55);
    border-radius: 16px;
    padding: 18px 20px;
    color: #fff;
    box-shadow: 0 16px 35px rgba(1, 28, 57, 0.18);
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.webksibu-settings-hero::after{
    content:"";
    position:absolute;
    inset:-40%;
    background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.35), transparent 55%);
    pointer-events:none;
    transform: rotate(10deg);
}

.webksibu-settings-hero h1{ margin: 0; font-size: 1.45rem; font-weight: 900; letter-spacing: -0.3px; color: #ffffff; }
.webksibu-settings-hero p{ margin: 6px 0 0; font-size: .92rem; opacity: .9; }
.webksibu-card{ background: #fff; border: 1px solid var(--webksibu-border); border-radius: 14px; padding: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.04); }
.webksibu-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.webksibu-field label{ display:block; font-weight: 800; margin-bottom: 6px; color: #0f172a; }
.webksibu-field input[type="text"]{ width: 100%; border-radius: 10px; border: 1px solid var(--webksibu-border); padding: 10px 12px; font-size: 14px; outline: none; transition: 0.2s ease; background: #fff; }
.webksibu-field input[type="text"]:focus{ border-color: var(--webksibu-accent); box-shadow: 0 0 0 3px rgba(56,189,248,0.25); }
.webksibu-help{ margin-top: 6px; font-size: 12px; color: var(--webksibu-muted); }
.webksibu-row{ display:flex; gap: 10px; align-items:center; }
.webksibu-row-wrap{ flex-wrap:wrap; }
.webksibu-color-preview{ width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--webksibu-border); background: #fff; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.02); }
.webksibu-actions{ display:flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.webksibu-btn{ border: 1px solid transparent; border-radius: 10px; padding: 10px 14px; font-weight: 800; cursor: pointer; transition: 0.2s ease; }
.webksibu-btn-primary{ background: var(--webksibu-accent); color: #001a2e; }
.webksibu-btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 22px rgba(56,189,248,0.25); }
.webksibu-btn-ghost{ background: #fff; border-color: var(--webksibu-border); color: #0f172a; }
.webksibu-btn-ghost:hover{ border-color: var(--webksibu-accent); box-shadow: 0 0 0 3px rgba(56,189,248,0.15); }

@media (max-width: 860px){ .webksibu-grid{ grid-template-columns: 1fr; } .webksibu-actions{ justify-content: stretch; } .webksibu-btn{ width: 100%; } }