/* ==========================================================================
   HS Laptop Recommender v3 dark-tech aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* Tokens */
.hsrec-wrap {
	--c-bg:       #0d0f14;
	--c-surface:  #13161e;
	--c-border:   #1f2433;
	--c-border2:  #2a3045;
	--c-accent:   #4f8ef7;
	--c-accent2:  #7b5cf0;
	--c-gold:     #f5c842;
	--c-text:     #e8eaf0;
	--c-muted:    #7a8099;
	--c-error:    #f06060;
	--c-success:  #42d492;
	--r-card:     16px;
	--r-input:    10px;
	--r-chip:     100px;
	--ff-head:    'Syne', sans-serif;
	--ff-body:    'DM Sans', sans-serif;
	--ease-out:   cubic-bezier(.16,1,.3,1);

	font-family:  var(--ff-body);
	color:        var(--c-text);
	background:   var(--c-bg);
	max-width:    860px;
	margin:       0 auto;
	padding:      48px 24px 80px;
}

/* Hero */
.hsrec-hero {
	text-align: center;
	margin-bottom: 48px;
	animation: hsrec-fade-up .6s var(--ease-out) both;
}

.hsrec-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-accent);
	background: rgba(79,142,247,.12);
	border: 1px solid rgba(79,142,247,.3);
	padding: 5px 14px;
	border-radius: 100px;
	margin-bottom: 20px;
}

.hsrec-hero__badge::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
	animation: hsrec-pulse 2s ease-in-out infinite;
}

.hsrec-hero__title {
	font-family: var(--ff-head);
	font-size: clamp(32px, 6vw, 52px);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 16px;
	background: linear-gradient(135deg, #fff 0%, #a8b8d8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hsrec-hero__sub {
	font-size: 16px;
	font-weight: 300;
	color: var(--c-muted);
	max-width: 520px;
	margin: 0 auto;
	line-height: 1.65;
}

/* Form */
.hsrec-form {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-card);
	padding: 36px;
	animation: hsrec-fade-up .7s var(--ease-out) .1s both;
}

.hsrec-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 32px;
}

.hsrec-field { display: flex; flex-direction: column; gap: 10px; }
.hsrec-field--full { grid-column: 1 / -1; }

.hsrec-label {
	font-family: var(--ff-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--c-text);
}

.hsrec-optional {
	font-family: var(--ff-body);
	font-weight: 300;
	color: var(--c-muted);
	font-size: 12px;
}

/* Inputs */
.hsrec-input,
.hsrec-select,
.hsrec-textarea {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--c-border2);
	border-radius: var(--r-input);
	color: var(--c-text);
	font-family: var(--ff-body);
	font-size: 15px;
	padding: 11px 14px;
	transition: border-color .2s, box-shadow .2s;
	width: 100%;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

.hsrec-input::placeholder,
.hsrec-textarea::placeholder { color: var(--c-muted); }

.hsrec-input:focus,
.hsrec-select:focus,
.hsrec-textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(79,142,247,.15);
}

.hsrec-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8099' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
	cursor: pointer;
}

.hsrec-select option {
	background: #1a1e2a;
	color: var(--c-text);
}

.hsrec-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }

/* Budget row */
.hsrec-budget-row {
	display: flex;
	gap: 10px;
}

.hsrec-budget-row .hsrec-input { flex: 1 1 0; min-width: 0; }
.hsrec-budget-row .hsrec-select { flex: 0 0 auto; width: auto; min-width: 120px; }

/* Chips */
.hsrec-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hsrec-chip {
	font-family: var(--ff-body);
	font-size: 14px;
	font-weight: 400;
	color: var(--c-muted);
	background: rgba(255,255,255,.04);
	border: 1px solid var(--c-border2);
	border-radius: var(--r-chip);
	padding: 8px 16px;
	cursor: pointer;
	transition: all .2s var(--ease-out);
	white-space: nowrap;
}

.hsrec-chip:hover {
	color: var(--c-text);
	border-color: var(--c-accent);
	background: rgba(79,142,247,.08);
}

.hsrec-chip.is-active {
	color: #fff;
	background: var(--c-accent);
	border-color: var(--c-accent);
	font-weight: 500;
}

.hsrec-chips--sm .hsrec-chip { font-size: 13px; padding: 6px 14px; }

/* Submit */
.hsrec-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--c-border);
}

.hsrec-form__hint {
	font-size: 13px;
	color: var(--c-error);
	flex: 1;
	min-height: 1.4em;
}

.hsrec-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ff-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
	background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent2) 100%);
	border: none;
	border-radius: 10px;
	padding: 13px 28px;
	cursor: pointer;
	transition: opacity .2s, transform .15s var(--ease-out), box-shadow .2s;
	box-shadow: 0 4px 24px rgba(79,142,247,.3);
	white-space: nowrap;
}

.hsrec-btn:hover {
	opacity: .9;
	transform: translateY(-1px);
	box-shadow: 0 8px 32px rgba(79,142,247,.4);
}

.hsrec-btn:active { transform: translateY(0); }

.hsrec-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

.hsrec-btn--outline {
	background: transparent;
	border: 1px solid var(--c-border2);
	color: var(--c-muted);
	box-shadow: none;
	font-size: 13px;
	padding: 9px 18px;
}

.hsrec-btn--outline:hover {
	border-color: var(--c-accent);
	color: var(--c-text);
	box-shadow: none;
}

.hsrec-btn__icon { transition: transform .2s; }
.hsrec-btn:hover .hsrec-btn__icon { transform: translateX(3px); }

/* Loading */
.hsrec-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 80px 0;
	animation: hsrec-fade-up .4s var(--ease-out) both;
}

.hsrec-loading__spinner {
	width: 48px; height: 48px;
	border: 3px solid var(--c-border2);
	border-top-color: var(--c-accent);
	border-radius: 50%;
	animation: hsrec-spin .8s linear infinite;
}

.hsrec-loading__msg {
	font-size: 15px;
	font-weight: 300;
	color: var(--c-muted);
	text-align: center;
}

/* Results header */
.hsrec-results {
	animation: hsrec-fade-up .5s var(--ease-out) both;
}

.hsrec-results__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.hsrec-results__title {
	font-family: var(--ff-head);
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 6px;
}

.hsrec-results__sub {
	font-size: 14px;
	font-weight: 300;
	color: var(--c-muted);
	margin: 0;
}

/* Cards */
.hsrec-cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.hsrec-card {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-card);
	padding: 28px;
	position: relative;
	overflow: hidden;
	transition: border-color .25s, transform .25s var(--ease-out);
	animation: hsrec-fade-up .5s var(--ease-out) both;
}

.hsrec-card:nth-child(1) { animation-delay: .0s; }
.hsrec-card:nth-child(2) { animation-delay: .07s; }
.hsrec-card:nth-child(3) { animation-delay: .14s; }
.hsrec-card:nth-child(4) { animation-delay: .21s; }
.hsrec-card:nth-child(5) { animation-delay: .28s; }

.hsrec-card:hover {
	border-color: var(--c-border2);
	transform: translateY(-2px);
}

/* Top pick glow */
.hsrec-card--top {
	border-color: rgba(79,142,247,.4);
	background: linear-gradient(145deg, #13161e 0%, #141826 100%);
}

.hsrec-card--top::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 40% at 20% 0%, rgba(79,142,247,.1) 0%, transparent 70%);
	pointer-events: none;
}

/* Card topline */
.hsrec-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.hsrec-card__meta { flex: 1; min-width: 0; }

.hsrec-card__rank {
	font-family: var(--ff-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.hsrec-card__rank-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--c-gold);
	background: rgba(245,200,66,.12);
	border: 1px solid rgba(245,200,66,.25);
	border-radius: 100px;
	padding: 2px 10px;
	font-size: 11px;
}

.hsrec-card__name {
	font-family: var(--ff-head);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
	color: #fff;
}

.hsrec-card__year {
	font-size: 13px;
	color: var(--c-muted);
}

/* Score badge */
.hsrec-card__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.hsrec-score-ring {
	position: relative;
	width: 64px;
	height: 64px;
}

.hsrec-score-ring svg {
	transform: rotate(-90deg);
	width: 64px;
	height: 64px;
}

.hsrec-score-ring__bg { fill: none; stroke: var(--c-border); stroke-width: 4; }
.hsrec-score-ring__fill {
	fill: none;
	stroke: var(--c-accent);
	stroke-width: 4;
	stroke-linecap: round;
	transition: stroke-dashoffset .8s var(--ease-out) .3s;
}

.hsrec-score-ring__text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-head);
	font-size: 15px;
	font-weight: 800;
	color: #fff;
}

.hsrec-score-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* Price */
.hsrec-card__price {
	font-family: var(--ff-head);
	font-size: 22px;
	font-weight: 800;
	color: var(--c-accent);
	margin: 0 0 20px;
}

/* Specs grid */
.hsrec-specs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: 22px;
}

.hsrec-spec {
	background: rgba(255,255,255,.03);
	border: 1px solid var(--c-border);
	border-radius: 8px;
	padding: 10px 12px;
}

.hsrec-spec__key {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: 4px;
}

.hsrec-spec__val {
	font-size: 13px;
	font-weight: 500;
	color: var(--c-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Reasons & tradeoffs */
.hsrec-card__body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.hsrec-section-title {
	font-family: var(--ff-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin: 0 0 10px;
}

.hsrec-reasons, .hsrec-tradeoffs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.hsrec-reasons li,
.hsrec-tradeoffs li {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--c-text);
	display: flex;
	gap: 8px;
}

.hsrec-reasons li::before {
	content: '+';
	color: var(--c-success);
	font-weight: 700;
	flex-shrink: 0;
}

.hsrec-tradeoffs li::before {
	content: '!';
	color: var(--c-gold);
	font-size: 11px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* Keyframes */
@keyframes hsrec-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0);    }
}

@keyframes hsrec-spin {
	to { transform: rotate(360deg); }
}

@keyframes hsrec-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: .4; }
}

/* Responsive */
@media (max-width: 640px) {
	.hsrec-wrap { padding: 32px 16px 60px; }

	.hsrec-form { padding: 24px 18px; }

	.hsrec-form__grid { grid-template-columns: 1fr; }

	.hsrec-budget-row { flex-direction: column; }
	.hsrec-budget-row .hsrec-select { width: 100%; }

	.hsrec-card__body { grid-template-columns: 1fr; }

	.hsrec-results__header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
	.hsrec-specs { grid-template-columns: 1fr 1fr; }
}