:root{--dark:#25252b;--ink:#292a32;--muted:#747882;--line:#d8dade;--paper:#f7f7f8;--lime:#ceef26}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}button,input,textarea,select{font:inherit}
.editor-topbar{min-height:86px;background:var(--dark);color:#fff;display:grid;grid-template-columns:320px 1fr auto;align-items:center;padding:0 54px;gap:28px}
.editor-brand{display:flex;align-items:center;gap:3px;color:#fff;text-decoration:none;font-weight:950;letter-spacing:-.055em;font-size:1.7rem}.editor-brand b{background:var(--lime);color:#1c1d20;padding:2px 6px;border-radius:5px;font-size:1rem;letter-spacing:-.02em}
.editor-label{font-size:.78rem;letter-spacing:.15em;color:#c6c7cb}.editor-nav{display:flex;gap:54px}.editor-nav a{color:#d7d8db;text-decoration:none;font-size:.88rem}
.editor-shell{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:calc(100vh - 86px)}.drafts-panel{border-right:1px solid var(--line);background:#f2f2f3}.drafts-sticky{position:sticky;top:0;padding:28px 22px 50px}
.drafts-panel h1{font-size:1.35rem;font-weight:500;margin:0 0 18px}.new-draft{border:0;background:#303136;color:var(--lime);font-weight:800;padding:11px 15px;border-radius:5px;cursor:pointer}
.search-label{display:block;font-size:.85rem;margin:30px 0 8px}.draft-search{width:100%;border:1px solid #cfd1d7;background:#fff;border-radius:4px;padding:12px}.draft-count{font-size:.8rem;color:#6b6e76;margin:11px 0 16px}
.draft-list{display:grid;gap:12px}.draft-card{width:100%;text-align:left;border:1px solid #d6d8dc;background:#f8f8f8;border-radius:8px;padding:14px;cursor:pointer}.draft-card:hover,.draft-card.is-active{border-color:#aeb1b9;background:#fff}
.draft-card .badge{font-size:.68rem;font-weight:900;color:#656971;text-transform:uppercase}.draft-card h3{font-size:.95rem;line-height:1.35;margin:7px 0}.draft-card time{font-size:.72rem;color:#777b84}
.editor-main{padding:36px 62px 80px;max-width:1040px;width:100%}.editor-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.eyebrow{font-size:.72rem;letter-spacing:.18em;color:#727680;font-weight:800;margin:6px 0 13px}
.editor-heading h2{font-size:3.25rem;line-height:.92;letter-spacing:-.055em;margin:0 0 24px}.draft-status{font-size:.75rem;color:#747780;margin-top:17px}
.mode-note{border-left:2px solid #5d718e;padding:8px 0 8px 12px;color:#666b75;font-size:.86rem;margin-bottom:28px}.article-form{display:grid;gap:0}.form-section{border-top:1px solid #e2e3e6;padding:22px 0}.form-section:first-of-type{border-top:0}
.form-section h3{font-size:.95rem;margin:0 0 14px;font-weight:600}label{display:block;font-size:.82rem;margin:15px 0 7px}input[type="text"],input[type="search"],textarea,select{width:100%;border:1px solid #cfd1d7;background:#fff;border-radius:3px;padding:12px;color:#25262c}
textarea{resize:vertical;line-height:1.5}input[type="file"]{width:100%;border:1px solid #cfd1d7;background:#fff;border-radius:3px;padding:8px}.hint{color:#6f737b;font-size:.78rem;line-height:1.45;margin:7px 0 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px}.image-preview{margin-top:14px;border:1px solid var(--line);background:#fff;padding:10px;max-width:520px}.image-preview img{display:block;width:100%;max-height:260px;object-fit:cover}.image-preview button{margin-top:8px;border:0;background:none;text-decoration:underline;cursor:pointer;color:#555}
.form-footer{display:flex;align-items:end;justify-content:space-between;gap:22px}.form-footer>div:first-child{min-width:180px}.actions{display:flex;gap:10px}.primary,.secondary{border-radius:5px;padding:11px 16px;font-weight:800;cursor:pointer}.primary{border:0;background:#303136;color:var(--lime)}.secondary{border:1px solid #bfc2c8;background:#fff;color:#3c3e44}
@media(max-width:900px){.editor-topbar{grid-template-columns:1fr auto;padding:0 20px}.editor-label{display:none}.editor-nav{gap:16px}.editor-shell{grid-template-columns:1fr}.drafts-panel{border-right:0;border-bottom:1px solid var(--line)}.drafts-sticky{position:static}.editor-main{padding:30px 20px 60px}.two-col{grid-template-columns:1fr}.editor-heading h2{font-size:2.5rem}}
@media(max-width:620px){.editor-nav{display:none}.editor-topbar{grid-template-columns:1fr}.form-footer{align-items:stretch;flex-direction:column}.actions{width:100%}.actions button{flex:1}}
.editor-tools{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(280px,1fr);gap:22px;margin:8px 0 28px}
.editor-tools>div,.live-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px}
.tool-label{display:block;font-size:.68rem;letter-spacing:.13em;font-weight:900;color:#686c75;margin-bottom:12px}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.checklist li{font-size:.82rem;color:#858991;display:flex;align-items:center;gap:8px}
.checklist li::before{content:"";width:9px;height:9px;border:1px solid #aeb2ba;border-radius:50%}
.checklist li.ok{color:#30343a;font-weight:700}
.checklist li.ok::before{background:var(--lime);border-color:#9aaa16;box-shadow:inset 0 0 0 2px #fff}
.live-card{padding:0;overflow:hidden}
.live-image{height:128px;background:linear-gradient(135deg,#dadce1,#f6f6f7);display:grid;place-items:center;color:#888d97;font-size:.78rem;background-size:cover;background-position:center}
.live-category{display:block;color:#849b00;font-size:.68rem;font-weight:900;padding:14px 16px 0}
.live-card h3{font-size:1.05rem;line-height:1.2;margin:7px 16px 8px}
.live-card p{font-size:.8rem;line-height:1.45;color:#72767f;margin:0 16px 17px}
.danger{border:1px solid #d1a5a5;background:#fff;color:#924343;border-radius:5px;padding:11px 16px;font-weight:800;cursor:pointer}
.danger[hidden]{display:none}
.save-flash{animation:saveFlash .7s ease}
@keyframes saveFlash{0%{background:#e9f6a5}100%{background:transparent}}
@media(max-width:900px){.editor-tools{grid-template-columns:1fr}}

.session-user{font-size:.76rem;color:#c9cbd0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-button{border:1px solid #555860;background:transparent;color:#fff;border-radius:5px;padding:8px 10px;cursor:pointer;font-size:.78rem}
.logout-button:hover{border-color:#777b84}
.auth-gate{min-height:calc(100vh - 86px);display:grid;place-items:center;padding:36px 20px;background:linear-gradient(135deg,#efeff1,#fafafa)}
.auth-card{width:min(520px,100%);background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.auth-brand{display:inline-flex;align-items:center;gap:4px;font-weight:950;letter-spacing:-.05em;font-size:1.55rem;color:#27282e}
.auth-brand b{background:var(--lime);padding:2px 6px;border-radius:5px;font-size:1rem}
.auth-kicker{font-size:.7rem;letter-spacing:.14em;font-weight:900;color:#747882;margin:24px 0 10px}
.auth-card h1{font-size:2rem;line-height:1.08;letter-spacing:-.035em;margin:0 0 12px}
.auth-copy{color:#6d7179;line-height:1.55;font-size:.92rem;margin-bottom:24px}
.login-form label{margin-top:13px}
.login-form input{width:100%;border:1px solid #cfd1d7;background:#fff;border-radius:5px;padding:12px}
.auth-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.auth-message{min-height:22px;margin:12px 0 0;font-size:.82rem;color:#666b75}
.auth-message.error{color:#a33a3a}
.auth-message.success{color:#4d6511}
.sync-status{font-size:.72rem;color:#6f737b;margin-top:8px}
@media(max-width:620px){.auth-card{padding:24px 18px}.auth-actions{flex-direction:column}.auth-actions button{width:100%}}

.auth-help{margin:12px 0 0;font-size:.8rem;line-height:1.45;color:#747882}
.auth-actions .primary{width:100%}


/* Ensure the HTML hidden attribute wins over component display rules. */
.auth-gate[hidden],
.editor-shell[hidden],
.session-user[hidden],
.logout-button[hidden]{
  display:none !important;
}

.publish-button{
  border:0;
  background:#b9f400;
  color:#11151b;
  font:inherit;
  font-weight:800;
  padding:.9rem 1.1rem;
  border-radius:4px;
  cursor:pointer;
}
.publish-button:hover{filter:brightness(.96)}
.publish-button:disabled{opacity:.55;cursor:wait}