:root{
    --bg:#F4F5F8;
    --surface:#FFFFFF;
    --surface-2:#ECEEF3;
    --surface-3:#E2E5EC;
    --border:#D8DCE5;
    --text:#1B1F2A;
    --text-muted:#626B7E;
    --text-faint:#8A93A8;
    --accent:#3452D0;
    --accent-contrast:#FFFFFF;
    --accent-soft:#E7EBFC;
    --amber:#B4650A;
    --danger:#C6323A;
    --danger-soft:#F9E4E4;
    --success:#1F8A5F;
    --shadow:0 1px 2px rgba(27,31,42,0.06), 0 6px 20px -8px rgba(27,31,42,0.18);
    --shadow-lg:0 12px 32px -8px rgba(27,31,42,0.28);

    --sw1:#4C5FD6; --sw2:#0E8C87; --sw3:#8A4FBF; --sw4:#C1750A;
    --sw5:#C1415F; --sw6:#5C7A2E; --sw7:#46618C; --sw8:#B5502A;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0F1320;
      --surface:#171C2C;
      --surface-2:#1F2536;
      --surface-3:#262D42;
      --border:#2B3247;
      --text:#E7E9F2;
      --text-muted:#8991A8;
      --text-faint:#616A82;
      --accent:#7C93FF;
      --accent-contrast:#0F1320;
      --accent-soft:#232B4A;
      --amber:#E2A44D;
      --danger:#F0707A;
      --danger-soft:#3A2129;
      --success:#4FD199;
      --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5);
      --shadow-lg:0 16px 40px -8px rgba(0,0,0,0.6);
      --sw1:#8CA0FF; --sw2:#4FD8CF; --sw3:#C79BF0; --sw4:#E7A94D;
      --sw5:#F08CA6; --sw6:#A8CC6E; --sw7:#8FB0DE; --sw8:#E6926A;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0F1320;
    --surface:#171C2C;
    --surface-2:#1F2536;
    --surface-3:#262D42;
    --border:#2B3247;
    --text:#E7E9F2;
    --text-muted:#8991A8;
    --text-faint:#616A82;
    --accent:#7C93FF;
    --accent-contrast:#0F1320;
    --accent-soft:#232B4A;
    --amber:#E2A44D;
    --danger:#F0707A;
    --danger-soft:#3A2129;
    --success:#4FD199;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5);
    --shadow-lg:0 16px 40px -8px rgba(0,0,0,0.6);
    --sw1:#8CA0FF; --sw2:#4FD8CF; --sw3:#C79BF0; --sw4:#E7A94D;
    --sw5:#F08CA6; --sw6:#A8CC6E; --sw7:#8FB0DE; --sw8:#E6926A;
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  #app{
    height:100vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  button{font-family:inherit;}
  input,select,textarea{font-family:inherit;}
  ::selection{background:var(--accent-soft);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:4px;}

  /* ---------- topbar ---------- */
  .topbar{
    display:flex;
    align-items:center;
    gap:20px;
    padding:0 18px;
    height:52px;
    flex:none;
    border-bottom:1px solid var(--border);
    background:var(--surface);
  }
  .brand{
    font-weight:700;
    font-size:16px;
    letter-spacing:0.01em;
    display:flex;
    align-items:center;
  }
  .brand-mark{color:var(--accent); vertical-align:-2px; margin-right:5px;}
  .tabs{
    display:flex;
    gap:2px;
    background:var(--surface-2);
    padding:3px;
    border-radius:9px;
  }
  .tab-btn{
    border:none;
    background:transparent;
    color:var(--text-muted);
    font-size:13px;
    font-weight:600;
    padding:6px 14px;
    border-radius:7px;
    cursor:pointer;
    transition:background .12s, color .12s;
  }
  .tab-btn.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow);}
  .tab-btn:hover:not(.active){color:var(--text);}
  .topbar-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .save-status{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    color:var(--text-faint);
    letter-spacing:0.02em;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .save-status .dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);}
  .save-status.saving .dot{background:var(--amber);}
  .save-status.saved .dot{background:var(--success);}
  .save-status.error .dot{background:var(--danger);}

  .icon-btn{
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-muted);
    width:30px;height:30px;
    border-radius:7px;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:border-color .12s, color .12s;
  }
  .icon-btn:hover{color:var(--text); border-color:var(--text-faint);}
  .icon-btn svg{width:15px;height:15px;}

  .btn{
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:13px;
    font-weight:600;
    padding:7px 14px;
    border-radius:8px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:border-color .12s, background .12s, transform .06s;
  }
  .btn:hover{border-color:var(--text-faint);}
  .btn:active{transform:translateY(1px);}
  .btn:disabled{opacity:0.5; cursor:not-allowed; transform:none;}
  .btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-contrast);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-danger-solid{background:var(--danger); border-color:var(--danger); color:#fff;}
  .btn-danger-solid:hover{filter:brightness(1.08);}
  .btn-sm{padding:5px 10px; font-size:12px;}

  #view{flex:1; min-height:0; display:flex; overflow:hidden;}

  .toolbar{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:12px 18px;
    border-bottom:1px solid var(--border);
    background:var(--surface);
    flex:none;
  }
  .toolbar-hint{font-size:12.5px; color:var(--text-muted); flex:1; min-width:160px;}
  .board-controls{display:flex; align-items:center; gap:8px; margin-left:auto; flex:none;}
  .zoom-group{
    display:flex; align-items:center; gap:2px;
    border:1px solid var(--border); border-radius:8px; padding:3px;
    background:var(--surface-2);
  }
  .zoom-btn{
    width:24px; height:24px; border:none; background:transparent; color:var(--text-muted);
    border-radius:5px; cursor:pointer; font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .zoom-btn:hover{background:var(--surface); color:var(--text);}
  .zoom-label{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-muted);
    width:38px; text-align:center; flex:none;
  }
  .btn.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}
  .bg-color-picker{
    display:inline-flex; align-items:center; flex:none;
    border:1px solid var(--border); border-radius:6px; padding:2px;
    background:var(--surface-2); cursor:pointer;
  }
  .bg-color-picker input[type="color"]{
    width:22px; height:22px; border:none; padding:0; background:none; cursor:pointer;
  }

  /* ---------- schema tab (table) ---------- */
  .schema-tab{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;}
  .schema-scroll{flex:1; overflow:auto; padding:18px;}
  .schema-empty{
    max-width:340px; margin:60px auto 0; text-align:center; color:var(--text-faint);
  }
  .schema-empty .big{font-size:14px; font-weight:600; color:var(--text-muted); margin-bottom:4px;}
  .schema-empty .small{font-size:12.5px; line-height:1.5;}

  /* ---------- table tab (spreadsheet) ---------- */
  .table-tab{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;}
  .table-scroll{flex:1; overflow:auto;}
  .data-table{border-collapse:collapse; font-size:12.5px; white-space:nowrap; min-width:100%;}
  .data-table th, .data-table td{border:1px solid var(--border); padding:6px 10px; text-align:left; vertical-align:middle;}
  .data-table thead th{
    background:var(--surface); position:sticky; top:0; z-index:1;
    cursor:pointer; user-select:none; font-weight:700; font-size:11px;
    text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted);
  }
  .data-table thead th:hover{color:var(--accent);}
  .data-table thead th .col-type{display:block; font-size:9px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-faint); margin-top:1px;}
  .data-table thead th .sort-arrow{margin-left:4px; opacity:0.7;}
  .data-table td.table-class-cell{font-weight:600; color:var(--text-muted); font-size:10.5px; text-transform:uppercase; letter-spacing:0.02em; background:var(--surface);}
  .data-table td.table-cell-na{background:var(--surface-2); text-align:center;}
  .data-table th.table-actions-head, .data-table td.table-row-actions{width:1%; text-align:center; padding-left:6px; padding-right:6px;}
  .table-dup-btn{
    border:1px solid var(--border); background:var(--bg); color:var(--text-muted);
    border-radius:4px; width:22px; height:22px; font-size:12px; line-height:1; cursor:pointer;
  }
  .table-dup-btn:hover{border-color:var(--accent); color:var(--accent);}
  .table-enable-btn{
    border:1px dashed var(--border); background:transparent; color:var(--text-faint);
    border-radius:4px; padding:1px 7px; font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.03em; cursor:pointer;
  }
  .table-enable-btn:hover{border-color:var(--accent); color:var(--accent); border-style:solid;}
  .data-table td input[type="text"], .data-table td input[type="number"], .data-table td input[type="date"], .data-table td select{
    border:1px solid transparent; background:transparent; color:var(--text); font-size:12.5px;
    padding:3px 5px; border-radius:4px; width:100%; min-width:90px;
  }
  .data-table td input:hover, .data-table td select:hover, .data-table td input:focus, .data-table td select:focus{
    border-color:var(--border); background:var(--bg);
  }
  .data-table td input[type="checkbox"]{width:14px; height:14px; accent-color:var(--accent);}
  .data-table .table-readonly{color:var(--text-muted); font-family:'IBM Plex Mono',monospace; font-size:12px;}
  .data-table .table-readonly.cond-empty{color:var(--text-faint);}
  .data-table .table-swatch{width:22px; height:14px; border-radius:3px; border:1px solid var(--border-strong,var(--border)); display:inline-block;}
  .table-import-divider td{border:none; padding:0; height:0; border-top:3px solid var(--accent);}
  .table-row-pending td{background:var(--accent-soft);}
  .table-row-pending td.table-class-cell{background:var(--accent-soft);}
  .table-row-pending.import-class-invalid td.table-class-cell{border-left:4px solid #dc2626;}
  .table-row-pending.import-class-missing td.table-class-cell{border-left:4px solid #2563eb;}
  .table-row-pending.import-class-newclass td.table-class-cell{border-left:4px solid #16a34a;}
  .table-extra-head{background:var(--accent-soft); vertical-align:top; padding:6px 8px; min-width:130px;}
  .extra-head-name{font-weight:700; font-size:12px; margin-bottom:4px; display:flex; align-items:center; gap:5px;}
  .extra-head-name .col-type{
    border:1px dashed var(--border); color:var(--text-faint); border-radius:4px; padding:0 5px;
    font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  }
  .extra-head-check{display:flex; align-items:center; gap:4px; font-weight:400; font-size:11.5px; color:var(--text-muted); margin-bottom:4px; cursor:pointer;}
  .extra-head-check input{width:13px; height:13px; accent-color:var(--accent);}
  .table-extra-head select{width:100%; font-size:11.5px; padding:2px 3px; border-radius:4px; border:1px solid var(--border); background:var(--bg); color:var(--text);}
  .table-extra-head select:disabled{opacity:0.5;}
  .table-extra-cell{color:var(--text-faint); font-style:italic; font-size:12px;}
  .table-extra-cell-on{color:var(--text); font-style:normal;}
  .table-autorelate-head{background:var(--accent-soft); vertical-align:top; padding:6px 8px; min-width:100px;}
  .table-autorelate-head button{font-size:11px; padding:2px 7px;}
  .table-cell-check{text-align:center;}
  .table-cell-check input{width:14px; height:14px; accent-color:var(--accent);}
  .import-newclass-panel{margin-top:6px;}
  .import-newclass-title{font-size:11.5px; font-weight:700; color:var(--text-muted); margin-bottom:3px;}
  .import-newclass-row{display:flex; align-items:center; gap:6px; font-size:12.5px; margin:3px 0; cursor:pointer;}
  .import-newclass-row input{width:14px; height:14px; accent-color:var(--accent);}
  .import-review-bar{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:10px 14px; border-top:1px solid var(--border); background:var(--surface);
  }
  .import-review-info{flex:1; min-width:200px; font-size:12.5px; color:var(--text-muted);}
  .import-review-warn{color:var(--danger); margin-left:6px;}
  .import-flag-invalid{color:#dc2626; font-weight:600;}
  .import-flag-missing{color:#2563eb; font-weight:600;}
  .import-review-actions{display:flex; gap:8px;}

  /* ---------- guide tab ---------- */
  .guide-tab{flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;}
  .guide-scroll{flex:1; overflow:auto;}
  .guide-layout{display:flex; align-items:flex-start; gap:32px; max-width:980px; margin:0 auto; padding:36px 24px 80px;}
  .guide-nav{position:sticky; top:16px; flex:none; width:196px; display:flex; flex-direction:column; gap:1px;}
  .guide-nav-title{font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-faint); font-weight:700; margin:0 0 8px 8px;}
  .guide-nav-link{font-size:12.5px; line-height:1.4; padding:6px 8px; border-radius:6px; color:var(--text-muted); text-decoration:none;}
  .guide-nav-link:hover{background:var(--surface-2); color:var(--text);}
  .guide-nav-link-index{margin-top:8px; padding-top:10px; border-top:1px solid var(--border); font-weight:600; color:var(--text);}
  .guide-content{flex:1; min-width:0; max-width:720px;}
  .guide-content h1{font-size:22px; font-weight:700; margin:0 0 12px;}
  .guide-content h2{font-size:16px; font-weight:700; margin:34px 0 10px; padding-top:14px; border-top:1px solid var(--border);}
  .guide-content section:first-of-type h2{border-top:none; padding-top:0; margin-top:24px;}
  .guide-index-grid{columns:2 220px; column-gap:24px; margin-top:12px;}
  .guide-index-link{display:block; break-inside:avoid; font-size:12.5px; line-height:1.9; color:var(--accent); text-decoration:none;}
  .guide-index-link:hover{text-decoration:underline;}
  @media (max-width:820px){ .guide-nav{display:none;} .guide-layout{padding:24px 18px 60px;} }
  .guide-content p{font-size:13.5px; line-height:1.65; color:var(--text-muted); margin:0 0 12px;}
  .guide-content p.lead{font-size:14.5px; color:var(--text); line-height:1.7;}
  .guide-content ul{margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:7px;}
  .guide-content li{font-size:13.5px; line-height:1.6; color:var(--text-muted);}
  .guide-content strong{color:var(--text); font-weight:600;}
  .kbd{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; background:var(--surface-2);
    border:1px solid var(--border); border-radius:4px; padding:1px 6px; color:var(--text);
  }
  .type-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin:16px 0 26px;}
  .type-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 14px;}
  .type-card-head{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
  .type-badge{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--text-faint); background:var(--surface-2);
    border-radius:4px; padding:3px 6px; flex:none;
  }
  .type-card-name{font-weight:600; font-size:13.5px;}
  .type-card p{font-size:12.5px; line-height:1.55; margin:0;}
  .type-card-limits{font-size:11.5px; line-height:1.55; color:var(--text-faint); margin-top:8px; padding-top:8px; border-top:1px solid var(--border);}
  .type-card-limits strong{color:var(--text-muted); font-weight:700; text-transform:uppercase; font-size:9.5px; letter-spacing:0.04em;}

  .guide-diagram{margin:16px 0 26px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px;}
  .guide-diagram svg{width:100%; height:auto; display:block;}
  .gd-card{fill:var(--surface); stroke:var(--border-strong,var(--border));}
  .gd-header{fill:var(--surface-2);}
  .gd-title{font-family:'Sora',sans-serif; font-size:12px; font-weight:600; fill:var(--text);}
  .gd-mono{font-family:'IBM Plex Mono',monospace; font-size:10px; fill:var(--text-muted);}
  .gd-mono-strong{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; fill:var(--accent);}
  .gd-line{stroke:var(--text-faint); stroke-width:1.6; fill:none;}
  .gd-dot{fill:var(--surface); stroke:var(--accent); stroke-width:1.5;}
  .gd-pill{fill:var(--surface); stroke:var(--border);}
  .gd-pill-text{font-family:'IBM Plex Mono',monospace; font-size:10px; fill:var(--text-muted);}

  .class-list{display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto;}
  .schema-section-title{
    max-width:760px; margin:28px auto 4px; font-size:15px; font-weight:700; color:var(--text);
    padding-top:16px; border-top:1px solid var(--border);
  }
  .schema-section-hint{max-width:760px; margin:0 auto 12px; flex:none;}
  .class-group-row{
    display:flex; align-items:center; gap:8px; padding:8px 16px;
    border-top:1px solid var(--border); background:var(--surface-2); font-size:12.5px;
  }
  .class-group-label{flex:1; color:var(--text-muted); font-weight:600;}
  .class-group-select{
    border:1px solid var(--border); background:var(--bg); color:var(--text);
    border-radius:6px; padding:4px 6px; font-size:12px; max-width:220px;
  }
  .group-config-row{
    display:flex; align-items:center; gap:8px; padding:6px 16px 0 16px; font-size:12.5px;
  }
  .group-assigned-list{display:flex; flex-wrap:wrap; gap:6px; padding:6px 16px 0 16px;}
  .group-display-row{
    display:flex; align-items:center; gap:12px; padding:4px 16px;
    font-size:12px; color:var(--text-muted);
  }
  .group-display-name{flex:1; font-weight:600; color:var(--text);}
  .group-display-check{display:flex; align-items:center; gap:4px; cursor:pointer;}
  .group-display-check input{accent-color:var(--accent);}
  .class-row{
    position:relative;
    background:var(--surface);
    border:1px solid var(--border);
    border-left:4px solid var(--row-accent, var(--accent));
    border-radius:10px;
    box-shadow:var(--shadow);
    padding:12px 16px;
  }
  /* A normal flex item (not absolutely positioned) so it sits vertically centered
     alongside the title text in the header row it belongs to - "level with the
     title" - rather than floating above it. Sized 30% up from its original 24px/
     13px so it reads clearly at a glance. */
  .icon-badge{
    flex:none; width:31px; height:31px; border-radius:50%;
    background:var(--surface); border:1.5px solid var(--border); box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; line-height:1; padding:0;
  }
  .icon-badge-editable{cursor:pointer;}
  .icon-badge-editable:hover{border-color:var(--accent);}
  .icon-badge-empty{color:var(--text-faint); font-size:14px; font-weight:700; opacity:0.7;}
  .class-row-head{display:flex; align-items:center; gap:10px;}
  .class-row-name{
    font-weight:700; font-size:14.5px; flex:none;
  }
  .class-row-name-input{
    font-weight:700; font-size:14.5px; font-family:inherit;
    border:1px solid var(--accent); border-radius:5px; padding:2px 6px;
    background:var(--surface); color:var(--text);
  }
  .class-row-count{
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint);
    background:var(--surface-2); border-radius:10px; padding:2px 8px;
  }
  .class-row-actions{margin-left:auto; display:flex; align-items:center; gap:4px;}
  .class-row-delete{
    border:none; background:transparent; color:var(--text-faint);
    font-size:16px; cursor:pointer; padding:2px 4px; line-height:1; border-radius:5px;
  }
  .class-row-delete:hover{color:var(--danger); background:var(--danger-soft);}
  .class-row-delete:disabled{color:var(--text-faint); opacity:0.4; cursor:not-allowed; background:none;}
  .class-row-migrate{
    border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
    font-size:11px; font-weight:600; cursor:pointer; padding:4px 9px; line-height:1; border-radius:6px;
  }
  .class-row-migrate:hover:not(:disabled){border-color:var(--accent); color:var(--accent);}
  .class-row-migrate:disabled{opacity:0.4; cursor:not-allowed;}
  .project-list{display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto;}
  .project-row{
    background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border);
    border-radius:10px; box-shadow:var(--shadow); padding:12px 16px;
  }
  .project-row-active{border-left-color:var(--accent);}
  .project-row-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .project-row-name{font-weight:700; font-size:14.5px; flex:none; cursor:pointer;}
  .project-row-name-input{
    font-weight:700; font-size:14.5px; font-family:inherit;
    border:1px solid var(--accent); border-radius:5px; padding:2px 6px;
    background:var(--surface); color:var(--text);
  }
  .project-active-badge{
    font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
    color:var(--accent); background:var(--accent-soft); border-radius:10px; padding:2px 8px;
  }
  .project-row-updated{font-size:11.5px; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;}
  .project-row-actions{margin-left:auto; display:flex; align-items:center; gap:6px;}
  .project-row-desc{
    display:block; width:100%; margin-top:10px; resize:vertical; min-height:44px;
    border:1px solid var(--border); background:var(--bg); color:var(--text);
    border-radius:6px; padding:7px 9px; font-size:12.5px; font-family:inherit;
  }
  .attr-chip-list{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px;}
  .attr-chip{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:16px; padding:4px 6px 4px 11px;
    font-size:12px; cursor:pointer;
  }
  .attr-chip:hover{border-color:var(--accent);}
  .attr-chip .n{font-family:'IBM Plex Mono',monospace;}
  .attr-chip .t{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--text-faint); background:var(--surface);
    border-radius:4px; padding:2px 5px;
  }
  .attr-chip .x{
    border:none; background:transparent; color:var(--text-faint); cursor:pointer;
    font-size:13px; line-height:1; padding:0 2px 0 0;
  }
  .attr-chip .x:hover{color:var(--danger);}
  .add-attr-chip{
    display:inline-flex; align-items:center;
    border:1px dashed var(--border); background:transparent; color:var(--accent);
    border-radius:16px; padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer;
  }
  .add-attr-chip:hover{background:var(--accent-soft); border-color:var(--accent);}

  /* ---------- board tab (canvas) ---------- */
  .board-tab{position:relative; flex:1; min-width:0; min-height:0; display:flex; flex-direction:column;}
  .canvas-scroll{flex:1; overflow:auto; position:relative; background:var(--bg);}
  .canvas{
    position:relative;
    width:2600px; height:1700px;
    transform-origin:0 0;
  }
  .rel-svg{position:absolute; left:0; top:0; pointer-events:none; z-index:3;}
  .rel-svg path.rel-line{stroke:var(--text-faint); stroke-width:1.6; fill:none;}
  .rel-svg path.rel-line-temp{stroke:var(--accent); stroke-width:2; fill:none; stroke-dasharray:5 4;}
  .rel-svg path.rel-line-class{stroke:var(--danger);}
  .rel-svg marker path{fill:var(--text-faint);}
  .rel-svg .rel-card-mark{stroke:var(--danger); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;}
  .marquee-box{
    position:absolute; border:1px solid var(--accent); background:var(--accent-soft);
    opacity:0.5; pointer-events:none; z-index:10;
  }

  .rel-labels{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:3;}
  .rel-label{
    position:absolute;
    transform:translate(-50%,-50%);
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text-muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    padding:3px 8px;
    border-radius:20px;
    display:flex; align-items:center; gap:6px;
    pointer-events:auto;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:var(--shadow);
  }
  .rel-label:hover{border-color:var(--accent); color:var(--text);}
  .rel-label .rel-del{
    border:none; background:transparent; color:var(--text-faint);
    cursor:pointer; font-size:13px; line-height:1; padding:0;
  }
  .rel-label .rel-del:hover{color:var(--danger);}
  .rel-label .rel-backfill{
    border:none; background:transparent; color:var(--text-faint);
    cursor:pointer; font-size:13px; line-height:1; padding:0;
  }
  .rel-label .rel-backfill:hover{color:var(--accent);}

  .inst-card{
    position:absolute;
    width:224px;
    background:var(--surface);
    border:1px solid var(--border);
    border-top:3px solid var(--node-accent, var(--accent));
    border-radius:10px;
    box-shadow:var(--shadow);
    z-index:2;
    user-select:none;
  }
  .inst-card.dragging{box-shadow:var(--shadow-lg); z-index:5; cursor:grabbing;}
  .inst-card-selected{outline:2px solid var(--accent); outline-offset:2px;}
  .inst-header{
    display:flex; align-items:flex-start; gap:7px;
    padding:8px 8px 8px 10px;
    cursor:grab;
    border-bottom:1px solid var(--border);
    position:relative;
  }
  .inst-type{
    flex:1; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--text-faint);
    white-space:normal; overflow-wrap:break-word; word-break:break-word;
    hyphens:auto; -webkit-hyphens:auto;
    padding-top:2px;
  }
  .inst-delete{
    border:none; background:transparent; color:var(--text-faint);
    font-size:15px; cursor:pointer; padding:0 2px; line-height:1;
  }
  .inst-delete:hover{color:var(--danger);}
  .inst-card.inst-menu-open{z-index:20;}
  .inst-menu-wrap{position:relative; flex:none;}
  .inst-menu-btn{
    flex:none; border:1px solid var(--border); background:var(--bg); color:var(--text-muted);
    border-radius:4px; padding:1px 8px; font-size:13px; line-height:1.6; cursor:pointer;
  }
  .inst-menu-btn:hover{border-color:var(--accent); color:var(--accent);}
  .inst-menu-wrap.inst-menu-open .inst-menu-btn{border-color:var(--accent); color:var(--accent);}
  .inst-menu-dropdown{
    position:absolute; bottom:calc(100% + 4px); right:0; min-width:150px;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    box-shadow:var(--shadow-lg); display:flex; flex-direction:column; padding:4px; gap:2px;
    z-index:10;
  }
  .inst-menu-item{
    border:none; background:transparent; color:var(--text); text-align:left;
    padding:6px 8px; font-size:12px; border-radius:5px; cursor:pointer; white-space:nowrap;
  }
  .inst-menu-item:hover{background:var(--surface-2); color:var(--accent);}
  .inst-roll-btn{
    flex:none; border:1px solid var(--border); background:var(--bg); color:var(--text-muted);
    border-radius:4px; padding:1px 6px; font-size:9px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.03em; font-family:'IBM Plex Mono',monospace; cursor:pointer;
  }
  .inst-roll-btn:hover{border-color:var(--accent); color:var(--accent);}
  .inst-rolled-name{
    flex:1; font-weight:600; font-size:12.5px; color:var(--text);
    white-space:normal; overflow-wrap:break-word; word-break:break-word;
    hyphens:auto; -webkit-hyphens:auto;
    padding-top:2px;
  }
  .inst-card-rolled .inst-header{border-bottom:none; cursor:grab;}
  .inst-actions{
    display:flex; align-items:center; justify-content:flex-end; gap:6px;
    padding:7px 10px;
    border-top:1px solid var(--border);
  }
  .group-card{
    position:absolute; width:224px; background:var(--surface);
    border:1px dashed var(--border-strong, var(--text-faint)); border-radius:10px;
    box-shadow:var(--shadow); z-index:2; user-select:none;
  }
  .group-card.dragging{box-shadow:var(--shadow-lg); z-index:5; cursor:grabbing;}
  .group-emoji-row{
    display:flex; gap:4px; flex-wrap:wrap; padding:7px 10px 0 10px; font-size:15px; line-height:1;
  }
  .group-header{
    display:flex; align-items:center; gap:7px; padding:8px 10px; position:relative; cursor:grab;
  }
  .group-name{
    flex:1; font-weight:700; font-size:12.5px; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .group-count{
    flex:none; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-faint);
    background:var(--surface-2); border-radius:9px; padding:1px 7px;
  }
  /* Position/size are set live by updateGroupBounds() to exactly enclose the
     group's members - this rule only supplies the look. No box-shadow (it isn't a
     card, just a boundary) and no pointer-events, so it never intercepts clicks or
     the canvas's marquee-select meant for whatever it happens to cover; only the
     label opts back in. */
  .group-card-expanded{
    width:auto; height:auto; border:2px dashed var(--text-faint); border-radius:14px;
    background:transparent; box-shadow:none; pointer-events:none; z-index:1;
  }
  .group-frame-label{
    position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
    display:flex; align-items:center; gap:7px;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:5px 10px; box-shadow:var(--shadow); pointer-events:auto; white-space:nowrap;
  }
  .group-frame-label .group-name{flex:none; max-width:220px;}
  .group-field-list{
    padding:6px 10px 8px 10px; border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:3px;
  }
  .group-field-row{display:flex; gap:5px; font-size:10.5px; line-height:1.4;}
  .group-field-name{
    flex:none; font-weight:700; color:var(--text-faint); font-family:'IBM Plex Mono',monospace;
  }
  .group-field-value{flex:1; color:var(--text-muted); overflow-wrap:anywhere;}
  .group-frame-bottom-label{
    position:absolute; bottom:0; left:50%; transform:translate(-50%,50%);
    display:flex; flex-direction:column; gap:2px;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    padding:5px 10px; box-shadow:var(--shadow); pointer-events:auto; max-width:90%;
  }
  .inst-group-row{
    display:flex; align-items:center; gap:6px; padding:5px 10px;
    border-bottom:1px solid var(--border); background:var(--surface-2);
  }
  .inst-group-label{
    flex:1; color:var(--text-faint); font-family:'IBM Plex Mono',monospace; font-size:9.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .inst-fields{padding:9px 15px 11px 15px; display:flex; flex-direction:column; gap:8px;}
  .inst-field{position:relative;}
  .inst-field label{
    display:block; font-size:9.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--text-faint); margin-bottom:3px;
    font-family:'IBM Plex Mono',monospace;
  }
  .inst-field input, .inst-field select, .inst-field textarea{
    width:100%; border:1px solid var(--border); background:var(--bg);
    color:var(--text); border-radius:6px; padding:5px 7px; font-size:12.5px;
  }
  .inst-field textarea{resize:vertical; min-height:44px; font-family:inherit;}
  .inst-field-bool{display:flex; align-items:center; gap:7px;}
  .inst-field-bool input{width:14px; height:14px; accent-color:var(--accent); flex:none;}
  .inst-field-bool label{margin:0;}
  .inst-empty-fields{font-size:12px; color:var(--text-faint); font-style:italic;}
  .inst-field-sum{
    background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
    padding:5px 7px;
  }
  .field-dot{
    position:absolute; top:50%; transform:translateY(-50%);
    width:11px; height:11px; border-radius:50%;
    border:1.5px solid var(--node-accent, var(--accent));
    background:var(--surface);
    padding:0; cursor:crosshair;
    opacity:0;
    transition:transform .1s, background .1s, opacity .12s;
  }
  /* Hidden by default and revealed on hover so a busy board isn't cluttered with
     dots - hovering the field (or, for a rolled card, its header) reveals its own
     dots; hovering a dot directly also reveals it (matters once you're dragging
     toward it). While a connection is actively being dragged out, every dot on
     the board is shown so there's always something to aim at, even off in a
     field you haven't hovered yet. */
  .inst-field:hover .field-dot,
  .inst-header:hover .field-dot,
  .group-header:hover .field-dot,
  .class-box-header:hover .field-dot,
  .field-dot:hover,
  body.connecting .field-dot{
    opacity:1;
  }
  .field-dot:hover{background:var(--node-accent, var(--accent)); transform:translateY(-50%) scale(1.3);}
  .field-dot-right{right:-19px;}
  .field-dot-left{left:-19px;}
  /* A rolled card's merged dots sit directly in the header, which has much less of
     its own padding than a normal field does inside .inst-fields - the shared -19px
     offset (tuned for that deeper nesting) would land them far outside the card.
     Pull them in to match the same small ~3px overhang normal field dots get. */
  .inst-card-rolled .inst-header .field-dot-left,
  .group-header .field-dot-left{left:-4px;}
  .inst-card-rolled .inst-header .field-dot-right,
  .group-header .field-dot-right{right:-4px;}
  .class-box-header .field-dot-left{left:-4px;}
  .class-box-header .field-dot-right{right:-4px;}
  .class-box{
    position:absolute;
    min-width:150px;
    background:var(--surface);
    border:1.5px solid var(--node-accent, var(--border));
    border-radius:8px;
    box-shadow:var(--shadow);
    z-index:2;
  }
  .class-box.dragging{opacity:0.85; box-shadow:0 6px 18px rgba(0,0,0,.25); z-index:20;}
  .class-box-header{
    position:relative;
    display:flex; align-items:center; gap:6px;
    padding:8px 12px;
    cursor:grab;
    border-radius:8px;
  }
  .class-box-name{
    font-weight:600; font-size:13px; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .class-box-count{
    margin-left:auto;
    font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-faint);
    background:var(--surface-2); border-radius:10px; padding:1px 7px;
  }
  .inst-field-sum .sum-value{
    font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--accent);
    font-variant-numeric:tabular-nums;
  }
  .inst-field-sum .sum-badge{
    font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
    color:var(--text-faint); margin-left:6px;
  }
  .hidden-badge{
    font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
    color:var(--amber); margin-left:6px; border:1px dashed var(--amber); border-radius:4px; padding:1px 4px;
  }
  .inst-field-conditional{
    background:var(--surface-2); border:1px solid var(--border); border-radius:6px;
    padding:5px 7px;
  }
  .cond-swatch{width:100%; height:22px; border-radius:5px; border:1px solid var(--border-strong,var(--border));}
  .cond-value{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
    color:var(--text); font-variant-numeric:tabular-nums;
  }
  .cond-empty{color:var(--text-faint); font-weight:400;}

  .inst-field-textarray label{cursor:pointer;}
  .inst-field-textarray-expanded label{
    display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:4px;
  }
  .textarray-collapse-btn{
    flex:none; border:1px solid var(--border); background:var(--bg); color:var(--text-muted);
    border-radius:4px; padding:1px 6px; font-size:9px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.03em; font-family:'IBM Plex Mono',monospace; cursor:pointer;
  }
  .textarray-collapse-btn:hover{border-color:var(--accent); color:var(--accent);}
  .textarray-summary{
    border:1px solid var(--border); background:var(--bg); color:var(--text);
    border-radius:6px; padding:5px 7px; font-size:12.5px; cursor:pointer; min-height:16px;
  }
  .textarray-summary:hover{border-color:var(--accent);}
  .textarray-list{display:flex; flex-direction:column; gap:4px;}
  .textarray-row{display:flex; align-items:center; gap:5px;}
  .textarray-item-input, .textarray-add-input{
    flex:1; min-width:0; border:1px solid var(--border); background:var(--bg); color:var(--text);
    border-radius:5px; padding:4px 6px; font-size:12px;
  }
  .textarray-add-input{border-style:dashed;}
  .textarray-item-del{border:none; background:transparent; color:var(--text-faint); cursor:pointer; font-size:14px; padding:0 2px; flex:none; line-height:1;}
  .textarray-item-del:hover{color:var(--danger);}
  .textarray-row-inherited{background:var(--surface-2); border-radius:5px; padding:4px 7px;}
  .textarray-item-text{font-size:12px; color:var(--text-muted); flex:1;}

  .empty-canvas-hint{
    position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
    text-align:center; color:var(--text-faint); pointer-events:none;
    max-width:280px;
  }
  .empty-canvas-hint .big{font-size:14px; font-weight:600; color:var(--text-muted); margin-bottom:4px;}
  .empty-canvas-hint .small{font-size:12.5px; line-height:1.5;}

  /* ---------- modal ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(15,19,32,0.42);
    display:flex; align-items:center; justify-content:center;
    z-index:50; padding:20px;
  }
  .modal-card{
    background:var(--surface); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow-lg); width:100%; max-width:380px; padding:20px;
  }
  .modal-card-wide{max-width:560px;}
  .export-textarea{
    width:100%; min-height:280px; margin-top:10px;
    border:1px solid var(--border); background:var(--bg); color:var(--text);
    border-radius:8px; padding:10px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    resize:vertical;
  }
  .modal-actions .field-hint{margin:0; margin-right:auto; align-self:center;}
  .modal-card h3{margin:0 0 14px; font-size:15px;}
  .field{margin-bottom:12px;}
  .field label{
    display:block; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--text-faint); margin-bottom:5px;
  }
  .field input, .field select, .field textarea{
    width:100%; border:1px solid var(--border); background:var(--bg);
    color:var(--text); border-radius:7px; padding:8px 10px; font-size:13px;
  }
  .field textarea{min-height:70px; resize:vertical; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
  .field.hidden{display:none;}
  .field-check{display:flex; align-items:center; gap:8px;}
  .field-check input{width:15px; height:15px; accent-color:var(--accent); flex:none;}
  .field-check label{margin:0; text-transform:none; font-weight:600; font-size:12.5px; letter-spacing:0; color:var(--text);}
  .field-hint{font-size:12px; color:var(--text-faint); margin-top:-4px;}
  .wizard-preview-title{font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:8px;}
  .wizard-preview-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; max-height:260px; overflow-y:auto;}
  .wizard-preview-list li{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--surface-2); border-radius:6px; padding:6px 9px;
  }
  .wizard-attr-name{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--text);}
  .wizard-attr-meta{font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.03em; flex:none;}
  .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
  .modal-error{color:var(--danger); font-size:12.5px; margin-top:10px; display:none;}
  .modal-error.show{display:block;}
  .field-label-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .field-label-row label{margin:0;}
  .checkbox-list-selectall{flex:none;}
  .checkbox-list{display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-top:2px;}
  .checkbox-list .field-check{gap:8px;}
  .rules-list{display:flex; flex-direction:column; gap:10px; max-height:400px; overflow-y:auto; margin-bottom:8px; padding-right:6px;}
  .rule-card{position:relative; border:1px solid var(--border); border-radius:8px; padding:10px 32px 10px 12px;}
  .rule-line{display:flex; align-items:center; gap:8px;}
  .rule-line + .rule-line{margin-top:8px;}
  .rule-tag{
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--text-faint); width:32px; flex:none; font-family:'IBM Plex Mono',monospace;
  }
  .rule-line select, .rule-line input{
    border:1px solid var(--border); background:var(--bg); color:var(--text);
    border-radius:6px; padding:5px 6px; font-size:12px; height:30px; box-sizing:border-box;
  }
  .rule-line .rule-key-type, .rule-line .rule-value-type{flex:none; width:92px;}
  .rule-line .rule-op{flex:none; width:50px;}
  .rule-line .rule-input{flex:1 1 0%; min-width:0; width:auto;}
  .rule-line .rule-value-color{
    -webkit-appearance:none; appearance:none;
    width:24px; height:24px; padding:0; flex:none; cursor:pointer;
    border:1px solid var(--border); border-radius:5px; background:none;
  }
  .rule-value-color::-webkit-color-swatch-wrapper{padding:0;}
  .rule-value-color::-webkit-color-swatch{border:none; border-radius:4px;}
  .rule-value-color::-moz-color-swatch{border:none; border-radius:4px;}
  .rule-del{
    position:absolute; top:8px; right:8px;
    border:none; background:transparent; color:var(--text-faint); cursor:pointer;
    font-size:16px; padding:0 2px; line-height:1;
  }
  .rule-del:hover{color:var(--danger);}
  .emoji-manual-row{display:flex; gap:8px;}
  .emoji-manual-row input{
    flex:1; min-width:0; border:1px solid var(--border); background:var(--bg); color:var(--text);
    border-radius:6px; padding:6px 8px; font-size:13px;
  }
  .emoji-grid{
    display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; margin-top:9px;
    max-height:180px; overflow-y:auto; padding:6px; border:1px solid var(--border);
    border-radius:8px; background:var(--surface-2);
  }
  .emoji-pick-btn{
    border:1px solid transparent; background:transparent; border-radius:6px;
    font-size:19px; line-height:1; padding:6px 0; cursor:pointer; text-align:center;
  }
  .emoji-pick-btn:hover{background:var(--surface); border-color:var(--border);}
  .color-swatch-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
  .color-swatch-btn{
    width:26px; height:26px; border-radius:50%; border:2px solid transparent;
    cursor:pointer; padding:0;
  }
  .color-swatch-selected{border-color:var(--text);}

  /* ---------------- relationship manager modal ---------------- */
  .relmgr-list{display:flex; flex-direction:column; gap:10px; max-height:400px; overflow-y:auto; padding-right:6px;}
  .relmgr-row{border:1px solid var(--border); border-radius:8px; padding:10px 12px;}
  .relmgr-row-head{display:flex; align-items:baseline; gap:8px; margin-bottom:7px;}
  .relmgr-row-head strong{font-size:13px;}
  .relmgr-chips{display:flex; flex-wrap:wrap; gap:6px;}
  .relmgr-chip{
    display:inline-flex; align-items:center; gap:5px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
    padding:3px 6px 3px 10px; font-size:12px;
  }
  .relmgr-remove{
    border:none; background:transparent; color:var(--text-faint); cursor:pointer;
    font-size:14px; padding:0 2px; line-height:1;
  }
  .relmgr-remove:hover{color:var(--danger);}
  .relmgr-add-row{display:flex; gap:8px; margin-top:8px;}
  .relmgr-add-select{
    flex:1; min-width:0; border:1px solid var(--border); background:var(--bg); color:var(--text);
    border-radius:6px; padding:5px 6px; font-size:12.5px;
  }

  /* ---------------- reports tab ---------------- */
  .rc-tab{ display:flex; flex-direction:column; height:100%; }
  .rc-body{ display:flex; gap:16px; flex:1; min-height:0; }
  .rc-sidebar{ width:240px; flex:none; display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
  .rc-report-row{
    border:1px solid var(--border); border-radius:10px; background:var(--surface);
    padding:10px 12px; display:flex; flex-direction:column; gap:8px;
  }
  .rc-report-row-active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
  .rc-report-row-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .rc-report-row-name{ font-weight:600; cursor:text; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rc-report-row-name-input{
    font-weight:600; font:inherit; border:1px solid var(--accent); border-radius:6px;
    padding:2px 6px; width:100%; background:var(--surface); color:var(--text);
  }
  .rc-report-row-type{ font-size:11px; color:var(--text-faint); text-transform:capitalize; flex:none; }
  .rc-report-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
  .rc-main{ flex:1; min-width:0; overflow-y:auto; }
  .rc-config{ display:flex; }
  .rc-panel{
    display:flex; flex-direction:column; gap:14px; background:var(--surface);
    border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:16px;
  }
  .rc-field-group{ display:flex; flex-direction:column; gap:6px; }
  .rc-field-group label{ font-size:12.5px; font-weight:600; color:var(--text-muted); }
  .rc-mode-toggle{ display:flex; gap:6px; }
  .rc-formula-input{
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:12.5px;
    border:1px solid var(--border); border-radius:8px; padding:8px 10px;
    background:var(--surface); color:var(--text); resize:vertical;
  }
  .rc-class-checks{ display:flex; flex-wrap:wrap; gap:10px 16px; }
  .rc-class-check{ display:flex; align-items:center; gap:6px; font-size:13px; }
  .rc-inline-check{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:400; color:var(--text); }
  .rc-warn{ color:var(--danger); }
  .rc-chart-area{ display:flex; flex-direction:column; }
  .rc-chart-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }
  .rc-chart-svg-box{ overflow-x:auto; }
  .rc-svg{ display:block; }
  .rc-grid{ stroke:var(--border); stroke-width:1; }
  .rc-axis{ stroke:var(--text-faint); stroke-width:1; }
  .rc-tick{ fill:var(--text-muted); font-size:10.5px; }
  .rc-axis-title{ fill:var(--text-muted); font-size:11.5px; }
  .rc-mark{ cursor:pointer; stroke:var(--surface); stroke-width:1; }
  .rc-bar{ stroke:none; }
  .rc-bar-histogram{ cursor:default; }
  .rc-line{ stroke:var(--accent); stroke-width:2; }
  .rc-mark-label{ fill:var(--text); font-size:10.5px; pointer-events:none; }
  .rc-mark-label-hover{ opacity:0; transition:opacity .12s; }
  .rc-mark-label-hover.rc-mark-label-visible{ opacity:1; }
  .rc-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; font-size:12.5px; }
  .rc-legend-item{ display:flex; align-items:center; gap:6px; }
  .rc-legend-swatch{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }
  .rc-detail{ display:flex; flex-direction:column; gap:2px; max-height:60vh; overflow-y:auto; }
  .rc-detail-row{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--border); }
  .rc-detail-row:last-child{ border-bottom:none; }
  .rc-detail-label{ color:var(--text-muted); font-size:12.5px; flex:none; }
  .rc-detail-value{ text-align:right; font-size:13px; }
  .rc-member-list{ display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow-y:auto; }
  .rc-member-btn{ text-align:left; }
  .rc-color-chip{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; border:1px solid var(--border); }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }