:root{--ink:#102a43;--paper:#eaf4fb;--white:#f8fcff;--lime:#38bdf8;--muted:#5b7185;--line:#c8ddea;--navy:#075985}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans","Noto Sans JP",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.topbar{height:58px;padding:0 max(3vw,20px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(234,244,251,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:700;text-decoration:none;letter-spacing:-.02em}
.brand-mark{width:32px;height:32px;display:block;flex:none}
.refresh-area{display:flex;align-items:center;gap:10px}.last-fetched{color:var(--muted);font-size:10px;white-space:nowrap}
.ghost{border:1px solid var(--ink);background:transparent;padding:7px 13px;border-radius:99px;font-size:12px;font-weight:600}
.ghost:hover{background:var(--ink);color:var(--white)}
.hero{padding:12px max(3vw,20px) 24px;display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:end;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(7,89,133,.16);border-radius:50%;left:-170px;top:30px;box-shadow:0 0 0 44px rgba(56,189,248,.06),0 0 0 88px rgba(56,189,248,.035)}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:700}.eyebrow span{display:inline-block;width:30px;height:2px;background:var(--ink);vertical-align:middle;margin-right:9px}
h1{font-size:48px;line-height:1.03;letter-spacing:-.06em;margin:12px 0 14px}
h1 em{font-style:normal;color:var(--navy);position:relative}h1 em:after{content:"";position:absolute;height:12px;background:var(--lime);left:0;right:0;bottom:5px;z-index:-1;transform:rotate(-1deg)}
.lead{margin-bottom:0;max-width:620px;color:var(--muted);font-size:14px;line-height:1.65}
.register-card{background:var(--ink);color:var(--white);padding:24px;position:relative;box-shadow:8px 8px 0 var(--lime)}
.card-number{position:absolute;right:22px;top:16px;color:#496780;font-size:36px;font-weight:700}.register-card label{font-size:20px;font-weight:700}.register-card>p{font-size:11px;color:#a8c2d5;margin:4px 0 15px}
.input-row{display:flex;background:white;padding:4px}.input-row input{min-width:0;flex:1;border:0;padding:9px;outline:none}.input-row button{border:0;background:var(--lime);padding:9px 14px;font-weight:700;white-space:nowrap}.input-row button:disabled{opacity:.65}
.status{min-height:14px;margin-top:7px;font-size:11px;color:#b8d2e3}.status.error{color:#ff9c91}
.dashboard{border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(250px,23vw) 1fr;min-height:500px}
aside{border-right:1px solid var(--line);padding:22px 17px}.source-ad{width:100%;aspect-ratio:1;margin-bottom:22px;overflow:hidden}.source-ad .adsbygoogle{width:100%;height:100%}.aside-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;margin-bottom:10px}.aside-head strong{background:var(--ink);color:white;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;letter-spacing:0}
.source-wrap{padding-bottom:5px}.source{width:100%;border:0;background:transparent;text-align:left;padding:9px 9px;display:flex;gap:9px;align-items:center;border-radius:5px;color:var(--ink)}.source:hover,.source.active{background:var(--white)}.source small{display:block;font-size:8px;color:#7890a3;margin-top:1px;letter-spacing:.06em}.source-icon{width:20px;font-size:19px}.source-dot{width:7px;height:7px;background:var(--navy);border-radius:50%;flex:none}.votes{display:flex;gap:6px;padding:3px 6px 0 9px}.vote{border:1px solid var(--line);background:transparent;border-radius:99px;padding:5px 10px;color:var(--muted);font-size:10px}.vote strong{margin-left:2px;color:var(--ink)}.vote:hover{background:var(--white);border-color:var(--ink)}.vote.good:hover{border-color:#0284c7;color:#0369a1}.vote.bad:hover{border-color:#b45366;color:#9f3449}.vote:disabled{opacity:.5}
.feed{padding:25px max(3vw,22px) 50px;background:var(--white)}.feed-head{display:flex;align-items:end;justify-content:space-between;padding-bottom:13px;border-bottom:3px solid var(--ink)}.feed-head>span{font-size:10px;color:var(--muted)}.feed-tabs{display:flex;align-items:center;gap:5px}.feed-tab{border:1px solid var(--line);background:transparent;color:var(--muted);padding:8px 13px;font-size:12px;font-weight:700}.feed-tab:hover{border-color:var(--ink);color:var(--ink)}.feed-tab.active{border-color:var(--ink);background:var(--ink);color:var(--white)}
article{padding:14px 3px 13px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;align-items:center}.article-body{min-width:0}.thumbnail{width:120px;aspect-ratio:16/10;overflow:hidden;background:var(--paper);display:none}.thumbnail img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s}.thumbnail:hover img{transform:scale(1.04)}article.has-thumbnail{grid-template-columns:120px minmax(0,1fr) auto}article.has-thumbnail .thumbnail{display:block}.article-body .meta{display:flex;gap:10px;font-size:9px;letter-spacing:.05em;color:var(--muted)}.article-body .meta span{color:var(--navy);font-weight:700}article h3{margin:5px 0 4px;font-size:17px;line-height:1.4}article h3 a{color:inherit;text-decoration:none}article h3 a:hover{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:4px}article p{margin:0;color:var(--muted);font-size:11px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.article-actions{display:grid;justify-items:start;gap:9px;align-self:center}.read,.comment-link{color:var(--ink);font-size:11px;text-decoration:none;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap}.comment-link{color:var(--navy);border-color:var(--navy)}
.empty{text-align:center;padding:85px 20px;color:var(--muted)}.empty .radar{display:grid;place-items:center;margin:auto;width:70px;height:70px;border:1px solid var(--line);border-radius:50%;font-size:35px}.empty h3{color:var(--ink);margin:22px 0 8px}.empty p{font-size:13px;line-height:1.8}
.load-more-wrap{display:flex;justify-content:center;padding:28px 0 2px}.load-more-wrap[hidden]{display:none}.load-more{min-width:180px;border:1px solid var(--ink);border-radius:99px;background:transparent;color:var(--ink);padding:11px 22px;font-size:12px;font-weight:700;transition:.2s}.load-more span{display:inline-block;margin-left:7px;transition:transform .2s}.load-more:hover{background:var(--ink);color:var(--white)}.load-more:hover span{transform:translateY(3px)}
.referrer-ranking{margin-top:42px;border-top:3px solid var(--ink)}.ranking-head{display:flex;align-items:end;justify-content:space-between;padding:18px 3px 13px}.ranking-head span{display:block;margin-bottom:3px;color:var(--navy);font-size:9px;font-weight:700;letter-spacing:.14em}.ranking-head h2{margin:0;font-size:20px}.ranking-head>small{color:var(--muted);font-size:10px}.ranking-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}.ranking-list li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:12px 3px;border-bottom:1px solid var(--line)}.ranking-number{color:var(--navy);font-size:11px;font-weight:700}.ranking-list a{min-width:0;overflow:hidden;color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}.ranking-list a:hover{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px}.ranking-list strong{font-size:12px}.ranking-list strong small{color:var(--muted);font-size:8px;font-weight:500}.ranking-empty{margin:0;padding:24px 3px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.infeed-ad{display:block;width:100%;min-width:0;min-height:120px;padding:18px 3px;border-bottom:1px solid var(--line);overflow:hidden}.infeed-ad .adsbygoogle{width:100%;min-width:0;overflow:hidden}
.bottom-ad{display:block;width:100%;min-width:0;min-height:100px;margin:0;border:0;border-top:1px solid var(--line);padding:24px max(3vw,20px);overflow:hidden;background:var(--paper)}.bottom-ad .adsbygoogle{width:100%;max-width:1200px;min-width:0;margin:0 auto;overflow:hidden}
footer{background:var(--ink);color:white;min-height:150px;padding:45px max(5vw,28px);display:flex;align-items:center;gap:30px}footer span{font-weight:700}footer p{color:#b4ccdc}footer small{margin-left:auto;color:#7fa2b9}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:white;padding:13px 20px;border-left:4px solid var(--lime);z-index:50;transition:.25s;pointer-events:none}.toast.show{transform:translate(-50%,0);opacity:1}.spinning span{display:inline-block;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:12px;gap:24px}.dashboard{grid-template-columns:1fr}.dashboard .feed{order:-1}aside{border-right:0;border-bottom:1px solid var(--line)}#sourceList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.feed{padding-left:18px;padding-right:18px}article{grid-template-columns:minmax(0,1fr)}article.has-thumbnail{grid-template-columns:105px minmax(0,1fr);gap:14px}.thumbnail{width:105px}.article-actions{grid-column:1/-1;margin-top:8px}.read{display:none}footer{min-height:110px;padding-top:28px;padding-bottom:28px;align-items:flex-start;flex-direction:column;gap:3px}footer small{margin-left:0}}
@media(max-width:480px){.topbar{height:54px}.brand span:last-child{display:none}.hero{padding-left:16px;padding-right:16px}.register-card{padding:21px 17px;box-shadow:6px 6px 0 var(--lime)}.input-row{display:block}.input-row button{width:100%}.dashboard aside{padding:18px 12px}#sourceList{grid-template-columns:1fr}h1{font-size:37px}.refresh-area{gap:7px}.last-fetched{font-size:9px}.ghost{padding:6px 10px}article.has-thumbnail{grid-template-columns:88px minmax(0,1fr);gap:11px}.thumbnail{width:88px}article h3{font-size:15px}.bottom-ad{min-height:80px;padding:16px}}