.hls-a1-flashcards{--outer-bg: #071326; --card: #071326; --panel: #0b1f3a; --panel-2: #102a4c; --text: #f8fafc; --muted: #cbd5e1; --border: #243b63; --accent: #60a5fa; --accent-soft: #0b1f3a; --accent-border: #3b82f6; --ok: #86efac; --bad: #fca5a5; --warn: #fde68a;}
.hls-a1-flashcards *{box-sizing: border-box;}

.hls-a1-flashcards .wrap{max-width: 980px; margin: 0 auto;}
.hls-a1-flashcards .card-shell{background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 26px; box-shadow: 0 18px 45px rgba(0,0,0,.35);}
.hls-a1-flashcards .brand{display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border);}
.hls-a1-flashcards .brand img{width: 150px; max-height: 70px; object-fit: contain;}
.hls-a1-flashcards .brand-text{color: var(--muted); font-size: 14px;}
.hls-a1-flashcards h1{margin: 0 0 8px; font-size: 30px; color: var(--text);}
.hls-a1-flashcards .topic-box{background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;}
.hls-a1-flashcards .topic-title{font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #93c5fd; margin-bottom: 6px;}
.hls-a1-flashcards .topic-text{font-size: 16px; font-weight: 700; color: var(--text);}
.hls-a1-flashcards .progress-row{display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; color: var(--muted); font-weight: 700; font-size: 14px;}
.hls-a1-flashcards .flashcard-container{perspective: 1200px; margin: 18px 0;}
.hls-a1-flashcards .flashcard{position: relative; min-height: 420px; transform-style: preserve-3d; transition: transform .55s ease; cursor: pointer;}
.hls-a1-flashcards .flashcard.flipped{transform: rotateY(180deg);}
.hls-a1-flashcards .side{position: absolute; inset: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 24px; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between;}
.hls-a1-flashcards .back{transform: rotateY(180deg); background: var(--panel-2);}
.hls-a1-flashcards .word{font-size: 42px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; line-height: 1.08; overflow-wrap: anywhere; word-break: normal;}
.hls-a1-flashcards .meta{display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;}
.hls-a1-flashcards .pill{border: 1px solid var(--accent-border); background: #071326; border-radius: 999px; padding: 6px 10px; color: #dbeafe; font-size: 13px; font-weight: 700;}
.hls-a1-flashcards .section{margin: 12px 0;}
.hls-a1-flashcards .label{font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #93c5fd; font-weight: 800; margin-bottom: 5px;}
.hls-a1-flashcards .meaning{font-size: 19px; color: #f8fafc;}
.hls-a1-flashcards .example{font-size: 18px; color: #dbeafe; font-style: italic;}
.hls-a1-flashcards .italian{font-size: 38px; font-weight: 800; color: #f8fafc; margin: 10px 0; line-height: 1.1;}
.hls-a1-flashcards .note{font-size: 18px; color: #dbeafe;}
.hls-a1-flashcards .quiz-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px;}
.hls-a1-flashcards .quiz-box{background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px;}
.hls-a1-flashcards .quiz-title{font-size: 18px; font-weight: 800; margin-bottom: 12px;}
.hls-a1-flashcards .quiz-prompt{color: #cbd5e1; margin: -4px 0 12px; font-size: 14px;}
.hls-a1-flashcards .options{display: grid; gap: 9px;}
.hls-a1-flashcards .option{border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #071326; color: #f8fafc; transition: .15s ease;}
.hls-a1-flashcards .option:hover{border-color: var(--accent); background: var(--panel-2);}
.hls-a1-flashcards .option label{display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: 100%;}
.hls-a1-flashcards .option input{margin-top: 3px;}
.hls-a1-flashcards .feedback{min-height: 22px; margin-top: 12px; font-size: 15px; font-weight: 800;}
.hls-a1-flashcards .feedback-detail{display: block; margin-top: 4px; font-weight: 400; color: #dbeafe;}
.hls-a1-flashcards .correct{color: var(--ok);}
.hls-a1-flashcards .incorrect{color: var(--bad);}
.hls-a1-flashcards .warn{color: var(--warn);}
.hls-a1-flashcards .controls{display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px;}
.hls-a1-flashcards button{border: none; border-radius: 10px; padding: 12px 18px; font-size: 15px; cursor: pointer; font-weight: 700;}
.hls-a1-flashcards .primary{background: #2563eb; color: #fff;}
.hls-a1-flashcards .primary:hover{background: #1d4ed8;}
.hls-a1-flashcards .secondary{background: #1e293b; color: #f8fafc;}
.hls-a1-flashcards .secondary:hover{background: #334155;}
.hls-a1-flashcards .known{background: #166534; color: #fff;}
.hls-a1-flashcards .review{background: #92400e; color: #fff;}
.hls-a1-flashcards .summary{margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); display: none;}
.hls-a1-flashcards .summary h2{margin: 0 0 10px; font-size: 20px;}
.hls-a1-flashcards .summary-grid{display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 12px 0;}
.hls-a1-flashcards .summary-item{border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: #071326;}
.hls-a1-flashcards .summary-label{color: #93c5fd; font-size: 12px; text-transform: uppercase; font-weight: 800;}
.hls-a1-flashcards .summary-number{font-size: 24px; font-weight: 800;}
.hls-a1-flashcards .word-list{color: #dbeafe; margin-top: 8px;}
.hls-a1-flashcards .footer{margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; text-align: center;}
.hls-a1-flashcards .audio-inline-row{display: flex; align-items: flex-start; gap: 10px; width: 100%;}
.hls-a1-flashcards .audio-inline-row .word,.hls-a1-flashcards .audio-inline-row .verb,.hls-a1-flashcards .audio-inline-row .example{flex: 1; min-width: 0;}
.hls-a1-flashcards .audio-mini{flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--accent-border); background: #16365f; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; box-shadow: 0 4px 10px rgba(0,0,0,.18);}
.hls-a1-flashcards .audio-mini:hover{background: #1d4f88; border-color: #60a5fa; transform: translateY(-1px);}
.hls-a1-flashcards .audio-mini:focus-visible{outline: 3px solid rgba(96,165,250,.45); outline-offset: 2px;}
.hls-a1-flashcards .example-audio-row{align-items: center;}
@media (max-width:700px){.hls-a1-flashcards .audio-mini{width: 36px; height: 36px; font-size: 17px;}}
@media print{
.hls-a1-flashcards .card-shell{background: #fff; color: #111827; box-shadow: none; border: none; padding: 0;}
.hls-a1-flashcards h1,.hls-a1-flashcards .word,.hls-a1-flashcards .meaning,.hls-a1-flashcards .italian,.hls-a1-flashcards .quiz-title,.hls-a1-flashcards .summary-number{color: #111827;}
.hls-a1-flashcards .side,.hls-a1-flashcards .quiz-box,.hls-a1-flashcards .summary,.hls-a1-flashcards .summary-item,.hls-a1-flashcards .option,.hls-a1-flashcards .topic-box{background: #fff; color: #111827; border-color: #d1d5db; position: relative;}
.hls-a1-flashcards .flashcard{min-height: auto; transform: none !important;}
.hls-a1-flashcards .back{display: none;}
.hls-a1-flashcards .controls,.hls-a1-flashcards .feedback,.hls-a1-flashcards .quiz-grid{display: none !important;}
.hls-a1-flashcards .footer,.hls-a1-flashcards .brand-text,.hls-a1-flashcards .progress-row{color: #4b5563;}}
@media (max-width:800px){.hls-a1-flashcards .quiz-grid{grid-template-columns: 1fr;}}
@media (max-width:700px){
.hls-a1-flashcards .card-shell{padding: 18px;}
.hls-a1-flashcards .brand{align-items: flex-start; flex-direction: column;}
.hls-a1-flashcards .brand img{width: 130px;}
.hls-a1-flashcards .word{font-size: 30px;}
.hls-a1-flashcards .flashcard{min-height: 520px;}
.hls-a1-flashcards .summary-grid{grid-template-columns: 1fr 1fr;}}
.hls-a1-flashcards .topic-caption{margin-top: 6px; color: #cbd5e1; font-size: 13px; font-weight: 400;}
.hls-a1-flashcards .pack-topic-selector{display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; color: #cbd5e1; font-size: 14px; font-weight: 700;}
.hls-a1-flashcards .pack-topic-selector select{min-width: min(100%,280px); border: 1px solid var(--border); border-radius: 10px; background: #102a4c; color: #f8fafc; padding: 11px 14px; font: inherit; cursor: pointer;}
.hls-a1-flashcards .pack-topic-selector select:focus-visible{outline: 3px solid rgba(96,165,250,.5); outline-offset: 2px;}
.hls-a1-flashcards .pack-topic-selector #topicCount{font-size: 12px; font-weight: 400; color: #93c5fd;}
.hls-a1-flashcards #flashcard:focus-visible{outline: 3px solid #60a5fa; outline-offset: 3px;}
.hls-a1-flashcards .flashcard .back .italian{font-size: clamp(24px,4vw,36px);}
.hls-a1-flashcards .flashcard .back .note{font-size: 16px;}
.hls-a1-flashcards .flashcard .back .meaning{font-size: 16px;}
@media (max-width:700px){.hls-a1-flashcards .flashcard{min-height: 560px;}
.hls-a1-flashcards .side{padding: 17px;}
.hls-a1-flashcards .topic-caption{font-size: 12px;}
.hls-a1-flashcards .pack-topic-selector{align-items: stretch; flex-direction: column; gap: 7px;}
.hls-a1-flashcards .pack-topic-selector select{width: 100%;}}
@media (prefers-reduced-motion:reduce){.hls-a1-flashcards .flashcard{transition: none;}}
body{margin:0;padding:0;background:#071326;color:#f8fafc;line-height:1.45}
.hls-a1-page{max-width:1030px;margin:0 auto;padding:24px 24px 52px}
.hls-a1-flashcards{font-family:Arial,Helvetica,sans-serif;line-height:1.45}
.hls-a1-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px;color:#cbd5e1;font:600 13px/1.5 Arial,sans-serif}
.hls-a1-breadcrumb a{color:#aadeff;text-underline-offset:3px}
.hls-a1-breadcrumb a:focus-visible{outline:3px solid #60a5fa;outline-offset:4px}
.hls-a1-flashcards .pack-heading{margin-bottom:20px}
.hls-a1-flashcards .pack-kicker{color:#93c5fd;font-size:13px;font-weight:700;margin-bottom:7px}
.hls-a1-flashcards .pack-heading h1{margin:0;font-size:clamp(25px,5vw,34px)}
.hls-a1-flashcards .flashcard{display:grid}
.hls-a1-flashcards .side{position:relative;inset:auto;grid-area:1/1;min-width:0;-webkit-backface-visibility:hidden}
.hls-a1-flashcards .side[aria-hidden="true"]{pointer-events:none}
.hls-a1-flashcards .flip-control{display:flex;justify-content:center;margin:12px 0 22px}
.hls-a1-flashcards button:focus-visible,.hls-a1-flashcards input:focus-visible{outline:3px solid #60a5fa;outline-offset:3px}
.hls-a1-flashcards .storage-status{padding:12px;border:1px solid #fde68a;border-radius:10px;color:#fde68a}
.hls-a1-flashcards .controls button{flex:1 1 150px}
@media(max-width:700px){.hls-a1-page{padding:18px 12px 40px}.hls-a1-flashcards .card-shell{padding:15px}.hls-a1-flashcards .summary-grid{grid-template-columns:1fr 1fr}.hls-a1-flashcards .side{overflow-wrap:anywhere}}
@media print{body{background:white}.hls-a1-breadcrumb,.hls-a1-flashcards .flip-control,.hls-a1-flashcards .audio-mini{display:none!important}.hls-a1-page{padding:0}.hls-a1-flashcards .side{display:block}.hls-a1-flashcards .back{display:none}}