:root{--bg:#060913;--panel:#0c101f;--field:#0f1526;--border:#253559;--cyan:#19c1f3;--blue:#4ad0ff;--muted:#8fa0c2;--white:#fff}
*{box-sizing:border-box}
.badge-standalone-body{margin:0;padding:24px;background:#02050e;color:var(--white);font-family:'Segoe UI',Roboto,Arial,sans-serif}
.c0c0n-generator-wrapper{max-width:1040px;margin:30px auto;padding:26px;background:var(--bg);color:var(--white);border:1px solid #1a233a;border-radius:14px;font-family:'Segoe UI',Roboto,Arial,sans-serif;box-shadow:0 22px 70px rgba(0,0,0,.32)}
.c0c0n-generator-wrapper h1{margin:0 0 6px;color:var(--cyan);font-size:30px;line-height:1.2;text-transform:uppercase;letter-spacing:1px}
.c0c0n-generator-wrapper h1 span{text-transform:lowercase}
.subtitle{margin:0 0 20px;color:var(--muted);font-size:14px}
.generator-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:30px;align-items:start}
.form-panel{display:flex;flex-direction:column}
.form-group{margin-bottom:18px}
.form-group>label,.photo-format-selector legend{display:block;margin-bottom:8px;color:var(--cyan);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.35px}
.form-group input[type=text]{width:100%;padding:12px 13px;background:var(--field);border:1px solid var(--border);border-radius:7px;color:#fff;font-size:15px;outline:none}
.form-group input[type=text]:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(25,193,243,.12)}
.field-help{display:block;margin-top:8px;color:var(--muted);font-size:12px}
.custom-file-upload{width:100%;display:flex!important;align-items:center;justify-content:center;gap:10px;padding:12px 18px!important;background:#16223f;border:1px dashed var(--cyan);border-radius:8px;cursor:pointer;text-align:center;transition:.22s ease}
.custom-file-upload:hover{background:#1f315b;transform:translateY(-1px)}
.upload-success-tick{display:none;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;color:#061006;background:#39ff14;font-size:16px;font-weight:900;box-shadow:0 0 15px rgba(57,255,20,.75)}
.custom-file-upload.has-profile-image{border-color:#39ff14;background:rgba(57,255,20,.08)}
.custom-file-upload.has-profile-image .upload-success-tick{display:inline-flex}
.photo-format-selector{margin:0 0 20px;padding:0;border:0}
.photo-format-option{display:flex!important;align-items:center;gap:10px;width:100%;margin-bottom:9px!important;padding:11px 13px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.04);cursor:pointer;text-transform:none!important}
.photo-format-option input{width:17px;height:17px;margin:0;accent-color:var(--cyan)}
.photo-format-option span{color:#fff;font-size:14px;font-weight:650;text-transform:none}
.photo-format-option small{margin-left:auto;color:var(--muted);font-size:12px;text-transform:none}
.preview-panel{position:sticky;top:20px;display:flex;align-items:center;justify-content:center;min-height:500px;padding:16px;background:var(--panel);border:1px dashed var(--border);border-radius:10px}
#c0c0nLivePreview{display:block;max-width:100%;max-height:620px;border-radius:7px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.badge-action-section{width:100%;margin-top:8px}
.badge-action-button,.social-share-button{border:0;outline:none;font-family:inherit;cursor:pointer;transition:transform .2s,filter .2s,opacity .2s}
.badge-action-button:hover:not(:disabled),.social-share-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}
.btn-download-badge.badge-action-button{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:10px;background:linear-gradient(135deg,#00d9ff,#7755ff 55%,#ff2dc6);color:#fff;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 10px 26px rgba(63,114,255,.25)}
.action-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;font-size:18px}
.share-section{margin-top:20px;padding:18px;border:1px solid rgba(96,211,255,.16);border-radius:14px;background:rgba(5,10,28,.72)}
.share-section-title{margin:0 0 13px;color:#fff;font-size:14px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.7px}
.social-share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.social-share-button{width:100%;min-height:48px;display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:10px 12px;border-radius:9px;color:#fff;font-size:13px;font-weight:750;text-align:left}
.social-icon{width:27px;height:27px;flex:0 0 27px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.12);font-size:12px;font-weight:900}
.share-whatsapp{background:linear-gradient(135deg,#128c7e,#25d366)}
.share-facebook{background:linear-gradient(135deg,#1057a8,#1877f2)}
.share-linkedin{background:linear-gradient(135deg,#005582,#0a66c2)}
.share-x{background:linear-gradient(135deg,#050505,#303030)}
.share-instagram{grid-column:1/-1;background:linear-gradient(135deg,#405de6,#833ab4 35%,#c13584 62%,#e1306c 80%,#fd1d1d)}
.social-share-note{margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}
.badge-action-button:disabled,.social-share-button:disabled{opacity:.38;filter:grayscale(.55);cursor:not-allowed;box-shadow:none;transform:none}
.mobile-preview-message{display:none;margin:0 0 18px;padding:11px 13px;border:1px solid rgba(74,208,255,.3);border-radius:8px;background:rgba(74,208,255,.08);color:#d8f7ff;font-size:13px;line-height:1.5}
.badge-status-message{margin:0 0 18px;padding:11px 13px;border-radius:8px;font-size:13px;line-height:1.45}
.badge-status-message.is-success{background:rgba(57,255,20,.1);border:1px solid rgba(57,255,20,.35);color:#baffaa}
.badge-status-message.is-error{background:rgba(255,70,70,.1);border:1px solid rgba(255,70,70,.35);color:#ffc2c2}
.badge-status-message.is-info{background:rgba(74,208,255,.1);border:1px solid rgba(74,208,255,.35);color:#c8f4ff}
#badgeProcessingOverlay[hidden]{display:none!important}
#badgeProcessingOverlay{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(2,5,14,.88);backdrop-filter:blur(5px)}
.badge-processing-card{width:min(92vw,360px);padding:30px 24px;border:1px solid rgba(74,208,255,.35);border-radius:18px;background:#080d1c;box-shadow:0 18px 60px rgba(0,0,0,.55);color:#fff;text-align:center}
.badge-processing-spinner{width:54px;height:54px;margin:0 auto 18px;border:5px solid rgba(255,255,255,.18);border-top-color:var(--blue);border-radius:50%;animation:badgeSpinner .8s linear infinite}
.badge-processing-card p{margin:0;font-size:17px;font-weight:650}
body.badge-processing-active{overflow:hidden}
@keyframes badgeSpinner{to{transform:rotate(360deg)}}
@media(max-width:768px){.c0c0n-generator-wrapper{margin:12px;padding:18px}.generator-grid{grid-template-columns:1fr}.preview-panel{position:static;min-height:auto}.mobile-preview-message{display:block}.social-share-button{justify-content:center}}
@media(max-width:480px){.c0c0n-generator-wrapper h1{font-size:24px}.social-share-grid{grid-template-columns:1fr}.share-instagram{grid-column:auto}.photo-format-option{flex-wrap:wrap}.photo-format-option small{width:100%;margin-left:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.badge-processing-spinner{animation-duration:1.6s}}




/* =========================================================
   SOCIAL MEDIA CONTENT PANEL
   ========================================================= */

   .social-content-panel[hidden] {
    display: none !important;
}

.social-content-panel {
    margin-top: 30px;
    padding: 22px;
    border: 1px solid rgba(74, 208, 255, 0.24);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(8, 14, 33, 0.98),
            rgba(12, 19, 43, 0.98)
        );
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.28),
        inset 0 0 24px rgba(74, 208, 255, 0.025);
}

.social-content-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.social-content-heading h3 {
    margin: 0 0 5px;
    color: #4ad0ff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.social-content-heading p {
    margin: 0;
    color: #8fa0c2;
    font-size: 13px;
    line-height: 1.55;
}

.copy-social-content-button {
    flex: 0 0 auto;
    min-width: 132px;
    padding: 11px 17px;
    border: 1px solid rgba(74, 208, 255, 0.55);
    border-radius: 9px;
    background: rgba(74, 208, 255, 0.1);
    color: #4ad0ff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.copy-social-content-button:hover {
    transform: translateY(-2px);
    border-color: #4ad0ff;
    background: rgba(74, 208, 255, 0.18);
    box-shadow: 0 0 18px rgba(74, 208, 255, 0.14);
}

.copy-social-content-button.is-copied {
    border-color: #39ff14;
    background: rgba(57, 255, 20, 0.11);
    color: #39ff14;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.14);
}

.social-content-text {
    display: block;
    width: 100%;
    min-height: 190px;
    padding: 16px;
    box-sizing: border-box;
    resize: vertical;
    overflow: auto;
    border: 1px solid rgba(143, 160, 194, 0.26);
    border-radius: 11px;
    outline: none;
    background: #070c1a;
    color: #ffffff;
    font-family:
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28);
}

.social-content-text:focus {
    border-color: #4ad0ff;
    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.28),
        0 0 0 3px rgba(74, 208, 255, 0.08);
}

.copy-social-content-status {
    min-height: 20px;
    margin: 10px 0 0;
    color: #39ff14;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .social-content-panel {
        margin-top: 22px;
        padding: 17px;
    }

    .social-content-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .copy-social-content-button {
        width: 100%;
    }

    .social-content-text {
        min-height: 230px;
        font-size: 13px;
    }
}
/* =========================================================
   SOCIAL MEDIA CONTENT PANEL
   ========================================================= */

   .social-content-panel[hidden] {
    display: none !important;
  }
  
  .social-content-panel {
    margin-top: 30px;
    padding: 22px;
    border: 1px solid rgba(74, 208, 255, 0.24);
    border-radius: 16px;
    background:
      linear-gradient(
        145deg,
        rgba(8, 14, 33, 0.98),
        rgba(12, 19, 43, 0.98)
      );
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.28),
      inset 0 0 24px rgba(74, 208, 255, 0.025);
  }
  
  .social-content-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
  }
  
  .social-content-heading h3 {
    margin: 0 0 5px;
    color: var(--blue);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .social-content-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
  }
  
  .copy-social-content-button {
    flex: 0 0 auto;
    min-width: 132px;
    padding: 11px 17px;
    border: 1px solid rgba(74, 208, 255, 0.55);
    border-radius: 9px;
    background: rgba(74, 208, 255, 0.1);
    color: var(--blue);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition:
      transform 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }
  
  .copy-social-content-button:hover {
    transform: translateY(-2px);
    border-color: var(--blue);
    background: rgba(74, 208, 255, 0.18);
    box-shadow: 0 0 18px rgba(74, 208, 255, 0.14);
  }
  
  .copy-social-content-button.is-copied {
    border-color: #39ff14;
    background: rgba(57, 255, 20, 0.11);
    color: #39ff14;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.14);
  }
  
  .social-content-text {
    display: block;
    width: 100%;
    min-height: 175px;
    padding: 16px;
    box-sizing: border-box;
    resize: vertical;
    overflow: auto;
    border: 1px solid rgba(143, 160, 194, 0.26);
    border-radius: 11px;
    outline: none;
    background: #070c1a;
    color: #ffffff;
    font-family:
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.28);
  }
  
  .social-content-text:focus {
    border-color: var(--blue);
    box-shadow:
      inset 0 0 18px rgba(0, 0, 0, 0.28),
      0 0 0 3px rgba(74, 208, 255, 0.08);
  }
  
  .copy-social-content-status {
    min-height: 20px;
    margin: 10px 0 0;
    color: #39ff14;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
  }
  
  @media (max-width: 600px) {
    .social-content-panel {
      margin-top: 22px;
      padding: 17px;
    }
  
    .social-content-heading {
      align-items: stretch;
      flex-direction: column;
      gap: 12px;
    }
  
    .copy-social-content-button {
      width: 100%;
    }
  
    .social-content-text {
      min-height: 220px;
      font-size: 13px;
    }
  }


/* =========================================================
   FACEBOOK + LINKEDIN MANUAL BADGE UPLOAD
   ========================================================= */
.manual-social-section{margin-top:16px;padding:18px;border:1px solid rgba(74,208,255,.20);border-radius:14px;background:linear-gradient(145deg,rgba(8,14,33,.96),rgba(10,18,41,.96))}
.manual-social-heading{margin-bottom:14px}
.manual-social-badge{display:inline-flex;align-items:center;margin-bottom:8px;padding:5px 9px;border:1px solid rgba(253,163,18,.42);border-radius:999px;background:rgba(253,163,18,.10);color:#fda312;font-size:10px;font-weight:800;line-height:1;letter-spacing:.7px;text-transform:uppercase}
.manual-social-heading h3{margin:0 0 8px;color:#fff;font-size:16px;font-weight:800;line-height:1.35}
.manual-social-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.manual-social-steps{display:grid;gap:8px;margin:0 0 15px;padding:0;list-style:none}
.manual-social-steps li{display:flex;align-items:flex-start;gap:9px;color:#cbd6ec;font-size:12px;line-height:1.5}
.manual-social-steps li>span{width:21px;height:21px;flex:0 0 21px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(74,208,255,.12);border:1px solid rgba(74,208,255,.28);color:var(--blue);font-size:10px;font-weight:800}
.manual-social-steps strong{color:#fff;font-weight:750}
.manual-social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.manual-social-button{width:100%;min-height:54px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:10px 13px;border:0;border-radius:10px;color:#fff;font-family:inherit;text-align:left;cursor:pointer;transition:transform .2s ease,filter .2s ease,opacity .2s ease,box-shadow .2s ease}
.manual-social-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.07)}
.manual-facebook{background:linear-gradient(135deg,#1057a8,#1877f2);box-shadow:0 8px 20px rgba(24,119,242,.18)}
.manual-linkedin{background:linear-gradient(135deg,#005582,#0a66c2);box-shadow:0 8px 20px rgba(10,102,194,.18)}
.manual-twitter{background:linear-gradient(135deg,#005582,#0a66c2);box-shadow:0 8px 20px rgba(10,102,194,.18)}
.manual-social-icon{width:31px;height:31px;flex:0 0 31px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:13px;font-weight:900}
.manual-social-button small,.manual-social-button strong{display:block}
.manual-social-button small{margin-bottom:1px;color:rgba(255,255,255,.72);font-size:9px;font-weight:700;letter-spacing:.45px;text-transform:uppercase}
.manual-social-button strong{color:#fff;font-size:13px;font-weight:800}
.manual-social-button:disabled{opacity:.38;filter:grayscale(.55);cursor:not-allowed;box-shadow:none;transform:none}
.manual-social-note{margin:12px 0 0;padding:10px 11px;border-left:3px solid #fda312;border-radius:5px;background:rgba(253,163,18,.07);color:#aab7ce;font-size:11px;line-height:1.55}
.manual-social-note strong{color:#fda312}
@media(max-width:480px){.manual-social-section{padding:15px}.manual-social-grid{grid-template-columns:1fr}}