:root {
    --brief-purple: #a726fc;
    --brief-purple-dark: #6d18aa;
    --brief-purple-soft: #f5eaff;
    --brief-ink: #211529;
    --brief-muted: #7a6f80;
    --brief-border: #eadff0;
}

.brief-page-hero {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    border: 1px solid rgba(167, 38, 252, .12);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 92% 12%, rgba(167, 38, 252, .2), transparent 28%),
        linear-gradient(135deg, #fff 0%, #fbf7ff 55%, #f2e4ff 100%);
    box-shadow: 0 22px 55px rgba(66, 28, 85, .08);
}

.brief-page-hero::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -80px;
    width: 210px;
    height: 210px;
    border: 26px solid rgba(167, 38, 252, .08);
    border-radius: 50%;
}

.brief-page-hero > * { position: relative; z-index: 1; }
.brief-page-hero__eyebrow {
    margin-bottom: .5rem;
    color: var(--brief-purple-dark);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.brief-page-hero h1 { margin: 0; color: var(--brief-ink); font-weight: 800; }
.brief-page-hero p { max-width: 720px; margin: .8rem 0 0; color: var(--brief-muted); }

.brief-stat-card {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--brief-border);
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 14px 40px rgba(42, 22, 53, .055);
}
.brief-stat-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 13px;
    color: var(--brief-purple-dark);
    background: var(--brief-purple-soft);
}
.brief-stat-card span { color: var(--brief-muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.brief-stat-card strong { display: block; margin-top: .25rem; color: var(--brief-ink); font-size: 1.65rem; line-height: 1; }

.brief-list-card,
.brief-panel {
    border: 1px solid var(--brief-border);
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 18px 50px rgba(42, 22, 53, .06);
}
.brief-list-card { padding: 1.2rem; }
.brief-list-card:hover { border-color: rgba(167, 38, 252, .28); transform: translateY(-1px); transition: .18s ease; }
.brief-list-card__title { color: var(--brief-ink); font-weight: 800; text-decoration: none; }
.brief-list-card__title:hover { color: var(--brief-purple-dark); }
.brief-list-card__meta { color: var(--brief-muted); font-size: .86rem; }
.brief-list-card__metric { min-width: 84px; padding: .75rem .9rem; border-radius: 1rem; background: #faf7fc; text-align: center; }
.brief-list-card__metric span { display: block; color: var(--brief-muted); font-size: .7rem; text-transform: uppercase; font-weight: 700; }
.brief-list-card__metric strong { display: block; color: var(--brief-ink); font-size: 1.15rem; }

.brief-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .72rem 1.15rem;
    border: 0;
    border-radius: .9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brief-purple), #6e22d8);
    box-shadow: 0 12px 28px rgba(167, 38, 252, .24);
    font-weight: 800;
    text-decoration: none;
}
.brief-primary-button:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 34px rgba(167, 38, 252, .3); }

.brief-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 42px;
    padding: .66rem 1rem;
    border: 1px solid var(--brief-border);
    border-radius: .85rem;
    color: var(--brief-ink);
    background: #fff;
    font-weight: 750;
    text-decoration: none;
}
.brief-secondary-button:hover { color: var(--brief-purple-dark); border-color: rgba(167, 38, 252, .35); background: #fcf8ff; }

.brief-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; align-items: start; }
.brief-editor-main,
.brief-editor-side { min-width: 0; }
.brief-editor-side { position: sticky; top: 1rem; }
.brief-panel__head { padding: 1.2rem 1.25rem; border-bottom: 1px solid var(--brief-border); }
.brief-panel__body { padding: 1.25rem; }
.brief-panel__title { margin: 0; color: var(--brief-ink); font-size: 1rem; font-weight: 800; }
.brief-panel__hint { margin: .25rem 0 0; color: var(--brief-muted); font-size: .82rem; }

.brief-builder-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}
.brief-add-field {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: .62rem .75rem;
    border: 1px solid var(--brief-border);
    border-radius: .78rem;
    color: var(--brief-ink);
    background: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-align: left;
}
.brief-add-field i { color: var(--brief-purple-dark); }
.brief-add-field:hover { border-color: rgba(167, 38, 252, .38); background: var(--brief-purple-soft); }

.brief-fields-list { display: grid; gap: 1rem; }
.brief-field-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--brief-border);
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(49, 25, 61, .045);
}
.brief-field-card.is-dragging { opacity: .6; }
.brief-field-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brief-purple), #7c28dc);
}
.brief-field-card__top {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid #f0e8f4;
    background: #fcfaff;
}
.brief-field-card__drag { cursor: grab; color: #9c8ca5; }
.brief-field-card__index { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--brief-purple-dark); background: var(--brief-purple-soft); font-size: .75rem; font-weight: 800; }
.brief-field-card__type { flex: 1; color: var(--brief-muted); font-size: .8rem; font-weight: 700; }
.brief-field-card__actions { display: flex; gap: .3rem; }
.brief-icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; color: #796c82; background: transparent; }
.brief-icon-button:hover { color: var(--brief-purple-dark); background: var(--brief-purple-soft); }
.brief-icon-button.is-danger:hover { color: #c42750; background: #fff0f4; }
.brief-field-card__body { padding: 1rem; }
.brief-field-options { padding: .85rem; border: 1px dashed #d9c8e3; border-radius: .85rem; background: #fdfbfe; }
.brief-field-options textarea { min-height: 105px; }
.brief-section-preview { padding: 1rem; border-radius: .9rem; background: linear-gradient(135deg, #f7edff, #fff); color: var(--brief-purple-dark); font-weight: 800; }

.brief-empty-builder {
    padding: 3rem 1.5rem;
    border: 1px dashed #d8c6e2;
    border-radius: 1.2rem;
    color: var(--brief-muted);
    background: #fdfbfe;
    text-align: center;
}
.brief-empty-builder i { display: block; margin-bottom: .65rem; color: #c191e2; font-size: 2rem; }

.brief-link-box {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem;
    border: 1px solid var(--brief-border);
    border-radius: .9rem;
    background: #faf7fc;
}
.brief-link-box input { min-width: 0; border: 0; background: transparent; box-shadow: none !important; font-size: .82rem; }
.brief-link-box button { flex: 0 0 auto; }

.brief-question-preview {
    padding: 1rem 0;
    border-bottom: 1px solid #efe7f3;
}
.brief-question-preview:last-child { border-bottom: 0; }
.brief-question-preview__label { color: var(--brief-ink); font-weight: 800; }
.brief-question-preview__help { margin-top: .25rem; color: var(--brief-muted); font-size: .85rem; }
.brief-answer-value { margin-top: .65rem; padding: .85rem 1rem; border-radius: .85rem; background: #faf7fc; color: #33243a; white-space: pre-wrap; overflow-wrap: anywhere; }
.brief-answer-empty { color: #a395aa; font-style: italic; }

.brief-submission-contact {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.brief-submission-contact__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--brief-purple), #671ab3); font-weight: 800; }

.brief-pikpi-box { padding: 1rem; border: 1px solid var(--brief-border); border-radius: 1rem; background: #fcf9fe; }
.brief-pikpi-box pre { max-height: 240px; margin: .75rem 0 0; padding: .8rem; border-radius: .75rem; background: #22152a; color: #f7eaff; font-size: .75rem; white-space: pre-wrap; overflow: auto; }

.brief-filter-card { padding: 1rem; border: 1px solid var(--brief-border); border-radius: 1.1rem; background: #fff; }
.brief-table-wrap { overflow-x: auto; }
.brief-table-wrap .table > :not(caption) > * > * { padding: .9rem .75rem; border-color: #eee6f2; vertical-align: middle; }
.brief-table-wrap .table thead th { color: #807087; font-size: .73rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 1199px) {
    .brief-editor-layout { grid-template-columns: 1fr; }
    .brief-editor-side { position: static; }
}
@media (max-width: 767px) {
    .brief-page-hero { padding: 1.35rem; }
    .brief-builder-toolbar { grid-template-columns: 1fr; }
    .brief-field-card__top { align-items: flex-start; flex-wrap: wrap; }
    .brief-field-card__type { min-width: calc(100% - 90px); }
}


.brief-file-builder-note {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 1px dashed rgba(167,38,252,.28);
    border-radius: .75rem;
    background: rgba(167,38,252,.035);
    color: var(--brief-muted);
    font-size: .78rem;
    line-height: 1.45;
}
.brief-file-builder-note i { color: #a726fc; font-size: 1rem; }
.brief-file-answer {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .65rem;
    padding: .8rem;
    border: 1px solid var(--brief-border);
    border-radius: .8rem;
    background: #fff;
}
.brief-file-answer__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: .65rem;
    background: rgba(167,38,252,.08);
    color: #a726fc;
}
.brief-file-answer__body { min-width: 0; flex: 1; }
.brief-file-answer__body strong,
.brief-file-answer__body span { display: block; }
.brief-file-answer__body strong { overflow-wrap: anywhere; color: var(--brief-ink); font-size: .9rem; }
.brief-file-answer__body span { margin-top: .15rem; color: var(--brief-muted); font-size: .72rem; }
@media (max-width: 575px) {
    .brief-file-answer { align-items: flex-start; flex-wrap: wrap; }
    .brief-file-answer .brief-secondary-button { width: 100%; justify-content: center; }
}