.directing-panel
{
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 100vh;
    background: var(--panel);
}

.directing-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--border);
}

.directing-header h2
{
    margin: 0;
    font-size: 22px;
}

.directing-header p
{
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-dim);
}

.directing-header-actions
{
    display: flex;
    gap: 8px;
    align-items: center;
}

.directing-action
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 13px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    background: #ffffff;
    cursor: pointer;
}

.directing-action.primary
{
    border-color: var(--accent);
    color: #ffffff;
    background: var(--accent);
}

.directing-action:hover,
.directing-action:focus
{
    border-color: var(--accent-hover);
    outline: none;
}

.directing-action svg
{
    width: 16px;
    height: 16px;
}

.directing-content
{
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.directing-section
{
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.directing-set-section
{
    border-right: 1px solid var(--border);
    background: #f7faf9;
}

.directing-section-head
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.directing-section-head h3
{
    margin: 0;
    font-size: 15px;
}

.directing-section-head span
{
    font-size: 12px;
    color: var(--text-dim);
}

.directing-section-head-copy
{
    display: grid;
    gap: 4px;
}

.directing-set-order-actions
{
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
}

.directing-set-order-action
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0;
    color: var(--text);
    background: #ffffff;
    cursor: pointer;
}

.directing-set-order-action:hover:not(:disabled),
.directing-set-order-action:focus-visible
{
    border-color: var(--accent-hover);
    outline: none;
}

.directing-set-order-action:disabled
{
    color: var(--text-dim);
    background: var(--panel);
    cursor: default;
    opacity: 0.5;
}

.directing-set-order-action svg
{
    width: 16px;
    height: 16px;
}

.directing-set-list,
.directing-item-list
{
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
}

.directing-item-groups
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.directing-item-group
{
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.directing-item-group + .directing-item-group
{
    border-left: 1px solid var(--border);
}

.directing-item-group-head
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    background: #fbfdfc;
}

.directing-item-group-head h4
{
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.directing-item-group-head span
{
    font-size: 11px;
    color: var(--text-dim);
}

.directing-item-list
{
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.directing-card
{
    position: relative;
    display: grid;
    gap: 10px;
    align-content: start;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    color: var(--text);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(19, 41, 48, 0.04);
}

.directing-set-card
{
    cursor: pointer;
}

.directing-set-card:hover,
.directing-set-card:focus,
.directing-item-card:hover
{
    border-color: #8bcfc6;
    background: #f7fbfa;
    outline: none;
}

.directing-card.active
{
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(18, 131, 116, 0.16);
}

.directing-card-title
{
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directing-card-description
{
    min-width: 0;
    overflow: hidden;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directing-card-content
{
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    white-space: pre-wrap;
}

.directing-item-card.has-right-rail .directing-card-content
{
    padding-right: 44px;
}

.directing-item-card.has-left-rail .directing-card-content
{
    padding-left: 44px;
}

.directing-card-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.directing-chip
{
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid #d9e5e2;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 11px;
    color: #52615d;
    background: #f8fbfa;
}

.directing-chip.active
{
    border-color: #8bcfc6;
    color: #0f5f56;
    background: #eef8f6;
}

.directing-card-actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.directing-card-actions.bottom
{
    align-self: start;
    margin-top: 4px;
}

.directing-item-card.has-left-rail .directing-card-actions.bottom
{
    padding-left: 44px;
}

.directing-card-actions[hidden]
{
    display: none;
}

.directing-card-quick-actions
{
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
}

.directing-card-quick-actions.right
{
    right: 0;
}

.directing-card-quick-actions.left
{
    left: 0;
}

.directing-card-symbol-action
{
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 100%;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    color: var(--text-dim);
    background: #ffffff;
    cursor: pointer;
}

.directing-card-quick-actions.right .directing-card-symbol-action
{
    border-left: 1px solid var(--border);
    border-radius: 0 8px 8px 0;
}

.directing-card-quick-actions.left .directing-card-symbol-action
{
    border-right: 1px solid var(--border);
    border-radius: 8px 0 0 8px;
}

.directing-card-symbol-action svg
{
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.directing-card-symbol-action:hover,
.directing-card-symbol-action:focus
{
    border-color: #8bcfc6;
    color: var(--accent-hover);
    background: #eef8f6;
    outline: none;
}

.directing-card-symbol-action.primary
{
    border-color: #78addf;
    color: #2f6f9f;
    background: #d4e9ff;
}

.directing-card-symbol-action.danger
{
    border-color: #ce8585;
    color: #8a3838;
    background: #ffdddd;
}

.directing-card-symbol-action.primary:hover,
.directing-card-symbol-action.primary:focus
{
    border-color: #5d9bd4;
    color: #123f6b;
    background: #c5e2ff;
}

.directing-card-symbol-action.danger:hover,
.directing-card-symbol-action.danger:focus
{
    border-color: #bd6a6a;
    color: #5b1919;
    background: #ffd0d0;
}

.directing-card-action
{
    min-height: 30px;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    background: #ffffff;
    cursor: pointer;
}

.directing-card-action:hover,
.directing-card-action:focus
{
    border-color: #8bcfc6;
    color: var(--accent-hover);
    background: #eef8f6;
    outline: none;
}

.directing-card-action.active
{
    border-color: #8bcfc6;
    color: #0f5f56;
    background: #dff7f1;
}

.directing-card-action:disabled
{
    opacity: 0.5;
    cursor: not-allowed;
}

.directing-card-action.primary
{
    border-color: var(--accent);
    color: #ffffff;
    background: var(--accent);
}

.directing-card-action.primary:hover,
.directing-card-action.primary:focus
{
    border-color: var(--accent-hover);
    color: #ffffff;
    background: var(--accent-hover);
}

.directing-card-icon-action
{
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 30px;
    border: 1px solid #d4dedb;
    border-radius: 7px;
    color: #7d8c88;
    background: #f7faf9;
    cursor: pointer;
}

.directing-card-icon-action:hover,
.directing-card-icon-action:focus
{
    border-color: #8bcfc6;
    color: var(--accent-hover);
    background: #eef8f6;
    outline: none;
}

.directing-card-icon-action.active
{
    border-color: #5bb8ae;
    color: #ffffff;
    background: #319489;
    box-shadow: 0 0 0 1px rgba(49, 148, 137, 0.1);
}

.directing-card-icon-action:disabled
{
    opacity: 0.45;
    cursor: not-allowed;
}

.directing-card-icon-action:disabled:hover,
.directing-card-icon-action:disabled:focus
{
    border-color: #d4dedb;
    color: #71807c;
    background: #f7faf9;
}

.directing-card-icon-action svg
{
    width: 15px;
    height: 15px;
    stroke-width: 2.5;
}

.directing-card-icon-action.compact
{
    width: 26px;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
}

.directing-card-icon-action.compact svg
{
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
}

.directing-card-icon-action.neutral
{
    border-color: #d4dedb;
    color: #71807c;
    background: #f7faf9;
}

.directing-card-icon-action.neutral:hover,
.directing-card-icon-action.neutral:focus
{
    border-color: #b9c7c3;
    color: #4f5d59;
    background: #edf2f1;
}

.directing-card-icon-action.success
{
    border-color: #8bcfc6;
    color: #0f5f56;
    background: #dff7f1;
}

.directing-card-icon-action.success:hover,
.directing-card-icon-action.success:focus
{
    border-color: #5bb8ae;
    color: #0b4f48;
    background: #cef0eb;
}

.directing-empty
{
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.55;
    background: var(--panel-soft);
}

.directing-item-dialog-backdrop
{
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.28);
}

.directing-item-dialog-backdrop[hidden]
{
    display: none;
}

.directing-item-dialog
{
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr) auto;
    width: min(560px, calc(100vw - 48px));
    max-height: min(620px, calc(100vh - 48px));
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.directing-set-list-dialog
{
    grid-template-rows: auto minmax(120px, auto) auto;
    width: min(420px, calc(100vw - 48px));
}

.directing-set-dialog
{
    grid-template-rows: auto auto auto;
    width: min(480px, calc(100vw - 48px));
}

.directing-item-dialog-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: #f7faf9;
}

.directing-item-dialog-header h3
{
    margin: 0;
    font-size: 15px;
}

.directing-card-icon-action.dialog-close
{
    width: 30px;
    height: 30px;
}

.directing-item-dialog-textarea
{
    width: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    padding: 16px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    outline: none;
}

.directing-item-dialog-textarea.readonly
{
    color: #52615d;
    background: #f7faf9;
}

.directing-set-dialog-body
{
    display: grid;
    gap: 14px;
    padding: 16px;
}

.directing-set-dialog-field
{
    display: grid;
    gap: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.directing-set-dialog-input,
.directing-set-dialog-textarea
{
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    background: #ffffff;
    outline: none;
}

.directing-set-dialog-input:focus,
.directing-set-dialog-textarea:focus
{
    border-color: #8bcfc6;
    box-shadow: 0 0 0 2px rgba(18, 131, 116, 0.12);
}

.directing-set-dialog-textarea
{
    min-height: 88px;
    resize: vertical;
    line-height: 1.55;
}

.directing-set-list-dialog-body
{
    padding: 16px;
    overflow-y: auto;
}

.directing-set-list-dialog-list
{
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.directing-set-list-dialog-item
{
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    background: #f7faf9;
}

.directing-item-dialog-actions
{
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: #fbfdfc;
}

@media (max-width: 980px)
{
    .directing-content
    {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .directing-set-section
    {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .directing-set-list
    {
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 280px);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .directing-item-groups
    {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
    }

    .directing-item-group + .directing-item-group
    {
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}