:root {
  --ink:    #0f0f0f; --ink2: #2c2c2c; --ink3: #6b6b6b; --ink4: #a0a0a0;
  --paper:  #f7f6f3; --paper2: #eeecea; --paper3: #e5e3df; --white: #ffffff;
  --line:   #d8d5d0; --line2: #c5c2bc;
  --hi:     #1a56db; --hi-l: #eff4ff; --hi-d: #1240a0;
  --go:     #0d7450; --go-l: #ecfaf4;
  --warn:   #b45309; --warn-l: #fef3cd;
  --err:    #b91c1c; --err-l: #fee2e2;
  --cons:   #7c3aed; --cons-l: #f5f3ff;
  --r: 4px; --r2: 8px;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Inter', sans-serif;
  --disp: 'Syne', sans-serif;
  --sh: 0 1px 2px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);
  --sh2: 0 4px 16px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06);
  --sb-width: 200px;
}
*,::before,::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px;}

/* HDR */
.hdr{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:var(--ink);position:sticky;top:0;z-index:400;}
.hdr-logo{font-family:var(--disp);font-size:1.05rem;font-weight:700;letter-spacing:.06em;color:var(--white);display:flex;align-items:center;}
.hdr-mark{width:22px;height:22px;border:2px solid var(--hi);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hdr-mark::after{content:'';width:7px;height:7px;background:var(--hi);border-radius:50%;}
.hdr-nav{display:flex;align-items:center;gap:2px;}
.hn{padding:5px 13px;border:none;background:none;color:rgba(255,255,255,.55);font-family:var(--sans);font-size:.78rem;font-weight:500;cursor:pointer;border-radius:var(--r);transition:all .15s;}
.hn:hover{color:var(--white);background:rgba(255,255,255,.1);}
.hn.on{color:var(--white);background:var(--hi);}
.hn-sep{width:1px;height:16px;background:rgba(255,255,255,.15);margin:0 4px;}
.hn-json{padding:5px 13px;border:1px solid rgba(255,255,255,.2);background:none;color:rgba(255,255,255,.7);font-family:var(--mono);font-size:.72rem;cursor:pointer;border-radius:var(--r);transition:all .15s;}
.hn-json:hover{border-color:var(--hi);color:var(--hi);}

/* SHELL & SIDEBAR */
.shell { display: grid; grid-template-columns: var(--sb-width) 1fr; height: calc(100vh - 48px); transition: all 0.3s ease; }
.shell.sb-collapsed { grid-template-columns: 60px 1fr !important; }
.shell.sb-collapsed .sb-name, .shell.sb-collapsed .sb-sub, .shell.sb-collapsed .sb-lbl, .shell.sb-collapsed .sb-add, .shell.sb-collapsed .sb-acts { display: none; }
.shell.sb-collapsed .sb-item { justify-content: center; padding: 8px 0; }
.sb{background:var(--white);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;}
.sb-top{padding:14px 12px 8px;border-bottom:1px solid var(--line);}
.sb-lbl{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);}
.sb-scroll{flex:1;overflow-y:auto;padding:6px 6px 0;}
.sb-item{display:flex;align-items:center;gap:9px;padding:8px 8px;border-radius:var(--r2);cursor:pointer;transition:all .12s;margin-bottom:2px;border:1px solid transparent; position: relative;}
.sb-item:hover{background:var(--paper);}
.sb-item.on{background:var(--hi-l);border-color:rgba(26,86,219,.18);}
.sb-thumb{width:28px;height:28px;border-radius:var(--r);background:var(--paper2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-size:.9rem;}
.sb-thumb img{width:100%;height:100%;object-fit:cover;}
.sb-name{font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-item.on .sb-name{color:var(--hi-d);}
.sb-sub{font-size:.68rem;color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-foot{padding:8px 10px 12px;border-top:1px solid var(--line);}
.sb-add{width:100%;padding:7px;border:1.5px dashed var(--line2);background:none;color:var(--ink4);font-family:var(--sans);font-size:.78rem;border-radius:var(--r2);cursor:pointer;transition:all .15s;}
.sb-add:hover{border-color:var(--hi);color:var(--hi);background:var(--hi-l);}

/* スマホ用＆並べ替え用 */
#mainArea { min-width: 0 !important; width: 100% !important; overflow-x: hidden; background: var(--paper); overflow-y: auto; }
@media (max-width: 768px) {
  .shell { grid-template-columns: 1fr !important; }
  .shell:not(.sb-open) .sb { display: none !important; }
  .shell.sb-open { grid-template-columns: 200px 1fr !important; }
  .shell.sb-open .sb { display: flex !important; }
}
.sort-btn { width:24px; height:24px; border:none; background:none; color:var(--line2); cursor:pointer; border-radius:var(--r); font-size:.7rem; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.sort-btn:hover { background:var(--paper2); color:var(--ink); }
.sb-acts { display:flex; flex-direction:column; margin-left:auto; gap:2px; opacity:0.3; transition:opacity .2s; }
.sb-item:hover .sb-acts, .sb-item.on .sb-acts { opacity:1; }

/* WELCOME */
.welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:14px;text-align:center;padding:40px;}
.welcome svg{opacity:.1;}
.welcome-h{font-family:var(--disp);font-size:1.6rem;font-weight:700;color:var(--ink2);}
.welcome-p{font-size:.85rem;color:var(--ink4);}

/* HERO */
.hero{background:var(--white);border-bottom:1px solid var(--line);padding:20px 24px;display:flex;gap:18px;align-items:flex-start;}
.hero-img{width:130px;height:90px;border-radius:var(--r2);border:1px solid var(--line);background:var(--paper2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;flex-shrink:0;}
.hero-img img{width:100%;height:100%;object-fit:cover;}
.hero-ph{color:var(--ink4);font-size:.7rem;text-align:center;}
.hero-ph span{display:block;font-size:1.6rem;opacity:.25;margin-bottom:2px;}
.img-ov{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;font-size:.72rem;color:#fff;font-weight:500;}
.hero-img:hover .img-ov{opacity:1;}
.hero-body{flex:1;min-width:0;}
.hero-name{font-family:var(--disp);font-size:1.55rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink);}
.hero-meta{font-size:.75rem;color:var(--ink3);margin-top:4px;font-family:var(--mono);}
.hero-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}

/* STATS & TABS */
.stats{display:flex;background:var(--white);border-bottom:1px solid var(--line);}
.stat{flex:1;padding:12px 16px;border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat-l{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);margin-bottom:3px;}
.stat-v{font-family:var(--disp);font-size:1.3rem;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.stat-u{font-family:var(--mono);font-size:.65rem;color:var(--ink4);font-weight:400;margin-left:2px;}
.tabs{display:flex;background:var(--white);border-bottom:2px solid var(--line);padding:0 18px;overflow-x:auto;}
.tab{padding:10px 14px;border:none;background:none;color:var(--ink4);font-family:var(--sans);font-size:.8rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap;}
.tab:hover{color:var(--ink);}
.tab.on{color:var(--hi);border-bottom-color:var(--hi);}
.tab-n{display:inline-block;background:var(--paper2);color:var(--ink4);font-size:.62rem;font-family:var(--mono);padding:0 5px;border-radius:3px;margin-left:4px;vertical-align:middle;line-height:1.6;}
.tab.on .tab-n{background:var(--hi-l);color:var(--hi);}
.panel{display:none;padding:18px 22px;}
.panel.on{display:block;}

/* SEC */
.sec-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.sec-t{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);}
.sec-acts{display:flex;gap:6px;}

/* TREE */
.tree{display:flex;flex-direction:column;gap:0;}
.tr{display:flex;align-items:stretch;background:var(--white);border:1px solid var(--line);border-radius:var(--r);transition:border-color .12s,box-shadow .12s;overflow:hidden;margin-bottom:3px;}
.tr:hover{border-color:var(--line2);box-shadow:var(--sh);}
.tr.sel{border-color:var(--hi);box-shadow:0 0 0 2px var(--hi-l);}
.tr-tog{width:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink4);font-size:.55rem;transition:transform .18s;user-select:none;border-right:1px solid var(--line);background:var(--paper);cursor:pointer;}
.tr-tog.open{transform:rotate(90deg);}
.tr-tog.leaf{opacity:0;pointer-events:none;}
.tr-body{flex:1;display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;}
.tr-icon{font-size:.78rem;flex-shrink:0;color:var(--ink4);}
.tr.sel .tr-icon{color:var(--hi);}
.tr-name{font-weight:600;font-size:.83rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tr.sel .tr-name{color:var(--hi-d);}
.tr-badge{font-family:var(--mono);font-size:.64rem;color:var(--ink4);background:var(--paper2);padding:1px 6px;border-radius:3px;white-space:nowrap;flex-shrink:0;}
.tr-cons{font-size:.6rem;font-weight:600;color:var(--cons);background:var(--cons-l);padding:1px 7px;border-radius:20px;border:1px solid rgba(124,58,237,.15);flex-shrink:0;}
.tr-acts{display:flex;gap:1px;padding:0 6px;flex-shrink:0;align-items:center;}
.tr-btn{width:24px;height:24px;border:none;background:none;color:var(--ink4);cursor:pointer;border-radius:var(--r);font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:all .12s;}
.tr-btn:hover{background:var(--paper2);color:var(--ink);}
.tr-btn.del:hover{background:var(--err-l);color:var(--err);}
.tc-wrap{margin-left:0;display:flex;flex-direction:column;gap:0;}

/* DETAIL PANEL */
.dp{margin-top:12px;background:var(--white);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh);animation:dpIn .16s ease;}
@keyframes dpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.dp-hd{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(to right,var(--paper),var(--white));}
.dp-name{font-family:var(--disp);font-size:1.2rem;font-weight:700;letter-spacing:-.02em; transition: color .15s;}
.dp-name:hover{color: var(--hi);}
.dp-path{font-family:var(--mono);font-size:.62rem;color:var(--ink4);margin-top:2px;}
.dp-body{display:grid;grid-template-columns:140px 1fr;gap:0;}
@media (max-width: 600px) {
  .dp-body{grid-template-columns:1fr;}
}
.dp-img-col{padding:12px;border-right:1px solid var(--line);}
.dp-img-box{width:100%;aspect-ratio:1;border-radius:var(--r);border:1px solid var(--line);background:var(--paper2);overflow:hidden;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;}
.dp-img-box img{width:100%;height:100%;object-fit:cover;}
.dp-img-box:hover .img-ov{opacity:1;}
.dp-attrs{padding:12px;}
.attr-tbl{width:100%;border-collapse:collapse;}
.attr-tbl tr{border-bottom:1px solid var(--line);}
.attr-tbl tr:last-child{border-bottom:none;}
.attr-k{padding:5px 8px 5px 0;width:100px;vertical-align:middle;}
.attr-k-lbl{font-family:var(--mono);font-size:.68rem;color:var(--ink4);}
.attr-k-in{font-family:var(--mono);font-size:.68rem;color:var(--ink3);background:none;border:none;border-bottom:1px solid transparent;width:100%;outline:none;padding:0;}
.attr-k-in:focus{border-bottom-color:var(--hi);}
.attr-v{padding:4px 0;vertical-align:middle;}
.attr-v-in{font-size:.82rem;background:none;border:none;border-bottom:1px dashed var(--line2);width:100%;outline:none;color:var(--ink);padding:2px 0;transition:border .12s;}
.attr-v-in:focus{border-bottom-color:var(--hi);border-bottom-style:solid;}
.attr-del{padding:0 4px;width:22px;vertical-align:middle;}
.attr-del-btn{width:18px;height:18px;border:none;background:none;color:var(--ink4);cursor:pointer;border-radius:3px;font-size:.7rem;display:flex;align-items:center;justify-content:center;}
.attr-del-btn:hover{background:var(--err-l);color:var(--err);}
.dp-foot{padding:8px 12px;border-top:1px solid var(--line);display:flex;gap:6px;background:var(--paper);flex-wrap:wrap;}

/* CONSUMABLE */
.cons-pan{border-top:1px solid var(--line);}
.cons-pan-hd{padding:8px 16px;background:var(--cons-l);border-bottom:1px solid rgba(124,58,237,.12);display:flex;justify-content:space-between;align-items:center;}
.cons-pan-title{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cons);}
.stock-row{display:flex;align-items:center;gap:6px;}
.stock-n{font-family:var(--disp);font-size:1.1rem;font-weight:700;color:var(--ink);min-width:24px;text-align:center;}
.stock-btn{width:22px;height:22px;border:1px solid var(--line2);background:var(--white);color:var(--ink2);border-radius:var(--r);font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;font-weight:700;}
.stock-btn:hover{background:var(--hi);border-color:var(--hi);color:#fff;}
.cons-pan-body{padding:10px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width: 600px) {
  .cons-pan-body{grid-template-columns:1fr;}
}
.repl-hd{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink4);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
.repl-list{display:flex;flex-direction:column;gap:3px;max-height:130px;overflow-y:auto;}
.repl-row{display:grid;grid-template-columns:76px 1fr auto;gap:6px;align-items:center;padding:4px 7px;background:var(--paper);border-radius:var(--r);font-size:.73rem;}
.repl-date{font-family:var(--mono);font-size:.68rem;color:var(--ink4);}

/* SETTINGS & MAINT */
.sett-tbl{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;}
.sett-tbl tr{border-bottom:1px solid var(--line);}
.sett-tbl tr:last-child{border-bottom:none;}
.sett-k{padding:8px 12px;width:210px;}
.sett-k-in{width:100%;background:none;border:none;border-bottom:1px solid transparent;font-family:var(--mono);font-size:.78rem;color:var(--ink2);outline:none;padding:2px 0;}
.sett-k-in:focus{border-bottom-color:var(--hi);}
.sett-v{padding:7px 8px;}
.sett-v-in{width:100%;background:none;border:none;border-bottom:1px dashed var(--line2);font-size:.85rem;color:var(--ink);outline:none;padding:2px 0;transition:border .12s;}
.sett-v-in:focus{border-bottom-color:var(--hi);border-bottom-style:solid;}
.sett-d{padding:0 10px;width:28px;}
.sett-d-btn{width:20px;height:20px;border:none;background:none;color:var(--ink4);cursor:pointer;border-radius:3px;font-size:.75rem;}
.sett-d-btn:hover{background:var(--err-l);color:var(--err);}

.maint-list{display:flex;flex-direction:column;gap:6px;}
.maint-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r2);padding:11px 14px;display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:start;transition:box-shadow .12s;}
.maint-card:hover{box-shadow:var(--sh);}
.maint-date{background:var(--paper2);border-radius:var(--r);padding:4px 7px;text-align:center;}
.maint-d{font-family:var(--mono);font-size:.7rem;color:var(--ink2);}
.maint-desc{font-weight:600;font-size:.85rem;margin-bottom:1px;}
.maint-sub{font-size:.7rem;color:var(--ink4);}
.maint-del{width:20px;height:20px;border:none;background:none;color:var(--ink4);cursor:pointer;border-radius:var(--r);font-size:.72rem;margin-left:auto;display:block;}
.maint-del:hover{background:var(--err-l);color:var(--err);}

/* PAGES (CONS / STOCK) */
.cons-pg, .stock-pg{padding:20px 24px;}
.cons-pg-hd, .stock-pg-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.cons-grid, .stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.cons-card, .sc{background:var(--white);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;transition:box-shadow .12s;}
.cons-card:hover, .sc:hover{box-shadow:var(--sh);}
.cc-hd, .sc-hd{padding:10px 13px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;}
.cc-name, .sc-name{font-weight:600;font-size:.85rem;}
.cc-path, .sc-cat{font-size:.65rem;color:var(--ink4);font-family:var(--mono);margin-top:1px;}
.cc-badge{padding:2px 9px;border-radius:20px;font-size:.68rem;font-weight:600;}
.cc-badge.ok{background:var(--go-l);color:var(--go);}
.cc-badge.low{background:var(--err-l);color:var(--err);}
.cc-body{padding:9px 13px;}
.sc-body{padding:9px 13px;display:flex;flex-direction:column;gap:4px;}
.cc-meta{font-size:.68rem;color:var(--ink4);font-family:var(--mono);margin-bottom:7px;}
.cc-log{display:flex;flex-direction:column;gap:2px;}
.cc-log-row{display:grid;grid-template-columns:72px 1fr;gap:8px;font-size:.7rem;color:var(--ink4);padding:2px 0;border-bottom:1px solid var(--line);}
.cc-log-row:last-child{border-bottom:none;}
.sc-row{display:flex;justify-content:space-between;align-items:center;font-size:.75rem;}
.sc-key{color:var(--ink4);font-family:var(--mono);font-size:.68rem;}
.sc-val{color:var(--ink);font-weight:500;}
.sc-stock-row{display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line);}
.sc-stock-lbl{font-family:var(--mono);font-size:.65rem;color:var(--ink4);flex:1;}
.sc-stock-n{font-family:var(--disp);font-size:1.1rem;font-weight:700;color:var(--ink);}
.cc-ft, .sc-ft{padding:7px 13px;background:var(--paper);border-top:1px solid var(--line);display:flex;gap:6px;justify-content:flex-end;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border:1px solid var(--line);background:var(--white);color:var(--ink2);font-family:var(--sans);font-size:.78rem;font-weight:500;border-radius:var(--r);cursor:pointer;transition:all .12s;white-space:nowrap;}
.btn:hover{background:var(--paper2);border-color:var(--line2);color:var(--ink);}
.btn-p{background:var(--hi);border-color:var(--hi);color:#fff;}
.btn-p:hover{background:var(--hi-d);border-color:var(--hi-d);color:#fff;}
.btn-sm{padding:4px 10px;font-size:.72rem;}
.btn-xs{padding:2px 8px;font-size:.68rem;}
.btn-dl{color:var(--err);border-color:transparent;background:none;}
.btn-dl:hover{background:var(--err-l);border-color:rgba(185,28,28,.2);}
.btn-cons{color:var(--cons);border-color:rgba(124,58,237,.25);background:var(--cons-l);}
.btn-cons:hover{background:#ede9fe;}
.btn-go{color:var(--go);border-color:rgba(13,116,80,.25);background:var(--go-l);}

/* MODAL */
.ov{display:none;position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:600;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.ov.on{display:flex;}
.modal{background:var(--white);border:1px solid var(--line);border-radius:10px;width:480px;max-width:95vw;max-height:91vh;overflow-y:auto;box-shadow:var(--sh2);animation:mIn .18s ease;}
@keyframes mIn{from{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:none}}
.m-hd{padding:18px 20px 12px;border-bottom:1px solid var(--line);}
.m-title{font-family:var(--disp);font-size:1.1rem;font-weight:700;letter-spacing:-.01em;}
.m-body{padding:16px 20px;display:flex;flex-direction:column;gap:13px;}
.m-ft{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--paper);border-radius:0 0 10px 10px;}
.fld{display:flex;flex-direction:column;gap:4px;}
.fld label{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);}
.fld input,.fld select,.fld textarea{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-family:var(--sans);font-size:.83rem;color:var(--ink);outline:none;transition:border .12s;}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--hi);background:var(--white);}
.fld select option{background:var(--white);}
.fld textarea{resize:vertical;min-height:52px;}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fld-ck{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.83rem;color:var(--ink2);padding:4px 0;}
.fld-ck input{width:14px;height:14px;accent-color:var(--cons);cursor:pointer;}
.fld-hint{font-family:var(--mono);font-size:.62rem;color:var(--ink4);}
.af-wrap{display:flex;flex-direction:column;gap:5px;}
.af-row{display:grid;grid-template-columns:1fr 1fr 22px;gap:5px;align-items:center;}
.af-row input{padding:5px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-family:var(--mono);font-size:.75rem;color:var(--ink);outline:none;}
.af-row input:focus{border-color:var(--hi);}
.af-rm{width:22px;height:22px;border:none;background:none;color:var(--ink4);cursor:pointer;border-radius:var(--r);font-size:.75rem;}
.af-rm:hover{background:var(--err-l);color:var(--err);}
.json-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:12px;font-family:var(--mono);font-size:.7rem;color:var(--ink2);max-height:52vh;overflow-y:auto;white-space:pre;line-height:1.65;}
.empty{text-align:center;padding:40px;color:var(--ink4);}
.empty-ic{font-size:2rem;opacity:.15;margin-bottom:8px;}
.empty-t{font-size:.82rem;}
/* ===============================
 * PC用 左右分割レイアウト (パーツツリー画面)
 * =============================== */
 .parts-twocol {
    display: flex;
    flex-direction: column; /* スマホ時は今まで通り縦積み */
    gap: 20px;
  }
  
  #detailEl:empty {
    display: none; /* パーツ未選択時は詳細エリアの余白を消す */
  }
  
  /* 画面幅が768px以上（PCやタブレット）の時の設定 */
  @media (min-width: 768px) {
    .parts-twocol {
      flex-direction: row; /* 横並びに変更 */
      align-items: flex-start;
    }
    
    .tree {
      flex: 1; /* 左側（ツリー）の割合 */
      min-width: 300px;
    }
    
    .detail-col {
      flex: 1.2; /* 右側（詳細）を少し広めにする */
      position: sticky; /* ★スクロールしても画面内に追従させる設定 */
      top: 20px;
    }
  }
/* ===============================
 * PC表示時の全体サイズ＆横幅拡張
 * =============================== */
 @media (min-width: 768px) {
    /* 1. アプリ全体の最大幅制限を完全撤廃し、モニターをフルに使う！ */
    .shell {
      max-width: none !important;
    }
  
    /* 2. 左右の比率調整（右側をもっと広く使いたい場合は 2.0 や 2.5 に変更してもOKです） */
    .parts-twocol .detail-col {
      flex: 1.6;
    }
  
    /* 3. Flexboxの罠を解除：画像とテーブルが縦に引き伸ばされるのを防ぐ */
    .dp-body {
      align-items: flex-start !important;
    }
  
    /* 4. 画像エリアの幅を適切に広げる */
    .dp-img-col {
      flex: 0 0 45% !important; 
      max-width: 600px; /* ここもさらに大きくしました */
    }
  
    /* 5. 画像ボックスを綺麗な長方形（4:3）に保つ */
    .dp-img-box {
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 4 / 3;
      background: transparent !important; 
    }
  
    .dp-img-box img {
      width: 100%;
      height: 100%;
      object-fit: contain !important;
    }
    
    /* 6. 入力エリアも少し余裕を持たせる */
    .attr-v-in {
      padding: 8px;
    }
  }
  /* ===============================
 * スマホ表示時のヘッダー崩れ（縦潰れ）修正
 * =============================== */
@media (max-width: 768px) {
    /* 1. ヘッダーを1行から「折り返し許可（2段構え）」に変更 */
    .hdr {
      flex-wrap: wrap;
      height: auto !important; /* 固定の高さを解除 */
      padding: 10px 15px !important;
      gap: 12px; /* 上段（ロゴ）と下段（メニュー）の隙間 */
    }
    
    /* 2. メニュー部分を下段に落とし、横スクロール可能にする */
    .hdr-nav {
      width: 100%;
      justify-content: flex-start !important; /* 左詰めに配置 */
      overflow-x: auto; /* 画面外にはみ出た分はスクロールさせる */
      padding-bottom: 5px; /* スクロールしやすいように少し余白を取る */
      -webkit-overflow-scrolling: touch; /* iOSで滑らかにスクロールさせる魔法 */
    }
    
    /* 3. ボタンや文字が「縦書き」に潰れるのを完全ブロック */
    .hdr-nav > *, 
    .hdr-nav label {
      flex-shrink: 0; /* 縮むのを禁止 */
      white-space: nowrap !important; /* 文字の折り返しを禁止 */
    }
    
    /* 4. スマホ画面ではJSON出力ボタンを隠してスッキリさせる（必要なら消してください） */
    .hn-json {
      display: none !important;
    }
  }
  /* ===============================
 * 閲覧モードの完全ロックダウン（入出力制御）
 * =============================== */

/* 1. テキスト入力欄への操作を無効化し、ただの文字に見せる */
body.read-mode input.attr-k-in,
body.read-mode input.attr-v-in,
body.read-mode input.sett-k-in,
body.read-mode input.sett-v-in {
  pointer-events: none !important; /* クリックや文字入力を完全ブロック */
  border-color: transparent !important; /* 枠線を消す */
  background: transparent !important;
  color: var(--ink) !important;
}

/* 2. パーツ名変更（名前をクリック）を無効化 */
body.read-mode .dp-name {
  pointer-events: none !important;
}

/* 3. 各種「追加・編集・削除・並べ替え」ボタンを一斉に非表示にする */
body.read-mode .hero-acts,        /* バイク上部の編集/削除ボタン */
body.read-mode .tr-acts,          /* ツリー横の＋や✕ボタン */
body.read-mode .attr-del,         /* 属性テーブルの✕ボタン */
body.read-mode .dp-foot,          /* 詳細パネル下部の属性追加ボタン */
body.read-mode .sb-add,           /* サイドバーのバイク追加ボタン */
body.read-mode .stock-btn,        /* 消耗品/在庫の＋−ボタン */
body.read-mode .sort-btn,         /* サイドバーの並べ替え(▲▼)ボタン */
body.read-mode .sec-hd .btn-p,    /* メンテやセッティングの追加ボタン */
body.read-mode .stock-pg-hd .btn, /* パーツ在庫の追加ボタン */
body.read-mode .cc-ft,            /* 消耗品の交換記録ボタン */
body.read-mode .sc-ft             /* 在庫パーツの編集/削除ボタン */
{
  display: none !important;
}

/* 4. 詳細パネル上部の編集系ボタンを隠す（「閉じる」ボタンだけは残す） */
body.read-mode .dp-hd .btn:not(:last-child) {
  display: none !important;
}