/* ══════════════════════════════════════════════
   Hub Premium — Design System
   ══════════════════════════════════════════════ */

:root, [data-theme="dark"] {
    --bg-base: #06060a;
    --bg-surface: rgba(255,255,255,0.035);
    --bg-surface-hover: rgba(255,255,255,0.07);
    --bg-elevated: rgba(255,255,255,0.05);
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --text-main: #eeeef4;
    --text-muted: #8b8ba0;
    --text-dim: #55556a;
    --accent: #7c5cfc;
    --accent-soft: rgba(124,92,252,0.12);
    --accent-glow: rgba(124,92,252,0.35);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 2px 8px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.05) inset;
    --shadow-card-hover: 0 20px 60px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.1) inset;
    --glass-blur: blur(16px);
    --noise-opacity: 0.025;
}

[data-theme="light"] {
    --bg-base: #f0f2f8;
    --bg-surface: rgba(255,255,255,0.65);
    --bg-surface-hover: rgba(255,255,255,0.85);
    --bg-elevated: rgba(255,255,255,0.8);
    --border: rgba(0,0,0,0.06);
    --border-hover: rgba(0,0,0,0.12);
    --text-main: #111129;
    --text-muted: #5c5c7a;
    --text-dim: #9999ad;
    --accent: #6366f1;
    --accent-soft: rgba(99,102,241,0.1);
    --accent-glow: rgba(99,102,241,0.3);
    --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 16px 48px rgba(0,0,0,0.1);
    --glass-blur: blur(20px);
    --noise-opacity: 0.015;
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-base);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Animated Background ── */
.bg-orbs { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.orb {
    position:absolute; border-radius:50%; filter:blur(100px); opacity:0.5;
    animation: orbFloat 25s ease-in-out infinite alternate;
}
.orb-1 {
    width:clamp(300px,45vw,700px); height:clamp(300px,45vw,700px);
    background: conic-gradient(from 180deg, #7c5cfc33, #3b82f622, #22c55e22, #7c5cfc33);
    top:-15%; left:-10%;
    animation-duration: 22s;
}
.orb-2 {
    width:clamp(250px,35vw,550px); height:clamp(250px,35vw,550px);
    background: conic-gradient(from 90deg, #ec489922, #f59e0b22, #14b8a622, #ec489922);
    bottom:-10%; right:-8%;
    animation-duration: 28s; animation-delay:-8s;
}
.orb-3 {
    width:clamp(200px,30vw,450px); height:clamp(200px,30vw,450px);
    background: conic-gradient(from 270deg, #3b82f633, #8b5cf622, #f9731622, #3b82f633);
    top:40%; left:50%; transform:translateX(-50%);
    animation-duration: 32s; animation-delay:-14s;
}

@keyframes orbFloat {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(3%,-4%) scale(1.08); }
    66%  { transform: translate(-2%,3%) scale(0.95); }
    100% { transform: translate(1%,-1%) scale(1.03); }
}

.noise-overlay {
    position:fixed; inset:0; z-index:1; pointer-events:none;
    opacity: var(--noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 128px 128px;
}

/* ── Container ── */
.hub-container {
    position:relative; z-index:2;
    max-width:1440px; margin:0 auto; padding:1.5rem;
}

/* ── Header ── */
.hub-header {
    display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
    padding:1rem 1.5rem;
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border:1px solid var(--border);
    border-radius: var(--radius-xl);
    margin-bottom:1.5rem;
    box-shadow: var(--shadow-card);
    transition: background 0.4s, border-color 0.4s;
}

.header-left, .header-right { display:flex; align-items:center; gap:1rem; }
.header-right { flex-shrink:0; }

.logo { display:flex; align-items:center; gap:0.85rem; }
.logo-icon {
    width:44px; height:44px;
    background: linear-gradient(135deg, var(--accent), #818cf8, #38bdf8);
    border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 20px var(--accent-glow);
    animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
    0%,100% { box-shadow: 0 4px 20px var(--accent-glow); }
    50% { box-shadow: 0 6px 30px var(--accent-glow), 0 0 60px rgba(124,92,252,0.1); }
}
.logo-icon svg { width:22px; height:22px; color:#fff; }
.logo h1 { font-size:1.35rem; font-weight:800; letter-spacing:-0.03em; line-height:1.2; }
.gradient-text {
    background: linear-gradient(135deg, var(--accent), #818cf8, #38bdf8);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.logo .subtitle { font-size:0.8rem; color:var(--text-dim); font-weight:400; }

/* Search */
.search-bar { position:relative; width:min(380px,100%); }
.search-icon {
    position:absolute; left:0.9rem; top:50%; transform:translateY(-50%);
    width:16px; height:16px; color:var(--text-dim); pointer-events:none;
}
.search-bar input {
    width:100%; padding:0.65rem 4rem 0.65rem 2.5rem;
    background: var(--bg-surface); border:1px solid var(--border);
    border-radius:100px; color:var(--text-main);
    font-family:inherit; font-size:0.88rem;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.search-bar input:focus {
    outline:none; border-color:var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: var(--bg-surface-hover);
}
.search-bar input::placeholder { color:var(--text-dim); }
.search-kbd {
    position:absolute; right:0.8rem; top:50%; transform:translateY(-50%);
    font-size:0.7rem; color:var(--text-dim);
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:5px; padding:0.15rem 0.45rem;
    font-family: 'Inter', monospace; pointer-events:none;
}

/* Buttons */
.btn-icon {
    width:36px; height:36px; border-radius:10px;
    background:var(--bg-surface); border:1px solid var(--border);
    color:var(--text-muted); cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition: all 0.2s;
}
.btn-icon:hover { background:var(--bg-surface-hover); color:var(--text-main); border-color:var(--border-hover); }

.btn-add {
    display:inline-flex; align-items:center; gap:0.4rem;
    padding:0.5rem 1rem; border-radius:10px;
    background: linear-gradient(135deg, var(--accent), #818cf8);
    border:none; color:#fff; font-weight:600; font-size:0.82rem;
    font-family:inherit; cursor:pointer;
    box-shadow: 0 2px 12px var(--accent-glow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-add:hover { transform:translateY(-1px); box-shadow: 0 6px 24px var(--accent-glow); }
.btn-add span { display:inline; }

/* User pill */
.user-pill {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.35rem 0.5rem 0.35rem 0.35rem;
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:100px; transition: all 0.2s;
}
.avatar {
    width:30px; height:30px; border-radius:50%;
    background: linear-gradient(135deg, var(--accent), #818cf8);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.75rem; color:#fff;
}
.username { font-size:0.82rem; color:var(--text-muted); font-weight:500; }
.btn-logout-icon {
    width:28px!important; height:28px!important; border-radius:50%!important;
    border:none!important; background:transparent!important;
}
.btn-logout-icon:hover { background:rgba(239,68,68,0.1)!important; color:#ef4444!important; }

/* Clock */
.clock-widget {
    font-size:0.78rem; color:var(--text-dim); font-variant-numeric:tabular-nums;
    font-family:'Inter',monospace; white-space:nowrap;
}

/* ── Toolbar ── */
.toolbar {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap;
}

.tags-filter { display:flex; gap:0.5rem; flex-wrap:wrap; }
.tag-btn {
    padding:0.45rem 0.9rem; border-radius:100px;
    background:var(--bg-surface); border:1px solid var(--border);
    color:var(--text-muted); font-size:0.82rem; font-family:inherit;
    cursor:pointer; transition: all 0.25s;
    display:inline-flex; align-items:center; gap:0.35rem;
    backdrop-filter: var(--glass-blur);
}
.tag-btn svg { opacity:0.6; }
.tag-btn:hover { background:var(--bg-surface-hover); color:var(--text-main); border-color:var(--border-hover); }
.tag-btn.active {
    background: linear-gradient(135deg, var(--accent), #818cf8);
    color:#fff; border-color:transparent; font-weight:600;
    box-shadow: 0 2px 16px var(--accent-glow);
}
.tag-btn.active svg { opacity:1; }

.sort-select {
    padding:0.45rem 1rem; border-radius:100px;
    background:var(--bg-surface); border:1px solid var(--border);
    color:var(--text-muted); font-size:0.82rem; font-family:inherit;
    cursor:pointer; outline:none; transition: all 0.2s;
    backdrop-filter: var(--glass-blur);
}
.sort-select:focus { border-color:var(--accent); }

/* ══ BENTO GRID ══ */
.bento-grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap:1.25rem;
}

/* ── Card ── */
.bento-card {
    position:relative; display:flex; flex-direction:column;
    border-radius: var(--radius-lg);
    text-decoration:none; color:inherit;
    overflow:hidden;
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
    animation: cardReveal 0.5s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay: calc(var(--i) * 60ms);
    box-shadow: var(--shadow-card);
    transform-style: preserve-3d;
    cursor:pointer;
}

@keyframes cardReveal {
    from { opacity:0; transform: translateY(24px) scale(0.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Animated gradient border */
.card-border-glow {
    position:absolute; inset:-1px; z-index:0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, transparent 40%, var(--card-accent) 50%, transparent 60%);
    background-size: 300% 300%;
    opacity:0;
    transition: opacity 0.4s;
}
.bento-card:hover .card-border-glow {
    opacity:0.6;
    animation: borderShift 3s linear infinite;
}
@keyframes borderShift {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Glass body */
.card-body {
    position:relative; z-index:1;
    display:flex; flex-direction:column;
    padding:1.75rem;
    background: var(--bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: calc(var(--radius-lg) - 1px);
    border: 1px solid var(--border);
    flex-grow:1;
    transition: background 0.3s, border-color 0.3s;
}
.bento-card:hover .card-body {
    border-color: var(--border-hover);
    background: var(--bg-surface-hover);
}

/* Shine effect */
.card-shine {
    position:absolute; inset:0; z-index:2;
    border-radius: var(--radius-lg);
    pointer-events:none;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, -20%), rgba(255,255,255,0.06), transparent 60%);
    opacity:0; transition: opacity 0.3s;
}
.bento-card:hover .card-shine { opacity:1; }

/* Card inner */
.card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.2rem; }
.card-icon {
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 15%, transparent), color-mix(in srgb, var(--card-accent) 5%, transparent));
    border: 1px solid color-mix(in srgb, var(--card-accent) 20%, transparent);
    transition: transform 0.3s, box-shadow 0.3s;
}
.bento-card:hover .card-icon {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--card-accent) 25%, transparent);
}

.card-logo {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.card-actions { display:flex; align-items:center; gap:0.6rem; }
.card-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-online { background:#22c55e; box-shadow: 0 0 8px #22c55e80; animation: statusPulse 2.5s ease-in-out infinite; }
.status-dev { background:#f59e0b; box-shadow: 0 0 8px #f59e0b80; }
@keyframes statusPulse {
    0%,100% { box-shadow: 0 0 6px #22c55e80; }
    50% { box-shadow: 0 0 14px #22c55ecc; }
}

.pin-btn {
    background:none; border:none; color:var(--text-dim);
    cursor:pointer; padding:4px; border-radius:6px;
    transition: color 0.2s, transform 0.2s;
    display:flex; align-items:center;
}
.pin-btn:hover { color:var(--accent); transform:scale(1.15); }

.card-title {
    font-size:1.2rem; font-weight:700; letter-spacing:-0.02em;
    margin-bottom:0.4rem; line-height:1.3;
    transition: color 0.2s;
}
.bento-card:hover .card-title { color: var(--card-accent); }

.card-desc {
    font-size:0.88rem; color:var(--text-muted); line-height:1.55;
    flex-grow:1; margin-bottom:1.2rem;
}

.card-footer {
    display:flex; justify-content:space-between; align-items:center;
}
.card-tags { display:flex; gap:0.4rem; flex-wrap:wrap; }
.tag {
    font-size:0.7rem; padding:0.25rem 0.65rem;
    background: var(--accent-soft); border:1px solid var(--border);
    border-radius:100px; color:var(--text-muted);
    font-weight:500; transition: all 0.2s;
}
.bento-card:hover .tag {
    border-color: color-mix(in srgb, var(--card-accent) 25%, transparent);
    color: var(--text-main);
}

.card-arrow {
    color:var(--text-dim); transition: all 0.3s;
    flex-shrink:0;
}
.bento-card:hover .card-arrow {
    color: var(--card-accent);
    transform: translate(3px,-3px);
}

/* Card hover lift */
.bento-card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* ── Helpers ── */
.hidden { display:none!important; }

.no-results { text-align:center; padding:4rem 2rem; }
.empty-icon { font-size:3rem; margin-bottom:1rem; opacity:0.4; }
.no-results h3 { font-size:1.15rem; margin-bottom:0.4rem; color:var(--text-main); }
.no-results p { color:var(--text-muted); font-size:0.9rem; }

/* ══ MODAL ══ */
.modal-overlay {
    display:none; position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(8px);
    align-items:center; justify-content:center; padding:2rem;
}
.modal-card {
    background: var(--bg-base); border:1px solid var(--border);
    border-radius: var(--radius-xl); width:100%; max-width:480px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5); overflow:hidden;
    animation: modalIn 0.3s ease;
}
@keyframes modalIn {
    from { opacity:0; transform:scale(0.95) translateY(12px); }
    to { opacity:1; transform:scale(1) translateY(0); }
}

.modal-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
}
.modal-header h2 { font-size:1.15rem; font-weight:700; }
.modal-close { border:none!important; background:transparent!important; }

.modal-body { padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.field { display:flex; flex-direction:column; gap:0.35rem; }
.field label { font-size:0.8rem; color:var(--text-muted); font-weight:500; }
.field input, .field textarea {
    padding:0.65rem 0.85rem; border-radius:var(--radius-sm);
    background:var(--bg-surface); border:1px solid var(--border);
    color:var(--text-main); font-family:inherit; font-size:0.88rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus {
    outline:none; border-color:var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height:80px; resize:vertical; }
.field-row { display:flex; gap:1rem; }
.field-row .field { flex:1; }

.modal-footer {
    padding:1rem 1.5rem; border-top:1px solid var(--border);
    display:flex; justify-content:flex-end; gap:0.75rem;
}
.btn-secondary {
    padding:0.55rem 1.2rem; border-radius:var(--radius-sm);
    background:transparent; border:1px solid var(--border);
    color:var(--text-muted); font-family:inherit; font-size:0.88rem;
    cursor:pointer; transition: all 0.2s;
}
.btn-secondary:hover { border-color:var(--border-hover); color:var(--text-main); }
.btn-primary {
    padding:0.55rem 1.2rem; border-radius:var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), #818cf8);
    border:none; color:#fff; font-weight:600;
    font-family:inherit; font-size:0.88rem; cursor:pointer;
    box-shadow: 0 2px 12px var(--accent-glow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }

/* ── Login ── */
.login-body { display:flex; align-items:center; justify-content:center; padding:2rem; }
.login-card {
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:2.5rem 2rem;
    width:100%; max-width:400px; text-align:center;
    backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-card-hover);
}
.login-icon {
    width:60px; height:60px; margin:0 auto 1.5rem;
    background: linear-gradient(135deg, var(--accent), #818cf8);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 30px var(--accent-glow);
}
.login-icon svg { width:28px; height:28px; color:#fff; }
.login-title { font-size:1.4rem; margin-bottom:0.4rem; font-weight:800; letter-spacing:-0.02em; }
.login-subtitle { color:var(--text-muted); margin-bottom:2rem; font-size:0.88rem; }
.form-group { margin-bottom:1rem; text-align:left; }
.form-label { display:block; font-size:0.8rem; color:var(--text-muted); margin-bottom:0.4rem; font-weight:500; }
.form-input {
    width:100%; padding:0.7rem 0.9rem; background:var(--bg-surface);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text-main); font-family:inherit; transition: all 0.2s;
}
.form-input:focus { outline:none; border-color:var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-login {
    width:100%; padding:0.75rem; background: linear-gradient(135deg, var(--accent), #818cf8);
    color:#fff; border:none; border-radius:var(--radius-sm);
    font-size:0.95rem; font-weight:700; cursor:pointer;
    transition: all 0.2s; margin-top:0.5rem;
    box-shadow: 0 2px 16px var(--accent-glow);
}
.btn-login:hover { transform:translateY(-1px); box-shadow: 0 6px 24px var(--accent-glow); }
.alert-error {
    background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.2);
    color:#ef4444; padding:0.7rem; border-radius:var(--radius-sm);
    margin-bottom:1.2rem; font-size:0.85rem;
}
.back-link { display:inline-block; margin-top:1.5rem; color:var(--text-muted); text-decoration:none; font-size:0.82rem; transition:color 0.2s; }
.back-link:hover { color:var(--text-main); }

/* ── Responsive ── */
@media (max-width:1024px) {
    .hub-header { flex-wrap:wrap; }
    .header-center { flex:1 1 100%; order:3; }
    .search-bar { width:100%; }
    .btn-add span { display:none; }
}
@media (max-width:768px) {
    .hub-container { padding:1rem; }
    .hub-header { padding:0.8rem 1rem; }
    .bento-grid { grid-template-columns:1fr; }
    .toolbar { flex-direction:column; align-items:stretch; }
    .clock-widget { display:none; }
}
@media (max-width:480px) {
    .user-pill .username { display:none; }
}