:root {
      --bg: #f7f6f2;
      --ink: #171916;
      --muted: #6d716a;
      --line: #dcded6;
      --green: #687b61;
      --white: #fff;
      --soft: #eeefe9;
      --danger: #a13d3d;
    }

    * { box-sizing: border-box; }
    [hidden] { display: none !important; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: Manrope, sans-serif;
    }

    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    button:disabled { opacity: .5; cursor: not-allowed; }

    .topbar {
      padding: 22px clamp(20px, 5vw, 70px);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      border-bottom: 1px solid var(--line);
      background: var(--white);
    }

    .brand {
      text-decoration: none;
      color: var(--ink);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .07em;
    }

    .topbar-note, .eyebrow {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .18em;
      color: var(--green);
      text-transform: uppercase;
    }

    .container {
      max-width: 1180px;
      margin: 0 auto;
      padding: 55px 24px 110px;
    }

    h1, h2, h3 {
      font-family: "DM Serif Display", serif;
      font-weight: 400;
    }

    h1 {
      font-size: clamp(42px, 7vw, 78px);
      margin: 10px 0 18px;
      line-height: 1.05;
    }

    h2 { font-size: 32px; margin: 0 0 20px; }
    h3 { font-size: 25px; margin: 0 0 14px; }
    p { line-height: 1.8; }
    .muted { color: var(--muted); }
    .small { font-size: 12px; }

    .auth-card {
      max-width: 500px;
      margin: 40px auto;
      padding: clamp(25px, 5vw, 48px);
      background: var(--white);
      border: 1px solid var(--line);
    }

    .field { margin-bottom: 20px; }

    label {
      display: block;
      margin-bottom: 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    input, textarea, select {
      display: block;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 0;
      padding: 13px 15px;
      background: var(--white);
      color: var(--ink);
      outline-offset: 3px;
    }

    textarea {
      min-height: 260px;
      resize: vertical;
      line-height: 1.8;
    }

    .btn {
      border: 1px solid var(--ink);
      background: var(--ink);
      color: var(--white);
      padding: 13px 20px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .btn.secondary {
      background: transparent;
      color: var(--ink);
    }

    .btn.green {
      background: var(--green);
      border-color: var(--green);
    }

    .btn.danger {
      color: var(--danger);
      border-color: var(--danger);
      background: transparent;
    }

    .btn.small-btn { padding: 10px 14px; font-size: 10px; }

    .actions, .top-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .actions { margin-top: 22px; }

    .dashboard-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 30px;
    }

    .tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--line);
      margin: 35px 0 32px;
      padding-bottom: 12px;
    }

    .tab {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 12px 16px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .tab.active {
      color: var(--white);
      background: var(--green);
    }

    .section { margin-top: 42px; }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 25px 0;
    }

    .stat {
      background: var(--white);
      border: 1px solid var(--line);
      padding: 25px;
    }

    .stat-link {
      width: 100%;
      text-align: left;
      color: var(--ink);
      cursor: pointer;
      transition: border-color .18s ease, background-color .18s ease;
    }

    .stat-link:hover, .stat-link:focus-visible {
      border-color: var(--green);
      background: var(--soft);
    }

    .stat-link:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 3px;
    }

    .stat-hint {
      margin-top: 12px;
      color: var(--green);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .03em;
    }

    .stat-number {
      font-family: "DM Serif Display", serif;
      font-size: 43px;
      line-height: 1.2;
    }

    .stat-label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      margin-top: 8px;
    }

    .article-list { display: grid; gap: 12px; }

    .article-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 22px;
      background: var(--white);
      border: 1px solid var(--line);
    }

    .article-info { min-width: 0; }

    .article-title {
      margin: 0 0 6px;
      font-size: 15px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .article-meta {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.8;
    }

    .status {
      display: inline-block;
      color: var(--green);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .editor-panel, .detail-panel {
      margin-top: 35px;
      padding: clamp(22px, 4vw, 40px);
      background: var(--white);
      border: 1px solid var(--line);
    }

    .detail-panel { margin-bottom: 40px; }

    .detail-content {
      font-size: 14px;
      line-height: 1.95;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      margin: 30px 0;
      padding: 25px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .detail-excerpt {
      font-size: 14px;
      color: var(--muted);
      white-space: pre-wrap;
    }

    .detail-cover {
      width: 100%;
      max-height: 420px;
      object-fit: cover;
      margin-top: 20px;
    }

    .subsection {
      margin-top: 35px;
      padding-top: 25px;
      border-top: 1px solid var(--line);
    }

    .note {
      padding: 18px;
      border: 1px solid var(--line);
      margin: 12px 0;
      background: var(--bg);
    }

    .note-meta {
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .note-body {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      font-size: 13px;
      line-height: 1.8;
    }

    .message {
      margin-top: 18px;
      font-size: 12px;
      line-height: 1.7;
      color: var(--green);
      white-space: pre-wrap;
    }

    .message.error { color: var(--danger); }

    .filters {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }

    .filters input { flex: 2; min-width: 180px; }
    .filters select { flex: 1; min-width: 150px; }

    .collaborator {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 22px;
      border: 1px solid var(--line);
      background: var(--white);
      margin-bottom: 12px;
    }

    .pill {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .04em;
      padding: 7px 10px;
      background: var(--soft);
      color: var(--green);
    }

    .pill.inactive { color: var(--danger); }

    .info-box {
      padding: 20px;
      border: 1px solid var(--line);
      background: var(--soft);
      font-size: 12px;
      line-height: 1.8;
    }

    .version-row {
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      font-size: 12px;
    }

    .version-content {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      padding: 15px;
      background: var(--bg);
      margin-top: 12px;
      line-height: 1.8;
    }

    /* Urednička alatna traka i obavijesti */
    .toolbar { display:flex; align-items:center; gap:8px; margin-left:auto; }
    .tool-wrap { position:relative; }
    .tool-btn { position:relative; display:grid; place-items:center; width:42px; height:42px;
      border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:50%; }
    .tool-btn:hover, .tool-btn:focus-visible { border-color:var(--green); color:var(--green); background:var(--soft); }
    .tool-btn svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .tool-count { position:absolute; right:-5px; top:-6px; min-width:20px; height:20px; padding:0 4px;
      border-radius:12px; background:var(--green); color:white; font-size:10px; font-weight:800;
      display:grid; place-items:center; border:2px solid white; }
    .tool-count[hidden] { display:none; }
    .tool-popover { position:absolute; z-index:20; top:calc(100% + 12px); right:0; width:min(350px, calc(100vw - 36px));
      background:white; border:1px solid var(--line); box-shadow:0 18px 48px rgba(0,0,0,.11); padding:22px; }
    .tool-popover h3 { font-size:23px; }
    .tool-popover p { font-size:12px; margin:10px 0; }
    .tool-popover .btn { width:100%; margin-top:12px; }
    .notification-panel { background:var(--white); border:1px solid var(--line); padding:clamp(20px,4vw,32px); margin:18px 0 28px; }
    .notification-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
    .notification-list { margin-top:15px; max-height:440px; overflow:auto; }
    .notification-item { display:block; width:100%; text-align:left; padding:17px 12px; background:transparent;
      border:0; border-top:1px solid var(--line); color:var(--ink); }
    .notification-item:hover, .notification-item:focus-visible { background:var(--soft); }
    .notification-item.unread { border-left:3px solid var(--green); padding-left:9px; }
    .notification-item strong { display:block; font-size:13px; margin-bottom:5px; }
    .notification-item span { display:block; font-size:11px; color:var(--muted); line-height:1.7; }
    @media (hover:hover) { .tool-wrap[data-tip]:hover::after { content:attr(data-tip); position:absolute;
      top:calc(100% + 6px); right:0; z-index:30; white-space:nowrap; padding:7px 10px;
      background:var(--ink); color:white; font-size:10px; font-weight:700; pointer-events:none; } }

    .empty {
      color: var(--muted);
      font-size: 13px;
      padding: 20px 0;
    }

    @media (max-width: 760px) {
      .container { padding: 35px 20px 75px; }
      .topbar { padding: 18px 20px; }
      .topbar-note { display:none; }
      .topbar { gap:8px; }
      .brand { font-size:11px; letter-spacing:.02em; }
      .toolbar { gap:5px; }
      .tool-btn { width:35px; height:35px; }
      .tool-btn svg { width:17px; height:17px; }
      .tool-popover { right:-45px; }

      .dashboard-head { flex-direction: column; }
      .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .article-row, .collaborator {
        flex-direction: column;
        align-items: flex-start;
      }
      .filters { flex-direction: column; }
      .filters input, .filters select { width: 100%; }
      .tab { padding: 10px; }
      .stat { padding: 18px; }
      .detail-content { padding: 20px 0; }
    }