:root{--fg:#1f2430;--muted:#6b7280;--line:#e5e7eb;--accent:#2563eb;--side:#f6f7f9;--danger:#b91c1c}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--fg);background:#fff}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.muted{color:var(--muted)}.small{font-size:.85rem}
header.top{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:1.15rem;color:var(--fg)}
header nav{display:flex;gap:14px;flex:1;flex-wrap:wrap}
.search input{padding:6px 10px;border:1px solid var(--line);border-radius:6px;min-width:180px}
.who{display:flex;gap:10px;align-items:center;font-size:.9rem}
.layout{display:flex;min-height:calc(100vh - 56px);}
.side{width:260px;flex:none;background:var(--side);border-right:1px solid var(--line);padding:16px}
.side h3{margin:0 0 10px}.side ul{list-style:none;margin:4px 0 12px;padding-left:10px}
.side li.on a{font-weight:700;color:var(--fg)}
.main{flex:1;padding:24px 32px;max-width:960px;min-width:0;margin-left:auto;
margin-right:auto;
width:90%;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:10px;color:var(--fg)}
.card:hover{border-color:var(--accent);text-decoration:none}.card span{color:var(--muted);font-size:.9rem}
.btn,button{font:inherit;padding:6px 12px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;color:var(--fg);display:inline-block}
.btn:hover,button:hover{background:var(--side);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.danger{color:var(--danger);border-color:#f3c5c5}
button.link{border:0;background:none;color:var(--accent);padding:0}
form.inline{display:inline}
.badge{font-size:.7rem;background:#dcfce7;color:#166534;padding:2px 8px;border-radius:99px;vertical-align:middle}
.crumbs{color:var(--muted);font-size:.9rem}
.form{display:flex;flex-direction:column;gap:14px;max-width:460px}.form.wide{max-width:none}
.form label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.9rem}
.form label.check{flex-direction:row;align-items:center;gap:8px;font-weight:400}
.form input:not([type=checkbox]),.form textarea,.form select{padding:8px 10px;border:1px solid var(--line);border-radius:6px;font:inherit}
.error{color:var(--danger)}
.table{border-collapse:collapse;width:100%}.table th,.table td{border-bottom:1px solid var(--line);padding:8px;text-align:left}
.result{margin-bottom:14px}.result p{margin:2px 0}mark{background:#fef08a}
.content img{max-width:100%;height:auto}
.content pre{background:#f3f4f6;padding:12px;border-radius:6px;overflow:auto}
.content blockquote{border-left:4px solid var(--line);margin-left:0;padding-left:14px;color:var(--muted)}
.content table{border-collapse:collapse}.content td,.content th{border:1px solid var(--line);padding:6px 10px}
.ql-align-center{text-align:center}.ql-align-right{text-align:right}.ql-align-justify{text-align:justify}
.ql-indent-1{padding-left:3em}.ql-indent-2{padding-left:6em}.ql-indent-3{padding-left:9em}
#editor{height:420px;margin-bottom:12px;background:#fff}
@media (max-width:800px){.layout{flex-direction:column}.side{width:auto;border-right:0;border-bottom:1px solid var(--line)}.main{padding:16px}}
body.print{padding:24px;max-width:800px;margin:auto}
@media print{header.top,.side,.actions,.muted.small{display:none!important}.layout{display:block}.main{padding:0;max-width:none}a{color:inherit}}
.notice{background:#fef9c3;border:1px solid #fde68a;padding:10px 14px;border-radius:8px;margin-bottom:16px}
.badge.warn{background:#fee2e2;color:#991b1b}
/* Centered layout, 90% of the window width */
header.top { padding-left: 5%; padding-right: 5%; }   /* header line stays full width, content sits in the 90% area */
.layout    { width: 90%; margin: 0 auto; }
.main      { max-width: none; }                       /* remove the old 960px limit */

@media (max-width: 800px) {
  .layout { width: 100%; }                            /* use the whole screen on phones */
  header.top { padding-left: 16px; padding-right: 16px; }
}
@media print {
  .layout { width: 100%; }
}