/* ============================================================
 * PromptHive AI v1.0 — Premium App Experience CSS
 * Author: Mr Arslan CEO
 * Author URL: https://codester.com/mrdigitalceo
 *
 * Owns:
 *   - .ph-app-card  (icon-only app-style category / AI tool card)
 *   - .ph-app-grid  (responsive icon grid)
 *   - splash screen, onboarding, toast, skeleton, empty state, settings page
 *
 * IMPORTANT — this file OVERRIDES the legacy .ph-card-icon gradient/banner
 * (height:120px) seen on .ph-card-icon in older CSS. We keep the legacy
 * .ph-card / .ph-card-grid classes for backward compatibility but force them
 * into the new icon-only layout whenever they appear inside .ph-app-grid.
 * ============================================================ */

/* ============================================================
 * 1) PREMIUM APP ICON CARDS  (HOME / CATEGORIES / AI TOOLS)
 * ============================================================ */
.ph-app-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(135px,1fr));
    gap:16px;
    margin:14px 0 22px;
}

.ph-app-card{
    position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    background:var(--card,#ffffff);
    border:1px solid rgba(15,23,42,0.08);
    border-radius:22px;
    padding:18px 10px 16px;
    text-align:center;
    text-decoration:none;
    color:inherit;
    box-shadow:0 8px 24px rgba(15,23,42,0.06);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    min-height:140px;
}
.ph-app-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 35px rgba(15,23,42,0.10);
    border-color:rgba(142,70,232,0.30);
}
.ph-app-card.is-featured::after{
    content:"★";
    position:absolute;top:8px;right:10px;
    font-size:12px;color:#f59e0b;
    text-shadow:0 1px 2px rgba(245,158,11,.25);
}

/* Icon container — clean, no gradient, no banner. */
.ph-app-card .ph-card-icon{
    width:64px;height:64px;
    margin:8px auto 10px;
    display:flex;align-items:center;justify-content:center;
    background:transparent !important;
    color:var(--primary,#8E46E8);
    overflow:visible;
    border-radius:18px;
    padding:0;
}
.ph-app-card .ph-card-icon svg,
.ph-app-card .ph-card-icon .hn-icon{
    width:38px !important;height:38px !important;
    stroke-width:1.8;
    color:var(--primary,#8E46E8);
}
.ph-app-card .ph-card-icon img{
    width:46px;height:46px;
    object-fit:contain;
    background:transparent !important;
    border-radius:12px;padding:0;
}
.ph-app-card .ph-card-icon .material-icons,
.ph-app-card .ph-card-icon .material-symbols-outlined{
    font-size:38px !important;line-height:1 !important;color:var(--primary,#8E46E8);
}

.ph-app-card-title{
    font-size:14px;font-weight:700;
    color:var(--text,#0f172a);
    line-height:1.3;
    margin-top:2px;
    text-transform:capitalize;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
    min-height:36px;
}
.ph-app-card-meta{
    margin-top:6px;
    font-size:12px;color:var(--primary,#8E46E8);
    display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;
}
.ph-app-card-meta .hn-icon{width:11px !important;height:11px !important}

/* Dark mode tweaks */
[data-theme="dark"] .ph-app-card{
    background:var(--card,#1b2240);
    border-color:rgba(255,255,255,0.06);
    box-shadow:0 8px 24px rgba(0,0,0,0.28);
}
[data-theme="dark"] .ph-app-card-title{ color:var(--text,#e9ecf4) }

/* Admin: clean app-thumb (no gradient) for category/tool list rows */
.ph-app-thumb{
    width:40px;height:40px;border-radius:10px;
    background:rgba(142,70,232,0.10) !important;
    color:var(--primary,#8E46E8);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
.ph-app-thumb svg,.ph-app-thumb .hn-icon{ color:var(--primary,#8E46E8) }
.ph-app-thumb img{ width:100%;height:100%;object-fit:contain;background:transparent }

/* Responsive grid breakpoints */
@media (max-width: 900px){
    .ph-app-grid{ grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:14px }
}
@media (max-width: 600px){
    .ph-app-grid{ grid-template-columns:repeat(3,minmax(0,1fr));gap:12px }
    .ph-app-card{ padding:14px 8px 12px;border-radius:18px;min-height:128px }
    .ph-app-card .ph-card-icon{ width:56px;height:56px;margin-top:4px }
    .ph-app-card .ph-card-icon svg,
    .ph-app-card .ph-card-icon .hn-icon{ width:32px !important;height:32px !important }
    .ph-app-card .ph-card-icon img{ width:40px;height:40px }
    .ph-app-card-title{ font-size:13px }
    .ph-app-card-meta{ font-size:11px }
}
@media (max-width: 380px){
    .ph-app-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* Override legacy .ph-card-icon gradient banner if it ever leaks through */
.ph-app-grid .ph-card-icon[style]{
    background:transparent !important;
    height:auto !important;
    width:64px !important;
}

/* ============================================================
 * 2) SPLASH SCREEN — Mobile/Tablet only
 * ============================================================ */
.ph-splash-screen{
    position:fixed;inset:0;z-index:99999;
    background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0b1020 100%);
    display:none;
    align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .35s ease;
}
.ph-splash-screen.is-visible{ display:flex;opacity:1;pointer-events:auto }
.ph-splash-screen.is-leaving{ opacity:0 }
.ph-splash-inner{ text-align:center;color:#fff;padding:24px;max-width:380px }
.ph-splash-logo{
    width:96px;height:96px;border-radius:24px;margin:0 auto 18px;
    box-shadow:0 18px 50px rgba(142,70,232,.45);
    background:linear-gradient(135deg,var(--primary,#8E46E8),#a05cf0);
    object-fit:contain;padding:8px;
    animation:ph-pop-in .55s cubic-bezier(.22,1,.36,1);
}
.ph-splash-logo-text{
    display:flex;align-items:center;justify-content:center;
    font:800 42px/1 'Poppins',sans-serif;color:#fff;
}
.ph-splash-title{
    font:800 22px/1.2 'Poppins',sans-serif;
    margin-bottom:6px;letter-spacing:-.4px;
}
.ph-splash-sub{ font-size:13.5px;opacity:.78;margin-bottom:24px;line-height:1.45 }
.ph-splash-loader{ display:inline-flex;gap:6px;margin-bottom:10px }
.ph-splash-loader span{
    width:8px;height:8px;border-radius:50%;
    background:linear-gradient(135deg,#fff,#a05cf0);
    animation:ph-bounce 1s infinite ease-in-out;
}
.ph-splash-loader span:nth-child(2){ animation-delay:.15s }
.ph-splash-loader span:nth-child(3){ animation-delay:.3s }
.ph-splash-loading-text{ font-size:12px;opacity:.6;letter-spacing:.5px }
@keyframes ph-bounce{ 0%,80%,100%{transform:translateY(0);opacity:.45} 40%{transform:translateY(-8px);opacity:1} }
@keyframes ph-pop-in{ from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }

/* HARD HIDE splash on desktop (≥1025px) */
@media (min-width:1025px){
    .ph-splash-screen{ display:none !important }
    .ph-onboarding{ display:none !important }
}

/* ============================================================
 * 3) ONBOARDING — Mobile/Tablet, first-time users
 * ============================================================ */
.ph-onboarding{
    position:fixed;inset:0;z-index:99998;
    background:linear-gradient(160deg,#ffffff 0%,#f8f6ff 60%,#efe5ff 100%);
    display:none;flex-direction:column;
    opacity:0;
    transition:opacity .35s ease;
}
.ph-onboarding.is-visible{ display:flex;opacity:1 }
[data-theme="dark"] .ph-onboarding{
    background:linear-gradient(160deg,#0f172a 0%,#1b2240 60%,#2a1d4a 100%);color:#e9ecf4;
}
.ph-onb-inner{ display:flex;flex-direction:column;height:100%;padding:env(safe-area-inset-top,0) 24px env(safe-area-inset-bottom,0) }
.ph-onb-skip{
    align-self:flex-end;margin:18px 0 0;
    background:transparent;border:0;font:600 14px Inter,sans-serif;
    color:var(--primary,#8E46E8);cursor:pointer;padding:8px 12px;border-radius:10px;
}
.ph-onb-skip:hover{ background:rgba(142,70,232,.08) }
.ph-onb-track{
    flex:1;display:flex;overflow:hidden;align-items:center;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.ph-onb-slide{
    min-width:100%;width:100%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:20px 8px;
}
.ph-onb-icon{
    width:140px;height:140px;border-radius:36px;margin-bottom:28px;
    background:linear-gradient(135deg,rgba(142,70,232,.12),rgba(160,92,240,.06));
    display:flex;align-items:center;justify-content:center;
    color:var(--primary,#8E46E8);
    box-shadow:0 18px 40px rgba(142,70,232,.20);
}
.ph-onb-icon svg,.ph-onb-icon .hn-icon{ width:72px !important;height:72px !important }
.ph-onb-title{ font:800 24px/1.25 'Poppins',sans-serif;margin:0 0 12px;letter-spacing:-.4px }
.ph-onb-desc{ font-size:15px;line-height:1.55;color:var(--text-soft,#475569);max-width:340px;margin:0 auto }
[data-theme="dark"] .ph-onb-desc{ color:#cbd5e1 }
.ph-onb-foot{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 0 28px;gap:14px;
}
.ph-onb-dots{ display:inline-flex;gap:8px }
.ph-onb-dot{
    width:8px;height:8px;border-radius:50%;
    background:rgba(142,70,232,.25);transition:width .25s,background .25s;
}
.ph-onb-dot.active{ width:24px;background:var(--primary,#8E46E8);border-radius:6px }
.ph-onb-next{
    background:linear-gradient(135deg,var(--primary,#8E46E8),#a05cf0);
    color:#fff;border:0;border-radius:14px;
    padding:12px 22px;font:700 14.5px Inter,sans-serif;
    cursor:pointer;box-shadow:0 10px 24px rgba(142,70,232,.30);
    transition:transform .15s, box-shadow .25s;
}
.ph-onb-next:hover{ transform:translateY(-1px);box-shadow:0 14px 30px rgba(142,70,232,.40) }
.ph-onb-next:active{ transform:translateY(0) }

/* ============================================================
 * 4) TOAST NOTIFICATIONS
 * ============================================================ */
.ph-toast-root{
    position:fixed;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;gap:8px;z-index:99997;
    pointer-events:none;
    padding:0 12px;width:max-content;max-width:calc(100% - 24px);
}
.ph-toast-root.ph-toast-bottom{ bottom:calc(env(safe-area-inset-bottom,0px) + 84px) }
.ph-toast-root.ph-toast-top{ top:calc(env(safe-area-inset-top,0px) + 16px) }
@media (min-width:768px){
    .ph-toast-root.ph-toast-bottom{ bottom:24px }
}
.ph-toast{
    pointer-events:auto;
    background:#0f172a;color:#fff;
    padding:11px 16px;border-radius:14px;
    font:600 13.5px Inter,sans-serif;
    box-shadow:0 18px 40px rgba(0,0,0,.25);
    display:flex;align-items:center;gap:9px;
    min-width:200px;max-width:90vw;
    opacity:0;transform:translateY(8px);
    transition:opacity .25s, transform .25s;
}
.ph-toast.is-shown{ opacity:1;transform:translateY(0) }
.ph-toast-success{ background:linear-gradient(135deg,#10b981,#059669) }
.ph-toast-error{   background:linear-gradient(135deg,#ef4444,#dc2626) }
.ph-toast-info{    background:linear-gradient(135deg,#3b82f6,#2563eb) }
.ph-toast .ph-toast-ic{ display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px }

/* ============================================================
 * 5) SKELETON LOADERS
 * ============================================================ */
.ph-skeleton{ position:relative;overflow:hidden;background:#e5e7eb;border-radius:10px }
[data-theme="dark"] .ph-skeleton{ background:#1f2944 }
.ph-skeleton::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform:translateX(-100%);
    animation:ph-shimmer 1.4s infinite;
}
[data-theme="dark"] .ph-skeleton::after{
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%);
}
@keyframes ph-shimmer{ 100%{transform:translateX(100%)} }
.ph-skeleton-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:16px;margin:14px 0 }
.ph-skeleton-card{
    background:var(--card,#fff);border:1px solid rgba(15,23,42,.08);border-radius:22px;
    padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.ph-skeleton-card .ph-sk-ic{ width:64px;height:64px;border-radius:18px }
.ph-skeleton-card .ph-sk-line{ width:80%;height:12px;border-radius:6px }
.ph-skeleton-card .ph-sk-line.short{ width:50%;height:10px }

/* Simple style (pulse) */
.ph-skeleton-simple .ph-skeleton::after{ display:none }
.ph-skeleton-simple .ph-skeleton{ animation:ph-pulse 1.4s ease-in-out infinite }
@keyframes ph-pulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

/* ============================================================
 * 6) EMPTY STATES
 * ============================================================ */
.ph-empty-state{
    text-align:center;padding:40px 20px 32px;
    border-radius:22px;border:1px dashed rgba(142,70,232,.25);
    background:linear-gradient(135deg,rgba(142,70,232,.04),rgba(160,92,240,.02));
    margin:14px 0;
}
.ph-empty-icon{
    width:84px;height:84px;border-radius:24px;margin:0 auto 14px;
    background:rgba(142,70,232,.10);color:var(--primary,#8E46E8);
    display:flex;align-items:center;justify-content:center;
}
.ph-empty-icon svg,.ph-empty-icon .hn-icon{ width:42px !important;height:42px !important }
.ph-empty-title{ font:800 18px/1.3 'Poppins',sans-serif;margin:0 0 6px;color:var(--text,#0f172a) }
[data-theme="dark"] .ph-empty-title{ color:#e9ecf4 }
.ph-empty-msg{ font-size:13.5px;color:var(--text-soft,#475569);line-height:1.55;max-width:360px;margin:0 auto 14px }
[data-theme="dark"] .ph-empty-msg{ color:#cbd5e1 }
.ph-empty-action .btn{ display:inline-flex }

/* ============================================================
 * 7) FRONTEND SETTINGS PAGE (?page=settings)
 * ============================================================ */
.ph-settings-page{ max-width:760px;margin:0 auto;padding:8px 0 100px }
.ph-set-head{ text-align:center;margin:6px 0 22px }
.ph-set-head h1{ font:800 26px/1.2 'Poppins',sans-serif;margin:0;letter-spacing:-.4px }
.ph-set-head .sub{ color:var(--muted,#64748b);font-size:13.5px;margin-top:6px }
.ph-set-section{
    background:var(--card,#fff);
    border:1px solid rgba(15,23,42,.08);
    border-radius:20px;
    padding:8px;
    margin-bottom:16px;
    box-shadow:0 4px 14px rgba(15,23,42,.04);
}
[data-theme="dark"] .ph-set-section{ background:#1b2240;border-color:rgba(255,255,255,.06) }
.ph-set-section-title{
    font:700 13px Inter,sans-serif;text-transform:uppercase;letter-spacing:.8px;
    color:var(--muted,#64748b);padding:14px 16px 8px;
}
.ph-set-row{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:14px 16px;border-radius:14px;
    transition:background .15s;
}
.ph-set-row + .ph-set-row{ border-top:1px solid rgba(15,23,42,.06) }
[data-theme="dark"] .ph-set-row + .ph-set-row{ border-top-color:rgba(255,255,255,.06) }
.ph-set-row:hover{ background:rgba(142,70,232,.04) }
.ph-set-row-l{ display:flex;align-items:center;gap:12px;min-width:0;flex:1 }
.ph-set-icon{
    width:38px;height:38px;border-radius:12px;flex-shrink:0;
    background:rgba(142,70,232,.10);color:var(--primary,#8E46E8);
    display:flex;align-items:center;justify-content:center;
}
.ph-set-text{ min-width:0;flex:1 }
.ph-set-text .ttl{ font:700 14.5px Inter,sans-serif;color:var(--text,#0f172a);margin:0;line-height:1.3 }
[data-theme="dark"] .ph-set-text .ttl{ color:#e9ecf4 }
.ph-set-text .desc{ font-size:12px;color:var(--muted,#64748b);margin-top:2px;line-height:1.4 }
.ph-set-row-r{ flex-shrink:0;display:flex;align-items:center;gap:8px;color:var(--muted,#64748b) }
.ph-set-row-r select{
    border:1px solid rgba(15,23,42,.12);background:transparent;
    border-radius:10px;padding:7px 26px 7px 10px;font:600 13px Inter,sans-serif;
    color:var(--text,#0f172a);cursor:pointer;
}
[data-theme="dark"] .ph-set-row-r select{ color:#e9ecf4;border-color:rgba(255,255,255,.12) }

/* Switch */
.ph-toggle{ position:relative;display:inline-block;width:42px;height:24px }
.ph-toggle input{ opacity:0;width:0;height:0 }
.ph-toggle .slider{
    position:absolute;cursor:pointer;inset:0;
    background:rgba(15,23,42,.14);border-radius:24px;transition:.25s;
}
.ph-toggle .slider::before{
    content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;
    background:#fff;border-radius:50%;transition:.25s;
    box-shadow:0 2px 4px rgba(0,0,0,.18);
}
.ph-toggle input:checked + .slider{ background:linear-gradient(135deg,var(--primary,#8E46E8),#a05cf0) }
.ph-toggle input:checked + .slider::before{ transform:translateX(18px) }

/* About card */
.ph-about-card{ padding:16px;text-align:center }
.ph-about-logo{
    width:64px;height:64px;border-radius:18px;margin:0 auto 10px;
    background:linear-gradient(135deg,var(--primary,#8E46E8),#a05cf0);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font:800 28px/1 'Poppins',sans-serif;
    box-shadow:0 10px 24px rgba(142,70,232,.30);
    object-fit:contain;padding:6px;
}
.ph-about-name{ font:800 18px 'Poppins',sans-serif;margin:6px 0 2px }
.ph-about-ver{ font-size:12px;color:var(--muted,#64748b) }
.ph-about-credits{ margin-top:10px;font-size:12.5px;color:var(--muted,#64748b);line-height:1.6 }
.ph-about-credits a{ color:var(--primary,#8E46E8);font-weight:600;text-decoration:none }

/* ============================================================
 * 8) FAVORITE / SHARE BUTTONS (used on category/AI tool hero)
 * ============================================================ */
.ph-fav-btn.is-active{
    background:linear-gradient(135deg,#ef4444,#f87171) !important;
    border-color:transparent !important;color:#fff !important;
}
.ph-fav-btn.is-active .lbl::before{ content:"" }

/* ============================================================
 * 9) PROMPT DETAIL — sticky mobile copy bar
 * ============================================================ */
.ph-prompt-actions-sticky{
    position:fixed;left:0;right:0;
    bottom:calc(env(safe-area-inset-bottom,0px) + 64px);
    z-index:90;
    padding:10px 14px;
    background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff 30%);
    display:none;
    pointer-events:none;
}
[data-theme="dark"] .ph-prompt-actions-sticky{ background:linear-gradient(180deg,rgba(11,16,32,0),#0b1020 30%) }
@media (max-width:768px){ .ph-prompt-actions-sticky.is-active{ display:flex;gap:8px;pointer-events:auto } }
.ph-prompt-actions-sticky .btn{ flex:1;justify-content:center }

/* ============================================================
 * 10) PROMPT CATEGORY/TOOL BADGE in prompt detail
 * ============================================================ */
.ph-prompt-badges{ display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px }
.ph-prompt-badges .ph-badge-pill{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 12px;border-radius:999px;
    background:rgba(142,70,232,.10);color:var(--primary,#8E46E8);
    font:600 12px Inter,sans-serif;
}

/* ============================================================
 * 11) SEARCH PAGE — recent / popular chips
 * ============================================================ */
.ph-search-chips{ display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px }
.ph-search-chip{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 14px;border-radius:999px;
    background:rgba(142,70,232,.08);color:var(--primary,#8E46E8);
    font:600 13px Inter,sans-serif;
    text-decoration:none;cursor:pointer;border:0;
    transition:background .2s;
}
.ph-search-chip:hover{ background:rgba(142,70,232,.16) }
.ph-search-chip .x{ opacity:.7 }
.ph-search-block{ margin-bottom:14px }
.ph-search-block-ttl{ font:700 13px Inter,sans-serif;color:var(--muted,#64748b);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px }

/* ============================================================
 * 12) RECENTLY VIEWED home section + reset button
 * ============================================================ */
.ph-rv-section .chip{ cursor:pointer }