/* ── Newspaper / Article Builder Editor ── */
.np-editor-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: #f0ebe3;
}
.np-topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .65rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #d8d0c8;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
    color: #1a1a1a;
}
.np-topbar a, .np-topbar button { color: #1a1a1a; }
.np-topbar-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.np-canvas-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.np-canvas {
    background: #fff;
    color: #111;
    box-shadow: 0 2px 24px rgba(0,0,0,.12);
    min-height: 60vh;
    transition: max-width .25s;
    position: relative;
}
.np-canvas.width-normal { max-width: 900px; width: 100%; }
.np-canvas.width-wide   { max-width: 1200px; width: 100%; }
.np-canvas.width-full   { max-width: 100%; width: 100%; }
.np-block-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid #e8e0d5;
    background: #faf8f5;
    color: #333;
    position: sticky;
    top: 0;
    z-index: 10;
}
.np-add-btn {
    font-size: .78rem;
    padding: .3rem .65rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.np-add-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.np-block-item {
    position: relative;
    border: 2px solid transparent;
    transition: border-color .15s;
    cursor: pointer;
    user-select: none;
}
.np-block-item:hover { border-color: #d0c8be; }
.np-block-item.selected { border-color: var(--primary) !important; }
.np-block-controls {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    gap: 2px;
    background: var(--primary);
    border-radius: 0 0 0 4px;
    opacity: 0;
    transition: opacity .15s;
    z-index: 5;
}
.np-block-item:hover .np-block-controls,
.np-block-item.selected .np-block-controls { opacity: 1; }
.np-ctrl-btn {
    background: none;
    border: none;
    color: #fff;
    padding: .2rem .35rem;
    cursor: pointer;
    font-size: .78rem;
    line-height: 1.4;
}
.np-ctrl-btn:hover { background: rgba(255,255,255,.2); }
.np-ctrl-btn.danger { color: #ffaaaa; }
.np-drag-handle {
    position: absolute;
    left: 0; top: 0;
    width: 20px;
    height: 100%;
    min-height: 2rem;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: .75rem;
    opacity: 0;
    transition: opacity .15s;
    z-index: 5;
    user-select: none;
}
.np-drag-handle:active { cursor: grabbing; }
.np-block-item:hover .np-drag-handle,
.np-block-item.selected .np-drag-handle { opacity: 1; }
.np-sortable-ghost  { opacity: .35; background: #e8f0fe !important; }
.np-sortable-chosen { box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.np-block-item.bw-half      { max-width: 50%; }
.np-block-item.bw-third     { max-width: 33.333%; }
.np-block-item.bw-two-thirds{ max-width: 66.666%; }
.np-block-headline    { font-family: 'Georgia', serif; font-size: 2.6rem; font-weight: 700; line-height: 1.15; padding: 1rem 1.5rem .5rem; }
.np-block-subheadline { font-family: 'Georgia', serif; font-size: 1.6rem; font-weight: 600; line-height: 1.25; padding: .6rem 1.5rem .4rem; }
.np-block-byline      { font-size: .88rem; letter-spacing: .04em; color: #555; padding: .3rem 1.5rem; font-style: italic; }
.np-block-paragraph   { font-size: 1rem; line-height: 1.75; padding: .5rem 1.5rem; white-space: pre-wrap; }
.np-block-quote       { font-family: 'Georgia', serif; font-size: 1.35rem; font-style: italic; border-left: 4px solid #333; margin: .75rem 1.5rem; padding: .75rem 1.25rem; color: #333; background: #f9f7f4; }
.np-block-label-wrap  { padding: .5rem 1.5rem; }
.np-block-label       { display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 3px; background: #111; color: #fff; }
.np-block-image       { padding: .5rem 1.5rem; text-align: center; }
.np-block-image img   { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.np-block-caption     { font-size: .82rem; color: #666; margin-top: .3rem; font-style: italic; text-align: center; }
.np-block-video       { padding: .5rem 1.5rem; }
.np-block-video video { max-width: 100%; border-radius: 4px; }
.np-block-divider     { padding: .5rem 1.5rem; }
.np-block-columns     { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: .5rem 1.5rem; }
.np-block-columns.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.np-block-col         { font-size: 1rem; line-height: 1.7; white-space: pre-wrap; }
.np-block-col.vip-col { min-height: 60px; border-radius: 4px; border: 1px dashed transparent; padding: .25rem; transition: border-color .15s; white-space: normal; }
.np-block-col.vip-col:hover { border-color: #c4b8a8; }
.np-block-col.col-active { border-color: #a8b8d8 !important; background: rgba(168,184,216,.06); }
.np-sub-block { position: relative; padding: .3rem .5rem; border-radius: 3px; border: 1px solid transparent; margin-bottom: .2rem; cursor: pointer; font-size: .88rem; }
.np-sub-block:hover { border-color: #d0c8be; background: #faf9f7; }
.np-sub-block.sub-selected { border-color: #6a90cc !important; background: #f0f4fb; }
.np-sub-remove { position: absolute; top: 2px; right: 3px; background: none; border: none; color: #999; font-size: .85rem; cursor: pointer; padding: 0 3px; line-height: 1; }
.np-sub-remove:hover { color: #c00; }
.np-col-add-row { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .3rem; }
.np-col-add-chip { padding: .15rem .4rem; border: 1px solid #d0c8be; border-radius: 3px; background: #faf9f7; color: #666; font-size: .72rem; cursor: pointer; white-space: nowrap; }
.np-col-add-chip:hover { border-color: #888; background: #f0ece6; color: #333; }
.np-col-empty { color: #bbb; font-size: .82rem; text-align: center; padding: .5rem 0; font-style: italic; }
.np-col-header { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #888; margin-bottom: .3rem; }
.np-empty-canvas { text-align: center; padding: 4rem 2rem; color: #999; }
.np-placeholder  { color: #ccc; font-style: italic; }
.np-sidebar {
    width: 320px;
    flex-shrink: 0;
    border-left: 1px solid #d8d0c8;
    background: #fff;
    color: #1a1a1a;
    overflow-y: auto;
}
.np-sidebar-section { padding: 1rem; border-bottom: 1px solid #e5e0d8; }
.np-sidebar-section h4 {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 .75rem;
}
.np-field { margin-bottom: .75rem; }
.np-field label { font-size: .82rem; color: #888; display: block; margin-bottom: .25rem; }
.np-field input[type=text],
.np-field textarea,
.np-field select { width: 100%; box-sizing: border-box; }
.np-field input[type=color] { height: 34px; padding: 2px 4px; border-radius: 4px; border: 1px solid #d8d0c8; width: 100%; box-sizing: border-box; }
.np-field-row { display: flex; gap: .5rem; }
.np-field-row .np-field { flex: 1; }
.np-inline-alert { padding: .4rem .7rem; border-radius: 5px; font-size: .82rem; margin: 0; }
.np-inline-alert.err { background: #fef2f2; color: #b91c1c; }
.np-inline-alert.ok  { background: #f0fdf4; color: #166534; }