@import url('./assets/apple-tokens.css');
:root{--font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--bg:#fff;--bg-secondary:#f5f5f4;--bg-tertiary:#ebebe9;--label:#242424;--label-secondary:#646462;--separator:#e4e4e1;--border:#aaa9a5;--accent:#242424;--on-accent:#fff;--error:#ac3030;--text-body:16px;--small:13px;--medium:14px;--title:22px;--large:32px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--layer-nav:5;--layer-toast:20}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1b1b1a;--bg-secondary:#232322;--bg-tertiary:#333332;--label:#f0f0ec;--label-secondary:#b4b4af;--separator:#3b3b38;--border:#787874;--accent:#f0f0ec;--on-accent:#242424;--error:#ffaaa3}}
*{box-sizing:border-box}body{margin:0;line-height:1.5}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;min-height:44px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 16px;background:var(--bg);display:inline-flex;align-items:center;justify-content:center;gap:8px}button:hover{background:var(--bg-secondary)}button:active{background:var(--bg-tertiary)}:is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--label);outline-offset:4px}a{color:inherit;text-decoration:none}.icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}h1,h2,h3,p{margin:0}h1,h2,h3,strong,b{font-weight:600}small{font-size:var(--small)}.sidebar{width:232px;position:fixed;inset:0 auto 0 0;background:var(--bg-secondary);padding:32px 20px;display:flex;flex-direction:column;gap:24px}.brand{display:flex;gap:12px;align-items:center;font-size:var(--title);font-weight:600;line-height:1.35;letter-spacing:-.02em}.brand-icon{display:flex;align-items:center}.brand-icon .icon{width:28px;height:28px}.side-label{font-size:var(--small);color:var(--label-secondary);padding:16px 12px 0}nav{display:grid;gap:4px}nav button{width:100%;justify-content:flex-start;background:transparent;border:0;font-size:var(--medium);padding:12px;gap:12px;color:var(--label-secondary)}nav button.active{background:var(--bg-tertiary);color:var(--label);font-weight:500}nav b{margin-left:auto;font-size:var(--small);font-variant-numeric:tabular-nums}.side-note{margin-top:auto;display:grid;gap:12px;font-size:var(--small);color:var(--label-secondary)}.side-note p{line-height:1.8}.text{border:0;background:transparent;padding:0;justify-content:flex-start;font-size:var(--small);color:var(--label-secondary)}.profile{display:flex;align-items:center;gap:12px;border-top:1px solid var(--separator);padding-top:24px;font-size:var(--medium)}.profile small{display:block;color:var(--label-secondary);margin-top:4px}.avatar{display:inline-grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:9999px;background:var(--bg-tertiary);font-size:var(--medium);font-weight:500}main{margin-left:232px}header{height:80px;padding:0 40px;border-bottom:1px solid var(--separator);display:flex;justify-content:space-between;align-items:center;font-size:var(--medium);color:var(--label-secondary)}header b{color:var(--label);font-weight:500}.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.primary:hover,.primary:active{background:var(--accent);opacity:.85}.page{max-width:1400px;margin:auto;padding:40px}.heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px}.heading>div{display:grid;gap:8px}h1{font-size:var(--large);letter-spacing:-.03em;line-height:1.25}.heading p{font-size:var(--medium);color:var(--label-secondary)}.demo-note{font-size:var(--small);line-height:1.8;color:var(--label-secondary);padding-bottom:24px}.demo-note span{margin-left:12px}.tools{padding-bottom:8px}.search{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius-sm);height:48px;padding:0 16px}.search:focus-within{outline:2px solid var(--label);outline-offset:2px}.search>span{display:flex;color:var(--label-secondary)}.search input{width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;padding:0!important}.search kbd{color:var(--label-secondary);border:1px solid var(--separator);border-radius:4px;padding:0 8px}.categories{display:flex;flex-wrap:wrap;gap:4px;padding:16px 0 8px}.categories button{border-color:transparent;background:transparent;font-size:var(--medium);padding:8px 16px;color:var(--label-secondary)}.categories button.active{background:var(--bg-tertiary);color:var(--label);font-weight:500}.filters{display:flex;align-items:center;gap:20px;font-size:var(--small);color:var(--label-secondary)}.filters label{display:flex;align-items:center;gap:8px;min-height:44px}.filters select{border:0;min-height:44px;background:var(--bg);font-size:16px}.result-count{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.layout{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:32px}.card{padding:24px 0;border-top:1px solid var(--separator)}.card-top{display:flex;align-items:center;gap:12px}.byline{font-size:var(--medium);font-weight:500}.byline small{display:block;color:var(--label-secondary);font-weight:400;margin-top:4px}.status{margin-left:auto;font-size:var(--small);color:var(--label-secondary);white-space:nowrap}.card h2{font-size:var(--title);line-height:1.5;letter-spacing:-.02em;padding:16px 0 8px}.title-button{font:inherit;min-height:44px;display:block;text-align:left;padding:0;border:0;background:transparent}.title-button:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}.tags{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--small);color:var(--label-secondary)}.tag+.tag{border-left:1px solid var(--separator);padding-left:12px}.connection{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:20px 0}.connection strong{font-size:var(--small);font-weight:500;color:var(--label-secondary)}.connection p{font-size:var(--medium);line-height:1.85;margin-top:8px;overflow-wrap:anywhere}.card-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--small);color:var(--label-secondary)}.actions{display:flex;gap:8px;margin-left:auto}.actions button{font-size:var(--small);padding:8px 12px}.bookmark{border-color:transparent}.bookmark.saved{background:var(--bg-tertiary);color:var(--label)}.connect{border-color:var(--separator);color:var(--label)}.rail{padding-top:24px;border-top:1px solid var(--separator)}.rail-box{display:grid;gap:16px}.small-label{font-size:var(--small);color:var(--label-secondary)}.rail-box h2{font-size:var(--title);letter-spacing:-.02em;line-height:1.5}.rail-box p,.guide p{font-size:var(--small);color:var(--label-secondary);line-height:1.85}.rail-box button{font-size:var(--medium)}.guide{display:grid;gap:12px;padding:32px 0}.guide h3{font-size:var(--medium)}.footnote{border-top:1px solid var(--separator);padding-top:20px;font-size:var(--small);color:var(--label-secondary)}.admin-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg-secondary);padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:var(--small)}[hidden]{display:none!important}.admin-bar span{margin-left:auto;color:var(--label-secondary)}.admin-bar label{display:flex;align-items:center;min-height:44px;gap:8px}.admin-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}.admin-actions button{font-size:var(--small)}.admin-actions [data-action=hide]{margin-left:auto}.empty{padding:48px 20px;display:grid;gap:16px;justify-items:center;text-align:center;border-top:1px solid var(--separator)}.empty h2{font-size:var(--title)}.empty p{font-size:var(--medium);color:var(--label-secondary)}dialog{border:1px solid var(--separator);border-radius:16px;padding:32px;width:min(680px,calc(100% - 32px));max-height:calc(100dvh - 32px);background:var(--bg);color:var(--label);box-shadow:var(--shadow-4)}dialog::backdrop{background:#0007}dialog h2{font-size:var(--title);line-height:1.5;letter-spacing:-.02em;margin:12px 40px 24px 0}.close{position:absolute;right:12px;top:12px;min-width:44px;padding:8px;border:0;background:transparent}.eyebrow{font-size:var(--small);color:var(--label-secondary);padding-right:40px}input:not([type=checkbox]),textarea{border:1px solid var(--border);border-radius:8px;padding:12px;background:var(--bg);font-size:16px}input::placeholder,textarea::placeholder{color:var(--label-secondary)}form>label{display:block;margin-top:16px;font-size:var(--medium)}form input:not([type=checkbox]),form textarea{display:block;width:100%;margin-top:8px}textarea{min-height:88px;resize:vertical}.hint{font-size:var(--small);color:var(--label-secondary);margin-left:8px}.check-categories{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.check-categories label{display:flex;align-items:center;gap:8px;font-size:var(--medium);min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:8px}.check-categories label:has(:checked){background:var(--bg-tertiary);border-color:var(--label)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;font-size:var(--medium)}form .consent{display:flex;gap:8px;align-items:flex-start;line-height:1.8;font-size:var(--small);color:var(--label-secondary)}.form-error{color:var(--error);font-size:var(--medium);padding:12px 0}.wide{width:100%}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--separator)}.detail-grid span,.detail-section h3{font-size:var(--small);color:var(--label-secondary);font-weight:500}.detail-grid p{font-size:var(--medium);margin-top:8px}.detail-section{display:grid;gap:8px;padding-top:24px}.detail-section p{white-space:pre-line;line-height:1.85}.notice{font-size:var(--small);line-height:1.8;padding:16px;background:var(--bg-secondary);border-radius:12px;margin-top:24px;color:var(--label-secondary)}.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}ol{padding-left:24px}li{font-size:var(--medium);line-height:1.85;padding:4px 0}#toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);border-radius:8px;padding:12px 20px;font-size:var(--medium);opacity:0;pointer-events:none;transition:opacity .15s;z-index:var(--layer-toast);max-width:90vw}#toast.show{opacity:1}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}dialog[open]~#toast{z-index:var(--layer-toast)}
@media(max-width:1200px){.rail{display:none}.layout{grid-template-columns:1fr}}
@media(max-width:800px){.sidebar{width:200px;padding:24px 12px}.brand{font-size:20px}main{margin-left:200px}.page{padding:24px}header{padding:0 24px}}
@media(max-width:700px){.sidebar{position:static;width:100%;padding:20px 16px 0;gap:16px}.brand{font-size:20px}.brand br,.side-label,.side-note,.profile{display:none}.brand-icon .icon{width:24px;height:24px}nav{display:flex;gap:4px}nav button{flex:1;justify-content:center;white-space:nowrap;padding:12px 4px;font-size:var(--small);border-radius:8px 8px 0 0}nav .icon,nav b{display:none}main{margin:0}header{height:72px;padding:0 16px;font-size:var(--small)}header button{font-size:var(--medium)}.page{padding:24px 16px calc(32px + env(safe-area-inset-bottom))}h1{font-size:28px}.demo-note span{display:block;margin:4px 0 0}.categories{gap:4px}.categories button{padding:8px 12px}.filters{gap:8px;flex-wrap:wrap}.filters label{gap:4px}.filters select{max-width:116px}.card h2{font-size:20px}.byline{min-width:0}.byline small{line-height:1.6}.connection{gap:16px}.card-bottom .actions{width:100%;justify-content:flex-end}.form-row{grid-template-columns:1fr}dialog{padding:24px 20px}.detail-grid{gap:16px}.detail-actions button{flex:1;white-space:nowrap}.admin-bar span{display:none}}
@media(prefers-contrast:more){:root{--separator:var(--border)}button{border-color:var(--label)}}

/* Quiet editorial canvas; Liquid Glass is reserved for interactive surfaces. */
:root{--glass:rgba(255,255,255,.65);--glass-hover:rgba(255,255,255,.84);--glass-selected:rgba(223,225,226,.72);--glass-rim:rgba(255,255,255,.95);--glass-edge:rgba(30,35,40,.10);--glass-shadow:0 3px 12px rgba(25,30,40,.06);--brand-ink:#b74935}
.sidebar{inset:24px auto auto 24px;width:204px;padding:20px 12px;gap:24px;border:1px solid var(--glass-edge);border-radius:20px;background:var(--bg-secondary);box-shadow:inset 0 1px 0 var(--glass-rim),0 12px 40px rgba(25,30,40,.09);z-index:var(--layer-nav)}
.brand{font-size:16px;gap:8px;padding:0 8px;color:var(--brand-ink);font-weight:500}.brand br{display:none}.brand-icon .icon{width:20px;height:20px}.side-note{margin:0;padding:0 8px}.side-note .text{width:100%}nav{gap:8px}nav button{padding:8px 12px;font-size:13px}nav button.active{font-weight:500}main{margin-left:268px}header{height:auto;min-height:96px;border:0;padding:24px 32px;gap:24px;align-items:flex-start}header .categories{padding:0;gap:8px;flex:1}header #publish{flex-shrink:0;font-size:14px;white-space:nowrap}.page{max-width:1064px;padding:32px 32px 64px}.heading{padding-bottom:20px}h1{font-size:22px;font-weight:500;letter-spacing:-.02em}.heading p{font-size:13px}.demo-note{font-size:13px;max-width:72ch}.layout{display:block}.tools{padding-bottom:12px}.search{max-width:100%;border-color:var(--separator);height:44px}.categories button{font-size:13px;padding:8px 12px}.card{padding:24px 0}.card h2{font-size:20px;font-weight:500}.connection{gap:32px}.card-top .avatar{display:none}.byline{font-weight:400}.card-bottom{padding-top:4px}.status{font-size:13px}.card .title-button{display:block;width:fit-content;max-width:100%;padding:8px 12px;margin-left:-12px;text-align:left}.tags{padding-top:4px}
/* Shared optical stack: tint, saturation, bright upper rim and soft depth. */
body button{position:relative;isolation:isolate;overflow:hidden;background:var(--glass);color:var(--label);border:1px solid var(--glass-edge);border-radius:12px;box-shadow:inset 0 1px 0 var(--glass-rim),inset 0 -1px 0 rgba(255,255,255,.16),var(--glass-shadow);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);transform:scale(var(--press-scale,1));transform-origin:center;touch-action:manipulation}
body button::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.5),transparent 42%,rgba(255,255,255,.14));opacity:.45;transition:opacity 140ms var(--ease-out);z-index:-1}
body button:hover{background:var(--glass-hover);color:var(--label)}body button:hover::before{opacity:.8}body button:active::before{opacity:1}body button:active{background:var(--glass-selected)}body button.active,body .bookmark.saved{background:var(--glass-selected);color:var(--label);border-color:var(--glass-edge)}body .primary{background:rgba(43,48,52,.87);color:#fff;border-color:rgba(20,24,28,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.12),0 4px 16px rgba(20,24,28,.12)}body .primary:hover,body .primary:active{background:rgba(43,48,52,.95);color:#fff;opacity:1}body .title-button:hover{text-decoration:none}body .text{padding:8px 12px;justify-content:flex-start}.close{padding:8px}.sidebar nav button{background:var(--glass)}.sidebar nav button.active{background:var(--glass-selected)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(55,57,59,.68);--glass-hover:rgba(72,74,77,.8);--glass-selected:rgba(90,92,96,.72);--glass-rim:rgba(255,255,255,.21);--glass-edge:rgba(255,255,255,.14);--glass-shadow:0 3px 12px rgba(0,0,0,.15);--brand-ink:#ed9989}body .primary{background:rgba(224,227,231,.88);color:#202326}body .primary:hover,body .primary:active{background:rgba(240,243,247,.96);color:#202326}body button::before{opacity:.12}}
@media(max-width:1100px){main{margin-left:240px}.sidebar{left:16px;width:200px}header{padding:24px;gap:16px;flex-wrap:wrap}header .categories{flex-basis:100%;order:2}.page{padding:24px}}
@media(max-width:700px){.sidebar{position:relative;inset:auto;width:auto;margin:16px;padding:16px;gap:16px;border-radius:20px}.brand{padding:0}.side-note{display:none}nav{gap:8px}nav button{padding:8px 4px;min-width:0;font-size:13px;white-space:normal}main{margin:0}header{padding:8px 16px 16px;gap:16px;align-items:center}header #publish{margin-left:auto}header .categories{gap:8px}header .categories button{flex-grow:0}.page{padding:16px 16px calc(32px + env(safe-area-inset-bottom))}.heading{padding-bottom:16px}.demo-note{padding-bottom:16px}.demo-note span{margin-top:4px}.connection{gap:20px}.card .title-button{margin-left:0;width:100%;font-size:18px}.card h2{padding-top:12px}.card-bottom .actions{padding-top:8px}.detail-actions button{font-size:14px}.sidebar nav .icon{display:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body button{background:var(--bg-secondary)}body .primary{background:var(--accent);color:var(--on-accent)}}
@media(prefers-reduced-transparency:reduce){body button{background:var(--bg-secondary);-webkit-backdrop-filter:none;backdrop-filter:none}body button::before{display:none}body .primary{background:var(--accent);color:var(--on-accent)}}
@media(prefers-contrast:more){body button{border:1px solid var(--label);background:var(--bg);box-shadow:none}body .primary{background:var(--accent);color:var(--on-accent)}}

/* Distinct editorial cards: each post owns its own surface and transition. */
.card{background:var(--bg);border:1px solid var(--separator);border-radius:16px;padding:24px;margin:0 0 16px;box-shadow:0 1px 0 rgba(20,24,28,.04);transition:transform 180ms var(--ease-out),border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.card:hover{transform:translateY(-2px);border-color:var(--border);box-shadow:0 10px 28px rgba(20,24,28,.08)}
.card:focus-within{border-color:var(--label);box-shadow:0 0 0 3px rgba(36,36,36,.08)}
@media(max-width:700px){.card{padding:20px;border-radius:14px;margin-bottom:12px}.card:hover{transform:none}}

/* Jike-style editorial grid: paper canvas, ruled cells, and content-led transitions. */
.page{background-color:var(--bg);background-image:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.78)),url('./assets/paper-texture-light.png');background-size:auto,640px auto;background-blend-mode:normal;background-attachment:fixed}
#feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--separator);border-left:1px solid var(--separator)}
#feed .card{min-height:350px;display:flex;flex-direction:column;margin:0;border:0;border-right:1px solid var(--separator);border-bottom:1px solid var(--separator);border-radius:0;background:rgba(255,255,255,.56);box-shadow:none;padding:24px;transition:background-color 180ms var(--ease-out),transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
#feed .card:hover{background:rgba(255,255,255,.88);transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,24,28,.08);z-index:1}
#feed .card .connection{flex:1}
#feed .card .card-bottom{margin-top:auto}
#feed .empty{grid-column:1/-1;border:0;border-right:1px solid var(--separator);border-bottom:1px solid var(--separator);background:rgba(255,255,255,.56)}
@media(max-width:700px){#feed{grid-template-columns:1fr}.page{background-size:auto,520px auto}#feed .card{min-height:0;padding:20px}#feed .card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){body button{transform:none!important}body button::before{transition:none}}
@media(max-width:700px){.sidebar .side-note{display:block;padding:0}.sidebar .side-note .text{width:auto;min-height:44px;font-size:13px}.sidebar{gap:12px}}

/* Sponsor lives below the panel in the same rail, without overlaying content. */
.left-column{position:fixed;top:24px;left:24px;width:204px;display:grid;gap:16px;max-height:calc(100dvh - 48px);overflow-y:auto;scrollbar-width:thin;z-index:var(--layer-nav);padding-bottom:8px}
.left-column .sidebar{position:relative;inset:auto;width:100%;margin:0;box-shadow:inset 0 1px 0 var(--glass-rim),0 4px 16px rgba(25,30,40,.06)}
.sponsor-slot{display:grid;gap:8px;padding:16px 20px;border:1px dashed var(--border);border-radius:16px;background:var(--bg);color:var(--label-secondary)}
.sponsor-label{font-size:var(--small);line-height:1.5}.sponsor-slot p{font-size:var(--medium);line-height:1.5;color:var(--label)}
@media(max-width:1100px){.left-column{left:16px;width:200px}}
@media(max-width:700px){.left-column{position:relative;inset:auto;width:auto;margin:16px;max-height:none;overflow:visible;padding:0;gap:12px}.sponsor-slot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;min-height:48px}}