@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap";
:root{--bg-main:#f3f4f6;--bg-surface:#fff;--bg-surface-hover:#f9fafb;--border-color:#d1d5db;--border-color-focus:#1e3a8a;--primary:#1e3a8a;--primary-glow:#1e3a8a26;--secondary:#047857;--secondary-glow:#0478571a;--tertiary:#b91c1c;--tertiary-glow:#b91c1c1a;--text-main:#111827;--text-muted:#4b5563;--text-inverse:#fff;--success:#059669;--error:#dc2626;--warning:#d97706;--diff-removed-bg:#fee2e2;--diff-removed-border:#f87171;--diff-added-bg:#d1fae5;--diff-added-border:#34d399;--radius-xl:12px;--radius-lg:8px;--radius-md:6px;--radius-sm:3px;--font-base:"Outfit", "Noto Sans JP", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-base);-webkit-font-smoothing:antialiased;width:100vw;height:100vh;font-size:13px;line-height:1.5;overflow:hidden}.glass{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:0 1px 3px #0000000d,0 1px 2px #0000001a}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:var(--radius-sm);background:#00000026}::-webkit-scrollbar-thumb:hover{background:#0000004d}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;outline:none}input[type=text]{color:var(--text-main);border:1px solid var(--border-color);border-radius:var(--radius-md);background:#fff;height:32px;padding:6px 10px;transition:all .15s ease-in-out}input[type=text]:focus{border-color:var(--primary);box-shadow:0 0 5px var(--primary-glow)}button{cursor:pointer;background:0 0;border:none;transition:all .15s ease-in-out}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius-md);justify-content:center;align-items:center;gap:6px;height:32px;padding:6px 12px;font-weight:600;display:inline-flex}.btn-primary:hover{background:#1e40af;box-shadow:0 2px 4px #1e3a8a33}.btn-primary:active{background:#172554}.btn-primary:disabled{color:#9ca3af;box-shadow:none;cursor:not-allowed;background:#e5e7eb}.btn-secondary{border:1px solid var(--border-color);color:var(--text-main);border-radius:var(--radius-md);background:#fff;height:32px;padding:6px 12px;font-weight:600}.btn-secondary:hover{background:#f3f4f6;border-color:#9ca3af}.app-container{background-color:var(--bg-main);grid-template-columns:100vw;width:100vw;height:100vh;display:grid}.app-header{border-bottom:1px solid var(--border-color);background:#fff;justify-content:space-between;align-items:center;padding:0 8px;display:flex;box-shadow:0 1px 2px #0000000d}.app-header h1{letter-spacing:.5px;color:var(--primary);font-size:14px;font-weight:700}.logo-icon-wrapper{transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .25s}.logo-icon-wrapper:hover{filter:drop-shadow(0 0 10px #3b82f680);transform:scale(1.12)rotate(-3deg)}.main-content{height:100%;padding:8px 8px 4px;display:grid;overflow:hidden}.pane{flex-direction:column;height:100%;padding:8px;display:flex;overflow:hidden}.pane-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;margin-bottom:6px;padding-bottom:4px;display:flex}.pane-title{text-transform:uppercase;letter-spacing:.5px;color:var(--primary);font-size:11px;font-weight:700}.pane-body{flex:1;position:relative;overflow-y:auto}.badge{border-radius:var(--radius-sm);align-items:center;padding:2px 6px;font-size:10px;font-weight:700;line-height:1;display:inline-flex}.badge-formal{color:#065f46;background-color:#d1fae5;border:1px solid #a7f3d0}.badge-informal{color:#991b1b;background-color:#fee2e2;border:1px solid #fca5a5}.badge-cache{color:#3730a3;background-color:#e0e7ff;border:1px solid #c7d2fe}ins{background:var(--diff-added-bg);border-bottom:1px solid var(--diff-added-border);border-radius:var(--radius-sm);color:#065f46;padding:0 2px;text-decoration:none}del{background:var(--diff-removed-bg);border-bottom:1px solid var(--diff-removed-border);opacity:.8;border-radius:var(--radius-sm);color:#991b1b;padding:0 2px;text-decoration:line-through}.resizer-col{cursor:col-resize;z-index:10;-webkit-user-select:none;user-select:none;background:0 0;flex-shrink:0;align-self:stretch;width:8px;position:relative}.resizer-col:after{content:"";background:0 0;width:2px;transition:background .15s ease-in-out;position:absolute;top:0;bottom:0;left:3px}.resizer-col:hover:after,.resizer-col.active:after{background:var(--primary);box-shadow:0 0 4px var(--primary-glow)}.resizer-row{cursor:row-resize;z-index:10;-webkit-user-select:none;user-select:none;background:0 0;flex-shrink:0;width:100%;height:8px;position:relative}.resizer-row:after{content:"";background:0 0;height:2px;transition:background .15s ease-in-out;position:absolute;top:3px;left:0;right:0}.resizer-row:hover:after,.resizer-row.active:after{background:var(--primary);box-shadow:0 0 4px var(--primary-glow)}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:9999;background-color:#0f172a66;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.3s ease-out forwards fadeInOverlay;display:flex;position:fixed;top:0;left:0}.modal-card{border-radius:var(--radius-xl);background:#fffffff2;border:1px solid #e2e8f0cc;flex-direction:column;width:90%;max-width:600px;max-height:85vh;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideInCard;display:flex;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.modal-header{border-bottom:1px solid #e2e8f0;align-items:center;gap:12px;padding:18px 24px;display:flex}.modal-icon{font-size:20px}.modal-header h2{color:var(--primary);font-size:16px;font-weight:700}.modal-body{flex-direction:column;gap:20px;padding:24px;font-size:13px;line-height:1.6;display:flex;overflow-y:auto}.modal-section h3{color:var(--text-main);margin-bottom:8px;font-size:13px;font-weight:700}.modal-section p{color:var(--text-muted)}.warning-section{border-left:4px solid var(--error);border-radius:0 var(--radius-lg) var(--radius-lg) 0;background-color:#ef44440d;padding:12px 16px}.warning-section h3{color:var(--error);margin-bottom:8px}.warning-section ul{flex-direction:column;gap:10px;padding-left:0;list-style-type:none;display:flex}.warning-section li{color:#1f2937;padding-left:14px;position:relative}.warning-section li:before{content:"•";color:var(--error);font-weight:700;position:absolute;left:0}.modal-footer{background-color:#f8fafc;border-top:1px solid #e2e8f0;justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.btn-agree{width:auto;height:38px;padding:8px 20px;font-size:13px}.btn-close{height:38px;padding:8px 16px;font-size:13px}.btn-reset{color:var(--text-muted);opacity:.6;border:1px dashed var(--border-color);border-radius:var(--radius-md);margin-right:auto;padding:4px 8px;font-size:11px;transition:all .15s}.btn-reset:hover{opacity:1;border-color:var(--error);color:var(--error);background-color:#fee2e2}.btn-disclaimer{color:var(--text-muted);border:1px solid var(--border-color);border-radius:var(--radius-md);background:0 0;align-items:center;gap:4px;height:26px;padding:4px 10px;font-size:11px;font-weight:600;transition:all .15s;display:inline-flex}.btn-disclaimer:hover{background-color:var(--bg-main);color:var(--primary);border-color:var(--primary);box-shadow:0 1px 2px #0000000d}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes slideInCard{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.diff-nav-group{background:var(--bg-main);border-radius:var(--radius-md);border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:2px 8px;font-size:11px;display:inline-flex}.diff-nav-count strong{color:var(--primary);font-weight:700}.diff-nav-btn{border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-surface);width:20px;height:20px;color:var(--text-main);cursor:pointer;justify-content:center;align-items:center;padding:0;font-size:9px;line-height:1;transition:all .15s;display:inline-flex}.diff-nav-btn:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 1px 2px #1e3a8a33}.diff-nav-btn:disabled{opacity:.4;cursor:not-allowed}@keyframes diff-pulse-glow{0%{background-color:#f59e0b59;transform:scale(1.02);box-shadow:0 0 0 3px #f59e0b66}50%{background-color:#f59e0b33;box-shadow:0 0 0 2px #f59e0b40}to{box-shadow:none;background-color:#0000;transform:scale(1)}}.diff-active-highlight{border-radius:var(--radius-sm);animation:1.5s cubic-bezier(.16,1,.3,1) forwards diff-pulse-glow}.diff-pair-active{border-radius:var(--radius-sm);transition:all .2s;box-shadow:0 0 10px #f59e0b66;color:inherit!important;background-color:#ffeb3b73!important;outline:2px solid #f59e0b!important}.diff-nav-group{background:var(--bg-card);border:1px solid var(--primary-light);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);align-items:center;gap:6px;padding:3px 8px;transition:all .2s;display:flex}.diff-nav-group:hover{border-color:var(--primary);box-shadow:0 0 12px #6366f140}.diff-nav-count{color:var(--text-muted);white-space:nowrap;font-size:11px;font-weight:600}.diff-nav-count strong{color:var(--primary);font-size:12px}.diff-nav-btn{background:var(--bg-hover);border:1px solid var(--border-color);color:var(--text-main);border-radius:var(--radius-sm);cursor:pointer;justify-content:center;align-items:center;width:22px;height:22px;font-size:10px;transition:all .15s;display:inline-flex}.diff-nav-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px)}@keyframes flashJump{0%{border-color:var(--primary);background-color:#4f46e538;box-shadow:0 0 12px #4f46e54d}20%{background-color:#4f46e529;border-color:#4f46e599}to{background-color:#0000;border-color:#0000;box-shadow:0 0 #4f46e500}}.flash-jump-highlight{pointer-events:none!important;animation:1.4s cubic-bezier(.16,1,.3,1) forwards flashJump!important}@media (max-width:767px){body:not(.force-desktop) .app-container{flex-direction:column!important;grid-template-rows:none!important;height:auto!important;min-height:100dvh!important;padding:6px!important;display:flex!important;overflow-y:auto!important}body:not(.force-desktop) .resizer-col,body:not(.force-desktop) .resizer-row{display:none!important}body:not(.force-desktop) .main-content{flex-direction:column!important;flex:none!important;grid-template-columns:none!important;gap:10px!important;display:flex!important;overflow-y:visible!important}body:not(.force-desktop) .pane{border-radius:var(--radius-lg)!important;height:auto!important;min-height:180px!important;max-height:none!important}body:not(.force-desktop) .app-header{flex-wrap:wrap!important;gap:8px!important;height:auto!important;padding:8px 12px!important}body:not(.force-desktop) .btn-disclaimer{padding:4px 8px!important;font-size:10px!important}body:not(.force-desktop) button{min-height:28px!important}body:not(.force-desktop) .diff-nav-btn{width:28px!important;height:28px!important}}body.force-desktop{min-width:1200px!important;overflow-x:auto!important}@media (min-width:768px){.btn-layout-toggle{display:none!important}}.pane.collapsed{height:40px!important;min-height:40px!important;max-height:40px!important;padding-bottom:0!important;overflow:hidden!important}.pane.collapsed .pane-header{border-bottom:none!important;margin-bottom:0!important}@keyframes pulseDockHighlight{0%{border-color:var(--border-color);box-shadow:0 0 #4f46e500}40%{box-shadow:0 0 14px #4f46e559;border-color:#4f46e599!important}to{border-color:var(--border-color);box-shadow:0 0 #4f46e500}}.pulse-dock-highlight{animation:3.2s cubic-bezier(.4,0,.2,1) forwards pulseDockHighlight!important}
