:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --text: #172033;
    --muted: #667085;
    --border: #d0d5dd;
    --primary: #2454ff;
    --danger: #b42318;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Segoe UI, Arial, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--primary); text-decoration: none; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { font-size: 22px; font-weight: 700; color: var(--text); }
nav { display: flex; gap: 16px; align-items: center; }
.container { max-width: 1120px; margin: 32px auto; padding: 0 20px; }
.hero, .card, .detail, .form { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.hero { margin-bottom: 20px; }
.search { display: flex; gap: 10px; margin-bottom: 20px; }
.search input { flex: 1; padding: 13px; border: 1px solid var(--border); border-radius: 10px; }
button, .button { display: inline-block; border: 0; border-radius: 10px; padding: 10px 14px; background: var(--primary); color: white; cursor: pointer; font-weight: 600; }
.secondary { background: #eef2ff; color: var(--primary); }
.danger { background: var(--danger); }
.list { display: grid; gap: 14px; }
.card-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.card h2 { margin: 0 0 8px 0; font-size: 20px; }
.meta { color: var(--muted); margin-bottom: 12px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.tags a { background: #eef2ff; color: #3538cd; padding: 5px 9px; border-radius: 999px; font-size: 14px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.inline { display: inline; }
.form { display: grid; gap: 8px; }
.form input, .form textarea { width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; }
.code, .code-input { font-family: Consolas, Monaco, monospace; }
.code { background: #101828; color: #f9fafb; border-radius: 12px; padding: 18px; overflow: auto; line-height: 1.5; }
.description { line-height: 1.6; }
.validation, span.field-validation-error { color: var(--danger); }
.user { color: var(--muted); }
.detail-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.top-actions,
.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.script-hero-card,
.content-card {
    background: #fff;
    border: 1px solid #dbe1ea;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    padding: 2rem;
}

.script-hero-card {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 2rem;
}

.script-hero-main h1 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.script-summary {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
}

.script-meta-box {
    border-left: 1px solid #dbe1ea;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: #334155;
    font-weight: 600;
}

.hero-actions {
    grid-column: 1 / -1;
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem;
}

.button.primary,
.button.secondary,
.button.danger {
    border-radius: 12px;
    padding: 0.85rem 1.3rem;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

.button.primary {
    background: #2855ff;
    color: white;
}

.button.secondary {
    background: #eef3ff;
    color: #2855ff;
}

.button.danger {
    background: #b91c1c;
    color: white;
}

.rich-text {
    line-height: 1.7;
}

.rich-text h1,
.rich-text h2,
.rich-text h3 {
    margin-top: 1.5rem;
}

.code {
    margin-top: 1rem;
    border-radius: 14px;
    overflow: auto;
}

@media (max-width: 900px) {
    .script-hero-card {
        grid-template-columns: 1fr;
    }

    .script-meta-box {
        border-left: 0;
        border-top: 1px solid #dbe1ea;
        padding-left: 0;
        padding-top: 1rem;
    }
}
.detail-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.script-header-card {
    background: #ffffff;
    border: 1px solid #dbe1ea;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    padding: 2rem;
}

.script-header-card h1 {
    margin-top: 0;
    margin-bottom: .75rem;
}

.script-summary {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 1rem;
}

.detail-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.script-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    color: #475569;
    font-weight: 600;
}

.content-card {
    background: #ffffff;
    border: 1px solid #dbe1ea;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    padding: 2rem;
}

.search-form {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.search-form input {
    flex: 1;
    padding: .9rem 1rem;
    border: 1px solid #dbe1ea;
    border-radius: 12px;
}

.script-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.script-card {
    background: #fff;
    border: 1px solid #dbe1ea;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    padding: 2rem;
}

.script-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.script-card-header h2 {
    margin: 0;
}

.script-card-meta {
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

.script-card-summary {
    color: #475569;
    line-height: 1.6;
    margin: 1rem 0;
}

.card-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
}