/*
 * Prompts Pick — Frontend v1.2
 * Design: PromptPlum-inspired dark navy, clean minimal
 */

/* =========================================================
   VARIABLES
   ========================================================= */
.pp-app {
    --bg:        #0b1220;
    --bg-card:   #111827;
    --bg-card2:  #0f1829;
    --bg-input:  #1a2336;
    --bg-hover:  #1e2a3d;
    --border:    rgba(255,255,255,0.07);
    --border-2:  rgba(255,255,255,0.12);
    --text:      #f9fafb;
    --text-2:    #9ca3af;
    --text-3:    #4b5563;
    --accent:    #6366f1;
    --accent-lt: #818cf8;
    --green:     #10b981;
    --blue:      #3b82f6;
    --gold:      #f59e0b;
    --radius:    10px;
    --radius-sm: 6px;
    --font-head: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --trans:     0.18s ease;
}

.pp-app.pp-light {
    --bg:        #f8fafc;
    --bg-card:   #ffffff;
    --bg-card2:  #f1f5f9;
    --bg-input:  #f1f5f9;
    --bg-hover:  #e2e8f0;
    --border:    rgba(0,0,0,0.08);
    --border-2:  rgba(0,0,0,0.14);
    --text:      #0f172a;
    --text-2:    #64748b;
    --text-3:    #cbd5e1;
    --accent:    #4f46e5;
    --accent-lt: #6366f1;
}

/* =========================================================
   RESET
   ========================================================= */
.pp-app *, .pp-app *::before, .pp-app *::after {
    box-sizing:border-box; margin:0; padding:0;
}
.pp-app {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
}
.pp-app a        { color:var(--accent-lt); text-decoration:none; }
.pp-app img      { max-width:100%; height:auto; display:block; }
.pp-app button   { font-family:var(--font-body); cursor:pointer; border:none; outline:none; background:none; }
.pp-app button:focus-visible,
.pp-app a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* =========================================================
   HERO — PromptPlum style
   ========================================================= */
.pp-hero {
    padding: 56px 20px 44px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    max-width: 100%;
}

.pp-hero-inner { max-width: 620px; margin: 0 auto; }

.pp-hero-badge {
    display: inline-flex;
    align-items: center; gap:6px;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-2);
    background: var(--bg-card);
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing:2px; text-transform:uppercase;
    color: var(--text-2);
    margin-bottom: 20px;
}
.pp-badge-dot {
    width:5px; height:5px; border-radius:50%;
    background: var(--accent-lt); flex-shrink:0;
}

.pp-hero-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    letter-spacing: -1.5px;
    line-height: 1.05;
    color: var(--text);
    margin-bottom: 14px;
}
.pp-hero-title em {
    font-style: normal;
    color: var(--accent-lt);
}

.pp-hero-subtitle {
    font-size: 1rem;
    color: var(--text-2);
    font-weight: 400;
    line-height: 1.7;
    max-width: 460px;
    margin: 0 auto 24px;
}

/* Popular links — PromptPlum slash style */
.pp-popular-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}
.pp-popular-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    margin-right: 10px;
}
.pp-popular-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    padding: 2px 0;
    transition: color var(--trans);
    position: relative;
}
.pp-popular-link:hover { color: var(--text); }
.pp-popular-link:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: var(--text-3);
    font-weight: 400;
}

/* =========================================================
   CONTROLS
   ========================================================= */
.pp-controls {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0;
}

.pp-search-wrap {
    position: relative;
    max-width: 500px;
    margin: 0 auto 16px;
}
.pp-search-icon {
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    color:var(--text-3); font-size:15px; pointer-events:none; font-style:normal;
}
.pp-search-input {
    width:100%; padding:11px 38px 11px 38px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); color:var(--text);
    font-family:var(--font-body); font-size:.9rem;
    outline:none; transition:border-color .2s, box-shadow .2s;
}
.pp-search-input:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(99,102,241,.12);
}
.pp-search-input::placeholder { color:var(--text-3); }
.pp-search-count {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    font-family:var(--font-mono); font-size:10px; color:var(--accent-lt); opacity:.6;
}

.pp-controls-bottom {
    display:flex; align-items:center;
    justify-content:space-between; gap:10px;
    flex-wrap:wrap; padding-bottom:2px;
}

.pp-filters { display:flex; gap:6px; flex-wrap:wrap; flex:1; }

.pp-filter-btn {
    padding:5px 13px; border-radius:999px;
    font-size:12px; font-weight:500;
    border:1px solid var(--border); background:transparent;
    color:var(--text-2); transition:var(--trans);
}
.pp-filter-btn:hover {
    border-color:var(--border-2); color:var(--text); background:var(--bg-card);
}
.pp-filter-btn.active {
    background:var(--bg-card); border-color:var(--accent-lt);
    color:var(--text); box-shadow:0 0 0 1px var(--accent-lt);
}

.pp-sort-tabs {
    display:flex; gap:0; flex-shrink:0;
    border-bottom:2px solid var(--border);
    padding-bottom:0;
}
.pp-sort-btn {
    padding:7px 16px 9px;
    font-size:12px; font-weight:600;
    color:var(--text-3); background:transparent;
    border-bottom:2px solid transparent;
    margin-bottom:-2px;
    transition:color .15s, border-color .15s;
    letter-spacing:.2px;
}
.pp-sort-btn.active { color:var(--text); border-bottom-color:var(--accent-lt); }
.pp-sort-btn:hover:not(.active) { color:var(--text-2); }

/* =========================================================
   GRID
   ========================================================= */
.pp-grid-wrap {
    max-width:1200px; margin:20px auto 0; padding:0 20px;
}
.pp-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
@media(max-width:1024px){ .pp-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:580px) { .pp-grid{grid-template-columns:1fr;gap:12px;} }
.pp-app[data-cols="2"] .pp-grid{grid-template-columns:repeat(2,1fr);}
.pp-app[data-cols="4"] .pp-grid{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.pp-app[data-cols="4"] .pp-grid{grid-template-columns:repeat(2,1fr);}}

.pp-empty {
    grid-column:1/-1; text-align:center;
    padding:72px 20px; color:var(--text-3); font-size:.9rem;
}
.pp-empty .dashicons {
    font-size:40px;width:40px;height:40px;
    display:block;margin:0 auto 12px;color:var(--text-3);
}

/* =========================================================
   CARD — PromptPlum style
   ========================================================= */
.pp-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    animation: pp-in .3s ease both;
    transition: transform .22s ease, border-color .22s, box-shadow .22s;
    display: flex;
    flex-direction: column;
}
@keyframes pp-in {
    from{opacity:0;transform:translateY(12px);}
    to  {opacity:1;transform:translateY(0);}
}
.pp-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-2);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.pp-card-gloss { display:none; }

/* IMAGE — 70% of card */
.pp-card-img-wrap {
    position:relative; overflow:hidden;
    aspect-ratio: 3/4;
    background:#0a1020; flex-shrink:0;
}
.pp-card-img-bg { position:absolute;inset:0;background:#0a1020; }
.pp-card-img {
    width:100%;height:100%;
    object-fit:cover;display:block;
    position:relative;z-index:1;
    transition:transform .4s ease;
}
.pp-card:hover .pp-card-img { transform:scale(1.04); }

.pp-card-img-fade {
    position:absolute; bottom:0;left:0;right:0; height:55%;
    background:linear-gradient(0deg,rgba(11,18,32,1) 0%,rgba(11,18,32,.45) 55%,transparent 100%);
    z-index:2; pointer-events:none;
}
.pp-app.pp-light .pp-card-img-fade {
    background:linear-gradient(0deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.3) 55%,transparent 100%);
}

.pp-card-img-placeholder {
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:#0a1020; position:relative;z-index:1;
    font-size:38px; color:var(--text-3);
}

/* Badges */
.pp-badge-featured {
    position:absolute;top:10px;left:10px;z-index:3;
    padding:2px 8px; border-radius:4px;
    background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);
    font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.5px;
    color:#fbbf24;
}
.pp-badge-copies {
    position:absolute;top:10px;right:10px;z-index:3;
    display:flex;align-items:center;gap:3px;
    padding:3px 9px; border-radius:999px;
    background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1);
    font-family:var(--font-mono);font-size:11px;font-weight:700;
    color:rgba(255,255,255,.9);
}
.pp-badge-cat {
    position:absolute;bottom:12px;left:12px;z-index:3;
    padding:3px 9px; border-radius:4px;
    background:rgba(99,102,241,.3);border:1px solid rgba(99,102,241,.4);
    font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    color:#c7d2fe;
}

.pp-card-hover-overlay {
    position:absolute;inset:0;z-index:3;
    background:rgba(0,0,0,.3);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .2s;
}
.pp-card:hover .pp-card-hover-overlay{opacity:1;}
.pp-hover-label {
    padding:7px 18px; border-radius:999px;
    background:rgba(99,102,241,.55);border:1px solid rgba(129,140,248,.5);
    color:#fff;font-size:11px;font-weight:700;letter-spacing:.4px;
}

/* CARD BODY */
.pp-card-body { padding:12px 13px 14px; flex:1; display:flex; flex-direction:column; }

.pp-card-ai-tags { display:flex;gap:5px;margin-bottom:6px;flex-wrap:wrap; }
.pp-ai-tag {
    font-family:var(--font-mono);font-size:9px;font-weight:700;
    padding:2px 7px;border-radius:3px;letter-spacing:.3px;
}
.pp-ai-tag-chatgpt{color:#6ee7b7;border:1px solid rgba(110,231,183,.2);background:rgba(110,231,183,.06);}
.pp-ai-tag-gemini {color:#93c5fd;border:1px solid rgba(147,197,253,.2);background:rgba(147,197,253,.06);}

.pp-card-title {
    font-family:var(--font-head);font-weight:700;
    font-size:.9rem;color:var(--text);margin-bottom:5px;
    letter-spacing:-.1px;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pp-card-preview {
    font-size:.75rem;color:var(--text-2);line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin-bottom:11px;font-weight:400;flex:1;
}

.pp-card-actions{display:flex;gap:7px;margin-top:auto;}
.pp-btn-action {
    padding:8px 10px;border-radius:var(--radius-sm);
    font-size:11px;font-weight:700;letter-spacing:.2px;
    transition:var(--trans);
}
.pp-btn-view {
    flex:1;border:1px solid var(--border);background:var(--bg-input);color:var(--text-2);
}
.pp-btn-view:hover{border-color:var(--border-2);color:var(--text);background:var(--bg-hover);}
.pp-btn-copy {
    flex:2;border:1px solid rgba(99,102,241,.3);background:rgba(99,102,241,.1);color:var(--text);
}
.pp-btn-copy:hover{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(99,102,241,.35);}
.pp-btn-copy.pp-copied{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.4);color:#6ee7b7;}

/* =========================================================
   LOAD MORE
   ========================================================= */
.pp-load-more-wrap{text-align:center;padding:28px 20px;}
.pp-load-more-btn {
    padding:10px 36px;border-radius:999px;
    border:1px solid var(--border-2);background:var(--bg-card);
    color:var(--text-2);font-size:.875rem;font-weight:600;letter-spacing:.2px;
    transition:var(--trans);
}
.pp-load-more-btn:hover{border-color:var(--accent-lt);color:var(--text);}
.pp-load-more-btn:disabled{opacity:.4;cursor:not-allowed;}

/* =========================================================
   BROWSE BY STYLE — PromptPlum grid style
   ========================================================= */
.pp-browse-style {
    max-width:1200px;margin:28px 20px 44px;
    padding:26px 24px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius);
}
@media(min-width:1240px){.pp-browse-style{margin-left:auto;margin-right:auto;}}

.pp-browse-title {
    font-family:var(--font-head);font-weight:800;font-size:1.1rem;
    color:var(--text);margin-bottom:4px;letter-spacing:-.3px;
}
.pp-browse-subtitle{font-size:.82rem;color:var(--text-2);margin-bottom:20px;}

.pp-browse-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:8px;
}
.pp-browse-item {
    display:flex;align-items:center;gap:10px;
    padding:11px 13px;border-radius:var(--radius-sm);
    border:1px solid var(--border);background:var(--bg-input);
    cursor:pointer;transition:var(--trans);
}
.pp-browse-item:hover{border-color:var(--border-2);background:var(--bg-hover);transform:translateY(-1px);}
.pp-browse-letter {
    width:32px;height:32px;border-radius:6px;flex-shrink:0;
    background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.2);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--accent-lt);
}
.pp-browse-name{font-weight:600;font-size:.82rem;color:var(--text);line-height:1.2;}
.pp-browse-count{font-size:.7rem;font-family:var(--font-mono);color:var(--text-3);margin-top:2px;}

/* =========================================================
   MODAL
   ========================================================= */
.pp-modal-overlay {
    position:fixed;inset:0;z-index:99999;
    background:rgba(0,0,0,.8);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    padding:16px;overscroll-behavior:contain;
}
.pp-modal-box {
    background:var(--bg-card);border:1px solid var(--border-2);
    border-radius:14px;width:100%;max-width:555px;max-height:90vh;
    overflow-y:auto;
    box-shadow:0 32px 72px rgba(0,0,0,.6);
    animation:pp-modal-in .2s ease;overscroll-behavior:contain;
}
@keyframes pp-modal-in{from{opacity:0;transform:scale(.95) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
.pp-modal-gloss{display:none;}

/* Modal image */
.pp-modal-img-wrap{
    position:relative;overflow:hidden;
    border-radius:12px 12px 0 0;aspect-ratio:16/9;background:#0a1020;
}
.pp-modal-img-bg{position:absolute;inset:0;background:#0a1020;}
.pp-modal-img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;}
.pp-modal-img-fade{
    position:absolute;inset:0;
    background:linear-gradient(0deg,rgba(11,18,32,.95) 0%,transparent 55%);
    z-index:2;pointer-events:none;
}
.pp-app.pp-light .pp-modal-img-fade{background:linear-gradient(0deg,rgba(255,255,255,.97) 0%,transparent 55%);}

.pp-modal-close{
    position:absolute;top:11px;right:11px;z-index:4;
    width:30px;height:30px;border-radius:6px;
    background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.7);font-size:13px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:var(--trans);
}
.pp-modal-close:hover{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.4);color:#fff;}

.pp-modal-img-badges{
    position:absolute;bottom:12px;left:12px;z-index:3;
    display:flex;gap:6px;flex-wrap:wrap;align-items:center;
}
.pp-modal-cat-badge{
    padding:3px 10px;border-radius:4px;
    background:rgba(99,102,241,.3);border:1px solid rgba(99,102,241,.4);
    font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#c7d2fe;
}
.pp-modal-ai-badges{display:flex;gap:4px;}
.pp-modal-copies-badge{
    position:absolute;bottom:12px;right:12px;z-index:3;
    padding:3px 10px;border-radius:999px;
    background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);
    font-family:var(--font-mono);font-size:10px;font-weight:700;color:rgba(255,255,255,.9);
}

/* Modal body */
.pp-modal-body{padding:20px 22px 24px;}
.pp-modal-title{
    font-family:var(--font-head);font-weight:800;font-size:1.15rem;
    color:var(--text);margin-bottom:14px;line-height:1.2;letter-spacing:-.3px;
}
.pp-modal-prompt-box{
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:8px;padding:14px;margin-bottom:12px;
}
.pp-modal-prompt-label{
    font-family:var(--font-mono);font-size:9px;font-weight:700;
    letter-spacing:3px;color:var(--text-3);text-transform:uppercase;margin-bottom:8px;
}
.pp-modal-prompt-text{
    font-family:var(--font-mono);font-size:.82rem;
    color:var(--accent-lt);line-height:1.85;white-space:pre-wrap;word-break:break-word;
}
.pp-app.pp-light .pp-modal-prompt-text{color:var(--accent);}

.pp-modal-tip{
    background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);
    border-radius:6px;padding:9px 13px;font-size:.82rem;color:#fbbf24;margin-bottom:12px;
}
.pp-modal-actions{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.pp-modal-copy-btn{
    width:100%;padding:13px;border-radius:8px;
    border:1px solid rgba(99,102,241,.3);background:rgba(99,102,241,.12);
    color:var(--text);font-weight:700;font-size:.95rem;transition:var(--trans);
}
.pp-modal-copy-btn:hover{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 4px 18px rgba(99,102,241,.35);}
.pp-modal-copy-btn.pp-copied{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.4);color:#6ee7b7;}
.pp-modal-try-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:10px;border-radius:7px;
    font-size:.86rem;font-weight:700;text-decoration:none;transition:var(--trans);
}
.pp-modal-chatgpt-btn{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:#6ee7b7;}
.pp-modal-chatgpt-btn:hover{background:rgba(16,185,129,.18);border-color:rgba(16,185,129,.4);color:#6ee7b7;}
.pp-modal-gemini-btn{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);color:#93c5fd;}
.pp-modal-gemini-btn:hover{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.4);color:#93c5fd;}

.pp-modal-secondary{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.pp-like-btn{
    display:flex;align-items:center;gap:6px;
    padding:9px 16px;border-radius:7px;
    border:1px solid var(--border);background:var(--bg-input);
    color:var(--text-2);font-size:13px;font-weight:600;
    transition:var(--trans);flex:1;justify-content:center;
}
.pp-like-btn:hover{border-color:rgba(244,63,94,.35);color:#fca5a5;background:rgba(244,63,94,.08);}
.pp-like-btn.pp-liked{border-color:rgba(244,63,94,.5);color:#f43f5e;background:rgba(244,63,94,.1);}
.pp-like-icon{font-size:14px;transition:transform .15s;}
.pp-like-btn:active .pp-like-icon{transform:scale(1.3);}
.pp-whatsapp-btn{
    display:flex;align-items:center;gap:6px;
    padding:9px 16px;border-radius:7px;
    border:1px solid rgba(34,197,94,.2);background:rgba(34,197,94,.07);
    color:#4ade80;font-size:13px;font-weight:700;
    transition:var(--trans);flex:1;justify-content:center;text-decoration:none;
}
.pp-whatsapp-btn:hover{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.4);color:#4ade80;}

.pp-rating-wrap{
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:8px;padding:13px 15px;margin-bottom:16px;
}
.pp-rating-label{
    font-size:11px;font-weight:600;color:var(--text-2);
    margin-bottom:9px;font-family:var(--font-mono);
}
.pp-stars{display:flex;gap:5px;margin-bottom:7px;}
.pp-star{font-size:22px;color:rgba(255,255,255,.1);transition:color .15s,transform .15s;line-height:1;padding:2px;}
.pp-app.pp-light .pp-star{color:rgba(0,0,0,.12);}
.pp-star:hover,.pp-star.pp-star-hover,.pp-star.pp-star-active{color:#f59e0b;transform:scale(1.18);}
.pp-rating-info{font-size:11px;color:var(--text-3);font-family:var(--font-mono);min-height:15px;}

.pp-related-wrap{margin-top:4px;}
.pp-related-title{
    font-family:var(--font-mono);font-size:10px;letter-spacing:2px;
    text-transform:uppercase;color:var(--text-3);margin-bottom:11px;
}
.pp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.pp-related-card{
    border-radius:8px;overflow:hidden;border:1px solid var(--border);
    background:var(--bg-input);cursor:pointer;transition:var(--trans);
}
.pp-related-card:hover{border-color:var(--border-2);transform:translateY(-2px);}
.pp-related-img-wrap{aspect-ratio:4/3;overflow:hidden;background:#0a1020;}
.pp-related-img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.pp-related-card:hover .pp-related-img{transform:scale(1.06);}
.pp-related-img-placeholder{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    color:var(--text-3);font-size:22px;
}
.pp-related-body{padding:7px 9px;}
.pp-related-title-text{
    font-weight:600;font-size:.73rem;color:var(--text);line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* =========================================================
   TOAST
   ========================================================= */
.pp-toast {
    position:fixed;bottom:20px;left:50%;
    transform:translateX(-50%) translateY(60px);
    background:var(--bg-card);border:1px solid rgba(99,102,241,.4);
    color:var(--text);padding:10px 22px;border-radius:8px;
    font-family:var(--font-mono);font-size:12px;font-weight:700;
    z-index:999999;box-shadow:0 16px 40px rgba(0,0,0,.5);
    white-space:nowrap;pointer-events:none;opacity:0;
    transition:transform .28s cubic-bezier(.2,.8,.3,1.15),opacity .28s;
}
.pp-toast.pp-toast-visible{transform:translateX(-50%) translateY(0);opacity:1;}

/* =========================================================
   UTILITY
   ========================================================= */
.pp-hidden{display:none!important;}
.pp-modal-box::-webkit-scrollbar{width:3px;}
.pp-modal-box::-webkit-scrollbar-track{background:transparent;}
.pp-modal-box::-webkit-scrollbar-thumb{background:rgba(99,102,241,.3);border-radius:3px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:480px){
    .pp-hero{padding:40px 16px 32px;}
    .pp-controls{padding:14px 16px 0;}
    .pp-grid-wrap{padding:0 16px;}
    .pp-browse-style{margin:20px 16px 32px;padding:18px 14px;}
    .pp-modal-body{padding:16px 16px 20px;}
    .pp-related-grid{grid-template-columns:repeat(2,1fr);}
    .pp-sort-tabs{display:none;}
}