:root {
    --memo-border: #e5eaf1;
    --memo-soft-border: #dbe4ef;
    --memo-blue: #2563eb;
    --memo-muted: #94a3b8;
    --memo-panel: rgba(255,255,255,.92);
}

body { font-family: system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif; }
header { border-bottom: 1px solid #eef2f7; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); }
.header-home { min-width:0; display:flex; align-items:center; gap:12px; }
.page-back { height:34px; display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; padding:0 11px 0 9px; border:1px solid #e2e8f0; border-radius:999px; background:#f8fafc; color:#64748b; font-size:12px; font-weight:650; text-decoration:none; box-shadow:0 2px 7px rgba(30,41,59,.035); transition:border-color .18s,background .18s,color .18s,transform .18s; }
.page-back:hover { border-color:#bfdbfe; background:#eff6ff; color:#2563eb; transform:translateX(-1px); }
.page-back:focus-visible { outline:3px solid rgba(37,99,235,.18); outline-offset:2px; }
.page-back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.logo { color:#111827; font-size:24px; font-weight:700; text-decoration:none; }
.layout { max-width:1360px; grid-template-columns:220px minmax(0,1fr); gap:22px; }
.card { border:1px solid var(--memo-border); border-radius:18px; background:var(--memo-panel); box-shadow:0 8px 24px rgba(30,41,59,.045); }
.sidebar { padding:22px; }
.sidebar-search-label { display:block; margin:0 2px 8px; color:var(--memo-muted); font-size:10px; font-weight:700; letter-spacing:.12em; }
.sidebar :is(.memo-search,.search) { display:flex; align-items:center; gap:10px; margin:0 0 8px; padding:4px 5px 4px 10px; border:1px solid #e2e8f0; border-radius:11px; background:#f8fafc; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.sidebar :is(.memo-search,.search):focus-within { border-color:#93c5fd; background:#fff; box-shadow:0 0 0 4px rgba(59,130,246,.08); }
.sidebar :is(.memo-search,.search) svg { width:15px; height:15px; flex:0 0 auto; fill:none; stroke:var(--memo-muted); stroke-width:1.7; stroke-linecap:round; }
.sidebar :is(.memo-search,.search) input { min-width:0; width:100%; padding:6px 0; border:0; background:transparent; color:#1f2937; font:inherit; font-size:12px; outline:0; }
.sidebar :is(.memo-search-clear,.search-clear) { width:26px; height:26px; flex:0 0 auto; border:0; border-radius:9px; background:transparent; color:var(--memo-muted); }
.sidebar :is(.memo-filter-note,.filter-note) { margin:5px 2px 16px; color:var(--memo-muted); font-size:10px; line-height:1.5; }
.sidebar :is(.memo-filter-note,.filter-note):empty { display:none; }
.sidebar .sidebar-section { padding-top:0; border-top:0; }
.sidebar h3 { padding:16px 2px 10px; border-top:1px solid #edf1f6; color:var(--memo-muted); font-size:10px; letter-spacing:.12em; }
:is(.primary-category,.primary) { display:flex; align-items:center; gap:9px; padding:10px 11px; border:1px solid #dbeafe; border-radius:11px; background:#eff6ff; color:#1d4ed8; font-size:13px; font-weight:750; }
:is(.primary-category-icon,.primary-icon) { width:25px; height:25px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; background:#dbeafe; }
:is(.subcategory-heading,.subhead) { display:flex; align-items:center; gap:8px; margin:18px 0 8px; color:#64748b; font-size:11px; font-weight:700; }
:is(.subcategory-heading,.subhead)::after { content:""; flex:1; border-top:1px solid var(--memo-border); }
:is(.subcategory-list,.cat-list) { position:relative; display:grid; gap:3px; max-height:min(34vh,280px); padding-left:10px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#dbe4ef transparent; }
:is(.subcategory-list,.cat-list)::-webkit-scrollbar { width:5px; }
:is(.subcategory-list,.cat-list)::-webkit-scrollbar-track { background:transparent; }
:is(.subcategory-list,.cat-list)::-webkit-scrollbar-thumb { border-radius:999px; background:#dbe4ef; }
:is(.subcategory-list,.cat-list)::before { content:""; position:absolute; top:8px; bottom:8px; left:5px; border-left:1px solid #dbe4ef; }
:is(.subcategory-row,.cat-row) { display:flex; align-items:center; gap:3px; }
:is(.subcategory-filter,.cat-filter) { position:relative; min-width:0; flex:1; border:0; border-radius:9px; padding:8px 8px 8px 17px; background:transparent; color:#64748b; font:inherit; font-size:12px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
:is(.subcategory-filter,.cat-filter)::before { content:""; position:absolute; left:3px; top:50%; width:6px; border-top:1px solid #cbd5e1; }
:is(.subcategory-filter.is-active,.cat-filter.active) { background:#eff6ff; color:var(--memo-blue); font-weight:700; }
:is(.subcategory-form,.cat-form) { display:grid; gap:5px; margin-top:14px; padding-top:13px; border-top:1px solid #edf1f6; }
:is(.subcategory-entry,.cat-entry) { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid #dbe2ec; border-radius:10px; background:#fff; }
:is(.subcategory-input,.cat-input) { min-width:0; width:100%; padding:6px 5px 6px 7px; border:0; background:transparent; font:inherit; font-size:11px; outline:0; }
:is(.subcategory-add,.cat-add) { width:30px; height:30px; flex:0 0 auto; border:0; border-radius:8px; background:var(--memo-blue); color:#fff; font-size:18px; cursor:pointer; }
:is(.subcategory-limit,.cat-limit) { margin:0 3px; color:var(--memo-muted); font-size:9px; text-align:right; }
:is(.subcategory-status,.cat-status):empty { display:none; }
:is(.memo-status,.status):empty { display:none; }
.sidebar .sidebar-resource { margin-top:10px; padding-top:10px; }
.sidebar .page-download { display:flex; align-items:center; justify-content:flex-start; gap:8px; }
.sidebar .page-download svg { display:block; width:16px; height:16px; flex:0 0 16px; }
.sidebar .page-download > span { display:block; line-height:20px; }
.memo-list { display:grid; grid-auto-rows:max-content; align-content:start; gap:16px; }
.reply-toggle { color:#5f6368; transition:color .16s; }
.reply-toggle:hover, .reply-toggle:active { color:#202124; }
.reply-toggle:focus-visible { color:#202124; outline:2px solid #6caccd; outline-offset:3px; border-radius:3px; }
:is(.memo-composer,.composer) { position:relative; border-top:1px solid #e5e7eb; }
:is(.memo-composer,.composer) textarea { width:100%; border:1px solid #dbe2ec; background:#fff; color:#1f2937; font:inherit; line-height:1.7; outline:0; }
:is(.memo-controls,.controls) { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#6b7280; font-size:12px; }
:is(.memo-submit,.submit) { border:0; background:var(--memo-blue); color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.memo-reply-context { position:absolute; z-index:3; top:18px; right:22px; display:block; margin:0; }
.memo-reply-context[hidden] { display:none; }
.memo-reply-cancel { width:24px; height:24px; display:grid; place-items:center; margin-left:auto; border:0; border-radius:50%; background:#f1f5f9; color:#94a3b8; font:inherit; font-size:16px; cursor:pointer; }
:is(.memo-composer,.composer).is-replying textarea { padding-right:44px; }

@media (min-width:721px) {
    .memo-reply-context { top:0; right:12px; transform:translateY(-50%); }
    .memo-reply-cancel { border:1px solid #e3eaf2; background:#fff; box-shadow:0 3px 10px rgba(30,41,59,.08); }
    .memo-reply-cancel:hover { background:#f1f5f9; color:#64748b; }
}

/* Replies are visually subordinate to their parent memo. */
:is(.memo-replies,.replies) { gap:8px; }
:is(.memo-replies,.replies) > .memo-item::before {
    top:11px;
    left:-19px;
    width:15px;
    height:16px;
    border-color:#c8d8e3;
}
.memo-replies > .memo-item { column-gap:7px; }
.memo-replies > .memo-item > :is(.memo-author-avatar,.memo-author-avatar-default) { transform:translateX(3px); }
.memo-replies .memo-body {
    padding:10px 13px;
    border-color:#e7edf3;
    border-radius:10px;
    background:rgba(252,253,254,.96);
    box-shadow:none;
}
.memo-replies .memo-header { min-height:24px; }
:is(.memo-replies,.replies) .memo-meta { margin-top:6px; }
.replies > .memo-item {
    padding:11px 14px;
    border-color:#e7edf3;
    border-radius:10px;
    background:rgba(252,253,254,.96);
    box-shadow:none;
}

/* Shared visual theme for desktop and mobile, public and private boards. */
    body { --memo-accent-fill:#b3e1fa; --memo-selection-fill:#c2e7fc; --memo-accent-ink:#174661; --memo-accent-hover:#adddf8; }
    body :is(.primary-category,.primary) { background:var(--memo-selection-fill); color:var(--memo-accent-ink); border-color:transparent; border-radius:18px; font-size:15px; font-weight:600; height:50px; min-height:50px; padding:8px 10px 8px 14px; gap:10px; }
    body :is(.primary-category-icon,.primary-icon) { width:22px; height:22px; background:transparent; color:var(--memo-accent-ink); }
    body .sidebar :is(.subcategory-list,.cat-list) { padding:2px 4px 2px 0; gap:5px; }
    body :is(.subcategory-list,.cat-list)::before { display:none; }
    body :is(.subcategory-row,.cat-row) { display:grid; grid-template-columns:minmax(0,1fr) 25px; align-items:center; gap:5px; min-width:0; max-width:100%; }
    body :is(.subcategory-filter,.cat-filter) { width:100%; height:38px; border-radius:999px; padding:9px 14px; font-size:14px; line-height:20px; }
    body :is(.subcategory-filter,.cat-filter)::before { display:none; }
    body :is(.subcategory-heading,.subhead) { font-size:12px; }
    body :is(.subcategory-filter,.cat-filter):hover { background:#f3f6fa; color:var(--memo-accent-ink); }
    body :is(.subcategory-filter.is-active,.cat-filter.active) { background:var(--memo-selection-fill); color:var(--memo-accent-ink); }
    body :is(.subcategory-filter.is-active,.cat-filter.active)::before { border-color:#789bad; }
    body .memo-refresh-desktop { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.8); color:var(--memo-accent-ink); border:1px solid rgba(80,139,171,.2); box-shadow:0 1px 2px rgba(31,80,110,.08); }
    body .memo-refresh-desktop svg { width:16px; height:16px; }
    body .memo-refresh-desktop:hover { background:#fff; border-color:#8cbcd6; color:#125981; box-shadow:0 2px 4px rgba(31,80,110,.12); }
    body .memo-refresh-desktop:active { background:#e2f2fc; box-shadow:none; }
    body .memo-refresh-desktop:focus-visible { outline:3px solid #6caccd; outline-offset:2px; }
    body .memo-refresh-desktop:disabled { background:#e6eff4; border-color:#c7dce8; color:#8099a8; box-shadow:none; }
    /* Soft, pill-shaped actions inspired by the supplied Chat reference. */
    body :is(.memo-submit,.submit,.subcategory-add,.cat-add,.memo-edit-save,.edit-form .save) {
        border:1px solid rgba(71,111,137,.10);
        border-radius:999px;
        background:var(--memo-accent-fill);
        color:var(--memo-accent-ink);
        box-shadow:0 1px 2px rgba(33,57,73,.18);
        transition:background .16s,box-shadow .16s;
    }
    body :is(.memo-submit,.submit) { font-weight:600; letter-spacing:.03em; }
    body :is(.subcategory-add,.cat-add) { display:grid; place-items:center; padding:0; font-size:20px; line-height:1; }
    body :is(.memo-submit,.submit,.subcategory-add,.cat-add,.memo-edit-save,.edit-form .save):hover { background:#a5dbf8; box-shadow:0 2px 4px rgba(33,57,73,.19); transform:none; }
    body :is(.memo-submit,.submit,.subcategory-add,.cat-add,.memo-edit-save,.edit-form .save):active { background:#95d3f4; box-shadow:none; transform:none; }
    body :is(.memo-submit,.submit,.subcategory-add,.cat-add,.memo-edit-save,.edit-form .save):focus-visible { outline:3px solid #6caccd; outline-offset:3px; }
    body :is(.memo-submit,.submit,.subcategory-add,.cat-add,.memo-edit-save,.edit-form .save):disabled { background:#e5ebef; color:#8b99a2; box-shadow:none; cursor:default; transform:none; }
/* Desktop-only workspace geometry. */
@media (min-width:721px) {
    body :is(.memo-submit,.submit) { min-width:96px; min-height:40px; padding:10px 22px; }
    body { height:100vh; overflow:hidden; }
    header { padding-left:max(14px,calc((100vw - 1360px)/2 + 14px)); }
    header .logo { transform:none; }
    .layout { height:calc(100vh - 93px); margin:18px auto 10px; align-items:start; }
    .sidebar { position:static; width:calc(100% + 32px); height:100%; max-height:100%; display:flex; flex-direction:column; margin-left:-32px; overflow:hidden; }
    .sidebar .sidebar-section { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; }
    .sidebar :is(.subcategory-list,.cat-list) { min-height:72px; max-height:none; flex:1 1 auto; align-content:start; }
    .sidebar :is(.subcategory-admin-controls,.cat-form,.cat-status,.sidebar-resource) { flex:0 0 auto; }
    main.card { min-height:0; height:100%; overflow:hidden; padding:24px clamp(24px,3vw,38px) 22px; }
    .memo-section { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; margin-top:0; }
    .memo-list { min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:2px 9px 14px 2px; scrollbar-gutter:stable; }
    :is(.memo-composer,.composer) { flex:0 0 auto; margin-top:12px; padding-top:14px; }
    :is(.memo-composer,.composer) textarea { min-height:64px; max-height:96px; border-radius:14px; padding:15px 16px; }
}

@media (min-width:721px) {
    body {
        display:grid;
        grid-template-columns:252px minmax(0,1fr);
        grid-template-rows:64px minmax(0,1fr);
        column-gap:20px;
        height:100dvh;
        padding:14px max(14px,calc((100vw - 1400px)/2));
        background:#f6f8fc;
    }
    .layout { display:contents; }
    header {
        grid-column:1; grid-row:1;
        position:static; min-width:0;
        display:flex; align-items:center;
        padding:12px 16px;
        border:1px solid var(--memo-border); border-bottom:0;
        border-radius:18px 18px 0 0;
        background:var(--memo-panel); backdrop-filter:none;
    }
    .header-home { gap:9px; }
    header .logo { font-size:18px; white-space:nowrap; letter-spacing:-.3px; }
    .page-back { width:32px; height:32px; padding:0; justify-content:center; border:0; border-radius:50%; background:transparent; box-shadow:none; }
    .page-back svg { width:20px; height:20px; }
    .page-back span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .sidebar {
        grid-column:1; grid-row:2;
        width:auto; min-height:0; height:100%; margin:0;
        padding:6px 18px 18px;
        border-top:0; border-radius:0 0 18px 18px;
        box-shadow:none;
    }
    .sidebar .sidebar-search-label, .sidebar > h3 { display:none; }
    main.card {
        grid-column:2; grid-row:1 / 3;
        min-width:0; min-height:0; height:100%;
        padding:18px 24px;
        box-shadow:none;
    }
    main.card :is(.memo-search,.search) {
        display:flex; flex:0 0 auto; align-items:center; gap:12px;
        width:100%; margin:0 0 16px; padding:6px 12px 6px 17px;
        border:1px solid transparent; border-radius:24px;
        background:#eef2f8; box-shadow:none;
    }
    main.card :is(.memo-search,.search):focus-within { border-color:#cbdcf5; background:#fff; box-shadow:0 2px 8px rgba(30,41,59,.07); }
    main.card :is(.memo-search,.search) svg { width:18px; height:18px; flex:0 0 auto; }
    main.card :is(.memo-search,.search) input { padding:8px 0; font-size:14px; }
    main.card :is(.memo-filter-note,.filter-note) { flex:0 0 auto; margin:0 4px 12px; color:#64748b; font-size:12px; }
    main.card :is(.memo-filter-note,.filter-note):empty { display:none; }
}

@media (max-width:720px) {
    button, a { touch-action:manipulation; }
    html body :is(.memo-composer,.composer).is-replying { padding-top:40px; }
    .memo-reply-context { display:block; top:8px; right:14px; transform:none; }
    .memo-reply-context[hidden] { display:none; }
    .memo-reply-cancel { width:26px; height:26px; border:1px solid #dbe4ec; background:#fff; color:#64748b; box-shadow:0 2px 8px rgba(30,41,59,.08); }
    :is(.memo-composer,.composer).is-replying textarea { padding-right:14px; }
    body :is(.primary-category,.primary) > span:not(.primary-category-icon):not(.primary-icon) { font-size:16px; font-weight:650; line-height:1.4; }
    body { background:#f6f8fc; }
    body :is(.memo-refresh-mobile,.mobile-nav-toggle) { background:var(--memo-accent-fill); color:var(--memo-accent-ink); border-color:rgba(71,111,137,.10); box-shadow:0 1px 2px rgba(33,57,73,.18); }
    body :is(.memo-refresh-mobile,.mobile-nav-toggle):active { background:#95d3f4; box-shadow:none; }
    body :is(.memo-refresh-mobile,.mobile-nav-toggle):focus-visible { outline:3px solid #6caccd; outline-offset:2px; }
    body .memo-refresh-mobile:disabled { background:#e5ebef; color:#8b99a2; box-shadow:none; }
    html { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
    body { position:fixed; inset:0; width:100%; height:100dvh; overflow:hidden; overscroll-behavior:none; }
    header { position:relative; top:auto; height:62px; display:flex; align-items:center; flex:0 0 auto; padding:10px 14px; }
    .header-home { gap:8px; }
    .page-back { width:38px; height:38px; justify-content:center; padding:0; border-color:#e5eaf1; background:#fff; box-shadow:0 2px 8px rgba(30,41,59,.06); }
    .page-back span { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
    .page-back svg { width:19px; height:19px; }
    header .logo { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sidebar .page-download { justify-content:flex-start; gap:8px; }
    .layout { height:calc(100dvh - 62px); margin:0; padding:0; }
    main.card { height:100%; min-height:0; padding:10px 9px 0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:hidden; }
    .memo-section { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; margin:0; }
    .memo-list { min-height:0; flex:1 1 auto; gap:13px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:3px 3px calc(68px + env(safe-area-inset-bottom)); }
    :is(.memo-composer,.composer) { position:fixed; z-index:30; right:0; bottom:0; left:0; width:100%; margin:0; padding:9px 13px max(9px,env(safe-area-inset-bottom)); border-top:1px solid #eef1f5; background:rgba(255,255,255,.98); box-shadow:0 -5px 18px rgba(30,41,59,.045); backdrop-filter:blur(16px); }
    :is(.memo-composer,.composer) { --composer-collapsed-height:38px; --composer-line-height:22px; }
    :is(.memo-composer,.composer)::before { content:""; position:absolute; z-index:1; top:calc(9px + var(--composer-collapsed-height)/2); left:25px; width:16px; height:16px; transform:translateY(-50%); background:url('assets/icons/compose.svg') center/contain no-repeat; pointer-events:none; transition:opacity .15s; }
    :is(.memo-composer,.composer):focus-within::before { opacity:0; }
    :is(.memo-composer,.composer) textarea { display:block; box-sizing:border-box; height:var(--composer-collapsed-height); min-height:var(--composer-collapsed-height); max-height:var(--composer-collapsed-height); padding:calc((var(--composer-collapsed-height) - var(--composer-line-height) - 2px)/2) 14px calc((var(--composer-collapsed-height) - var(--composer-line-height) - 2px)/2) 34px; border:1px solid transparent; border-radius:999px; background:#f4f5f6; font-size:16px; line-height:var(--composer-line-height); resize:none; overflow:hidden; box-shadow:none; appearance:none; -webkit-appearance:none; transition:height .2s,padding .2s,border-radius .2s; }
    :is(.memo-composer,.composer) textarea::placeholder { font:inherit; }
    :is(.memo-composer,.composer):focus-within textarea { height:86px; min-height:86px; max-height:86px; padding:11px 12px; border-color:#dbe4ef; border-radius:15px; background:#f8fafc; overflow-y:auto; box-shadow:0 0 0 3px rgba(59,130,246,.07); }
    :is(.memo-composer,.composer) :is(.memo-controls,.controls) { display:none; margin-top:7px; }
    :is(.memo-composer,.composer):focus-within :is(.memo-controls,.controls) { display:flex; }
    :is(.memo-submit,.submit) { padding:9px 17px; border-radius:999px; }
    .sidebar { position:fixed; inset:0 auto 0 0; z-index:70; display:block; width:min(84vw,320px); height:100dvh; max-height:none; padding:20px 18px max(20px,env(safe-area-inset-bottom)); border:0; border-right:1px solid rgba(219,228,239,.8); border-radius:0 18px 18px 0; overflow-y:auto; transform:translateX(-105%); transition:transform .24s; background:rgba(255,255,255,.98); box-shadow:7px 0 24px rgba(51,65,85,.075); }
    .sidebar.is-open { transform:translateX(0); }
}