/* SkillHub v1.1 — MetaEidos Design System */
:root{--bg:#0a0a0a;--bg2:#13110d;--ink:#f4f1ea;--dim:#8a857a;--line:#1f1d18;--gold:#d4a64a;--green:#7fff7f;--blood:#ff3300;--acid:#c8ff00}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);font-family:'Fraunces',serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle at 1px 1px,rgba(244,241,234,.04) 1px,transparent 0);background-size:24px 24px}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--bg)}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:14px 40px;border-bottom:1px solid var(--line);background:rgba(10,10,10,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.topbar-brand{font-family:'Fraunces',serif;font-weight:900;font-size:18px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.topbar-brand em{font-style:normal;color:var(--gold)}
.topbar-links{display:flex;gap:20px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.topbar-links a{color:var(--dim);transition:color .2s}
.topbar-links a:hover,.topbar-links a.active{color:var(--gold)}
.topbar-right{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.06em}
.topbar-right a{color:var(--dim);cursor:pointer;transition:color .15s}
.topbar-right a:hover{color:var(--gold)}
.topbar-balance{color:var(--gold);font-weight:700;font-size:11px}
.lang-sw{background:transparent;border:1px solid var(--line);color:var(--dim);padding:2px 6px;font-family:'JetBrains Mono',monospace;font-size:9px;cursor:pointer;outline:none;letter-spacing:.04em}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;border:none;cursor:pointer;transition:all .2s}
.btn-gold{background:var(--gold);color:var(--bg)}
.btn-gold:hover{background:var(--ink)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-danger{background:transparent;border:1px solid var(--line);color:var(--dim)}
.btn-danger:hover{border-color:var(--blood);color:var(--blood)}
.btn-sm{padding:6px 12px;font-size:9px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* SEARCH HERO */
.search-hero{padding:48px 40px 0;text-align:center;position:relative;z-index:1}
.search-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(212,166,74,.04),transparent 50%)}
.search-hero h1{font-size:clamp(24px,3.5vw,36px);font-weight:300;letter-spacing:-.02em;margin-bottom:12px;position:relative}
.search-hero h1 em{color:var(--gold);font-style:italic}
.search-hero .hero-sub{font-size:14px;color:var(--dim);max-width:520px;margin:0 auto 24px;line-height:1.65;position:relative}
.search-bar{max-width:640px;margin:0 auto;display:flex;border:1px solid var(--line);background:var(--bg2);transition:border-color .2s;position:relative}
.search-bar:focus-within{border-color:var(--gold)}
.search-bar input{flex:1;background:transparent;border:none;padding:14px 20px;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px;outline:none}
.search-bar input::placeholder{color:#5a5650}
.search-bar button{background:var(--gold);color:var(--bg);border:none;padding:0 24px;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;font-weight:700}
.search-bar button:hover{background:var(--ink)}

/* HERO CARDS */
.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;max-width:680px;margin-left:auto;margin-right:auto;position:relative}
.hero-card{display:block;background:var(--bg2);border:1px solid var(--line);padding:18px 20px;text-align:left;transition:all .2s;color:var(--ink);text-decoration:none}
.hero-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.hero-card-icon{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.hero-card-title{font-size:15px;font-weight:600;margin-bottom:4px}
.hero-card-desc{font-size:11px;color:var(--dim);line-height:1.5}

/* STATS */
.stats-bar{display:flex;justify-content:center;gap:40px;padding:24px 40px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.06em}
.stats-bar .num{color:var(--gold);font-size:16px;font-family:'Fraunces',serif;font-weight:600;margin-right:4px}

/* TABS */
.tabs{display:flex;justify-content:center;gap:0;padding:0 40px;border-bottom:1px solid var(--line)}
.tab{padding:14px 28px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--gold);border-bottom-color:var(--gold)}

/* FILTER BAR */
.filter-bar{padding:0 40px;border-bottom:1px solid var(--line);display:flex;align-items:stretch;overflow-x:auto}
.filter-section{display:flex;align-items:center;border-right:1px solid var(--line);padding:0}
.filter-section:last-child{border-right:none}
.filter-label{font-family:'JetBrains Mono',monospace;font-size:9px;color:#5a5650;letter-spacing:.12em;text-transform:uppercase;padding:12px 14px 12px 20px;white-space:nowrap}
.pills{display:flex;gap:0}
.pill{padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--dim);cursor:pointer;transition:all .15s;white-space:nowrap;border-bottom:2px solid transparent}
.pill:hover{color:var(--ink);background:rgba(244,241,234,.03)}
.pill.active{color:var(--gold);border-bottom-color:var(--gold)}

/* SORT BAR */
.sort-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 40px;border-bottom:1px solid var(--line)}
.result-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.08em}
.sort-options{display:flex;gap:0}
.sort-opt{padding:6px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);cursor:pointer;letter-spacing:.06em;transition:color .15s}
.sort-opt:hover{color:var(--ink)}
.sort-opt.active{color:var(--gold)}

/* CONTENT */
.content{max-width:1200px;margin:0 auto;padding:24px 40px 80px;position:relative;z-index:1}

/* CARDS */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--bg2);border:1px solid var(--line);padding:24px;transition:all .2s;position:relative;display:flex;flex-direction:column;cursor:pointer}
.card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.card-badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-family:'JetBrains Mono',monospace;font-size:8px;padding:3px 7px;letter-spacing:.1em;font-weight:700}
.badge-cat{background:var(--gold);color:var(--bg)}
.badge-tag{background:transparent;border:1px solid var(--line);color:var(--dim);font-weight:400}
.badge-published{color:var(--green);border:1px solid var(--green);background:transparent}
.badge-reviewing{color:var(--gold);border:1px solid var(--gold);background:transparent}
.badge-draft{color:var(--dim);border:1px solid var(--line);background:transparent}
.card-title{font-size:17px;font-weight:600;line-height:1.3;margin-bottom:4px}
.card-title:hover{color:var(--gold)}
.card-liner{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:12px;flex:1}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}

/* Card Author */
.card-author{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);font-weight:700;flex-shrink:0;border:1px solid var(--gold)}
.author-info{flex:1;min-width:0}
.author-name{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.author-meta{font-family:'JetBrains Mono',monospace;font-size:8px;color:#5a5650;letter-spacing:.04em;margin-top:1px}

/* Card Stats */
.card-stats{display:flex;gap:12px;margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:9px;color:#5a5650;letter-spacing:.04em}

/* Card Price */
.card-price{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.04em}

/* Rating */
.stars{color:var(--gold);font-size:11px;letter-spacing:1px}
.stars-empty{color:#2a2820}

/* FORMS */
.form-group{margin-bottom:14px}
.form-label{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.form-input{width:100%;background:var(--bg);border:1px solid var(--line);padding:10px 12px;color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:12px;outline:none;transition:border-color .2s}
.form-input:focus{border-color:var(--gold)}
.form-input::placeholder{color:#5a5650}
textarea.form-input{min-height:80px;resize:vertical;line-height:1.5;font-family:'JetBrains Mono',monospace}
select.form-input{appearance:none;cursor:pointer}
select.form-input option{background:var(--bg);color:var(--ink)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-full{grid-column:1/-1}

/* AUTH */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.auth-card{background:var(--bg2);border:1px solid var(--line);padding:36px;width:380px}
.auth-card h2{font-size:20px;font-weight:300;margin-bottom:4px;text-align:center}
.auth-card .subtitle{text-align:center;color:var(--dim);margin-bottom:24px;font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal{background:var(--bg2);border:1px solid var(--line);padding:28px;width:540px;max-height:90vh;overflow-y:auto}
.modal h3{font-size:17px;font-weight:300;margin-bottom:20px}

/* SKILL DETAIL */
.detail-container{max-width:1000px;margin:0 auto;padding:40px}
.detail-back{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.06em;margin-bottom:24px;display:block}
.detail-back:hover{color:var(--gold)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.detail-title{font-size:24px;font-weight:300;margin-bottom:8px}
.detail-liner{font-size:13px;color:var(--dim);font-style:italic;margin-bottom:16px;line-height:1.5}
.detail-desc{font-size:14px;color:var(--dim);line-height:1.7;margin-bottom:20px}
.detail-meta{display:flex;gap:28px;margin-bottom:24px}
.meta-item .meta-label{font-family:'JetBrains Mono',monospace;font-size:9px;color:#5a5650;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.meta-item .meta-value{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--ink)}
.meta-item .meta-value.gold{color:var(--gold)}
.section-title{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}

/* CREATOR PROFILE in detail */
.creator-profile{background:var(--bg2);border:1px solid var(--line);padding:20px;margin-bottom:20px}
.creator-profile .avatar{width:36px;height:36px;font-size:14px}
.creator-bio{font-size:12px;color:var(--dim);line-height:1.6;margin-top:10px}
.creator-link{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:6px 12px;border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim);letter-spacing:.06em;transition:all .15s}
.creator-link:hover{border-color:var(--gold);color:var(--gold)}

/* CHAT */
.invoke-panel{background:var(--bg2);border:1px solid var(--line);overflow:hidden}
.invoke-header{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);letter-spacing:.1em;text-transform:uppercase}
.invoke-body{padding:18px}
.chat-messages{min-height:160px;max-height:360px;overflow-y:auto;margin-bottom:12px}
.chat-msg{margin-bottom:12px}
.chat-msg.user{text-align:right}
.chat-msg .bubble{display:inline-block;max-width:80%;padding:10px 14px;font-size:13px;line-height:1.6;text-align:left}
.chat-msg.user .bubble{background:var(--gold);color:var(--bg);border-radius:0}
.chat-msg.assistant .bubble{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:0}
.chat-input{display:flex;gap:0}
.chat-input input{flex:1}
.chat-input .btn{border-left:none}
.cost-info{display:flex;gap:14px;padding:8px 12px;background:var(--bg);margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#5a5650;letter-spacing:.04em;border:1px solid var(--line)}
.cost-info span{color:var(--gold);font-weight:700}
.chat-placeholder{color:#5a5650;text-align:center;padding:40px 0;font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
.error-bubble{background:rgba(255,51,0,.05)!important;color:var(--blood)!important;border-color:rgba(255,51,0,.2)!important}

/* Code */
.chat-msg code{background:rgba(212,166,74,.1);padding:1px 4px;font-family:'JetBrains Mono',monospace;font-size:12px}
.chat-msg pre{background:var(--bg);border:1px solid var(--line);padding:12px 16px;overflow-x:auto;margin:6px 0;font-size:12px}
.chat-msg pre code{background:none;padding:0}

/* REVIEW */
.review-summary{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.review-avg{font-size:16px;font-weight:700;font-family:'JetBrains Mono',monospace}
.review-count{color:var(--dim);font-size:11px;font-family:'JetBrains Mono',monospace}
.review-item{padding:10px 0;border-bottom:1px solid var(--line)}
.review-header{display:flex;justify-content:space-between;font-size:11px;margin-bottom:3px}
.review-text{color:var(--dim);font-size:12px}
.review-form{display:flex;flex-direction:column;gap:6px}

/* STAT BOXES */
.stat-row{display:flex;gap:0}
.stat-box{flex:1;padding:16px 20px;border:1px solid var(--line);background:var(--bg2)}
.stat-box+.stat-box{border-left:none}
.stat-box-label{font-family:'JetBrains Mono',monospace;font-size:9px;color:#5a5650;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.stat-box-value{font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--ink)}
.stat-box-value.gold{color:var(--gold)}

/* COLUMNS (me page style) */
.columns{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1100px;margin:0 auto;padding:40px}
.col-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.col-title{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.15em;text-transform:uppercase}
.item{background:var(--bg2);border:1px solid var(--line);padding:18px 22px;margin-bottom:10px;transition:border-color .2s}
.item:hover{border-color:var(--gold)}

/* TABLE */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:11px}
.table th{font-family:'JetBrains Mono',monospace;font-size:9px;color:#5a5650;letter-spacing:.1em;text-transform:uppercase}

/* TOAST */
.toast{position:fixed;top:60px;right:24px;padding:10px 20px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--bg);z-index:2000;animation:fadeIn .2s ease}
.toast-success{background:var(--green)}
.toast-error{background:var(--blood);color:var(--ink)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.loading{text-align:center;padding:60px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);letter-spacing:.1em}
.empty-state{text-align:center;padding:60px 24px;color:var(--dim);font-size:15px;line-height:1.7;font-style:italic;grid-column:1/-1}
.empty-state a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.muted{color:var(--dim);font-size:12px}

.market-footer{text-align:center;padding:40px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);letter-spacing:.08em;border-top:1px solid var(--line)}
.market-footer a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:880px){
  .topbar{padding:14px 20px}
  .search-hero{padding:32px 20px 0}
  .filter-bar{padding:0 12px}
  .content{padding:16px 20px 60px}
  .grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .columns{grid-template-columns:1fr;padding:24px 20px}
  .hero-cards{grid-template-columns:1fr;max-width:300px}
  .form-grid{grid-template-columns:1fr}
  .detail-container{padding:24px 20px}
  .stats-bar{gap:20px;flex-wrap:wrap}
}

.hidden{display:none!important}

/* Phase 2.5: Social/Community Styles */
.favorite-icon { position:absolute; top:12px; right:12px; font-size:16px; cursor:pointer; z-index:2; transition:transform .15s; }
.favorite-icon:hover { transform:scale(1.3); }
.card { position:relative; }
.follow-btn { font-family:'JetBrains Mono',monospace; font-size:9px; padding:4px 12px; border:1px solid var(--gold); color:var(--gold); background:transparent; cursor:pointer; text-transform:uppercase; letter-spacing:.1em; transition:all .15s; margin-top:8px; }
.follow-btn:hover, .follow-btn.following { background:var(--gold); color:var(--bg); }
.profile-header { display:flex; align-items:flex-start; gap:20px; padding:24px; background:var(--bg2); border:1px solid var(--line); margin-bottom:24px; }
.profile-avatar { width:64px; height:64px; border-radius:50%; background:var(--line); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:24px; color:var(--gold); border:2px solid var(--gold); flex-shrink:0; }
.profile-info { flex:1; }
.profile-name { font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--ink); font-weight:700; }
.profile-bio { color:var(--dim); font-size:12px; line-height:1.6; margin-top:6px; }
.profile-stats { display:flex; gap:20px; margin-top:12px; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--dim); }
.profile-stats .num { color:var(--gold); font-weight:700; font-size:14px; }
.lb-table { width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; font-size:11px; }
.lb-table th { text-align:left; padding:10px 12px; border-bottom:1px solid var(--gold); color:var(--gold); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.lb-table td { padding:10px 12px; border-bottom:1px solid var(--line); color:var(--ink); }
.lb-table tr:hover td { background:var(--bg2); }
.lb-rank { color:var(--gold); font-weight:700; font-size:14px; }
.activity-item { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; }
.activity-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.activity-text { color:var(--ink); line-height:1.5; }
.activity-text strong { color:var(--gold); cursor:pointer; }
.activity-time { color:var(--dim); font-family:'JetBrains Mono',monospace; font-size:9px; margin-top:2px; }
.notif-badge { position:absolute; top:-4px; right:-6px; background:var(--blood,#c0392b); color:white; font-size:8px; font-family:'JetBrains Mono',monospace; padding:1px 4px; min-width:12px; text-align:center; }
.notif-dropdown { position:absolute; top:36px; right:0; width:320px; max-height:400px; overflow-y:auto; background:var(--bg2); border:1px solid var(--line); z-index:1001; padding:8px 0; }
.notif-item { padding:10px 14px; font-size:11px; color:var(--dim); border-bottom:1px solid var(--line); cursor:pointer; }
.notif-item:hover { background:var(--bg); }
.notif-item.unread { color:var(--ink); border-left:2px solid var(--gold); }
.review-actions { display:flex; gap:12px; margin-top:6px; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); }
.review-actions span { cursor:pointer; }
.review-actions span:hover { color:var(--gold); }
.reply-list { margin-left:20px; padding-left:12px; border-left:1px solid var(--line); margin-top:8px; }
.reply-item { padding:6px 0; font-size:11px; color:var(--dim); }
.reply-item strong { color:var(--ink); }
/* Phase 3: Workflow Styles */
.pipeline-flow { display:flex; align-items:center; gap:8px; overflow-x:auto; padding:20px 0; }
.pipeline-step { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg2); border:1px solid var(--line); min-width:160px; flex-shrink:0; }
.pipeline-step:hover { border-color:var(--gold); }
.step-num { width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:var(--gold); color:var(--bg); font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; }
.step-name { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink); }
.step-price { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); }
.pipeline-arrow { color:var(--gold); font-size:18px; font-weight:700; flex-shrink:0; }

/* Level 2 Rich Skill Package */
.package-tree { background:var(--bg); border:1px solid var(--line); padding:12px; font-family:'JetBrains Mono',monospace; font-size:10px; }
.package-file { display:flex; gap:8px; padding:4px 0; align-items:center; }
.package-file.private { opacity:0.6; }
.public-file-preview { background:var(--bg); border:1px solid var(--line); margin-bottom:8px; }
.public-file-preview summary { padding:8px 12px; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--gold); }
.preview-content { padding:12px; font-size:12px; color:var(--dim); line-height:1.6; border-top:1px solid var(--line); max-height:300px; overflow-y:auto; }

/* Drag & Drop Upload */
.drop-zone { border:2px dashed var(--line); padding:40px 20px; text-align:center; cursor:pointer; transition:all .2s; }
.drop-zone:hover, .drop-zone.drag-over { border-color:var(--gold); background:rgba(212,166,74,0.05); }
.drop-zone-icon { font-size:36px; margin-bottom:8px; }
.drop-zone-text { font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink); margin-bottom:4px; }
.drop-zone-hint { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); margin-top:4px; }
.file-item { display:flex; gap:8px; padding:6px 8px; align-items:center; font-size:11px; }
.file-item .file-icon { width:20px; text-align:center; }
.file-item .file-path { flex:1; color:var(--ink); }
.file-item .file-size { color:var(--dim); font-size:9px; }
.file-item .file-public { font-size:9px; cursor:pointer; padding:2px 6px; border:1px solid var(--line); }
.file-item .file-public.active { border-color:var(--gold); color:var(--gold); }
.file-item .file-remove { color:var(--dim); cursor:pointer; font-size:14px; }
.file-item .file-remove:hover { color:var(--blood,#c0392b); }
.drop-zone-guide { text-align:left; margin:12px auto; max-width:360px; }
.drop-guide-item { font-family:'JetBrains Mono',monospace; font-size:10px; padding:3px 0; color:var(--dim); }
.drop-guide-item.required { color:var(--ink); }
.drop-guide-item b { color:var(--gold); }
.file-status { padding:8px 12px; font-family:'JetBrains Mono',monospace; font-size:10px; margin-bottom:8px; border:1px solid var(--line); }
.file-status.ok { border-color:var(--green,#27ae60); color:var(--green,#27ae60); }
.file-status.warn { border-color:var(--gold); color:var(--gold); }
.file-status.error { border-color:var(--blood,#c0392b); color:var(--blood,#c0392b); }

/* v2.2 Product Polish */
.cursor-blink { animation:blink 1s step-end infinite; color:var(--gold); }
@keyframes blink { 50% { opacity:0; } }
.code-block { background:#0d0d0d; border:1px solid var(--line); margin:8px 0; overflow:hidden; }
.code-header { display:flex; justify-content:space-between; padding:4px 10px; background:var(--line); font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); }
.copy-btn { background:none; border:none; color:var(--gold); cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:9px; }
.code-block pre { margin:0; padding:10px; overflow-x:auto; }
.code-block code { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink); }
.inline-code { background:var(--line); padding:1px 4px; font-family:'JetBrains Mono',monospace; font-size:12px; }
.error-bubble { color:var(--blood,#c0392b); font-size:11px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(100px); padding:10px 20px; font-family:'JetBrains Mono',monospace; font-size:11px; z-index:2000; transition:transform 0.3s; border:1px solid var(--line); }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast-info { background:var(--bg2); color:var(--ink); }
.toast-success { background:var(--bg2); color:var(--green,#27ae60); border-color:var(--green,#27ae60); }
.toast-error { background:var(--bg2); color:var(--blood,#c0392b); border-color:var(--blood,#c0392b); }
.version-timeline { border-left:2px solid var(--line); padding-left:16px; }
.version-item { padding:8px 0; border-bottom:1px solid var(--line); }
.version-tag { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--gold); }
.version-date { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); margin-left:8px; }
.version-changelog { font-size:11px; color:var(--dim); margin-top:4px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--bg2); border:1px solid var(--line); padding:16px; text-align:center; }
.stat-value { font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:700; color:var(--gold); }
.stat-label { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--dim); margin-top:4px; text-transform:uppercase; }
.horizontal-scroll { display:flex; gap:12px; overflow-x:auto; padding:8px 0 16px; scrollbar-width:thin; }
.horizontal-scroll .card { min-width:220px; max-width:220px; flex-shrink:0; padding:16px; }
.sort-select { background:var(--bg2); border:1px solid var(--line); color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:10px; padding:4px 8px; }
.wf-step { margin-bottom:12px; border:1px solid var(--line); }
.wf-step-header { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--bg2); font-family:'JetBrains Mono',monospace; font-size:11px; }
.wf-step-output { padding:12px; font-size:12px; max-height:200px; overflow-y:auto; }
.wf-summary { padding:12px; text-align:center; color:var(--gold); font-family:'JetBrains Mono',monospace; font-size:12px; margin-top:12px; border:1px solid var(--gold); }
.spinner-sm { display:inline-block; width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:768px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .form-grid { grid-template-columns:1fr; }
  .profile-header { flex-direction:column; }
  .pipeline-flow { flex-direction:column; }
}

/* v2.3 Payment */
.credits-packages { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.credit-package { background:var(--bg2); border:1px solid var(--line); padding:20px; text-align:center; cursor:pointer; transition:all .15s; }
.credit-package:hover { border-color:var(--gold); transform:translateY(-2px); }
.package-credits { font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:700; color:var(--gold); }
.package-price { font-family:'JetBrains Mono',monospace; font-size:16px; color:var(--ink); margin-top:4px; }
.package-bonus { font-size:10px; color:var(--green,#27ae60); margin-top:4px; }
.package-label { font-size:9px; color:var(--dim); text-transform:uppercase; }
.invite-code { font-family:'JetBrains Mono',monospace; font-size:36px; font-weight:700; color:var(--gold); letter-spacing:8px; margin:12px 0; }
.referral-link { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--dim); word-break:break-all; margin-bottom:12px; }
.referral-card { background:var(--bg2); border:1px solid var(--line); padding:24px; text-align:center; }
@media (max-width:768px) { .credits-packages { grid-template-columns:repeat(2,1fr); } }