*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:#172033;font-family:Inter,PingFang SC,Microsoft YaHei,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}.app-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}.sidebar{background:#0f172a;color:#e5edf8;padding:20px 16px}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.brand-mark{display:grid;width:42px;height:42px;place-items:center;border-radius:8px;background:#14b8a6;color:#04111f;font-weight:800}.brand strong,.brand span{display:block}.brand span{color:#9fb0c7;font-size:13px;margin-top:3px}.nav-list{display:grid;gap:8px}.nav-item{display:flex;gap:10px;align-items:center;width:100%;border:0;border-radius:8px;padding:11px 12px;background:transparent;color:#cbd5e1;text-align:left}.nav-item.active{background:#1e293b;color:#fff}.logout-item{margin-top:18px;color:#fecaca}.login-page{display:grid;min-height:100vh;place-items:center;padding:32px;background:linear-gradient(135deg,#eef6ff,#f7fafc 48%,#ecfdf5)}.login-shell{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);width:min(1160px,100%);min-height:640px;overflow:hidden;border:1px solid #d8e2ee;border-radius:8px;background:#ffffffdb;box-shadow:0 28px 80px #0f172a29}.login-visual-panel{position:relative;display:grid;align-content:space-between;overflow:hidden;padding:34px;background:#071827}.login-visual-panel:after{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#07182714,#071827b8);content:""}.login-visual-panel img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.login-visual-copy{position:relative;z-index:1;align-self:end;max-width:560px;color:#fff}.login-visual-copy span{display:inline-flex;margin-bottom:12px;border:1px solid rgba(153,246,228,.5);border-radius:8px;padding:5px 9px;background:#0f766e38;color:#99f6e4;font-size:12px;font-weight:700}.login-visual-copy h2{margin:0;font-size:36px;line-height:1.16}.login-visual-copy p{margin:14px 0 0;color:#d8e5f4;font-size:15px;line-height:1.8}.login-card{align-self:center;display:grid;width:min(430px,calc(100% - 64px));gap:16px;justify-self:center;border:0;border-radius:0;padding:32px 0;background:#fff;box-shadow:none}.login-brand{display:flex;gap:12px;align-items:center}.login-brand h1{margin:0;font-size:24px}.login-brand p{margin:4px 0 0;color:#64748b}.login-card label{display:grid;gap:7px;color:#475569;font-weight:700}.login-card input{min-height:42px;border:1px solid #cbd5e1;border-radius:8px;padding:9px 11px}.login-button{justify-content:center;width:100%}.main-panel{min-width:0;padding:20px}.page{display:grid;gap:16px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.page-heading h1{margin:0;font-size:24px}.page-heading p{margin:6px 0 0;color:#64748b}.page-actions,.row-actions{display:inline-flex;gap:8px;align-items:center}.maintenance-card{border:1px solid #d8e2ee;border-radius:8px;padding:12px;background:#fff}.company-form{display:grid;grid-template-columns:minmax(220px,1.3fr) minmax(180px,1fr) 90px 90px auto auto;gap:10px;align-items:center}.company-form strong,.company-form span{display:block}.company-form span{margin-top:3px;color:#64748b;font-size:13px}.company-form input[type=text],.company-form input:not([type]),.company-intro-input,.sort-input{width:100%;min-height:38px;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;background:#fff}.company-intro-input{grid-column:2 / 5;min-height:56px;resize:vertical}.company-summary{display:grid;gap:3px}.company-summary span{max-width:680px;overflow:hidden;color:#64748b;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.inline-check{display:inline-flex;gap:6px;align-items:center;color:#475569}.section-title{display:flex;align-items:center;justify-content:space-between;margin-top:4px}.section-title h2{margin:0;font-size:18px}.section-title span{color:#64748b;font-size:13px}.filter-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border:1px solid #d8e2ee;border-radius:8px;background:#fff}.filter-group,.filter-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.check-pill,.toggle-control{display:inline-flex;gap:8px;align-items:center;min-height:34px;border:1px solid #d8e2ee;border-radius:8px;padding:7px 10px;background:#f8fafc;color:#334155}.icon-button{display:inline-grid;width:34px;height:34px;place-items:center;border:1px solid #d8e2ee;border-radius:8px;background:#fff;color:#334155}.icon-button.danger{border-color:#fecaca;color:#b91c1c}.matrix-board{overflow-x:auto;overflow-y:visible;border:1px solid #d8e2ee;border-radius:8px;background:#fff}.matrix-grid{display:grid;min-width:max-content;align-items:stretch}.matrix-header{position:sticky;top:0;z-index:3;display:flex;align-items:center;min-height:58px;padding:0 14px;border-right:1px solid #e5edf5;border-bottom:1px solid #d8e2ee;background:#f8fafc;font-weight:700}.function-header{left:0;z-index:4}.company-header{position:sticky;color:#172033}.company-header-hover{overflow:visible}.company-intro-popover{position:fixed;z-index:20;display:grid;width:min(320px,calc(100vw - 40px));gap:7px;border:1px solid #cbd5e1;border-radius:8px;padding:12px;background:#fff;color:#172033;box-shadow:0 18px 42px #0f172a29;pointer-events:auto;transition:opacity .14s ease,transform .14s ease}.company-intro-popover strong{font-size:15px}.company-intro-popover p{margin:0;color:#475569;font-size:13px;font-weight:400;line-height:1.6;white-space:normal}.company-intro-popover span{color:#0f766e;font-size:12px}.fixed-popover{opacity:1}.function-cell,.slot-cell{min-height:112px;border-bottom:1px solid #e5edf5;border-right:1px solid #e5edf5}.function-cell{position:sticky;left:0;z-index:2;display:flex;gap:8px;align-items:center;padding:12px;border-left:4px solid var(--area-accent, #0284c7);background:linear-gradient(90deg,var(--area-soft, #e0f2fe) 0,#f8fafc 34px,#f8fafc 100%);color:#334155;font-weight:700}.function-cell span{display:grid;width:24px;height:24px;place-items:center;border-radius:8px;background:var(--area-soft, #e0f2fe);color:var(--area-accent, #0369a1);font-size:12px}.slot-cell{position:relative;display:flex;align-items:stretch;padding:8px;background:#fff}.card-stack{display:grid;gap:8px;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}.system-card{position:relative;display:grid;width:100%;min-height:82px;gap:3px;border:1px solid #cbdaf0;border-radius:8px;padding:8px 30px 8px 9px;background:#fff;color:#172033;cursor:grab;text-align:left;transition:box-shadow .16s ease,transform .16s ease}.system-card:hover{box-shadow:0 10px 24px #0f172a1f;transform:translateY(-1px)}.system-card:active{cursor:grabbing}.product-line{width:fit-content;border-radius:6px;padding:1px 6px;background:#ccfbf1;color:#0f766e;font-size:11px;font-weight:700}.system-name{overflow:hidden;font-weight:700;font-size:14px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.owner-line{overflow:hidden;color:#64748b;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.open-link{position:absolute;top:8px;right:8px;display:grid;width:22px;height:22px;place-items:center;border-radius:7px;color:#2563eb}.empty-slot,.add-inline,.empty-slot-quiet{display:inline-flex;gap:6px;align-items:center;justify-content:center;width:100%;border:1px dashed #b6c4d6;border-radius:8px;background:#f8fafc;color:#64748b}.empty-slot{min-height:74px}.add-inline{min-height:30px;margin-top:8px}.empty-slot-quiet{min-height:74px;border-color:transparent;background:transparent;color:transparent;opacity:0;transition:opacity .16s ease,border-color .16s ease,background .16s ease,color .16s ease}.slot-cell:hover .empty-slot-quiet,.empty-slot-quiet:focus-visible{border-color:#cbd5e1;background:#f8fafc;color:#64748b;opacity:1}.cell-add-float{position:absolute;right:10px;bottom:10px;display:grid;width:28px;height:28px;place-items:center;border:1px solid #99f6e4;border-radius:8px;background:#f0fdfa;color:#0f766e;opacity:0;box-shadow:0 6px 16px #0f172a14;transition:opacity .16s ease,transform .16s ease}.slot-cell.drag-over{background:#f0fdfa;outline:2px solid #5eead4;outline-offset:-2px}.slot-cell:hover .cell-add-float,.cell-add-float:focus-visible{opacity:1;transform:translateY(-1px)}.state-line{border-radius:8px;padding:12px 14px;background:#e0f2fe;color:#075985}.state-line.error,.form-error{background:#fee2e2;color:#991b1b}.drawer-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20}.drawer-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172a3d;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.drawer{position:absolute;top:0;right:0;width:min(560px,100vw);height:100%;overflow-y:auto;background:#fff;box-shadow:-18px 0 40px #0f172a2e}.drawer form{display:grid;gap:14px;padding:22px}.drawer-head{display:flex;align-items:flex-start;justify-content:space-between}.drawer-head h2{margin:0;font-size:22px}.drawer-head p{margin:6px 0 0;color:#64748b}.drawer label{display:grid;gap:6px;color:#475569;font-size:13px;font-weight:700}.drawer input,.drawer select{width:100%;min-height:38px;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;background:#fff;color:#172033}.inline-field{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:8px}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.drawer-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:10px}.primary-button,.secondary-button{display:inline-flex;gap:8px;align-items:center;min-height:38px;border:1px solid transparent;border-radius:8px;padding:0 14px}.primary-button{border:1px solid #0f766e;background:#0f766e;color:#fff}.secondary-button{border:1px solid #cbd5e1;background:#fff;color:#334155}.table-wrap{overflow:auto;border:1px solid #d8e2ee;border-radius:8px;background:#fff}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #e5edf5;padding:11px 12px;text-align:left;white-space:nowrap}th{background:#f8fafc;color:#475569;font-size:13px}.actions-col{width:92px}.company-row td{background:#f8fbff;border-top:1px solid #d8e2ee;font-weight:700}.system-row td{background:#fff}.system-row td:first-child{padding-left:42px}.empty-system-row td{color:#94a3b8;font-size:13px}.tree-cell{position:relative}.tree-branch{position:absolute;left:22px;top:0;width:18px;height:50%;border-bottom:1px solid #b6c4d6;border-left:1px solid #b6c4d6}.row-type{display:inline-flex;align-items:center;justify-content:center;min-width:42px;margin-right:10px;border-radius:6px;padding:3px 7px;font-size:12px;font-weight:700}.company-type{background:#dbeafe;color:#1d4ed8}.system-type{background:#ccfbf1;color:#0f766e}.system-indent{color:#64748b;font-size:13px}.add-system-button{display:inline-flex;gap:6px;align-items:center;min-height:32px;border:1px solid #99f6e4;border-radius:8px;padding:0 10px;background:#f0fdfa;color:#0f766e;font-weight:700}.url-cell{max-width:280px;overflow:hidden;text-overflow:ellipsis}.empty-table-cell{padding:28px 12px;color:#64748b;text-align:center}@media (max-width: 840px){.app-shell{grid-template-columns:1fr}.sidebar{position:sticky;top:0;z-index:10}.nav-list{grid-template-columns:repeat(2,minmax(0,1fr))}.matrix-board{grid-template-columns:120px minmax(0,1fr)}.two-col{grid-template-columns:1fr}.page-heading{align-items:stretch;flex-direction:column}.company-form{grid-template-columns:1fr}.company-intro-input{grid-column:auto}.login-page{padding:18px}.login-shell{grid-template-columns:1fr;min-height:0}.login-visual-panel{min-height:300px;padding:24px}.login-visual-copy h2{font-size:28px}.login-card{width:calc(100% - 40px);padding:28px 0}}