:root{--indigo-50: #eef2ff;--indigo-100: #e0e7ff;--indigo-500: #6366f1;--indigo-300: #a5b4fc;--indigo-600: #4f46e5;--indigo-700: #4338ca;--rose-500: #f43f5e;--zinc-50: #fafafa;--zinc-100: #f4f4f5;--zinc-200: #e4e4e7;--zinc-300: #d4d4d8;--zinc-400: #a1a1aa;--zinc-500: #71717a;--zinc-600: #52525b;--zinc-800: #27272a;--zinc-900: #18181b;--bg: var(--zinc-100);--bg-elevated: #ffffff;--surface: #ffffff;--border: var(--zinc-200);--border-subtle: rgba(24, 24, 27, .08);--text: var(--zinc-900);--text-secondary: var(--zinc-500);--text-muted: var(--zinc-400);--link: var(--indigo-600);--like: var(--rose-500);--accent: var(--indigo-600);--accent-soft: var(--indigo-50);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .05);--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .05);--nav-h: 58px;--top-h: 52px;--feed-max: 500px;--font: "Noto Sans JP", system-ui, -apple-system, sans-serif;--font-brand: "Outfit", "Noto Sans JP", sans-serif}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}*,*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent}body{margin:0;min-height:100dvh;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}#root{min-height:100dvh}a{color:var(--link);text-decoration:none}a:hover{color:var(--indigo-700)}button{font:inherit;cursor:pointer}input,textarea{font:inherit}::placeholder{color:var(--zinc-400)}.app-layout{min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 50% -20%,var(--indigo-100) 0%,transparent 50%)}.app-body{flex:1;display:block;min-width:0}.app-main{max-width:100%;margin:0 auto;width:100%;min-width:0;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px))}.page-pad{padding:14px 14px 24px}.page-pad--feed{padding-top:4px}.page-title{font-family:var(--font);font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin:0 0 20px;color:var(--text)}.top-bar{position:sticky;top:0;z-index:100;min-height:var(--top-h);padding:0;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}.top-bar-inner{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-family:var(--font-brand);font-size:1.5rem;font-weight:700;letter-spacing:-.04em;background:linear-gradient(115deg,var(--indigo-600) 0%,#7c3aed 45%,#c026d3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}.top-username{font-size:13px;font-weight:500;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}.top-login{font-size:14px;font-weight:600;color:var(--accent);padding:6px 12px;border-radius:var(--radius-full);background:var(--indigo-50);border:1px solid var(--indigo-100)}.top-login:hover{background:var(--indigo-100);color:var(--indigo-700)}.nav-bottom{position:fixed;left:0;right:0;bottom:0;z-index:200;height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));padding:0 8px env(safe-area-inset-bottom,0px);display:flex;align-items:center;justify-content:space-around;max-width:100%;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);box-shadow:0 -4px 24px #0f172a0f}.nav-bottom a{flex:1;max-width:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px 8px;border:none;background:none;color:var(--zinc-500);font-size:10px;font-weight:600;letter-spacing:.02em;border-radius:var(--radius-md);text-decoration:none;transition:color .15s,background .15s}.nav-bottom a svg{color:var(--zinc-400);transition:color .15s,transform .15s}.nav-bottom a.active{color:var(--indigo-600)}.nav-bottom a.active svg{color:var(--indigo-600);transform:scale(1.02)}.nav-desktop{display:none}.nav-desk{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);color:var(--zinc-600);font-weight:600;font-size:15px;text-decoration:none;transition:background .15s,color .15s}.nav-desk:hover{background:var(--zinc-100);color:var(--zinc-900)}.nav-desk svg{color:var(--zinc-400);flex-shrink:0}.nav-desk:hover svg{color:var(--zinc-600)}.nav-desk.active{background:var(--indigo-50);color:var(--indigo-700);box-shadow:inset 0 0 0 1px var(--indigo-100)}.nav-desk.active svg{color:var(--indigo-600)}.nav-desk-ico{display:flex;align-items:center;justify-content:center;width:32px;height:32px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow-sm)}.card-header{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border-subtle)}.card-header a.avatar{box-shadow:0 0 0 2px var(--border);transition:box-shadow .15s}.card-header a.avatar:hover{box-shadow:0 0 0 2px var(--indigo-300)}.post-img-wrap{aspect-ratio:1;background:var(--zinc-900);position:relative}.post-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;vertical-align:middle}.post-actions{display:flex;align-items:center;gap:4px;padding:8px 10px 4px}.post-action-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;border:none;border-radius:var(--radius-full);background:none;color:var(--zinc-800);transition:background .15s,color .15s,transform .1s}.post-action-btn:hover{background:var(--zinc-100)}.post-action-btn:active{transform:scale(.96)}.post-action-btn.liked{color:var(--like)}.post-action-btn svg{display:block}.post-action-btn:disabled{opacity:.5;cursor:not-allowed}.post-meta{font-size:13px;color:var(--text-secondary);padding:0 14px 6px;font-weight:500}.caption-block{padding:0 14px 12px;font-size:15px;line-height:1.5;color:var(--text)}.caption-block .user{font-weight:700;margin-right:6px;color:var(--zinc-900)}.post-time{font-size:12px;color:var(--text-muted);padding:0 14px 10px;font-variant-numeric:tabular-nums}.post-more-row{display:block;width:100%;text-align:left;padding:0 14px 10px;font-size:13px;font-weight:600;color:var(--text-secondary);background:none;border:none;cursor:pointer;border-radius:var(--radius-sm)}.post-more-row:hover{color:var(--indigo-600)}.comment-line{font-size:14px;padding:6px 14px;line-height:1.4;border-top:1px solid var(--border-subtle)}.comment-line .user{font-weight:600;margin-right:6px;color:var(--zinc-800)}.comment-form{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--zinc-50)}.comment-form input{flex:1;border:1px solid var(--border);border-radius:var(--radius-full);padding:10px 16px;font-size:14px;background:var(--surface);outline:none;min-width:0;transition:border-color .15s,box-shadow .15s}.comment-form input:focus{border-color:var(--indigo-300);box-shadow:0 0 0 3px var(--indigo-50)}.comment-form .comment-send{flex-shrink:0;padding:8px 14px;font-size:13px;font-weight:700;color:var(--indigo-600);background:none;border:none;border-radius:var(--radius-full)}.comment-form .comment-send:hover{background:var(--indigo-50)}.avatar{width:36px;height:36px;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--indigo-500) 0%,#a855f7 50%,#ec4899 100%);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;overflow:hidden;text-decoration:none}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-lg{width:88px;height:88px;font-size:2rem;box-shadow:var(--shadow-md)}.stories{display:flex;gap:12px;padding:14px 4px 12px;margin:0 -2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%)}.stories::-webkit-scrollbar{display:none}.story-item{flex:0 0 auto;text-align:center;width:72px}.story-ring{display:block;width:64px;height:64px;border-radius:var(--radius-full);padding:2.5px;background:linear-gradient(130deg,#f97316,#e11d48,#7c3aed);margin:0 auto 6px;text-decoration:none;box-shadow:var(--shadow-sm)}.story-ring .inner{width:100%;height:100%;border-radius:var(--radius-full);background:var(--surface);padding:2px;overflow:hidden;display:flex;align-items:center;justify-content:center}.story-name{font-size:11px;font-weight:500;color:var(--zinc-700);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.story-inner-img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-full)}.story-ring .inner .avatar{width:100%;height:100%;min-width:0;min-height:0;font-size:1.15rem}.stories-fallback{min-height:1px}.seg{display:flex;margin:0 0 16px;padding:4px;background:var(--zinc-200);background:color-mix(in srgb,var(--zinc-200) 65%,var(--zinc-100));border-radius:var(--radius-full);border:1px solid var(--border-subtle);gap:2px}.seg button{flex:1;padding:10px 12px;background:none;border:none;color:var(--zinc-500);font-weight:600;font-size:13px;border-radius:var(--radius-full);transition:color .15s,background .2s,box-shadow .2s}.seg button.on{color:var(--zinc-900);background:var(--surface);box-shadow:var(--shadow-sm)}.auth-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px 40px;background:var(--bg);background-image:radial-gradient(ellipse 100% 80% at 50% 0%,var(--indigo-100) 0%,transparent 45%)}.auth-card{width:100%;max-width:400px;border:1px solid var(--border);background:var(--surface);padding:36px 32px 32px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.auth-card .auth-brand{text-align:center;margin-bottom:28px}.auth-seg{display:flex;margin:0 0 24px;padding:4px;background:var(--zinc-100);border-radius:var(--radius-full);border:1px solid var(--border);gap:2px}.auth-seg button{flex:1;padding:10px;background:none;border:none;color:var(--zinc-500);font-weight:600;font-size:14px;border-radius:var(--radius-full);transition:all .2s}.auth-seg button.on{color:var(--zinc-900);background:var(--surface);box-shadow:var(--shadow-sm)}.form-field{margin-bottom:12px}.form-field input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--zinc-50);font-size:15px;transition:border-color .15s,box-shadow .15s,background .15s}.form-field input:focus{outline:none;border-color:var(--indigo-400);background:var(--surface);box-shadow:0 0 0 3px var(--indigo-50)}.btn-primary{width:100%;margin-top:8px;padding:12px 16px;background:linear-gradient(180deg,var(--indigo-500) 0%,var(--indigo-600) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:700;font-size:15px;letter-spacing:.02em;box-shadow:0 2px 4px #4f46e540;transition:filter .15s,transform .1s,box-shadow .15s}.btn-primary:hover:not(:disabled){filter:brightness(1.05);box-shadow:0 4px 8px #4f46e54d}.btn-primary:active:not(:disabled){transform:scale(.99)}.btn-primary:disabled{opacity:.55;cursor:not-allowed}.btn-primary--inline{width:auto;display:inline-flex;align-items:center;justify-content:center;margin-top:0;padding:10px 20px}.auth-brand .brand{display:inline-block}.btn-ghost,.btn-inline{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;padding:8px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--zinc-800);margin-top:8px;margin-right:6px;box-shadow:var(--shadow-sm);transition:background .15s,border-color .15s;cursor:pointer}.btn-ghost:hover,.btn-inline:hover{background:var(--zinc-50);border-color:var(--zinc-300)}.btn-ghost--accent{background:var(--indigo-50);border-color:var(--indigo-200);color:var(--indigo-700)}.btn-ghost--accent:hover{background:var(--indigo-100)}.btn-ghost--danger{color:var(--rose-500);border-color:#fecdd3;background:#fff1f2}.btn-ghost--danger:hover{background:#ffe4e6}.input-hidden{position:absolute;width:0;height:0;opacity:0}.err{color:#dc2626;font-size:13px;margin-top:12px;text-align:center;line-height:1.4}.config-missing{color:var(--text-secondary);font-size:15px;text-align:center;max-width:22rem;line-height:1.6}.create-page{max-width:480px;margin:0 auto}.create-page .file-input{display:block;width:100%;padding:10px 0;font-size:14px;color:var(--text-secondary)}.create-page textarea{width:100%;min-height:120px;border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;resize:vertical;background:var(--zinc-50);margin-bottom:12px;transition:border-color .15s,box-shadow .15s}.create-page textarea:focus{outline:none;border-color:var(--indigo-400);background:var(--surface);box-shadow:0 0 0 3px var(--indigo-50)}.create-preview{width:100%;max-height:360px;object-fit:contain;display:block;margin:0 auto 16px;background:var(--zinc-900);border-radius:var(--radius-md);overflow:hidden}.profile-hero{display:flex;align-items:flex-start;gap:20px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}.profile-info h1{margin:0 0 4px;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.profile-display{margin:0 0 8px;color:var(--text-secondary);font-size:.95rem}.profile-bio{margin:0 0 10px;font-size:.95rem;line-height:1.5;white-space:pre-wrap;color:var(--zinc-800)}.profile-stats{font-size:12px;color:var(--text-secondary);margin:0 0 10px;font-variant-numeric:tabular-nums}.profile-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.edit-panel{max-width:420px;border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;margin-bottom:20px;background:var(--zinc-50);box-shadow:var(--shadow-sm)}.edit-panel .form-field textarea{width:100%;min-height:88px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface);resize:vertical}.edit-panel .form-field textarea:focus{outline:none;border-color:var(--indigo-400);box-shadow:0 0 0 3px var(--indigo-50)}.edit-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}.edit-actions .btn-primary{width:auto;margin:0;padding:8px 18px}.edit-actions .btn-ghost{margin:0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:var(--radius-sm);overflow:hidden}.grid3>div{aspect-ratio:1;background:var(--zinc-200);overflow:hidden}.grid3 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.grid3>div:hover img{transform:scale(1.04)}.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0 0 10px;padding:0 2px}.empty-hint{text-align:center;color:var(--text-secondary);padding:40px 20px 32px;font-size:14px;line-height:1.5;font-weight:500}.skeleton{position:relative;overflow:hidden;background:var(--zinc-200);border-radius:var(--radius-sm)}.skeleton:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:sh 1.2s ease-in-out infinite}@keyframes sh{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.skeleton:after{animation:none}}@media(min-width:900px){.app-body{display:flex;flex-direction:row;align-items:stretch;max-width:1200px;margin:0 auto;min-height:calc(100dvh - var(--top-h))}.app-main{flex:1;max-width:var(--feed-max);padding:24px 28px 40px}.card{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:22px}.page-pad{padding:8px 0 32px}.page-pad--feed{padding-top:4px}.nav-desktop{display:flex;flex-direction:column;width:240px;flex-shrink:0;padding:20px 12px 24px 16px;border-right:1px solid var(--border);background:color-mix(in srgb,var(--surface) 60%,transparent);position:sticky;top:var(--top-h);align-self:flex-start;height:calc(100dvh - var(--top-h));min-height:400px}.nav-mobile{display:none!important}.top-username{max-width:240px}.auth-page{background-image:radial-gradient(ellipse 60% 50% at 50% 0%,var(--indigo-100) 0%,transparent 55%),radial-gradient(ellipse 50% 40% at 100% 100%,#fce7f3 0%,transparent 40%)}.auth-card{max-width:420px;border-radius:20px}.create-page{max-width:100%}.create-preview{max-height:480px;border-radius:var(--radius-lg)}}@media(max-width:359px){.page-pad{padding-left:10px;padding-right:10px}.auth-card{padding-left:20px;padding-right:20px}}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;background:none;color:var(--zinc-500);border-radius:var(--radius-full);transition:background .15s,color .15s}.icon-btn:hover{background:var(--zinc-100);color:var(--zinc-800)}