/* PressHub Futuristic SaaS Design System (2030-inspired) */
/* ================================================ */
/* TOKENS */
@layer tokens {
	:root {
		/* Brand / Primary Palette */
		--primary-blue: #276EF1;
		--primary-blue-dark: #1E5BD7;
		--primary-blue-light: #4A90E2;
		--secondary-blue: #5BA7F7;
		--accent-blue: #66B3FF;
		--light-blue-bg: #E8F1FD;
		--ink:#0b1220;

		/* Neutral Scale */
		--white: #FFFFFF;
		--gray-50: #F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0; --gray-300:#CBD5E1;
		--gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569; --gray-700:#334155; --gray-800:#1E293B; --gray-900:#1A202C;

		/* Elevation & Effects */
		--glass-bg: rgba(255,255,255,0.82);
		--glass-border: rgba(39,110,241,0.12);
		--gradient-primary: linear-gradient(135deg,var(--primary-blue) 0%,var(--secondary-blue) 100%);
		--gradient-bg: radial-gradient(circle at 30% 20%, #E8F1FD, #F0F7FF 60%, #E8F1FD 100%);

		/* Shadows */
		--shadow-xs: 0 1px 2px 0 rgba(39,110,241,0.05);
		--shadow-sm: 0 1px 3px 0 rgba(39,110,241,0.08);
		--shadow-md: 0 4px 6px -1px rgba(39,110,241,0.12), 0 2px 4px -2px rgba(39,110,241,0.08);
		--shadow-lg: 0 10px 15px -3px rgba(39,110,241,0.12), 0 4px 6px -4px rgba(39,110,241,0.08);
		--shadow-xl: 0 20px 25px -5px rgba(39,110,241,0.16), 0 8px 10px -6px rgba(39,110,241,0.12);
		--shadow-glow: 0 0 32px -4px rgba(39,110,241,0.35);

		/* Typography */
		--font-primary: 'Inter', -apple-system, BlinkMacSystemFont,'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		--font-weight-light:300; --font-weight-normal:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700;

		/* Spacing */
		--space-xs:.25rem; --space-sm:.5rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem; --space-3xl:4rem;

		/* Radius */
		--radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-full:9999px;

		/* Motion */
		--transition-fast:.15s cubic-bezier(.4,0,.2,1);
		--transition-normal:.25s cubic-bezier(.4,0,.2,1);
		--transition-slow:.4s cubic-bezier(.4,0,.2,1);

		--container-max:1240px;
	}
}

/* BASE RESET */
@layer base {
	*,*::before,*::after { box-sizing:border-box; }
	html { -webkit-text-size-adjust:100%; }
	body { margin:0; font-family:var(--font-primary); font-weight:var(--font-weight-normal); color:var(--gray-800); background:var(--gradient-bg); min-height:100vh; line-height:1.55; -webkit-font-smoothing:antialiased; }
	a { color:var(--ink); text-decoration:none; transition:color var(--transition-fast); }
	a:hover { color:var(--primary-blue-dark); }
	img { max-width:100%; display:block; }
	::selection { background:var(--primary-blue); color:var(--white); }
	.brand{font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:.01em}
    .brand:hover{text-decoration:underline}
}

/* BACKGROUND DECOR */
@layer decorative {
	body::before { content:""; position:fixed; inset:0; pointer-events:none; background:
		radial-gradient(circle at 18% 82%, rgba(39,110,241,.09) 0%, transparent 55%),
		radial-gradient(circle at 82% 18%, rgba(91,167,247,.07) 0%, transparent 55%),
		radial-gradient(circle at 50% 50%, rgba(102,179,255,.05) 0%, transparent 60%);
		animation:bgFloat 14s ease-in-out infinite alternate; z-index:-2; }
	@keyframes bgFloat { 0%{transform:translate3d(-6px,-6px,0) scale(1);opacity:.6} 100%{transform:translate3d(6px,6px,0) scale(1.03);opacity:.85} }
	.bg-mesh { position:fixed; inset:0; background-image:linear-gradient(rgba(39,110,241,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(39,110,241,.035) 1px, transparent 1px); background-size:42px 42px; z-index:-3; animation:meshMove 28s linear infinite; }
	@keyframes meshMove { 0%{transform:translate(0,0)}100%{transform:translate(42px,42px)} }
}

/* LAYOUT */
@layer layout {
	.appbar { position:sticky; top:0; z-index:80; backdrop-filter:saturate(180%) blur(18px); background:linear-gradient(90deg, rgba(255,255,255,.82), rgba(255,255,255,.7)); border-bottom:1px solid var(--glass-border); box-shadow:var(--shadow-xs); }
	.appbar-inner { max-width:var(--container-max); margin:0 auto; padding:0 var(--space-lg); height:70px; display:flex; gap:var(--space-lg); align-items:center; }
	.brand { display:flex; align-items:center; gap:var(--space-sm); text-decoration:none; }
	.brand .logo,
	.brand .brand-logo { height:40px; width:auto; filter:drop-shadow(0 4px 12px rgba(39,110,241,.15)); transition:transform var(--transition-normal), filter var(--transition-normal); display:block; }
	.brand:hover .logo,
	.brand:hover .brand-logo { transform:scale(1.05); filter:drop-shadow(0 6px 16px rgba(39,110,241,.25)); }
		.brand-name { font-size:1.35rem; font-weight:var(--font-weight-bold); letter-spacing:-.5px; background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
	.nav-actions { margin-left:auto; display:flex; gap:var(--space-sm); align-items:center; }

	.container { max-width:var(--container-max); margin:0 auto; padding:0 var(--space-lg); }
	.section { padding:var(--space-3xl) 0 var(--space-2xl); }
	.section.compact { padding:var(--space-2xl) 0 var(--space-xl); }
}

/* HERO */
@layer hero {
	.hero { padding:var(--space-3xl) 0 var(--space-2xl); position:relative; }
	.hero-grid { display:grid; gap:var(--space-2xl); grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start; }
	.hero h1 { font-size:clamp(2.4rem,5vw,3.4rem); line-height:1.05; margin:0 0 var(--space-lg); letter-spacing:-1.5px; font-weight:700; }
	.hero .eyebrow { font-size:.85rem; letter-spacing:.15em; font-weight:600; text-transform:uppercase; color:var(--primary-blue-dark); margin-bottom:var(--space-sm); display:inline-block; }
	.hero-lead { font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:500; color:var(--gray-700); margin:0 0 var(--space-lg); }
	.hero-sub { font-size:1rem; color:var(--gray-600); margin:0 0 var(--space-xl); max-width:640px; }
	.hero-cta { display:flex; flex-wrap:wrap; gap:var(--space-sm); }
}

/* COMPONENTS */
@layer components {
	.btn { --btn-bg:var(--white); --btn-color:var(--primary-blue); --btn-border:var(--gray-200); --btn-shadow:var(--shadow-sm); cursor:pointer; user-select:none; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:0.95rem 1.4rem; font-size:.95rem; font-weight:600; letter-spacing:.25px; border-radius:var(--radius-xl); border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-color); box-shadow:var(--btn-shadow); position:relative; overflow:hidden; transition:background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); min-height:48px; }
	.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
	.btn:active { transform:translateY(0) scale(.97); box-shadow:var(--shadow-sm); }
	.btn-primary { --btn-bg:var(--gradient-primary); --btn-color:var(--white); --btn-border:transparent; --btn-shadow:var(--shadow-md); }
	.btn-primary:hover { box-shadow:var(--shadow-xl), var(--shadow-glow); }
	.btn-outline { --btn-bg:rgba(255,255,255,0.55); backdrop-filter:blur(14px); --btn-border:var(--glass-border); }
	.btn-outline:hover { border-color:var(--primary-blue); }
	.btn-pill { border-radius:var(--radius-full); padding:.85rem 1.4rem; }
	.btn::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.6), transparent 60%); opacity:0; transition:opacity .5s; }
	.btn:focus-visible { outline:3px solid rgba(39,110,241,.35); outline-offset:2px; }
	.btn:active::after { opacity:.9; transition:none; }

	.card { position:relative; border:1px solid var(--glass-border); background:var(--glass-bg); backdrop-filter:blur(22px) saturate(160%); border-radius:var(--radius-2xl); padding:var(--space-2xl); box-shadow:var(--shadow-xl); overflow:hidden; transition:transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal); }
	.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-glow), var(--shadow-xl); }
	.card:active { transform:translateY(-2px); }
	.card::before { content:""; position:absolute; inset:0; background:linear-gradient(130deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); opacity:.6; pointer-events:none; mix-blend-mode:overlay; }
	.card h3 { margin:0 0 .75rem; font-size:1.15rem; letter-spacing:-.25px; font-weight:600; }
	.card p { margin:0; font-size:.95rem; color:var(--gray-600); line-height:1.5; }

	.feature-grid { display:grid; gap:var(--space-xl); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:var(--space-2xl); }
	.chip { display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(120deg, var(--white), rgba(255,255,255,.55)); padding:.4rem .85rem; border-radius:var(--radius-full); font-size:.65rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-blue-dark); border:1px solid var(--glass-border); box-shadow:var(--shadow-xs); }
	.badge { display:inline-flex; align-items:center; font-size:.65rem; font-weight:600; letter-spacing:.08em; padding:.35rem .6rem; background:var(--light-blue-bg); color:var(--primary-blue); border-radius:var(--radius-full); }
	.divider { height:1px; width:100%; background:linear-gradient(90deg, transparent, var(--gray-200), transparent); margin:var(--space-2xl) 0; }

	.snackbar { position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); background:var(--gray-800); color:var(--white); padding:.85rem 1.3rem; border-radius:var(--radius-full); font-size:.85rem; letter-spacing:.35px; box-shadow:var(--shadow-lg); opacity:0; transition:opacity var(--transition-fast), transform var(--transition-fast); z-index:900; }
	.snackbar.show { opacity:1; transform:translate(-50%,0); }

	.skeleton { position:relative; overflow:hidden; background:var(--gray-100); border-radius:var(--radius-lg); min-height:12px; }
	.skeleton::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:shimmer 1.6s infinite; }
	@keyframes shimmer { 0%{transform:translateX(-100%)}100%{transform:translateX(100%)} }

		/* Logo ticker */
		.logo-ticker-wrap { position:relative; overflow:hidden; width:100%; margin-top:1rem; border:1px solid var(--glass-border); border-radius:var(--radius-xl); background:linear-gradient(120deg, rgba(255,255,255,.9), rgba(255,255,255,.6)); backdrop-filter:blur(18px) saturate(160%); box-shadow:var(--shadow-md); }
		.logo-ticker { display:flex; width:max-content; animation:logoScroll 28s linear infinite; gap:3rem; padding:1.25rem 2rem; }
		.logo-ticker:hover { animation-play-state:paused; }
		.logo-ticker img { height:42px; width:auto; object-fit:contain; filter:grayscale(100%) contrast(1.1); opacity:.85; transition:filter .35s, opacity .35s, transform .35s; }
		.logo-ticker img:hover { filter:grayscale(0%) drop-shadow(0 4px 12px rgba(39,110,241,.25)); opacity:1; transform:translateY(-2px) scale(1.03); }
		@keyframes logoScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
		@media (max-width:680px){ .logo-ticker { animation-duration:40s; gap:2rem; padding:1rem 1.3rem; } .logo-ticker img { height:36px; } }
}

/* FORMS */
@layer forms {
	.form-group { position:relative; margin:0 0 var(--space-lg); }
	.form-input { width:100%; padding:1.1rem 1rem .9rem; border:2px solid var(--gray-200); border-radius:var(--radius-xl); background:var(--white); font-size:.95rem; font-weight:500; color:var(--gray-700); outline:none; transition:all var(--transition-normal); box-shadow:var(--shadow-xs); }
	.form-input::placeholder { color:var(--gray-400); opacity:.55; transition:opacity var(--transition-fast); }
	.form-input:focus::placeholder { opacity:.85; }
	textarea.form-input::placeholder { color:var(--gray-400); opacity:.55; }
	.form-input:focus { border-color:var(--primary-blue); box-shadow:var(--shadow-glow), 0 0 0 3px rgba(39,110,241,.15); transform:translateY(-1px); }
	.floating-label { position:absolute; top:50%; left:1rem; transform:translateY(-50%); font-size:.85rem; font-weight:600; color:var(--gray-500); pointer-events:none; transition:all var(--transition-normal); background:var(--white); padding:0 .4rem; border-radius:var(--radius-xs); letter-spacing:.5px; }
	.form-input:focus + .floating-label, .form-input:not(:placeholder-shown) + .floating-label { top:0; font-size:.65rem; color:var(--primary-blue); letter-spacing:.1em; }
	.error-message { background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.25); color:#b91c1c; padding:.9rem 1rem; border-radius:var(--radius-lg); font-size:.8rem; font-weight:600; display:flex; gap:.55rem; align-items:center; }
	
	.form-checkbox-row { display:flex; align-items:center; gap:var(--space-sm); font-size:.9rem; font-weight:var(--font-weight-medium); color:var(--gray-700); cursor:pointer; padding:.5rem 0; margin-bottom:.25rem; transition:color var(--transition-fast); }
	.form-checkbox-row input[type="checkbox"] { width:1.2rem; height:1.2rem; border-radius:4px; border:2px solid var(--gray-300); accent-color:var(--primary-blue); cursor:pointer; flex-shrink:0; }
	.form-checkbox-row:hover { color:var(--primary-blue-dark); }
}

/* ANIMATIONS / UTILS */
@layer animations {
	@keyframes fadeInUp { from{opacity:0; transform:translateY(32px)} to{opacity:1; transform:translateY(0)} }
	@keyframes fadeInScale { from{opacity:0; transform:scale(.95)} to{opacity:1; transform:scale(1)} }
	@keyframes slideInRight { from{opacity:0; transform:translateX(32px)} to{opacity:1; transform:translateX(0)} }
	.animate-fade-in-up { animation:fadeInUp .7s cubic-bezier(.22,.61,.36,1) backwards; }
	.animate-fade-in-scale { animation:fadeInScale .55s cubic-bezier(.22,.61,.36,1) backwards; }
	.animate-slide-in-right { animation:slideInRight .55s cubic-bezier(.22,.61,.36,1) backwards; }
	.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}
	.text-center{text-align:center}.text-right{text-align:right}
	.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mb-2xl{margin-bottom:var(--space-2xl)}
	.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}
}

/* FOOTER */
@layer footer {
	footer { margin:var(--space-3xl) 0 var(--space-lg); text-align:center; font-size:.75rem; color:var(--gray-500); }
}

/* RESPONSIVE */
@layer responsive { @media (max-width:780px){ .hero { padding:var(--space-2xl) 0 var(--space-xl); } .card { padding:var(--space-xl); } .appbar-inner { height:62px; } } }

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* ADMIN DASHBOARD STYLES */
@layer dashboard {
	.dashboard-container { padding:var(--space-2xl) var(--space-lg); max-width:1240px; margin:0 auto; }
	.dashboard-hero { text-align:center; margin-bottom:var(--space-3xl); }
	.hero-title { font-size:clamp(2.1rem,4vw,2.9rem); font-weight:var(--font-weight-bold); color:var(--gray-800); margin:0 0 var(--space-md); line-height:1.15; letter-spacing:-1px; }
	.hero-subtitle { font-size:1.05rem; color:var(--gray-600); max-width:880px; margin:0 auto; line-height:1.55; }
	.stats-section { margin-bottom:var(--space-3xl); }
	.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-lg); }
	.stat-card { display:flex; align-items:center; gap:var(--space-lg); padding:var(--space-xl); transition:transform var(--transition-normal); }
	.stat-card:hover { transform:translateY(-2px); }
	.stat-icon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:linear-gradient(135deg,var(--primary-blue),var(--secondary-blue)); border-radius:var(--radius-xl); color:var(--white); flex-shrink:0; font-weight:600; font-size:1.15rem; letter-spacing:.5px; }
	.stat-number { font-size:2rem; font-weight:var(--font-weight-bold); color:var(--gray-800); line-height:1; margin:0 0 var(--space-xs); }
	.stat-label { font-size:.75rem; color:var(--gray-500); font-weight:var(--font-weight-medium); letter-spacing:.08em; text-transform:uppercase; }
	.section-header { text-align:center; margin-bottom:var(--space-2xl); }
	.section-title { font-size:1.85rem; font-weight:var(--font-weight-bold); color:var(--gray-800); margin:0 0 var(--space-sm); letter-spacing:-.5px; }
	.section-subtitle { font-size:.95rem; color:var(--gray-600); }
	.actions-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-lg); }
	.action-card { display:flex; align-items:center; gap:var(--space-lg); padding:var(--space-xl); text-decoration:none; color:inherit; transition:all var(--transition-normal); cursor:pointer; }
	.action-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-xl); }
	.action-icon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:var(--light-blue-bg); border-radius:var(--radius-lg); color:var(--primary-blue); flex-shrink:0; font-weight:600; font-size:1.1rem; }
	.action-title { font-size:1.12rem; font-weight:var(--font-weight-semibold); color:var(--gray-800); margin:0 0 var(--space-xs); }
	.action-description { font-size:.8rem; color:var(--gray-600); line-height:1.4; }
	.action-arrow { color:var(--primary-blue); transition:transform var(--transition-normal); font-weight:600; }
	.action-card:hover .action-arrow { transform:translateX(4px); }
	.clients-section { margin:var(--space-3xl) 0 var(--space-2xl); }
	.clients-grid { display:grid; gap:var(--space-lg); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
	.client-card { padding:var(--space-xl); position:relative; }
	.client-meta { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-500); margin-bottom:.4rem; font-weight:600; }
	.client-name { font-size:1.15rem; font-weight:600; margin:0 0 .35rem; letter-spacing:-.25px; }
	.client-bio { font-size:.8rem; color:var(--gray-600); line-height:1.4; margin:0 0 .85rem; max-height:4.2em; overflow:hidden; }
	.client-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
	.mini-btn { font-size:.65rem; padding:.45rem .7rem; border-radius:var(--radius-full); border:1px solid var(--glass-border); background:rgba(255,255,255,.65); backdrop-filter:blur(10px); font-weight:600; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; transition:all var(--transition-fast); }
	.mini-btn:hover { background:var(--white); box-shadow:var(--shadow-sm); }
	.mini-btn.danger { color:#b91c1c; border-color:rgba(185,28,28,.35); background:linear-gradient(120deg, #fff, #ffecec); }
	.mini-btn.danger:hover { box-shadow:0 0 0 3px rgba(185,28,28,.15); }
	.inline-form { display:inline; }
	.links-table { width:100%; border-collapse:collapse; font-size:.8rem; }
	.links-table th, .links-table td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--gray-200); vertical-align:top; }
	.links-table th { font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--gray-500); }
	.links-table tbody tr:hover { background:var(--gray-50); }
	.truncate { max-width:320px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
	.edit-input { width:100%; font-size:.7rem; padding:.4rem .5rem; border:1px solid var(--gray-200); border-radius:var(--radius-sm); background:var(--white); }
	.bulk-box { width:100%; min-height:140px; padding:.85rem 1rem; border:2px dashed var(--gray-300); border-radius:var(--radius-lg); background:rgba(255,255,255,.6); font-family:monospace; font-size:.75rem; resize:vertical; }
	.bulk-box:focus { outline:none; border-color:var(--primary-blue); background:#fff; }
	.divider-soft { height:1px; margin:var(--space-xl) 0; background:linear-gradient(90deg, transparent, var(--gray-200), transparent); }
	.table-actions { display:flex; gap:.35rem; flex-wrap:wrap; }
	.badge-pill { display:inline-flex; align-items:center; padding:.25rem .55rem; font-size:.6rem; font-weight:600; border-radius:var(--radius-full); background:var(--light-blue-bg); color:var(--primary-blue-dark); letter-spacing:.05em; }
	.badge-pill.alt { background:#ffecec; color:#b91c1c; }
	@media (max-width:880px){ .truncate { max-width:200px; } }
	@media (max-width:640px){ .links-table { font-size:.7rem; } .links-table th,.links-table td { padding:.45rem .4rem; } }
}
