/* // FILE: site/public/assets/app.css */
:root {
      --bg: #070101;
      --bg-2: #110404;
      --panel: rgba(15, 5, 5, .94);
      --panel-2: rgba(23, 8, 8, .96);
      --card: #130707;
      --card-2: #1a0909;
      --line: #3a1d1d;
      --line-soft: #281313;
      --text: #f4e9e3;
      --title: #fff0e6;
      --muted: #c4aaa1;
      --muted-2: #8f746c;
      --gold: #d4a13b;
      --gold-2: #f2ddb2;
      --red: #c42a1f;
      --red-dark: #7f1111;
      --green: #1fc46b;
      --green-soft: rgba(31, 196, 107, .14);
      --shadow: 0 24px 70px rgba(0, 0, 0, .55);
      --radius: 18px;
      --radius-sm: 12px;
      --hero-image: url("/assets/hero-tohell.webp");
      --hero-height: 190px;
      --hero-position: center top;
      --panel-drop: 170px;
      --texture:
        radial-gradient(circle at 18% 12%, rgba(118, 22, 22, .20), transparent 28%),
        radial-gradient(circle at 78% 28%, rgba(70, 10, 10, .16), transparent 34%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #100303 0%, #070101 46%, #130404 100%);
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background: var(--texture);
      font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height: 1.45;
      overflow-x: hidden;
    }

    body::-webkit-scrollbar { width: 10px; height: 10px; }
    body::-webkit-scrollbar-track { background: #070303; }
    body::-webkit-scrollbar-thumb {
      background: #4a2424;
      border-radius: 999px;
      border: 2px solid #070303;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button { cursor: pointer; }

    button:disabled {
      cursor: not-allowed;
      opacity: .55;
      transform: none !important;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    small { color: var(--muted); }

    .hidden { display: none !important; }

    .feed-list > .post-card,
    .applications-list > *,
    .team-grid > *,
    .cs-presence-list > *,
    .cs-video-list > *,
    .post-report-card {
      content-visibility: auto;
      contain-intrinsic-size: 1px 320px;
    }

    .app {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      padding-top: 18px;
    }

    .top-image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: calc(var(--hero-height) + var(--panel-drop) + 380px);
      min-height: 680px;
      background-image:
        linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.02) 22%, rgba(0,0,0,.02) 78%, rgba(0,0,0,.22) 100%),
        linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.03) 42%, rgba(0,0,0,.18) 100%);
      background-size: cover;
      background-position: var(--hero-position);
      background-repeat: no-repeat;
      opacity: .82;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    html.hero-image-ready .top-image {
      background-image:
        linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.02) 22%, rgba(0,0,0,.02) 78%, rgba(0,0,0,.22) 100%),
        linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.03) 42%, rgba(0,0,0,.18) 100%),
        var(--hero-image);
    }

    .top-image::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 320px;
      background: linear-gradient(
        180deg,
        rgba(16, 3, 3, 0) 0%,
        rgba(16, 3, 3, .06) 12%,
        rgba(16, 3, 3, .20) 28%,
        rgba(16, 3, 3, .42) 48%,
        rgba(16, 3, 3, .70) 68%,
        rgba(16, 3, 3, .90) 84%,
        #100303 100%
      );
      z-index: 1;
      pointer-events: none;
    }

    .top-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 6px);
      opacity: .26;
      z-index: 2;
    }

    .shell {
      position: relative;
      z-index: 1;
      width: min(1280px, calc(100% - 24px));
      margin: 0 auto;
    }

    .hero {
      min-height: var(--hero-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 18px 16px;
    }

    .hero-clean {
      pointer-events: none;
    }

    .hero-copy {
      width: min(760px, 100%);
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--gold-2);
      text-transform: uppercase;
      letter-spacing: .13em;
      font-size: 10px;
      font-weight: 900;
    }

    .kicker::before {
      content: "♦";
      color: var(--gold);
    }

    .hero h1 {
      margin: 7px 0 7px;
      color: #fff5eb;
      font-size: clamp(30px, 4vw, 48px);
      line-height: .98;
      letter-spacing: -.035em;
      text-shadow: 0 12px 28px rgba(0,0,0,.88);
    }

    .hero p {
      margin: 0;
      max-width: 760px;
      color: #eadbd4;
      font-size: 13px;
      font-weight: 800;
      text-shadow: 0 10px 22px rgba(0,0,0,.90);
    }

    .hero-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .page {
      position: relative;
      z-index: 2;
      width: min(1280px, calc(100% - 24px));
      margin: var(--panel-drop) auto 22px;
      border: 1px solid rgba(255, 60, 24, .36);
      background: rgba(9, 2, 2, .68);
      box-shadow: var(--shadow);
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      border-bottom: 1px solid var(--line);
      background: #b91608;
      overflow: hidden;
    }

    .tab {
      position: relative;
      min-height: 52px;
      padding: 0 10px;
      border: 0;
      border-right: 1px solid rgba(0,0,0,.22);
      border-radius: 0;
      color: #ffe7dd;
      background: rgba(55, 12, 8, .92);
      font-size: 15px;
      font-weight: 900;
      white-space: nowrap;
      transition: background .15s ease, color .15s ease;
    }

    .tab:last-child { border-right: 0; }
    .tab:hover { color: #fff; background: rgba(255, 55, 18, .50); }
    .tab.active { color: #fff; background: #ff3b12; }

    .tab.active::before {
      content: "";
      position: absolute;
      top: 0;
      left: 12px;
      right: 12px;
      height: 3px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      box-shadow: 0 0 14px rgba(212, 161, 59, .42);
    }

    .layout {
      display: grid;
      grid-template-columns: 285px minmax(0, 1fr);
      min-height: 680px;
    }

    .sidebar {
      border-right: 1px solid var(--line);
      background: rgba(11, 5, 5, .72);
    }

    .sidebar-stack {
      display: grid;
      gap: 12px;
      padding: 14px;
      position: sticky;
      top: 0;
    }

    .box {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(8, 4, 4, .72);
      overflow: hidden;
    }

    .box h3 {
      margin: 0;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: var(--title);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .box-body {
      padding: 14px;
    }

    .side-links {
      display: grid;
      gap: 8px;
    }

    .side-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 38px;
      padding: 9px 11px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(255,255,255,.026);
      color: var(--text);
      font-weight: 900;
      transition: background .15s ease, border-color .15s ease;
    }

    .side-link:hover {
      border-color: rgba(212, 161, 59, .42);
      background: rgba(212, 161, 59, .07);
    }

    .side-link span:last-child {
      color: var(--gold);
      font-size: 14px;
    }

    .main {
      min-width: 0;
      padding: 18px;
    }

    .topbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .page-title h2 {
      margin: 6px 0 4px;
      color: var(--title);
      font-size: 26px;
      line-height: 1.05;
    }

    .page-title p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      max-width: 760px;
    }

    .view { display: none; }
    .view.active {
      display: block;
      animation: viewIn .16s ease;
    }

    @keyframes viewIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    input,
    select,
    textarea {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #0c0505;
      color: var(--text);
      outline: none;
      padding: 9px 11px;
      transition: border-color .15s ease, background .15s ease;
    }

    input::placeholder,
    textarea::placeholder { color: #8e7870; }

    textarea {
      resize: vertical;
      min-height: 94px;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(212, 161, 59, .65);
      background: #100606;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--text);
      box-shadow: 0 0 0 1000px #0c0505 inset;
      transition: background-color 9999s ease-in-out 0s;
    }

    #recruitmentForm input,
    #recruitmentForm select,
    #recruitmentForm textarea,
    #recruitmentModal input,
    #recruitmentModal select,
    #recruitmentModal textarea {
      background: #0b0404 !important;
      color: var(--text) !important;
      color-scheme: dark;
    }

    #recruitmentForm input:-webkit-autofill,
    #recruitmentForm input:-webkit-autofill:hover,
    #recruitmentForm input:-webkit-autofill:focus,
    #recruitmentModal input:-webkit-autofill,
    #recruitmentModal input:-webkit-autofill:hover,
    #recruitmentModal input:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--text) !important;
      caret-color: var(--text);
      box-shadow: 0 0 0 1000px #0b0404 inset !important;
      border-color: rgba(212, 161, 59, .45) !important;
    }

    input[type="file"] {
      color: var(--muted);
      padding: 7px 8px;
    }

    input[type="file"]::file-selector-button {
      min-height: 30px;
      margin-right: 10px;
      border: 1px solid rgba(212, 161, 59, .45);
      border-radius: 10px;
      background: linear-gradient(180deg, #e1b84d, #c69228);
      color: #160b05;
      font-weight: 900;
      cursor: pointer;
    }

    input[type="file"]::-webkit-file-upload-button {
      min-height: 30px;
      margin-right: 10px;
      border: 1px solid rgba(212, 161, 59, .45);
      border-radius: 10px;
      background: linear-gradient(180deg, #e1b84d, #c69228);
      color: #160b05;
      font-weight: 900;
      cursor: pointer;
    }

    label {
      display: block;
      color: var(--gold-2);
      font-size: 11px;
      font-weight: 900;
      margin-bottom: 6px;
    }

    .field small {
      display: block;
      margin-top: 5px;
      font-size: 11px;
      line-height: 1.35;
    }

    .form-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .stack { display: grid; gap: 12px; }

    .btn {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 9px 13px;
      color: var(--text);
      background: #120707;
      font-weight: 900;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      border-color: rgba(212, 161, 59, .45);
      background: #180909;
    }

    .btn-primary {
      border-color: rgba(212, 161, 59, .52);
      background: linear-gradient(180deg, #e1b84d, #c69228);
      color: #160b05;
      box-shadow: 0 12px 28px rgba(212, 161, 59, .16);
    }

    .btn-primary:hover {
      background: linear-gradient(180deg, #f0ca63, #d7a437);
    }

    .btn-red {
      border-color: rgba(196, 42, 31, .55);
      background: rgba(196, 42, 31, .14);
      color: #ffd7d2;
    }

    .btn-green {
      border-color: rgba(31, 196, 107, .45);
      background: rgba(31, 196, 107, .14);
      color: #d8ffe7;
    }

    .btn-soft {
      background: rgba(255,255,255,.04);
    }

    .btn-full { width: 100%; }

    .btn-mini {
      min-height: 30px;
      padding: 6px 10px;
      border-radius: 10px;
      font-size: 11px;
    }

    .inline-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 25px;
      padding: 5px 9px;
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line-soft);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .badge.gold {
      color: #ffe4aa;
      background: rgba(212, 161, 59, .13);
      border-color: rgba(212, 161, 59, .38);
    }

    .badge.red {
      color: #ffd2cc;
      background: rgba(196, 42, 31, .13);
      border-color: rgba(196, 42, 31, .42);
    }

    .badge.green {
      color: #c9f0c9;
      background: rgba(31, 196, 107, .13);
      border-color: rgba(31, 196, 107, .42);
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(8, 4, 4, .72);
      overflow: hidden;
      margin-bottom: 14px;
    }

    .panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 15px 16px;
      border-bottom: 1px solid var(--line);
      background: rgba(18, 7, 7, .90);
    }

    .panel-head h3 {
      margin: 0;
      color: var(--title);
      font-size: 17px;
      line-height: 1.1;
    }

    .panel-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 12px;
    }

    .panel-body { padding: 16px; }

    .explain-banner {
      border: 1px solid rgba(212, 161, 59, .30);
      border-radius: 18px;
      background:
        radial-gradient(circle at 0 0, rgba(212, 161, 59, .13), transparent 32%),
        rgba(13, 5, 5, .92);
      padding: 16px;
      margin-bottom: 14px;
      display: grid;
      gap: 8px;
    }

    .explain-banner strong {
      color: var(--title);
      font-size: 20px;
      line-height: 1.15;
    }

    .explain-banner span {
      color: var(--muted);
      font-weight: 700;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .info-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.022);
      padding: 16px;
      min-height: 126px;
    }

    .info-card h4 {
      margin: 0 0 8px;
      color: var(--title);
      font-size: 16px;
    }

    .info-card p {
      margin: 0;
      color: #e8d8d1;
      line-height: 1.55;
    }

    .clean-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 9px;
    }

    .clean-list li {
      position: relative;
      border: 1px solid var(--line-soft);
      border-radius: 13px;
      background: rgba(255,255,255,.025);
      padding: 10px 12px 10px 34px;
      color: #eadbd4;
      font-weight: 800;
    }

    .clean-list li::before {
      content: "♦";
      position: absolute;
      left: 13px;
      top: 10px;
      color: var(--gold);
      font-size: 11px;
    }

    .timeline {
      display: grid;
      gap: 10px;
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr);
      gap: 12px;
      border: 1px solid var(--line-soft);
      border-radius: 14px;
      background: rgba(255,255,255,.024);
      padding: 12px;
    }

    .timeline-year {
      color: var(--gold-2);
      font-size: 19px;
      font-weight: 900;
    }

    .timeline-item strong {
      display: block;
      color: var(--title);
      font-size: 14px;
      margin-bottom: 3px;
    }

    .timeline-item span {
      color: var(--muted);
      font-weight: 700;
    }


    .classic-page {
      border: 1px solid rgba(255, 62, 24, .38);
      border-radius: 10px;
      background: rgba(0, 0, 0, .58);
      padding: 24px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
    }

    .staff-edit-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      padding: 10px 12px;
      border: 1px solid rgba(212, 161, 59, .34);
      border-radius: 12px;
      background: rgba(212, 161, 59, .055);
    }

    .staff-edit-bar strong {
      color: var(--gold-2);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .staff-edit-content.editing {
      outline: 1px dashed rgba(212, 161, 59, .62);
      border-radius: 10px;
      padding: 12px;
      background: rgba(212, 161, 59, .035);
    }

    .staff-edit-content.editing * {
      cursor: text;
    }

    .classic-title {
      margin: 0 0 16px;
      color: #ff3b12;
      font-size: 25px;
      line-height: 1.1;
      text-transform: none;
      text-shadow: 0 10px 22px rgba(0,0,0,.9);
    }

    .classic-lead {
      max-width: 900px;
      margin: 0 0 22px;
      color: #eee0db;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.7;
    }

    .classic-subtitle {
      margin: 24px 0 14px;
      color: #ff3b12;
      font-size: 17px;
      letter-spacing: .04em;
      border-bottom: 1px solid rgba(255, 62, 24, .38);
      padding-bottom: 8px;
    }

    .classic-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
    }

    .classic-section {
      border-left: 3px solid #ff3b12;
      background: rgba(0,0,0,.30);
      padding: 14px 16px;
    }

    .classic-section h3 {
      margin: 0 0 12px;
      color: #fff0e6;
      font-size: 15px;
    }

    .classic-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 0;
    }

    .classic-list li {
      position: relative;
      padding: 10px 8px 10px 28px;
      border-bottom: 1px dotted rgba(255, 62, 24, .25);
      color: #eadbd4;
      font-weight: 700;
      line-height: 1.45;
    }

    .classic-list li:last-child { border-bottom: 0; }

    .classic-list li::before {
      content: "•";
      position: absolute;
      left: 8px;
      top: 8px;
      color: #ff3b12;
      font-size: 18px;
      line-height: 1;
    }

    .classic-list.check li::before { content: "✓"; color: #41d681; font-size: 13px; top: 11px; }
    .classic-list.fire li::before { content: "🔥"; font-size: 12px; top: 11px; }

    .classic-history {
      display: grid;
      gap: 9px;
      margin: 0 0 8px;
    }

    .classic-history-row {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      color: #eadbd4;
      font-weight: 700;
    }

    .classic-year {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      border-radius: 3px;
      background: #ff3b12;
      color: #160501;
      font-weight: 900;
      font-size: 12px;
    }

    .simple-callout {
      border: 1px solid rgba(255, 62, 24, .36);
      border-radius: 8px;
      background: rgba(0,0,0,.35);
      padding: 16px;
      color: #eadbd4;
      font-weight: 800;
      line-height: 1.55;
    }

    .feed-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }

    .composer-tools {
      display: grid;
      grid-template-columns: minmax(160px, .30fr) minmax(210px, .35fr) minmax(0, 1fr);
      gap: 12px;
    }

    .feed-list {
      display: grid;
      gap: 14px;
    }

    .post-card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(8, 4, 4, .74);
      overflow: hidden;
    }

    .post-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line-soft);
    }

    .post-author {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, var(--red), var(--red-dark));
      color: #fff4ee;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .post-author strong {
      display: block;
      color: var(--title);
      font-size: 14px;
      line-height: 1.2;
      word-break: break-word;
    }

    .post-author small {
      display: block;
      margin-top: 2px;
      font-weight: 800;
      font-size: 11px;
    }

    .post-body {
      padding: 14px 16px 0;
    }

    .post-text {
      margin: 0;
      color: #eadbd4;
      font-size: 14px;
      line-height: 1.55;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .post-caption {
      display: block;
      width: min(100%, 540px);
      max-width: 540px;
      margin: 10px auto 0;
      color: #eadbd4;
      font-size: 13px;
      line-height: 1.45;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow-wrap: normal;
      word-break: normal;
    }

    .post-caption-preview {
      display: flex;
      align-items: baseline;
      gap: 4px;
      min-width: 0;
    }

    .post-caption-text {
      display: inline-block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
    }

    .caption-more {
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      color: var(--gold-2);
      font-weight: 900;
      padding: 0 3px;
      cursor: pointer;
      text-decoration: none;
    }

    .post-media-open,
    .post-media-open img {
      cursor: default !important;
    }

    .post-detail-caption {
      border-bottom: 1px solid var(--line-soft);
      padding: 13px 14px;
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .post-detail-caption h4 {
      margin: 0;
      color: var(--gold-2);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .post-detail-caption .post-caption,
    .post-detail-caption .post-text {
      width: 100%;
      max-width: 100%;
      margin: 0;
      white-space: pre-wrap;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .post-detail-meta-box {
      border-bottom: 1px solid var(--line-soft);
      padding: 12px 14px;
      color: #eadbd4;
      font-weight: 800;
      line-height: 1.45;
    }

    .post-detail-meta-box span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 4px;
    }

    .youtube-wrap,
    .image-wrap,
    .message-wrap {
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      overflow: hidden;
      background: #090303;
    }

    .youtube-frame {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      display: block;
      background: #000;
    }

    .image-wrap {
      width: min(100%, 540px) !important;
      max-width: 540px;
      margin: 0 auto;
    }

    .post-card .image-wrap {
      width: min(100%, 540px) !important;
      max-width: 540px;
    }

    .image-wrap img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 680px;
      object-fit: contain;
      background: #090303;
    }

    .post-detail-left .image-wrap {
      width: min(100%, 300px) !important;
      max-width: 300px;
    }

    .image-placeholder,
    .message-placeholder {
      min-height: 220px;
      display: grid;
      place-items: center;
      padding: 22px;
      text-align: center;
      background:
        radial-gradient(circle at 30% 15%, rgba(212,161,59,.20), transparent 30%),
        radial-gradient(circle at 80% 75%, rgba(196,42,31,.20), transparent 34%),
        #0b0303;
      color: var(--gold-2);
      font-size: 18px;
      font-weight: 900;
    }

    .post-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding: 12px 16px 14px;
    }

    .post-actions-left,
    .post-actions-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .comments {
      border-top: 1px solid var(--line-soft);
      padding: 12px 16px 16px;
      display: grid;
      gap: 10px;
      background: rgba(255,255,255,.012);
    }

    .comment-item {
      border: 1px solid var(--line-soft);
      border-radius: 13px;
      background: rgba(255,255,255,.026);
      padding: 9px 11px;
    }

    .comment-item strong {
      color: var(--gold-2);
      font-size: 12px;
    }

    .comment-item span {
      display: block;
      margin-top: 4px;
      color: #eadbd4;
      font-weight: 700;
    }

    .comment-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    .comment-form textarea {
      min-height: 42px;
      height: 42px;
      resize: vertical;
    }

    .post-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .modal-card.post-comments-modal-card {
      width: min(1240px, calc(100vw - 28px));
      height: min(88vh, 840px);
      max-height: min(88vh, 840px);
    }

    .post-comments-modal-card .modal-body {
      overflow: hidden;
      padding: 14px;
      min-height: 0;
    }

    .post-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.75fr) minmax(360px, .75fr);
      gap: 0;
      align-items: stretch;
      height: 100%;
      min-height: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(8, 4, 4, .70);
    }

    .post-detail-left,
    .post-detail-right,
    .post-detail-comments-panel {
      min-width: 0;
      min-height: 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(212, 161, 59, .62) rgba(9, 3, 3, .90);
    }

    .post-detail-left {
      background: #050202;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 0;
      border-right: 1px solid var(--line);
    }

    .post-detail-left .image-wrap,
    .post-detail-left .youtube-wrap {
      width: 100% !important;
      max-width: 100% !important;
      height: 100%;
      max-height: none;
      margin: 0;
      border: 0;
      border-radius: 0;
      background: #050202;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .post-detail-left .image-wrap img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      background: #050202;
      margin: auto;
    }

    .post-detail-left .youtube-frame {
      width: 100%;
      height: auto !important;
      aspect-ratio: 16 / 9;
      max-width: 100%;
      max-height: 100%;
      border: 0;
      background: #000;
      display: block;
      flex: 0 1 auto;
    }

    .post-detail-left .youtube-wrap {
      background: #000;
    }

    .post-detail-right {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      overflow: hidden;
      height: 100%;
      max-height: none;
      background: rgba(8, 4, 4, .74);
    }

    .post-detail-comments-panel {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
      border-top: 1px solid var(--line-soft);
    }

    .post-detail-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .post-detail-comments-head {
      padding: 13px 14px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(18, 7, 7, .86);
    }

    .post-detail-comments-head h4 {
      margin: 0;
      color: var(--title);
      font-size: 15px;
    }

    .post-comment-list {
      overflow: auto;
      min-height: 0;
      padding: 12px 14px;
      display: grid;
      gap: 10px;
      align-content: start;
      scrollbar-width: thin;
      scrollbar-color: rgba(212, 161, 59, .62) rgba(9, 3, 3, .90);
    }

    .post-comments-modal-card .post-detail-left::-webkit-scrollbar,
    .post-comments-modal-card .post-detail-right::-webkit-scrollbar,
    .post-comments-modal-card .post-comment-list::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }

    .post-comments-modal-card .post-detail-left::-webkit-scrollbar-track,
    .post-comments-modal-card .post-detail-right::-webkit-scrollbar-track,
    .post-comments-modal-card .post-comment-list::-webkit-scrollbar-track {
      background: rgba(9, 3, 3, .90);
      border-radius: 999px;
    }

    .post-comments-modal-card .post-detail-left::-webkit-scrollbar-thumb,
    .post-comments-modal-card .post-detail-right::-webkit-scrollbar-thumb,
    .post-comments-modal-card .post-comment-list::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(212, 161, 59, .88), rgba(139, 91, 18, .88));
      border-radius: 999px;
      border: 2px solid rgba(9, 3, 3, .95);
    }

    .post-comments-modal-card .post-detail-left::-webkit-scrollbar-thumb:hover,
    .post-comments-modal-card .post-detail-right::-webkit-scrollbar-thumb:hover,
    .post-comments-modal-card .post-comment-list::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(242, 221, 178, .92), rgba(212, 161, 59, .92));
    }

    .post-comment-form-wrap {
      padding: 12px 14px;
      border-top: 1px solid var(--line-soft);
      background: rgba(18, 7, 7, .62);
    }


    .post-detail-right .post-detail-head {
      margin: 0;
      padding: 13px 14px;
      border-bottom: 1px solid var(--line-soft);
      background: rgba(18, 7, 7, .86);
    }

    .post-detail-right .post-detail-comments-head {
      background: rgba(18, 7, 7, .58);
    }

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

    .post-report-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.022);
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .post-report-card.resolved {
      border-color: rgba(31, 196, 107, .34);
      background: rgba(31, 196, 107, .045);
    }

    .post-report-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .post-report-meta .meta-box { min-height: auto; }

    .auth-choice {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .auth-choice label {
      margin: 0;
      border: 1px solid var(--line-soft);
      border-radius: 13px;
      background: rgba(255,255,255,.025);
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 11px;
      color: var(--text);
      font-weight: 900;
      cursor: pointer;
    }

    .auth-choice input {
      width: auto;
      min-height: 0;
      padding: 0;
      accent-color: var(--gold);
    }

    .logged-panel {
      display: grid;
      gap: 11px;
    }

    .hello-box {
      border: 1px solid rgba(212, 161, 59, .28);
      border-radius: 15px;
      background: rgba(212, 161, 59, .045);
      padding: 12px;
      color: #eadbd4;
      font-weight: 800;
      line-height: 1.5;
    }

    .hello-box strong { color: var(--title); }
    .hello-box code {
      color: var(--gold-2);
      background: rgba(0,0,0,.24);
      border: 1px solid var(--line-soft);
      border-radius: 7px;
      padding: 2px 5px;
      word-break: break-word;
    }

    .personal-actions {
      display: grid;
      gap: 8px;
    }

    .recover-note {
      border-top: 1px solid var(--line-soft);
      padding-top: 10px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .modal-open { overflow: hidden; }

    .modal-layer {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(0, 0, 0, .74);
      backdrop-filter: blur(7px);
    }

    .modal-layer.show { display: grid; }

    .modal-card {
      width: min(860px, 100%);
      max-height: min(88vh, 820px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      border: 1px solid rgba(212, 161, 59, .34);
      border-radius: 21px;
      background:
        radial-gradient(circle at 12% 0%, rgba(118, 22, 22, .20), transparent 32%),
        radial-gradient(circle at 88% 20%, rgba(212, 161, 59, .10), transparent 28%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px),
        #080202;
      box-shadow: 0 30px 90px rgba(0, 0, 0, .68);
      overflow: hidden;
    }

    .modal-card.large { width: min(1120px, 100%); }

    .modal-card.confirm-card {
      width: min(440px, calc(100vw - 28px));
      padding: 22px;
    }

    .confirm-card .modal-head {
      padding: 0 0 12px;
      border-bottom: 0;
    }

    .confirm-card .modal-body {
      padding: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .confirm-card .modal-foot {
      padding: 18px 0 0;
      border-top: 0;
      justify-content: flex-end;
    }

    .modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 20px;
      border-bottom: 1px solid var(--line);
      background: rgba(18, 7, 7, .90);
    }

    .modal-head h3 {
      margin: 6px 0 5px;
      color: var(--title);
      font-size: 22px;
      line-height: 1.05;
    }

    .modal-head p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .modal-close {
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 12px;
      font-size: 16px;
    }

    .modal-body {
      overflow: auto;
      padding: 18px 20px 20px;
    }

    .modal-foot {
      padding: 14px 20px;
      border-top: 1px solid var(--line);
      background: rgba(18, 7, 7, .72);
    }

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

    .application-section-title {
      margin: 18px 0 10px;
      color: var(--muted);
      font-family: var(--font-display);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .application-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.022);
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .application-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .application-head strong {
      color: var(--title);
      font-size: 16px;
    }

    .application-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .meta-box {
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(0,0,0,.18);
      padding: 9px 10px;
      min-width: 0;
    }

    .meta-box span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 3px;
    }

    .meta-box b {
      display: block;
      color: var(--title);
      font-size: 12px;
      word-break: break-word;
    }

    .toast-stack {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1200;
      display: grid;
      gap: 8px;
      width: min(380px, calc(100vw - 24px));
      pointer-events: none;
    }

    .toast {
      border: 1px solid rgba(212, 161, 59, .38);
      border-radius: 13px;
      background:
        radial-gradient(circle at 0% 0%, rgba(212, 161, 59, .10), transparent 42%),
        #110707;
      color: var(--title);
      padding: 11px 12px;
      font-weight: 900;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
      animation: toastIn .18s ease;
    }

    .toast.success {
      border-color: rgba(31, 196, 107, .50);
      background:
        radial-gradient(circle at 0% 0%, rgba(31, 196, 107, .16), transparent 42%),
        #110707;
      color: #d8ffe7;
    }

    .toast.error {
      border-color: rgba(196, 42, 31, .56);
      background:
        radial-gradient(circle at 0% 0%, rgba(196, 42, 31, .18), transparent 42%),
        #110707;
      color: #ffd2cc;
    }

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .empty {
      border: 1px dashed rgba(212, 161, 59, .28);
      border-radius: 13px;
      color: var(--gold-2);
      background: rgba(212, 161, 59, .025);
      padding: 14px;
      text-align: center;
      font-weight: 900;
    }



    .modal-card.recruitment-modal-card {
      width: min(1080px, calc(100vw - 36px));
    }

    .recruitment-form-body {
      padding: 16px 18px 18px;
    }

    .recruitment-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 410px);
      gap: 14px;
      align-items: start;
    }

    .recruitment-main,
    .recruitment-sidebar { min-width: 0; }

    .recruitment-main,
    .recruitment-sidebar {
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .recruitment-main .cadastro-panel-body {
      display: grid;
      gap: 12px;
    }

    .recruitment-check {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 8px;
      padding: 9px 11px;
      border: 1px solid var(--line-soft);
      background: rgba(255,255,255,.025);
      color: var(--text);
      font-weight: 900;
      line-height: 1.45;
    }

    .recruitment-check input {
      margin-top: 2px;
      flex: 0 0 auto;
    }

    .recruitment-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .submit-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      white-space: nowrap;
    }

    .submit-status.hidden {
      display: none !important;
    }

    .submit-spinner {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, .18);
      border-top-color: var(--gold);
      animation: tohell-submit-spin .75s linear infinite;
      flex: 0 0 auto;
    }

    .btn.is-loading,
    .btn:disabled.is-loading {
      cursor: progress;
      opacity: .78;
      pointer-events: none;
    }

    @keyframes tohell-submit-spin {
      to { transform: rotate(360deg); }
    }

    .recruitment-check-foot {
      width: min(520px, 100%);
      margin: 0;
      border-radius: 12px;
      min-height: 38px;
    }

    .recruitment-check-foot input {
      width: auto;
      min-height: 0;
      margin-top: 2px;
      flex: 0 0 auto;
    }

    .focus-field {
      grid-column: 1 / -1;
    }

    .focus-check-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 7px;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #0c0505;
      padding: 9px 10px;
    }

    .focus-check-grid label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 0;
      color: var(--text);
      font-size: 11px;
      font-weight: 800;
      line-height: 1.25;
      cursor: pointer;
    }

    .focus-check-grid input {
      width: auto;
      min-height: 0;
      padding: 0;
      accent-color: var(--gold);
    }


    .recruitment-hint {
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .cadastro-panel {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(8, 4, 4, .72);
      overflow: hidden;
    }

    .cadastro-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 13px 14px;
      border-bottom: 1px solid var(--line);
      background: rgba(18, 7, 7, .86);
    }

    .cadastro-panel-head h4 {
      margin: 0;
      color: var(--title);
      font-size: 15px;
      line-height: 1.15;
    }

    .cadastro-panel-body { padding: 14px; }

    .personagens-wrap {
      display: grid;
      gap: 12px;
    }

    .recruitment-char {
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
        rgba(255,255,255,.018);
      padding: 13px;
      display: grid;
      gap: 11px;
    }

    .recruitment-char-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .recruitment-char-head strong {
      color: var(--title);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .recruitment-char-actions {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }

    .char-validation {
      border: 1px solid rgba(212, 161, 59, .38);
      border-radius: 12px;
      background: rgba(212, 161, 59, .07);
      padding: 10px 11px;
      color: var(--gold-2);
      font-weight: 900;
      line-height: 1.4;
    }

    .char-validation.success {
      border-color: rgba(31, 196, 107, .45);
      background: rgba(31, 196, 107, .10);
      color: #d8ffe7;
    }

    .char-validation.error {
      border-color: rgba(196, 42, 31, .54);
      background: rgba(196, 42, 31, .12);
      color: #ffd2cc;
    }

    .char-validation.warning {
      border-color: rgba(212, 161, 59, .58);
      background: rgba(212, 161, 59, .12);
      color: #ffe3a3;
    }

    .recruitment-char select:disabled,
    .recruitment-char input[readonly] {
      color: var(--title);
      background: rgba(255, 255, 255, .035);
      border-color: rgba(212, 161, 59, .32);
      opacity: 1;
    }

    .preview-cadastro {
      min-height: 132px;
      border: 1px dashed rgba(212, 161, 59, .28);
      border-radius: 13px;
      background: rgba(212, 161, 59, .018);
      padding: 13px;
      display: grid;
      gap: 9px;
    }

    .preview-cadastro .preview-line {
      border-bottom: 1px dotted rgba(212, 161, 59, .22);
      padding-bottom: 7px;
      color: #eadbd4;
      font-weight: 800;
    }

    .preview-cadastro .preview-line:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .preview-cadastro span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 3px;
      font-weight: 900;
    }

    .preview-monitor-card {
      display: grid;
      gap: 10px;
    }

    .preview-monitor-head {
      border: 1px solid var(--line-soft);
      border-radius: 13px;
      background: rgba(255,255,255,.024);
      padding: 10px 11px;
    }

    .preview-monitor-head strong {
      display: block;
      color: var(--title);
      font-size: 14px;
      line-height: 1.25;
    }

    .preview-monitor-head small {
      display: block;
      margin-top: 3px;
      font-weight: 800;
    }

    .preview-monitor-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .preview-monitor-meta div {
      border: 1px solid var(--line-soft);
      border-radius: 11px;
      background: rgba(0,0,0,.18);
      padding: 8px 9px;
      color: #eadbd4;
      font-weight: 800;
      min-width: 0;
      word-break: break-word;
    }

    .preview-monitor-meta span {
      margin-bottom: 3px;
    }

    .preview-userbar-list {
      display: grid;
      gap: 8px;
    }

    .preview-userbar-item {
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(255,255,255,.024);
      padding: 8px;
      display: grid;
      gap: 7px;
    }

    .preview-userbar-item img {
      width: 100%;
      max-width: 320px;
      height: auto;
      display: block;
      border-radius: 7px;
      background: #090303;
    }

    .preview-userbar-item strong {
      color: var(--title);
      font-size: 12px;
    }

    .preview-userbar-item small {
      display: block;
      margin-top: 2px;
      font-weight: 800;
    }

    .application-character-list {
      display: grid;
      gap: 6px;
    }

    .application-character-item {
      border: 1px solid var(--line-soft);
      border-radius: 10px;
      background: rgba(255,255,255,.024);
      padding: 7px 8px;
      color: var(--title);
      font-weight: 900;
      line-height: 1.35;
    }

    .application-character-item small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-weight: 800;
    }


    /* =========================================================
       CADASTRO CASTLE SIEGE
    ========================================================= */

    .modal-card.cs-signup-modal-card {
      width: min(1120px, calc(100vw - 36px));
      height: min(88vh, 860px);
      max-height: min(88vh, 860px);
    }

    .cs-form-body {
      display: grid;
      gap: 14px;
      padding: 16px 18px 18px;
      overflow: auto;
      min-height: 0;
      scrollbar-width: thin;
      scrollbar-color: rgba(212, 161, 59, .62) rgba(9, 3, 3, .90);
    }

    .cs-form-body::-webkit-scrollbar,
    .cs-presence-list::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }

    .cs-form-body::-webkit-scrollbar-track,
    .cs-presence-list::-webkit-scrollbar-track {
      background: rgba(9, 3, 3, .90);
      border-radius: 999px;
    }

    .cs-form-body::-webkit-scrollbar-thumb,
    .cs-presence-list::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(212, 161, 59, .88), rgba(139, 91, 18, .88));
      border-radius: 999px;
      border: 2px solid rgba(9, 3, 3, .95);
    }

    .cs-form-notice {
      border: 1px solid rgba(212, 161, 59, .30);
      border-radius: 15px;
      background: rgba(212, 161, 59, .07);
      color: #ffe4aa;
      padding: 12px 13px;
      font-weight: 800;
      line-height: 1.45;
    }

    .cs-form-notice strong,
    .cs-question label strong {
      color: #ffd2cc;
    }

    .cs-form-section {
      border: 1px solid var(--line);
      border-radius: 18px;
      background:
        radial-gradient(circle at 0 0, rgba(212, 161, 59, .055), transparent 34%),
        rgba(8, 4, 4, .72);
      overflow: hidden;
    }

    .cs-section-title {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 13px 14px;
      border-bottom: 1px solid var(--line);
      background: rgba(18, 7, 7, .86);
    }

    .cs-section-number {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      background: linear-gradient(180deg, #e1b84d, #c69228);
      color: #160b05;
      font-weight: 900;
      box-shadow: 0 10px 24px rgba(212, 161, 59, .13);
    }

    .cs-section-title h4 {
      margin: 0;
      color: var(--title);
      font-size: 15px;
      line-height: 1.15;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .cs-section-title p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
      font-weight: 700;
    }

    .cs-question,
    .cs-form-section > .field,
    .cs-form-section > .form-grid-2,
    .cs-form-section > .cs-accept-box,
    .cs-form-section > .recover-note {
      margin: 14px;
    }

    .cs-question label {
      display: block;
      margin: 0 0 8px;
      color: var(--gold-2);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.35;
    }

    .cs-options {
      display: grid;
      gap: 7px;
    }

    .cs-character-field {
      grid-column: 1 / -1;
    }

    .cs-character-panel {
      margin: 0;
      background: rgba(8, 4, 4, .58);
    }

    .cs-character-list {
      display: grid;
      gap: 10px;
    }

    .cs-character-card {
      border: 1px solid var(--line-soft);
      border-radius: 15px;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
        rgba(255,255,255,.018);
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .cs-character-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .cs-character-card-head strong {
      color: var(--title);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .cs-character-card .form-grid-2 {
      gap: 10px;
    }

    .cs-character-note {
      border: 1px solid rgba(212, 161, 59, .28);
      border-radius: 12px;
      background: rgba(212, 161, 59, .045);
      color: var(--muted);
      padding: 9px 10px;
      font-weight: 800;
      line-height: 1.4;
    }

    .cs-character-official-status {
      border: 1px solid rgba(212, 161, 59, .30);
      border-radius: 12px;
      background: rgba(212, 161, 59, .06);
      color: var(--gold-2);
      padding: 9px 10px;
      font-weight: 900;
      line-height: 1.35;
    }

    .cs-character-official-status strong,
    .cs-character-official-status span {
      display: block;
    }

    .cs-character-official-status span {
      color: var(--muted);
      font-weight: 800;
      margin-top: 2px;
    }

    .cs-character-official-status.success {
      border-color: rgba(31, 196, 107, .42);
      background: rgba(31, 196, 107, .10);
      color: #d8ffe7;
    }

    .cs-character-official-status.error {
      border-color: rgba(196, 42, 31, .50);
      background: rgba(196, 42, 31, .12);
      color: #ffd2cc;
    }

    .cs-character-official-status.warning {
      border-color: rgba(212, 161, 59, .42);
      background: rgba(212, 161, 59, .10);
      color: #ffe4aa;
    }

    .cs-character-list-view {
      display: grid;
      gap: 7px;
    }

    .cs-character-line {
      border: 1px solid var(--line-soft);
      border-radius: 11px;
      background: rgba(0,0,0,.18);
      padding: 8px 9px;
      color: var(--title);
      font-weight: 900;
      line-height: 1.35;
    }

    .cs-character-line small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-weight: 800;
    }

    .cs-options-grid {
      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    }

    .cs-option {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      min-height: 38px;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(255,255,255,.024);
      padding: 8px 10px;
      color: var(--text);
      font-weight: 800;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease;
    }

    .cs-option:hover {
      border-color: rgba(212, 161, 59, .45);
      background: rgba(212, 161, 59, .065);
    }

    .cs-option input,
    .cs-accept-box input {
      width: auto;
      min-height: 0;
      padding: 0;
      accent-color: var(--gold);
      flex: 0 0 auto;
    }

    .cs-position-box {
      margin-top: 12px;
      border: 1px solid rgba(212, 161, 59, .26);
      border-radius: 15px;
      background: rgba(0,0,0,.18);
      padding: 12px;
    }

    .cs-position-box h4 {
      margin: 0 0 10px;
      color: var(--gold-2);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .cs-position-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .cs-position-grid div {
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(255,255,255,.024);
      padding: 9px 10px;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.4;
    }

    .cs-position-grid strong {
      color: var(--gold-2);
    }

    .cs-accept-box {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      border: 1px solid rgba(212, 161, 59, .30);
      border-radius: 13px;
      background: rgba(212, 161, 59, .045);
      padding: 10px 11px;
      color: var(--text);
      font-weight: 900;
      line-height: 1.45;
    }

    .cs-presence-list {
      display: grid;
      gap: 12px;
      max-height: min(70vh, 680px);
      overflow: auto;
      padding-right: 4px;
    }

    .cs-presence-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background:
        radial-gradient(circle at 0 0, rgba(212, 161, 59, .06), transparent 34%),
        rgba(255,255,255,.022);
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .cs-presence-card h4 {
      margin: 0;
      color: var(--title);
      font-size: 16px;
      line-height: 1.25;
    }

    .cs-presence-card p {
      margin: 0;
      color: #eadbd4;
      font-weight: 800;
      line-height: 1.45;
    }

    .cs-presence-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .cs-presence-grid .meta-box {
      min-height: auto;
    }

    .cs-presence-obs {
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: rgba(0,0,0,.18);
      padding: 9px 10px;
      color: #eadbd4;
      font-weight: 800;
      line-height: 1.45;
    }



    .recruitment-cs-modal-card {
      width: min(1180px, calc(100vw - 36px));
    }

    .recruitment-layout-cs {
      grid-template-columns: minmax(0, 1fr) minmax(370px, 430px);
    }

    .cadastro-panel-head small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-weight: 800;
      line-height: 1.35;
    }

    .compact-options.cs-options-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs-position-box-compact {
      margin: 0;
      height: 100%;
    }

    .cs-position-box-compact .cs-position-grid {
      grid-template-columns: 1fr;
    }

    .recruitment-cs-modal-card .modal-body {
      scrollbar-width: thin;
      scrollbar-color: rgba(212, 161, 59, .62) rgba(9, 3, 3, .90);
    }

    .recruitment-cs-modal-card .modal-body::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }

    .recruitment-cs-modal-card .modal-body::-webkit-scrollbar-track {
      background: rgba(9, 3, 3, .90);
      border-radius: 999px;
    }

    .recruitment-cs-modal-card .modal-body::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(212, 161, 59, .88), rgba(139, 91, 18, .88));
      border-radius: 999px;
      border: 2px solid rgba(9, 3, 3, .95);
    }

    @media (max-width: 0px) {
      .layout { grid-template-columns: 1fr; }
      .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
      .sidebar-stack { position: relative; }
      .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .hero { align-items: flex-end; flex-direction: column; justify-content: flex-end; }
      .hero-actions { justify-content: flex-start; width: 100%; }
      .grid-2, .grid-3, .composer-tools, .form-grid-2, .application-meta, .classic-grid, .recruitment-layout, .cs-position-grid, .cs-presence-grid { grid-template-columns: 1fr; }
      .modal-card.recruitment-modal-card { width: min(100%, calc(100vw - 20px)); }
    }

    @media (max-width: 0px) {
      .shell, .page { width: calc(100% - 16px); }
      .page { margin-top: 18px; }
      .top-image { background-position: center 60%; }
      .hero { min-height: 170px; padding: 18px 10px 20px; }
      .tab { font-size: 13px; min-height: 46px; }
      .main { padding: 12px; }
      .comment-form { grid-template-columns: 1fr; }
      .post-detail-grid, .post-report-meta { grid-template-columns: 1fr; }
      .modal-card.post-comments-modal-card {
        height: min(88vh, 820px);
        max-height: min(88vh, 820px);
      }
      .post-detail-right { max-height: none; min-height: 360px; }
      .timeline-item { grid-template-columns: 1fr; }
      .modal-layer { padding: 10px; }
      .modal-head, .modal-body, .modal-foot { padding-left: 14px; padding-right: 14px; }
    }


    /* =========================================================
       MODO CELULAR: DESKTOP FIXO
       O layout não se adapta ao celular.
       O celular exibe a página como desktop, permitindo zoom e arraste lateral.
    ========================================================= */

    :root {
      --site-desktop-width: 1280px;
    }

    html,
    body {
      min-width: var(--site-desktop-width);
      overflow-x: auto;
    }

    .app,
    .top-image {
      min-width: var(--site-desktop-width);
    }

    .shell,
    .page {
      width: var(--site-desktop-width);
      max-width: none;
      min-width: var(--site-desktop-width);
    }

    .layout {
      grid-template-columns: 285px minmax(0, 1fr);
    }

    .modal-layer {
      min-width: var(--site-desktop-width);
    }

    .modal-card.large {
      width: min(1120px, calc(var(--site-desktop-width) - 48px));
    }

    .modal-card.post-comments-modal-card {
      width: min(1240px, calc(var(--site-desktop-width) - 48px));
    }


    .discord-float {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1100;
      width: 58px;
      height: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, .22);
      background: linear-gradient(180deg, #6577ff, #4656d8);
      box-shadow: 0 16px 38px rgba(0, 0, 0, .52), 0 0 22px rgba(88, 101, 242, .28);
      text-decoration: none;
      padding: 0;
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }

    .discord-float:hover {
      transform: translateY(-2px) scale(1.03);
      filter: brightness(1.06);
      box-shadow: 0 20px 48px rgba(0, 0, 0, .58), 0 0 30px rgba(88, 101, 242, .40);
    }

    .discord-float svg {
      width: 34px;
      height: 34px;
      display: block;
      fill: #ffffff;
    }

    @media (max-width: 0px) {
      .discord-float {
        right: 12px;
        bottom: 12px;
        width: 52px;
        height: 52px;
        border-radius: 16px;
      }

      .discord-float svg {
        width: 30px;
        height: 30px;
      }
    }

  

    /* =========================================================
       AJUSTE MODAL DA PUBLICAÇÃO: LEGENDA + COMENTÁRIOS
       Evita texto sobre texto mantendo o layout estilo Instagram.
    ========================================================= */
    .post-comments-modal-card .post-detail-right {
      grid-template-rows: auto auto minmax(96px, .78fr) minmax(0, 1.22fr) auto;
      min-height: 0;
      overflow: hidden;
    }

    .post-comments-modal-card .post-detail-caption {
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: none;
      align-self: stretch;
      scrollbar-width: thin;
      scrollbar-color: rgba(212, 161, 59, .62) rgba(9, 3, 3, .90);
    }

    .post-comments-modal-card .post-detail-caption::-webkit-scrollbar {
      width: 8px;
    }

    .post-comments-modal-card .post-detail-caption::-webkit-scrollbar-track {
      background: rgba(9, 3, 3, .90);
      border-radius: 999px;
    }

    .post-comments-modal-card .post-detail-caption::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(212, 161, 59, .88), rgba(139, 91, 18, .88));
      border-radius: 999px;
      border: 2px solid rgba(9, 3, 3, .95);
    }

    .post-comments-modal-card .post-detail-caption .post-caption,
    .post-comments-modal-card .post-detail-caption .post-text {
      display: block;
      width: 100%;
      max-width: 100%;
      margin: 0;
      white-space: pre-wrap;
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.55;
    }

    .post-comments-modal-card .post-detail-comments-panel {
      min-height: 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }

    .post-comments-modal-card .post-comment-list {
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .post-comments-modal-card .post-comment-form-wrap {
      flex: 0 0 auto;
    }