:root{
    --bg:#12151a; --panel:#1a1e25; --panel2:#20242c; --border:#2a2f38;
    --text:#e8eaed; --sub:#8b93a1; --accent:#4f8cff; --accent2:#2f6fe0;
    --good:#3ec97a; --warn:#e0a33e; --danger:#e05a5a;
    --radius:8px;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);}
  .app-outer{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
  .app{flex:1;display:flex;overflow:hidden;}
  .sidebar{width:300px;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--panel);}
  .sidebar-header{padding:16px;border-bottom:1px solid var(--border);}
  .sidebar-header h1{font-size:15px;margin:0 0 10px;font-weight:600;letter-spacing:.2px;}
  .tabs{display:flex;gap:4px;margin-bottom:10px;background:var(--panel2);border-radius:7px;padding:3px;}
  .tab{flex:1;text-align:center;padding:6px 0;font-size:12px;font-weight:600;border-radius:5px;cursor:pointer;color:var(--sub);}
  .tab.active{background:var(--accent);color:#fff;}
  .search{width:100%;padding:8px 10px;border-radius:var(--radius);border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;margin-bottom:8px;}
  .search:focus{outline:none;border-color:var(--accent);}
  select.sort{width:100%;padding:7px 9px;border-radius:6px;border:1px solid var(--border);background:var(--panel2);color:var(--sub);font-size:11.5px;}
  .list{flex:1;overflow-y:auto;}
  .row{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
  .row:hover{background:var(--panel2);}
  .row.active{background:var(--panel2);border-left:3px solid var(--accent);}
  .row-title{font-size:13.5px;font-weight:600;}
  .row-meta{font-size:11.5px;color:var(--sub);margin-top:2px;}
  .row-stats{font-size:11px;color:var(--sub);margin-top:4px;display:flex;gap:10px;}
  .add-btn{margin:12px;padding:9px;border-radius:var(--radius);border:1px dashed var(--border);background:transparent;color:var(--sub);cursor:pointer;font-size:12.5px;}
  .add-btn:hover{border-color:var(--accent);color:var(--accent);}
  .main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
  .empty{margin:auto;color:var(--sub);text-align:center;font-size:13px;}
  .header{padding:20px 24px;border-bottom:1px solid var(--border);}
  .header h2{margin:0 0 4px;font-size:19px;}
  .sub{color:var(--sub);font-size:12.5px;}
  .header-row{display:flex;justify-content:space-between;align-items:flex-start;}
  .icon-btn{background:none;border:none;color:var(--sub);cursor:pointer;font-size:12px;padding:4px 8px;}
  .icon-btn:hover{color:var(--danger);}
  .summary-strip{display:flex;gap:20px;margin-top:12px;}
  .stat{font-size:11px;color:var(--sub);}
  .stat b{display:block;font-size:16px;color:var(--text);font-weight:700;}
  .body{flex:1;overflow-y:auto;padding:20px 24px;}
  .contact-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
  .chip{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:6px 12px 6px 6px;font-size:12px;display:flex;align-items:center;gap:6px;cursor:pointer;}
  .chip:hover{border-color:var(--accent);}
  .chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
  .log-form{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;background:var(--panel);padding:12px;border-radius:var(--radius);border:1px solid var(--border);}
  .log-form select, .log-form input, .log-form textarea{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 9px;font-size:12.5px;font-family:inherit;}
  .log-form textarea{flex:1;min-width:180px;resize:vertical;min-height:36px;}
  .log-form button{background:var(--accent);border:none;color:#fff;padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:600;}
  .log-form button:hover{background:var(--accent2);}
  .timeline{display:flex;flex-direction:column;gap:10px;}
  .entry{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
  .entry-top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);margin-bottom:6px;gap:8px;flex-wrap:wrap;}
  .entry-top .left{display:flex;align-items:center;gap:8px;}
  .entry-type{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
  .type-call{background:#2f6fe022;color:#4f8cff;}
  .type-email{background:#3ec97a22;color:#3ec97a;}
  .type-meeting{background:#e0a33e22;color:#e0a33e;}
  .type-note{background:#8b93a122;color:#8b93a1;}
  .who{color:var(--text);font-weight:600;}
  .entry-body{font-size:13px;line-height:1.5;white-space:pre-wrap;}
  .entry-del{background:none;border:none;color:var(--sub);cursor:pointer;font-size:11px;}
  .entry-del:hover{color:var(--danger);}
  .modal-overlay{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:10;}
  .modal{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;width:340px;}
  .modal h3{margin:0 0 14px;font-size:15px;}
  .modal input, .modal select{width:100%;padding:8px 10px;margin-bottom:10px;border-radius:6px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:13px;}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
  .btn-secondary{background:transparent;border:1px solid var(--border);color:var(--sub);padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12.5px;}
  .btn-primary{background:var(--accent);border:none;color:#fff;padding:7px 14px;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:600;}
  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
  .topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;border-bottom:1px solid var(--border);background:var(--panel);}
  .topbar h1{font-size:15px;margin:0;font-weight:600;white-space:nowrap;}
  .view-toggle{display:flex;gap:4px;background:var(--panel2);border-radius:7px;padding:3px;}
  .view-toggle .tab{padding:6px 14px;}
  .topbar .search{margin:0;max-width:260px;}
  .col-picker-wrap{position:relative;}
  .col-picker-btn{background:var(--panel2);border:1px solid var(--border);color:var(--sub);padding:7px 12px;border-radius:6px;cursor:pointer;font-size:12px;}
  .col-picker-btn:hover{border-color:var(--accent);color:var(--accent);}
  .col-picker{position:absolute;top:calc(100% + 6px);right:0;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px;width:200px;z-index:20;box-shadow:0 8px 24px #0006;}
  .col-picker label{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 2px;cursor:pointer;color:var(--text);}
  .col-picker label input{margin:0;}
  .table-scroll{flex:1;overflow:auto;padding:0 20px 20px;}
  table.data-table{width:100%;border-collapse:collapse;font-size:12.5px;}
  table.data-table th{position:sticky;top:0;background:var(--panel);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--sub);font-weight:600;cursor:pointer;white-space:nowrap;user-select:none;}
  table.data-table th:hover{color:var(--text);}
  table.data-table th .arrow{margin-left:4px;color:var(--accent);}
  table.data-table td{padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis;}
  table.data-table tbody tr{cursor:pointer;}
  table.data-table tbody tr:hover{background:var(--panel2);}
  .table-empty{padding:30px;text-align:center;color:var(--sub);font-size:13px;}