:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Noto Sans JP", sans-serif; background: #080d17; color: #f3f4f6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #173054 0, transparent 32rem), #080d17; }
.centered { display: grid; place-items: center; padding: 1.25rem; }
.topbar { max-width: 1080px; margin: auto; padding: 1.4rem 1rem .4rem; display: flex; justify-content: space-between; align-items: center; }
.topbar h1 { margin: .1rem 0; font-size: 1.65rem; }
.layout { max-width: 1080px; margin: auto; padding: 1rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 1rem; }
.card { border: 1px solid #263348; border-radius: 20px; background: rgba(15, 23, 42, .9); padding: 1.25rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .22); }
.login-card { width: min(430px, 100%); }
h1, h2 { letter-spacing: -.025em; }
h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.eyebrow { margin: 0; color: #67e8f9; letter-spacing: .15em; font-size: .7rem; font-weight: 800; }
.muted { color: #94a3b8; }
.stack { display: grid; gap: .9rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
label { display: grid; gap: .4rem; color: #cbd5e1; font-size: .84rem; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid #334155; border-radius: 11px; background: #0b1220; color: #f8fafc; padding: .75rem .8rem; font: inherit; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid #22d3ee; outline-offset: 1px; border-color: transparent; }
button, .button { border: 0; border-radius: 12px; background: linear-gradient(135deg, #22d3ee, #818cf8); color: #07111d; padding: .78rem 1rem; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; text-align: center; }
button:disabled { opacity: .55; cursor: wait; }
.ghost { background: transparent; color: #cbd5e1; border: 1px solid #334155; padding: .55rem .75rem; }
details { border: 1px solid #263348; border-radius: 12px; padding: .7rem .8rem; }
summary { cursor: pointer; color: #cbd5e1; }
.inset { margin-top: .8rem; }
.notice { min-height: 1.2em; margin: 0; color: #67e8f9; }
.notice.error { color: #fda4af; }
.search-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; }
.search-head input { padding: .55rem .7rem; }
.memory-list { display: grid; gap: .65rem; }
.memory { border: 1px solid #263348; border-radius: 12px; padding: .8rem; background: rgba(8, 13, 23, .55); }
.memory h3 { margin: 0 0 .35rem; font-size: .96rem; }
.memory p { margin: .2rem 0; color: #9ca3af; font-size: .84rem; line-height: 1.5; }
.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.chip { border-radius: 999px; padding: .18rem .5rem; background: #1e293b; color: #a5f3fc; font-size: .7rem; }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .topbar { padding-top: max(1rem, env(safe-area-inset-top)); } }