:root{
    --sidebar-bg: #0e1320;
    --sidebar-bg-2: #141a2b;
    --sidebar-hover: rgba(255,255,255,.06);
    --sidebar-active: rgba(124,108,246,.16);
    --accent: #6f5cf6;
    --accent-dark: #5a48e0;
    --accent-soft: #eeeafd;
    --blue: #2f6fed;
    --blue-soft: #e7f0ff;
    --green: #16a34a;
    --green-soft: #e6f8ee;
    --amber: #d97706;
    --amber-soft: #fef3e2;
    --red: #e0455a;
    --red-soft: #fdeaec;
    --gray-soft: #eef0f4;
    --page-bg: #f5f6fa;
    --card-border: #e8e9f0;
    --text-dark: #14151f;
    --text-muted: #767b8a;
    --navy: #16213a;
    --radius: 12px;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:var(--page-bg);
    color:var(--text-dark);
    font-size:14.5px;
  }
  a{ text-decoration:none; }
  .fw-800{ font-weight:800; }
  .text-muted-2{ color:var(--text-muted); }
  .d-none-force{ display:none !important; }

  /* ===================== LOGIN SCREEN ===================== */
  #loginScreen{
    position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
    background:#f4f5f9; padding:1.25rem; overflow-y:auto;
  }
  .login-wrap{ width:100%; max-width:452px; }
  .login-card{
    background:#fff; border-radius:20px; box-shadow:0 1px 3px rgba(20,20,30,.06), 0 20px 40px -12px rgba(20,20,30,.12);
    overflow:hidden;
  }
  .login-card-body{ padding:2.6rem 2.5rem 2.2rem; }
  .login-icon-box{
    width:56px; height:56px; border-radius:14px; border:1px solid var(--card-border);
    display:flex; align-items:center; justify-content:center; background:#fff;
  }
  .login-icon-box i{ font-size:1.6rem; background:linear-gradient(135deg,#0ea5c8,#2563eb); -webkit-background-clip:text; background-clip:text; color:transparent; }
  #loginHeading{ font-size:1.4rem; font-weight:800; margin-bottom:.35rem; }
  #loginSubtext{ color:var(--text-muted); font-size:.92rem; margin-bottom:1.6rem; }
  .btn-google{
    width:100%; background:#fff; border:1px solid var(--card-border); border-radius:10px;
    padding:.65rem 1rem; font-weight:600; font-size:.92rem; color:var(--text-dark);
    display:flex; align-items:center; justify-content:center; gap:.6rem;
  }
  .btn-google:hover{ background:#f9f9fb; }
  .login-divider{ display:flex; align-items:center; gap:.85rem; color:var(--text-muted); font-size:.85rem; margin:1.1rem 0 1.3rem; }
  .login-divider::before, .login-divider::after{ content:''; flex:1; height:1px; background:var(--card-border); }
  .login-card-body .form-label{ font-weight:700; font-size:.88rem; margin-bottom:.4rem; }
  .login-card-body input.form-control{ padding:.7rem .9rem; border-radius:10px; }
  .login-continue-btn{
    width:100%; background:var(--text-dark); color:#fff; border:none; border-radius:10px;
    padding:.75rem 1rem; font-weight:700; font-size:.95rem; margin-top:1.4rem;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
  }
  .login-continue-btn:hover{ background:#000; color:#fff; }
  .login-card-footer{
    background:#f7f7fa; border-top:1px solid var(--card-border);
    padding:1.1rem 1.5rem; text-align:center; font-size:.9rem; color:var(--text-muted);
  }
  .login-card-footer a{ color:var(--text-dark); font-weight:800; cursor:pointer; }
  .login-trust-row{
    display:flex; align-items:center; justify-content:center; gap:.55rem;
    margin-top:1.25rem; font-size:.9rem; color:#4b5563;
  }
  .login-trust-row input{ width:18px; height:18px; accent-color:var(--text-dark); cursor:pointer; }
  .login-error{ background:#fdeaec; color:#c8394f; border:1px solid #f6c9ce; border-radius:9px; padding:.6rem .9rem; font-size:.83rem; display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }

  @media (max-width: 480px){
    .login-card-body{ padding:2.2rem 1.5rem 1.8rem; }
    .login-card-footer{ padding:1rem; }
  }

  body.logged-in #loginScreen{ display:none; }
  body:not(.logged-in) .app-shell{ display:none; }

  .step-dots{ display:flex; gap:.4rem; justify-content:center; margin-bottom:1.1rem; }
  .step-dot{ width:8px; height:8px; border-radius:5px; background:#e4e5ec; transition:all .2s ease; }
  .step-dot.done{ background:#c9c3fb; width:8px; }
  .step-dot.active{ background:var(--text-dark); width:22px; }

  .step-back{ display:inline-flex; align-items:center; gap:.4rem; color:var(--text-muted); font-weight:700; font-size:.83rem; cursor:pointer; margin-bottom:1rem; }
  .step-back:hover{ color:var(--text-dark); }

  .signing-as{ background:#f5f6fa; border-radius:10px; padding:.6rem .85rem; font-size:.85rem; color:var(--text-muted); }
  .signing-as strong{ color:var(--text-dark); }
  .signing-as a{ color:var(--accent-dark); font-weight:700; cursor:pointer; }

  .otp-row{ display:flex; gap:.55rem; justify-content:center; margin:1.3rem 0 .4rem; }
  .otp-input{
    width:44px; height:52px; text-align:center; font-size:1.25rem; font-weight:700;
    border:1px solid var(--card-border); border-radius:10px; color:var(--text-dark);
  }
  .otp-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(111,92,246,.18); }
  .otp-input.otp-filled{ border-color:#c9c3fb; background:#f8f7ff; }
  #resendCodeLink.disabled{ color:var(--text-muted) !important; cursor:default; pointer-events:none; }

  @media (max-width: 420px){
    .otp-input{ width:38px; height:46px; font-size:1.1rem; }
    .otp-row{ gap:.4rem; }
  }

  /* ===================== LAYOUT ===================== */
  .app-shell{ display:flex; min-height:100vh; }

  .sidebar{
    width:264px; flex-shrink:0;
    background:linear-gradient(180deg,var(--sidebar-bg),var(--sidebar-bg-2));
    color:#c9cbdb; display:flex; flex-direction:column;
    position:sticky; top:0; height:100vh;
  }
  .sidebar-brand{
    display:flex; align-items:center; gap:.65rem; padding:1.1rem 1.15rem;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .brand-mark{
    width:34px;height:34px;border-radius:9px;
    background:linear-gradient(135deg,var(--accent),#a78bfa);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;color:#fff;font-size:.95rem;flex-shrink:0;
  }
  .brand-text{ font-weight:700; font-size:.92rem; color:#fff; line-height:1.15; letter-spacing:.2px; }
  .brand-text small{ display:block; font-weight:400; color:#8b8fa3; font-size:.68rem; }

  .sidebar-scroll{ flex:1; overflow-y:auto; padding:.75rem .65rem; }
  .sidebar-scroll::-webkit-scrollbar{ width:5px; }
  .sidebar-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:10px; }

  .nav-label{
    font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
    color:#5c6178; font-weight:700; padding:.9rem .6rem .35rem;
  }
  .nav-item-link{
    display:flex; align-items:center; justify-content:space-between;
    gap:.65rem; padding:.55rem .65rem; border-radius:9px; color:#c3c6d6;
    font-size:.86rem; font-weight:500; margin-bottom:2px; cursor:pointer;
    transition:background .12s ease, color .12s ease;
  }
  .nav-item-link .left{ display:flex; align-items:center; gap:.65rem; }
  .nav-item-link i{ font-size:1.05rem; width:20px; text-align:center; color:#8489a0; }
  .nav-item-link:hover{ background:var(--sidebar-hover); color:#fff; }
  .nav-item-link:hover i{ color:#c3c6d6; }
  .nav-item-link.active{ background:var(--sidebar-active); color:#fff; }
  .nav-item-link.active i{ color:var(--accent); }
  .nav-item-link .chev{ font-size:.75rem; opacity:.55; }

  .sidebar-footer{
    padding:.85rem 1rem; border-top:1px solid rgba(255,255,255,.07);
    display:flex; align-items:center; gap:.65rem;
  }
  .avatar-circle{
    width:36px;height:36px;border-radius:9px;background:#a8895a;
    display:flex;align-items:center;justify-content:center;font-weight:700;color:#1a1300;flex-shrink:0;
  }
  .sidebar-footer .who{ font-size:.84rem; font-weight:600; color:#fff; line-height:1.2; }
  .sidebar-footer .sub{ font-size:.72rem; color:#8b8fa3; }
  .sidebar-footer .sub a{ color:#8b8fa3; cursor:pointer; }
  .sidebar-footer .sub a:hover{ color:#fff; }

  .main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

  .topbar{
    background:#0e1320; padding:.8rem 1.5rem; position:sticky; top:0; z-index:1020;
    display:flex; align-items:center; gap:1rem;
  }
  .search-wrap{ position:relative; flex:1; max-width:760px; margin:0 auto; }
  .search-wrap i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#7d8194; }
  .search-input{
    width:100%; background:#171d2e; border:1px solid #262c40; color:#e7e8f0;
    border-radius:10px; padding:.55rem .9rem .55rem 2.4rem; font-size:.87rem;
  }
  .search-input::placeholder{ color:#767c92; }
  .search-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(111,92,246,.25); }
  .burger-btn{ background:transparent; border:none; color:#e7e8f0; font-size:1.4rem; display:none; }

  .content{ padding:1.6rem; }

  .page-title-row{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:.9rem; margin-bottom:1.4rem;
  }
  .page-title{ font-size:1.65rem; font-weight:800; margin:0; }

  .btn-dark-cta{ background:var(--text-dark); color:#fff; border:none; font-weight:600; font-size:.86rem; padding:.55rem 1rem; border-radius:9px; }
  .btn-dark-cta:hover{ background:#000; color:#fff; }
  .btn-soft{ border:1px solid var(--card-border); background:#fff; color:var(--text-dark); font-weight:600; font-size:.86rem; padding:.55rem 1rem; border-radius:9px; }
  .btn-soft:hover{ background:#f7f7fa; }
  .btn-soft.amber{ background:#fff8ec; border-color:#f4dfb0; color:#8a5a00; }
  .btn-soft.violet{ background:#f4f2ff; border-color:#ddd6fe; color:#5b3ff0; }
  .btn-soft.blue{ background:#eef4ff; border-color:#cfe0ff; color:#2f6fed; }
  .btn-soft.green{ background:#eafaf1; border-color:#c9f2da; color:#0f9d58; }

  /* ===================== STAT CARDS ===================== */
  .stat-card{ background:#fff; border:1px solid var(--card-border); border-radius:var(--radius); padding:1.15rem 1.25rem; display:flex; align-items:center; gap:1rem; height:100%; }
  .stat-card .icon-badge{ width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center; font-size:1.2rem; flex-shrink:0; }
  .stat-card .num{ font-size:1.6rem; font-weight:800; line-height:1; }
  .stat-card .label{ font-weight:700; font-size:.86rem; margin-top:.15rem; }
  .stat-card .sub{ font-size:.76rem; color:var(--text-muted); }
  .stat-card.success{ background:linear-gradient(135deg,#e9fbf1,#e3f9ec); border-color:#c9f2da; }
  .stat-card.success .num{ color:var(--green); }
  .progress-bar-inline{ height:6px; border-radius:6px; }

  .panel{ background:#fff; border:1px solid var(--card-border); border-radius:var(--radius); padding:1.25rem; height:100%; }
  .panel h6{ font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;}
  .empty-state{ text-align:center; padding:2.2rem 1rem; color:var(--text-muted); }
  .empty-state i{ font-size:1.8rem; color:#c9cbe0; display:block; margin-bottom:.5rem; }

  .mini-stat{ background:#fff; border:1px solid var(--card-border); border-radius:var(--radius); padding:1.1rem 1.25rem; }
  .mini-stat .num{ font-size:1.7rem; font-weight:800; }
  .mini-stat .label{ font-size:.82rem; color:var(--text-muted); font-weight:600; }

  /* ===================== TABS ===================== */
  .pill-tabs{ display:flex; flex-wrap:wrap; gap:.35rem; border-bottom:1px solid var(--card-border); margin-bottom:1.1rem; padding-bottom:.15rem;}
  .pill-tab{ border:none; background:transparent; font-weight:700; font-size:.86rem; padding:.5rem .85rem; border-radius:8px 8px 0 0; color:var(--text-muted); position:relative; }
  .pill-tab.active{ background:var(--accent-soft); color:var(--accent-dark); }
  .pill-tab.blue.active{ background:var(--blue-soft); color:var(--blue); }
  .pill-tab.violet.active{ background:#f4f0ff; color:#7c3aed; }
  .pill-tab.green.active{ background:var(--green-soft); color:var(--green); }
  .pill-tab.red.active{ background:var(--red-soft); color:var(--red); }
  .pill-tab.amber.active{ background:var(--amber-soft); color:var(--amber); }
  .pill-tab.gray.active{ background:var(--gray-soft); color:#4b4f5c; }
  .pill-tab.add{ color:#b7bacb; font-weight:800; }

  /* settings-style tabs (flat pill row, various tints, not underline) */
  .settings-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
  .settings-tab{ border:1px solid transparent; background:#eef1fb; color:#5b6072; font-weight:700; font-size:.83rem; padding:.42rem .85rem; border-radius:8px; }
  .settings-tab.active{ background:var(--text-dark); color:#fff; }
  .settings-tab.tint-blue{ background:#e7f0ff; color:#2f6fed; }
  .settings-tab.tint-green{ background:#e6f8ee; color:#0f9d58; }
  .settings-tab.tint-amber{ background:#fef3e2; color:#b6720a; }
  .settings-tab.tint-red{ background:#fdeaec; color:#c8394f; }
  .settings-tab.tint-violet{ background:#f2eeff; color:#7c3aed; }
  .settings-tab.tint-gray{ background:#eef0f4; color:#575c6b; }
  .settings-tab2{ background:#f2eeff; color:#5b3ff0; }

  /* ===================== TOOLBAR ===================== */
  .toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-bottom:1.1rem; }
  .toolbar .btn, .toolbar .form-select{ font-size:.83rem; font-weight:600; border-radius:9px; border-color:var(--card-border); }
  .toolbar .flex-grow{ flex:1 1 auto; }

  /* ===================== TABLE ===================== */
  .table-card{ background:#fff; border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden; }
  .table-responsive-x{ overflow-x:auto; }
  table.client-table{ width:100%; margin:0; border-collapse:collapse; min-width:1000px; }
  table.client-table thead th{ background:#fafafc; color:var(--text-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:.75rem 1rem; border-bottom:1px solid var(--card-border); white-space:nowrap; position:sticky; top:0; }
  table.client-table tbody td{ padding:.75rem 1rem; border-bottom:1px solid #f0f1f5; vertical-align:middle; white-space:nowrap; }
  table.client-table tbody tr{ cursor:pointer; }
  table.client-table tbody tr:hover{ background:#fafbff; }
  .client-name{ font-weight:700; color:var(--text-dark); }
  .client-meta{ font-size:.72rem; color:var(--text-muted); }
  .id-num{ color:var(--text-muted); font-weight:600; }

  .status-pill{ border:none; font-weight:700; font-size:.76rem; padding:.32rem .7rem; border-radius:7px; display:inline-flex; align-items:center; gap:.35rem; }
  .status-pill.violet{ background:#efeaff; color:#6f3ff0; }
  .status-pill.blue{ background:#e2edff; color:#2f6fed; }
  .status-pill.green{ background:#e0f7ea; color:#0f9d58; }

  .badge-soft{ background:#f0f1f6; color:#4b4f5c; font-weight:600; font-size:.76rem; padding:.32rem .6rem; border-radius:7px; }
  .loc-badge{ background:#fdeeea; color:#c8562f; font-weight:600; font-size:.76rem; padding:.3rem .6rem; border-radius:7px; }
  .loc-badge.on{ background:#e6f6ee; color:#0f9d58; }
  .table-foot{ display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.1rem; font-size:.8rem; color:var(--text-muted); }

  /* ===================== CARD LIST (business clients) ===================== */
  .biz-card{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid #f0f1f5; background:#fff; cursor:pointer; }
  .biz-card:hover{ background:#fafbff; }
  .biz-card:last-child{ border-bottom:none; }
  .biz-logo{ width:42px;height:42px;border-radius:10px;background:var(--accent-soft); color:var(--accent-dark); display:flex;align-items:center;justify-content:center;font-weight:800; flex-shrink:0; }
  .biz-name{ font-weight:700; }
  .biz-sub{ font-size:.78rem; color:var(--text-muted); }

  /* ===================== MODALS ===================== */
  .modal-content{ border-radius:16px; border:none; }
  .modal-header{ border-bottom:1px solid var(--card-border); padding:1.15rem 1.4rem; }
  .modal-title{ font-weight:800; font-size:1.2rem; }
  .modal-body{ padding:1.3rem 1.4rem; }
  .modal-footer{ border-top:1px solid var(--card-border); padding:1rem 1.4rem; }
  .section-eyebrow{ font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase; margin:1.1rem 0 .75rem; position:relative; }
  .section-eyebrow:first-child{ margin-top:0; }
  .form-label{ font-weight:600; font-size:.83rem; }
  .form-control, .form-select{ border-radius:9px; border-color:var(--card-border); font-size:.88rem; padding:.55rem .75rem; }
  .form-control:focus, .form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(111,92,246,.16); }
  .req{ color:var(--red); }

  /* ===================== CLIENT DETAIL ===================== */
  .back-link{ color:var(--text-muted); font-weight:600; font-size:.87rem; }
  .back-link:hover{ color:var(--text-dark); }
  .btn-tool{ font-size:.82rem; font-weight:700; padding:.5rem .85rem; border-radius:9px; border:1px solid var(--card-border); background:#fff; white-space:nowrap; }
  .btn-tool.blue{ background:#eef4ff; border-color:#cfe0ff; color:#2f6fed; }
  .btn-tool.amber{ background:#fff8ea; border-color:#f5e2b0; color:#96650a; }
  .btn-tool.green{ background:#eafaf1; border-color:#c9f2da; color:#0f9d58; }
  .btn-tool.violet{ background:#f4f2ff; border-color:#ddd6fe; color:#5b3ff0; }
  .btn-tool.orange{ background:#fff2ea; border-color:#f7d3b8; color:#b8560d; }
  .btn-tool.icononly{ width:38px; padding:.5rem 0; text-align:center; }
  .btn-tool.danger{ background:#fdeef0; border-color:#f6c9ce; color:var(--red); }

  .name-pill{ border:none; font-weight:700; font-size:.8rem; padding:.35rem .8rem; border-radius:7px; }

  .dark-bar{ background:var(--navy); color:#fff; font-weight:800; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; padding:.75rem 1.1rem; border-radius:9px; display:flex; align-items:center; justify-content:space-between; }
  .dark-bar a{ color:#a9b4d6; font-weight:700; font-size:.78rem; text-transform:none; letter-spacing:0; }

  .detail-panel{ background:#fff; border:1px solid var(--card-border); border-radius:0 0 12px 12px; border-top:none; padding:0; margin-bottom:1rem; }
  .detail-row{ display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem; border-bottom:1px solid #f2f3f7; font-size:.87rem; }
  .detail-row:last-child{ border-bottom:none; }
  .detail-row .drlabel{ width:190px; flex-shrink:0; color:var(--text-muted); display:flex; align-items:center; gap:.5rem; font-weight:500; }
  .detail-row .drlabel i{ color:#b7bccb; font-size:.95rem; }
  .detail-row .drvalue{ flex:1; color:var(--text-dark); font-weight:600; }
  .detail-row.important .drlabel{ color:#c8394f; font-weight:700; }
  .detail-row.important{ background:#fff8f4; }
  .detail-row.danger .drvalue{ color:var(--red); }

  .collapse-bar{ background:var(--navy); color:#fff; font-weight:700; font-size:.9rem; padding:.85rem 1.1rem; border-radius:9px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; margin-bottom:.6rem; }
  .collapse-bar i{ transition:transform .2s ease; }
  .collapse-bar[aria-expanded="true"] i.bi-chevron-right{ transform:rotate(90deg); }

  .activity-side{ background:var(--navy); border-radius:14px; padding:1rem; color:#fff; }
  .activity-side .eyebrow{ font-size:.72rem; font-weight:800; letter-spacing:.09em; color:#9aa3c2; margin-bottom:.85rem; }
  .activity-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
  .activity-tab{ border:none; background:#232b46; color:#c7cbe0; font-size:.76rem; font-weight:700; padding:.4rem .7rem; border-radius:7px; }
  .activity-tab.active{ background:#fff; color:var(--text-dark); }
  .activity-side textarea{ width:100%; background:#1b2338; border:1px solid #2c3555; color:#e7e8f5; border-radius:10px; padding:.7rem; font-size:.83rem; min-height:80px; }
  .activity-side textarea::placeholder{ color:#767f9e; }
  .note-card{ background:#1b2338; border:1px solid #2c3555; border-radius:10px; padding:.85rem; margin-top:.9rem; font-size:.82rem; color:#dfe1ee; line-height:1.55; }
  .note-card .meta{ color:#9aa3c2; font-size:.75rem; margin-bottom:.4rem; }

  /* checklist / status list */
  .status-row{ display:flex; align-items:center; gap:.8rem; padding:.75rem 1.1rem; border-bottom:1px solid #f0f1f5; font-weight:600; font-size:.88rem; }
  .status-row:last-child{ border-bottom:none; }
  .status-row .sq{ width:16px; height:16px; border-radius:4px; flex-shrink:0; }
  .status-row .drag{ color:#c7c9d6; }
  .status-row .row-actions{ opacity:0; transition:opacity .12s ease; display:flex; gap:.9rem; font-size:.95rem; }
  .status-row:hover .row-actions{ opacity:1; }
  .status-row .row-actions i{ cursor:pointer; color:#8b8fa3; }
  .status-row .row-actions i:hover{ color:var(--text-dark); }
  .status-row .row-actions i.bi-trash-fill:hover{ color:var(--red); }
  .status-row.editing{ background:#fafbff; }
  .status-row.editing input[type="color"]{ width:38px; height:32px; padding:2px; border-radius:6px; border:1px solid var(--card-border); flex-shrink:0; }
  .status-row.editing .act-save-status, .status-row.editing .act-cancel-status{ cursor:pointer; }

  .subclass-table tr .row-actions{ opacity:0; transition:opacity .12s ease; display:inline-flex; gap:.7rem; font-size:.95rem; }
  .subclass-table tr:hover .row-actions{ opacity:1; }
  .subclass-table tr .row-actions i{ cursor:pointer; color:#8b8fa3; }
  .subclass-table tr .row-actions i:hover{ color:var(--text-dark); }
  .subclass-table tr .row-actions i.bi-trash-fill:hover{ color:var(--red); }
  .subclass-table input.form-control{ padding:.35rem .5rem; font-size:.85rem; }
  .subclass-table tr.editing{ background:#fafbff; }

  .list-editable-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1.1rem; border-bottom:1px solid #f0f1f5; font-size:.88rem; }
  .list-editable-row:last-child{ border-bottom:none; }
  .list-editable-row .lbl{ font-weight:600; }
  .list-editable-row .sub{ color:var(--text-muted); font-size:.78rem; font-weight:400; }
  .list-editable-row .row-actions{ opacity:0; transition:opacity .12s ease; display:flex; gap:.8rem; font-size:.95rem; flex-shrink:0; }
  .list-editable-row:hover .row-actions{ opacity:1; }
  .list-editable-row .row-actions i{ cursor:pointer; color:#8b8fa3; }
  .list-editable-row .row-actions i:hover{ color:var(--text-dark); }
  .list-editable-row .row-actions i.bi-trash-fill:hover{ color:var(--red); }
  .list-empty-row{ padding:1.2rem 1.1rem; color:var(--text-muted); font-size:.85rem; text-align:center; }
  .checklist-item-row .row-actions{ opacity:0; transition:opacity .12s ease; float:right; }
  .checklist-item-row:hover .row-actions{ opacity:1; }
  .checklist-item-row .row-actions i{ cursor:pointer; color:#8b8fa3; }
  .checklist-item-row .row-actions i:hover{ color:var(--red); }
  .integration-connected{ background:var(--green-soft); color:var(--green); font-weight:700; font-size:.76rem; padding:.3rem .65rem; border-radius:7px; }
  .integration-notconnected{ background:#f0f1f6; color:#575c6b; font-weight:700; font-size:.76rem; padding:.3rem .65rem; border-radius:7px; cursor:pointer; }

  .subclass-table{ width:100%; border-collapse:collapse; font-size:.87rem; }
  .subclass-table th{ text-align:left; color:var(--text-muted); font-weight:700; font-size:.78rem; padding:.6rem .5rem; border-bottom:1px solid var(--card-border); }
  .subclass-table td{ padding:.6rem .5rem; border-bottom:1px solid #f2f3f7; }
  .subclass-table tr:hover{ background:#fafbff; }

  .checklist-item-row{ padding:.85rem 1.1rem; border-bottom:1px solid #f2f3f7; font-size:.88rem; }
  .checklist-item-row:last-child{ border-bottom:none; }

  /* toggle switch reuse bootstrap form-switch, tweak size */
  .form-switch .form-check-input{ width:2.6em; height:1.4em; cursor:pointer; }
  .form-switch .form-check-input:checked{ background-color:var(--text-dark); border-color:var(--text-dark); }

  .icon-tile{ width:42px;height:42px;border-radius:10px;background:#f0f1f6;display:flex;align-items:center;justify-content:center;color:#4b4f5c;font-size:1.1rem;flex-shrink:0; }

  .accordion-flush .accordion-button{ font-weight:700; font-size:.92rem; }
  .accordion-button:not(.collapsed){ background:#fafbff; color:var(--text-dark); box-shadow:none; }
  .accordion-button:focus{ box-shadow:none; }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 991.98px){
    .sidebar{ position:fixed; left:0; top:0; z-index:1050; transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.35); }
    .sidebar.show{ transform:translateX(0); }
    .burger-btn{ display:inline-block; }
    .sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1040; }
    .sidebar-backdrop.show{ display:block; }
    .detail-row{ flex-direction:column; align-items:flex-start; gap:.25rem; }
    .detail-row .drlabel{ width:auto; }
  }
  @media (max-width: 575.98px){
    .content{ padding:1rem; }
    .page-title{ font-size:1.3rem; }
    .page-title-row .btn-dark-cta, .page-title-row .btn-soft{ flex:1 1 auto; }
  }