/* pastel call-to-action for the "link to prompt" button */
.prompt-hub-table-modern .share-action.copy-link {
  background: #A8E6CF;          /* pastel mint/teal */
  color: #034f3f;               /* dark contrast text */
  font-weight: 600;
  border: 2px solid transparent;
  padding: .5em .9em;
  border-radius: .375rem;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow: 0 6px 16px rgba(168, 230, 207, 0.4);
}




.ph-header {
  text-align: center;
  padding: 0 1rem;           /* ⬅️ no top / bottom padding */
  background: linear-gradient(145deg, #f9f9f9, #fff);
  border-bottom: 2px solid #eee;
  margin-bottom: 1rem;
}

.ph-header-inner {
  max-width: 900px;
  margin: 0 auto;
}

.ph-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0.5rem 0 0.75rem;  /* tweak spacing between lines */
  background: linear-gradient(to right, #ff6a00, #ee0979);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ph-title span {
  font-weight: 600;
  color: #222;
  -webkit-text-fill-color: initial;
}

.ph-hook {
  font-size: 1.1rem;
  color: #222;
  max-width: 700px;
  margin: 0 auto 0.5rem;
  line-height: 1.45;
}

.ph-hook strong,
.ph-hook .star {
  color: #e67e22;
  font-weight: 600;
}










/* ───────────── Star / Favourite button ───────────── */
.star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform .15s ease;
}

.star-btn svg {
    stroke: #777;
    fill  : none;          /* transparent interior */
    transition: stroke .15s ease, fill .15s ease;
}

.star-btn:hover       { transform: scale(1.15); }
.star-btn:active      { transform: scale(0.95);  }
.star-btn.starred svg {                         /* ★ GOLD  */
    stroke: #FFB800;
    fill  : #FFB800;
}

/* Visually disable when user not logged-in */
.star-btn[disabled],
.star-btn.login-required {
    cursor: not-allowed;
    opacity: .45;
    transform: none;
}

/* ───────────── Tabs (Latest · Popular · Random · Saved) ───────────── */
#prompt-tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

#prompt-tabs .filter-tab {
    padding: .4rem 1.1rem;
    border: 2px solid #DDD;
    background: #FFF;
    border-radius: 9999px;          /* pill */
    font-size: .9rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

#prompt-tabs .filter-tab:hover  { border-color: #999; }
#prompt-tabs .filter-tab.active {
    background: #0073e6;           /* WP-brandish blue */
    border-color: #0073e6;
    color: #FFF;
}

/* Optional: darker blue on focus for accessibility */
#prompt-tabs .filter-tab:focus-visible {
    outline: 3px solid #0054b4;
}

/* ───────────── Toast tweak (keeps colours consistent) ───────────── */
.toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    min-width: 240px;
    max-width: 90vw;
    padding: .75rem 1rem;
    border-radius: 6px;
    color: #FFF;
    font-weight: 600;
    background: #333;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    z-index: 9999;
}

.toast.show         { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success      { background: #28a745; }
.toast.error        { background: #e5534b; }

/* ───────────── Small polish for skeleton bars ───────────── */
.skeleton-bar {
    border-radius: 4px;
    background: linear-gradient(100deg,#ececec 30%,#f5f5f5 40%,#ececec 60%);
    background-size: 200% 100%;
    animation: loading 1.2s infinite;
}
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }





 
.copy-link-btn {color: white;
background: #6b72ff;
    border-radius: 999px;
    padding: .5rem 1rem;
    font-size: .85rem;
	}
	
	
.prompt-title-link {
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: capitalize; /* or uppercase if you want more punch */
}

/* hover / active */
.prompt-hub-table-modern .share-action.copy-link:hover {
  background: #8ed8b8;
  transform: translateY(-1px);
}
.prompt-hub-table-modern .share-action.copy-link:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(168, 230, 207, 0.5);
}

/* focus for accessibility */
.prompt-hub-table-modern .share-action.copy-link:focus-visible {
  outline: 3px solid #4fb89b;
  outline-offset: 2px;
}

/* optional gentle pulse to draw "click me" attention; add class .pulse when desired */
@keyframes ph-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}


/* GENERAL RESET */
:root {
  --ph-primary-blue: #0066cc;
  --ph-primary-blue-dark: #0055aa;
  --ph-radius: .375rem;
  --ph-shadow: 0 6px 20px rgba(0, 102, 204, 0.15);
  --ph-focus-ring: rgba(0, 102, 204, .5);
  --ph-transition: .15s ease;
}

/* Base button (correct selector syntax) */
.action-btn.link-btn,
.action-btn.link-btn:link,
.action-btn.link-btn:visited {
  background-color: #0066cc;
  color: #fff;
  text-decoration: none;
  border: none;
  padding: .55em 1em;
  border-radius: .375rem;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(0, 102, 204, 0.25);
}


/* completely remove from layout */
.bulk-upload-btn {
  display: none !important;
}

/* keep the space but make it invisible */
.bulk-upload-btn {
  visibility: hidden;
}

/* utility you can toggle via JS */
.hidden {
  display: none !important;
}


/* Hover state - stays blue, no grey */
.action-btn.link-btn:hover {
  background-color: #0055aa; /* slightly darker blue */
  transform: translateY(-1px);
}

/* Active / pressed */
.action-btn.link-btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.35);
}

/* Focus outline for accessibility */
.action-btn.link-btn:focus-visible {
  outline: 3px solid rgba(0, 102, 204, .6);
  outline-offset: 2px;
}

/* Ensure embedded emoji/icon inherits color and stays aligned */
.action-btn.link-btn .emoji {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-left: 2px;
  filter: none;
}

/* ========= TABLE / NO HORIZONTAL SCROLL ========= */
.prompt-hub-table-modern .table-container {
  width: 100%;
  overflow-x: hidden; /* remove horizontal scroll */
}

.prompt-hub-table-modern table.prompt-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* let columns size to content, but allow wrapping */
  font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background: #fff;
  word-break: break-word; /* break long strings */
  white-space: normal;
}

/* ensure cells wrap instead of forcing scroll */
.prompt-hub-table-modern th,
.prompt-hub-table-modern td {
  padding: .65rem .9rem;
  text-align: left;
  border-bottom: 1px solid #e3e8f0;
  vertical-align: top;
  word-break: break-word;
  white-space: normal;
}

/* optional: truncate too-long titles but allow hover to see full */
.prompt-hub-table-modern .name-col,
.prompt-hub-table-modern .prompt-col {
  max-width: 220px;
}

/* tiny visual reset for any embedded button-like inputs */
.prompt-hub-table-modern table .btn,
.prompt-hub-table-modern table .button,
.prompt-hub-table-modern table button,
.prompt-hub-table-modern table a.button,
.prompt-hub-table-modern table input[type=button],
.prompt-hub-table-modern table input[type=submit] {
  all: unset;
  box-sizing: border-box;
}

/* ========== BUTTON STYLING (UNIFORM BLUE) ========== */
.prompt-hub-table-modern table button,
.prompt-hub-table-modern table .table-button,
.prompt-hub-table-modern .share-action.copy-prompt,
.prompt-hub-table-modern .share-action.copy-link,
.prompt-hub-table-modern .add-prompt-btn,
.prompt-hub-table-modern .submit-button,
.prompt-hub-table-modern .browse-btn,
.prompt-hub-table-modern .download-btn {
  background: var(--ph-primary-blue);
  color: #fff;
  border: none;
  padding: .55em 1em;
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--ph-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  text-decoration: none;
  transition: background var(--ph-transition), transform .1s ease, box-shadow var(--ph-transition);
  box-shadow: var(--ph-shadow);
  line-height: 1.1;
}

.prompt-hub-table-modern button:hover,
.prompt-hub-table-modern .submit-button:hover,
.prompt-hub-table-modern .browse-btn:hover,
.prompt-hub-table-modern .download-btn:hover {
  background: var(--ph-primary-blue-dark);
  transform: translateY(-1px);
}

.prompt-hub-table-modern button:active,
.prompt-hub-table-modern .submit-button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 12px rgba(0, 102, 204, 0.25);
}

/* container: allow fallback scroll but centre smaller tables */
.prompt-hub-table-modern .table-container {
  display: flex;
  justify-content: center; /* centre if table is narrower */
  overflow-x: auto;         /* fallback only if it really overflows */
  width: 100%;
}

/* table: shrink-to-fit, but never overflow parent */
.prompt-hub-table-modern table.prompt-table {
  width: auto;        /* shrink to content */
  max-width: 100%;    /* don’t exceed parent */
  min-width: 0;       /* for flex children to behave */
  border-collapse: collapse;
  table-layout: auto;
}

.prompt-hub-table-modern button:focus-visible,
.prompt-hub-table-modern .submit-button:focus-visible,
.prompt-hub-table-modern .browse-btn:focus-visible,
.prompt-hub-table-modern .download-btn:focus-visible {
  outline: 3px solid var(--ph-focus-ring);
  outline-offset: 2px;
}

/* SVG/icon harmonisation */
.prompt-hub-table-modern button svg,
.prompt-hub-table-modern .submit-button svg,
.prompt-hub-table-modern .browse-btn svg,
.prompt-hub-table-modern .download-btn svg {
  height: 1em;
  width: 1em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: currentColor;
}

/* small responsive tweak: stack filters on narrow */
@media (max-width: 900px) {
  .prompt-hub-table-modern .prompt-filters {
    flex-direction: column;
    gap: .75rem;
  }
}


.prompt-hub-table-modern .prompt-content {
    font-size: 2em;        /* ~double */
    line-height: 1.4;
}

/* Keep buttons under it normal size */
.prompt-hub-table-modern .prompt-content + .action-btn {
    font-size: 0.875rem;
}
/* Prompt Hub table: show full text + double size */
.prompt-hub-table-modern .prompt-table {
    table-layout: auto;                /* let cells grow */
}

body {
    background: #f5f8fa;
}

/* MAIN WRAPPER */
.prompt-hub-table-modern {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 10px 40px 10px;
}

/* STATS SECTION */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 36px;
}

.stat-card {
    flex: 1 1 220px;
    min-width: 180px;
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 16px rgba(51,154,240,0.10);
}

.stat-value {
    font-size: 2.6rem;
    font-weight: 800;
    color: #339af0;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.stat-label {
    font-size: 1.08rem;
    color: #868e96;
    letter-spacing: 0.2px;
}

/* FILTERS */
.prompt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 32px;
    align-items: flex-end;
}

.filter-group {
    flex: 1 1 280px;
    min-width: 200px;
    position: relative;
}

/* SEARCH BOXES */
.search-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 9px;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    transition: all 0.3s;
    background: #fff;
}

.search-input:focus {
    outline: none;
    border-color: #4dabf7;
    box-shadow: 0 0 0 3px rgba(77,171,247,0.13);
}

/* TAG SUGGESTIONS */
.tag-suggestions {
    display: none;
    position: absolute;
    top: 46px;
    left: 0;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.07);
    max-height: 180px;
    overflow-y: auto;
    z-index: 30;
    width: 100%;
    max-width: 320px;
}
.tag-suggestion {
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
}
.tag-suggestion:hover {
    background: #e7f5ff;
}
.no-tags {
    color: #adb5bd;
    padding: 10px 15px;
}

/* SELECTED TAGS */
#selected-tags, .selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.selected-tag {
    background: #e7f5ff;
    padding: 5px 14px;
    border-radius: 18px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.remove-tag {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #868e96;
}

/* FILTER TABS */
.filter-tabs {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.filter-tab {
    background: #f1f3f5;
    border: none;
    padding: 9px 18px;
    border-radius: 19px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    font-size: 15px;
    letter-spacing: 0.1px;
}
.filter-tab.active,
.filter-tab:hover {
    background: #339af0;
    color: #fff;
    box-shadow: 0 2px 8px rgba(51,154,240,0.07);
}

/* TABLE CONTAINER */
.table-container {
    margin-top: 18px;
    width: 100%;
    overflow-x: auto;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    background: #fff;
}

/* RESPONSIVE TABLE */
.prompt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 960px;
}
.prompt-table th,
.prompt-table td {
    min-width: 110px;
    max-width: 270px;
    white-space: normal;
    word-break: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 15px 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}
.prompt-table th {
    background: #f8f9fa;
    font-weight: 700;
    color: #495057;
    border-bottom: 2px solid #e9ecef;
    font-size: 15.5px;
    letter-spacing: 0.1px;
}
.prompt-table td {
    font-size: 15px;
    color: #495057;
}

.name-col,
.prompt-table .name-cell {
    font-weight: 700;
    color: #212529;
    min-width: 180px;
    max-width: 260px;
}
.prompt-col {
    min-width: 180px;
    max-width: 330px;
}
.why-col,
.tags-col {
    min-width: 120px;
    max-width: 210px;
}
.date-col, .view-col, .upvote-col, .share-col {
    min-width: 74px;
    max-width: 120px;
    text-align: center;
}

/* WRAPPED CONTENT */
.prompt-content, .why-content {
    font-size: 14px;
    color: #495057;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag {
    background: #e7f5ff;
    color: #228be6;
    padding: 4px 10px;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}
.tag:hover {
    background: #d0ebff;
}

.date {
    color: #868e96;
    font-size: 14px;
    white-space: nowrap;
}

.action-btn {
   
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}
.action-btn:hover {
    background: #e9ecef;
}
.action-btn svg {
    width: 16px;
    height: 16px;
}

.copy-btn.done {
    background: #40c057;
    color: white;
}
.upvote-btn.voted {
    background: #ffd8a8;
    color: #e67700;
}
.upvote-btn.voted:hover {
    background: #ffc078;
}

.view-btn,
.share-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f1f3f5;
}
.view-btn:hover,
.share-btn:hover {
    background: #e9ecef;
}

.share-menu {
    display: none;
    position: absolute;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.14);
    padding: 10px;
    z-index: 100;
    min-width: 180px;
}
.share-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 15px;
}
.share-option:hover {
    background: #f1f3f5;
}
.share-option svg {
    width: 16px;
    height: 16px;
}

/* PAGINATION + FOOTER */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 38px;
    flex-wrap: wrap;
    gap: 16px;
}
.pagination {
    display: flex;
    gap: 10px;
}
.page-btn {
    padding: 9px 18px;
    background: #f1f3f5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    font-size: 15px;
}
.page-btn:hover {
    background: #e9ecef;
}
.page-btn.active {
    background: #339af0;
    color: #fff;
}

.add-prompt-btn{
    background: #339af0;
    color: white;
    border: none;
    border-radius: 9px;
    padding: 13px 26px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;

    transition: background 0.18s;
    font-size: 16px;
}
.add-prompt-btn{
    background: #228be6;
}

/* TOAST (FEEDBACK MESSAGE) */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #40c057;
    color: #fff;
    padding: 13px 28px;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1200;
    opacity: 0;
    transition: all 0.3s;
    font-size: 16px;
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.toast.error {
    background: #ff6b6b;
}

/* SKELETON LOADING STATE */
.skeleton .skeleton-bar {
    background: #e9ecef;
    height: 13px;
    border-radius: 5px;
    margin-bottom: 8px;
}
.skeleton .skeleton-bar.short {
    width: 74%;
}
.skeleton .skeleton-bar.tiny {
    width: 46%;
}
.skeleton .skeleton-btn {
    width: 36px;
    height: 36px;
    background: #e9ecef;
    border-radius: 6px;
}

/* NO RESULTS */
.no-results-content {
    text-align: center;
    padding: 32px 5px;
}
.no-results-content svg {
    margin-bottom: 19px;
    color: #ced4da;
}
.clear-tags-btn {
    background: #339af0;
    color: white;
    border: none;
    border-radius: 7px;
    padding: 8px 17px;
    margin-top: 14px;
    cursor: pointer;
    font-size: 15px;
}
.clear-tags-btn:hover {
    background: #228be6;
}

/* LOADING ANIMATION */
.prompt-loading {
    text-align: center;
    padding: 44px 0;
}
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #339af0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 22px;
}
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

/* MOBILE RESPONSIVE: STACK STATS, TABLE CARDS */
@media (max-width: 1000px) {
    .stats {
        flex-direction: column;
        gap: 14px;
    }
    .prompt-hub-table-modern {
        padding: 12px 2px 30px 2px;
    }
    .prompt-table {
        min-width: 600px;
    }
}
@media (max-width: 720px) {
    .prompt-hub-table-modern {
        padding: 4px 0 24px 0;
    }
    .stats, .prompt-filters {
        flex-direction: column;
        gap: 12px;
    }
    .table-container {
        border-radius: 8px;
        box-shadow: none;
        margin-top: 9px;
    }
    .prompt-table,
    .prompt-table thead,
    .prompt-table tbody,
    .prompt-table tr,
    .prompt-table th,
    .prompt-table td {
        display: block;
        min-width: unset;
        max-width: unset;
    }
    .prompt-table th {
        display: none;
    }
    /* ----- PROMPT SINGLE PAGE MODERN STYLE ----- */

.prompt-single-modern {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(51,154,240,0.08);
    padding: 44px 32px 32px 32px;
    max-width: 780px;
    margin: 40px auto 60px auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    position: relative;
}
@media (max-width: 900px) {
    .prompt-single-modern {
        max-width: 98vw;
        padding: 24px 8vw 20px 8vw;
    }
}
@media (max-width: 600px) {
    .prompt-single-modern {
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(51,154,240,0.10);
        padding: 12vw 2vw 5vw 2vw;
        margin: 24px auto 30px auto;
    }
}

/* Header and Meta */
.prompt-header {
    border-bottom: 2px solid #f1f3f5;
    margin-bottom: 22px;
    padding-bottom: 10px;
}
.prompt-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #339af0;
    letter-spacing: 0.2px;
}
.prompt-meta {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 16px;
}
.meta-item {
    color: #495057;
    background: #e7f5ff;
    border-radius: 8px;
    padding: 3px 14px;
    font-weight: 500;
}
.meta-label {
    color: #228be6;
    font-weight: 600;
    margin-right: 2px;
}
.prompt-tags {
    margin-top: 8px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.prompt-tags .tag {
    background: #e7f5ff;
    color: #339af0;
    font-size: 13px;
    border-radius: 15px;
    padding: 4px 11px;
    font-weight: 600;
}

/* Prompt Content */
.prompt-content {
    font-size: 1.09rem;
    color: #212529;
    line-height: 1.65;
    margin: 18px 0 30px 0;
    padding: 0;
}

/* Info sections */
.prompt-section {
    background: #f8faff;
    border-radius: 13px;
    padding: 18px 20px 14px 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(51,154,240,0.04);
}
.prompt-section h3 {
    margin-top: 0;
    font-size: 1.12rem;
    color: #228be6;
    font-weight: 700;
    margin-bottom: 7px;
}
.section-content {
    color: #495057;
    font-size: 15.2px;
    line-height: 1.6;
}

/* Share Section */
.prompt-share-section {
    margin: 24px 0 30px 0;
    background: #f1f3f5;
    border-radius: 10px;
    padding: 16px 14px 11px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.prompt-share-section h3 {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    color: #339af0;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.share-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.share-action {
    background: #e7f5ff;
    color: #339af0;
    border: none;
    border-radius: 7px;
    padding: 9px 16px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: background 0.17s, color 0.15s;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(51,154,240,0.05);
}
.share-action:hover,
.share-action:focus {
    background: #339af0;
    color: #fff;
}
.share-action svg {
    width: 17px;
    height: 17px;
}

/* Responsive for Share Buttons */
@media (max-width: 600px) {
    .share-buttons {
        flex-direction: column;
        gap: 9px;
        width: 100%;
    }
    .share-action {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Upvotes and other meta display */
.meta-item span,
.meta-item {
    display: inline-block;
}

/* Add a subtle effect to "Copied" toast, if used here too */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #40c057;
    color: #fff;
    padding: 13px 28px;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1200;
    opacity: 0;
    transition: all 0.3s;
    font-size: 16px;
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.toast.error {
    background: #ff6b6b;
}

    .prompt-table tr {
        margin-bottom: 16px;
        border-radius: 13px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        background: #fff;
        padding: 7px 0;
    }
    .prompt-table td {
        border: none;
        border-bottom: 1px solid #f1f3f5;
        padding: 11px 12px;
        font-size: 14.5px;
        max-width: 99vw;
        word-break: break-word;
        position: relative;
    }
    .prompt-table td:before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        color: #868e96;
        margin-bottom: 2px;
    }
    .name-cell {
        font-size: 15.5px;
    }
    .footer {
        flex-direction: column;
        gap: 14px;
    }
}
.prompt-hub-table-modern .prompt-content,
.prompt-hub-table-modern .why-content{
    font-size:1rem !important;
    
    font-weight:500;
    max-height:none !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    white-space:normal !important;
}
/* ============ Base Vars ============ */
:root{
  --ph-accent: #7c3aed;
  --ph-accent-light: #ede9fe;
  --ph-dark: #111;
  --ph-muted: #6b7280;
  --ph-bg: #ffffff;
  --ph-border: #e5e7eb;
  --ph-radius: 10px;
  --ph-shadow: 0 4px 16px rgba(0,0,0,.06);
}

/* Dark mode tweak (optional) */
@media (prefers-color-scheme: dark){
  :root{
    --ph-dark: #f3f4f6;
    --ph-muted: #9ca3af;
    --ph-bg: #1f2937;
    --ph-border: #374151;
    --ph-accent-light: rgba(124,58,237,.14);
  }
}

/* ============ Wrapper ============ */
.prompt-single-modern{
  background: var(--ph-bg);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
  box-shadow: var(--ph-shadow);
  padding: 28px 30px 36px;
  margin: 32px 0;
  position: relative;
}

/* Member badge */
.prompt-single-modern.user-submitted .member-badge{
  position: absolute;
  top: -14px;
  right: 18px;
  background: var(--ph-accent);
  color: #fff;
  padding: 5px 14px 6px;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(124,58,237,.35);
}

/* ============ Header ============ */
.prompt-header{
  margin-bottom: 26px;
}
.prompt-title{
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
  color: var(--ph-dark);
}
.prompt-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: 14px;
  color: var(--ph-muted);
}
.prompt-meta .meta-item .meta-label{
  font-weight: 600;
  color: var(--ph-dark);
  margin-right: 4px;
}

/* Tags */
.prompt-tags{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prompt-tags .tag{
  background: var(--ph-accent-light);
  color: var(--ph-accent);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ============ Copy Block ============ */
.prompt-copy-block{ margin: 28px 0 38px; }

.prompt-copy-heading{
  margin: 0;
  padding: 10px 14px;
  background: var(--ph-dark);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .05em;
  border-radius: 6px 6px 0 0;
  text-transform: uppercase;
}

.prompt-content-full{
  position: relative;
  padding: 20px 22px 24px;
  border: 2px dashed var(--ph-accent);
  background: var(--ph-accent-light);
  border-radius: 0 0 6px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  font-size: 14px;
}

/* Optional highlight for {{placeholders}} */
.prompt-content-full em,
.prompt-content-full [data-placeholder]{
  color:#b00020;
  background: rgba(176,0,32,.08);
  padding: 0 3px;
  border-radius: 3px;
  font-style: normal;
}

/* If you place the Copy Prompt btn inside this block */
.prompt-content-full .copy-prompt{
  position:absolute;
  top:10px;
  right:12px;
  background: var(--ph-accent);
  color:#fff;
  border:none;
  padding:6px 10px;
  border-radius:4px;
  cursor:pointer;
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
  gap:4px;
  opacity:.85;
  transition:opacity .15s;
}
.prompt-content-full .copy-prompt:hover{opacity:1;}

/* ============ Sections (“Why It Works”, “Example Output”) ============ */
.prompt-section{
  margin: 34px 0 0;
  padding: 24px 26px;
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius);
  background: rgba(0,0,0,.02);
}
.prompt-section h3{
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ph-dark);
  display:flex;
  align-items:center;
  gap:8px;
}
.prompt-section h3::before{
  content:"";
  width:6px;
  height:20px;
  background: var(--ph-accent);
  border-radius:2px;
}
.section-content{
  color: var(--ph-dark);
  line-height: 1.6;
  font-size: 15px;
}

/* ============ Share Section ============ */
.prompt-share-section{
  margin: 42px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ph-border);
}
.prompt-share-section h3{
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--ph-dark);
}
.share-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.share-action{
  appearance:none;
  border:1px solid var(--ph-border);
  background:#fff;
  color: var(--ph-dark);
  padding:10px 14px;
  border-radius:6px;
  font-size:14px;
  line-height:1;
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  transition: all .12s ease;
}
.share-action:hover{
  border-color: var(--ph-accent);
  color: var(--ph-accent);
}

/* ============ Responsive ============ */
@media (max-width: 640px){
  .prompt-single-modern{ padding:22px 18px 30px; }
  .prompt-section{ padding:18px 18px; }
  .prompt-content-full{ padding:16px 16px 20px; }
  .prompt-meta{ gap: 8px 16px; }
}
/* Top label */
.prompt-copy-heading{
  margin: 24px 0 0;
  padding: 10px 14px;
  background: #111;           /* or var(--ph-accent, #111) */
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: .03em;
  border-radius: 6px 6px 0 0;
  text-transform: uppercase;
}

/* Main “copy” block */
.prompt-content-full{
  position: relative;
  padding: 18px 20px 22px 20px;
  border: 2px dashed #7c3aed;  /* purple accent */
  background: #f8f5ff;
  border-radius: 0 0 6px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;       /* keep line breaks */
  overflow-wrap: anywhere;
}

/* Optional: dim placeholders like {{your_name}} */
.prompt-content-full em,
.prompt-content-full [data-placeholder]{
  color:#b00020;
  font-style: normal;
  background: rgba(176,0,32,.08);
  padding: 0 3px;
  border-radius: 3px;
}

/* Copy button inside the block (if you want) */
.prompt-content-full .copy-prompt{
  position:absolute;
  top:10px;
  right:12px;
  background:#7c3aed;
  color:#fff;
  border:none;
  padding:6px 10px;
  border-radius:4px;
  cursor:pointer;
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
  gap:4px;
  opacity:.85;
  transition:opacity .15s;
}
.prompt-content-full .copy-prompt:hover{opacity:1;}

.member-badge{
    display:inline-block;
    padding:4px 10px;
    background:#ffeeba;
    color:#333;
    border-radius:4px;
    font-size:12px;
    margin:8px 0 12px;
}
/* === Share This Prompt (light card) === */
.prompt-share-section{
    margin: 3rem 0 2rem;
    padding: 1.75rem 2rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    color: #111827;
    position: relative;
}
.prompt-share-section h3{
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.prompt-share-section h3::before{
    content: "🔗";
    font-size: 1.05em;
    opacity: .8;
}

/* Buttons row */
.share-buttons{
    display: flex;
    flex-wrap: wrap;
    gap: .6rem .8rem;
}

/* Base button */
.share-action{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1;
    text-decoration: none;
    transition: background .16s, border-color .16s, transform .12s;
    cursor: pointer;
}
.share-action svg{
    width: 18px;
    height: 18px;
    stroke-width: 2;
    opacity: .8;
    transition: opacity .16s;
}
.share-action:hover{
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-1px);
}
.share-action:hover svg{ opacity: 1; }

/* Primary (copy) buttons */
.share-action.copy-prompt,
.share-action.copy-link{
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.share-action.copy-prompt:hover,
.share-action.copy-link:hover{
    background: #3b82f6;
    border-color: #3b82f6;
}

/* Copied state */
.share-action.copied{
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
.share-action.copied::after{
    content: "Copied!";
    margin-left: .35rem;
    font-weight: 500;
    font-size: .82rem;
}

/* Mobile */
@media (max-width: 600px){
    .prompt-share-section{ padding: 1.25rem 1.1rem; }
    .share-action{ flex: 1 1 calc(50% - .8rem); justify-content: center; }
}

/* Optional: auto-dark mode */
@media (prefers-color-scheme: dark){
    .prompt-share-section{
        background:#1f2937;
        border-color:#374151;
        color:#f9fafb;
        box-shadow:0 6px 18px rgba(0,0,0,.4);
    }
    .prompt-share-section h3{ color:#f9fafb; }
    .share-action{
        background:#2d3645;
        border-color:#4b5563;
        color:#f9fafb;
    }
    .share-action:hover{
        background:#374151;
        border-color:#6b7280;
    }
}
h1.entry-title{
	display: none;
}
/* Desktop: shrink the form wrapper to ~30% of the page width */
.prompt-form-modern{
    width:70%;
    margin:2rem auto;         /* center it */
    box-sizing:border-box;
}

/* Keep it usable on phones/tablets */
@media (max-width:900px){
    .prompt-form-modern{
        width:100%;
        max-width:none;
    }
}











/* ==== BOX + CENTER THE WHOLE FILTER AREA ==== */
.prompt-hub-table-modern .prompt-filters{
    max-width: 960px;
    margin: 0 auto 2rem;                 /* center horizontally */
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid #e5e8ef;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
    gap: 1rem 1.25rem;
    text-align: center;                  /* center labels/inline text */
}

/* keep groups narrow and centered inside their grid cell */
.prompt-hub-table-modern .filter-group{
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
}

/* center the chips row */
#selected-tags{
    justify-content: center;
}

/* center the tabs */
#prompt-tabs{
    justify-content: center;
}

/* make inputs look centered (text still left) */
.prompt-hub-table-modern .search-input{
    text-align: left;
    margin: 0 auto;
}

/* optional: center the placeholder icons too */
.prompt-hub-table-modern .filter-group input#prompt-search,
.prompt-hub-table-modern .filter-group input#tag-search{
    background-position: 12px center;
}

/* mobile tweak still fine */
@media (max-width:600px){
    .prompt-hub-table-modern .prompt-filters{
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}
/* ===== SEARCH + TAG INPUTS - prettier, tactile ===== */
.prompt-hub-table-modern .filter-group{
    position:relative;
    max-width:360px;
    margin:0 auto;
}

.prompt-hub-table-modern .search-input{
    width:100%;
    padding:.8rem 1rem .8rem 2.75rem;           /* room for icon */
    border:1.5px solid #d9deee;
    border-radius:12px;
    background:#f9fafc;
    font-size:15px;
    transition:background .15s, box-shadow .15s, border-color .15s;
}

.prompt-hub-table-modern .search-input:hover{
    background:#fff;
}

.prompt-hub-table-modern .search-input:focus{
    background:#fff;
    border-color:#6b72ff;
    box-shadow:0 0 0 4px rgba(107,114,255,.16);
    outline:none;
}

/* icon inside inputs */
.prompt-hub-table-modern .filter-group::before{
    content:"";
    position:absolute;
    left:14px;top:50%;
    width:18px;height:18px;
    transform:translateY(-50%);
    background-repeat:no-repeat;
    background-size:18px 18px;
    opacity:.55;
    pointer-events:none;
}
.filter-group input#prompt-search + * {} /* noop */

.filter-group input#prompt-search{
    background-position:14px center;
}
.filter-group input#tag-search{
    background-position:14px center;
}

.filter-group input#prompt-search,
.filter-group input#tag-search{
    background-repeat:no-repeat;
    background-size:18px 18px;
}

/* assign icons */
.filter-group input#prompt-search{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.filter-group input#tag-search{
    background-image:url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-width=\"2\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M20 12l-8 8-8-8 8-8 8 8z\"/%3E%3Cline x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/%3E%3Cline x1=\"12\" y1=\"16\" x2=\"12\" y2=\"16\"/%3E%3C/svg%3E');
}

/* optional: make placeholder lighter */
.prompt-hub-table-modern .search-input::placeholder{
    color:#9aa0b8;
}

/* ===== TAG SUGGESTIONS DROPDOWN ===== */
#tag-suggestions{
    position:absolute;
    top:calc(100% + 6px); left:0; right:0;
    background:#fff;
    border:1px solid #e1e4f0;
    border-radius:10px;
    box-shadow:0 10px 26px rgba(0,0,0,.08);
    max-height:240px;
    overflow:auto;
    z-index:25;
    display:none;
}
#tag-suggestions .tag-suggestion{
    padding:.6rem .9rem;
    cursor:pointer;
    font-size:.9rem;
    transition:background .1s;
}
#tag-suggestions .tag-suggestion:hover{
    background:#f2f4ff;
}

/* ===== SELECTED TAG CHIPS ===== */
#selected-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
    justify-content:center;  /* center them */
    margin-top:.3rem;
}

#selected-tags .tag-chip{
    background:#eef1ff;
    color:#4b50d8;
    border:1px solid #cfd5ff;
    border-radius:999px;
    padding:.28rem .7rem .28rem .9rem;
    font-size:.8rem;
    display:flex;
    align-items:center;
    gap:.4rem;
    line-height:1;
    animation:chip-pop .18s ease-out;
}
#selected-tags .tag-chip button{
    background:none;
    border:none;
    cursor:pointer;
    font-size:1rem;
    line-height:1;
    margin:-2px 0 0;
    color:#6b72ff;
}

/* little pop-in animation */
@keyframes chip-pop{
    0%{transform:scale(.8);opacity:0}
    100%{transform:scale(1);opacity:1}
}

/* ===== FILTER TABS ===== */
#prompt-tabs{
    justify-content:center;
    margin-top:.3rem;
}
#prompt-tabs .filter-tab{
    border-radius:999px;
    padding:.5rem 1rem;
    font-size:.85rem;
}
#prompt-tabs .filter-tab.active{
    background:#6b72ff;
    color:#fff;
    border-color:#6b72ff;
}

/* ===== MOBILE ===== */
@media (max-width:600px){
    .prompt-hub-table-modern .filter-group{max-width:100%}
}
.mbtn-bot{
    DISPLAY:NONE;

}

/* Hide the hamburger/off‑canvas trigger everywhere */
.off-cancas-panel,
.offcanvas-nav,
.offcanvas-menu{ 
    display:none !important;
}


/* --- Prompt of the Day tweaks --- */

/* 1. Bigger heading */
.prompt-day-box .pod-label{
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.2;
  margin: 0 0 .4rem;
  font-weight: 700;
}

/* Title link color */
.prompt-day-box .pod-title a{
  color: var(--hts-blue, #4348c8);
  text-decoration: none;
}
.prompt-day-box .pod-title a:hover{
  text-decoration: underline;
}

/* 2. Turn "Read full prompt" into a button */
.prompt-day-box .pod-link{
  display: inline-block;
  margin-top: .7rem;
  padding: .55rem 1.1rem;
  background: var(--hts-blue, #4348c8);
  color:#fff !important;
  border-radius: 8px;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  transition: background .15s, transform .1s;
}
.prompt-day-box .pod-link:hover{
  background:#2f37ad;
  transform: translateY(-1px);
}

/* 3. Kill the yellow link color inside this box */
.prompt-day-box a{
  color: var(--hts-blue, #4348c8);
}
.prompt-day-box a:visited{
  color: var(--hts-blue, white);
}
/* --- Wrap the whole Prompt-of-the-Day widget in a subtle card --- */
.prompt-day-box{
  max-width: 640px;          /* keep it from stretching too wide */
  margin: 1.5rem auto;       /* center & give breathing room */
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background:#fff;           /* white card */
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* dark mode friendly (optional) */
@media (prefers-color-scheme: dark){
  .prompt-day-box{
    background:#1c1d24;
    border-color:rgba(255,255,255,.08);
    box-shadow:0 4px 12px rgba(0,0,0,.4);
  }
}
/* pastel call-to-action for the "link to prompt" button */
.prompt-hub-table-modern .share-action.copy-link {
  background: #A8E6CF;          /* pastel mint/teal */
  color: #034f3f;               /* dark contrast text */
  font-weight: 600;
  border: 2px solid transparent;
  padding: .5em .9em;
  border-radius: .375rem;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow: 0 6px 16px rgba(168, 230, 207, 0.4);
}

/* hover / active */
.prompt-hub-table-modern .share-action.copy-link:hover {
  background: #8ed8b8;
  transform: translateY(-1px);
}
.prompt-hub-table-modern .share-action.copy-link:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(168, 230, 207, 0.5);
}

/* focus for accessibility */
.prompt-hub-table-modern .share-action.copy-link:focus-visible {
  outline: 3px solid #4fb89b;
  outline-offset: 2px;
}

/* optional gentle pulse to draw "click me" attention; add class .pulse when desired */
@keyframes ph-pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.prompt-hub-table-modern .share-action.copy-link.pulse {
  animation: ph-pulse 2.5s ease-in-out infinite;
}