*{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;column-gap:8px;min-width:max-content;align-items:stretch;background:#e8f0f7}.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;isolation:isolate;color:#172033}.company-header:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--company-accent, #94a3b8)}.company-header span{position:relative;z-index:1}.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-top:2px solid color-mix(in srgb,var(--area-accent, #0284c7) 22%,#d8e2ee);border-bottom:1px solid #dce7f2;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:linear-gradient(180deg,color-mix(in srgb,var(--area-soft, #e0f2fe) 38%,transparent) 0,transparent 22px),var(--company-bg, #ffffff);box-shadow:inset 1px 0 0 var(--company-line, #e2e8f0),inset 0 1px color-mix(in srgb,var(--area-accent, #0284c7) 18%,transparent);transition:background .16s ease,box-shadow .16s ease}.company-column{--company-accent: #64748b;--company-bg: #ffffff;--company-bg-strong: #f8fafc;--company-line: #dbe5f0}.column-tone-0{--company-accent: #0284c7;--company-bg: #fbfdff;--company-bg-strong: #f0f8ff;--company-line: #cfe4f7}.column-tone-1{--company-accent: #0f766e;--company-bg: #fbfefc;--company-bg-strong: #effcf8;--company-line: #cce9e2}.column-tone-2{--company-accent: #4f46e5;--company-bg: #fdfcff;--company-bg-strong: #f4f3ff;--company-line: #ddd9fb}.column-tone-3{--company-accent: #b45309;--company-bg: #fffefd;--company-bg-strong: #fff7ed;--company-line: #f3dcc5}.column-tone-4{--company-accent: #be123c;--company-bg: #fffdfd;--company-bg-strong: #fff1f2;--company-line: #f4cfd7}.column-tone-5{--company-accent: #4d7c0f;--company-bg: #fdfffb;--company-bg-strong: #f5fbea;--company-line: #d8eac2}.company-header.company-column{border-right-color:var(--company-line, #dbe5f0);background:linear-gradient(90deg,color-mix(in srgb,var(--company-accent) 10%,transparent),transparent 38%),var(--company-bg-strong, #f8fafc);box-shadow:inset 1px 0 0 var(--company-line, #dbe5f0)}.slot-cell.company-column:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--area-soft, #e0f2fe) 52%,transparent) 0,transparent 24px),var(--company-bg-strong, #f8fafc);box-shadow:inset 1px 0 0 var(--company-accent, #94a3b8),inset -1px 0 0 var(--company-line, #dbe5f0),inset 0 1px color-mix(in srgb,var(--area-accent, #0284c7) 28%,transparent)}.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 var(--product-line-border, #cbdaf0);border-radius:8px;padding:10px 30px 8px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--product-accent, #0f766e) 18%,transparent) 0,transparent 42px),#fff;color:#172033;cursor:grab;text-align:left;box-shadow:inset 0 1px #ffffffc7;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.system-card:before{content:"";position:absolute;top:0;right:14px;left:14px;height:3px;border-radius:0 0 999px 999px;background:var(--product-accent, #0f766e);opacity:.72}.system-card:hover{border-color:var(--product-accent, #0f766e);box-shadow:0 10px 24px #0f172a1f,inset 0 1px #ffffffd1;transform:translateY(-1px)}.system-card:active{cursor:grabbing}.product-line{position:relative;display:inline-flex;gap:4px;align-items:center;width:fit-content;border-radius:6px;padding:1px 6px;background:var(--product-tag-bg, #ccfbf1);color:var(--product-accent, #0f766e);font-size:11px;font-weight:700}.product-line:before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;opacity:.7}.product-tone-0{--product-accent: #0f766e;--product-soft: #f0fdfa;--product-tag-bg: #ccfbf1;--product-line-border: #bde9e1}.product-tone-1{--product-accent: #2563eb;--product-soft: #eff6ff;--product-tag-bg: #dbeafe;--product-line-border: #c8dcfa}.product-tone-2{--product-accent: #7c3aed;--product-soft: #f5f3ff;--product-tag-bg: #ede9fe;--product-line-border: #ddd6fe}.product-tone-3{--product-accent: #b45309;--product-soft: #fff7ed;--product-tag-bg: #fed7aa;--product-line-border: #f1d3b6}.product-tone-4{--product-accent: #be123c;--product-soft: #fff1f2;--product-tag-bg: #ffe4e6;--product-line-border: #f3c7d1}.product-tone-5{--product-accent: #4d7c0f;--product-soft: #f7fee7;--product-tag-bg: #ecfccb;--product-line-border: #d8e9b8}.product-tone-6{--product-accent: #0e7490;--product-soft: #ecfeff;--product-tag-bg: #cffafe;--product-line-border: #b9e8ef}.product-tone-7{--product-accent: #475569;--product-soft: #f8fafc;--product-tag-bg: #e2e8f0;--product-line-border: #cbd5e1}.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}}