:root {
  --teal-950: #042f2e;
  --teal-900: #134e4a;
  --teal-800: #115e59;
  --teal-700: #0f766e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-100: #ccfbf1;
  --sidebar-width: 268px;
  --topbar-height: 72px;
  --app-bg: #f4f7f9;
}

* { box-sizing: border-box; }
body { min-height: 100vh; background: var(--app-bg); overflow-x: hidden; }
button, input, select, textarea { font-family: inherit; }
.min-w-0 { min-width: 0; }
.text-teal { color: var(--teal-700) !important; }
.bg-teal-subtle { background: color-mix(in srgb, var(--teal-600) 12%, transparent); }
.btn-teal { --bs-btn-color: #fff; --bs-btn-bg: var(--teal-700); --bs-btn-border-color: var(--teal-700); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--teal-800); --bs-btn-hover-border-color: var(--teal-800); --bs-btn-active-bg: var(--teal-900); }

.loading-screen { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--bs-body-bg); }
.brand-mark { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-600), var(--teal-900)); color: white; font-size: 1.8rem; box-shadow: 0 12px 30px rgba(15,118,110,.28); }
.brand-mark-sm { width: 42px; height: 42px; border-radius: 13px; font-size: 1.15rem; box-shadow: none; flex: 0 0 auto; }

.auth-screen { min-height: 100vh; background: radial-gradient(circle at top right, rgba(20,184,166,.18), transparent 35%), linear-gradient(135deg, #ecfeff, #f8fafc 58%, #f0fdfa); }
[data-bs-theme="dark"] .auth-screen { background: radial-gradient(circle at top right, rgba(20,184,166,.18), transparent 35%), linear-gradient(135deg, #061b1a, #101827 58%, #0b151d); }
.auth-card { border-radius: 28px; background: var(--bs-body-bg); }
.auth-hero { min-height: 560px; color: white; background: linear-gradient(145deg, rgba(4,47,46,.96), rgba(15,118,110,.92)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 40 40"><path d="M0 20h40M20 0v40" stroke="white" stroke-opacity=".05"/></svg>'); }
.form-control, .form-select { border-radius: .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--teal-500); box-shadow: 0 0 0 .25rem rgba(20,184,166,.15); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); background: linear-gradient(180deg, var(--teal-950), #062c32); color: white; display: flex; flex-direction: column; z-index: 1040; transition: transform .25s ease; }
.sidebar-brand { height: var(--topbar-height); display: flex; align-items: center; gap: .8rem; padding: 0 1.05rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar-brand-text small { opacity: .62; margin-top: .25rem; font-size: .72rem; }
.sidebar-nav { flex: 1; padding: .75rem; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 10px; }
.sidebar-nav .nav-link { width: 100%; border: 0; background: transparent; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: .85rem; padding: .68rem .85rem; border-radius: .75rem; margin-bottom: .18rem; text-align: left; transition: .16s ease; }
.sidebar-nav .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; }
.sidebar-nav .nav-link:hover { color: white; background: rgba(255,255,255,.07); }
.sidebar-nav .nav-link.active { color: white; background: linear-gradient(135deg, rgba(20,184,166,.4), rgba(13,148,136,.18)); box-shadow: inset 3px 0 var(--teal-500); }
.nav-section { padding: 1rem .85rem .38rem; color: rgba(255,255,255,.38); text-transform: uppercase; font-size: .68rem; font-weight: 700; letter-spacing: .13em; }
.sidebar-user { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.08); }
.avatar, .top-avatar { display: grid; place-items: center; background: var(--teal-500); color: var(--teal-950); font-weight: 800; }
.avatar { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; }
.top-avatar { width: 38px; height: 38px; border-radius: 50%; }
.main-panel { margin-left: var(--sidebar-width); min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 1020; height: var(--topbar-height); display: flex; align-items: center; gap: 1rem; padding: .75rem 1.25rem; background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--bs-border-color-translucent); }
.global-search-wrap { position: relative; flex: 1; max-width: 700px; }
.global-search-wrap > i { position: absolute; z-index: 2; top: 50%; left: 1rem; transform: translateY(-50%); color: var(--bs-secondary-color); }
.global-search-wrap .form-control { padding-left: 2.7rem; background: var(--bs-tertiary-bg); border-color: transparent; }
.search-results { position: absolute; left: 0; right: 0; top: calc(100% + .45rem); max-height: 420px; overflow-y: auto; padding: .45rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: 0 18px 45px rgba(15,23,42,.16); z-index: 1100; }
.search-result-item { width: 100%; display: flex; gap: .75rem; border: 0; background: transparent; padding: .7rem; border-radius: .75rem; text-align: left; }
.search-result-item:hover { background: var(--bs-tertiary-bg); }
.view-container { padding: 1.25rem; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.page-title { margin: 0; font-weight: 750; letter-spacing: -.02em; }
.page-subtitle { margin: .3rem 0 0; color: var(--bs-secondary-color); }
.panel-card, .metric-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1.15rem; box-shadow: 0 7px 25px rgba(15,23,42,.045); }
.panel-card { padding: 1.1rem; }
.metric-card { padding: 1rem; height: 100%; position: relative; overflow: hidden; }
.metric-card::after { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -30px; top: -35px; background: color-mix(in srgb, var(--metric-color, var(--teal-600)) 12%, transparent); }
.metric-icon { width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--metric-color, var(--teal-600)) 14%, transparent); color: var(--metric-color, var(--teal-700)); font-size: 1.15rem; }
.metric-value { font-size: 1.6rem; font-weight: 800; line-height: 1; margin-top: .9rem; }
.metric-label { color: var(--bs-secondary-color); font-size: .84rem; margin-top: .35rem; }
.section-title { font-size: 1rem; font-weight: 750; margin-bottom: 1rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--bs-secondary-color); }
.empty-state i { font-size: 2.6rem; opacity: .45; display: block; margin-bottom: .75rem; }

.table-app { margin-bottom: 0; vertical-align: middle; }
.table-app th { font-size: .74rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; white-space: nowrap; }
.table-app td { font-size: .9rem; }
.table-app tbody tr:last-child td { border-bottom: 0; }
.record-title { font-weight: 700; }
.record-meta { color: var(--bs-secondary-color); font-size: .78rem; }
.status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .6rem; font-size: .72rem; font-weight: 700; border-radius: 999px; background: var(--bs-tertiary-bg); }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.progress-thin { height: 7px; }

.diary-card, .note-card, .client-card, .project-card, .goal-card { height: 100%; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; padding: 1rem; transition: transform .17s ease, box-shadow .17s ease; }
.diary-card:hover, .note-card:hover, .client-card:hover, .project-card:hover, .goal-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.08); }
.note-card.pinned { border-top: 4px solid #f59e0b; }
.card-actions { opacity: .35; transition: opacity .15s; }
.diary-card:hover .card-actions, .note-card:hover .card-actions, .client-card:hover .card-actions, .project-card:hover .card-actions, .goal-card:hover .card-actions { opacity: 1; }
.content-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ''; position: absolute; left: .42rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--bs-border-color); }
.timeline-item { position: relative; padding: 0 0 1rem 1.1rem; }
.timeline-dot { position: absolute; left: -1.42rem; top: .25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--teal-600); border: 3px solid var(--bs-body-bg); box-shadow: 0 0 0 1px var(--teal-600); }

.kanban-wrap { display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-column { background: var(--bs-tertiary-bg); border-radius: 1rem; min-height: 420px; padding: .75rem; }
.kanban-header { display: flex; justify-content: space-between; align-items: center; font-weight: 750; padding: .3rem .25rem .8rem; }
.task-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: .8rem; padding: .8rem; margin-bottom: .65rem; cursor: grab; box-shadow: 0 4px 14px rgba(15,23,42,.045); }
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: .45; }
.kanban-column.drag-over { outline: 2px dashed var(--teal-600); outline-offset: -5px; }

.calendar-shell { min-height: 700px; }
.fc .fc-button-primary { background: var(--teal-700); border-color: var(--teal-700); }
.fc .fc-button-primary:hover, .fc .fc-button-primary:active, .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--teal-800); border-color: var(--teal-800); }
.fc .fc-toolbar-title { font-size: 1.25rem; }

.freeform-board { min-height: 680px; position: relative; overflow: hidden; border-radius: 1rem; border: 1px dashed var(--bs-border-color); background-color: var(--bs-tertiary-bg); background-image: radial-gradient(var(--bs-border-color) 1px, transparent 1px); background-size: 22px 22px; touch-action: none; }
.sticky-note { position: absolute; width: 220px; min-height: 150px; padding: .85rem; border-radius: .75rem; box-shadow: 0 12px 25px rgba(15,23,42,.18); cursor: grab; color: #1f2937; user-select: none; overflow: hidden; }
.sticky-note:active { cursor: grabbing; }
.sticky-note .sticky-text { white-space: pre-wrap; user-select: text; }
.sticky-actions { position: absolute; top: .35rem; right: .35rem; opacity: 0; }
.sticky-note:hover .sticky-actions { opacity: 1; }

.mindmap-project-bar { position: relative; z-index: 2; }
.visual-mindmap-app { overflow: hidden; border: 1px solid var(--bs-border-color-translucent); border-radius: 1.15rem; background: var(--bs-body-bg); box-shadow: 0 7px 25px rgba(15,23,42,.045); }
.visual-mindmap-toolbar { min-height: 54px; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .65rem .8rem; border-bottom: 1px solid var(--bs-border-color-translucent); background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-tertiary-bg)); }
.mind-zoom-label { min-width: 58px; font-variant-numeric: tabular-nums; }
.mindmap-help { color: var(--bs-secondary-color); font-size: .76rem; }
.visual-mindmap-stage { position: relative; height: 720px; overflow: hidden; cursor: grab; touch-action: none; user-select: none; background-color: var(--bs-tertiary-bg); background-image: radial-gradient(color-mix(in srgb, var(--bs-border-color) 75%, transparent) 1px, transparent 1px), linear-gradient(135deg, color-mix(in srgb, var(--teal-500) 3%, transparent), transparent 45%); background-size: 24px 24px, 100% 100%; }
.visual-mindmap-stage.is-panning { cursor: grabbing; }
.visual-mindmap-viewport { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; will-change: transform; }
.mindmap-connections, .mindmap-nodes { position: absolute; inset: 0; }
.mindmap-connections { overflow: visible; pointer-events: none; }
.mind-connection { fill: none; stroke: var(--branch-color, var(--teal-600)); stroke-width: 5; stroke-linecap: round; opacity: .72; filter: drop-shadow(0 2px 2px rgba(15,23,42,.08)); }
.visual-mind-node { position: absolute; width: 220px; min-height: 88px; display: flex; align-items: stretch; border: 2px solid color-mix(in srgb, var(--mind-color) 75%, var(--bs-border-color)); background: var(--bs-body-bg); border-radius: 18px; box-shadow: 0 10px 28px rgba(15,23,42,.13); cursor: grab; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; overflow: visible; }
.visual-mind-node:hover { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(15,23,42,.18); }
.visual-mind-node:active { cursor: grabbing; }
.visual-mind-node.selected { border-color: var(--mind-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mind-color) 18%, transparent), 0 16px 34px rgba(15,23,42,.2); }
.visual-mind-node.root-node { border-width: 3px; background: linear-gradient(135deg, color-mix(in srgb, var(--mind-color) 14%, var(--bs-body-bg)), var(--bs-body-bg)); }
.visual-mind-node.mind-shape-pill { border-radius: 999px; }
.visual-mind-node.mind-shape-card { border-radius: 8px; }
.mind-node-main { width: 100%; min-height: 84px; border: 0; background: transparent; color: inherit; padding: .78rem 2.1rem .72rem .9rem; text-align: left; cursor: inherit; border-radius: inherit; }
.mind-node-heading { display: flex; align-items: center; gap: .48rem; font-size: .91rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.mind-node-color-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--mind-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mind-color) 16%, transparent); }
.mind-node-description { display: block; margin-top: .42rem; color: var(--bs-secondary-color); font-size: .72rem; line-height: 1.3; overflow-wrap: anywhere; }
.mind-node-inline-add { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; border: 2px solid var(--mind-color); border-radius: 50%; background: var(--bs-body-bg); color: var(--mind-color); font-size: .75rem; opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 3; }
.visual-mind-node:hover .mind-node-inline-add, .visual-mind-node.selected .mind-node-inline-add { opacity: 1; }
.mind-node-inline-add:hover { transform: translateY(-50%) scale(1.12); background: var(--mind-color); color: white; }
.mindmap-empty-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--bs-secondary-color); pointer-events: none; }
.mindmap-empty-overlay i { font-size: 3rem; opacity: .38; margin-bottom: .7rem; }
.mindmap-empty-overlay .btn { pointer-events: auto; }

.chart-wrap { position: relative; min-height: 280px; }
.filter-bar { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filter-bar .form-control, .filter-bar .form-select { max-width: 260px; }
.action-buttons { display: inline-flex; gap: .3rem; }

.sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(2,6,23,.55); }

[data-bs-theme="dark"] { --app-bg: #091117; }
[data-bs-theme="dark"] .panel-card,
[data-bs-theme="dark"] .metric-card,
[data-bs-theme="dark"] .diary-card,
[data-bs-theme="dark"] .note-card,
[data-bs-theme="dark"] .client-card,
[data-bs-theme="dark"] .project-card,
[data-bs-theme="dark"] .goal-card,
[data-bs-theme="dark"] .task-card { box-shadow: 0 7px 25px rgba(0,0,0,.14); }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-panel { margin-left: 0; }
  .view-container { padding: 1rem; }
  .global-search-wrap { max-width: none; }
  .auth-hero { min-height: 350px; }
}
@media (max-width: 575.98px) {
  :root { --topbar-height: 64px; }
  .topbar { padding: .6rem .75rem; gap: .55rem; }
  .global-search-wrap .form-control { padding-right: .5rem; }
  .page-header { flex-direction: column; }
  .page-header .btn-group, .page-header > .d-flex { width: 100%; }
  .page-header .btn { flex: 1; }
  .view-container { padding: .75rem; }
  .panel-card { padding: .85rem; border-radius: .9rem; }
  .fc .fc-toolbar { flex-direction: column; gap: .65rem; }
  .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
}

@media (max-width: 767.98px) {
  .visual-mindmap-stage { height: 620px; }
  .mindmap-help { width: 100%; }
  .visual-mindmap-toolbar .btn { flex: 0 0 auto; }
}


/* Handwriting and Apple Pencil sketchbook */
.sketch-workspace { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1rem; align-items: start; }
.sketch-pages-panel, .sketch-editor-panel { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: 0 7px 25px rgba(15,23,42,.045); }
.sketch-pages-panel { padding: .85rem; position: sticky; top: calc(var(--topbar-height) + 1rem); max-height: calc(100vh - var(--topbar-height) - 2rem); overflow: hidden; }
.sketch-page-list { display: grid; gap: .55rem; max-height: calc(100vh - var(--topbar-height) - 7rem); overflow: auto; padding-right: .15rem; }
.sketch-page-item { width: 100%; display: flex; align-items: center; gap: .7rem; border: 1px solid var(--bs-border-color-translucent); border-radius: .8rem; padding: .65rem; background: var(--bs-body-bg); color: inherit; transition: .15s ease; }
.sketch-page-item:hover { border-color: var(--teal-500); transform: translateY(-1px); }
.sketch-page-item.active { border-color: var(--teal-600); background: color-mix(in srgb, var(--teal-500) 9%, var(--bs-body-bg)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-500) 13%, transparent); }
.sketch-page-icon { width: 42px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: .45rem; border: 1px solid #dbeafe; color: #475569; background-color: #fff; }
.sketch-page-icon.paper-lined { background-image: repeating-linear-gradient(to bottom, #fff 0, #fff 8px, #dbeafe 9px); }
.sketch-page-icon.paper-grid { background-image: linear-gradient(#dbeafe 1px, transparent 1px), linear-gradient(90deg, #dbeafe 1px, transparent 1px); background-size: 9px 9px; }
.sketch-page-icon.paper-dots { background-image: radial-gradient(#94a3b8 1px, transparent 1px); background-size: 8px 8px; }
.sketch-page-empty { padding: 1.5rem .75rem; text-align: center; color: var(--bs-secondary-color); }
.sketch-page-empty i { display: block; font-size: 2rem; opacity: .45; margin-bottom: .5rem; }
.sketch-editor-panel { overflow: hidden; min-width: 0; }
.sketch-editor-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.sketch-toolbar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .65rem .75rem; border-bottom: 1px solid var(--bs-border-color-translucent); background: var(--bs-tertiary-bg); }
.sketch-tool-btn { display: inline-flex; align-items: center; gap: .35rem; }
.sketch-tool-btn.active { color: #fff; background: var(--teal-700); border-color: var(--teal-700); }
.sketch-color-control { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .45rem; border: 1px solid var(--bs-border-color); border-radius: .45rem; font-size: .78rem; font-weight: 650; background: var(--bs-body-bg); }
.sketch-color-control input { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; }
.sketch-swatches { display: inline-flex; gap: .3rem; }
.sketch-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bs-body-bg); background: var(--swatch); box-shadow: 0 0 0 1px var(--bs-border-color); }
.sketch-size-control { min-width: 155px; display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .5rem; border: 1px solid var(--bs-border-color); border-radius: .45rem; background: var(--bs-body-bg); font-size: .75rem; }
.sketch-size-control i { font-size: .55rem; }
.sketch-size-control input { min-width: 95px; }
.sketch-size-control span { min-width: 18px; text-align: right; font-variant-numeric: tabular-nums; }
.sketch-options-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; padding: .55rem .85rem; border-bottom: 1px solid var(--bs-border-color-translucent); font-size: .78rem; }
.sketch-save-status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.sketch-save-status.status-saved { color: #15803d; }
.sketch-save-status.status-saving { color: #2563eb; }
.sketch-save-status.status-unsaved { color: #a16207; }
.sketch-save-status.status-error { color: #dc2626; }
.sketch-canvas-scroll { overflow: auto; padding: 1rem; background: #e2e8f0; min-height: 520px; }
.sketch-paper { position: relative; width: min(100%, 1450px); margin: 0 auto; background-color: #fff; box-shadow: 0 14px 35px rgba(15,23,42,.2); overflow: hidden; }
.sketch-paper.orientation-landscape { aspect-ratio: 16 / 10; }
.sketch-paper.orientation-portrait { width: min(82%, 900px); aspect-ratio: 3 / 4; }
.sketch-paper.paper-lined { background-image: linear-gradient(90deg, transparent 0 8%, rgba(248,113,113,.32) 8% calc(8% + 1px), transparent calc(8% + 1px)), repeating-linear-gradient(to bottom, #fff 0, #fff 31px, #dbeafe 32px); }
.sketch-paper.paper-grid { background-image: linear-gradient(#dbeafe 1px, transparent 1px), linear-gradient(90deg, #dbeafe 1px, transparent 1px); background-size: 32px 32px; }
.sketch-paper.paper-dots { background-image: radial-gradient(#cbd5e1 1.25px, transparent 1.25px); background-size: 28px 28px; }
.sketch-paper.paper-plain { background: #fff; }
#sketchCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
#sketchCanvas[data-tool="eraser"] { cursor: cell; }
.sketch-focus-mode { overflow: hidden; }
.sketch-focus-mode .sidebar, .sketch-focus-mode .topbar { display: none !important; }
.sketch-focus-mode .main-panel { margin-left: 0 !important; }
.sketch-focus-mode .view-container { padding: 0; }
.sketch-focus-mode .page-header, .sketch-focus-mode .sketch-pages-panel, .sketch-focus-mode .sketch-editor-heading { display: none; }
.sketch-focus-mode .sketch-workspace { display: block; }
.sketch-focus-mode .sketch-editor-panel { position: fixed; inset: 0; z-index: 2000; border: 0; border-radius: 0; }
.sketch-focus-mode .sketch-canvas-scroll { height: calc(100vh - 116px); min-height: 0; padding: .6rem; }
.sketch-focus-mode .sketch-paper { height: 100%; width: auto; max-width: 100%; }
.sketch-focus-mode .sketch-paper.orientation-landscape { aspect-ratio: 16 / 10; }
.sketch-focus-mode .sketch-paper.orientation-portrait { aspect-ratio: 3 / 4; }

@media (max-width: 991.98px) {
  .sketch-workspace { grid-template-columns: 1fr; }
  .sketch-pages-panel { position: static; max-height: none; }
  .sketch-page-list { display: flex; max-height: none; overflow-x: auto; padding-bottom: .25rem; }
  .sketch-page-item { min-width: 220px; max-width: 260px; }
  .sketch-editor-heading { align-items: flex-start; }
}
@media (max-width: 767.98px) {
  .sketch-tool-btn span, .sketch-color-control span { display: none; }
  .sketch-toolbar { gap: .4rem; padding: .5rem; }
  .sketch-options-bar .text-body-secondary { width: 100%; margin-left: 0 !important; }
  .sketch-canvas-scroll { padding: .45rem; min-height: 420px; }
  .sketch-paper.orientation-portrait { width: 100%; }
}

/* Google login and Gmail Mail Center */
.auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--bs-secondary-color); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--bs-border-color); }

.mail-connect-wrap { min-height: calc(100vh - var(--topbar-height) - 2.5rem); display: grid; place-items: center; }
.mail-connect-card { max-width: 760px; padding: clamp(1.4rem, 4vw, 3rem); }
.mail-google-icon { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, #2563eb, #db4437 55%, #f4b400); box-shadow: 0 14px 32px rgba(37,99,235,.2); }
.mail-shell { min-height: calc(100vh - var(--topbar-height) - 2.5rem); display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1rem; }
.mail-sidebar, .mail-main { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1.1rem; box-shadow: 0 7px 25px rgba(15,23,42,.045); }
.mail-sidebar { padding: .9rem; align-self: start; position: sticky; top: calc(var(--topbar-height) + 1rem); }
.mail-labels { display: grid; gap: .25rem; }
.mail-label { border: 0; background: transparent; color: var(--bs-body-color); width: 100%; padding: .66rem .75rem; border-radius: .75rem; display: flex; align-items: center; gap: .75rem; text-align: left; }
.mail-label:hover { background: var(--bs-tertiary-bg); }
.mail-label.active { color: var(--teal-800); background: color-mix(in srgb, var(--teal-500) 14%, var(--bs-body-bg)); font-weight: 750; }
[data-bs-theme="dark"] .mail-label.active { color: var(--teal-100); }
.mail-label i { width: 20px; text-align: center; }
.mail-main { min-width: 0; overflow: hidden; padding: 1rem; }
.mail-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.mail-search { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .55rem; }
.mail-search > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.mail-search .form-control { padding-left: 2.65rem; background: var(--bs-tertiary-bg); border-color: transparent; }
.mail-loading { min-height: 320px; display: grid; place-items: center; align-content: center; gap: .8rem; color: var(--bs-secondary-color); }
.mail-list { display: grid; }
.mail-row { width: 100%; border: 0; border-bottom: 1px solid var(--bs-border-color-translucent); background: transparent; color: inherit; display: grid; grid-template-columns: 28px minmax(150px, 220px) minmax(260px,1fr) 150px; gap: .6rem; align-items: center; padding: .72rem .45rem; text-align: left; font-size: .88rem; }
.mail-row:hover { background: var(--bs-tertiary-bg); }
.mail-row.unread { background: color-mix(in srgb, #60a5fa 8%, var(--bs-body-bg)); }
.mail-row.unread .mail-sender, .mail-row.unread .mail-subject strong, .mail-row.unread .mail-date { font-weight: 800; }
.mail-star { text-align: center; }
.mail-date { text-align: right; white-space: nowrap; font-size: .76rem; color: var(--bs-secondary-color); }
.mail-message-card { border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; overflow: hidden; }
.mail-message-header { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); background: var(--bs-tertiary-bg); }
.mail-body-frame { width: 100%; min-height: 360px; border: 0; display: block; background: white; }
.mail-attachments { padding: 1rem; border-top: 1px solid var(--bs-border-color-translucent); }
.mail-compose-body { min-height: 360px; resize: vertical; }

@media (max-width: 991.98px) {
  .mail-shell { grid-template-columns: 1fr; }
  .mail-sidebar { position: static; }
  .mail-labels { display: flex; overflow-x: auto; padding-bottom: .2rem; }
  .mail-label { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .mail-sidebar hr, .mail-sidebar .small { display: none; }
  .mail-row { grid-template-columns: 24px minmax(110px, 180px) minmax(220px, 1fr) 120px; }
}

@media (max-width: 767.98px) {
  .mail-main { padding: .75rem; }
  .mail-row { grid-template-columns: 24px minmax(0, 1fr) 72px; grid-template-areas: "star sender date" "star subject subject"; gap: .15rem .5rem; }
  .mail-star { grid-area: star; }
  .mail-sender { grid-area: sender; }
  .mail-subject { grid-area: subject; font-size: .82rem; }
  .mail-date { grid-area: date; font-size: .68rem; }
  .mail-message-header { align-items: flex-start; flex-wrap: wrap; }
  .mail-message-header > .d-flex:last-child { width: 100%; justify-content: flex-end; }
  .mail-search { grid-template-columns: 1fr; }
  .mail-search > i { top: 22px; }
}

/* V5 Collaboration: internal messages, announcements and digital forms */
.border-teal { border-color: color-mix(in srgb, var(--teal-500) 55%, var(--bs-border-color)) !important; }
.internal-mail-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1rem; align-items: start; }
.internal-mail-sidebar { position: sticky; top: calc(var(--topbar-height) + 1rem); }
.internal-mail-main { min-width: 0; }
.internal-message-list { display: grid; border-top: 1px solid var(--bs-border-color-translucent); }
.internal-message-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px 40px; gap: .7rem; align-items: center; padding: .8rem .35rem; border-bottom: 1px solid var(--bs-border-color-translucent); cursor: pointer; transition: .15s ease; }
.internal-message-row:hover { background: var(--bs-tertiary-bg); }
.internal-message-row.unread { background: color-mix(in srgb, #60a5fa 9%, var(--bs-body-bg)); }
.internal-message-row.unread strong { font-weight: 800; }
.internal-message-row.draft { grid-template-columns: 40px minmax(0, 1fr) 150px 40px; }
.internal-message-icon { width: 34px; height: 34px; border-radius: .7rem; display: grid; place-items: center; color: var(--teal-700); background: color-mix(in srgb, var(--teal-500) 13%, var(--bs-body-bg)); }
.internal-star { color: var(--bs-secondary-color); }
.internal-star.active { color: #eab308; }
.internal-message-date { text-align: right; font-size: .76rem; color: var(--bs-secondary-color); white-space: nowrap; }
.internal-compose-card { max-width: 980px; margin: 0 auto; }
.internal-reader { max-width: 1040px; margin: 0 auto; }
.internal-message-body { min-height: 260px; white-space: normal; line-height: 1.72; font-size: .98rem; }

.dashboard-announcements { border-radius: 1rem; }
.dashboard-announcements .alert { border: 0; border-radius: .9rem; box-shadow: 0 5px 18px rgba(15, 23, 42, .05); }
.announcement-card { position: relative; padding: 1rem 1.1rem; margin-bottom: .85rem; border: 1px solid var(--bs-border-color-translucent); border-left-width: 5px; border-radius: .9rem; background: var(--bs-body-bg); }
.announcement-card.priority-information { border-left-color: #0ea5e9; }
.announcement-card.priority-important { border-left-color: #f59e0b; }
.announcement-card.priority-urgent { border-left-color: #ef4444; }

.form-tool-card { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; background: var(--bs-body-bg); box-shadow: 0 7px 25px rgba(15,23,42,.045); transition: .16s ease; }
.form-tool-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teal-500) 45%, var(--bs-border-color)); }
.form-tool-icon { width: 48px; height: 48px; border-radius: .9rem; display: grid; place-items: center; font-size: 1.25rem; color: var(--teal-700); background: color-mix(in srgb, var(--teal-500) 13%, var(--bs-body-bg)); }
.form-card-description { min-height: 44px; }
.form-builder-layout { display: grid; grid-template-columns: 230px minmax(380px, 1fr) 300px; gap: 1rem; align-items: start; }
.form-palette, .field-properties { position: sticky; top: calc(var(--topbar-height) + 1rem); max-height: calc(100vh - var(--topbar-height) - 2rem); overflow: auto; }
.form-palette-grid { display: grid; gap: .5rem; }
.form-palette-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem .75rem; border: 1px solid var(--bs-border-color-translucent); border-radius: .75rem; background: var(--bs-body-bg); color: var(--bs-body-color); text-align: left; cursor: grab; transition: .15s ease; }
.form-palette-item:hover { border-color: var(--teal-500); background: color-mix(in srgb, var(--teal-500) 7%, var(--bs-body-bg)); }
.form-palette-item:active { cursor: grabbing; }
.form-palette-item i { width: 22px; text-align: center; color: var(--teal-700); }
.form-canvas { min-height: 600px; }
.builder-drop-zone { min-height: 500px; border: 2px dashed var(--bs-border-color); border-radius: .9rem; padding: .7rem; transition: .15s ease; }
.builder-drop-zone.drag-over { border-color: var(--teal-500); background: color-mix(in srgb, var(--teal-500) 6%, transparent); }
.builder-field-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .85rem; margin-bottom: .65rem; border: 1px solid var(--bs-border-color-translucent); border-radius: .8rem; background: var(--bs-body-bg); cursor: pointer; transition: .15s ease; }
.builder-field-card:hover, .builder-field-card.selected { border-color: var(--teal-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal-500) 12%, transparent); }
.builder-field-card.drag-over { transform: translateY(4px); border-top: 4px solid var(--teal-500); }
.builder-field-card.dragging { opacity: .45; }
.builder-drag-handle { color: var(--bs-secondary-color); cursor: grab; font-size: 1.2rem; }
.builder-field-main { min-width: 0; }
.form-section-heading { padding: 1rem 0 .5rem; margin: 1rem 0; border-bottom: 2px solid color-mix(in srgb, var(--teal-500) 40%, var(--bs-border-color)); }
.form-section-heading h2 { margin: 0; font-size: 1.35rem; }
.form-section-heading p { margin: .35rem 0 0; color: var(--bs-secondary-color); }
.digital-response-form { padding: clamp(1rem, 4vw, 2.4rem); }
.response-field { margin-bottom: 1.35rem; }
.response-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
.response-choice { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; cursor: pointer; background: var(--bs-body-bg); }
.response-choice:has(input:checked) { border-color: var(--teal-500); background: color-mix(in srgb, var(--teal-500) 10%, var(--bs-body-bg)); }
.rating-choice { display: flex; flex-wrap: wrap; gap: .55rem; }
.rating-choice label { cursor: pointer; }
.rating-choice input { position: absolute; opacity: 0; pointer-events: none; }
.rating-choice span { display: inline-flex; align-items: center; gap: .35rem; padding: .65rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; }
.rating-choice input:checked + span { color: #a16207; border-color: #eab308; background: #fef9c3; }
.response-detail-card { padding: 1rem; border: 1px solid var(--bs-border-color-translucent); border-radius: .9rem; background: var(--bs-tertiary-bg); }

@media (max-width: 1199.98px) {
  .form-builder-layout { grid-template-columns: 210px minmax(360px, 1fr); }
  .field-properties { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 991.98px) {
  .internal-mail-shell { grid-template-columns: 1fr; }
  .internal-mail-sidebar { position: static; }
  .internal-mail-sidebar .mail-label { display: inline-flex; width: auto; margin-right: .25rem; }
  .form-builder-layout { grid-template-columns: 1fr; }
  .form-palette, .field-properties { position: static; max-height: none; }
  .form-palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .internal-message-row, .internal-message-row.draft { grid-template-columns: 28px minmax(0, 1fr) 36px; grid-template-areas: "star content action" "star date action"; gap: .25rem .55rem; }
  .internal-message-row > :nth-child(1) { grid-area: star; }
  .internal-message-row > :nth-child(2) { grid-area: content; }
  .internal-message-row > :nth-child(3) { grid-area: date; text-align: left; }
  .internal-message-row > :nth-child(4) { grid-area: action; }
  .form-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-palette-item { flex-direction: column; text-align: center; font-size: .76rem; }
  .builder-field-card { grid-template-columns: 20px minmax(0, 1fr); }
  .builder-field-card > .d-flex:last-child { grid-column: 2; }
  .response-choice-grid { grid-template-columns: 1fr; }
}