* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #222; background: #f5f5f7; }

/* ============================================================================
 * Landing / Coming Soon / Login
 * ========================================================================== */
.landing-body { background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 60%, #fefce8 100%); min-height: 100vh; }
.landing { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.landing-card { text-align: center; padding: 56px 64px; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06); max-width: 480px; width: 100%; }
.landing-card h1 { font-family: Georgia, "Times New Roman", serif; font-size: 52px; font-weight: 700; color: #991b1b; margin: 0 0 12px; letter-spacing: -.02em; line-height: 1; }
.landing-card .tagline { font-size: 17px; color: #57534e; margin: 0 0 28px; }
.landing-card .coming  { font-size: 14px; color: #a8a29e; margin: 0 0 36px; letter-spacing: .15em; text-transform: uppercase; }
.signin-link { display: inline-block; padding: 11px 28px; border: 1px solid #d6d3d1; background: #fff; color: #1c1917; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500; transition: background 120ms, border-color 120ms; }
.signin-link:hover { background: #fafaf9; border-color: #a8a29e; }

.auth-card { text-align: left; padding: 40px 44px; max-width: 380px; }
.auth-card h1 { text-align: center; font-size: 36px; margin-bottom: 6px; }
.auth-card .tagline { text-align: center; margin-bottom: 28px; }
.auth-card .field { display: block; margin-bottom: 14px; }
.auth-card .field span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #6b7280; margin-bottom: 4px; }
.auth-card .field input { width: 100%; padding: 9px 11px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px; }
.auth-card .field input:focus { outline: none; border-color: #991b1b; }
.auth-card .auth-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; }
.btn.block { width: 100%; padding: 10px; font-size: 14px; }
.quiet-link { display: block; text-align: center; margin-top: 14px; color: #78716c; font-size: 13px; text-decoration: none; }
.quiet-link:hover { color: #44403c; }

/* ============================================================================
 * App
 * ========================================================================== */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #1f2937; color: #fff; }
.topbar h1 { margin: 0; font-size: 16px; font-weight: 600; }
.topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.topbar-user .who { color: #cbd5e1; }
.topbar-user .btn { background: transparent; color: #cbd5e1; border-color: #334155; }
.topbar-user .btn:hover { background: #334155; color: #fff; }

/* Three-pane: Publications | Headlines | Editor */
.three-pane { display: grid; grid-template-columns: minmax(200px, 240px) minmax(280px, 360px) 1fr; height: calc(100vh - 47px); }
.three-pane .pane { overflow-y: auto; }
.three-pane .sources     { background: #f8fafc; border-right: 1px solid #e5e7eb; }
.three-pane .titles      { background: #fafafa; border-right: 1px solid #e5e7eb; }
.three-pane .editor-pane { display: flex; flex-direction: column; background: #fff; }

.pane-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; background: #fff; position: sticky; top: 0; z-index: 1; }
.pane-head h2 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #6b7280; font-weight: 600; }
.pane-head .btn { margin-left: auto; }
.pane-meta { font-size: 11px; color: #9ca3af; margin-left: 6px; }

/* Pane 1 source list (publications + pinned virtual entries) */
.source-list { list-style: none; margin: 0; padding: 0; }
.source-list.pinned { border-bottom: 1px solid #e5e7eb; background: #fff; }
.source-list li.source { padding: 9px 12px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #eef0f3; font-size: 14px; }
.source-list li.source:hover  { background: #eef2ff; }
.source-list li.source.active { background: #e0e7ff; color: #1e3a8a; font-weight: 500; }
.source-list li.saved .t { font-weight: 500; }
.source-list li .meta { font-size: 11px; color: #6b7280; }
.source-list li .row-actions { opacity: 0; display: flex; gap: 4px; }
.source-list li:hover .row-actions { opacity: 1; }
.source-list li .row-actions button { font-size: 11px; padding: 2px 6px; }

/* Pane 2 title list (feed headlines or saved articles) */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 10px 12px; border-bottom: 1px solid #eef0f3; cursor: pointer; display: block; }
.list li:hover { background: #f1f5f9; }
.list li.active { background: #e0e7ff; }
.list li .t { font-weight: 500; font-size: 14px; line-height: 1.35; color: #111827; }
.list li .d { font-size: 11px; color: #6b7280; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.list li .d .pub { font-weight: 500; color: #4b5563; }

.btn { background: #fff; border: 1px solid #d1d5db; padding: 5px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.btn:hover { background: #f3f4f6; }
.btn.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn.primary:hover { background: #1d4ed8; }
.btn.danger { background: #fff; color: #b91c1c; border-color: #fecaca; }
.btn.danger:hover { background: #fef2f2; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.editor-head { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; background: #fff; }
.editor-head input { flex: 1; font-size: 18px; font-weight: 600; border: 1px solid transparent; padding: 6px 8px; border-radius: 6px; }
.editor-head input:focus { outline: none; border-color: #d1d5db; }
.editor-actions { display: flex; gap: 6px; }

/* Byline-style metadata row — quiet labels, underline-on-focus inputs. */
.editor-meta { display: flex; align-items: flex-end; gap: 28px; padding: 4px 14px 10px; border-bottom: 1px solid #e5e7eb; background: #fff; }
.editor-meta label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.editor-meta label.m-pub    { flex: 1.4 1 0; }
.editor-meta label.m-author { flex: 1.6 1 0; }
.editor-meta label.m-date   { flex: 0 0 150px; }
.editor-meta .key { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: #9ca3af; }
.editor-meta input { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 3px 0; font: inherit; font-size: 14px; color: #111827; }
.editor-meta input::placeholder { color: #d1d5db; }
.editor-meta input:hover  { border-bottom-color: #e5e7eb; }
.editor-meta input:focus  { outline: none; border-bottom-color: #6366f1; }
.editor-meta input[type=date] { font-size: 13px; color: #4b5563; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 12px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.toolbar button { background: transparent; border: 1px solid transparent; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; min-width: 28px; }
.toolbar button:hover { background: #e5e7eb; border-color: #d1d5db; }
.toolbar .sep { width: 1px; height: 18px; background: #d1d5db; margin: 0 4px; }

.editor { flex: 1; padding: 24px 32px; overflow-y: auto; font-size: 16px; line-height: 1.6; }
.editor:focus { outline: none; }
.editor h1, .editor h2, .editor h3 { line-height: 1.25; }
.editor blockquote { border-left: 3px solid #d1d5db; margin: 0; padding: 4px 14px; color: #4b5563; }
.editor a { color: #2563eb; }
.editor img { max-width: 100%; height: auto; }

.editor-foot { display: flex; justify-content: space-between; padding: 6px 14px; border-top: 1px solid #e5e7eb; background: #fafafa; font-size: 12px; color: #6b7280; }
.status.saved { color: #059669; }
.status.error { color: #b91c1c; }

dialog { border: 1px solid #d1d5db; border-radius: 8px; padding: 18px 20px; min-width: 380px; }
dialog::backdrop { background: rgba(0, 0, 0, .25); }
dialog h3 { margin: 0 0 12px; }
dialog label { display: block; margin-bottom: 10px; font-size: 13px; color: #374151; }
dialog input { display: block; width: 100%; margin-top: 4px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.dialog-actions button { padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; }
.dialog-actions button.primary { background: #2563eb; color: #fff; border-color: #2563eb; }

/* Users management modal */
.dialog-wide { min-width: 560px; max-width: 720px; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dialog-head h3 { margin: 0; }
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.users-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid #e5e7eb; }
.users-table td { padding: 8px; border-bottom: 1px solid #f3f4f6; }
.users-table .role-admin { background: #fef3c7; color: #92400e; padding: 1px 6px; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.users-table .role-editor { background: #e0e7ff; color: #3730a3; padding: 1px 6px; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.users-table .row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.users-table .row-actions button { font-size: 12px; padding: 3px 8px; }
.users-table .you { color: #6b7280; font-size: 11px; margin-left: 6px; }
.user-add-form { display: grid; grid-template-columns: 1.5fr 1.5fr 0.7fr auto; gap: 8px; align-items: center; }
.user-add-form input, .user-add-form select { padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
dialog h4 { margin: 6px 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }