:root { --yellow:#ffd400; --ink:#171717; --muted:#686868; --line:#e7e3d8; --paper:#fffdf7; --red:#c81920; --shadow:0 18px 50px rgba(35,31,20,.09); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Segoe UI","Microsoft JhengHei",Arial,sans-serif; line-height:1.65; }
a { color:inherit; }
img { max-width:100%; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,253,247,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav { max-width:1180px; min-height:68px; margin:auto; padding:0 20px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; text-decoration:none; letter-spacing:.04em; }
.brand-mark { width:33px; height:33px; background:var(--yellow); border:7px solid var(--ink); border-radius:50%; }
.nav-links { display:flex; gap:24px; margin-left:auto; }
.nav-links a { text-decoration:none; font-weight:700; }
.lang-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; }
.lang-switch button { border:0; background:transparent; border-radius:999px; padding:7px 11px; cursor:pointer; }
.lang-switch button.active { background:var(--ink); color:#fff; }
.language-control { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.language-label { font-size:.75rem; font-weight:900; color:var(--muted); }
.container { width:min(1120px,calc(100% - 32px)); margin:0 auto; }
.hero { padding:72px 0 52px; background:linear-gradient(135deg,#fff5b7,#fffdf7 55%); border-bottom:1px solid var(--line); }
.eyebrow { font-weight:900; color:var(--red); letter-spacing:.13em; text-transform:uppercase; font-size:.78rem; }
h1,h2,h3 { line-height:1.2; }
.hero h1 { max-width:780px; margin:12px 0 18px; font-size:clamp(2.35rem,7vw,5.4rem); letter-spacing:-.06em; }
.hero p { max-width:650px; color:var(--muted); font-size:1.08rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:8px; padding:12px 18px; background:var(--ink); color:#fff; font-weight:800; text-decoration:none; cursor:pointer; }
.button.yellow { background:var(--yellow); color:var(--ink); }
.button.light { background:#f1eee5; color:var(--ink); }
.button.red { background:var(--red); }
.button.small { padding:8px 12px; font-size:.85rem; }
.section { padding:54px 0; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:22px; }
.section-head h2 { margin:0; font-size:clamp(1.7rem,4vw,2.7rem); letter-spacing:-.04em; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.article-card { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; box-shadow:var(--shadow); transition:transform .18s; }
.article-card:hover { transform:translateY(-4px); }
.card-cover { width:100%; aspect-ratio:16/10; object-fit:cover; background:#eee9da; }
.cover-placeholder { display:grid; place-items:center; font-size:2.5rem; font-weight:900; color:#8a7e57; }
.card-body { padding:19px; }
.card-body h3 { margin:7px 0; font-size:1.25rem; }
.card-body p { margin:0; color:var(--muted); }
.tag { display:inline-block; color:var(--red); font-size:.78rem; font-weight:900; letter-spacing:.06em; }
.empty { padding:34px; border:1px dashed #c8c0aa; border-radius:14px; color:var(--muted); text-align:center; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.filter { padding:8px 13px; border:1px solid var(--line); border-radius:999px; text-decoration:none; background:#fff; }
.filter.active { background:var(--ink); color:#fff; }
.article-shell { width:min(800px,calc(100% - 32px)); margin:0 auto; }
.article-head { padding:52px 0 28px; }
.article-head h1 { margin:10px 0 14px; font-size:clamp(2.1rem,7vw,4.7rem); letter-spacing:-.055em; }
.article-summary { color:var(--muted); font-size:1.12rem; }
.article-cover { width:100%; max-height:520px; object-fit:cover; border-radius:16px; box-shadow:var(--shadow); }
.article-content { padding:34px 0 70px; font-size:1.06rem; }
.article-content h2 { margin-top:2em; font-size:1.8rem; }
.content-image { margin:28px 0; }
.content-image img { display:block; border-radius:12px; box-shadow:var(--shadow); }
.content-image.left img { margin-right:auto; }.content-image.center img { margin:auto; }.content-image.right img { margin-left:auto; }
.content-image figcaption { margin-top:8px; color:var(--muted); text-align:center; font-size:.88rem; }
.zoomable-image { cursor:zoom-in; }
.zoomable-image:focus-visible { outline:4px solid var(--yellow); outline-offset:4px; }
.lightbox-open { overflow:hidden; }
.image-lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.92); overscroll-behavior:none; }
.image-lightbox.open { display:flex; }
.lightbox-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:64px 24px 58px; overflow:hidden; touch-action:none; }
.lightbox-content { max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.lightbox-image { display:block; max-width:min(94vw,1600px); max-height:calc(100vh - 130px); object-fit:contain; border-radius:6px; transform-origin:center center; transition:transform .16s ease; user-select:none; -webkit-user-drag:none; }
.lightbox-image.zoomed { cursor:grab; transition:none; }
.lightbox-caption { max-width:min(90vw,900px); margin:0; color:#fff; text-align:center; font-size:.92rem; }
.lightbox-caption:empty { display:none; }
.lightbox-close { position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.lightbox-close:focus-visible { outline:3px solid var(--yellow); }
.lightbox-hint { position:fixed; z-index:2; left:50%; bottom:max(12px,env(safe-area-inset-bottom)); transform:translateX(-50%); padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.58); color:rgba(255,255,255,.82); font-size:.75rem; white-space:nowrap; pointer-events:none; }
.callout { border-left:5px solid var(--yellow); background:#fff8cf; padding:18px 20px; border-radius:0 10px 10px 0; margin:24px 0; }
.steps { counter-reset:steps; list-style:none; padding:0; }
.steps li { counter-increment:steps; display:flex; gap:13px; margin:14px 0; }
.steps li:before { content:counter(steps); flex:0 0 28px; height:28px; display:grid; place-items:center; background:var(--yellow); border-radius:50%; font-weight:900; }
.footer { border-top:1px solid var(--line); padding:30px 0; color:var(--muted); }
.admin-body { background:#f3f1ea; }
.admin-wrap { width:min(1180px,calc(100% - 28px)); margin:28px auto; }
.admin-bar { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.admin-bar .button:first-of-type { margin-left:auto; }
.panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:18px; box-shadow:0 8px 25px rgba(0,0,0,.04); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
label { display:block; font-size:.82rem; font-weight:800; margin-bottom:5px; }
input,textarea,select { width:100%; border:1px solid #cbc6b8; border-radius:8px; padding:10px 11px; font:inherit; background:#fff; }
textarea { min-height:88px; resize:vertical; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th,td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; }
.actions { display:flex; gap:7px; flex-wrap:wrap; }
.status { border-radius:999px; padding:4px 8px; font-size:.76rem; font-weight:800; background:#eee; }
.status.published { background:#dff6e7; color:#12632d; }
.editor-tabs { display:flex; gap:8px; margin-bottom:15px; }
.editor-tab { border:1px solid var(--line); background:#fff; padding:9px 13px; border-radius:8px; cursor:pointer; }
.editor-tab.active { background:var(--ink); color:#fff; }
.block-toolbar { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.block-list { display:grid; gap:10px; }
.edit-block { border:1px solid var(--line); border-radius:10px; padding:12px; background:#fffdf8; }
.edit-block.dragging { opacity:.45; }
.edit-block.drag-over { border-color:var(--red); box-shadow:0 0 0 3px rgba(200,25,32,.12); }
.block-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:.78rem; font-weight:900; color:var(--muted); }
.block-head .actions { margin-left:auto; }
.block-head button { border:1px solid var(--line); background:#fff; border-radius:6px; cursor:pointer; }
.drag-handle { font-size:1.15rem; cursor:grab; user-select:none; }
.position-label { display:flex; align-items:center; gap:4px; margin:0; font-weight:700; }
.position-label select { width:auto; padding:2px 5px; }
.image-editor { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.block-image-preview { max-width:min(100%,360px); max-height:220px; object-fit:contain; border-radius:8px; }
.replace-image { cursor:pointer; }
.cover-preview { max-width:250px; max-height:150px; display:block; margin-top:10px; border-radius:8px; }
.message { min-height:24px; color:var(--red); font-weight:700; }
.message-toast { position:fixed; z-index:1100; top:14px; left:50%; width:min(520px,calc(100% - 28px)); padding:12px 16px; border:1px solid #c7a128; border-radius:10px; background:#fff5b8; color:#443600; box-shadow:0 12px 34px rgba(0,0,0,.2); font-weight:800; text-align:center; transform:translate(-50%,-150%); opacity:0; pointer-events:none; transition:transform .2s ease,opacity .2s ease; }
.message-toast.show { transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.message-toast.success { border-color:#72b887; background:#e3f7e8; color:#155b2b; }
.message-toast.error { border-color:#dd7a7a; background:#ffebeb; color:#8b1717; }
.hidden { display:none !important; }
@media (max-width:800px) {
  .nav { min-height:60px; padding:8px 14px; flex-wrap:wrap; gap:10px; }
  .nav-links { order:3; width:100%; border-top:1px solid var(--line); padding-top:8px; gap:18px; overflow:auto; }
  .language-control { margin-left:auto; }
  .language-label { display:none; }
  .hero { padding:46px 0 36px; }
  .cards { grid-template-columns:1fr; }
  .section { padding:38px 0; }
  .section-head { align-items:start; flex-direction:column; }
  .form-grid { grid-template-columns:1fr; }
  .admin-bar { align-items:flex-start; flex-wrap:wrap; }
  .admin-bar .button:first-of-type { margin-left:0; }
  .panel { padding:14px; }
  .block-head { align-items:flex-start; flex-wrap:wrap; }
  .block-head .actions { width:100%; margin-left:0; }
  .image-editor { flex-direction:column; }
  .content-image img { width:100% !important; }
  .lightbox-stage { padding:64px 8px 58px; }
  .lightbox-image { max-width:100%; max-height:calc(100dvh - 130px); border-radius:3px; }
  .lightbox-close { width:48px; height:48px; }
  .article-head { padding-top:34px; }
}