*{box-sizing:border-box}html,body{min-height:100%;margin:0;padding:0}body{color:#fff;background:#09090f;font-family:Arial,sans-serif}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}#root{min-height:100vh}.primary-button,.secondary-button{cursor:pointer;border-radius:18px;width:100%;padding:18px 24px;font-size:20px;font-weight:700;transition:transform .15s,opacity .15s}.primary-button{color:#fff;background:linear-gradient(135deg,#8b5cf6,#6366f1);border:none;box-shadow:0 10px 30px #6366f140}.secondary-button{color:#fff;background:#ffffff0f;border:1px solid #ffffff1a}.primary-button:active,.secondary-button:active,.back-button:active{transform:scale(.98)}.primary-button:disabled,.secondary-button:disabled{opacity:.5;cursor:default}.back-button{color:#aaa6ba;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:12px;justify-content:center;align-items:center;width:auto;padding:10px 16px;font-size:16px;font-weight:600;transition:transform .15s,background .15s,color .15s;display:inline-flex}.back-button:hover{color:#fff;background:#ffffff1a}.page-header{text-align:center;width:100%}.page-header h1{margin:0;font-size:40px;font-weight:800}.page-header p{color:#aaa6ba;margin:14px 0 0;font-size:18px;line-height:1.4}.home{background:radial-gradient(circle at 50% 0,#6366f133,#0000 45%);width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:40px 20px}.home h1{margin:0 0 8px;font-size:42px;font-weight:800}.home h2{color:#aaa6ba;margin:0 0 24px;font-size:20px;font-weight:500}.book-list{flex-direction:column;gap:14px;margin-top:24px;display:flex}.book{cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:22px;padding:22px;transition:transform .15s,background .15s;position:relative}.book:hover{background:#ffffff14;transform:translateY(-2px)}.book h3{margin:0;padding-right:70px;font-size:22px}.book button{color:#aaa6ba;cursor:pointer;background:#ffffff14;border:none;border-radius:10px;padding:8px 12px;position:absolute;top:50%;right:18px;transform:translateY(-50%)}.book button:hover{color:#fff;background:#ffffff24}.add-book{background:radial-gradient(circle at 50% 0,#6366f133,#0000 45%);width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:40px 20px}.add-book h1{margin:0 0 30px;font-size:40px}.add-book form{flex-direction:column;gap:18px;display:flex}.add-book label{color:#aaa6ba;flex-direction:column;gap:8px;font-size:15px;display:flex}.add-book input{color:#fff;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:16px;outline:none;width:100%;padding:17px;font-size:18px}.add-book input:focus{border-color:#8b5cf6}.book-page{background:radial-gradient(circle at 50% 0,#6366f133,#0000 45%);width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:28px 20px 40px}.book-page-header{margin:30px 0}.book-page-header h1{margin:0;font-size:40px;font-weight:800}.book-page-actions{flex-direction:column;gap:14px;display:flex}.scan-page{background:radial-gradient(circle at 50% 0,#6366f133,#0000 45%);flex-direction:column;gap:24px;width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:28px 20px 40px;display:flex}.scan-page>.back-button{align-self:flex-start}.scan-interface{flex-direction:column;gap:18px;width:100%;display:flex}.camera-container{background:#000;border:1px solid #ffffff1a;border-radius:28px;width:100%;line-height:0;overflow:hidden}.scan-video{object-fit:contain;background:#000;width:100%;max-width:100%;height:auto;display:block}.scan-count{text-align:center;color:#aaa6ba;margin:0;font-size:18px}.scan-message{text-align:center;color:#c7c2d4;margin:0;font-size:16px}.flashcards{background:radial-gradient(circle at 50% 0,#6366f133,#0000 45%);flex-direction:column;align-items:center;gap:24px;width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:28px 20px 40px;display:flex}.flashcards-navigation{justify-content:flex-start;width:100%;display:flex}.flashcards-header{text-align:center;width:100%}.flashcards-header h1{margin:0;font-size:38px;font-weight:800}.flashcards-header p{color:#aaa6ba;margin:10px 0 0;font-size:16px;line-height:1.4}.progress-container{width:100%}.progress-info{color:#aaa6ba;justify-content:flex-end;margin-bottom:8px;font-size:14px;display:flex}.progress-bar{background:#ffffff14;border-radius:999px;width:100%;height:7px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#8b5cf6,#6366f1);border-radius:999px;height:100%;transition:width .25s}.card-scene{perspective:1200px;cursor:pointer;outline:none;width:100%;height:min(62vh,430px);min-height:320px}.flashcard{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s;position:relative}.card-scene.flipped .flashcard{transform:rotateY(180deg)}.flashcard-face{backface-visibility:hidden;background:linear-gradient(145deg,#8b5cf62e,#ffffff0a);border:1px solid #ffffff1a;border-radius:30px;flex-direction:column;justify-content:center;align-items:center;padding:30px;display:flex;position:absolute;inset:0;box-shadow:0 25px 70px #00000059,inset 0 1px #ffffff0d}.flashcard-back{transform:rotateY(180deg)}.card-label{color:#aaa6ba;text-transform:uppercase;letter-spacing:2px;margin-bottom:25px;font-size:14px;font-weight:700}.flashcard-face h2{text-align:center;overflow-wrap:anywhere;margin:0;font-size:clamp(38px,10vw,64px);line-height:1.1}.card-hint{color:#777384;margin:0;font-size:14px;position:absolute;bottom:28px}.actions{flex-direction:column;gap:12px;width:100%;display:flex}.empty-state{text-align:center;color:#aaa6ba;background:#ffffff0a;border:1px solid #ffffff14;border-radius:24px;width:100%;padding:40px 20px}.empty-state p{margin:0}.register{background:radial-gradient(circle at 50% 20%,#6366f140,#0000 50%);flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:40px 20px;display:flex}.register h1{text-align:center;margin:0 0 12px;font-size:42px}.register p{text-align:center;color:#aaa6ba;margin:0 0 35px;font-size:18px}@media (width<=600px){.scan-page,.flashcards,.home,.add-book,.book-page,.register{padding-left:18px;padding-right:18px}.page-header h1{font-size:36px}.page-header p{font-size:17px}.card-scene{height:58vh;min-height:300px}.flashcard-face{padding:24px}.flashcard-face h2{font-size:clamp(36px,10vw,56px)}}.app-shell{width:100%;min-height:100vh}.page-center{justify-content:center;align-items:center;display:flex}.register-page{text-align:center;background:radial-gradient(circle at 50% 20%,#8b5cf638,#0000 55%);flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:480px;min-height:100vh;padding:40px 24px;display:flex}.register-logo{color:#fff;background:linear-gradient(135deg,#8b5cf6,#6366f1);border-radius:24px;justify-content:center;align-items:center;width:76px;height:76px;margin-bottom:28px;font-size:42px;font-weight:800;display:flex;box-shadow:0 20px 50px #6366f14d}.register-page h1{color:#fff;letter-spacing:-1.5px;margin:0;font-size:clamp(36px,9vw,52px);font-weight:800;line-height:1.08}.register-page p{color:#aaa6ba;max-width:420px;margin:20px 0 32px;font-size:18px;line-height:1.55}.register-page .primary-button{max-width:420px}@media (width<=600px){.register-page{padding:32px 20px}.register-logo{border-radius:21px;width:68px;height:68px;margin-bottom:24px;font-size:38px}.register-page h1{font-size:38px}.register-page p{font-size:17px}}