/* === agenda.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-left { display: flex; align-items: center; gap: 8px; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.toolbar-btn.active { color: #e8e8e6; border-color: #444; }
.page-content { max-width: 900px; margin: 0 auto; padding: 32px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
/* ── Seção Hoje (topo) ── */
.today-section { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; margin-bottom: 28px; }
/* Coluna esquerda: timeline */
.today-head { font-size: 14px; font-weight: 700; color: #e8e8e6; margin-bottom: 3px; }
.today-sub { font-size: 11px; color: #555; margin-bottom: 14px; }
.timeline-item { display: flex; gap: 8px; margin-bottom: 7px; align-items: flex-start; }
.t-time { font-size: 10px; color: #444; min-width: 32px; padding-top: 3px; text-align: right; }
.t-block { flex: 1; border-radius: 5px; padding: 7px 10px; }
.t-block.event { background: #0f2240; border-left: 3px solid #60a5fa; }
.t-block.prio { background: #2a1500; border-left: 3px solid #fb923c; }
.t-block.task { background: #0a2419; border-left: 3px solid #4ade80; }
.t-title { font-size: 11px; color: #ccc; line-height: 1.3; }
.t-meta { font-size: 9px; color: #555; margin-top: 2px; }
.divider-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #444; margin: 12px 0 8px; display: flex; align-items: center; gap: 8px; }
.divider-label::after { content:''; flex:1; height:1px; background:#222; }
.task-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #1e1e1e; }
.task-row:last-child { border-bottom: none; }
.check { width: 13px; height: 13px; border: 1.5px solid #333; border-radius: 3px; flex-shrink: 0; }
.check.done { background: #4ade80; border-color: #4ade80; }
.task-name { font-size: 11px; color: #ccc; flex: 1; }
.task-name.done { text-decoration: line-through; color: #444; }
.tag { padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 500; white-space: nowrap; }
.tag-prio { background: #2a1500; color: #fb923c; }
.tag-normal { background: #0a2419; color: #4ade80; }
.tag-event { background: #0f2e4a; color: #60a5fa; }
/* Coluna direita: semana + próximos */
.week-strip-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; margin-bottom: 8px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 16px; }
.strip-day { text-align: center; padding: 6px 2px; border-radius: 5px; }
.strip-day.today { background: #1a1a2e; border: 1px solid #3d3d7a; }
.strip-lbl { font-size: 7px; color: #444; text-transform: uppercase; }
.strip-num { font-size: 11px; font-weight: 600; color: #666; margin: 2px 0; }
.strip-day.today .strip-num { color: #818cf8; }
.strip-dots { display: flex; justify-content: center; gap: 2px; min-height: 6px; }
.sdot { width: 4px; height: 4px; border-radius: 50%; }
.upcoming-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; margin-bottom: 8px; }
.up-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #1e1e1e; }
.up-item:last-child { border-bottom: none; }
.up-date { font-size: 10px; color: #444; min-width: 40px; }
.up-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.up-name { font-size: 11px; color: #888; flex: 1; }
/* ── Calendário ── */
.cal-section { border-top: 1px solid #2a2a2a; padding-top: 20px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-title { font-size: 14px; font-weight: 700; color: #e8e8e6; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav-btn { font-size: 11px; color: #555; padding: 3px 9px; border: 1px solid #2a2a2a; border-radius: 4px; cursor: pointer; }
.cal-tabs { display: flex; gap: 4px; }
.cal-tab { font-size: 11px; padding: 3px 10px; border-radius: 4px; cursor: pointer; color: #555; border: 1px solid transparent; }
.cal-tab.active { background: #2f2f2f; color: #e8e8e6; border-color: #3f3f3f; }
/* Semana view */
.week-view { display: grid; grid-template-columns: 48px repeat(7, 1fr); gap: 0; border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden; }
.wv-corner { background: #1f1f1f; border-right: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; }
.wv-day-head { background: #1f1f1f; border-bottom: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a; padding: 8px 4px; text-align: center; }
.wv-day-head:last-child { border-right: none; }
.wv-day-head.today-col { background: #1a1a2e; }
.wv-dh-lbl { font-size: 9px; color: #555; text-transform: uppercase; }
.wv-dh-num { font-size: 14px; font-weight: 700; color: #666; margin-top: 2px; }
.wv-day-head.today-col .wv-dh-num { color: #818cf8; }
.wv-time { background: #191919; border-right: 1px solid #2a2a2a; border-bottom: 1px solid #1e1e1e; padding: 0 6px; height: 44px; display: flex; align-items: flex-start; padding-top: 4px; font-size: 9px; color: #333; }
.wv-cell { border-right: 1px solid #1e1e1e; border-bottom: 1px solid #1e1e1e; height: 44px; padding: 2px; position: relative; }
.wv-cell:last-child { border-right: none; }
.wv-cell.today-col { background: #191d2e; }
.wv-event { background: #0f2240; border-left: 2px solid #60a5fa; border-radius: 3px; padding: 2px 4px; font-size: 8px; color: #60a5fa; line-height: 1.3; margin-bottom: 2px; }
.wv-task { background: #0a2419; border-left: 2px solid #4ade80; border-radius: 3px; padding: 2px 4px; font-size: 8px; color: #4ade80; line-height: 1.3; margin-bottom: 2px; }
.wv-prio { background: #2a1500; border-left: 2px solid #fb923c; border-radius: 3px; padding: 2px 4px; font-size: 8px; color: #fb923c; line-height: 1.3; margin-bottom: 2px; }
/* Legenda */
.legend { display: flex; gap: 16px; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #444; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; }
/* ── Atrasadas ── */
.od-strip { display: flex; align-items: center; gap: 12px; background: #1e1500; border: 1px solid #3d2c00; border-left: 3px solid #fbbf24; border-radius: 6px; padding: 9px 14px; flex-wrap: wrap; }
.od-badge { background: #fbbf24; color: #191919; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 4px; letter-spacing: .04em; flex-shrink: 0; }
.od-sep { color: #3d2c00; font-size: 12px; }
.od-item { display: flex; align-items: center; gap: 6px; }
.od-name { font-size: 11px; color: #c4a44a; }
.od-days { font-size: 10px; color: #7a6020; background: #2a1e00; border-radius: 3px; padding: 1px 5px; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === biblioteca.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #111; color: #e8e8e6; font-size: 13px; padding: 32px; }
h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.sub { font-size: 12px; color: #555; margin-bottom: 28px; }
.sec-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; align-items: center; }
.section { margin-bottom: 20px; }
/* Cards row */
.cards-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.cards-row::-webkit-scrollbar { display: none; }
/* Card */
.card { flex-shrink: 0; width: 90px; background: #161616; border: 1px solid #2a2a2a; border-radius: 6px; overflow: hidden; }
.card-poster { width: 90px; height: 134px; object-fit: cover; display: block; background: linear-gradient(160deg, #1e1e1e 0%, #2a2a2a 100%); }
.card-poster-fallback { width: 90px; height: 134px; background: linear-gradient(160deg, #1a1a1a 0%, #252525 100%); display: flex; align-items: center; justify-content: center; font-size: 9px; color: #444; text-align: center; padding: 8px; }
.card-body { padding: 6px 6px 8px; }
/* Tag chips */
.card-tags { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 5px; }
.chip { font-size: 7px; font-weight: 600; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.chip-genre { background: #1e1040; color: #818cf8; }
.chip-stream { background: #0f2e4a; color: #60a5fa; }
.chip-author { background: #2a1f00; color: #fbbf24; }
.chip-buy { background: #0a2419; color: #4ade80; cursor: pointer; }
/* Ratings */
.card-ratings { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.rating-imdb { font-size: 8px; color: #fbbf24; font-weight: 700; }
.rating-rt { font-size: 8px; color: #4ade80; font-weight: 700; }
.rating-sep { font-size: 7px; color: #333; }
/* Director & Cast */
.card-meta-label { font-size: 7px; color: #3a3a3a; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1px; }
.card-meta-value { font-size: 8px; color: #555; line-height: 1.3; margin-bottom: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Completed table */
.done-section { margin-bottom: 20px; }
.done-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #444; margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid #222; }
.tbl-head { display: grid; grid-template-columns: 1fr 70px 80px 55px 55px; gap: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3a3a3a; padding-bottom: 5px; border-bottom: 1px solid #222; margin-bottom: 2px; }
.tbl-head .c { text-align: center; }
.tbl-row { display: grid; grid-template-columns: 1fr 70px 80px 55px 55px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #1a1a1a; }
.tbl-row:last-child { border-bottom: none; }
.tbl-name { font-size: 11px; color: #aaa; }
.tbl-year { font-size: 10px; color: #444; }
.tbl-cell { display: flex; justify-content: center; }
.tag { padding: 2px 6px; border-radius: 3px; font-size: 8px; font-weight: 600; white-space: nowrap; }
.tag-green { background: #0a2419; color: #4ade80; }
.tag-purple { background: #1e1040; color: #818cf8; }
.tag-gray { background: #222; color: #666; }
.tag-yellow { background: #2a1f00; color: #fbbf24; }
.stars { color: #fbbf24; font-size: 9px; }
/* 2-col grid for sections */
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.two-col-grid .section { margin-bottom: 0; }
/* === captura.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 900px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 28px; }
/* Capture bar */
.capture-box { background: #242424; border: 1px solid #3a3a3a; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; }
.capture-input { width: 100%; background: transparent; border: none; outline: none; font-size: 15px; color: #e8e8e6; font-family: inherit; margin-bottom: 12px; }
.capture-input::placeholder { color: #3a3a3a; }
.capture-divider { border: none; border-top: 1px solid #2f2f2f; margin-bottom: 12px; }
.capture-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.capture-tag { padding: 4px 10px; border-radius: 5px; font-size: 11px; font-weight: 500; border: 1px solid #3a3a3a; background: #2a2a2a; color: #666; cursor: pointer; }
.capture-tag:hover { border-color: #555; color: #aaa; }
.capture-submit { padding: 5px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: #5a73e8; color: white; margin-left: auto; }
/* Inbox */
.inbox-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.inbox-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #f87171; }
.inbox-count { background: #3a1a1a; border: 1px solid #6b2020; color: #f87171; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.inbox-action { margin-left: auto; font-size: 11px; color: #5a73e8; cursor: pointer; }
.inbox-list { background: #1f1f1f; border: 1px solid #2f2f2f; border-radius: 8px; margin-bottom: 24px; overflow: hidden; }
.inbox-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #2a2a2a; cursor: pointer; }
.inbox-item:last-child { border-bottom: none; }
.inbox-item:hover { background: #242424; }
.inbox-item:hover .item-cats { opacity: 1; }
.item-dot { width: 7px; height: 7px; border-radius: 50%; background: #444; flex-shrink: 0; }
.item-text { flex: 1; font-size: 12px; color: #ccc; }
.item-time { font-size: 11px; color: #444; }
.item-cats { opacity: 0; display: flex; gap: 5px; transition: opacity .15s; }
.cat-btn { padding: 2px 8px; border-radius: 4px; font-size: 10px; border: 1px solid #3a3a3a; color: #777; cursor: pointer; white-space: nowrap; }
.cat-btn:hover { border-color: #5a73e8; color: #8fa4f0; }
/* Body grid */
.body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.body-full { margin-bottom: 14px; }
.dest-box { background: #1f1f1f; border: 1px solid #2f2f2f; border-radius: 8px; overflow: hidden; }
.dest-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #2a2a2a; }
.dest-title { font-size: 12px; font-weight: 600; flex: 1; }
.dest-count { font-size: 10px; color: #555; background: #2a2a2a; padding: 1px 7px; border-radius: 10px; }
.dest-link { font-size: 11px; color: #5a73e8; cursor: pointer; }
.dest-body { padding: 8px 0; }
.dest-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 14px; border-bottom: 1px solid #222; }
.dest-item:last-child { border-bottom: none; }
.dest-item-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.dest-item-text { font-size: 11px; color: #888; flex: 1; line-height: 1.4; }
.mini-tag { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; margin-right: 4px; }
.t-ideia { background: #2d1b69; color: #c084fc; }
.t-obs { background: #162416; color: #86efac; }
.t-pesq { background: #2a1f06; color: #fbbf24; }
.t-link { background: #1e2d2a; color: #34d399; }
.t-swipe { background: #1a1a2d; color: #818cf8; }
.t-task { background: #0f2e4a; color: #60a5fa; }
.dot-purple { background: #c084fc; }
.dot-green { background: #86efac; }
.dot-yellow { background: #fbbf24; }
.dot-teal { background: #34d399; }
.dot-indigo { background: #818cf8; }
.dot-blue { background: #60a5fa; }
.dest-empty { padding: 16px 14px; font-size: 11px; color: #444; text-align: center; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === clientes.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 920px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
.action-row { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
.action-btn { display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #2f2f2f; background: #242424; color: #9b9b9b; }
.action-btn.primary { background: #5a73e8; border-color: #5a73e8; color: white; }
/* Stats */
.stats-row { display: flex; gap: 12px; margin-bottom: 28px; }
.stat { flex: 1; background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; }
.stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat.total { border-top: 3px solid #5a73e8; }
.stat.ativos { border-top: 3px solid #4ade80; background: #111e18; }
.stat.valor { border-top: 3px solid #fbbf24; background: #1e1a0e; }
/* Cards grid */
.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* Client card */
.client-card {
background: #1f1f1f;
border: 1px solid #2a2a2a;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.client-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--color);
border-radius: 8px 0 0 8px;
}
/* Card header */
.card-header { padding: 14px 14px 12px 18px; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card-identity { display: flex; align-items: center; gap: 10px; }
.c-avatar { width: 34px; height: 34px; border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #111; flex-shrink: 0; }
.c-name { font-size: 13px; font-weight: 700; color: #e8e8e6; margin-bottom: 2px; }
.c-sub { font-size: 10px; color: #555; }
.card-value { text-align: right; }
.value-num { font-size: 15px; font-weight: 700; color: #4ade80; }
.value-lbl { font-size: 9px; color: #444; text-transform: uppercase; letter-spacing: .05em; }
/* Status tag */
.tag { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; }
.tag-active { background: #0a2419; color: #4ade80; }
.tag-standby { background: #1e1e2a; color: #818cf8; }
.tag-cancelled { background: #242424; color: #555; border: 1px solid #333; }
/* Sócios row (client-level) */
.socios-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.socios-label { font-size: 9px; color: #444; text-transform: uppercase; letter-spacing: .06em; }
.avatars { display: flex; }
.sm-avatar { width: 20px; height: 20px; border-radius: 50%; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #111; border: 2px solid #1f1f1f; margin-right: -5px; flex-shrink: 0; }
.sm-avatar-name { font-size: 10px; color: #666; margin-left: 10px; }
/* Divider */
.card-divider { border: none; border-top: 1px solid #252525; }
/* Projects list */
.projects-list { padding: 0 14px 6px 18px; }
.proj-list-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #444; padding: 9px 0 6px; }
.proj-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #242424; cursor: pointer; }
.proj-row:last-of-type { border-bottom: none; }
.proj-row:hover { opacity: .8; }
.proj-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--color); }
.proj-name { flex: 1; font-size: 11px; color: #ccc; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* mini status */
.ms { font-size: 9px; font-weight: 600; padding: 2px 6px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.ms-active { background: #0c2a45; color: #60a5fa; }
.ms-waiting { background: #302206; color: #fbbf24; }
.ms-late-me { background: #2e0a0a; color: #f87171; }
.ms-late-them { background: #2c1a00; color: #f59e0b; }
.ms-paused { background: #242424; color: #555; border: 1px solid #333; }
.ms-review { background: #0a2419; color: #4ade80; }
.ms-planning { background: #22154d; color: #c084fc; }
/* mini progress */
.mini-prog { width: 44px; height: 3px; background: #2a2a2a; border-radius: 2px; flex-shrink: 0; }
.mini-prog-fill { height: 100%; border-radius: 2px; background: #4ade80; }
.mini-pct { font-size: 9px; color: #444; width: 22px; text-align: right; flex-shrink: 0; }
/* project-level sócio avatar */
.proj-socio { flex-shrink: 0; }
/* add project link */
.proj-add { font-size: 10px; color: #333; padding: 8px 0 4px; cursor: pointer; display: block; }
.proj-add:hover { color: #666; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === daily.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 860px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 2px; }
.page-date { font-size: 13px; color: #fbbf24; margin-bottom: 24px; font-weight: 500; }
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: space-between; }
.badge { font-size: 9px; font-weight: 400; background: #2a2a2a; padding: 1px 6px; border-radius: 8px; color: #555; }
/* Humor */
.mood-row { display: flex; gap: 8px; margin-bottom: 20px; }
.mood-btn { flex: 1; background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 8px 4px; text-align: center; cursor: pointer; transition: all .1s; }
.mood-btn:hover { border-color: #555; }
.mood-btn.sel { border-color: #fbbf24; background: #2a2410; }
.mood-emoji { font-size: 16px; display: block; margin-bottom: 3px; }
.mood-label { font-size: 9px; color: #555; }
.mood-btn.sel .mood-label { color: #fbbf24; }
/* Intenção */
.intention-box { background: #242424; border: 1px solid #2f2f2f; border-left: 3px solid #fbbf24; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; }
.intention-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #fbbf24; margin-bottom: 6px; font-weight: 600; }
.intention-text { font-size: 13px; color: #ccc; font-style: italic; }
/* Prioridades */
.priorities-box { background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; }
.check-item { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid #2a2a2a; font-size: 12px; color: #ccc; }
.check-item:last-of-type { border-bottom: none; }
.box { width: 14px; height: 14px; border: 1.5px solid #444; border-radius: 3px; flex-shrink: 0; }
.box.done { background: #4ade80; border-color: #4ade80; }
.check-text.done { text-decoration: line-through; color: #555; }
.priority-num { width: 18px; height: 18px; border-radius: 50%; background: #2f2f2f; color: #666; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Progresso */
.progress-box { background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; }
.progress-numbers { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.progress-main { font-size: 22px; font-weight: 700; color: #fbbf24; }
.progress-sub { font-size: 11px; color: #555; }
.progress-bar { height: 6px; background: #2f2f2f; border-radius: 3px; }
.progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #fbbf24, #f59e0b); width: 65%; }
/* Manhã + Noite */
.ritual-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.ritual-col { background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; overflow: hidden; }
.ritual-col.manha { border-top: 3px solid #fbbf24; }
.ritual-col.noite { border-top: 3px solid #818cf8; }
.ritual-header { padding: 10px 14px; border-bottom: 1px solid #2a2a2a; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.ritual-col.manha .ritual-header { color: #fbbf24; }
.ritual-col.noite .ritual-header { color: #818cf8; }
.ritual-body { padding: 6px 14px 10px; }
.ritual-item { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid #2a2a2a; font-size: 12px; color: #ccc; }
.ritual-item:last-of-type { border-bottom: none; }
/* Hábitos */
.habitos-box { background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; }
.habitos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.habito-item { background: #1f1f1f; border: 1px solid #2f2f2f; border-radius: 6px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.habito-item.done { border-color: #1a3a1a; background: #1a2a1a; }
.habito-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #444; flex-shrink: 0; }
.habito-item.done .habito-dot { background: #4ade80; border-color: #4ade80; }
.habito-name { font-size: 11px; color: #888; flex: 1; }
.habito-item.done .habito-name { color: #4ade80; }
.habito-streak { font-size: 10px; color: #555; }
.habito-item.done .habito-streak { color: #2a5a2a; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === estudos.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #111; color: #e8e8e6; font-size: 13px; padding: 32px; max-width: 760px; }
h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.sub { font-size: 12px; color: #555; margin-bottom: 24px; }
.sec-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; align-items: center; }
.section { margin-bottom: 28px; }
.tag { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.tag-green { background: #0a2419; color: #4ade80; }
.tag-yellow { background: #2a1f00; color: #fbbf24; }
.tag-purple { background: #1e1040; color: #818cf8; }
.tag-gray { background: #2a2a2a; color: #666; }
.tag-blue { background: #0f2e4a; color: #60a5fa; }
/* Stats header — from B */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.stat-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px 14px; text-align: center; }
.stat-val { font-size: 22px; font-weight: 700; margin-bottom: 3px; }
.stat-lbl { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: .05em; }
/* Active cards — from A */
.course-card { background: #161616; border: 1px solid #2a2a2a; border-left: 3px solid; border-radius: 6px; padding: 10px 13px; margin-bottom: 8px; }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 9px; }
.card-name { font-size: 12px; font-weight: 600; color: #ddd; }
.card-sub { font-size: 9px; color: #555; margin-top: 2px; }
.card-bar-wrap { height: 3px; background: #222; border-radius: 2px; margin-bottom: 4px; }
.card-bar-fill { height: 100%; border-radius: 2px; }
.card-bar-lbl { font-size: 9px; color: #444; }
/* By-area table — columns from B, progress as bar */
.area-section { margin-bottom: 16px; }
.area-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #222; }
.tbl-head { display: grid; grid-template-columns: 1fr 65px 70px 65px; gap: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3a3a3a; padding-bottom: 5px; margin-bottom: 2px; border-bottom: 1px solid #222; }
.tbl-head .c { text-align: center; }
.tbl-row { display: grid; grid-template-columns: 1fr 65px 70px 65px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #1a1a1a; }
.tbl-row:last-child { border-bottom: none; }
.tbl-name { font-size: 11px; color: #aaa; }
.tbl-cell { display: flex; justify-content: center; align-items: center; }
/* Area summary cards */
.areas-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.area-card { background: #161616; border: 1px solid #2a2a2a; border-left: 3px solid; border-radius: 6px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; min-width: 140px; }
.area-card-name { font-size: 10px; color: #888; flex: 1; }
.area-card-count { font-size: 16px; font-weight: 700; color: #818cf8; }
.area-card-add { font-size: 18px; color: #2a2a2a; cursor: pointer; border: 1px dashed #2a2a2a; border-radius: 6px; padding: 8px 16px; display: flex; align-items: center; justify-content: center; }
.area-card-add:hover { border-color: #444; color: #555; }
/* Delicate progress bar in table */
.prog-bar-wrap { width: 50px; height: 3px; background: #222; border-radius: 2px; }
.prog-bar-fill { height: 100%; border-radius: 2px; }
/* === ferramentas.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 860px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
.action-row { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
.action-btn { display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #2f2f2f; background: #242424; color: #9b9b9b; }
.action-btn.primary { background: #5a73e8; border-color: #5a73e8; color: white; }
/* Stats */
.stats-row { display: flex; gap: 12px; margin-bottom: 28px; }
.stat { flex: 1; background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; }
.stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat.total { border-top: 3px solid #5a73e8; }
.stat.mes { border-top: 3px solid #fb923c; background: #1e1408; }
.stat.ano { border-top: 3px solid #fbbf24; background: #1e1a08; }
/* Column header — sticky above all sections */
.col-header {
display: grid;
grid-template-columns: 26px 1fr 80px 44px 70px 75px;
gap: 10px;
padding: 0 0 8px;
border-bottom: 1px solid #2f2f2f;
margin-bottom: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: #444;
position: sticky; top: 49px; background: #191919; z-index: 5;
}
.col-header .r { text-align: right; }
/* Section */
.section { margin-bottom: 4px; }
.sec-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: #555;
padding: 12px 0 6px;
display: flex; align-items: center; gap: 8px;
}
.badge { font-size: 9px; background: #2a2a2a; padding: 1px 6px; border-radius: 8px; color: #555; font-weight: 400; }
/* Tool row */
.tool-row {
display: grid;
grid-template-columns: 26px 1fr 80px 44px 70px 75px;
gap: 10px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #1e1e1e;
cursor: pointer;
}
.tool-row:last-child { border-bottom: none; }
.tool-row:hover { opacity: .8; }
.t-icon { width: 22px; height: 22px; border-radius: 5px; font-size: 12px; display: flex; align-items: center; justify-content: center; background: #2a2a2a; flex-shrink: 0; }
.t-name { font-size: 12px; color: #ccc; }
.t-sub { font-size: 10px; color: #555; margin-top: 1px; }
.tag { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 500; }
.tag-ia { background: #22154d; color: #c084fc; }
.tag-dev { background: #0f2e4a; color: #60a5fa; }
.tag-design { background: #3a1028; color: #f472b6; }
.tag-prod { background: #0a2419; color: #4ade80; }
.tag-neg { background: #2a1500; color: #fb923c; }
.t-val { font-size: 11px; text-align: right; }
.t-val.orange { color: #fb923c; }
.t-val.yellow { color: #fbbf24; }
.t-val.green { color: #4ade80; }
.t-val.muted { color: #444; }
.t-check { font-size: 13px; text-align: center; line-height: 1; }
.t-check.yes { color: #4ade80; }
.t-check.no { color: #2a2a2a; }
/* Section total row */
.sec-total {
display: grid;
grid-template-columns: 26px 1fr 80px 44px 70px 75px;
gap: 10px;
align-items: center;
padding: 6px 0 10px;
font-size: 10px; color: #444;
border-top: 1px solid #2a2a2a;
}
.sec-total .r { text-align: right; font-size: 12px; font-weight: 700; color: #e8e8e6; }
/* Grand total */
.grand-total {
display: flex; justify-content: space-between; align-items: baseline;
padding: 14px 0 0;
border-top: 1px solid #2f2f2f;
margin-top: 8px;
}
.grand-total-label { font-size: 12px; color: #666; }
.grand-total-vals { display: flex; gap: 24px; align-items: baseline; }
.grand-total-val { text-align: right; }
.grand-total-num { font-size: 18px; font-weight: 700; }
.grand-total-sub { font-size: 9px; color: #444; text-transform: uppercase; letter-spacing: .05em; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === financeiro-pj.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.toolbar-btn.active { color: #e8e8e6; border-color: #444; }
.page-content { max-width: 900px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
/* ── Stats ── */
.balances { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.bal { background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 14px 16px; }
.bal-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.bal-value { font-size: 22px; font-weight: 700; }
.bal.faturamento { border-top: 3px solid #34d399; }
.bal.despesas { border-top: 3px solid #f87171; background: #1e1010; }
.bal.impostos { border-top: 3px solid #fbbf24; background: #1e1a00; }
.bal.cartao { border-top: 3px solid #818cf8; background: #1a1040; }
/* ── Alerta DAS ── */
.alert-banner { background: #1e1a00; border: 1px solid #3a2f00; border-left: 3px solid #fbbf24; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.alert-icon { font-size: 16px; flex-shrink: 0; }
.alert-text { font-size: 12px; color: #d4a500; flex: 1; }
.alert-btn { font-size: 10px; padding: 3px 10px; border: 1px solid #6a5200; border-radius: 4px; color: #fbbf24; cursor: pointer; white-space: nowrap; }
/* ── Cartão PJ dashboard ── */
.cartao-card { background: #1a1040; border: 1px solid #3d2fa0; border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 24px; }
.cartao-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6654c0; margin-bottom: 6px; }
.cartao-card-val { font-size: 24px; font-weight: 700; color: #c4b5fd; }
.cartao-card-sub { font-size: 10px; color: #6654c0; margin-top: 2px; }
.cartao-limit-wrap { flex: 1; }
.cartao-limit-label { font-size: 10px; color: #6654c0; margin-bottom: 5px; display: flex; justify-content: space-between; }
.cartao-limit-bar { height: 5px; background: #2d2060; border-radius: 3px; }
.cartao-limit-fill { height: 100%; border-radius: 3px; background: #818cf8; }
.cartao-card-right { text-align: right; flex-shrink: 0; }
.cartao-close-label { font-size: 10px; color: #6654c0; margin-bottom: 2px; }
.cartao-close-val { font-size: 13px; font-weight: 600; color: #a78bfa; }
/* ── Categories ── */
.sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; }
.sec-divider { font-size: 10px; color: #2f2f2f; font-weight: 400; text-transform: none; letter-spacing: 0; }
.cat-col-head { display: flex; align-items: center; gap: 10px; padding: 0 12px 6px; margin-bottom: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #3a3a3a; }
.cat-col-head-name { flex: 1; }
.cat-col-head-bar { flex: 1; max-width: 160px; text-align: center; }
.cat-col-head-pct { min-width: 32px; text-align: right; }
.cat-col-head-gasto{ min-width: 70px; text-align: right; }
.cat-col-head-meta { min-width: 70px; text-align: right; }
.cat-row { margin-bottom: 2px; }
.cat-header { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #1f1f1f; border: 1px solid #252525; border-radius: 6px; cursor: pointer; }
.cat-header:hover { border-color: #333; }
.cat-header.open { border-radius: 6px 6px 0 0; border-bottom-color: transparent; }
.cat-arrow { font-size: 10px; color: #444; flex-shrink: 0; transition: transform .15s; }
.cat-header.open .cat-arrow { transform: rotate(90deg); color: #666; }
.cat-name { flex: 1; font-size: 12px; color: #ccc; display: flex; align-items: center; gap: 7px; }
.cat-bar-wrap { flex: 1; max-width: 160px; }
.cat-bar { height: 4px; background: #2a2a2a; border-radius: 2px; }
.cat-bar-fill { height: 100%; border-radius: 2px; }
.cat-pct { font-size: 10px; white-space: nowrap; flex-shrink: 0; min-width: 32px; text-align: right; }
.cat-val { font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; min-width: 70px; text-align: right; }
.cat-meta { font-size: 11px; color: #3a3a3a; white-space: nowrap; flex-shrink: 0; min-width: 70px; text-align: right; }
.cat-items { background: #1a1a1a; border: 1px solid #252525; border-top: none; border-radius: 0 0 6px 6px; padding: 4px 0; margin-bottom: 6px; }
.cat-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 6px 36px; font-size: 11px; border-bottom: 1px solid #1e1e1e; }
.cat-item:last-child { border-bottom: none; }
.cat-item-name { color: #888; }
.cat-item-val { color: #666; font-weight: 500; }
.cat-items.hidden { display: none; }
/* ── Extrato split ── */
.extrato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.extrato-col-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 7px; border-bottom: 1px solid #2a2a2a; margin-bottom: 6px; }
.ext-head-left { display: grid; grid-template-columns: 40px 1fr 52px 48px 60px; gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3a3a3a; padding-bottom: 6px; border-bottom: 1px solid #2a2a2a; margin-bottom: 2px; }
.tx-left { display: grid; grid-template-columns: 40px 1fr 52px 48px 60px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid #1e1e1e; }
.ext-head-right { display: grid; grid-template-columns: 40px 1fr 52px 60px; gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3a3a3a; padding-bottom: 6px; border-bottom: 1px solid #2a2a2a; margin-bottom: 2px; }
.tx-right { display: grid; grid-template-columns: 40px 1fr 52px 60px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid #1e1e1e; }
.tx-left:last-child, .tx-right:last-child { border-bottom: none; }
.tx-date { font-size: 10px; color: #555; }
.tx-name { font-size: 11px; color: #ccc; }
.tx-cell { display: flex; justify-content: center; }
.ext-r { text-align: right; }
.tx-val { font-size: 11px; font-weight: 700; text-align: right; }
.tx-val.in { color: #4ade80; }
.tx-val.out { color: #f87171; }
.tag { padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 500; white-space: nowrap; }
.tag-green { background: #0a2419; color: #4ade80; }
.tag-yellow { background: #2a1f00; color: #fbbf24; }
.tag-pix { background: #0f2e4a; color: #60a5fa; }
.tag-dinheiro { background: #0a2419; color: #4ade80; }
.tag-cartao { background: #1e1040; color: #818cf8; }
.tag-inter-pj { background: #2a1500; color: #fb923c; }
.tag-nubank-pj{ background: #2a0a40; color: #c084fc; }
.extrato-footer { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 0; border-top: 1px solid #2f2f2f; margin-top: 4px; }
.extrato-footer-label { font-size: 11px; color: #555; }
.extrato-footer-val { font-size: 16px; font-weight: 700; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === financeiro.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.toolbar-btn.active { color: #e8e8e6; border-color: #444; }
.page-content { max-width: 900px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
/* ── Stats ── */
.balances { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.bal { background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 14px 16px; }
.bal-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.bal-value { font-size: 22px; font-weight: 700; }
.bal.saldo { border-top: 3px solid #4ade80; background: #111e18; }
.bal.receitas { border-top: 3px solid #34d399; }
.bal.despesas { border-top: 3px solid #f87171; background: #1e1010; }
.bal.cartao { border-top: 3px solid #818cf8; background: #1a1040; }
/* ── Cartão dashboard ── */
.cartao-card { background: #1a1040; border: 1px solid #3d2fa0; border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 24px; }
.cartao-card-left { }
.cartao-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6654c0; margin-bottom: 6px; }
.cartao-card-val { font-size: 24px; font-weight: 700; color: #c4b5fd; }
.cartao-card-sub { font-size: 10px; color: #6654c0; margin-top: 2px; }
.cartao-limit-wrap { flex: 1; }
.cartao-limit-label { font-size: 10px; color: #6654c0; margin-bottom: 5px; display: flex; justify-content: space-between; }
.cartao-limit-bar { height: 5px; background: #2d2060; border-radius: 3px; }
.cartao-limit-fill { height: 100%; border-radius: 3px; background: #818cf8; }
.cartao-card-right { text-align: right; flex-shrink: 0; }
.cartao-close-label { font-size: 10px; color: #6654c0; margin-bottom: 2px; }
.cartao-close-val { font-size: 13px; font-weight: 600; color: #a78bfa; }
/* ── Categories ── */
.sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; }
.sec-divider { font-size: 10px; color: #2f2f2f; font-weight: 400; text-transform: none; letter-spacing: 0; }
/* column headers for categories */
.cat-col-head { display: flex; align-items: center; gap: 10px; padding: 0 12px 6px; margin-bottom: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #3a3a3a; }
.cat-col-head-name { flex: 1; }
.cat-col-head-bar { flex: 1; max-width: 160px; text-align: center; }
.cat-col-head-pct { min-width: 32px; text-align: right; }
.cat-col-head-gasto{ min-width: 70px; text-align: right; }
.cat-col-head-meta { min-width: 70px; text-align: right; }
.cat-row { margin-bottom: 2px; }
.cat-header { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #1f1f1f; border: 1px solid #252525; border-radius: 6px; cursor: pointer; }
.cat-header:hover { border-color: #333; }
.cat-header.open { border-radius: 6px 6px 0 0; border-bottom-color: transparent; }
.cat-arrow { font-size: 10px; color: #444; flex-shrink: 0; transition: transform .15s; }
.cat-header.open .cat-arrow { transform: rotate(90deg); color: #666; }
.cat-name { flex: 1; font-size: 12px; color: #ccc; display: flex; align-items: center; gap: 7px; }
.cat-bar-wrap { flex: 1; max-width: 160px; }
.cat-bar { height: 4px; background: #2a2a2a; border-radius: 2px; }
.cat-bar-fill { height: 100%; border-radius: 2px; }
.cat-pct { font-size: 10px; white-space: nowrap; flex-shrink: 0; min-width: 32px; text-align: right; }
.cat-val { font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; min-width: 70px; text-align: right; }
.cat-meta { font-size: 11px; color: #3a3a3a; white-space: nowrap; flex-shrink: 0; min-width: 70px; text-align: right; }
.cat-items { background: #1a1a1a; border: 1px solid #252525; border-top: none; border-radius: 0 0 6px 6px; padding: 4px 0; margin-bottom: 6px; }
.cat-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 6px 36px; font-size: 11px; border-bottom: 1px solid #1e1e1e; }
.cat-item:last-child { border-bottom: none; }
.cat-item-name { color: #888; }
.cat-item-val { color: #666; font-weight: 500; }
.cat-items.hidden { display: none; }
/* ── Extrato split ── */
.extrato-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.extrato-col-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 7px; border-bottom: 1px solid #2a2a2a; margin-bottom: 6px; }
/* left: receitas & despesas — 5 cols */
.ext-head-left { display: grid; grid-template-columns: 40px 1fr 52px 48px 60px; gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3a3a3a; padding-bottom: 6px; border-bottom: 1px solid #2a2a2a; margin-bottom: 2px; }
.tx-left { display: grid; grid-template-columns: 40px 1fr 52px 48px 60px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid #1e1e1e; }
/* right: cartão — 4 cols */
.ext-head-right { display: grid; grid-template-columns: 40px 1fr 52px 60px; gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3a3a3a; padding-bottom: 6px; border-bottom: 1px solid #2a2a2a; margin-bottom: 2px; }
.tx-right { display: grid; grid-template-columns: 40px 1fr 52px 60px; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid #1e1e1e; }
.tx-left:last-child, .tx-right:last-child { border-bottom: none; }
.tx-date { font-size: 10px; color: #555; }
.tx-name { font-size: 11px; color: #ccc; }
.tx-cell { display: flex; justify-content: center; }
.ext-r { text-align: right; }
.tx-val { font-size: 11px; font-weight: 700; text-align: right; }
.tx-val.in { color: #4ade80; }
.tx-val.out { color: #f87171; }
/* tags */
.tag { padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 500; white-space: nowrap; }
.tag-green { background: #0a2419; color: #4ade80; }
.tag-blue { background: #0f2e4a; color: #60a5fa; }
.tag-yellow { background: #2a1f00; color: #fbbf24; }
.tag-purple { background: #2d1b69; color: #c084fc; }
.tag-gray { background: #242424; color: #666; }
.tag-orange { background: #2a1500; color: #fb923c; }
.tag-pix { background: #0f2e4a; color: #60a5fa; }
.tag-dinheiro { background: #0a2419; color: #4ade80; }
.tag-cartao { background: #1e1040; color: #818cf8; }
.tag-nubank { background: #2a0a40; color: #c084fc; }
.tag-inter { background: #2a1500; color: #fb923c; }
.extrato-footer { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0 0; border-top: 1px solid #2f2f2f; margin-top: 4px; }
.extrato-footer-label { font-size: 11px; color: #555; }
.extrato-footer-val { font-size: 16px; font-weight: 700; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === habitos.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 860px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
.action-row { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
.action-btn { display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #2f2f2f; background: #242424; color: #9b9b9b; }
.action-btn.primary { background: #5a73e8; border-color: #5a73e8; color: white; }
/* Stats */
.stats-row { display: flex; gap: 12px; margin-bottom: 28px; }
.stat { flex: 1; background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; }
.stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat.hoje { border-top: 3px solid #4ade80; background: #111e18; }
.stat.streak { border-top: 3px solid #fbbf24; background: #1e1a08; }
.stat.mes { border-top: 3px solid #5a73e8; }
/* Date banner */
.date-banner { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #4ade80; margin-bottom: 20px; }
/* Column header */
.col-header {
display: grid;
grid-template-columns: 20px 20px 1fr 70px 148px 70px 55px;
gap: 10px;
padding: 0 0 8px;
border-bottom: 1px solid #2f2f2f;
margin-bottom: 6px;
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: #444;
}
.col-header .r { text-align: right; }
/* Category section */
.cat-section { margin-bottom: 6px; }
.cat-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: #555;
padding: 12px 0 6px;
display: flex; align-items: center; gap: 8px;
}
.badge { font-size: 9px; background: #2a2a2a; padding: 1px 6px; border-radius: 8px; color: #555; font-weight: 400; }
/* Habit row */
.habit-row {
display: grid;
grid-template-columns: 20px 20px 1fr 70px 148px 70px 55px;
gap: 10px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #1e1e1e;
cursor: pointer;
}
.habit-row:last-child { border-bottom: none; }
.habit-row:hover { opacity: .8; }
/* Checkbox */
.h-box { width: 16px; height: 16px; border: 1.5px solid #3a3a3a; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.h-box.done { background: #4ade80; border-color: #4ade80; color: #111; font-size: 10px; font-weight: 900; }
/* Emoji */
.h-emoji { font-size: 15px; }
/* Name */
.h-name { font-size: 12px; color: #ccc; }
.h-name.done { text-decoration: line-through; color: #444; }
/* Mini calendar — last 7 days */
.h-cal { display: flex; gap: 3px; align-items: center; padding-left: 16px; }
.cal-day { width: 11px; height: 11px; border-radius: 2px; }
.cal-day.ok { background: #166534; }
.cal-day.miss { background: #2a2a2a; }
.cal-day.empty { background: #1e1e1e; border: 1px dashed #2a2a2a; }
.cal-day.today { background: #4ade80; box-shadow: 0 0 0 2px #86efac44; }
/* Streak */
.h-streak { font-size: 11px; font-weight: 600; color: #fbbf24; text-align: right; }
.h-streak.zero { color: #444; font-weight: 400; }
/* Month % */
.h-pct { font-size: 12px; font-weight: 700; text-align: right; }
.pct-hi { color: #4ade80; }
.pct-mid { color: #fbbf24; }
.pct-lo { color: #f87171; }
.imp { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.imp-alta { background: #0a2419; color: #4ade80; }
.imp-media { background: #2a1f00; color: #fbbf24; }
.imp-baixa { background: #0f2e4a; color: #60a5fa; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === index.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
/* Sidebar */
.sidebar {
width: 220px;
background: #1f1f1f;
border-right: 1px solid #2f2f2f;
flex-shrink: 0;
display: flex;
flex-direction: column;
padding: 8px 0;
}
.sidebar-workspace {
display: flex; align-items: center; gap: 8px;
padding: 6px 12px 10px;
font-weight: 600; font-size: 13px;
color: #e8e8e6;
}
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px; flex-shrink:0; }
.sidebar-item {
display: flex; align-items: center; gap: 7px;
padding: 4px 12px;
color: #9b9b9b;
font-size: 13px;
cursor: pointer;
border-radius: 4px;
margin: 0 4px;
}
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active .si-icon { opacity: 1; }
.si-icon { width: 16px; text-align: center; font-size: 13px; opacity: 0.6; }
.sidebar-section {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px;
}
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
/* Main content */
.main {
flex: 1;
overflow-y: auto;
background: #191919;
}
/* Page toolbar */
.page-toolbar {
display: flex; align-items: center; justify-content: flex-end;
padding: 8px 20px;
border-bottom: 1px solid #2a2a2a;
gap: 10px;
position: sticky; top: 0; background: #191919; z-index: 10;
}
.toolbar-btn {
font-size: 11px; color: #666; padding: 3px 8px;
border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer;
background: #242424;
}
.toolbar-btn:hover { background: #2f2f2f; color: #9b9b9b; }
/* Page content */
.page-content { max-width: 900px; margin: 0 auto; padding: 48px 60px 80px; }
.page-icon { font-size: 48px; margin-bottom: 8px; }
.page-title { font-size: 32px; font-weight: 700; margin-bottom: 6px; color: #e8e8e6; }
.page-meta { font-size: 12px; color: #555; margin-bottom: 32px; }
/* Stats row */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 28px;
}
.stat-card {
background: #242424;
border: 1px solid #2f2f2f;
border-radius: 8px;
padding: 12px 14px;
}
.stat-card-num { font-size: 22px; font-weight: 700; }
.stat-card-label { font-size: 11px; color: #666; margin-top: 2px; }
.stat-card.blue .stat-card-num { color: #60a5fa; }
.stat-card.green .stat-card-num { color: #4ade80; }
.stat-card.orange .stat-card-num { color: #fb923c; }
.stat-card.purple .stat-card-num { color: #c084fc; }
/* Two-col layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
/* Section */
.section { margin-bottom: 24px; }
.section-header {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: #555;
margin-bottom: 10px;
display: flex; align-items: center; gap: 6px;
}
.section-header span { font-size: 12px; }
/* Calendar events */
.cal-event {
display: grid; grid-template-columns: 42px 1fr;
gap: 8px; align-items: start; margin-bottom: 6px;
}
.cal-time { font-size: 11px; color: #666; text-align: right; padding-top: 3px; }
.cal-pill {
background: #242424; border-left: 2px solid #5a73e8;
padding: 4px 10px; border-radius: 0 6px 6px 0;
font-size: 12px;
}
/* Task rows */
.task-row {
display: flex; align-items: center; gap: 8px;
padding: 4px 0;
border-bottom: 1px solid #242424;
}
.task-row:last-child { border-bottom: none; }
.checkbox {
width: 14px; height: 14px;
border: 1.5px solid #444; border-radius: 3px;
flex-shrink: 0;
}
.checkbox.done { background: #4ade80; border-color: #4ade80; }
.task-text.done { text-decoration: line-through; color: #555; }
.task-tag {
margin-left: auto; padding: 1px 7px;
border-radius: 4px; font-size: 10px; font-weight: 500;
flex-shrink: 0;
}
.tag-blue { background: #1e3a5f; color: #60a5fa; }
.tag-green { background: #14532d; color: #4ade80; }
.tag-orange { background: #431407; color: #fb923c; }
.tag-gray { background: #2f2f2f; color: #9b9b9b; }
.tag-purple { background: #3b0764; color: #c084fc; }
/* Project blocks */
.project-block {
background: #242424; border: 1px solid #2f2f2f;
border-radius: 8px; padding: 10px 12px;
margin-bottom: 8px;
}
.project-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.project-name { font-weight: 500; flex: 1; font-size: 13px; }
.progress-track { height: 4px; background: #333; border-radius: 2px; }
.progress-fill { height: 100%; border-radius: 2px; }
.prog-green { background: #4ade80; }
.prog-blue { background: #60a5fa; }
.prog-orange { background: #fb923c; }
.prog-gray { background: #666; }
.project-meta { font-size: 10px; color: #555; margin-top: 4px; }
/* Financial */
.fin-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #242424; }
.fin-row:last-child { border-bottom: none; }
.fin-label { color: #9b9b9b; font-size: 12px; }
.fin-value { font-weight: 600; font-size: 13px; }
.fin-pos { color: #4ade80; }
.fin-neg { color: #fb923c; }
.fin-balance { background: #242424; border-radius: 6px; padding: 8px 12px; margin-top: 8px; display:flex;justify-content:space-between;align-items:center; }
.fin-balance-label { font-size: 11px; color: #555; }
.fin-balance-val { font-size: 16px; font-weight: 700; color: #4ade80; }
/* Habits */
.habit-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #242424; }
.habit-row:last-child { border-bottom: none; }
.habit-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.habit-name { flex: 1; }
.habit-streak { display: flex; gap: 3px; }
.streak-day { width: 10px; height: 10px; border-radius: 2px; background: #2f2f2f; }
.streak-day.on { background: var(--hc, #4ade80); }
.habit-status { font-size: 10px; padding: 2px 8px; border-radius: 4px; }
/* Divider */
.divider { border: none; border-top: 1px solid #242424; margin: 20px 0; }
/* Capture */
.capture-bar {
border: 1.5px dashed #2f2f2f; border-radius: 6px;
padding: 8px 14px; color: #444; font-size: 12px;
display: flex; align-items: center; gap: 8px;
cursor: pointer; margin-top: 16px;
transition: all 0.1s;
}
.capture-bar:hover { border-color: #5a73e8; color: #666; }
/* Note about this being a preview */
.preview-note {
position: fixed; bottom: 14px; right: 16px;
background: #2f2f2f; border: 1px solid #3f3f3f;
border-radius: 6px; padding: 6px 12px;
font-size: 11px; color: #666;
}
/* === notas.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 960px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
/* Action row */
.action-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.action-btn { display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #2f2f2f; background: #242424; color: #9b9b9b; }
.action-btn:hover { background: #2f2f2f; color: #e8e8e6; }
.action-btn.primary { background: #5a73e8; border-color: #5a73e8; color: white; }
.search-bar { flex: 1; max-width: 280px; background: #242424; border: 1px solid #2f2f2f; border-radius: 6px; padding: 5px 12px; font-size: 12px; color: #555; display: flex; align-items: center; gap: 7px; }
/* Stats */
.stats-row { display: flex; gap: 12px; margin-bottom: 24px; }
.stat { flex: 1; background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; }
.stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat.purple { border-top: 3px solid #818cf8; background: #1e1e2a; }
.stat.green { border-top: 3px solid #86efac; background: #1a231a; }
.stat.yellow { border-top: 3px solid #fbbf24; background: #221e10; }
.stat.total { border-top: 3px solid #5a73e8; }
/* Columns */
.cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.col-box { border-radius: 8px; overflow: hidden; }
.col-box.ideias { background: #1e1e2a; border: 1px solid #3a3a5a; }
.col-box.observacoes { background: #1a231a; border: 1px solid #2a3f2a; }
.col-box.pesquisas { background: #221e10; border: 1px solid #3f3010; }
.col-header { padding: 12px 14px; border-bottom: 1px solid; display: flex; align-items: center; justify-content: space-between; }
.col-box.ideias .col-header { border-color: #3a3a5a; }
.col-box.observacoes .col-header { border-color: #2a3f2a; }
.col-box.pesquisas .col-header { border-color: #3f3010; }
.col-title { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.col-count { font-size: 10px; font-weight: 400; background: #2a2a3a; padding: 1px 7px; border-radius: 10px; color: #555; }
.col-sort { font-size: 10px; color: #444; cursor: pointer; }
.col-body { padding: 6px 0; }
.col-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; cursor: pointer; border-bottom: 1px solid; transition: background .1s; }
.col-box.ideias .col-item { border-color: #2a2a3a; }
.col-box.observacoes .col-item { border-color: #222e22; }
.col-box.pesquisas .col-item { border-color: #2e2810; }
.col-item:last-of-type { border-bottom: none; }
.col-box.ideias .col-item:hover { background: #26263a; }
.col-box.observacoes .col-item:hover { background: #1e2a1e; }
.col-box.pesquisas .col-item:hover { background: #2a2414; }
.item-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.dot-purple { background: #c084fc; }
.dot-green { background: #86efac; }
.dot-yellow { background: #fbbf24; }
.item-body { flex: 1; min-width: 0; }
.item-text { font-size: 12px; color: #ccc; line-height: 1.4; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-date { font-size: 10px; color: #444; }
.col-add { display: flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 11px; color: #3a3a50; cursor: pointer; }
.col-box.observacoes .col-add { color: #2a3a2a; }
.col-box.pesquisas .col-add { color: #3a3010; }
.col-add:hover { color: #666; }
.purple { color: #c084fc; }
.green { color: #86efac; }
.yellow { color: #fbbf24; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === projetos.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 920px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
.action-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.action-btn { display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #2f2f2f; background: #242424; color: #9b9b9b; }
.action-btn:hover { background: #2f2f2f; color: #e8e8e6; }
.action-btn.primary { background: #5a73e8; border-color: #5a73e8; color: white; }
/* Stats */
.stats-row { display: flex; gap: 12px; margin-bottom: 28px; }
.stat { flex: 1; background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; }
.stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat.total { border-top: 3px solid #5a73e8; }
.stat.clientes { border-top: 3px solid #60a5fa; background: #111e2e; }
.stat.pessoal { border-top: 3px solid #4ade80; background: #111e18; }
/* Two-column groups */
.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.group-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; padding-bottom: 8px;
border-bottom: 1px solid #2f2f2f;
}
.group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #666; display: flex; align-items: center; gap: 6px; }
.group-badge { font-size: 10px; background: #2a2a2a; padding: 1px 7px; border-radius: 10px; color: #555; font-weight: 400; }
.group-add { font-size: 11px; color: #444; cursor: pointer; }
.group-add:hover { color: #888; }
/* Project card */
.proj-card {
background: #1f1f1f;
border: 1px solid #2a2a2a;
border-radius: 7px;
padding: 12px 14px;
margin-bottom: 10px;
cursor: pointer;
transition: background .12s;
position: relative;
overflow: hidden;
}
.proj-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--client-color);
border-radius: 7px 0 0 7px;
}
.proj-card:hover { background: #242424; }
/* Top row: title + status */
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.card-title { font-size: 13px; font-weight: 600; color: #e8e8e6; line-height: 1.3; flex: 1; }
/* Status pill */
.status { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.s-active { background: #0c2a45; color: #60a5fa; }
.s-waiting { background: #302206; color: #fbbf24; }
.s-late-me { background: #2e0a0a; color: #f87171; }
.s-late-them { background: #2c1a00; color: #f59e0b; }
.s-paused { background: #242424; color: #666; border: 1px solid #333; }
.s-review { background: #0a2419; color: #4ade80; }
.s-planning { background: #22154d; color: #c084fc; }
/* Meta row: type tag + client tag */
.card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; }
.tag { padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 500; }
.tag-type-client { background: #1a2535; color: #60a5fa; border: 1px solid #1e3252; }
.tag-type-pessoal { background: #1a2620; color: #4ade80; border: 1px solid #1e3628; }
.tag-client-name { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px; background: var(--client-bg); color: var(--client-color); }
/* Next action */
.card-action { font-size: 11px; color: #4a4a4a; margin-bottom: 8px; line-height: 1.4; padding-left: 1px; }
/* Progress */
.card-progress-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-progress-bar { flex: 1; height: 3px; background: #2a2a2a; border-radius: 2px; }
.card-progress-fill { height: 100%; border-radius: 2px; background: #4ade80; }
.card-pct { font-size: 10px; color: #555; white-space: nowrap; min-width: 26px; text-align: right; }
/* Bottom: collaborators + date */
.card-bottom { display: flex; align-items: center; justify-content: space-between; }
.card-collabs { display: flex; align-items: center; gap: -4px; }
.avatar { width: 20px; height: 20px; border-radius: 50%; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #111; border: 2px solid #1f1f1f; margin-right: -6px; flex-shrink: 0; }
.card-date { font-size: 10px; color: #444; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === referencias.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 960px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
/* Action row */
.action-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.action-btn { display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #2f2f2f; background: #242424; color: #9b9b9b; }
.action-btn:hover { background: #2f2f2f; color: #e8e8e6; }
.action-btn.primary { background: #5a73e8; border-color: #5a73e8; color: white; }
.search-bar { flex: 1; max-width: 280px; background: #242424; border: 1px solid #2f2f2f; border-radius: 6px; padding: 5px 12px; font-size: 12px; color: #555; display: flex; align-items: center; gap: 7px; }
/* Stats */
.stats-row { display: flex; gap: 12px; margin-bottom: 24px; }
.stat { flex: 1; background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; }
.stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat.total { border-top: 3px solid #5a73e8; }
.stat.links { border-top: 3px solid #34d399; background: #1a2420; }
.stat.swipe { border-top: 3px solid #818cf8; background: #1e1e2a; }
/* Columns */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.col-box { border-radius: 8px; overflow: hidden; }
.col-box.links { background: #1a2420; border: 1px solid #2a3f35; }
.col-box.swipe { background: #1e1e2a; border: 1px solid #2d2d4a; }
.col-header { padding: 12px 14px; border-bottom: 1px solid; display: flex; align-items: center; justify-content: space-between; }
.col-box.links .col-header { border-color: #2a3f35; }
.col-box.swipe .col-header { border-color: #2d2d4a; }
.col-title { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.col-count { font-size: 10px; font-weight: 400; background: #2a2a3a; padding: 1px 7px; border-radius: 10px; color: #555; }
.col-sort { font-size: 10px; color: #444; cursor: pointer; }
.col-body { padding: 6px 0; }
.col-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; cursor: pointer; border-bottom: 1px solid; transition: background .1s; }
.col-box.links .col-item { border-color: #222e2a; }
.col-box.swipe .col-item { border-color: #26263a; }
.col-item:last-of-type { border-bottom: none; }
.col-box.links .col-item:hover { background: #1e2e2a; }
.col-box.swipe .col-item:hover { background: #242436; }
.item-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.dot-teal { background: #34d399; }
.dot-indigo { background: #818cf8; }
.item-body { flex: 1; min-width: 0; }
.item-text { font-size: 12px; color: #ccc; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-domain { font-size: 10px; color: #445; margin-top: 2px; }
.item-date { font-size: 10px; color: #444; white-space: nowrap; flex-shrink: 0; margin-top: 3px; }
.col-add { display: flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 11px; cursor: pointer; }
.col-box.links .col-add { color: #2a3f35; }
.col-box.swipe .col-add { color: #2d2d4a; }
.col-add:hover { color: #666; }
.teal { color: #34d399; }
.indigo { color: #818cf8; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* === saude.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #111; color: #e8e8e6; font-size: 13px; padding: 32px; max-width: 760px; }
h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.sub { font-size: 12px; color: #555; margin-bottom: 24px; }
.sec-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; align-items: center; }
.section { margin-bottom: 28px; }
/* Alert banner */
.alert-banner { background: #1e0808; border: 1px solid #5a1515; border-left: 3px solid #f87171; border-radius: 6px; padding: 10px 14px; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
.alert-text { font-size: 11px; color: #fca5a5; }
.alert-text strong { color: #f87171; }
.alert-links { margin-left: auto; display: flex; gap: 6px; }
.alert-pill { font-size: 9px; background: #3a1010; color: #f87171; padding: 2px 8px; border-radius: 10px; border: 1px solid #7f1d1d; white-space: nowrap; }
/* Registro de hoje */
.registro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.reg-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px; }
.reg-label { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.reg-val { font-size: 22px; font-weight: 700; line-height: 1; }
.reg-unit { font-size: 11px; color: #555; font-weight: 400; margin-left: 2px; }
.reg-sub { font-size: 9px; color: #444; margin-top: 4px; line-height: 1.4; }
.reg-btn { margin-top: 8px; background: #222; border-radius: 4px; padding: 4px 8px; font-size: 10px; color: #555; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.reg-btn:hover { background: #2a2a2a; color: #888; }
.reg-plus { color: #f472b6; font-weight: 700; font-size: 13px; }
/* Tags */
.tag { padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.tag-ok { background: #0a2419; color: #4ade80; }
.tag-pend { background: #2a1f00; color: #fbbf24; }
.tag-alert { background: #2e0a0a; color: #f87171; }
.tag-pink { background: #3a1028; color: #f472b6; }
/* Consultas — grid */
.cons-grid { display: grid; grid-template-columns: 14px 1fr 100px 90px 80px; gap: 0 10px; align-items: center; }
.cons-head { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #444; padding-bottom: 6px; border-bottom: 1px solid #2a2a2a; margin-bottom: 2px; }
.cons-head.center { text-align: center; }
.cons-row { display: contents; }
.cons-row > * { padding: 7px 0; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; }
.cons-row:last-child > * { border-bottom: none; }
.cons-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-alert { background: #f87171; }
.dot-pend { background: #191919; border: 2px solid #fbbf24; }
.dot-ok { background: #4ade80; }
.cons-name { font-size: 11px; color: #ccc; }
.cons-date { font-size: 10px; color: #555; justify-content: center; }
.cons-tag-wrap { justify-content: center; }
/* Suplementos — grid */
.med-grid { display: grid; grid-template-columns: 1fr 90px 110px; gap: 0 10px; align-items: center; }
.med-head { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #444; padding-bottom: 6px; border-bottom: 1px solid #2a2a2a; margin-bottom: 2px; }
.med-head.center { text-align: center; }
.med-row { display: contents; }
.med-row > * { padding: 7px 0; border-bottom: 1px solid #1e1e1e; display: flex; align-items: center; }
.med-row:last-child > * { border-bottom: none; }
.med-name { font-size: 11px; color: #aaa; }
.med-time { font-size: 10px; color: #666; background: #1f1f1f; padding: 2px 6px; border-radius: 4px; justify-content: center; }
.med-freq { font-size: 10px; color: #555; justify-content: center; }
/* Treino */
.treino-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.t-stat { background: #161616; border: 1px solid #2a2a2a; border-radius: 6px; padding: 10px 14px; text-align: center; }
.t-stat-val { font-size: 20px; font-weight: 700; margin-bottom: 3px; }
.t-stat-lbl { font-size: 9px; color: #555; }
/* === senhas.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #111; color: #e8e8e6; font-size: 13px; padding: 32px; max-width: 700px; }
h1 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.sub { font-size: 12px; color: #555; margin-bottom: 24px; }
.sec-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid #2a2a2a; display: flex; justify-content: space-between; align-items: center; }
.section { margin-bottom: 28px; }
.tag { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.tag-green { background: #0a2419; color: #4ade80; }
.tag-yellow { background: #2a1f00; color: #fbbf24; }
.tag-red { background: #2e0a0a; color: #f87171; }
/* Stats — from C */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 28px; }
.stat-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 8px; padding: 12px 14px; text-align: center; }
.stat-val { font-size: 22px; font-weight: 700; margin-bottom: 3px; }
.stat-lbl { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: .05em; }
/* Category group — from A */
.cat-section { margin-bottom: 20px; }
.cat-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #555; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #222; }
/* Table */
.tbl-head { display: grid; grid-template-columns: 28px 1fr 120px 80px 58px; gap: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #3a3a3a; padding-bottom: 5px; border-bottom: 1px solid #222; margin-bottom: 2px; }
.tbl-head .c { text-align: center; }
.tbl-row { display: grid; grid-template-columns: 28px 1fr 120px 80px 58px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid #1a1a1a; }
.tbl-row:last-child { border-bottom: none; }
.svc-icon { width: 18px; height: 18px; border-radius: 4px; object-fit: contain; }
.svc-icon-fallback { width: 18px; height: 18px; border-radius: 4px; background: #2a2a2a; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #555; }
.svc-name { font-size: 11px; color: #ccc; }
.svc-login { font-size: 10px; color: #555; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-pw { font-family: monospace; font-size: 11px; color: #2a2a2a; letter-spacing: 2px; text-align: center; }
.tbl-cell { display: flex; justify-content: center; align-items: center; }
/* === team.html === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #191919; color: #e8e8e6; font-size: 13px; height: 100vh; overflow: hidden; }
.app { display: flex; height: 100vh; }
.sidebar { width: 220px; background: #1f1f1f; border-right: 1px solid #2f2f2f; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
.sidebar-workspace { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; font-weight: 600; font-size: 13px; }
.workspace-icon { width: 20px; height: 20px; background: #5a73e8; border-radius: 4px; display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0; }
.sidebar-item { display: flex; align-items: center; gap: 7px; padding: 4px 12px; color: #9b9b9b; font-size: 13px; cursor: pointer; border-radius: 4px; margin: 0 4px; }
.sidebar-item:hover { background: #2f2f2f; color: #e8e8e6; }
.sidebar-item.active { background: #2f2f2f; color: #e8e8e6; }
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #555; padding: 12px 12px 4px; }
.sidebar-divider { border: none; border-top: 1px solid #2f2f2f; margin: 6px 0; }
.main { flex: 1; overflow-y: auto; background: #191919; }
.page-toolbar { display: flex; align-items: center; justify-content: flex-end; padding: 8px 20px; border-bottom: 1px solid #2a2a2a; gap: 10px; position: sticky; top: 0; background: #191919; z-index: 10; }
.toolbar-btn { font-size: 11px; color: #666; padding: 3px 8px; border: 1px solid #2f2f2f; border-radius: 4px; cursor: pointer; background: #242424; }
.page-content { max-width: 860px; margin: 0 auto; padding: 40px 60px 80px; }
.page-icon { font-size: 40px; margin-bottom: 8px; }
.page-title { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
.page-subtitle { font-size: 13px; color: #555; margin-bottom: 24px; }
.action-row { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; }
.action-btn { display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #2f2f2f; background: #242424; color: #9b9b9b; }
.action-btn.primary { background: #5a73e8; border-color: #5a73e8; color: white; }
/* Stats */
.stats-row { display: flex; gap: 12px; margin-bottom: 28px; }
.stat { flex: 1; background: #242424; border: 1px solid #2f2f2f; border-radius: 8px; padding: 12px 16px; }
.stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat.total { border-top: 3px solid #5a73e8; }
.stat.ativos { border-top: 3px solid #4ade80; background: #111e18; }
.stat.pago-mes { border-top: 3px solid #f472b6; background: #1e0f18; }
.stat.pago-total { border-top: 3px solid #e879f9; background: #220f22; }
/* List */
.list-header {
display: grid;
grid-template-columns: 1fr 130px 90px 55px 75px 75px;
gap: 12px;
padding: 0 0 8px;
border-bottom: 1px solid #2a2a2a;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: #444;
}
.list-header .col-right { text-align: right; }
.member-row {
display: grid;
grid-template-columns: 1fr 130px 90px 55px 75px 75px;
gap: 12px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #222;
cursor: pointer;
}
.member-row:last-child { border-bottom: none; }
.member-row:hover { opacity: .8; }
/* Identity */
.m-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #111; flex-shrink: 0; }
.m-name { font-size: 12px; font-weight: 600; color: #e8e8e6; margin-bottom: 2px; }
.m-role { font-size: 10px; color: #555; }
/* Tags */
.m-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tag { padding: 2px 7px; border-radius: 4px; font-size: 9px; font-weight: 500; }
.tag-pink { background: #3a1028; color: #f472b6; }
.tag-blue { background: #0f2e4a; color: #60a5fa; }
.tag-purple { background: #2d1b69; color: #c084fc; }
.tag-teal { background: #0a2a28; color: #2dd4bf; }
.tag-orange { background: #2a1500; color: #fb923c; }
.tag-green { background: #0a2419; color: #4ade80; }
.tag-gray { background: #2a2a2a; color: #555; }
.tag-rel-socio { background: #3a1028; color: #f472b6; }
.tag-rel-freela { background: #242424; color: #888; border: 1px solid #333; }
.tag-rel-contrat { background: #0f2e4a; color: #60a5fa; }
/* Proj count */
.m-projs { font-size: 11px; color: #666; text-align: right; }
.m-projs strong { color: #aaa; font-weight: 600; }
/* Paid */
.m-paid { text-align: right; }
.m-paid-val { font-size: 13px; font-weight: 700; color: #f472b6; }
.m-paid-lbl { font-size: 9px; color: #444; text-transform: uppercase; letter-spacing: .05em; }
.preview-note { position: fixed; bottom: 14px; right: 16px; background: #2f2f2f; border: 1px solid #3f3f3f; border-radius: 6px; padding: 6px 12px; font-size: 11px; color: #666; }
/* ===== DRAWER ===== */
.drawer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200;
}
.drawer-panel {
position: fixed; top: 0; right: 0; width: 440px; height: 100vh;
background: #1f1f1f; border-left: 1px solid #2f2f2f; z-index: 201;
transform: translateX(100%); transition: transform .2s ease;
overflow-y: auto; display: flex; flex-direction: column;
}
.drawer-panel.open { transform: translateX(0); }
.drawer-close {
position: sticky; top: 0; align-self: flex-end;
background: transparent; border: none; color: #666; font-size: 22px;
cursor: pointer; padding: 12px 16px; line-height: 1;
}
.drawer-close:hover { color: #e8e8e6; }
.drawer-content { padding: 0 24px 40px; }
.drawer-type-badge {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: #555; margin-bottom: 10px;
}
.drawer-title {
font-size: 20px; font-weight: 700; color: #e8e8e6;
margin-bottom: 20px; line-height: 1.3;
}
.drawer-avatar {
width: 48px; height: 48px; background: #1a3a5a; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 700; color: #60a5fa; margin-bottom: 12px;
}
.drawer-field {
display: flex; align-items: flex-start; gap: 12px;
padding: 8px 0; border-bottom: 1px solid #242424;
}
.df-label { font-size: 11px; color: #555; min-width: 80px; padding-top: 1px; }
.df-value { font-size: 12px; color: #ccc; flex: 1; }
.df-link { font-size: 12px; color: #60a5fa; text-decoration: none; flex: 1; }
.df-link:hover { text-decoration: underline; }
.drawer-body {
margin-top: 20px; font-size: 13px; color: #aaa; line-height: 1.6;
}
.drawer-action {
margin-top: 24px; width: 100%; padding: 10px;
background: #1a3a5a; border: 1px solid #2a4a6a; border-radius: 6px;
color: #60a5fa; font-size: 13px; cursor: pointer;
}
.drawer-action:hover { background: #1e4570; }
/* ===== CALENDAR ===== */
.cal-slot-row { display: flex; border-top: 1px solid #1e1e1e; min-height: 44px; }
.cal-slot-time {
width: 48px; font-size: 9px; color: #333; padding: 4px 6px;
flex-shrink: 0; display: flex; align-items: flex-start;
}
.cal-slot-cell {
flex: 1; position: relative; padding: 2px;
border-left: 1px solid #1e1e1e; min-height: 44px;
}
.cal-slot-cell.today-col { background: #191d2e; }
.cal-slot-cell[data-droptarget]:hover { background: #1a2a1a; }
.cal-event-draggable {
background: #0f2240; border-left: 2px solid #60a5fa; border-radius: 3px;
padding: 2px 4px; font-size: 8px; color: #60a5fa; line-height: 1.3;
margin-bottom: 2px; cursor: grab; user-select: none;
}
.cal-event-draggable:active { cursor: grabbing; opacity: .7; }
.cal-event-draggable:hover { background: #0f2a50; }
.cal-month-cell {
min-height: 80px; padding: 4px; border-radius: 4px;
border: 1px solid #1e1e1e;
}
.cal-month-cell.today { background: #1a1a2e; border-color: #3d3d7a; }
.cal-month-cell.other-month { opacity: .4; }
.cal-month-pill {
font-size: 9px; padding: 1px 4px; margin-bottom: 1px;
background: #0f2240; border-left: 2px solid #60a5fa;
border-radius: 2px; color: #60a5fa; cursor: grab;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.week-view-grid {
display: grid;
grid-template-columns: 48px repeat(7, 1fr);
border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden;
}