:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --panel2:#f3f5f9;
  --line:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --accent:#2563eb;
  --danger:#dc2626;
  --green:#16a34a;
  --yellow:#d97706;
  --blue:#0284c7;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:14px}
a{color:inherit;text-decoration:none}.app{display:flex;min-height:100vh}
.sidebar{width:265px;background:#ffffff;border-right:1px solid var(--line);padding:10px 12px;position:fixed;top:0;bottom:0;left:0;overflow:auto;box-shadow:0 12px 30px rgba(15,23,42,.06)}
.brand{height:36px;display:flex;align-items:center;gap:10px;font-weight:700;color:#111827}.case{background:#e8f0ff;color:#2563eb;border-radius:4px;padding:2px}.nav{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:#374151}.nav:hover,.nav.active{background:#eef2ff;color:#1d4ed8}.side-label{font-size:12px;color:var(--muted);margin:22px 0 8px}.sidebar-bottom{position:absolute;bottom:18px;left:12px;right:12px}
.main{margin-left:265px;width:calc(100% - 265px)}.topbar{height:42px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#ffffff;position:sticky;top:0;z-index:3;box-shadow:0 1px 10px rgba(15,23,42,.04)}.crumb,.top-actions{font-size:12px;color:#6b7280}.content{max-width:980px;margin:0 auto;padding:82px 36px}.content>h1,.page-head h1{font-size:42px;line-height:1.1;margin:0 0 10px}.muted{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}.card,.panel,.install-card,.login-card,.member,.list-item,.comment{background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.05)}.row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:30px}
.btn{border:1px solid #d1d5db;background:#ffffff;color:#111827;border-radius:8px;padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}.btn:hover{background:#f3f4f6}.btn.primary{background:#2563eb;color:#ffffff;border-color:#2563eb;font-weight:700}.btn.primary:hover{background:#1d4ed8}.btn.danger{background:#fff1f2;border-color:#fecdd3;color:#be123c}.btn.small{padding:6px 9px;font-size:12px}.inline{display:inline}
.status,.pill{display:inline-flex;border-radius:999px;font-size:12px;padding:5px 9px;background:#f3f4f6;color:#374151}.status-pending{background:#fef3c7;color:#92400e}.status-in_progress,.status-in-process{background:#e0f2fe;color:#075985}.status-review{background:#f3e8ff;color:#7e22ce}.status-complete{background:#dcfce7;color:#166534}.pill.enabled{background:#dcfce7;color:#166534}.pill.disabled{background:#fee2e2;color:#991b1b}
.list{display:flex;flex-direction:column;gap:10px}.list-item{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center}.list-item small{display:block;color:var(--muted);margin-top:5px}.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}.member{display:flex;flex-direction:column;gap:7px}.avatar{width:48px;height:48px;border-radius:50%;background:#e5e7eb;color:#111827;display:grid;place-items:center;font-weight:800;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}
input,select,textarea{width:100%;background:#ffffff;border:1px solid #d1d5db;border-radius:8px;color:#111827;padding:11px 12px;outline:none}input:focus,select:focus,textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}textarea{min-height:95px;resize:vertical}.form-grid,.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid-form h3{grid-column:1/-1}.title-input{font-size:42px;font-weight:800;background:transparent;border:0;padding:10px 0;margin-bottom:18px;box-shadow:none}.editor-form{display:flex;flex-direction:column;gap:14px}
.doc{background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:22px;line-height:1.7;font-size:16px}.doc:empty{display:none}.doc p{white-space:pre-wrap}.doc h1{font-size:38px}.doc h2{font-size:30px}.doc h3{font-size:24px}.doc h4{font-size:20px}.doc-media{display:block;max-width:100%;border-radius:8px;margin:14px 0;background:#f8fafc;border:1px solid #e5e7eb}.doc-audio{display:block;margin:12px 0;width:100%}.callout{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:14px}blockquote{border-left:4px solid #d1d5db;padding-left:14px;color:#374151}pre{background:#f9fafb;border:1px solid #e5e7eb;color:#111827;border-radius:10px;padding:15px;overflow:auto}.bookmark,.file-card{display:block;border:1px solid var(--line);background:#ffffff;border-radius:10px;padding:14px;margin:10px 0;color:#1d4ed8}.comments{height: 203px;overflow: auto;display:flex;flex-direction:column;gap:10px}.comment small{color:#6b7280;margin-left:8px}.comment-form{margin-top:12px;display:flex;flex-direction:column;gap:10px}.auth-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--bg)}.install-card{max-width:760px;width:100%}.login-card{max-width:420px;width:100%}.login-card form{display:flex;flex-direction:column;gap:12px}.alert{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;padding:10px;border-radius:8px;margin:10px 0}.success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;padding:10px;border-radius:8px;margin:10px 0}
.doc-table{border-collapse:collapse;width:100%;margin:12px 0;background:#ffffff}.doc-table th,.doc-table td{border:1px solid #e5e7eb;padding:10px;text-align:left}.doc-table th{background:#f9fafb}.toggle-block,.view-card,.feed-view,.tab-item{background:#ffffff;border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0}.board-view{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.board-view span{background:#f3f4f6;border-radius:8px;padding:12px}.gallery-view{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.gallery-view div{height:80px;background:#f3f4f6;border-radius:8px}.feed-view{border-left:3px solid #cbd5e1}.tabs-view{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.tab-item{min-width:160px}
.mobile-top{display:none}.sidebar-close{display:none}.mobile-overlay{display:none}.check-row{display:flex;align-items:center;gap:10px;background:#ffffff;border:1px solid var(--line);border-radius:8px;padding:11px 12px}.check-row input,.permission-card input{width:auto;margin:0}.role-panel{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.permissions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.permission-card{display:flex;align-items:flex-start;gap:12px;background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer}.permission-card:hover{background:#f8fafc}.permission-card strong{display:block}.permission-card small{display:block;color:var(--muted);margin-top:5px;line-height:1.4}.roles-list{display:flex;flex-direction:column;gap:12px}.role-card{display:grid;grid-template-columns:minmax(180px,1fr) 1.6fr auto;gap:14px;align-items:center;background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:15px;box-shadow:0 10px 28px rgba(15,23,42,.05)}.role-card small{display:block;color:var(--muted);margin-top:5px}.role-perms{display:flex;gap:8px;flex-wrap:wrap}.role-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.table-responsive{width:100%;overflow-x:auto}.panel .btn,.role-panel .btn{align-self:flex-start}
.simple-editor{display:flex;flex-direction:column;gap:14px}.field-label{font-weight:700;color:#111827}.content-textarea{min-height:220px;line-height:1.65}.media-selector{display:flex;flex-direction:column;gap:8px;border:1px dashed #cbd5e1;background:#f8fafc;border-radius:12px;padding:16px}.media-selector input[type=file]{background:#ffffff}.media-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:12px}.media-preview-card{border:1px solid var(--line);border-radius:12px;background:#ffffff;padding:12px;box-shadow:0 8px 20px rgba(15,23,42,.05);display:flex;flex-direction:column;gap:8px;overflow:hidden}.media-preview-card .doc-media{margin:0;width:100%;max-height:220px;object-fit:contain;background:#f8fafc}.media-preview-card strong{font-size:13px;overflow-wrap:anywhere}.keep-file{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151}.keep-file input{width:auto}.pdf-preview{width:100%;height:230px;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc}.file-placeholder{height:120px;display:grid;place-items:center;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;font-size:38px}.existing-media h3{margin-bottom:0}
.block-toolbar,.blocks-sortable,.block-row,.drag,.block-menu{display:none!important}
.hidden{display:none!important}
@media(max-width:1100px){.content{max-width:100%;padding-left:28px;padding-right:28px}.permissions-grid{grid-template-columns:1fr 1fr}.role-card{grid-template-columns:1fr}.role-actions{justify-content:flex-start}.list-item{grid-template-columns:1fr auto}.list-item form,.list-item>a.btn{justify-self:start}}
@media(max-width:800px){body{padding-top:54px}.mobile-top{position:fixed;top:0;left:0;right:0;height:54px;background:#ffffff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 14px;z-index:20}.menu-toggle,.sidebar-close{border:1px solid #d1d5db;background:#ffffff;color:#111827;border-radius:8px;width:38px;height:34px;font-size:20px;cursor:pointer}.sidebar{position:fixed;left:-290px;top:0;bottom:0;width:280px;height:100vh;z-index:30;transition:left .2s ease}.sidebar-bottom{position:static;margin-top:22px}.sidebar-close{display:block;margin-left:auto}.brand{justify-content:flex-start}.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:25}.sidebar-open .sidebar{left:0}.sidebar-open .mobile-overlay{display:block}.app{display:block}.main{margin-left:0;width:100%}.content{padding:34px 16px}.topbar{display:none}.content>h1,.page-head h1,.title-input{font-size:32px}.page-head{align-items:flex-start;flex-direction:column;gap:12px}.page-head .btn{width:auto}.cards,.form-grid,.grid-form,.permissions-grid{grid-template-columns:1fr}.member-grid{grid-template-columns:1fr}.list-item{grid-template-columns:1fr;gap:10px}.role-card{padding:13px}.doc{font-size:15px}.doc h1{font-size:30px}.doc h2{font-size:25px}.doc h3{font-size:21px}.doc h4{font-size:18px}.btn{min-height:38px}.inline{display:inline-flex}.gallery-view,.board-view{grid-template-columns:1fr}.install-card,.login-card{border-radius:10px}.auth-body{padding:14px}.panel .btn,.role-panel .btn{width:100%;justify-content:center}}
@media(max-width:480px){.content{padding:28px 12px}.card,.panel,.install-card,.login-card,.member,.role-card{padding:14px}.btn{width:100%;justify-content:center}.row{flex-direction:column}.role-actions,.role-perms{width:100%}.role-actions .btn,.role-actions form,.role-actions button{width:100%}.title-input{font-size:28px}.content>h1,.page-head h1{font-size:30px}input,select,textarea{font-size:16px}.permission-card{padding:12px}}

/* Dashboard project status board, inspired by Monday-style table */
.dashboard-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 16px}.tab-btn{border:1px solid #d8ddeb;background:#fff;color:#4b5563;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer}.tab-btn:hover,.tab-btn.active{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe}.project-board{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 12px 28px rgba(15,23,42,.06)}.project-status-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}.project-status-table th{background:#fff;color:#4b5563;font-size:13px;text-align:center;padding:11px 12px;border-bottom:1px solid #e5e7eb}.project-status-table th:first-child{text-align:left}.project-status-table td{background:#f3f4f6;border-right:3px solid #fff;border-bottom:3px solid #fff;padding:0 12px;height:56px;text-align:center;color:#374151}.project-status-table tr td:first-child{border-left:4px solid #6366f1;text-align:left;background:#f5f6f8;font-weight:600}.project-name-cell a{display:block;color:#374151}.owner-cell{display:flex;align-items:center;justify-content:center;gap:8px}.owner-cell img,.owner-cell span{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#e0e7ff;color:#4338ca;display:grid;place-items:center;font-size:12px;font-weight:800}.owner-cell small{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#4b5563}.project-status-table .status{border-radius:0;width:auto;margin: 0 -12px;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.project-status-table .status-pending{background:#9ca3af;color:#fff}.project-status-table .status-in_progress,.project-status-table .status-in-process{background:#fbbf24;color:#fff}.project-status-table .status-review{background:#e11d48;color:#fff}.project-status-table .status-complete{background:#10b981;color:#fff}.timeline-bar{height:14px;border-radius:999px;background:#c7cbd3;overflow:hidden;max-width:190px;margin:0 auto}.timeline-bar i{display:block;height:100%;background:#5b5bd6;border-radius:999px}.multi-select{min-height:140px}.project-status-table tr.is-hidden{display:none}
@media(max-width:800px){.dashboard-tabs{gap:8px}.tab-btn{padding:8px 12px}.project-status-table{min-width:720px}.project-board{border-radius:10px}.owner-cell small{max-width:90px}}

/* File preview boxes and popup */
.frontend-files-grid{margin-top:14px}.files-section{margin-top:22px}.files-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}.files-head h3{margin:0}.file-box{min-height:245px}.file-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}.file-actions .btn{flex:1;justify-content:center}.previewable-media{cursor:zoom-in}.preview-modal{position:fixed;inset:0;background:rgba(15,23,42,.72);display:none;align-items:center;justify-content:center;padding:24px;z-index:9999}.preview-modal.is-open{display:flex}.preview-modal-box{position:relative;background:#fff;border-radius:16px;max-width:min(1100px,96vw);max-height:92vh;width:100%;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.preview-close{position:absolute;top:10px;right:12px;width:38px;height:38px;border:1px solid #e5e7eb;background:#fff;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;z-index:2}.preview-modal-content{display:grid;place-items:center;min-height:260px}.preview-modal-content img,.preview-modal-content video{max-width:100%;max-height:82vh;border-radius:12px;background:#f8fafc}.media-preview-card .pdf-preview{height:180px}.media-preview-card .file-card{margin:0}.media-preview-card .doc-audio{margin:0}.media-preview-card.file-box .doc-media{height:180px;max-height:180px;object-fit:contain}.media-preview-card.file-box .file-placeholder{height:180px}
@media(max-width:800px){.preview-modal{padding:12px}.preview-modal-box{padding:12px}.preview-close{top:6px;right:6px}.media-preview-card.file-box .doc-media,.media-preview-card.file-box .file-placeholder{height:150px}.file-actions .btn{width:auto;min-height:36px}}

/* Checkbox assignee selector */
.assignee-checkboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:4px}.assignee-check{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;cursor:pointer}.assignee-check:hover{background:#f8fafc;border-color:#c7d2fe}.assignee-check input{width:auto;margin:0}.assignee-check span{font-weight:600;color:#374151}.multi-select{display:none!important}
.project-status-table .btn.small{white-space:nowrap}
@media(max-width:800px){.assignee-checkboxes{grid-template-columns:1fr}}