@font-face { font-family:'Viola English'; src:url('../fonts/ViolaEng-Medium.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
     @font-face { font-family:'Viola Kurdish'; src:url('../fonts/ViolaKrd-Bold.ttf') format('truetype'); font-style:normal; font-weight:700; font-display:swap; }
     :root { --cream:#f7f3ee; --paper:#fffdfb; --ink:#24201d; --muted:#887f78; --tan:#916e55; --line:#e8e0d8; }
    * { box-sizing:border-box; }
     body { margin:0; background:#f5f1ed; color:var(--ink); font-family:'Viola English',system-ui,sans-serif; }
     :is(h1,h2,h3,h4,h5,h6,b,strong,.font-extrabold,.font-bold) { font-family:'Viola Kurdish','Viola English',system-ui,sans-serif; }
    button, input, select { font:inherit; }
    .app-shell { min-height:100vh; }
    .sidebar { width:260px; background:#24201d; color:#eee8e2; }
    .nav-item { transition:all .18s ease; }
    .nav-item:hover { background:#3b342f; color:#fff; }
    .nav-item.active { background:#f2e5d8; color:#24201d; }
    .glass-line { border-color:rgba(255,255,255,.12); }
    .admin-card { border:1px solid #ebe4de; background:rgba(255,255,255,.84); box-shadow:0 14px 40px rgba(61,43,29,.05); }
    .input { width:100%; border:1px solid #dfd5cc; border-radius:10px; padding:10px 12px; color:#24201d; background:#fff; outline:none; transition:border .15s, box-shadow .15s; }
    .input:focus { border-color:#a47f61; box-shadow:0 0 0 3px rgba(164,127,97,.14); }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:10px 14px; font-weight:700; font-size:13px; transition:all .15s ease; cursor:pointer; }
    .btn-primary { background:#24201d; color:white; box-shadow:0 5px 12px rgba(36,32,29,.15); }
    .btn-primary:hover { background:#413831; transform:translateY(-1px); }
    .btn-soft { background:#f0e8df; color:#6d4f3d; }
    .btn-soft:hover { background:#e6d9cb; }
    .btn-quiet { color:#7b7068; }
    .btn-quiet:hover { background:#f4eee8; color:#24201d; }
    .tab { border-bottom:2px solid transparent; color:#887f78; }
    .tab.active { border-color:#916e55; color:#24201d; font-weight:700; }
    .client-row { transition:all .15s; cursor:pointer; }
    .client-row:hover { background:#fbf8f5; }
    .client-row.selected { background:#f4eae1; }
    .avatar { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; font-weight:800; font-size:13px; color:#654b3a; background:#e9d9ca; }
    .avatar.tone-a { background:#e9d9ca; color:#654b3a; }
    .avatar.tone-b { background:#dbe7e3; color:#3c665a; }
    .avatar.tone-c { background:#e7e0ec; color:#695078; }
    .avatar.tone-d { background:#eee5c9; color:#77652e; }
    .avatar.tone-e { background:#ead8db; color:#794751; }
    .status-dot { width:7px; height:7px; border-radius:999px; display:inline-block; background:#c7beb6; }
    .status-dot.ready { background:#6c9974; }
    .status-dot.syncing { background:#d29a52; animation:pulse-dot 1s infinite; }
    .status-dot.error { background:#b45b5b; }
    @keyframes pulse-dot { 50% { opacity:.35; } }
    .platform-chip { border:1px solid #e5dbd2; border-radius:999px; padding:3px 8px; font-size:10px; color:#75685f; background:#fff; }
    .bar { height:8px; border-radius:99px; background:#eee6df; overflow:hidden; }
    .bar > span { height:100%; display:block; border-radius:99px; background:#916e55; }
    .modal-backdrop { background:rgba(32,27,24,.54); }
    .modal { animation:modal-in .18s ease-out; }
    @keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
    .toast { animation:toast-in .22s ease-out; }
    @keyframes toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
    .pdf-stage { position:fixed; left:-100000px; top:0; width:210mm; background:var(--cream); }
    .pdf-page { width:210mm; min-height:296mm; height:296mm; padding:17mm 18mm 14mm; background:var(--cream); color:var(--ink); display:flex; flex-direction:column; }
    .pdf-page:last-child { page-break-after:auto; break-after:auto; }
    .pdf-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:18px; }
    .pdf-header h1 { font-size:24px; line-height:1.05; font-weight:800; letter-spacing:-.04em; margin:0 0 5px; }
    .pdf-sub { color:#817a74; font-size:12px; font-weight:500; }
    .pdf-count { font-size:16px; font-weight:800; white-space:nowrap; }
    .pdf-summary-title { margin:3px 0 23px; }
    .pdf-summary-title h2 { font-size:46px; line-height:.98; letter-spacing:-.06em; margin:0 0 7px; font-weight:800; }
    .pdf-summary-title p { color:var(--tan); font-size:22px; margin:0; font-weight:500; }
    .pdf-client-list { display:flex; flex:1; flex-direction:column; gap:10px; }
    .pdf-client-row { background:#fff; border-radius:8px; padding:13px 18px; display:flex; justify-content:space-between; align-items:center; font-size:14px; }
     .pdf-client-row strong { font-weight:800; }
    .pdf-client-row span { color:var(--tan); font-weight:800; }
    .pdf-summary-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
    .pdf-summary-metric { background:#fff; border-radius:8px; padding:16px 18px; }
    .pdf-summary-metric span { color:#817a74; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
    .pdf-summary-metric strong { display:block; margin-top:7px; font-size:24px; line-height:1; font-weight:800; }
    /* Keep the client overview, totals, and notes inside their single A4 summary page. */
    .pdf-summary-page .pdf-client-list { min-height:0; gap:6px; }
    .pdf-summary-page .pdf-client-row { flex:none; min-height:24px; padding:4px 12px; font-size:11px; line-height:1.15; }
    .pdf-summary-page .pdf-summary-metrics { flex:none; gap:8px; margin-top:10px; }
    .pdf-summary-page .pdf-summary-metric { min-width:0; padding:10px 12px; }
    .pdf-summary-page .pdf-summary-metric span { font-size:9px; letter-spacing:.04em; }
    .pdf-summary-page .pdf-summary-metric strong { margin-top:5px; font-size:20px; }
    .pdf-summary-page .pdf-client-note { flex:0 1 auto; max-height:150px; overflow:hidden; }
    .pdf-client-note { display:flex; flex:1; flex-direction:column; min-height:0; overflow-wrap:anywhere; background:#fff; border-left:3px solid var(--tan); border-radius:4px; padding:16px 18px; margin-top:8px; font-size:12px; line-height:1.55; }
    .pdf-client-note-content { flex:1; min-height:0; }
    .pdf-client-note-content .ql-size-small { font-size:.75em; }
    .pdf-client-note-content .ql-size-large { font-size:1.5em; }
    .pdf-client-note-content .ql-size-huge { font-size:2.5em; }
    .pdf-client-note-content p { margin:0 0 8px; }
    .pdf-client-note-content h1,.pdf-client-note-content h2,.pdf-client-note-content h3 { margin:0 0 10px; }
    #clientNoteEditor .ql-editor { min-height:300px; color:var(--ink); font-family:'Viola English',system-ui,sans-serif; font-size:14px; line-height:1.6; }
    #clientNoteEditor .ql-editor h1,#clientNoteEditor .ql-editor h2,#clientNoteEditor .ql-editor h3 { font-family:'Viola Kurdish','Viola English',system-ui,sans-serif; }
    #clientNoteToolbar.ql-toolbar.ql-snow { border-color:#ddd2c8; border-radius:10px 10px 0 0; background:#fff; }
    #clientNoteEditor.ql-container.ql-snow { border-color:#ddd2c8; border-radius:0 0 10px 10px; background:#fff; }
    .client-extra-post { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #eee6df; border-radius:10px; background:#fff; padding:8px 10px; font-size:11px; }
    .client-dialog { display:flex; flex-direction:column; width:min(820px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:hidden; border-radius:20px; background:#fffdfb; box-shadow:0 24px 80px rgba(32,27,24,.3); }
    .client-dialog-header { flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 26px 18px; border-bottom:1px solid #eee6df; background:#fffdfb; }
    .client-dialog-body { min-height:0; overflow-y:auto; padding:22px 26px; }
    .client-dialog-footer { flex:none; display:flex; justify-content:flex-end; gap:10px; padding:14px 26px; border-top:1px solid #eee6df; background:#fffdfb; }
    @media (max-width:700px) { .client-dialog { width:calc(100vw - 20px); max-height:calc(100vh - 20px); border-radius:16px; } .client-dialog-header { padding:16px 18px 14px; } .client-dialog-body { padding:16px 18px; } .client-dialog-footer { padding:12px 18px; } }
    .pdf-footer { margin-top:auto; padding-top:18px; display:flex; justify-content:space-between; color:#918a84; font-size:10.5px; font-weight:500; }
    .pdf-post-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:15px; align-content:start; flex:1; }
    .pdf-post-card { background:#fff; border-radius:3px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
     .pdf-post-media { width:100%; aspect-ratio:1 / 1; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#ede7e1; }
     .pdf-post-image { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block; background:#ede7e1; }
    .pdf-no-image { color:#aa9e94; font-size:11px; background:#ede7e1; }
    .pdf-post-body { padding:8px 10px 10px; }
    .pdf-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .pdf-date { font-size:11.5px; font-weight:800; }
     .pdf-type, .pdf-engagement { font-size:9.5px; color:#8e8a86; }
    .pdf-engagement { color:#7f7973; }
     .report-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; border:1px dashed #d7c8bb; border-radius:14px; background:#fcf9f6; color:#897d74; text-align:center; padding:28px; }
     .pdf-post-link { display:block; color:inherit; text-decoration:none; }
     .pdf-post-link:hover .pdf-post-card { box-shadow:0 4px 14px rgba(61,43,29,.14); }
      .pdf-stage.pdf-exporting { position:fixed!important; left:0!important; top:0!important; width:794px!important; transform:none!important; display:block!important; visibility:visible!important; opacity:1!important; z-index:100!important; }
      .pdf-stage.pdf-exporting .pdf-page { width:794px!important; min-width:794px!important; height:1123px!important; min-height:1123px!important; padding:64px 68px 53px!important; }
      .pdf-loading { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(32,27,24,.32); backdrop-filter:blur(3px); }
      .pdf-loading.hidden { display:none; }
     .pdf-loading-card { display:flex; align-items:center; gap:12px; border-radius:14px; padding:15px 18px; color:#fff; background:#24201d; box-shadow:0 14px 36px rgba(32,27,24,.28); font-size:14px; font-weight:800; }
      .pdf-loading-spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:pdf-spin .7s linear infinite; }
      @keyframes pdf-spin { to { transform:rotate(360deg); } }
      .fetch-popup { position:fixed; right:22px; bottom:22px; z-index:200; pointer-events:none; }
      .fetch-popup-card { display:flex; align-items:center; gap:12px; max-width:min(420px,calc(100vw - 32px)); border-radius:14px; padding:14px 16px; color:#fff; background:#24201d; box-shadow:0 14px 36px rgba(32,27,24,.28); font-size:13px; font-weight:800; pointer-events:auto; }
      .fetch-popup-close { margin-left:8px; color:#cfc5bd; font-size:20px; line-height:1; cursor:pointer; }
      .fetch-popup-close:hover { color:#fff; }
      .pdf-loading-close { margin-left:8px; color:#cfc5bd; font-size:12px; font-weight:700; cursor:pointer; }
      .pdf-loading-close:hover { color:#fff; }
     .app-footer { border-top:1px solid #e8e0d8; color:#988e86; font-size:12px; }
     /* Editorial dashboard layer: the utility classes still provide structure, while this layer owns the visual rhythm. */
      body { background:#f2eee9; color:#201c19; }
     .app-shell { max-width:1600px; margin:0 auto; background:#fbfaf8; box-shadow:0 0 80px rgba(48,37,28,.08); }
     .sidebar { position:fixed; inset:0 auto 0 max(0px, calc((100vw - 1600px) / 2)); z-index:30; width:236px; min-height:100vh; background:#211e1b; overflow-y:auto; }
     .sidebar > div:first-child { padding:30px 24px 26px; }
     .sidebar nav { padding:18px 14px; }
     .nav-item { border:1px solid transparent; color:#bdb3aa; }
     .nav-item:hover { background:#322c27; color:#fff; }
     .nav-item.active { background:#ead8c8; border-color:#ead8c8; color:#211e1b; }
     .main-content { margin-left:236px; background:#fbfaf8; }
     .main-content > header { position:sticky; top:0; z-index:20; background:rgba(251,250,248,.92); backdrop-filter:blur(16px); }
     .main-content > div { padding-top:42px; padding-bottom:48px; }
     .admin-card { border-color:#e8e0d8; background:#fffefd; box-shadow:0 8px 28px rgba(65,48,36,.045); }
     .admin-card:hover { box-shadow:0 12px 34px rgba(65,48,36,.075); }
     .btn { min-height:40px; border-radius:12px; padding:10px 15px; }
     .btn-primary { background:#211e1b; }
     .btn-primary:hover { background:#4c3b31; }
     .btn-soft { background:#f1e5da; color:#6d4f3d; }
     .input { min-height:42px; border-radius:12px; border-color:#ddd2c8; background:#fffefd; }
     textarea.input { min-height:86px; resize:vertical; }
     #apifyTokenInput { -webkit-text-security:disc; text-security:disc; letter-spacing:.08em; }
     .client-row { border-color:#f0e9e3; }
     .client-row:hover { background:#fcf8f4; }
     .client-row.selected { background:#f3e8dd; }
     .platform-chip { padding:4px 9px; font-weight:700; background:#fcfaf8; }
     .tab-panel > div:first-child h2 { letter-spacing:-.045em; }
     #statGrid > .admin-card { min-height:126px; display:flex; flex-direction:column; justify-content:center; }
     #previewMount { min-height:500px; }
     .app-footer { background:#f7f2ed; }
     @media (max-width: 760px) {
       .app-shell { width:100%; box-shadow:none; }
       .main-content { margin-left:0; }
       .main-content > header { position:relative; }
       .main-content > div { padding:26px 16px 34px; }
       .main-content > header > div:first-child { max-width:100%; }
       .main-content > header > div:nth-child(2) { width:100%; }
       .main-content > header > div:nth-child(2) .btn { flex:1; }
       #statGrid { grid-template-columns:1fr 1fr; }
       #statGrid > .admin-card { min-height:112px; padding:16px; }
       .app-footer { text-align:center; }
     }
   @media (max-width: 980px) { .sidebar { width:220px; } .pdf-stage { transform:scale(.55); transform-origin:top left; } }
   @media (max-width: 760px) { .sidebar { display:none; } .main-content { width:100%; } }
   #clientsTab .admin-card.p-4 { padding:20px 22px; }
   #clientsTab .admin-card.p-4 > .flex:last-child { flex:1 1 540px; min-width:0; flex-wrap:wrap; }
   #workspacePlatformFilter { width:360px; min-width:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
   #workspacePlatformFilter label { min-width:0; padding:10px 6px; overflow:hidden; white-space:nowrap; font-size:10px; }
   #workspacePlatformFilter input { flex:none; }
   #platformFilter label { min-width:0; padding:10px 6px; overflow:hidden; white-space:nowrap; font-size:10px; }
   #platformFilter input { flex:none; }
   #clientsTab > div > .admin-card:last-child { box-shadow:0 10px 34px rgba(65,48,36,.055); }
   #clientsTab .client-row { min-height:116px; padding:22px 24px; grid-template-columns:minmax(0,1fr) auto minmax(230px,auto); }
   #clientsTab .client-row > div:nth-child(2) { text-align:right; padding:0 18px; }
   #clientsTab .client-row > div:last-child { justify-content:flex-end; }
   #clientsTab .client-row .btn-soft { min-width:76px; }
   #sidebarTotals > div { border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:9px 10px; background:rgba(255,255,255,.04); }
   #sidebarTotals strong { display:block; color:#f4ece5; font-size:15px; line-height:1; }
   #sidebarTotals span { display:block; margin-top:5px; color:#aa9e94; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
    @media (max-width: 900px) { #workspacePlatformFilter { width:100%; } #clientsTab .admin-card.p-4 > .flex:last-child { flex-basis:100%; } }
    @media (max-width: 760px) { #clientsTab .client-row { grid-template-columns:1fr; gap:14px; } #clientsTab .client-row > div:nth-child(2) { text-align:left; padding:0; } #clientsTab .client-row > div:last-child { justify-content:flex-start; } #clientsTab .admin-card.p-4 { padding:16px; } }

    /* Application shell and responsive navigation */
    html { min-width:320px; scroll-behavior:smooth; }
    body { min-width:320px; overflow-x:hidden; }
    .app-shell { width:100%; max-width:none; min-height:100dvh; margin:0; box-shadow:none; }
    .sidebar { position:fixed; inset:0 auto 0 0; z-index:50; display:flex!important; width:256px; height:100dvh; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; transform:translateX(0); transition:transform .22s ease; }
    .main-content { width:calc(100% - 256px); min-width:0; margin-left:256px; }
    .main-content > div { width:100%; max-width:1760px; padding:clamp(20px,3vw,44px); }
    .main-content > header { min-height:76px; }
    .page-title-group { display:flex; align-items:center; gap:12px; min-width:0; }
    .mobile-menu-toggle { display:none; width:42px; height:42px; flex:none; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--paper); font-size:18px; cursor:pointer; }
    .nav-item { min-height:44px; text-align:left; }
    .nav-item:focus-visible, .mobile-menu-toggle:focus-visible, .period-quick-btn:focus-visible { outline:3px solid #c79f7d; outline-offset:2px; }
    .sidebar-backdrop { display:none; }
    .date-range-controls { min-width:0; }
    .date-range-controls > label { flex:1; min-width:0; }
    .date-range-controls input { width:100%!important; min-width:0; }
    .period-quick-btn { border:1px solid #e8e0d8; border-radius:999px; padding:6px 10px; color:#75685f; background:#fff; font-size:11px; font-weight:700; cursor:pointer; transition:background .15s,color .15s; }
    .period-quick-btn:hover { color:#24201d; background:#f1e5da; }
    #previewMount { min-height:0; overflow:hidden; }
    .preview-viewport { width:100%; overflow:hidden; }
    .preview-canvas { width:794px; transform-origin:top left; }
    #previewMount .pdf-page + .pdf-page { margin-top:14px; }
    .admin-card { min-width:0; }
    .client-row > * { min-width:0; }
    button:disabled { opacity:.55; cursor:not-allowed; transform:none!important; }

    @media (max-width:1100px) {
      .sidebar { width:232px; }
      .main-content { width:calc(100% - 232px); margin-left:232px; }
      .main-content > div { padding:28px 24px; }
      #clientsTab .client-row { grid-template-columns:minmax(0,1fr) auto; }
      #clientsTab .client-row > div:last-child { grid-column:1/-1; justify-content:flex-start; }
    }
    @media (max-width:900px) {
      .sidebar { width:min(300px,86vw); transform:translateX(-102%); box-shadow:18px 0 60px rgba(20,16,13,.2); }
      .sidebar.is-open { transform:translateX(0); }
      .main-content { width:100%; margin-left:0; }
      .main-content > header { position:sticky; top:0; }
      .main-content > div { max-width:none; padding:clamp(18px,4vw,32px); }
      .mobile-menu-toggle { display:inline-flex; }
      .sidebar-backdrop { position:fixed; inset:0; z-index:40; display:block; background:rgba(20,16,13,.48); backdrop-filter:blur(2px); }
      .sidebar-backdrop.hidden { display:none; }
      body.nav-open { overflow:hidden; }
    }
    @media (max-width:640px) {
      .main-content > header { padding:12px 14px; gap:10px; }
      .main-content > header > div:nth-child(2) { width:auto; margin-left:auto; }
      .main-content > header > div:nth-child(2) .btn { min-width:42px; padding-inline:10px; }
      #saveBtn { font-size:0; }
      #saveBtn::after { content:'Save'; font-size:12px; }
      #topExportBtn { font-size:12px; }
      #pageHeading { max-width:55vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
      .main-content > div { padding:18px 14px 28px; }
      .tab-panel h2 { font-size:clamp(1.8rem,8vw,2.6rem); }
      #statGrid { gap:10px; }
      #statGrid > .admin-card { min-height:100px; padding:14px; }
      #postTypeTotals { gap:8px; }
      #postTypeTotals > .admin-card { padding:12px 9px; }
      #workspacePlatformFilter { min-width:0; }
      #workspaceFromInput, #workspaceToInput { width:100%!important; }
      #clientsTab .admin-card.p-4 > .flex:last-child { min-width:0; }
      #clientsTab .client-row { padding:16px!important; }
      #clientsTab .client-row > div:last-child { gap:6px; }
      #clientsTab .client-row .btn { min-height:36px; padding:7px 9px; }
      #previewMount { padding:12px!important; }
      .app-footer { padding:16px 12px; }
      .client-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
    }
    @media (prefers-reduced-motion:reduce) {
      *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
    }