src/manage-panel.css

.manage-shell { min-height: calc(100vh - 28px); background: #f2f0e8; }
.manage-shell h1 { margin: 22px 0 16px; font-size: clamp(58px, 9vw, 128px); }
.manage-head { display: flex; justify-content: space-between; gap: 30px; padding: 42px 48px; border-bottom: 1px solid var(--ink); background: linear-gradient(120deg,var(--acid) 0 63%,var(--lavender) 63%); }
.manage-head p { font-size: 18px; }
.mp-back { color: var(--ink); font: 700 10px/1 "DM Mono",monospace; text-decoration: none; }
.mp-kicker { display: block; margin-top: 38px; color: var(--blue); font: 700 10px/1 "DM Mono",monospace; letter-spacing: .12em; }
.mp-version { align-self: start; padding: 14px; border: 1px solid var(--ink); background: var(--white); font: 600 9px/1.6 "DM Mono",monospace; }
.mp-compose { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 22px 48px; border-bottom: 1px solid var(--ink); background: var(--ink); color: var(--white); font: 600 10px/1 "DM Mono",monospace; }
.mp-compose b,.mp-compose strong { padding: 10px 12px; border: 1px solid currentColor; }
.mp-compose i { color: var(--acid); font-style: normal; }
.mp-compose strong { background: var(--acid); color: var(--ink); }
.mp-nav { top: 0; padding: 0 48px; }
.mp-nav a { display: grid; place-items: center; min-height: 58px; border-right: 1px solid var(--line); color: var(--ink); font: 700 10px/1 "DM Mono",monospace; text-decoration: none; }
.mp-nav a:first-child { border-left: 1px solid var(--line); }
.mp-nav a:hover { background: var(--acid); }
.mp-content { min-height: 0; padding: 0 48px 150px; }
.mp-section { scroll-margin-top: 60px; border: 1px solid var(--ink); border-top: 0; }
.mp-section > summary,.mp-format > summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 28px; cursor: pointer; list-style: none; }
.mp-section > summary::-webkit-details-marker,.mp-format > summary::-webkit-details-marker { display:none; }
.mp-section > summary span { display: flex; align-items: center; gap: 18px; font-size: 23px; font-weight: 850; }
.mp-section > summary b,.mp-format > summary b { color: var(--blue); font: 700 10px/1 "DM Mono",monospace; }
.mp-section > summary small { color: var(--muted); }
.mp-section[open] > summary { border-bottom: 1px solid var(--ink); background: var(--lavender); }
.mp-section > summary::after { content:"+"; font-size: 25px; }
.mp-section[open] > summary::after { content:"−"; }
.mp-body { padding: 10px 28px 34px; background: #fbfaf5; }
.mp-editor { margin-top: 20px; padding: 18px; border: 1px solid var(--line); background: var(--white); }
.mp-editor > span { color: var(--blue); font: 700 10px/1 "DM Mono",monospace; letter-spacing: .08em; }
.mp-editor textarea { font: 500 13px/1.75 "DM Mono",monospace; tab-size: 2; }
.mp-stack { display: grid; gap: 14px; }
.mp-tokens { display: flex; flex-wrap: wrap; gap: 6px; padding: 17px; border: 1px solid var(--line); border-top: 0; }
.mp-tokens span { width: 100%; margin-bottom: 5px; color: var(--muted); font: 700 9px/1 "DM Mono",monospace; }
.mp-tokens code { padding: 7px 9px; border: 1px solid var(--line); background: var(--paper); color: var(--blue); font-size: 10px; }
.mp-formats { display: grid; gap: 9px; padding-top: 28px; }
.mp-format { border: 1px solid var(--line); background: var(--white); }
.mp-format > summary { padding: 17px 20px; }
.mp-format > summary span { display: flex; gap: 16px; align-items: center; font-weight: 800; }
.mp-format[open] > summary { border-bottom: 1px solid var(--line); background: var(--acid); }
.mp-format .mp-editor { margin: 0; border: 0; }
.mp-save { position: fixed; z-index: 20; right: max(14px,calc((100vw - 1500px)/2 + 14px)); bottom: 14px; left: max(14px,calc((100vw - 1500px)/2 + 14px)); display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 18px 24px; border: 1px solid var(--ink); background: rgba(17,17,15,.96); color: var(--white); box-shadow: 8px 8px 0 rgba(17,17,15,.2); }
.mp-save p { display:grid; gap:5px; margin:0; font-size:11px; }
.mp-save p span { color:#bcb9ad; }
.mp-save button { flex:none; background:var(--acid); color:var(--ink); }
.login-shell { display:grid; place-items:center; overflow:hidden; background:linear-gradient(130deg,var(--acid) 0 55%,var(--lavender) 55%); }
.manage-login { position:relative; z-index:1; width:min(720px,calc(100% - 40px)); padding:55px; border:1px solid var(--ink); background:var(--paper); box-shadow:14px 14px 0 var(--ink); }
.manage-login h1 em { color:var(--blue); font-style:normal; }
.manage-login form { display:grid; gap:18px; margin-top:34px; }
.manage-login form button { justify-self:start; background:var(--blue); }
.mp-auth-error { margin:0; padding:11px 13px; border:1px solid var(--danger); background:#fff0ee; color:var(--danger); font-size:12px; font-weight:750; }
.mp-loading { margin-top:30px; font-family:"DM Mono",monospace; }
@media(max-width:760px){.manage-head{padding:28px 22px}.manage-head h1{font-size:58px}.mp-version{display:none}.mp-compose{padding:18px 20px}.mp-nav{grid-template-columns:repeat(2,1fr);padding:0}.mp-content{padding:0 10px 190px}.mp-section>summary{align-items:flex-start;padding:20px}.mp-section>summary span{font-size:17px}.mp-section>summary small{display:none}.mp-body{padding:5px 14px 24px}.mp-save{display:grid;left:8px;right:8px;bottom:8px}.mp-save button{width:100%}.manage-login{padding:35px 25px}}