:root{
    --bg-0:#0a0908; --bg-1:#110f0a; --bg-2:#18150e;
    --panel:#141109; --panel-border:#3a2f1a;
    --red-dark:#6b5017; --red:#b3822a; --red-bright:#eec168;
    --amber:#d9a94a; --green:#8ea36e;
    --text-0:#efe7d6; --text-1:#b3a68a; --text-2:#7d715a;
    --gold-line:linear-gradient(90deg,#8a6420,#eec168,#8a6420);
    --danger:#c1584a; --danger-soft:rgba(193,88,74,.12);
    --radius-lg:16px; --radius-md:10px; --radius-sm:7px; --radius-xs:5px;
    --sp-xs:6px; --sp-sm:10px; --sp-md:16px; --sp-lg:22px; --sp-xl:28px;
    --mono:'Share Tech Mono', monospace; --disp:'Orbitron', sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg-0);color:var(--text-0);font-family:var(--mono);}
  body{background-image:radial-gradient(ellipse 1200px 800px at 20% -10%, rgba(179,130,42,.07), transparent 60%),
                        radial-gradient(ellipse 900px 700px at 100% 100%, rgba(179,130,42,.05), transparent 55%);
       background-attachment:fixed;min-height:100vh;position:relative;overflow-x:hidden;}
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
    background:repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:overlay;opacity:.5;
  }
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-track{background:var(--bg-1);}
  ::-webkit-scrollbar-thumb{background:var(--red-dark);}

  .app{display:flex;min-height:100vh;}

  .sidebar{width:230px;flex-shrink:0;background:linear-gradient(180deg,#0c0d0d,#0a0a0a);border-right:1px solid var(--panel-border);display:flex;flex-direction:column;transition:width .25s ease;position:relative;z-index:20;}
  .sidebar.collapsed{width:60px;}
  .sidebar .brand{padding:20px 18px;border-bottom:1px solid var(--panel-border);display:flex;align-items:center;gap:11px;}
  .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 8px var(--red-bright);flex-shrink:0;animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
  .brand-text{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:1px;color:var(--text-0);white-space:nowrap;overflow:hidden;}
  .brand-sub{font-size:9px;color:var(--red-bright);letter-spacing:2px;white-space:nowrap;overflow:hidden;}
  .sidebar.collapsed .brand-text, .sidebar.collapsed .brand-sub{display:none;}
  .nav{flex:1;overflow-y:auto;padding:10px 6px;}
  .nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:1px;border-radius:var(--radius-xs);color:var(--text-1);cursor:pointer;font-size:11px;letter-spacing:.5px;border-left:2px solid transparent;white-space:nowrap;overflow:hidden;transition:.15s;}
  .nav-item:hover{background:var(--bg-2);color:var(--text-0);}
  .nav-item.active{border-left-color:var(--red-bright);background:linear-gradient(90deg,rgba(238,193,104,.14),transparent);color:var(--text-0);text-shadow:0 0 12px rgba(238,193,104,.22);}
  .nav-item .ic{width:16px;text-align:center;flex-shrink:0;font-size:12px;}
  .sidebar.collapsed .nav-item span.label{display:none;}
  .collapse-btn{padding:12px;text-align:center;color:var(--text-2);cursor:pointer;border-top:1px solid var(--panel-border);font-size:11px;letter-spacing:1px;}
  .collapse-btn:hover{color:var(--text-0);}

  .main{flex:1;min-width:0;display:flex;flex-direction:column;}
  .topbar{height:58px;border-bottom:1px solid var(--panel-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp-xl);background:rgba(10,9,8,.72);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;box-shadow:0 1px 0 rgba(238,193,104,.06);}
  .topbar-title{font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:2.2px;color:var(--text-0);}
  .topbar-title .sub{color:var(--text-2);font-size:10px;font-family:var(--mono);letter-spacing:1px;margin-left:8px;}
  .topbar-right{display:flex;align-items:center;gap:16px;font-size:10px;color:var(--text-2);}
  .clock{color:var(--red-bright);}
  .content{padding:var(--sp-xl);flex:1;}
  .view{}
  .view.anim-in{animation:viewIn .4s cubic-bezier(.16,.8,.4,1);}
  @keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
  @keyframes viewIn{from{opacity:0;transform:translateY(12px);filter:blur(2px);}to{opacity:1;transform:none;filter:blur(0);}}
  @keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
  .entrance{animation:cardIn .45s cubic-bezier(.16,.8,.4,1) backwards;}

  /* top loading bar (efeito de "carregando módulo") */
  #loadBar{position:absolute;left:0;bottom:-1px;height:2px;width:0%;
    background:linear-gradient(90deg,var(--red-dark),var(--red-bright));
    box-shadow:0 0 10px rgba(240,197,99,.6);opacity:0;z-index:5;}

  /* glitch sutil no título ao trocar de aba */
  @keyframes titleGlitch{
    0%{transform:translate(0);}
    20%{transform:translate(-1px,1px);text-shadow:1px 0 var(--red-bright),-1px 0 #4a90c9;}
    40%{transform:translate(1px,-1px);text-shadow:-1px 0 var(--red-bright),1px 0 #4a90c9;}
    60%{transform:translate(-1px,0);text-shadow:1px 0 var(--red-bright),-1px 0 #4a90c9;}
    80%{transform:translate(1px,0);text-shadow:none;}
    100%{transform:translate(0);text-shadow:none;}
  }
  .glitching{animation:titleGlitch .28s steps(3);}

  /* brilho diagonal ao passar o mouse nos cards */
  .stat-card{isolation:isolate;}
  .stat-card::before{
    content:"";position:absolute;top:0;left:-60%;width:35%;height:100%;
    background:linear-gradient(115deg,transparent,rgba(240,197,99,.14),transparent);
    transform:skewX(-18deg);transition:left .55s ease;pointer-events:none;z-index:0;
  }
  .stat-card:hover::before{left:130%;}

  @keyframes alertPulse{0%,100%{box-shadow:0 0 0 rgba(193,88,74,0);}50%{box-shadow:0 0 14px rgba(193,88,74,.22);}}
  .alert-box.danger{animation:alertPulse 2.2s ease-in-out infinite;}

  .btn{transform:translateY(0);}
  .btn:active{transform:translateY(1px) scale(.97);}
  .nav-item{transform:translateX(0);}
  .nav-item:hover{transform:translateX(2px);}

  h1.page-title{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:2.5px;margin:0 0 6px;color:var(--text-0);text-shadow:0 0 14px rgba(238,193,104,.14);}
  .page-desc{color:var(--text-2);font-size:11px;margin:0 0 var(--sp-lg);letter-spacing:.5px;line-height:1.6;}

  .panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-lg);padding:var(--sp-lg);position:relative;box-shadow:0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02);}
  .panel::before{content:"";position:absolute;top:-1px;left:20px;width:28px;height:2px;border-radius:2px;background:var(--gold-line);}
  .panel-title{font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:1.8px;color:var(--text-1);margin:0 0 var(--sp-md);display:flex;justify-content:space-between;align-items:center;}

  .grid{display:grid;gap:var(--sp-md);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:repeat(2,1fr);}
  @media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:700px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

  .stat-card{background:var(--panel);border:1px solid var(--panel-border);border-left:2px solid var(--red-dark);border-radius:var(--radius-md);padding:var(--sp-md) var(--sp-lg);position:relative;overflow:hidden;}
  .stat-card::after{content:"";position:absolute;right:-20px;top:-20px;width:60px;height:60px;background:radial-gradient(circle,rgba(240,197,99,.12),transparent 70%);}
  .stat-card{transition:.2s;}
  .stat-card:hover{border-color:var(--red);border-left-color:var(--red-bright);box-shadow:0 0 0 1px rgba(238,193,104,.08), 0 4px 18px rgba(0,0,0,.35);}
  .stat-label{font-size:9.5px;color:var(--text-2);letter-spacing:1.6px;margin-bottom:8px;display:flex;justify-content:space-between;text-transform:uppercase;font-weight:600;}
  .stat-value-row{display:flex;align-items:baseline;gap:5px;font-family:var(--disp);font-size:21px;color:var(--text-0);font-weight:700;letter-spacing:.5px;}
  .stat-value-row .sep{color:var(--text-2);font-size:14px;}
  .stat-bar-track{height:5px;background:var(--bg-1);margin-top:8px;border-radius:6px;overflow:hidden;}
  .stat-bar-fill{height:100%;background:linear-gradient(90deg,#8a4438,var(--danger));}
  .stat-bar-fill.green{background:linear-gradient(90deg,#1c5c34,var(--green));}
  .stat-bar-fill.amber{background:linear-gradient(90deg,#7a5416,var(--amber));}

  .badge{display:inline-block;font-size:9px;letter-spacing:1px;padding:3.5px 10px;border:1px solid;border-radius:20px;text-transform:uppercase;font-weight:600;}
  .badge.ok{color:var(--green);border-color:var(--green);background:rgba(142,163,110,.10);}
  .badge.warn{color:var(--amber);border-color:var(--amber);background:rgba(217,169,74,.10);}
  .badge.danger{color:var(--danger);border-color:var(--danger);background:var(--danger-soft);}
  .badge.neutral{color:var(--text-1);border-color:var(--panel-border);background:rgba(255,255,255,.02);}

  .btn{font-family:var(--mono);font-size:10px;letter-spacing:1px;padding:8px 14px;background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--panel-border);color:var(--text-0);cursor:pointer;border-radius:var(--radius-sm);transition:.15s;text-transform:uppercase;}
  .btn:hover{border-color:var(--red);color:var(--red-bright);}
  .btn.primary{background:linear-gradient(180deg,#8a6420,#5e4715);border-color:var(--red-bright);color:#f5e6bf;letter-spacing:1.5px;}
  .btn.primary:hover{background:linear-gradient(180deg,#a97a1f,#6b5017);color:#fff5da;box-shadow:0 0 10px rgba(240,197,99,.25);}
  .btn.ghost{background:transparent;}
  .btn.small{padding:4px 8px;font-size:9px;}
  .btn.danger-o{border-color:var(--danger);color:var(--danger);}
  .btn.danger-o:hover{background:var(--danger-soft);color:#f0c4ba;}
  .btn:disabled{opacity:.35;cursor:not-allowed;}

  table{width:100%;border-collapse:collapse;font-size:11px;}
  th{text-align:left;color:var(--text-2);font-weight:400;letter-spacing:1px;font-size:9px;padding:6px 8px;border-bottom:1px solid var(--panel-border);text-transform:uppercase;white-space:nowrap;}
  td{padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.03);color:var(--text-1);}
  tr:hover td{background:rgba(255,255,255,.02);}
  .table-wrap{overflow-x:auto;}
  .actions-cell{display:flex;gap:6px;padding:6px 4px;}
  .empty-state{text-align:center;padding:30px;color:var(--text-2);font-size:11px;}

  /* SPREADSHEET-STYLE EDITABLE CELLS */
  .cell-input, select.cell-input, textarea.cell-input{
    width:100%;background:transparent;border:1px solid transparent;color:var(--text-0);
    padding:7px 8px;font-family:var(--mono);font-size:11px;border-radius:var(--radius-xs);transition:.12s;
  }
  .cell-input:hover{background:rgba(255,255,255,.03);border-color:var(--panel-border);}
  .cell-input:focus{outline:none;background:var(--bg-1);border-color:var(--red);}
  textarea.cell-input{resize:vertical;min-height:34px;}
  input.cell-input[type=number]{-moz-appearance:textfield;}

  .stat-edit{background:transparent;border:1px solid transparent;color:var(--text-0);font-family:var(--disp);font-size:20px;font-weight:700;width:100%;padding:2px 4px;border-radius:var(--radius-xs);}
  .stat-edit:hover{border-bottom:1px dashed var(--panel-border);background:rgba(255,255,255,.02);}
  .stat-edit:focus{outline:none;border-bottom:1px solid var(--red-bright);background:var(--bg-1);}
  .kv-edit{background:transparent;border:1px solid transparent;color:var(--text-0);font-family:var(--mono);font-size:11px;text-align:right;padding:3px 6px;width:60%;border-radius:var(--radius-xs);}
  .kv-edit:hover{background:rgba(255,255,255,.03);border-color:var(--panel-border);}
  .kv-edit:focus{outline:none;background:var(--bg-1);border-color:var(--red);}
  .kv{display:flex;justify-content:space-between;align-items:center;font-size:11px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.06);color:var(--text-1);gap:8px;}
  .kv > span:first-child{flex-shrink:0;}
  .kv b{color:var(--text-0);font-weight:600;text-align:right;}

  .log-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;}
  .log-item{font-size:11px;color:var(--text-1);padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.05);}
  .log-time{color:var(--red-bright);margin-right:8px;}

  .alert-box{border:1px solid var(--panel-border);border-radius:var(--radius-md);padding:11px 14px;margin-bottom:9px;display:flex;gap:10px;align-items:flex-start;font-size:11px;line-height:1.5;}
  .alert-box.danger{border-color:var(--danger);background:var(--danger-soft);color:#e8b9ae;}
  .alert-box.warn{border-color:var(--amber);background:rgba(217,169,74,.10);color:#e6cd9f;}

  .modal-overlay{position:fixed;inset:0;background:rgba(6,5,3,.72);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:100;padding:16px;}
  .modal-overlay.active{display:flex;}
  .modal{background:var(--bg-1);border:1px solid var(--red-dark);border-radius:var(--radius-lg);width:100%;max-width:440px;max-height:88vh;overflow-y:auto;padding:22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:modalIn .25s cubic-bezier(.16,.8,.4,1);}
  @keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:none;}}
  .modal-title{font-family:var(--disp);font-size:13px;letter-spacing:1.5px;margin-bottom:16px;color:var(--text-0);}
  .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
  .confirm-box p{font-size:12px;color:var(--text-1);margin-bottom:18px;}

  .mobile-toggle{display:none;}
  @media(max-width:800px){
    .sidebar{position:fixed;left:-230px;top:0;bottom:0;z-index:50;transition:left .25s;}
    .sidebar.open{left:0;}
    .sidebar.collapsed{width:230px;}
    .mobile-toggle{display:block;cursor:pointer;color:var(--text-0);font-size:16px;margin-right:10px;}
    .content{padding:14px;}
  }

  .toast-wrap{position:fixed;bottom:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px;}
  .toast{background:var(--bg-1);border:1px solid var(--red);border-radius:var(--radius-md);padding:10px 14px;font-size:11px;color:var(--text-0);animation:fadein .2s;max-width:280px;}

  .base-visual{border:1px solid var(--panel-border);border-radius:var(--radius-lg);background:linear-gradient(180deg,#101212,#0a0b0b);padding:20px;text-align:center;margin-bottom:16px;overflow:hidden;}
  .module-card{background:var(--bg-1);border:1px solid var(--panel-border);border-radius:var(--radius-md);padding:12px;}
  .module-card .mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
  .module-card .mname{font-family:var(--disp);font-size:11px;letter-spacing:1px;}
  .locked{opacity:.5;}

  .tree-level{border:1px solid var(--panel-border);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:12px;position:relative;}
  .tree-level.current{border-color:var(--red);}
  .tree-level.done{border-color:var(--green);}

  .section-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-lg);flex-wrap:wrap;gap:var(--sp-sm);}
  .paranormal-meter{height:16px;background:var(--bg-1);border:1px solid var(--panel-border);display:flex;overflow:hidden;}
  .paranormal-meter div{height:100%;}
  .hint{font-size:9.5px;color:var(--text-2);letter-spacing:.6px;margin:0 0 var(--sp-lg);padding:6px 10px;border-left:2px solid var(--panel-border);background:rgba(255,255,255,.015);}

  .member-photo-row{display:flex;gap:12px;align-items:center;margin-bottom:10px;}
  .member-avatar{
    width:64px;height:64px;border-radius:50%;flex-shrink:0;position:relative;cursor:pointer;
    background:var(--bg-1);border:2px solid var(--panel-border);overflow:hidden;
    display:flex;align-items:center;justify-content:center;transition:.15s;
  }
  .member-avatar:hover{border-color:var(--red-bright);box-shadow:0 0 12px rgba(240,197,99,.25);}
  .member-avatar img{width:100%;height:100%;object-fit:cover;}
  .avatar-placeholder{font-size:22px;color:var(--text-2);}
  .avatar-edit-badge{
    position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;
    background:var(--red-dark);border:1.5px solid var(--bg-0);color:#f5e6bf;font-size:9px;
    display:flex;align-items:center;justify-content:center;
  }

  /* ===== ANOTAÇÕES ===== */
  .note-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  .note-tab{background:var(--bg-1);border:1px solid var(--panel-border);border-radius:22px;padding:8px 16px;font-family:var(--mono);font-size:11px;color:var(--text-1);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.16s;letter-spacing:.4px;}
  .note-tab:hover{border-color:var(--red);color:var(--text-0);transform:translateY(-1px);}
  .note-tab.active{background:linear-gradient(180deg,#8a6420,#5e4715);border-color:var(--red-bright);color:#f7ecd2;box-shadow:0 3px 10px rgba(0,0,0,.3);}
  .note-tab-count{font-size:9px;opacity:.75;background:rgba(255,255,255,.09);padding:1.5px 7px;border-radius:10px;}
  .note-tab.active .note-tab-count{background:rgba(0,0,0,.2);}
  .note-tab-add{border-style:dashed;opacity:.7;}
  .note-tab-add:hover{opacity:1;}

  .note-cat-manage{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-lg);padding:10px 12px;background:rgba(255,255,255,.015);border:1px dashed var(--panel-border);border-radius:var(--radius-md);}
  .note-cat-row{display:flex;align-items:center;gap:2px;background:var(--bg-1);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:1px 4px 1px 8px;}
  .note-cat-row .kv-edit{width:120px;text-align:left;font-size:10.5px;}

  .note-card{cursor:pointer;transition:.18s ease;}
  .note-card:hover{border-color:var(--red-bright);transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(238,193,104,.08);}
  .note-card-title{font-family:var(--disp);font-size:13px;font-weight:600;color:var(--text-0);margin-bottom:9px;letter-spacing:.4px;}
  .note-card-excerpt{font-size:11px;color:var(--text-1);line-height:1.65;margin-bottom:12px;min-height:44px;}
  .note-card-meta{font-size:9px;color:var(--text-2);letter-spacing:.5px;border-top:1px dashed rgba(255,255,255,.07);padding-top:9px;}

  .note-full{padding:var(--sp-xl);}
  .note-full-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  .note-title-edit{flex:1;min-width:220px;background:transparent !important;border:none !important;border-bottom:1px solid transparent !important;color:var(--text-0);font-family:var(--disp) !important;font-size:21px !important;font-weight:700;padding:6px 4px !important;letter-spacing:.5px;}
  .note-title-edit:hover{border-bottom-color:var(--panel-border) !important;background:transparent !important;}
  .note-title-edit:focus{outline:none;border-bottom-color:var(--red-bright) !important;background:transparent !important;}
  .note-full-head select.cell-input{width:auto;max-width:190px;}
  .note-body{width:100%;min-height:440px;font-size:13px;line-height:1.85;margin-top:18px;padding:18px;background:var(--bg-1);border:1px solid var(--panel-border);}