:root { color-scheme: light; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #14213d; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 3rem); background: #14213d; color: white; }
.topbar > div { display: flex; align-items: center; gap: .75rem; }
.mark { display: grid; place-items: center; width: 2.3rem; aspect-ratio: 1; border-radius: .75rem; background: #fca311; color: #14213d; font-weight: 900; }
main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 0; }
h1 { margin: .2rem 0; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.eyebrow { margin: 0; color: #b45309; font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.login-card { width: min(440px, 100%); margin: 6vh auto; padding: 2rem; border: 1px solid #dbe2ef; border-radius: 1.25rem; background: white; box-shadow: 0 18px 55px rgb(20 33 61 / .08); }
form, .filters { display: grid; gap: 1rem; }
form { margin-top: 2rem; }
label { display: grid; gap: .4rem; color: #4b5563; font-size: .85rem; font-weight: 700; }
.fixed-email { display: grid; gap: .4rem; padding: .7rem .8rem; border: 1px solid #dbe2ef; border-radius: .7rem; background: #f8fafc; }
.fixed-email span { color: #4b5563; font-size: .75rem; font-weight: 700; }
.fixed-email strong { overflow-wrap: anywhere; }
input, select, textarea { width: 100%; min-height: 2.8rem; padding: .65rem .8rem; border: 1px solid #c8d1df; border-radius: .7rem; background: white; color: #14213d; }
textarea { resize: vertical; line-height: 1.6; }
button { min-height: 2.8rem; padding: .65rem 1rem; border: 0; border-radius: .7rem; background: #fca311; color: #14213d; font-weight: 800; cursor: pointer; }
.secondary { min-height: auto; background: transparent; color: white; border: 1px solid rgb(255 255 255 / .45); }
.heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; flex-wrap: wrap; }
.status { min-height: 1.4em; color: #637083; }
.filters { grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 200px)); margin-bottom: 1rem; }
.table-wrap { overflow-x: auto; border: 1px solid #dbe2ef; border-radius: 1rem; background: white; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: .88rem; }
th, td { padding: .8rem .9rem; border-bottom: 1px solid #edf0f5; text-align: left; }
th { background: #f8fafc; color: #526074; font-size: .75rem; text-transform: uppercase; }
.visibility-toggle { display: inline-flex; grid-auto-flow: column; align-items: center; gap: .45rem; color: #14213d; cursor: pointer; }
.visibility-toggle input { width: 2.8rem; min-height: 1.5rem; margin: 0; accent-color: #16a34a; cursor: pointer; }
.visibility-toggle input:disabled { cursor: not-allowed; opacity: .55; }
.app-title-cell { display: flex; align-items: center; gap: .55rem; }
.copy-url { min-height: 1.9rem; padding: .28rem .55rem; border: 1px solid #c8d1df; border-radius: .5rem; background: #f8fafc; color: #14213d; font-size: .72rem; white-space: nowrap; }
.copy-url:hover { background: #e8eef7; }
.copy-url:disabled { cursor: wait; opacity: .7; }
.admin-tabs { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: -1rem 0 1.5rem; padding: .55rem; border: 1px solid #dbe2ef; border-radius: 1rem; background: rgb(245 247 251 / .96); backdrop-filter: blur(8px); }
.admin-tab { background: white; border: 1px solid #dbe2ef; }
.admin-tab.active { background: #14213d; color: white; }
.newsletter-edit { min-height: 2rem; padding: .35rem .65rem; font-size: .78rem; white-space: nowrap; }
.newsletter-card { margin: 0 0 1.2rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #dbe2ef; border-radius: 1rem; background: white; box-shadow: 0 10px 30px rgb(20 33 61 / .05); }
.newsletter-card h2, .newsletter-card h3 { margin: 0; }
.newsletter-card h3 { margin-top: 1.4rem; font-size: 1rem; }
.section-heading, .section-heading > div, .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.section-heading > div { justify-content: flex-start; }
.section-number { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border-radius: 999px; background: #16a34a; color: white; font-weight: 900; }
.count-badge { padding: .4rem .7rem; border-radius: 999px; background: #eef6ff; color: #1d4ed8; font-size: .8rem; font-weight: 800; }
.editor-form { display: grid; gap: 1rem; }
.button-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.button-row .light, button.light { border: 1px solid #c8d1df; background: #f8fafc; }
button.danger { background: #b91c1c; color: white; }
.history-list, .topic-list, .step-list { display: grid; gap: .7rem; margin-top: .8rem; }
.history-item, .topic-item, .step-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem; border: 1px solid #e3e8f0; border-radius: .75rem; }
.history-item small, .topic-item small, .step-item small { display: block; color: #637083; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.check-row { display: flex; align-items: center; gap: .55rem; min-height: 2.8rem; }
.check-row input { width: 1.3rem; min-height: 1.3rem; }
.editor-dialog { width: min(860px, calc(100% - 1rem)); max-height: calc(100vh - 2rem); padding: 1.2rem; border: 0; border-radius: 1rem; color: #14213d; box-shadow: 0 20px 80px rgb(15 23 42 / .28); overflow: auto; }
.editor-dialog.small { width: min(640px, calc(100% - 1rem)); }
.editor-dialog::backdrop { background: rgb(15 23 42 / .55); }
.dialog-heading { margin-bottom: 1rem; }
.dialog-heading h2 { margin: 0; }
.mail-preview { white-space: pre-wrap; line-height: 1.75; }
.mail-preview h3 { white-space: normal; }
.step-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.step-actions button { min-height: 2rem; padding: .3rem .55rem; font-size: .75rem; }
.empty { padding: 2rem; text-align: center; color: #637083; }
.operations { margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid #dbe2ef; border-radius: 1rem; background: white; }
.operations h2 { margin: 0 0 .8rem; font-size: 1rem; }
.operations dl { display: grid; gap: .55rem; margin: 0; }
.operations dl > div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: .7rem; }
.operations dt { color: #637083; font-size: .8rem; font-weight: 700; }
.operations dd { margin: 0; overflow-wrap: anywhere; }
.blog-layout { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.5fr); gap: 1rem; align-items: start; }
.blog-post-list { display: grid; gap: .65rem; margin-top: 1rem; }
.blog-post-button { width: 100%; display: grid; gap: .25rem; min-height: auto; padding: .85rem; border: 1px solid #dbe2ef; background: #f8fafc; text-align: left; }
.blog-post-button:hover, .blog-post-button.active { border-color: #fca311; background: #fff7e6; }
.blog-post-button small { color: #637083; font-weight: 600; }
.blog-images { display: grid; gap: .8rem; padding: 1rem; border: 1px solid #e3e8f0; border-radius: .8rem; background: #f8fafc; }
.blog-images h3 { margin: 0; }
.image-help { margin: 0; color: #637083; font-size: .82rem; }
.blog-image-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }
.blog-image-card { display: grid; gap: .45rem; padding: .5rem; border: 1px solid #dbe2ef; border-radius: .7rem; background: white; }
.blog-image-card img { width: 100%; aspect-ratio: 1; border-radius: .45rem; object-fit: cover; background: #e8eef7; }
.blog-image-card button { min-height: 2rem; padding: .3rem .5rem; font-size: .76rem; }
@media (max-width: 640px) { .filters, .form-grid { grid-template-columns: 1fr; } .topbar { padding: .8rem 1rem; } main { width: min(100% - 1rem, 1180px); padding-top: 1rem; } .heading { align-items: start; flex-direction: column; } .heading-actions { justify-content: space-between; width: 100%; } .operations dl > div { grid-template-columns: 1fr; gap: .15rem; } .section-heading { align-items: flex-start; } .history-item, .topic-item, .step-item { align-items: stretch; flex-direction: column; } .step-actions button { flex: 1; } }
@media (max-width: 760px) { .blog-layout { grid-template-columns: 1fr; } .admin-tabs { grid-template-columns: 1fr; } }