:root { --blue:#2563eb; --blue-dark:#1d4ed8; --ink:#172033; --muted:#667085; --line:#e5e9f0; --surface:#fff; --canvas:#f6f8fc; --danger:#c03432; font-family: Inter, "Noto Sans JP", "Yu Gothic", system-ui, sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:220px minmax(0, 1fr); }
.sidebar { background:#fff; border-right:1px solid var(--line); padding:28px 16px 20px; display:flex; flex-direction:column; }
.brand { display:flex; gap:10px; align-items:center; font-size:1.08rem; font-weight:800; padding:0 10px 30px; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; color:white; background:var(--blue); font-size:19px; }
.category-nav { display:grid; gap:5px; }
.category-edit-button { margin:13px 9px 0; padding:8px 3px; border:0; border-top:1px solid #edf0f5; background:transparent; color:#657187; text-align:left; font-size:.78rem; font-weight:700; }.category-edit-button:hover { color:var(--blue); }
.category-button { border:0; background:transparent; color:#465065; text-align:left; padding:10px 11px; border-radius:8px; display:flex; justify-content:space-between; font-size:.94rem; }
.category-button:hover { background:#f2f6ff; color:var(--blue); }
.category-button.active { background:#eaf1ff; color:var(--blue); font-weight:750; }
.category-count { color:#98a2b3; font-size:.8rem; }
.storage-note { color:#98a2b3; font-size:.75rem; line-height:1.55; padding:0 10px; margin-top:auto; }
.main-content { width:min(1360px, 100%); margin:0 auto; padding:30px 36px 46px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.header-actions { display:flex; gap:9px; align-items:center; }
.eyebrow { font-size:.7rem; color:#78839a; font-weight:800; letter-spacing:.11em; margin:0 0 6px; }
h1, h2, p { margin-top:0; } h1 { font-size:1.7rem; letter-spacing:-.035em; margin-bottom:0; } h2 { font-size:1.06rem; margin-bottom:0; }
.button { border:1px solid transparent; border-radius:8px; padding:10px 15px; font-weight:700; font-size:.9rem; min-height:40px; transition:.15s ease; }
.button-primary { background:var(--blue); color:#fff; box-shadow:0 2px 4px #2563eb28; } .button-primary:hover { background:var(--blue-dark); }
.button-quiet { background:#fff; border-color:#d9dee8; color:#435068; } .button-quiet:hover { background:#f7f9fc; }
.button-danger { background:var(--danger); color:#fff; } .button-danger:hover { background:#a52323; }
.tools { display:flex; gap:12px; align-items:center; margin-bottom:20px; }
.search-box { flex:1; min-height:46px; background:#fff; border:1px solid #dce2ec; border-radius:9px; display:flex; align-items:center; gap:9px; padding:0 14px; color:#8690a4; }
.search-box:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px #2563eb19; } .search-box input { width:100%; border:0; outline:0; color:var(--ink); font-size:.95rem; }
.favorite-filter { min-height:46px; border:1px solid #dce2ec; border-radius:9px; background:#fff; padding:0 14px; color:#576277; font-weight:700; } .favorite-filter.active { background:#fff8e8; border-color:#f4c951; color:#a16207; }
.list-heading { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); } #itemCount { color:#7d8799; font-size:.85rem; }
.template-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(225px, 1fr)); gap:11px; padding-top:14px; }
.template-card { min-width:0; height:130px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 15px 12px; display:grid; grid-template-rows:auto 1fr auto; gap:7px; box-shadow:0 1px 2px #10182808; transition:border-color .15s ease, box-shadow .15s ease; }.template-card:hover { border-color:#b8c9ed; box-shadow:0 4px 12px #1d4ed80d; }
.card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.card-title-wrap { min-width:0; }.template-title { font-size:.95rem; font-weight:800; line-height:1.35; margin:0 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.card-meta { display:flex; gap:7px; align-items:center; }.category-tag { display:inline-block; background:#f0f4fa; color:#526075; border-radius:999px; padding:2px 7px; font-size:.7rem; font-weight:700; }.favorite-button, .icon-button { border:0; background:transparent; padding:2px; color:#8b95a7; font-size:1.2rem; line-height:1; }.favorite-button.active { color:#e9a516; }.template-body { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; white-space:pre-line; margin:0; color:#566176; font-size:.8rem; line-height:1.5; overflow-wrap:anywhere; }.card-actions { display:flex; justify-content:flex-end; gap:5px; }.card-actions .button { min-height:27px; padding:4px 8px; border-radius:6px; font-size:.75rem; }.copy-button.copied { background:#e9f8ef; color:#19733b; border-color:#a8dfba; }
.empty-state { text-align:center; padding:55px 20px; color:#758197; background:#fff; border:1px dashed #cfd7e5; border-radius:11px; }.empty-state h3 { color:#475467; margin:0 0 7px; font-size:1rem; }.empty-state p { margin-bottom:18px; font-size:.9rem; }
dialog { border:0; border-radius:14px; padding:0; width:min(550px, calc(100% - 30px)); color:var(--ink); box-shadow:0 22px 55px #10182838; } dialog::backdrop { background:#16203370; }.editor-dialog form, .confirm-dialog form { padding:25px; }.dialog-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }.dialog-header h2, .confirm-dialog h2 { font-size:1.2rem; }.editor-dialog label { display:grid; gap:7px; color:#485468; font-size:.88rem; font-weight:700; margin-bottom:17px; }.editor-dialog input, .editor-dialog select, .editor-dialog textarea { border:1px solid #d6dce7; border-radius:7px; padding:10px 11px; color:var(--ink); outline:0; font-weight:400; }.editor-dialog textarea { resize:vertical; line-height:1.65; }.editor-dialog input:focus, .editor-dialog select:focus, .editor-dialog textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #2563eb19; }.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; }.confirm-dialog p { color:#667085; line-height:1.6; }.toast { position:fixed; bottom:25px; left:50%; transform:translate(-50%, 15px); opacity:0; pointer-events:none; background:#1d2939; color:white; border-radius:8px; padding:11px 15px; font-size:.88rem; transition:.2s ease; box-shadow:0 8px 20px #1018282b; }.toast.show { opacity:1; transform:translate(-50%, 0); }
.dialog-help { margin:-7px 0 18px; color:#667085; font-size:.84rem; line-height:1.65; }.money-result { min-height:48px; padding:12px 13px; background:#f5f8fe; border:1px solid #dce6fb; border-radius:8px; color:#536176; font-size:.86rem; line-height:1.55; }.money-result.success { background:#edf6ff; border-color:#bcd5ff; color:#1d4ed8; }.money-total { display:block; margin-top:3px; color:#17387b; font-size:1.36rem; font-weight:850; letter-spacing:-.025em; }.money-breakdown { margin:6px 0 0; color:#526075; font-size:.77rem; }
.quick-edit-button { display:block; margin:-8px 0 12px auto; border:0; background:transparent; color:var(--blue); font-size:.8rem; font-weight:750; padding:3px; }.quick-edit-button:hover { text-decoration:underline; }.quick-editor-dialog { width:min(700px, calc(100% - 30px)); }.quick-editor-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.quick-editor-fields label { margin-bottom:0; }.quick-editor-fields textarea { resize:vertical; line-height:1.55; }
.data-dialog { width:min(680px, calc(100% - 30px)); }.data-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.data-actions section { border:1px solid #dfe5ee; border-radius:9px; padding:17px; }.data-actions h3 { margin:0 0 8px; font-size:.93rem; }.data-actions p { min-height:59px; color:#68758a; font-size:.82rem; line-height:1.55; margin-bottom:15px; }
.category-editor-dialog { width:min(520px, calc(100% - 30px)); }.category-editor-list { display:grid; gap:6px; max-height:250px; overflow:auto; margin:0 0 17px; padding-right:3px; }.category-editor-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:39px; padding:7px 10px; background:#f7f9fd; border:1px solid #e4e9f1; border-radius:7px; color:#465268; font-size:.87rem; }.category-editor-row small { color:#8792a5; }.category-delete-button { border:0; background:transparent; color:#b33d3b; padding:3px 4px; font-size:.78rem; font-weight:700; }.category-delete-button:hover { text-decoration:underline; }
.money-dialog { width:min(960px, calc(100% - 30px)); }.calculator-layout { display:grid; grid-template-columns:minmax(170px, .8fr) minmax(280px, 1.5fr) minmax(170px, .8fr); gap:13px; align-items:start; }.quick-panel { background:#f7f9fd; border:1px solid #e3e8f1; border-radius:8px; padding:10px; }.quick-panel h3 { margin:0 0 9px; font-size:.76rem; color:#596579; }.quick-buttons { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:5px; }.quick-buttons button { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #dce3ee; border-radius:5px; background:#fff; color:#4d5a70; padding:5px 4px; font-size:.71rem; line-height:1.15; }.quick-buttons button:hover { color:var(--blue); border-color:#a9c3f8; background:#f3f7ff; }.money-textarea-label { margin-bottom:0!important; }.money-textarea-label textarea { min-height:313px; }.amount-buttons button { color:#2453a6; }
@media (max-width:720px) { .app-shell { display:block; }.sidebar { border-right:0; border-bottom:1px solid var(--line); padding:16px; }.brand { padding:0 4px 14px; }.category-nav { grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; padding-bottom:3px; }.category-button { border:1px solid #e3e7ee; padding:7px 10px; white-space:nowrap; }.category-button.active { border-color:#bdd0ff; }.storage-note { display:none; }.main-content { padding:25px 17px 45px; }.topbar { align-items:flex-end; margin-bottom:25px; }.topbar h1 { font-size:1.38rem; }.header-actions { gap:6px; }.header-actions .button { padding:9px 10px; }.button-primary { white-space:nowrap; }.tools { margin-bottom:23px; }.favorite-filter { font-size:0; width:46px; padding:0; }.favorite-filter::first-letter { font-size:1.2rem; }.template-list { grid-template-columns:1fr; }.template-card { height:126px; padding:14px; }.card-actions { justify-content:stretch; }.card-actions .button { flex:1; }.card-top { gap:8px; } }
@media (max-width:720px) { .category-edit-button { margin:9px 0 0; padding:7px 10px; border:1px solid #e3e7ee; border-radius:7px; white-space:nowrap; } }
@media (max-width:760px) { .calculator-layout { grid-template-columns:1fr; }.money-textarea-label { grid-row:1; }.quick-panel { grid-template-columns:none; }.money-textarea-label textarea { min-height:185px; }.quick-buttons { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:560px) { .quick-editor-fields { grid-template-columns:1fr; }.quick-editor-fields textarea { min-height:160px; } }
@media (max-width:460px) { .data-actions { grid-template-columns:1fr; }.data-actions p { min-height:0; } }
@media (max-width:430px) { .topbar { display:grid; grid-template-columns:1fr auto; }.topbar .button { padding:9px 11px; font-size:.82rem; }.template-title { font-size:.95rem; } }