:root { color-scheme: dark; --green: #78e08f; --ink: #f5f7f4; --muted: #a9b3ab; --panel: rgba(17, 24, 20, .9); --danger: #ff9b9b; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; padding: clamp(1rem, 4vw, 3rem); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: radial-gradient(circle at 15% 10%, rgba(120,224,143,.15), transparent 28rem), #080c09; }
main { width: min(100%, 860px); margin: auto; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.back, .header-actions a { color: var(--green); font-weight: 800; text-decoration: none; }
.eyebrow { margin: 1.25rem 0 .35rem; color: var(--green); font-size: .73rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.3rem, 7vw, 4.4rem); letter-spacing: -.055em; }
.subtitle, .meta, .empty { color: var(--muted); }
.subtitle { margin: .5rem 0 0; }
.news-search { width: min(100%, 360px); margin-top: 1rem; }
.news-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.45rem 0 .9rem; }
.news-tags button { padding: .2rem .45rem; color: var(--green); font-size: .72rem; border-radius: 999px; }
.news-actions { display: flex; gap: .45rem; margin: .2rem 0 .8rem; }
.news-actions button { padding: .35rem .55rem; font-size: .72rem; }
.editor-preview { margin-top: 1rem; }
.editor-preview .news-content { display: block; overflow: visible; -webkit-line-clamp: unset; }
.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
button, .header-actions a { padding: .65rem .85rem; font: inherit; font-weight: 750; border: 1px solid rgba(120,224,143,.28); border-radius: 10px; background: rgba(120,224,143,.08); cursor: pointer; }
.format-help-button { width: 2.35rem; padding: 0; color: var(--green); font-size: 1.25rem; border-radius: 50%; }
.editor, .news-post { padding: clamp(1rem, 4vw, 1.7rem); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: var(--panel); box-shadow: 0 20px 55px rgba(0,0,0,.18); }
.editor { margin-bottom: 1rem; }
.editor h2, .news-post h2 { margin: 0; }
.editor label { display: block; margin: 1rem 0 .4rem; font-weight: 750; }
.format-tools-toggle { margin: .1rem 0 .45rem; padding: .2rem 0; color: var(--muted); font-size: .72rem; font-weight: 650; border: 0; background: transparent; }
.format-tools-toggle:hover { color: var(--green); background: transparent; }
.format-tools { margin: 0 0 .6rem; padding: .45rem; display: flex; flex-wrap: wrap; gap: .25rem; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.025); }
.format-tools button { padding: .25rem .4rem; color: var(--muted); font-size: .67rem; font-weight: 650; border: 0; border-radius: 5px; background: transparent; }
.format-tools button:hover { color: var(--ink); background: rgba(120,224,143,.1); }
.editor label span { color: var(--muted); font-size: .78rem; font-weight: 500; }
input, textarea { width: 100%; padding: .75rem; color: var(--ink); font: inherit; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; outline: none; background: rgba(255,255,255,.05); }
textarea { min-height: 180px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--green); }
.form-error { min-height: 1.2rem; margin: .7rem 0 0; color: var(--danger); }
.editor-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.secondary { color: var(--muted); border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.05); }
.news-list { display: grid; gap: 1rem; }
.meta { margin: .4rem 0 1rem; font-size: .82rem; }
.news-content { line-height: 1.65; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.news-post.expanded .news-content { display: block; }
.news-content h1, .news-content h2, .news-content h3 { margin: .6rem 0; font-size: 1.1rem; letter-spacing: 0; }
.news-content img { max-width: 100%; margin: .65rem 0; border-radius: 10px; }
.news-content a { color: var(--green); }
.news-content code { padding: .08rem .3rem; border-radius: 4px; background: rgba(255,255,255,.09); }
.special-highlight { padding: .04em .18em; color: #162016; border-radius: .2em; background: rgba(255, 225, 105, .82); }
.spoiler { margin: .7rem 0; padding: .1rem .75rem .65rem; border: 1px solid rgba(120,224,143,.3); border-radius: 11px; background: rgba(120,224,143,.06); }
.spoiler summary { padding: .5rem 0; color: var(--green); font-weight: 800; cursor: pointer; user-select: none; }
.spoiler > div { padding-top: .5rem; border-top: 1px solid rgba(120,224,143,.18); line-height: 1.6; }
.code-block { margin: .9rem 0; padding: 1rem 1.1rem; overflow-x: auto; color: #d9f7e2; border: 1px solid rgba(120,224,143,.24); border-radius: 11px; background: #0b120e; }
.code-block code { display: block; color: inherit; font: .86rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.code-block code[data-language]::before { display: block; margin-bottom: .5rem; content: attr(data-language); color: var(--green); font: 800 .68rem/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.markdown-table-wrap { max-width: 100%; margin: .9rem 0; overflow-x: auto; border: 1px solid rgba(120,224,143,.22); border-radius: 11px; }
.markdown-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: .9rem; }
.markdown-table th, .markdown-table td { padding: .68rem .75rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.09); }
.markdown-table th { color: var(--green); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; background: rgba(120,224,143,.08); }
.markdown-table tr:last-child td { border-bottom: 0; }
.special-underline { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: .16em; }
.read-more { margin-top: 1rem; color: var(--green); border: 0; background: transparent; padding: 0; }
.loading { color: var(--muted); text-align: center; }
.formatting-dialog { width: min(calc(100% - 2rem), 540px); padding: 1.4rem; color: var(--ink); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: #151c18; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
.formatting-dialog::backdrop { background: rgba(2,5,3,.8); backdrop-filter: blur(5px); }
.formatting-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.formatting-dialog h2 { margin: 0; font-size: 1.15rem; }
.formatting-dialog h3 { margin: 1.1rem 0 .35rem; color: var(--green); font-size: .86rem; text-transform: uppercase; letter-spacing: .06em; }
.formatting-dialog header button { padding: 0; color: var(--ink); font-size: 1.35rem; cursor: pointer; border: 0; background: transparent; }
.formatting-dialog p { color: var(--muted); line-height: 1.55; }
.formatting-dialog code { padding: .12rem .3rem; color: var(--ink); border-radius: 5px; background: rgba(255,255,255,.09); }
.formatting-dialog .color-codes { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .78rem; }
@media (max-width: 600px) { .page-header { flex-direction: column; } .header-actions { justify-content: flex-start; } }