/* ============================================================
   PROMPT TEMPLATES — Bento Grid Page
   ============================================================ */

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --tpl-bg:       #0d0d0f;
    --tpl-sidebar:  #131317;
    --tpl-surface:  #1a1a20;
    --tpl-surface2: #222229;
    --tpl-border:   #2a2a35;
    --tpl-border2:  #35353f;
    --tpl-text:     #e8e8f0;
    --tpl-muted:    #66668a;
    --tpl-accent:   #a855f7;
    --tpl-accent2:  #ec4899;
    --tpl-grad:     linear-gradient(135deg, #a855f7, #ec4899);
    --tpl-radius:   14px;
    --tpl-sidebar-w:220px;
    --tpl-cell:     180px;
    --tpl-gap:      10px;
}

.tpl-body {
    font-family: 'Inter', sans-serif;
    background: var(--tpl-bg);
    color: var(--tpl-text);
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== SIDEBAR ===== */
.tpl-sidebar {
    width: var(--tpl-sidebar-w); min-width: var(--tpl-sidebar-w);
    background: var(--tpl-sidebar);
    border-right: 1px solid var(--tpl-border);
    display: flex; flex-direction: column;
    padding: 20px 12px;
    position: fixed; top: 0; left: 0; height: 100vh;
    z-index: 200;
}

.tpl-sidebar-logo { display:flex; align-items:center; gap:10px; padding:2px 10px 22px; text-decoration:none; }
.tpl-logo-mark { font-size:22px; background:var(--tpl-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.tpl-logo-text { font-size:17px; font-weight:800; letter-spacing:-0.5px; color:var(--tpl-text); }

.tpl-sidebar-nav { display:flex; flex-direction:column; gap:2px; flex:1; }

.tpl-nav-item {
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
    color:var(--tpl-muted); text-decoration:none; font-size:14px; font-weight:500;
    transition: background 0.15s, color 0.15s;
}
.tpl-nav-item svg { width:17px; height:17px; flex-shrink:0; }
.tpl-nav-item:hover { background:var(--tpl-surface); color:var(--tpl-text); }
.tpl-nav-item.active { background:var(--tpl-surface2); color:var(--tpl-text); }

.tpl-sidebar-bottom { margin-top:auto; display:flex; flex-direction:column; gap:6px; }

.tpl-auth-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 12px; border-radius:10px; font-size:14px; font-weight:600;
    text-decoration:none; transition: background 0.15s, opacity 0.15s; cursor:pointer;
}
.tpl-btn-login { background:var(--tpl-surface2); color:var(--tpl-text); border:1px solid var(--tpl-border); }
.tpl-btn-login:hover { background:var(--tpl-surface); color:#fff; }
.tpl-btn-register { background:var(--tpl-grad); color:#fff; border:none; }
.tpl-btn-register:hover { opacity:0.88; }

/* ===== MAIN ===== */
.tpl-main { margin-left:var(--tpl-sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; min-width:0; }

/* ===== TOPNAV ===== */
.tpl-topnav {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 26px; border-bottom:1px solid var(--tpl-border);
    background:var(--tpl-sidebar); position:sticky; top:0; z-index:100; gap:20px; flex-wrap:wrap;
}
.tpl-topnav-title h1 { font-size:18px; font-weight:700; letter-spacing:-0.3px; margin:0; }
.tpl-topnav-title span { display:block; font-size:12px; color:var(--tpl-muted); margin-top:2px; }

.tpl-search-box {
    display:flex; align-items:center; gap:8px; background:var(--tpl-surface);
    border:1px solid var(--tpl-border); border-radius:10px; padding:8px 12px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tpl-search-box:focus-within { border-color:var(--tpl-accent); box-shadow:0 0 0 3px #a855f722; }
.tpl-search-box svg { width:14px; height:14px; color:var(--tpl-muted); flex-shrink:0; }
.tpl-search-box input { background:transparent; border:none; outline:none; color:var(--tpl-text); font-family:inherit; font-size:13px; width:190px; }
.tpl-search-box input::placeholder { color:#55556a; }
.tpl-search-clear { background:none; border:none; color:var(--tpl-muted); font-size:18px; cursor:pointer; padding:0 2px; line-height:1; }
.tpl-search-clear:hover { color:var(--tpl-text); }

/* ===== CATEGORY TABS ===== */
.tpl-cat-bar { background:var(--tpl-sidebar); border-bottom:1px solid var(--tpl-border); padding:0 26px; overflow:hidden; }
.tpl-cat-track { display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none; padding:10px 0; }
.tpl-cat-track::-webkit-scrollbar { display:none; }

.tpl-cat-tab {
    flex-shrink:0; padding:6px 14px; border-radius:8px; border:none; background:transparent;
    color:var(--tpl-muted); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer;
    transition: background 0.15s, color 0.15s; white-space:nowrap;
}
.tpl-cat-tab:hover { background:var(--tpl-surface2); color:var(--tpl-text); }
.tpl-cat-tab.active { background:var(--tpl-text); color:#0d0d0f; font-weight:700; }

/* ===== BENTO GRID ===== */
.tpl-grid-wrap { padding:22px 26px 32px; flex:1; }
.tpl-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:var(--tpl-cell); gap:var(--tpl-gap); }

.tpl-size-big    { grid-column:span 2; grid-row:span 2; }
.tpl-size-tall   { grid-column:span 1; grid-row:span 2; }
.tpl-size-wide   { grid-column:span 2; grid-row:span 1; }
.tpl-size-normal { grid-column:span 1; grid-row:span 1; }

/* ===== CARD ===== */
.tpl-card {
    position:relative; border-radius:var(--tpl-radius); overflow:hidden; cursor:pointer;
    background:var(--tpl-surface); border:1.5px solid transparent;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tpl-card img, .tpl-card video { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.tpl-card video { pointer-events:none; }
.tpl-card:hover { border-color:var(--tpl-accent); transform:translateY(-3px); box-shadow:0 10px 40px #a855f730; }
.tpl-card:hover img, .tpl-card:hover video { transform:scale(1.05); }
.tpl-card.is-active { border-color:var(--tpl-accent); box-shadow:0 0 0 3px #a855f740; }

.tpl-card-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, #000000cc 0%, #00000055 40%, transparent 100%);
    display:flex; flex-direction:column; justify-content:flex-end; padding:16px; pointer-events:none;
}
.tpl-card-overlay h2 { font-size:15px; font-weight:700; line-height:1.25; margin-bottom:3px; color:#fff; }
.tpl-size-big .tpl-card-overlay h2 { font-size:22px; }
.tpl-card-overlay p { font-size:12px; color:#ffffffbb; margin:0; }

.tpl-use-btn {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.85);
    background:var(--tpl-grad); color:#fff; font-size:13px; font-weight:700;
    padding:9px 20px; border-radius:30px; display:flex; align-items:center; gap:7px;
    opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s; white-space:nowrap;
}
.tpl-use-btn svg { width:14px; height:14px; }
.tpl-card:hover .tpl-use-btn { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ===== PROMPT PANEL ===== */
.tpl-panel {
    grid-column:1/-1; background:var(--tpl-surface); border:1.5px solid var(--tpl-accent);
    border-radius:var(--tpl-radius); padding:20px 22px 18px;
    animation:tplPanelIn 0.22s ease; box-shadow:0 4px 40px #a855f720;
}
@keyframes tplPanelIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

.tpl-panel-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.tpl-panel-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--tpl-text); }
.tpl-panel-name { background:var(--tpl-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.tpl-panel-close {
    width:28px;height:28px;border-radius:7px;border:1px solid var(--tpl-border);background:transparent;
    color:var(--tpl-muted);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background 0.15s,color 0.15s;
}
.tpl-panel-close:hover { background:var(--tpl-surface2); color:var(--tpl-text); }

.tpl-panel-textarea {
    width:100%;background:var(--tpl-bg);border:1px solid var(--tpl-border);border-radius:10px;
    color:var(--tpl-text);font-family:inherit;font-size:13px;line-height:1.65;padding:12px 14px;
    resize:vertical;min-height:90px;outline:none;transition:border-color 0.15s,box-shadow 0.15s;
}
.tpl-panel-textarea:focus { border-color:var(--tpl-accent); box-shadow:0 0 0 3px #a855f718; }

.tpl-panel-actions { display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px;flex-wrap:wrap; }
.tpl-char-count { font-size:12px; color:#55556a; }
.tpl-panel-btns { display:flex; gap:8px; }

.tpl-btn-reset {
    padding:8px 16px;border-radius:8px;border:1px solid var(--tpl-border);background:transparent;
    color:var(--tpl-muted);font-size:13px;font-weight:500;cursor:pointer;transition:background 0.15s,color 0.15s;font-family:inherit;
}
.tpl-btn-reset:hover { background:var(--tpl-surface2); color:var(--tpl-text); }

.tpl-btn-generate {
    padding:9px 22px;border-radius:8px;border:none;background:var(--tpl-grad);color:#fff;
    font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;
    transition:opacity 0.15s,transform 0.1s;text-decoration:none;
}
.tpl-btn-generate:hover { opacity:0.88; color:#fff; }
.tpl-btn-generate:active { transform:scale(0.97); }
.tpl-btn-generate svg { width:14px; height:14px; }

/* ===== EMPTY ===== */
.tpl-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:80px 0;color:#55556a;grid-column:1/-1; }
.tpl-empty svg { width:48px; height:48px; }
.tpl-empty p { font-size:16px; font-weight:600; color:var(--tpl-muted); margin:0; }
.tpl-empty span { font-size:13px; }

/* ===== SCROLLBAR ===== */
.tpl-body ::-webkit-scrollbar { width:5px; }
.tpl-body ::-webkit-scrollbar-track { background:transparent; }
.tpl-body ::-webkit-scrollbar-thumb { background:var(--tpl-border); border-radius:3px; }

/* ===== RESPONSIVE ===== */
@media(max-width:1100px) { .tpl-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:760px) {
    .tpl-sidebar{display:none;}
    .tpl-main{margin-left:0;}
    .tpl-body{flex-direction:column;}
    .tpl-grid{grid-template-columns:repeat(2,1fr);--tpl-cell:160px;}
    .tpl-size-big{grid-column:span 2;}
    .tpl-size-tall{grid-column:span 1; grid-row:span 2;}
    .tpl-size-wide{grid-column:span 2;}
    .tpl-search-box input{width:130px;}
    .tpl-topnav{flex-direction:column;align-items:flex-start;gap:12px;}
    .tpl-topnav .tpl-lang-selector { width: 100%; }
    .tpl-topnav .tpl-lang-select { width: 100%; }
    .tpl-footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
    .tpl-footer-brand{grid-column:1/-1;}
}

/* ============================================================
   HEADER (mobile topbar)
   ============================================================ */
.tpl-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--tpl-sidebar);
    border-bottom: 1px solid var(--tpl-border);
    position: sticky; top: 0; z-index: 300;
    gap: 8px;
}
.tpl-header-logo { display:flex; align-items:center; gap:8px; text-decoration:none; }
.tpl-header-logo .tpl-logo-mark { font-size:18px; }
.tpl-header-logo .tpl-logo-text { font-size:15px; }

.tpl-hamburger {
    width:36px; height:36px; border-radius:8px; border:1px solid var(--tpl-border);
    background:var(--tpl-surface); color:var(--tpl-muted); display:flex; align-items:center;
    justify-content:center; cursor:pointer; transition:background 0.15s;
}
.tpl-hamburger:hover { background:var(--tpl-surface2); color:var(--tpl-text); }
.tpl-hamburger svg { width:18px; height:18px; }

.tpl-header-right { display:flex; align-items:center; gap:8px; }
.tpl-header-auth {
    padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600;
    text-decoration:none; transition:opacity 0.15s;
}
.tpl-header-login { background:var(--tpl-surface2); color:var(--tpl-text); border:1px solid var(--tpl-border); }
.tpl-header-register { background:var(--tpl-grad); color:#fff; border:none; }

/* Language Selector */
.tpl-lang-selector {
    display: flex;
    align-items: center;
}

.tpl-lang-select {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--tpl-border);
    background: var(--tpl-surface2);
    color: var(--tpl-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    outline: none;
}

.tpl-lang-select:hover {
    background: var(--tpl-surface);
    border-color: var(--tpl-accent);
}

.tpl-lang-select:focus {
    border-color: var(--tpl-accent);
    box-shadow: 0 0 0 3px #a855f718;
}

/* Mobile overlay */
.tpl-sidebar-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6);
    z-index:199; animation:tplFadeIn 0.2s ease;
}
@keyframes tplFadeIn { from{opacity:0} to{opacity:1} }

.tpl-sidebar.is-open { display:flex !important; z-index:250; animation:tplSlideIn 0.2s ease; }
.tpl-sidebar-overlay.is-open { display:block; }
@keyframes tplSlideIn { from{transform:translateX(-100%)} to{transform:translateX(0)} }

@media(max-width:760px) {
    .tpl-header { display:flex; }
    .tpl-topnav { top:0; position:relative; }
    .tpl-grid-wrap { padding:16px 12px 24px; }
    .tpl-cat-bar { padding:0 12px; }
    .tpl-app-banner { margin:0 12px 16px; }
    .tpl-footer { padding:28px 16px 14px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.tpl-footer {
    background: var(--tpl-sidebar);
    border-top: 1px solid var(--tpl-border);
    padding: 40px 26px 20px;
}

.tpl-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.tpl-footer-brand p {
    font-size: 13px;
    color: var(--tpl-muted);
    line-height: 1.7;
    margin-top: 12px;
    max-width: 280px;
}

.tpl-footer-socials {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tpl-footer-social {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--tpl-surface);
    border: 1px solid var(--tpl-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--tpl-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.tpl-footer-social:hover { background: var(--tpl-surface2); color: var(--tpl-text); }
.tpl-footer-social svg { width: 14px; height: 14px; }

.tpl-footer-col h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tpl-text);
    margin-bottom: 14px;
}

.tpl-footer-col ul { list-style: none; }
.tpl-footer-col li { margin-bottom: 8px; }
.tpl-footer-col a {
    font-size: 13px;
    color: var(--tpl-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.tpl-footer-col a:hover { color: var(--tpl-text); }

.tpl-footer-bottom {
    border-top: 1px solid var(--tpl-border);
    margin-top: 32px;
    padding-top: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--tpl-muted);
}

@media(max-width:760px) {
    .tpl-footer { margin-left:0; padding:32px 20px 16px; }
    .tpl-footer-grid { grid-template-columns:1fr 1fr; gap:24px; }
    .tpl-footer-brand { grid-column:1/-1; }
}

/* ============================================================
   APP DOWNLOAD BANNER (mobile only)
   ============================================================ */
.tpl-app-banner {
    display: none;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid var(--tpl-border);
    border-radius: 14px;
    margin: 0 26px 20px;
    padding: 24px;
    text-align: center;
}

.tpl-app-banner h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--tpl-text);
}

.tpl-app-banner p {
    font-size: 12px;
    color: var(--tpl-muted);
    margin-bottom: 16px;
}

.tpl-app-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.tpl-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--tpl-surface2);
    border: 1px solid var(--tpl-border);
    color: var(--tpl-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s;
}

.tpl-app-btn:hover {
    background: var(--tpl-surface);
    border-color: var(--tpl-accent);
    color: #fff;
}

.tpl-app-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.tpl-app-btn-label { text-align: left; line-height: 1.2; }
.tpl-app-btn-small { font-size: 9px; font-weight: 400; color: var(--tpl-muted); display: block; }
.tpl-app-btn-name { font-size: 13px; font-weight: 700; }

/* Sidebar app buttons (desktop) */
.tpl-sidebar-apps {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 6px;
}

.tpl-sidebar-app-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 6px;
    border-radius: 8px;
    background: var(--tpl-surface);
    border: 1px solid var(--tpl-border);
    color: var(--tpl-muted);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.tpl-sidebar-app-btn:hover { background: var(--tpl-surface2); color: var(--tpl-text); }
.tpl-sidebar-app-btn svg { width: 14px; height: 14px; }

@media(max-width:760px) {
    .tpl-app-banner { display: block; }
    .tpl-sidebar-apps { display: none; }
}