*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:"Noto Sans JP","Yu Gothic UI",sans-serif;font-size:14px;line-height:1.7;color:#1f2937;background:#eef2f7}
.app-container{display:flex;flex-direction:column;height:100vh}

/* --- Header / Toolbar --- */
.app-header{display:flex;align-items:center;gap:16px;padding:10px 14px;background:#17324d;color:#f8fafc;flex-shrink:0;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.08)}
.header-brand{display:flex;flex-direction:column;gap:2px;min-width:240px}
.app-header h1{font-size:17px;font-weight:700;white-space:nowrap;letter-spacing:.02em}
.selected-group-indicator{font-size:12px;color:#c8d8ea;white-space:nowrap}
.toolbar{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap}
.toolbar-btn{padding:7px 12px;font-size:12px;border:1px solid #9fb3c8;border-radius:8px;background:#f8fafc;color:#17324d;cursor:pointer;white-space:nowrap;font-weight:600}
.toolbar-btn:hover{background:#dbe7f3}

/* --- Group Panel (top, replaces sidebar) --- */
.group-panel{background:#f7fbff;border-bottom:1px solid #c9d6e3;flex-shrink:0;overflow-x:auto;overflow-y:hidden}
.group-panel-content{display:flex;align-items:flex-start;gap:12px;padding:8px 14px;min-height:40px}
.group-panel-empty{padding:8px 0;color:#aaa;font-size:13px;text-align:center;width:100%}

/* --- Main Layout (panes only) --- */
.main-layout{display:grid;grid-template-columns:1fr;flex:1;overflow:hidden;min-height:0}
.group-item{display:flex;flex-direction:column;gap:6px;padding:8px 12px;background:#fff;border:1px solid #d4dde7;border-radius:6px;flex:1}
.group-name-row{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.group-name{font-size:13px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-xml-path-row{display:flex;align-items:center;gap:4px;padding:2px 0;font-size:10px;color:#666;border-bottom:1px dashed #dde5ee}
.xml-path-label{font-weight:600;white-space:nowrap;color:#555}
.xml-path-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic}
.xml-path-edit-btn{padding:0 4px;font-size:9px;border:1px solid #aaa;border-radius:2px;background:#f5f5f5;cursor:pointer;flex-shrink:0}
.xml-path-edit-btn:hover{background:#ddd}
.group-members{display:flex;flex-direction:row;gap:8px;flex-wrap:wrap}
.member-slot{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12px;background:#f0f4f8;border:1px solid #d4dde7;border-radius:4px;white-space:nowrap}
.member-slot.empty{opacity:.5}
.slot-badge{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;color:#fff;min-width:44px;text-align:center}
.slot-law{background:#2980b9}
.slot-enforcementOrder{background:#e67e22}
.slot-enforcementRegulation{background:#27ae60}
.slot-notification{background:#8e44ad}
.slot-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.slot-browse-btn{padding:1px 6px;font-size:10px;border:1px solid #27ae60;border-radius:3px;background:#eafaf1;color:#27ae60;cursor:pointer;font-weight:600;white-space:nowrap;flex-shrink:0}
.slot-browse-btn:hover{background:#27ae60;color:#fff}
.slot-show-btn{padding:1px 6px;font-size:10px;border:1px solid #2563eb;border-radius:3px;background:#eef4fb;color:#2563eb;cursor:pointer;font-weight:600;white-space:nowrap;flex-shrink:0}
.slot-show-btn:hover{background:#2563eb;color:#fff}
.slot-remove{background:none;border:none;color:#999;cursor:pointer;font-size:11px;padding:0 3px;line-height:1}
.slot-remove:hover{color:#e74c3c}
.member-notifications{display:flex;flex-direction:column;gap:2px;padding:4px 8px;background:#f0f4f8;border:1px solid #d4dde7;border-radius:4px}
.notification-item{display:flex;align-items:center;gap:4px;padding:1px 0;font-size:11px}
.notif-add-btn{padding:1px 8px;font-size:10px;border:1px solid #8e44ad;border-radius:3px;background:#f5eef8;color:#8e44ad;cursor:pointer;font-weight:600;white-space:nowrap}
.notif-add-btn:hover{background:#8e44ad;color:#fff}
.group-actions{display:flex;gap:4px;margin-top:2px}
.btn-small{padding:1px 6px;font-size:10px;border:1px solid #ccc;border-radius:2px;background:#fff;cursor:pointer}
.btn-small:hover{background:#ecf0f1}
.btn-danger{color:#e74c3c;border-color:#e74c3c}
.btn-danger:hover{background:#e74c3c;color:#fff}

/* --- Panes --- */
.pane-container{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;overflow:hidden;min-height:0;background:#dbe4ee}
.pane{display:flex;flex-direction:column;border-right:1px solid #d4dde7;background:#fff;min-width:0;min-height:0;overflow:hidden}
.pane:last-child{border-right:none}
.pane-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#f6f9fc;border-bottom:1px solid #d4dde7;min-height:36px;flex-shrink:0}
.pane-title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pane-close{background:#eef2f7;border:1px solid #c9d2dd;border-radius:6px;cursor:pointer;font-size:14px;padding:2px 10px;color:#334155;font-weight:600}
.pane-close:hover{background:#e74c3c;color:#fff;border-color:#e74c3c}
.pane-close.hidden{display:none}
.pane-content{flex:1;overflow-y:auto;padding:12px 16px}
.pane-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#aaa;font-size:14px;text-align:center;padding:24px}
.pane-empty.drag-over,.pane-content.drag-over{background:#eaf6ff;border:2px dashed #3498db}

/* --- Law content --- */
.law-num{font-size:12px;color:#777;margin-bottom:4px}
.law-title{font-size:18px;font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #2c3e50}
.law-type-badge{display:inline-block;padding:1px 8px;background:#2c3e50;color:#fff;border-radius:3px;font-size:12px;font-weight:400;vertical-align:middle}
.enact-statement{font-size:13px;color:#555;margin-bottom:16px;padding:8px;background:#fafafa;border-left:3px solid #ccc}
.toc{margin-bottom:16px;background:#fafafa;border:1px solid #eee;border-radius:4px}
.toc summary{padding:8px 12px;cursor:pointer;font-weight:600;font-size:14px}
.toc-content{padding:8px 12px;font-size:13px;white-space:pre-line;color:#555}
.part-title,.chapter-title{font-size:16px;font-weight:700;margin:20px 0 10px;padding:6px 0;border-bottom:1px solid #2c3e50;color:#2c3e50}
.section-title{font-size:15px;font-weight:600;margin:16px 0 8px;color:#34495e}
.subsection-title,.division-title{font-size:14px;font-weight:600;margin:12px 0 6px;color:#555}
.article{margin-bottom:16px;padding:8px 0;border-bottom:1px solid #f0f0f0}
.article-caption{display:block;font-size:13px;font-weight:600;color:#2980b9;margin-bottom:2px}
.article-title{display:inline-block;font-weight:700;margin-right:8px}
.paragraph{margin:4px 0}
.paragraph-num{font-weight:600;margin-right:4px}
.proviso{color:#8e44ad}
.item{margin:2px 0 2px 24px}
.item-title{font-weight:600;margin-right:4px}
.subitem{margin-left:24px}
.subitem-title{font-weight:600;margin-right:4px}
.suppl-provision{margin-top:24px;padding-top:12px;border-top:2px solid #95a5a6}
.suppl-provision-title{font-size:16px;font-weight:700;color:#7f8c8d;margin-bottom:12px}
.amend-law-num{font-size:12px;font-weight:400;color:#999;margin-left:8px}
.appdx-table{margin-top:24px;padding-top:12px;border-top:2px solid #95a5a6}
.appdx-table-title{font-size:16px;font-weight:700;color:#7f8c8d;margin-bottom:8px}
.related-article-num{font-size:13px;color:#999;margin-bottom:8px}
.law-table{border-collapse:collapse;width:100%;font-size:13px;margin:8px 0}
.law-table td{border:1px solid #ccc;padding:4px 8px;vertical-align:top}

/* --- Reference links --- */
.ref-link{color:#2563eb;text-decoration:none;border-bottom:1px dotted #2563eb;cursor:pointer}
.ref-link:hover{color:#e74c3c;border-bottom-color:#e74c3c}
.ref-link[data-ref-type="external"]{color:#27ae60;border-bottom-color:#27ae60}
.ref-link[data-ref-type="external"]:hover{color:#e74c3c;border-bottom-color:#e74c3c}
.ref-link[data-ref-type="group"]{color:#b45309;border-bottom-color:#b45309;background:rgba(245,158,11,.08)}
.ref-link[data-ref-type="group"]:hover{color:#e74c3c;border-bottom-color:#e74c3c}
.ref-link[data-ref-type="appdx"]{color:#7c3aed;border-bottom-color:#7c3aed;background:rgba(124,58,237,.08)}
.ref-link[data-ref-type="appdx"]:hover{color:#e74c3c;border-bottom-color:#e74c3c}

/* --- Brackets --- */
.collapsible{border-radius:4px;padding:0 1px;cursor:pointer;transition:background-color .12s ease}
.bracket-level-0{background-color:rgba(251,191,36,.35)}
.bracket-level-1{background-color:rgba(74,222,128,.26)}
.bracket-level-2{background-color:rgba(96,165,250,.26)}
.bracket-level-3{background-color:rgba(125,211,252,.28)}
.bracket-open,.bracket-close{font-weight:700}
.collapsible:hover{outline:1px solid rgba(37,99,235,.28)}
.collapsible[data-collapsed="true"]>.bracket-content{display:none}
.collapsible[data-collapsed="true"]>.bracket-open{display:none}
.collapsible[data-collapsed="true"]>.bracket-close{display:none}
.collapsible[data-collapsed="true"]{display:inline-block;width:.5em;height:1em;vertical-align:middle;border-radius:2px;cursor:pointer}

/* --- Custom decoration links --- */
.custom-deco-link{background:#fff3cd;border-bottom:1px dashed #856404;cursor:pointer;padding:0 1px}
.custom-deco-link:hover{background:#ffc107;color:#333}

/* --- Deco Manager --- */
#pane-3{background:#f8fbff;border-left:2px solid #c8d8ea}
#pane-3 .pane-close{display:none}
#pane-3 .pane-menu{display:none}
.pane-header{position:relative}
.pane-menu{background:transparent;border:1px solid #cbd5e1;color:#334155;font-size:16px;line-height:1;padding:2px 8px;border-radius:4px;cursor:pointer;margin-right:6px}
.pane-menu:hover{background:#e2e8f0;color:#0f172a}
.pane-menu.hidden{display:none}
.pane-article-list{position:absolute;top:100%;left:0;z-index:100;max-height:60vh;overflow-y:auto;background:#fff;border:1px solid #cbd5e1;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:4px 0;min-width:280px;max-width:90%}
.pane-article-list.hidden{display:none}
.article-list-item{display:block;padding:4px 12px;font-size:12px;cursor:pointer;border-bottom:1px solid #f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#334155;text-decoration:none}
.article-list-item:hover{background:#e0f2fe;color:#0c4a6e}
.article-list-item:last-child{border-bottom:none}
.article-list-num{font-weight:600;color:#0369a1;margin-right:6px}
.help-dialog{max-width:720px;width:90vw}
.help-content{max-height:65vh;overflow-y:auto;font-size:13px;line-height:1.7}
.help-content section{margin-bottom:16px}
.help-content h4{font-size:14px;margin-bottom:6px;color:#0f172a;border-bottom:1px solid #e2e8f0;padding-bottom:4px}
.help-content ul{padding-left:20px}
.help-content li{margin-bottom:4px}
.help-content code{background:#f1f5f9;padding:1px 4px;border-radius:3px;font-family:"Consolas",monospace;font-size:12px}
.deco-manage{padding:8px 0}
.deco-manage-header{display:flex;align-items:center;gap:12px;margin-bottom:0;position:sticky;top:0;background:#fff;z-index:10;padding:8px 0 6px}
.deco-manage-title{font-size:16px;font-weight:700;color:#2c3e50;margin:0}
.deco-add-link-btn{padding:3px 10px;font-size:11px;font-weight:600;border:1px solid #2980b9;border-radius:4px;background:#ebf5fb;color:#2980b9;cursor:pointer;white-space:nowrap}
.deco-add-link-btn:hover{background:#2980b9;color:#fff}
.html-notice-content{padding:8px;font-size:13px;line-height:1.6}
.deco-manage-subtitle{font-size:14px;font-weight:700;margin:20px 0 8px;color:#555}
.deco-manage-note{font-size:11px;color:#888;margin-bottom:8px}
.deco-manage-actions{display:flex;gap:6px;margin-bottom:0;padding:4px 0 6px;position:sticky;top:36px;background:#fff;z-index:10;border-bottom:1px solid #d4dde7}
.deco-manage-actions .btn-small:disabled{opacity:.4;cursor:not-allowed}
.deco-manage-table input[type="radio"]{cursor:pointer}
.deco-manage-table tr:has(input:checked){background:#e8f0fe}
.deco-manage-empty{color:#999;font-size:13px;padding:16px 0}
.deco-manage-table{border-collapse:collapse;width:100%;font-size:12px;margin-bottom:12px}
.deco-manage-table th{background:#f0f4f8;padding:6px 8px;border:1px solid #d4dde7;text-align:left;font-weight:600;white-space:nowrap}
.deco-manage-table td{padding:5px 8px;border:1px solid #e3ebf3;vertical-align:middle}
.deco-manage-table tr:hover{background:#f8fbff}
.deco-type-badge{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;font-weight:600;color:#fff}
.deco-type-custom{background:#3498db}
.deco-type-auto{background:#e67e22}
.deco-type-import{background:#95a5a6}
.deco-type-auto_r{background:#16a085}
.deco-manage-table tr.row-flash{animation:rowFlash 5s ease-out}
@keyframes rowFlash{0%{background:#ffe066}75%{background:#ffe066}100%{background:transparent}}

/* --- Link Manage Tooltip --- */
.link-manage-tooltip{position:absolute;z-index:9999;padding:3px 8px;font-size:11px;font-weight:600;background:#17324d;color:#f8fafc;border:1px solid #0e1f30;border-radius:4px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);white-space:nowrap;display:none;line-height:1.4}
.link-manage-tooltip:hover{background:#244b73}
.link-manage-tooltip::after{content:"";position:absolute;left:10px;bottom:-5px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #17324d}

/* --- Group Open Notice --- */
.group-open-notice{color:#c0392b;font-weight:700;font-size:12px;line-height:1.5;margin:6px 0;padding:6px 8px;background:#fff3f3;border:1px solid #e7b4b4;border-radius:4px;display:none}
.group-open-notice.visible{display:block}

/* --- Dialogs --- */
.app-dialog{border:1px solid #ccc;border-radius:6px;padding:20px;min-width:320px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.app-dialog::backdrop{background:rgba(0,0,0,.3)}
.app-dialog h3{margin-bottom:12px;font-size:15px;color:#2c3e50}
.app-dialog label{display:block;margin-bottom:8px;font-size:13px}
.app-dialog input,.app-dialog select{padding:4px 8px;font-size:13px;border:1px solid #ccc;border-radius:3px;margin-top:2px}
.app-dialog select{width:100%}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.dialog-actions button{padding:5px 14px;font-size:13px;border:1px solid #ccc;border-radius:3px;cursor:pointer}
.dialog-actions button[type="submit"]{background:#3498db;color:#fff;border-color:#3498db}
.dialog-actions button[type="submit"]:hover{background:#2980b9}

/* --- Misc --- */
.parse-error{color:#e74c3c;padding:16px;font-weight:600}
.toast{position:fixed;bottom:20px;right:20px;padding:10px 20px;background:#2c3e50;color:#fff;border-radius:4px;font-size:13px;z-index:1000;opacity:0;transition:opacity .3s}
.toast.show{opacity:1}
.pane-content::-webkit-scrollbar{width:8px}
.pane-content::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}
.article:target,.article.highlight{background:#fffde7;transition:background 1.5s}

@media (max-width: 1280px){
  .pane-container{grid-template-columns:1fr 1fr}
}

@media (max-width: 960px){
  .pane-container{grid-template-columns:1fr}
  .pane{border-right:none;border-bottom:1px solid #d4dde7}
}