body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{font-family:Bricolage Grotesque,sans-serif}code{font-family:Bricolage Grotesque,monospace}::-webkit-scrollbar{height:5px;width:5px}::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#888}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-track:hover{background:#e1e1e1}.home-feed{box-sizing:border-box;display:flex;flex-direction:column;gap:16px;margin:0 auto;max-width:100%;padding:20px}.pending-section{background-color:#ebebeb;border-radius:10px;box-shadow:0 8px 20px #0a14320a;padding:12px}.pending-section h3{align-items:center;display:flex;font-size:16px;gap:8px;margin:0}.badge{background:#ff5b5b;border-radius:999px;color:#fff;display:inline-block;font-size:12px;padding:4px 8px}.pending-list{display:flex;flex-direction:column;gap:8px}.pending-item{align-items:center;background:#fbfcff;border:1px solid #eef3ff;border-radius:8px;display:flex;justify-content:space-between;padding:10px}.pending-toggle{cursor:pointer}.pending-item-primary{align-items:center;display:flex;gap:12px}.pending-item .actions button{border:none;border-radius:8px;cursor:pointer;margin-left:6px;padding:6px 10px}.pending-item .actions button:first-child{margin-left:0}.pending-item .actions button.approve{background:linear-gradient(90deg,#3b82f6,#5b7cff);color:#fff}.pending-item .actions button.reject{background:#ffe9e9;color:#b33}.composer{background:#fff;border-radius:10px;box-shadow:0 8px 20px #0a14320f;display:flex;flex-direction:column;gap:10px;margin-bottom:18px;padding:14px}.composer input,.composer textarea{border:1px solid #edf0f5;border-radius:8px;padding:10px}.composer textarea{min-height:84px}.composer button{align-self:flex-end;background:#4b6ef6;border:none;border-radius:8px;box-shadow:0 6px 14px #4b6ef629;color:#fff;padding:8px 14px}.new-post-btn{background:#2b6ef6;border:none;border-radius:8px;color:#fff;cursor:pointer;margin-bottom:12px;padding:8px 12px}.section-post-composer{background:#ebebeb;border-radius:12px;box-shadow:0 8px 20px #0a14280d;gap:12px;margin-top:14px}.own-post-label{font-size:16px;font-weight:700;margin-bottom:10px}.inline-composer{align-items:center;background:#ebebeb;border-radius:12px;display:flex;gap:12px;margin:0;padding:12px 14px}.inline-composer-left{align-items:center;background:#eef4ff;border-radius:999px;color:#2b56f6;display:flex;flex-shrink:0;font-weight:700;height:70px;justify-content:center;width:70px}.inline-composer-body{align-items:center;cursor:pointer;display:flex;flex-direction:row;gap:8px;width:100%}.inline-composer-body input[readonly]{background:#f8fafc;border:1px solid #eef3ff;border-radius:10px;color:#6b7280;flex:1 1;font-size:14px;min-width:0;padding:10px 12px}.inline-composer-body input[readonly]::placeholder{color:#9aa3b2}.inline-composer-actions{align-items:center;display:flex;flex:0 0 auto;gap:8px;margin-top:0}.icon-btn-post{align-items:center;background:#0000;border:1px solid #0000;border-radius:8px;color:#5f6b7a;cursor:pointer;display:inline-flex;font-size:14px;gap:8px;padding:8px 10px;white-space:nowrap}.icon-btn-post img{display:inline-block}.icon-btn-post:hover{background:#f3f6ff;border-color:#e2e8ff;transform:translateY(-1px)}.line-post{border:none;border-top:1px solid #747474}.post-ct-detail{margin-top:15px}.post-ct-detail p{margin-top:0!important}@media(max-width:600px){.inline-composer{gap:8px;padding:10px}.inline-composer-left{height:40px;width:40px}.icon-btn{height:36px;width:36px}}.posts{display:flex;flex-direction:column;gap:14px}.home-feed .posts{min-height:60vh}.post{border-radius:12px;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}.post,.post *{-webkit-tap-highlight-color:transparent}.post:focus,.post:focus-within{outline:none}.post-actions button:focus{box-shadow:0 0 0 3px #3b82f62e;outline:none}.post-row{gap:16px}.post-comments,.post-row{align-items:stretch;display:flex}.post-comments{flex:1 1;flex-direction:column;gap:8px;max-height:100%;overflow:hidden}.comment-list{flex:1 1;overflow-y:auto}.comment-list::-webkit-scrollbar{width:6px}.comment-list::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:3px}.post-main{background-color:#ebebeb;border-radius:10px;display:flex;flex:1 1 auto;flex-direction:column;height:auto;min-height:0;padding:20px;width:40%}.comment-box-side{margin-top:8px}.post .meta{color:#7a7f86;font-size:12px}.post .content{color:#222;line-height:1.5;margin-top:8px;max-height:4.5em;overflow:hidden;text-overflow:ellipsis}.post.detail .content{max-height:none;overflow:visible}.post-actions{align-items:center;display:flex;gap:8px;margin-top:12px}.post-actions button{background:#f3f5fb;border:none;border-radius:8px;cursor:pointer;padding:6px 12px}.post-actions button.liked{background:linear-gradient(90deg,#ef4444,#dc2626);box-shadow:0 6px 14px #dc26262e;color:#fff}.post-actions button.liked:hover{filter:brightness(.95)}.comments{margin-top:12px}.comment{border-top:1px dashed #f1f3f6}.comment .user{font-weight:600;margin-right:6px}.comments.full h4{margin:8px 0}.comments.full .comment{border-top:1px solid #f3f4f6;padding:10px 0}.comments.full{border-top:1px solid #eef2f6;margin-top:22px;padding-top:12px}.comment{padding:10px 0}.comment-box{display:flex;gap:8px}.comment-box input{border:1px solid #edf0f5;border-radius:8px;flex:1 1;padding:8px}.comment-box button{background:#e9eefc;border:none;border-radius:8px;color:#2b56f6;padding:6px 10px}.more{color:#3b82f6;cursor:pointer;font-size:13px}.comment-panel-h-act{align-items:center;display:flex;justify-content:space-between}.post.detail{background:#fff;border-radius:12px;box-shadow:0 12px 36px #0a14280f;box-sizing:border-box;margin:0 auto;max-width:none;padding:28px;width:100%}.post.detail .meta{color:#8b95a3;font-size:13px;margin-top:6px}.post.detail header h2{font-size:22px;line-height:1.25;margin:0 0 6px}.post.detail .content{color:#1f2937;font-size:16px;line-height:1.75;margin-top:14px}.error{background:#fff3f2;border:1px solid #ffd6d1;border-radius:8px;color:#7a2c2c;margin-bottom:12px;padding:10px}.modal-backdrop{align-items:center;background:#0c121e73;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:12000}.modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px #0a142866;display:flex;flex-direction:column;gap:10px;max-width:720px;padding:18px;width:100%}.modal-body{padding-top:6px}.modal .muted{margin-top:6px}.modal .comment{padding:6px 0}.modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.modal .modal-actions .btn{min-width:96px}.modal .approve{background:linear-gradient(90deg,#16a34a,#22c55e);color:#fff}.modal .reject{background:#ffe9e9;color:#b33}.modal input,.modal textarea{border:1px solid #edf0f5;border-radius:8px;padding:10px}.modal textarea{min-height:120px}.attachments{display:flex;flex-direction:column;gap:8px}.attachment-input input[type=file]{display:none}.attachment-input{align-items:center;background:#f3f6ff;border-radius:8px;color:#234;cursor:pointer;display:inline-flex;gap:8px;padding:8px 10px}.previews{display:flex;flex-wrap:wrap;gap:8px}.preview{align-items:center;background:#f6f7fb;border-radius:8px;display:flex;height:90px;justify-content:center;overflow:hidden;position:relative;width:120px}.preview img,.preview video{display:block;height:100%;object-fit:cover;width:100%}.preview .file-name{color:#444;font-size:13px;padding:6px}.preview .remove{background:#00000080;border:none;border-radius:999px;color:#fff;cursor:pointer;padding:6px;position:absolute;right:6px;top:6px}.attachment-grid{align-items:stretch;display:flex;gap:8px;margin-top:12px}.attachment-grid .att{align-items:center;background:#f3f4f6;border-radius:12px;cursor:pointer;display:flex;flex:1 1;height:160px;justify-content:center;overflow:hidden;position:relative}.attachment-grid.single .att{flex-basis:100%;height:360px}.attachment-grid.two .att{flex-basis:calc(50% - 4px);height:280px}.attachment-grid.three .att{flex-basis:calc(33.33333% - 5.333px)}.attachment-grid .att img,.attachment-grid .att video{display:block;height:100%;object-fit:cover;width:100%}.attachment-grid .att.more{position:relative}.att-overlay .overlay-count,.attachment-grid .att.more .overlay-count{align-items:center;background:#00000073;color:#fff;display:flex;font-size:20px;font-weight:700;inset:0;justify-content:center;position:absolute}@media (max-width:600px){.attachment-grid{flex-direction:column;gap:10px}}.lb-backdrop{background:#000c;inset:0;justify-content:center;position:fixed;z-index:12050}.lb-backdrop,.lb-inner{align-items:center;display:flex}.lb-inner{background:#0000;flex-direction:column;max-height:90vh;max-width:90vw;position:relative;width:90%}.lb-media{align-items:center;display:flex;height:calc(90vh - 80px);justify-content:center;width:100%}.lb-media img,.lb-media video{max-height:100%;max-width:100%}.lb-close{background:#0009;border:none;border-radius:6px;color:#fff;cursor:pointer;padding:8px;position:absolute;right:8px;top:8px}.lb-controls{align-items:center;color:#fff;display:flex;gap:12px;margin-top:8px}.lb-counter{color:#fff}.attachments.drag-over{border:2px dashed #2b6ef6;border-radius:10px;padding:8px}.drop-hint{color:#3b82f6;font-size:14px;padding:8px}.upload-progress{background:#eef3ff;border-radius:6px;height:8px;margin-top:8px;overflow:hidden}.upload-progress .bar{background:linear-gradient(90deg,#3b82f6,#6ea1ff);height:100%;transition:width .2s ease;width:0}.modal-actions{gap:8px}.btn{padding:8px 12px}.btn-muted{background:#f3f5f8;color:#333}.btn-primary{background:#2b6ef6}@media(max-width:900px){.home-feed{padding:12px}.post-row{flex-direction:column}.post-comments{flex:none;width:100%}.post.detail{padding:16px}}@media(max-width:600px){.home-feed{padding:12px}.composer textarea{min-height:72px}}@media(max-width:520px){.home-feed{padding:10px}.pending-item{align-items:stretch;flex-direction:column;gap:8px}.pending-item .actions{display:flex;justify-content:flex-end}.post{border-radius:10px;padding:12px}.post .content{max-height:3.6em}.post-actions{flex-wrap:wrap;gap:6px}.composer{padding:12px}.composer button,.new-post-btn{width:100%}.comment-box{margin-left:0;width:100%}.comment-box input{flex:1 1;width:100%}.modal{margin:12px}.home-feed{max-width:100%;padding-left:calc(env(safe-area-inset-left, 16px));padding-right:calc(env(safe-area-inset-right, 16px))}.composer,.pending-section,.post,body{font-size:16px}.post{border-radius:14px;padding:14px}.post .content{max-height:5.5em}.post.detail{padding:18px}.composer button,.new-post-btn{border-radius:12px;font-size:16px;padding:12px}.post-actions button{padding:10px 14px}.comment-box input{padding:10px}.post{margin-bottom:12px}.composer,.pending-section{padding:14px}.new-post-btn{display:block;width:100%}}.post-header{justify-content:space-between;margin-bottom:10px}.post-author,.post-header{align-items:center;display:flex}.post-author{gap:12px}.post-avt{font-size:18px;height:56px;width:56px}.post-avt,.post-avt img{align-items:center;color:#2b56f6;display:flex;font-weight:700;justify-content:center}.post-avt img{background:#eef4ff;border-radius:999px;flex-shrink:0;height:44px;width:44px}.post-author-meta{line-height:1}.post-author-name{font-size:16px;font-weight:700;margin:0 0 8px}.post-title{font-size:18px;margin:6px 0 0}.comment-list{flex:1 1 auto;min-height:0;overflow:auto;padding-right:6px}.comment{border-bottom:1px solid #eef2f7cc;padding:8px 0}.comment-row{align-items:flex-start;display:flex;gap:8px}.comment-avt{border-radius:999px;flex:0 0 32px;height:32px;object-fit:cover;width:32px}.comment-body{flex:1 1 auto;word-break:break-word}.comment-box-panel{background:#fff;border:1px solid #eef2f7;border-radius:12px;display:flex;flex-direction:column;gap:12px;height:100%;padding:12px}.post-main{padding-right:16px}@media (max-width:900px){.comment-box-panel{border-left:none;padding-left:12px;padding-right:12px}.post-row{flex-direction:column}.post-comments{flex:1 1;width:100%}.attachment-grid .att{height:160px}}@media (max-width:520px){.post-comments{display:block;flex:none;width:100%}.post-main{padding:12px}.post .content{font-size:15px;line-height:1.6}.post-actions{align-items:stretch;flex-direction:column}.post-actions button{font-size:15px;padding:12px;width:120px}.composer,.inline-composer,.section-post-composer{padding:12px}.composer button,.new-post-btn{font-size:16px;padding:12px;width:100%}.attachment-grid{flex-direction:column;gap:10px}.lb-inner,.modal{margin:8px;max-width:100%}.inline-composer-left{height:48px;width:48px}.post-header{align-items:flex-start;flex-direction:column;gap:8px}.post-author{align-items:center;gap:10px;width:100%}.post-avt img{height:40px;width:40px}.post-author-meta{display:flex;flex-direction:column;gap:2px}.post-author-name{font-size:15px}.post-date{color:#6b7280;font-size:13px}.post{padding:8px}.post,.post-main{box-sizing:border-box;width:100%}.post-main{padding:10px}.attachment-grid{grid-gap:8px;align-items:stretch;display:grid;gap:8px;margin-top:12px}.attachment-grid .att{aspect-ratio:16/9;border-radius:10px;display:block;height:auto;overflow:hidden;padding:0}.post-actions{flex-direction:row;gap:8px;width:100px}.post-actions button{flex:1 1 auto;font-size:15px;min-width:0;padding:5px}.comment-list{max-height:120px;overflow-y:auto;padding-right:6px}.post-comments.student-small .comment-list{max-height:none;overflow:visible}.comment{font-size:14px;padding:8px 0}.comment .user{font-weight:700}.comment-box{gap:8px;width:100%}.comment-box input{flex:1 1}.post .content{font-size:15px;line-height:1.6}}@media (max-width:480px){.attachment-grid .att{height:180px;width:100%}.post-main{padding:12px}}.content.clamp-2{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.att-overlay{align-items:center;display:flex;justify-content:center;overflow:hidden;position:relative}.att-overlay img{height:100%;object-fit:cover;width:100%}.overlay-count{align-items:center;background:#00000073;color:#fff;display:flex;font-size:18px;font-weight:700;inset:0;justify-content:center;position:absolute}.attachment-grid .att-large{flex:2 1 60%}.attachment-grid .att-large,.attachment-grid .att-side{border-radius:12px;height:200px;overflow:hidden;position:relative}.attachment-grid .att-side{align-items:center;display:flex;flex:1 1 40%;justify-content:center}.attachment-grid .att-large img,.attachment-grid .att-large video,.attachment-grid .att-side img,.attachment-grid .att-side video{display:block;height:100%;object-fit:cover;width:100%}.attachment-grid .att-side .overlay-count{background:#00000073;font-size:20px}@media (max-width:520px){.student-mobile-layout{display:flex;flex-direction:column;gap:8px}.student-mobile-layout .att-top{border-radius:12px;height:180px;overflow:hidden;width:100%}.student-mobile-layout .att-top img,.student-mobile-layout .att-top video{display:block;height:100%;object-fit:cover;width:100%}.student-mobile-layout .att-small-full{background:#f6f7fb;border-radius:10px;height:150px;margin-top:6px;overflow:hidden;width:100%}.student-mobile-layout .att-small-full img,.student-mobile-layout .att-small-full video{display:block;height:100%;object-fit:cover;width:100%}.att-grid-bottom{grid-gap:8px;align-items:stretch;display:grid;gap:8px;grid-template-columns:1fr 1fr}.att-grid-bottom.two-cols{align-items:stretch;gap:8px;grid-template-columns:1fr 1fr;width:100%}.att-col-left{display:flex;flex-direction:column;gap:8px}.att-col-right{align-items:center;background:#000;border-radius:12px;display:flex;justify-content:center;overflow:hidden;position:relative}.att-small{background:#f6f7fb;border-radius:8px;height:120px;overflow:hidden;width:100%}.att-col-right img,.att-col-right video,.att-small img,.att-small video{display:block;height:100%;object-fit:cover;width:100%}.att-col-right .overlay-count{align-items:center;background:#0000008c;color:#fff;display:flex;font-size:16px;font-weight:600;inset:0;justify-content:center;position:absolute}.att-overlay{position:relative}.att-overlay .overlay-count{align-items:center;background:#00000073;color:#fff;display:flex;font-size:20px;font-weight:700;inset:0;justify-content:center;position:absolute}}.see-more-btn{background:#0000;border:none;color:#3b82f6;cursor:pointer;padding:0}*,:after,:before{box-sizing:border-box}.attachment-grid .att,.comment-list,.post-comments,.post-main,.post-row>*{min-width:0}.modal-overlay{background:#00000080;bottom:0;left:0;right:0;top:0;z-index:9999}.modal-box{box-shadow:0 6px 24px #0003;max-width:90%;padding:18px;width:420px}.modal-body{margin-top:12px}.modal-body p{margin:0 0 12px}.modal-body button{border-radius:4px;cursor:pointer;padding:8px 12px}.lesson-progress-bar{background-color:#ebebeb;border-radius:15px;display:flex;margin-bottom:24px;padding:10px}.progress-label{font-size:14px;font-style:italic;font-weight:600;margin-top:6px}.progress-title{font-size:18px;font-weight:700;margin-bottom:12px}.progress-bar-outer{background:#c3cada;border-radius:8px;height:16px;overflow:hidden;width:100%}.progress-bar-inner{background:#009908;border-radius:8px;height:100%;transition:width .4s}.missing-attendance-thumbs{align-items:center;display:flex;gap:8px}.missing-attendance-thumb{background:#0000;border:none;border-radius:8px;box-shadow:0 6px 12px #00000014;cursor:pointer;overflow:hidden;padding:0;width:200px}.missing-attendance-thumb img{display:block;height:100%;object-fit:cover;width:100%}.missing-thumb-placeholder{align-items:center;background:#f3f4f6;color:#374151;display:flex;font-weight:700;height:100%;justify-content:center;width:100%}.lesson-progress-content{display:flex;flex:1 1;flex-direction:column;justify-content:center;margin-left:50px}.lesson-page{box-sizing:border-box;gap:16px;width:100%}.lesson-controls{background-color:#ebebeb;border-radius:16px;margin:0 0 30px;padding:15px;width:100%}.lesson-main.three-card{grid-gap:20px;box-sizing:border-box;display:grid;flex:1 1;gap:20px;grid-template-columns:1.85fr 1fr;width:100%}.lesson-page .lesson-main{min-height:60vh}.card{box-shadow:0 6px 18px #0000000f}.card h4{margin:0 0 8px}.card-weeks .week-buttons{display:flex;flex-direction:column;gap:8px}.date{background:#f7f9fc;border:none;border-radius:6px;padding:8px}.date.active{background:#e9f2ff}.card-title strong{display:block;font-size:16px}.card-summary{padding:20px!important}.summary-text{padding-left:25px}.summary-list{margin:0}.summary-list li{margin:6px 0}.card-activities{margin-top:25px}.act-topic-panel{margin-bottom:6px;margin-left:25px}.act-item-list{margin:0}.act-item-list li{margin:4px 0}.action-lessons{display:flex;gap:8px;margin-bottom:12px}.lesson-title{display:block;font-size:16px;font-weight:700;margin-bottom:8px}.lesson-iframe{border:2px solid #3c00ff;border-radius:16px;box-shadow:0 4px 12px #0000001a;height:33vh;width:100%}.teacher-month-grid{grid-gap:16px;align-items:stretch;display:grid;gap:16px;grid-template-columns:repeat(4,1fr);width:100%}.teacher-month-grid .month-card{background:#fff;border-radius:10px;box-shadow:0 6px 18px #0000000f;cursor:pointer;justify-content:space-between;min-height:110px;padding:14px}.month-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));max-width:100%;width:100%}.month-grid,.month-grid .month-card{align-items:stretch;box-sizing:border-box}.month-grid .month-card{display:flex;flex:1 1 auto;flex-direction:column;justify-content:space-between;min-width:0}.month-card-title{color:#111;font-size:15px;font-weight:700}.month-card-meta{color:#666;font-size:13px;margin-top:8px}.page-view>.lesson-page{box-sizing:border-box;width:100%}.class-info{padding:12px 24px!important}@media (max-width:520px){.lesson-progress-bar{display:none!important}}.teacher-month-grid .month-card-img{border-radius:8px;display:block;height:160px;object-fit:cover;width:100%}.title-list-lessons{font-size:20px;font-weight:700;margin-bottom:16px}.month-card-placeholder{align-items:center;aspect-ratio:16/9;background:linear-gradient(180deg,#f4f6fb,#eef3ff);border-radius:8px;color:#475569;display:flex;font-weight:600;justify-content:center;padding:0 15px;width:100%}.month-card.student-mobile{align-items:center;border-radius:16px;box-shadow:0 4px 12px #0000001a;display:flex;flex-direction:row;gap:12px;padding:5px}.month-card.student-mobile .month-card-thumb{flex:0 0 60%;max-width:60%}.month-card.student-mobile .month-card-thumb .month-card-placeholder,.month-card.student-mobile .month-card-thumb iframe{aspect-ratio:16/9;border-radius:8px;height:auto;width:100%}.month-card.student-mobile .month-card-info-right{display:flex;flex:1 1 60%;flex-direction:column;gap:6px}.month-card.student-mobile .attendance-status{font-weight:700}.month-card.student-mobile .attendance-status.present{color:#10b981}.month-card.student-mobile .attendance-status.absent{color:#ef4444}.month-card.student-mobile .attendance-status.unknown{color:#6b7280}.month-card.student-mobile .month-card-row{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}.month-card.student-mobile .month-card-date{color:#6b7280;font-size:13px}.month-card-info{margin-top:8px}.back{background:#0000;background-color:#ebebeb;border:none;color:#3b82f6;cursor:pointer;padding:12px}.month-card-iframe-wrapper{aspect-ratio:16/9;border-radius:12px;overflow:hidden;position:relative;width:100%}.month-card-iframe-wrapper iframe{border:none;height:100%;left:0;position:absolute;top:0;transform-origin:0 0;width:100%}.iframe-overlay{background:#0000;cursor:pointer;inset:0;position:absolute;z-index:2}.month-card iframe{border:none}.teacher-month-grid .month-card{align-items:stretch;display:flex;flex-direction:column}.label-inline{display:inline-block}.select-grade{align-items:center;display:flex;gap:8px;gap:10px;position:relative}.select-grade .filter-select{-webkit-appearance:none;appearance:none;border:1px solid #d1d5db;border-radius:10px;box-shadow:0 6px 14px #1018280f;color:#0f172a;cursor:pointer;min-width:220px;padding:8px 36px 8px 12px;transition:border-color .15s ease,box-shadow .15s ease,transform 80ms ease}.select-grade .filter-select:hover{border-color:#9ca3af}.select-grade .filter-select:focus{border-color:#2563eb;box-shadow:0 6px 20px #2563eb1f;outline:none}.select-grade .filter-select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat}@media (max-width:900px){.select-grade .filter-select{min-width:0;width:100%}.select-grade{width:100%}.label-inline{margin-right:6px}}.lesson-title-inline{align-items:center;display:flex;gap:8px;margin-left:15px}.lesson-title-text{margin-left:8px}.card-empty{padding:16px}.topic-list{padding:5px 0 0 15px}@media(max-width:900px){.lesson-page{flex-direction:column}.teacher-month-grid{grid-template-columns:repeat(2,1fr)}.lesson-main.three-card{grid-template-columns:1fr}}@media(max-width:600px){.lesson-page{gap:10px;padding:8px}.lesson-controls{width:100%}.lesson-main.three-card{gap:10px;grid-template-columns:1fr}.card{padding:10px}.lesson-iframe{border-radius:12px;height:46vh}.card-weeks .week-buttons{display:flex;flex-direction:row;gap:8px;overflow:auto}.date{min-width:86px;padding:10px 12px;white-space:nowrap}.action-lessons{justify-content:flex-start}.month-grid{grid-template-columns:1fr!important}.month-card{width:100%}}@media (min-width:500px) and (max-width:708px){.month-grid{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))!important}.month-card{box-sizing:border-box;width:100%}.month-card-iframe-wrapper{aspect-ratio:16/9;height:auto}.month-card-iframe{height:100%;min-height:140px}.month-card-placeholder{min-height:110px;padding:12px}}@media (max-width:520px){.month-grid{grid-template-columns:1fr!important}.month-card{margin-bottom:12px;width:100%}.month-card-iframe-wrapper{aspect-ratio:16/9}.lesson-page{padding-left:calc(env(safe-area-inset-left, 12px));padding-right:calc(env(safe-area-inset-right, 12px))}.lesson-controls{display:block;width:100%}.lesson-main.three-card{grid-template-columns:1fr}.card{border-radius:12px;padding:14px}.lesson-title{font-size:18px}.lesson-iframe{height:64vh}.date{min-width:92px;padding:12px 14px}.card-weeks .week-buttons{-webkit-overflow-scrolling:touch;gap:10px;overflow-x:auto}.card-activities{margin-top:14px}.act-item-list li{padding:8px 0}.teacher-month-grid{grid-template-columns:repeat(2,1fr)}.month-card{padding:12px}.month-card-img{height:120px}.lesson-controls{display:block;width:100%}.lesson-iframe{border-radius:10px;height:56vh}.progress-label,.progress-title{font-size:14px}.title-list-lessons{font-size:18px}.month-grid{gap:10px;grid-template-columns:repeat(2,1fr)}}.month-card-thumb img,.month-card-thumb-wrapper img,.teacher-month-grid .month-card-img{border-radius:16px;cursor:pointer;display:block;object-fit:cover}.non-clickable,.non-clickable .month-card-thumb img,.non-clickable .month-card-thumb-wrapper img,.non-clickable .teacher-month-grid .month-card-img{cursor:default!important}.non-clickable .iframe-overlay{cursor:default!important;pointer-events:none}:root{--bg-page:#f6f8fc;--muted:#6b7280;--soft:#f1f5ff;--success-bg:#ecfdf5;--success-text:#065f46;--shadow:0 6px 18px #0f172a14}body{background:#f6f8fc;background:var(--bg-page)}.classes-page{box-sizing:border-box;display:flex;flex-direction:column;gap:16px;padding:20px}.class-main{flex:1 1;width:100%}.class-view{display:flex;gap:24px}.left-column{width:300px}.left-list-card{padding:12px}.mod-filters{margin-bottom:16px;padding:12px 16px}.filters-row{align-items:flex-end;display:flex;gap:12px}.filter-item label{color:#374151;display:block;font-size:13px;margin-bottom:6px}.filter-item select{background:#fff;border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:8px;padding:8px}.right-column{flex:1 1}.class-view .right-column{min-height:60vh}.card{background:var(--card-bg);border-radius:14px;box-shadow:0 6px 18px #0f172a14;box-shadow:var(--shadow);padding:20px;transition:transform .15s ease,box-shadow .15s ease}.card h2,.card h4,.card h5,.card h6{color:#1e293b;margin:0 0 10px}.class-title{font-size:20px;margin-top:0}.week-meta{margin-bottom:6px}.class-header{display:flex;flex-direction:column;gap:12px}.teacher-card{align-items:center;display:flex;gap:12px}.teacher-avt{border:3px solid #fff;border-radius:999px;box-shadow:0 2px 6px #0a14281f;height:44px;object-fit:cover;width:44px}.teacher-info{display:flex;flex-direction:column}.teacher-name{color:#1f2937;font-weight:700}.teacher-role{color:#9ca3af;font-size:13px}.muted{font-size:14px}.students-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));list-style:none;margin:12px 0;padding:0}.students-grid li{background:#f9fbff;border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:10px;font-size:13.5px;padding:10px;transition:all .2s ease}.controls{flex-wrap:wrap;gap:10px;margin:12px 0 16px}.controls input[type=date]{background:#fff;border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:8px;font-size:14px;padding:7px 10px}.btn{background:#2563eb;background:var(--accent);color:#fff;font-weight:500;transition:background .2s ease,transform .1s}.btn.secondary{background:#f3f4f6;color:#111827}.btn.secondary:hover{background:#e5e7eb}.attendance-list{margin-top:16px}.dates{display:flex;flex-direction:column;gap:8px;margin-top:8px}.date{background:#f1f5ff;background:var(--soft);border:1px solid #e0e7ff;border-radius:10px;cursor:pointer;font-size:14px;padding:10px 12px;text-align:left;transition:all .2s ease}.date:hover{background:#e0e7ff}.date.active{background:#dbeafe;border-color:#2563eb;border-color:var(--accent);color:#1e3a8a;font-weight:500}.vstack{display:flex;flex-direction:column;gap:8px}.weeks-list{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}.weeks-list .date{align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;width:100%}.mt-8{margin-top:8px}.input-number{width:80px}.input-date,.input-number{border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:8px;padding:6px}.class-item{background:#0000;border-radius:8px;cursor:pointer;margin-top:6px;padding:8px}.class-item.active{background:linear-gradient(90deg,#f1f5ff,#e0e7ff);font-weight:500}.date .sub{font-size:11px;opacity:.8}.student-row{align-items:center;display:flex;gap:8px}.students-grid li.student-present{background:#10b98114;border:1px solid #10b9812e;border-radius:8px;padding:8px}.students-grid li.student-absent{background:#ef44440f;border:1px solid #ef44441f;border-radius:8px;padding:8px}.absence-reason{color:#b91c1c;font-size:13px;font-weight:600;margin-top:6px}.status-indicator{opacity:.9;text-align:center;width:24px}.student-name{flex:1 1 100%}.student-status{text-align:right;width:140px}.note{margin-top:6px}.note-input{border:1px solid #e6eefc;border-radius:6px;padding:6px;width:100%}.note-readonly{color:#444;margin-top:6px;opacity:.9}.spacer{height:8px}.edit-controls{display:flex;gap:8px;margin-top:12px}.attendance-detail{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;margin-top:14px;padding:12px}.success{animation:fadein .3s ease;background:#ecfdf5;background:var(--success-bg);border:1px solid #a7f3d0;border-radius:8px;color:#065f46;color:var(--success-text);font-size:14px;margin-top:10px;padding:10px 12px}@keyframes fadein{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.left-column ul li{border-radius:8px;padding:10px 12px;transition:background .2s ease}.left-column ul li:hover{background:#f9fafb}.left-column ul li.active{background:linear-gradient(90deg,#f1f5ff,#e0e7ff);font-weight:500}@media (max-width:900px){.class-view{flex-direction:column}.left-column{width:100%}.students-grid{grid-template-columns:repeat(2,1fr)}.controls{align-items:flex-start;flex-direction:column}}@media (min-width:901px){.classes-page.page-view{align-items:flex-start}.left-column{flex:0 0 260px;position:relative}.right-column{flex:1 1 auto}}.activities-page{display:flex;gap:20px}.activity-dates{background:#fff;border-radius:8px;box-shadow:0 6px 18px #0000000f;height:calc(100vh - 120px);height:calc(var(--vh, 1vh)*100 - 120px);overflow:auto;padding:12px;width:160px}.activity-dates .date{background:#f7f9fc;border:none;border-radius:6px;cursor:pointer;display:block;margin-bottom:8px;padding:8px;text-align:left}.activity-dates .date.active{background:#e9f2ff}.activity-main{flex:1 1}.mod-grade-select{align-items:center;display:flex;gap:8px;margin-bottom:12px}.label-inline{margin-right:8px}.pre-wrap{white-space:pre-wrap}.activity-list{display:flex;flex-wrap:wrap;gap:12px}.student-activity{background:#fff;border-radius:8px;box-shadow:0 6px 18px #0000000f;min-width:180px;padding:12px}.student-activity ul{margin:8px 0;padding-left:18px}.activity-card{background:#fff;border-radius:8px;box-shadow:0 6px 18px #0000000f;min-width:220px;padding:14px}.activity-card h4{margin:0 0 8px}.activity-topic .topic-content{min-height:64px}.activity-items ul{margin:8px 0;padding-left:18px}.muted{color:#888}@media(max-width:900px){.activities-page{flex-direction:column}.activity-dates{height:auto;width:100%}}:root{--primary:#007bff;--secondary:#6c757d;--light:#f8f9fa;--dark:#343a40;--success:#28a745;--danger:#dc3545}*{box-sizing:border-box}body{background-color:#f8f9fa;background-color:var(--light);color:#343a40;color:var(--dark);font-family:Bricolage Grotesque,sans-serif;margin:0}h1,h2,h3{margin:0 0 10px}.app-container{display:flex;height:100vh;height:calc(var(--vh, 1vh)*100)}.dashboard{-ms-overflow-style:none;background-color:#fff;margin-left:260px;min-height:100vh;min-height:calc(var(--vh, 1vh)*100);overflow-x:auto;scrollbar-width:none;width:calc(100% - 260px)}.dashboard::-webkit-scrollbar{display:none}.overlay{background:#0000000a;bottom:0;left:260px;pointer-events:none;position:fixed;right:0;top:0}.dashboard.no-sidebar{margin-left:0;width:100%}.global-header{background:#fff9;border-radius:6px;box-shadow:0 1px 3px #0000000f;color:#343a40;color:var(--dark);font-size:14px;padding:6px 10px;position:absolute;right:24px;top:14px;z-index:50}.global-top-header{align-items:center;background:#f99d26;display:flex;height:100px;left:260px;padding:0 24px;position:fixed;right:0;top:0;z-index:60}.global-mobile-header{display:none}.header-left{gap:8px}.global-top-header .header-center,.global-top-header .header-left,.global-top-header .header-right,.header-left{align-items:center;display:flex}.global-top-header .header-left{align-items:flex-start;color:#fff;display:flex;flex-direction:column;font-weight:600;gap:6px}.global-top-header .header-left>div:first-child{display:block}.global-top-header .header-center{flex:1 1 auto;justify-content:center}.global-top-header .header-right{color:#fff;flex:0 0 auto}.h-bar-u-info{align-items:flex-end;color:#fff;display:flex;flex-direction:column;margin-right:12px}.dashboard.has-top-header{padding-top:100px}.mobile-header-right{align-items:center;display:flex;gap:8px}@media(max-width:900px){.dashboard{margin-left:0;padding:calc(64px + env(safe-area-inset-top, 0px)) calc(env(safe-area-inset-right, 12px)) calc(64px + env(safe-area-inset-bottom, 12px)) calc(env(safe-area-inset-left, 12px));width:100%}.global-top-header,.overlay{left:0}.global-top-header{display:none}.global-mobile-header{align-items:center;background:#f99d26;display:flex;height:calc(64px + env(safe-area-inset-top, 0px));justify-content:space-between;left:0;padding:env(safe-area-inset-top,0) 16px 0;position:fixed;right:0;top:0;z-index:70}.global-mobile-header .mobile-user-name{color:#fff;font-weight:700}.global-mobile-header .mobile-header-avt{border-radius:999px;height:36px;object-fit:cover;width:36px}.dashboard.has-top-header{padding-top:calc(64px + env(safe-area-inset-top, 0px))}}@media(max-width:428px){.dashboard{padding-top:80px}}.confirm-modal{background:#0206178c;inset:0;padding:20px;z-index:16000}.confirm-modal .confirm-box{background:#fff;border-radius:14px;box-shadow:0 30px 80px #0206172e;color:#0f172a;max-width:560px;padding:22px;width:100%}.confirm-box h3{color:#0b2140;font-size:20px;margin:0 0 8px}.confirm-box p{color:#475569;margin:0 0 12px}.confirm-box form{grid-gap:12px;display:grid;gap:12px}.confirm-box form>div{display:flex;flex-direction:column}.confirm-box label{color:#334155;font-size:13px;margin-bottom:6px}.confirm-box input[type=password]{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6eef6;border-radius:10px;padding:12px 14px;transition:box-shadow .12s ease,border-color .12s ease,transform .08s ease}.confirm-box input[type=password]:focus{border-color:#7dd3fc;box-shadow:0 8px 22px #22c55e0f;outline:none;transform:translateY(-1px)}.confirm-box .btn{background:linear-gradient(180deg,#06b6d4,#0891b2);border:none;border-radius:10px;color:#fff;cursor:pointer;font-weight:700;padding:10px 14px}.confirm-box .btn.cancel{background:#eef2f7;box-shadow:none;color:#0f172a}.confirm-box .info{background:#dc26260f;border-radius:8px;color:#b91c1c;margin-top:8px;padding:8px 10px}@media(max-width:900px){.confirm-box{border-radius:12px;margin:0 8px;padding:18px}.confirm-box .btn{width:100%}}.notifications-page{background:#fff;box-sizing:border-box;margin:0 auto}.notifications-page,.page-view{max-width:980px;padding:20px}.notification-item{background:#fff;border:1px solid #0206170a;border-radius:10px;box-shadow:0 6px 18px #0206170f;cursor:pointer;display:block;margin-bottom:12px;padding:14px}.notification-item p{margin:0 0 8px}.notification-ts{color:#667;font-size:12px}.notification-item .notification-top{align-items:center;display:flex;gap:12px}.notification-item .notification-msg{color:#111827;flex:1 1;margin:0}.notification-item.unread{background:#fff0dc}.notification-item.read{background:#ebebeb}.notification-item.unread .notification-msg{font-weight:700}.notification-item.unread .notification-ts{color:#374151}.notification-item .dot{background:#ef4444;border-radius:999px;box-shadow:0 0 0 4px #ef444414;display:inline-block;height:10px;width:10px}.notifications-title{align-items:center;display:flex;gap:8px}.page-dot{background:#ef4444;border-radius:999px;box-shadow:0 0 0 6px #ef44440f;display:inline-block;height:12px;width:12px}.notifications-page .notification-list{background:#fff;border-radius:8px;height:calc(100vh - 200px);height:calc(var(--vh, 1vh)*100 - 200px);overflow-y:auto;padding:12px 6px}@media(max-width:428px){.notification-item{border-radius:10px;padding:14px}}.login-page{align-items:center;background:linear-gradient(180deg,#f6f9fc,#eef3f7);display:flex;height:100%;justify-content:center;width:100%}.login-card{background:#fff;border-radius:12px;box-shadow:0 10px 30px #2c3e501f;max-width:calc(100% - 40px);padding:32px;text-align:center;width:420px}.login-card .brand h1{-webkit-text-fill-color:#0000;background:linear-gradient(90deg,#ff6b6b,#845ef7);background-clip:text;-webkit-background-clip:text;font-size:28px;letter-spacing:2px;margin:0 0 12px}.login-card h2{color:var(--secondary);font-size:18px;margin-bottom:18px}.login-form{display:flex;flex-direction:column;gap:12px}.input{border:1px solid #e6e9ee;border-radius:8px;font-size:14px;outline:none;padding:12px 14px}.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #347aff14}.btn{border-radius:8px;font-weight:600;padding:10px 14px}.btn-primary{background:linear-gradient(90deg,#4b6ef6,#6f7cff)}.demo{color:var(--secondary);font-size:13px;margin-top:14px}.brand{padding-bottom:32px}@media (max-width:480px){.login-card{padding:20px;width:92%}}.account-page{box-sizing:border-box;color:#222;font-family:Bricolage Grotesque,sans-serif;padding:32px 20px}.page-view{box-sizing:border-box;margin:0 auto;max-width:100%;padding:24px}.account-page h2{color:#1f2937;font-size:28px;letter-spacing:-.2px;margin:0 0 18px}.account-section{background:#ebebeb;border:1px solid #14181c0a;border-radius:12px;margin-bottom:18px;padding:20px}.account-section h3{color:#111827;font-size:18px;margin:0 0 30px}.profile-row{align-items:flex-start;display:flex;gap:20px}.profile-avatar{flex:0 0 96px}.profile-avatar img{height:88px;object-fit:cover;width:88px}.avatar-placeholder{align-items:center;background:linear-gradient(180deg,#f3f4f6,#fff);border:1px dashed #e6edf3;border-radius:12px;color:#6b7280;display:flex;height:88px;justify-content:center;width:88px}.profile-fields{grid-gap:6px 12px;display:grid;flex:1 1 auto;gap:6px 12px}.profile-fields .name{align-items:flex-start;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.profile-fields p{color:#374151;font-size:14px;margin:6px 0}.profile-fields{grid-template-columns:1fr}.profile-info-grid{grid-gap:6px 18px;align-items:start;display:grid;gap:6px 18px;grid-template-columns:repeat(3,1fr);width:100%}.profile-info-grid p{margin:8px 0}.profile-fields p strong{color:#111827;display:inline-block;font-weight:700}.profile-fields p span{color:#111827}.muted{color:#6b7280}.info{background:#22c55e14;border-radius:8px;color:#065f46;display:inline-block;padding:8px 12px}.account-section.profile-summary{overflow:visible;position:relative}.account-section.profile-summary .status-badge{background:#ecfdf5;border:1px solid #065f4614;border-radius:999px;color:#065f46;font-size:13px;font-weight:600;padding:6px 10px;position:absolute;right:18px;top:16px}.children-list{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));list-style:none;margin:0;padding:0}.children-list li{background:#fafafa;border:1px solid #10182808;border-radius:10px;padding:12px}.pw-form{grid-gap:12px;align-items:end;align-items:start;display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-bottom:10px}.pw-form>div{width:100%}.pw-form label{color:#374151;display:block;margin-bottom:6px}.pw-form input{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6eef6;border-radius:10px;box-sizing:border-box;padding:12px 14px;transition:box-shadow .15s ease,border-color .15s ease,transform .1s ease;width:100%}.pw-form button{background:linear-gradient(180deg,#2563eb,#1d4ed8);border:none;border-radius:10px;box-shadow:0 10px 24px #2563eb1f;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2px;padding:12px 16px}.pw-form button:active{transform:translateY(1px)}.pw-form .hint{color:#6b7280;font-size:13px;grid-column:1/-1;margin-top:6px}.pw-form input:focus{border-color:#93c5fd;box-shadow:0 6px 18px #2563eb14;outline:none;transform:translateY(-1px)}@media (max-width:900px){.profile-row{align-items:center;flex-direction:column;gap:14px}.profile-avatar{display:flex;flex:0 0 auto;justify-content:center}.avatar-placeholder,.profile-avatar img{border-radius:12px;height:104px;width:104px}.profile-fields{text-align:left;width:100%}.profile-fields .name{margin:0 auto 8px;text-align:center}.profile-fields .name>div{text-align:center}.profile-info-grid{display:block}.profile-info-grid p{align-items:center;display:flex;gap:8px;padding:6px 0}.profile-fields p strong{margin:0;width:110px}.profile-fields p span,.profile-fields p strong{display:inline-block;text-align:left}.pw-form{grid-template-columns:1fr}.pw-form button{width:100%}.account-section{padding:18px}}@media (max-width:420px){.page-view{padding:14px}.account-page{padding:18px 12px}.avatar-placeholder,.profile-avatar img{height:110px;width:110px}.profile-fields p{font-size:15px}.profile-row{align-items:center;flex-direction:column;gap:14px;text-align:center}.profile-fields{grid-template-columns:1fr;width:100%}.profile-info-grid{gap:10px 12px;grid-template-columns:1fr}.profile-fields .name{align-items:center;justify-content:center}.account-section.profile-summary .status-badge{display:inline-block;margin:12px auto 0;position:static}.children-list{grid-template-columns:1fr}.account-section h3{margin-bottom:14px}.account-section{border-radius:10px;padding:16px}}.logout-button{background:#ef4444;border:none;border-radius:8px;color:#fff;padding:8px 12px}.account-section-action{margin-bottom:10px}@media (max-width:520px){.logout-btn{background-color:#dc2626;font-size:16px;padding:14px 16px}@media (max-width:360px){.logout-btn{font-size:17px;padding:16px 18px}}.confirm-modal{align-items:center;background:#02061799;display:flex;inset:0;justify-content:center;padding:18px;position:fixed;z-index:15000}.confirm-box{background:#fff;border-radius:14px;box-shadow:0 12px 40px #02061729;max-width:520px;padding:18px;text-align:center;width:100%}.confirm-box p{color:#111827;font-size:16px;margin:8px 0 16px}.confirm-actions{display:flex;gap:12px;justify-content:center}.confirm-actions .btn{border-radius:10px;flex:1 1;font-weight:600;padding:12px 10px}.confirm-actions .btn.cancel{background:#eef2f7;border:none;color:#111827}.confirm-actions .btn.confirm{background:linear-gradient(180deg,#ef4444,#dc2626);border:none;color:#fff}@media (max-width:420px){.confirm-actions{flex-direction:column}.confirm-actions .btn{width:100%}}}a{text-decoration:none}.sidebar{-ms-overflow-style:none;background-color:#ebebeb;color:#fff;height:100vh;height:calc(var(--vh, 1vh)*100);left:0;overflow-y:auto;padding:0 20px;position:fixed;scrollbar-width:none;top:0;width:260px}.sidebar::-webkit-scrollbar{display:none}.sidebar a{color:#fff}.sidebar .top{padding:20px 0}.sidebar .center{padding:20px 0 0}.nav-item-content{align-items:center;display:flex;gap:15px}.nav-item-with-dot{position:relative}.menu-notif-dot{background:#ef4444;border-radius:50%;box-shadow:0 0 0 2px #fff3;height:10px;position:absolute;right:153px;top:-5.5px;width:10px}hr{border:.5px solid #e6e3e3;height:0;margin:0!important}.logo{font-size:42px;text-align:center}.logo span{-webkit-text-fill-color:#0000;background:linear-gradient(35deg,#ff6b6b,#f06595,#845ef7);background-clip:text;-webkit-background-clip:text}.menu{font-size:18px;list-style:none;padding:0;width:200px}.menu li{margin-bottom:12px}.menu li a{border-radius:8px;color:#8a8a8a;display:block;padding:10px 12px;transition:background .18s,transform .12s}.menu li a:hover{background:#ffffff0f;transform:translateX(4px)}.menu li a.active{background:#f99d26;box-shadow:0 8px 18px #3b82f62e;color:#fff}.menu li .icon{margin-right:10px}.hr-menu{border:1px solid #bebebe;margin-bottom:10px!important}.mg-t-40{margin-top:40px!important}.logout-text{cursor:pointer}.confirm-modal{align-items:center;background:#00000080;display:flex;height:100vh;height:calc(var(--vh, 1vh)*100);justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:12000}.confirm-box{background:#fff;border-radius:8px;box-shadow:0 8px 24px #0003;color:#333;max-width:90%;min-width:320px;padding:20px 24px;text-align:center}.confirm-box p{font-size:16px;margin:0 0 16px}.confirm-actions{display:flex;gap:12px;justify-content:center}.btn{border:none;border-radius:6px;cursor:pointer;padding:8px 14px}.btn.cancel{background:#e0e0e0}.btn.confirm{background:#e74c3c;color:#fff}.mobile-bottom-nav,.mobile-drawer,.mobile-topbar{display:none}@media(max-width:900px){.sidebar{display:none}.mobile-topbar{align-items:center;background:#fff;box-shadow:0 2px 8px #0000000f;display:flex;height:56px;left:0;padding:0 12px;position:fixed;right:0;top:0;z-index:1200}.mobile-topbar .logo{font-size:20px;margin:0 0 0 12px}.mobile-center{flex:1 1;justify-content:center}.mobile-center,.mobile-user{align-items:center;display:flex}.mobile-user{gap:8px}.mobile-user-avt{border-radius:999px;box-shadow:0 2px 6px #0000001f;height:36px;object-fit:cover;width:36px}.mobile-user-name{color:#111827;font-size:16px;font-weight:600}.mobile-left{align-items:center;display:flex;gap:8px}.hamburger{background:#0000;border:none;font-size:20px;padding:8px}.mobile-drawer{align-items:stretch;background:#00000059;display:flex;inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .2s ease;z-index:1300}.mobile-drawer.open{opacity:1;pointer-events:auto}.mobile-drawer-content{background:#2c3e50;box-shadow:4px 0 20px #00000047;color:#fff;height:100%;max-width:360px;padding:20px;transform:translateX(-18%);transition:transform .22s cubic-bezier(.2,.9,.2,1);width:84%}.mobile-drawer.open .mobile-drawer-content{transform:translateX(0)}.mobile-drawer .logo{font-size:28px}.mobile-menu{padding:20px 0}.mobile-menu li a{display:block;padding:12px 10px}.mobile-footer{bottom:18px;left:0;position:absolute;right:0;text-align:center}.mobile-bottom-nav{align-items:center;background:#fff;bottom:0;box-shadow:0 -6px 22px #0000001f;color:#111827;display:flex;gap:20px;justify-content:center;left:50%;max-width:100%;min-width:100%;padding:10px 14px;position:fixed;transform:translateX(-50%);z-index:1400}.mobile-bottom-nav .mbn-item{border-radius:35px;color:#111827;display:flex;padding:10px 20px;text-decoration:none}.mobile-bottom-nav .mbn-center,.mobile-bottom-nav .mbn-pill{align-items:center;display:flex;justify-content:center}.mobile-bottom-nav .mbn-pill{background-color:#f99d26;border-radius:999px;gap:18px;padding:10px 40px}.mobile-bottom-nav .mbn-pill .mbn-item{-webkit-tap-highlight-color:transparent;border-radius:35px;color:#fff}.mbn-item.active{background-color:#fff;border-radius:35px;transform:scale(1.05)}}.hamburger{background:#0000;border:none;border-radius:8px;font-size:20px;line-height:1;padding:8px}.hamburger:active,.hamburger:focus{box-shadow:0 0 0 3px #3b82f61f;outline:none}.mobile-drawer .menu li a{font-size:16px;padding:12px 10px}@media(max-width:428px){.mobile-topbar{height:60px;padding-left:calc(env(safe-area-inset-left, 12px));padding-right:calc(env(safe-area-inset-right, 12px))}.mobile-drawer-content{padding-bottom:84px;padding-top:22px}.mobile-footer{bottom:calc(16px + env(safe-area-inset-bottom, 0px))}}:root{--card-bg:#fff;--muted:#666;--accent:#2563eb;--danger:#dc2626;--border:#e5e7eb}.admin-wrap{padding:20px}.admin-grid{grid-gap:18px;display:grid;gap:18px}.left-col{overflow:auto}.left-col,.right-col{background:#fff;background:var(--card-bg);border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:8px;padding:12px}.panel-header{margin-bottom:8px}.schools-list{display:flex;flex-direction:column;gap:8px}.school-item{align-items:center;border:1px solid #0000;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;padding:8px}.school-item:hover{background:#f8fafc}.school-item.selected{border-color:#2563eb;border-color:var(--accent);box-shadow:0 0 0 3px #2563eb0f}.school-name{font-weight:600}.school-id{color:#666;color:var(--muted);font-size:12px}.school-inline-actions{align-items:center;display:flex;gap:8px;margin-left:12px}.school-inline-actions input{border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:6px;padding:6px 8px}.school-inline-actions button{border-radius:6px;padding:6px 8px}.card{border:1px solid #e5e7eb;border:1px solid var(--border)}.form-row{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-bottom:12px}.form-row input,.form-row select{border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:6px;min-width:0;padding:8px}.form-actions-admin{align-items:center;display:flex;gap:8px}button{background:#fff;border:1px solid #ccc;border-radius:6px;cursor:pointer;padding:8px 10px}button.small{font-size:13px;padding:6px 8px}button.danger{background:#dc2626;background:var(--danger);border-color:#0000;color:#fff}.tabs{display:flex;gap:8px}.tabs button{background:#0000;border:1px solid #e5e7eb;border:1px solid var(--border);padding:6px 10px}.tabs button.active{background:#2563eb;background:var(--accent);border-color:#2563eb;border-color:var(--accent);color:#fff}.tabs-left button,.tabs-row .tabs-left button{background:#0000;border:1px solid #e5e7eb;border:1px solid var(--border);padding:6px 10px}.tabs-left button.active,.tabs-row .tabs-left button.active{background:#2563eb;background:var(--accent);border-color:#2563eb;border-color:var(--accent);color:#fff}.tabs-row .tabs-right button{padding:6px 10px}.data-table{table-layout:fixed}.data-table td,.data-table th{border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-table.auto{table-layout:auto}.data-table td.col-actions,.data-table th.col-actions{min-width:120px;overflow:visible;white-space:nowrap;width:auto}.inactive-row{background:#f3f4f6;color:#6b7280}.empty-placeholder{padding:28px;text-align:center}.empty-placeholder,.muted{color:#666;color:var(--muted)}.modal-overlay{z-index:1000}.modal-box{animation:popIn .18s cubic-bezier(.2,.9,.2,1);border-radius:10px;box-shadow:0 10px 40px #0b162d1f;max-width:96%}.modal-header{align-items:center;border-bottom:1px solid #ddd}.modal-header h4{color:#222;font-size:1rem;font-weight:600;margin:0}.modal-close{background:none;border:none;color:#666;cursor:pointer;font-size:20px;transition:color .2s ease}.modal-close:hover{color:#000}.modal-body{color:#222;font-size:.95rem;min-height:120px;padding:18px}.modal-form{grid-gap:12px;align-items:start;display:grid;gap:12px;grid-template-columns:1fr 1fr}.modal-form .field{display:flex;flex-direction:column;gap:6px}.btn-close{background:#878787;border:0;color:#fff}.modal-form label{color:#334155;font-size:13px;font-weight:600}.modal-form input[type=password],.modal-form input[type=text],.modal-form select{background:#fff;border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:8px;box-sizing:border-box;padding:10px;width:100%}.modal-form select[multiple]{height:140px;padding:8px}.modal-form .full{grid-column:1/-1}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}.btn-primary{background:#2563eb;background:var(--accent);border-color:#0000;border-radius:8px;padding:10px 14px}.btn-secondary{background:#f3f6fb;border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:8px;color:#1f2937}.btn-danger{background:#dc2626;background:var(--danger);border-color:#0000;border-radius:8px;color:#fff;padding:10px 14px}.filter-select2{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:1px solid #ccc;border-radius:8px;color:#333;cursor:pointer;max-width:300px;padding:8px 26px 8px 10px;transition:all .2s ease;width:100%}.filter-select2:hover{border-color:#888}.filter-select2:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff33;outline:none}.admin-actions{display:flex;gap:8px}.admin-actions button{background:#2563eb;background:var(--accent);border:1px solid #2563eb;border-color:var(--accent);border-radius:6px;color:#fff;cursor:pointer;padding:6px 10px}@media (max-width:720px){.modal-box{width:94%}.modal-form{grid-template-columns:1fr}}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (max-width:900px){.admin-grid{grid-template-columns:1fr}.left-col{height:auto}}.tabs-row{align-items:center;justify-content:space-between;margin-bottom:8px}.tabs-left,.tabs-row{display:flex;gap:8px}.detail-box{border:1px solid #e6eefc;border-radius:8px;padding:12px}.detail-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.detail-title{font-size:18px;font-weight:700}.detail-sub{color:#475569}.info-card{border:1px solid #e6eefc;border-radius:6px;padding:8px}.attendance-card{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6eefc;border-radius:10px;box-shadow:0 6px 18px #0b162d0a;margin-bottom:14px;padding:14px}.attendance-card h4{align-items:center;display:flex;font-size:16px;justify-content:space-between;margin:0 0 8px}.attendance-card h4 small{color:#6b7280;font-size:13px;font-weight:600}.attendance-card h5{color:#374151;font-size:14px;margin:6px 0}.attendance-card table{border-collapse:collapse;font-size:14px;margin-top:8px;width:100%}.attendance-card td,.attendance-card th{border-bottom:1px solid #eef2ff;padding:8px 10px;text-align:left}.attendance-card thead th{background:#0000;color:#0f172a;font-size:13px;font-weight:700}.attendance-card tbody tr:nth-child(odd){background:#fbfdff}.attendance-card .muted{color:#666;color:var(--muted)}@media (max-width:720px){.attendance-card table,.attendance-card tbody,.attendance-card td,.attendance-card th,.attendance-card thead,.attendance-card tr{display:block;width:100%}.attendance-card thead tr{display:none}.attendance-card tbody tr{border:1px solid #eef2ff;border-radius:8px;margin-bottom:12px;padding:8px}.attendance-card td{border:none;padding:6px 8px}.attendance-card td:before{color:#374151;content:attr(data-label);display:block;font-weight:600;margin-bottom:4px}}.info-card .name{font-weight:600}.info-card .actions{margin-top:6px}.parent-item{border:1px solid #eef2ff;border-radius:6px}.class-card,.parent-item{align-items:center;display:flex;justify-content:space-between;padding:8px}.class-card{border:1px solid #e6eefc;border-radius:8px}.class-card .meta{color:#475569;font-size:12px}.muted-inline{color:#666;color:var(--muted)}.mt-6{margin-top:6px}.mt-12{margin-top:12px}.tabs-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.stack-col{display:flex;flex-direction:column;gap:8px}.grid-list{grid-gap:8px;display:grid;gap:8px}.min-width-300{min-width:300px}.mb-8{margin-bottom:8px}.inline-flex-center{align-items:center;display:inline-flex}.ml-8{margin-left:8px}.icon-btn{align-items:center;background:#0000;border:1px solid #0000;border-radius:6px;color:#374151;cursor:pointer;display:inline-flex;height:34px;justify-content:center;padding:6px;width:34px}.icon-btn svg{height:16px;width:16px}.icon-btn:hover{background:#f3f4f6}.icon-btn.danger{color:#dc2626;color:var(--danger)}.class-name{font-weight:600}.error{color:#b91c1c}.filter-select{display:flex;flex-direction:column;gap:6px;min-width:0}.filter-select label{color:#475569;font-size:13px;font-weight:600}.filter-select select{-webkit-appearance:none;appearance:none;background:#fff;border:1px solid #e5e7eb;border:1px solid var(--border);border-radius:8px;box-sizing:border-box;color:#0f172a;cursor:pointer;font-size:14px;min-height:40px;padding:8px 36px 8px 10px}.filter-select select:focus{border-color:#2563eb;border-color:var(--accent);box-shadow:0 0 0 4px #2563eb14;outline:none}.filter-select select:hover{border-color:#2563eb33}.filter-select:after{color:#6b7280;content:"▾";font-size:12px;pointer-events:none;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.filters-inline .filter-select{flex:1 1 180px;position:relative}.filter-select option{padding:6px 8px}.filters-inline{align-items:center;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}.filters-inline .form-row{margin-bottom:0}@media (max-width:720px){.filters-inline{align-items:stretch;flex-direction:column}}.attendance-history{display:flex;flex-direction:column;gap:12px}.attendance-class-card{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6eefc;border-radius:10px;box-shadow:0 8px 20px #0b162d0a;padding:12px}.attendance-class-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:10px}.attendance-class-header .class-name{color:#0f172a;font-weight:700}.attendance-summary{display:flex}.attendance-summary,.chip{align-items:center;gap:8px}.chip{border-radius:999px;color:#fff;display:inline-flex;font-size:13px;font-weight:600;padding:6px 10px}.chip.present{background:#10b981}.chip.absent{background:#ef4444}.attendance-weeks{grid-gap:8px 12px;align-items:center;display:grid;gap:8px 12px;grid-template-columns:140px 1fr 100px}.attendance-week-row{display:contents}.attendance-week-row .week{color:#0f172a;font-weight:600;padding:8px 10px}.attendance-week-row .date{color:#374151;padding:8px 10px}.attendance-week-row .status{border-radius:999px;display:inline-block;font-weight:700;min-width:80px;padding:6px 10px;text-align:center}.attendance-week-row .status.present{background:#10b9811f;color:#059669}.attendance-week-row .status.absent{background:#ef444414;color:#b91c1c}@media (max-width:720px){.attendance-weeks{grid-template-columns:1fr}.attendance-week-row .date,.attendance-week-row .status,.attendance-week-row .week{display:block;width:100%}.attendance-week-row .status{margin-top:6px}}.admin-dashboard,.admin-page{padding:20px}.panel-actions{align-items:center;display:flex;gap:8px}.week-actions{display:flex;justify-content:flex-end}.panel-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.card{background:#fff;border-radius:8px;padding:12px}.data-table{border-collapse:collapse;width:100%}.data-table td,.data-table th{border-bottom:1px solid #eee;padding:8px;text-align:left}.mr-10{margin-right:10px}.modal-overlay{align-items:center;background:#0006;display:flex;inset:0;justify-content:center;position:fixed}.modal-box{background:#fff;border-radius:8px;box-shadow:0 8px 24px #0003;display:flex;flex-direction:column;max-width:95%;width:720px}.modal-header{border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:12px 16px}.modal-body{max-height:60vh;overflow:auto;padding:16px}.modal-footer{border-top:1px solid #eee;display:flex;justify-content:flex-end;padding:12px 16px}.modal-close{background:#0000;border:0;font-size:18px}.modal-form .field{margin-bottom:12px}.modal-form .field label{display:block;font-weight:600;margin-bottom:6px}.modal-form .field input{border:1px solid #ddd;border-radius:4px;padding:8px;width:100%}.week-row{align-items:stretch;display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.week-row .small{width:64px}.week-block{background:#fafafa;border:1px solid #f0f0f0;border-radius:6px;padding:10px;width:100%}.block-title{font-size:13px;font-weight:700;margin-bottom:8px}.block-field{margin-bottom:8px}.activity-items,.block-field{display:flex;flex-direction:column}.activity-items{gap:6px}.activity-item-row{align-items:center;display:flex;gap:8px}.activity-item-row input{border:1px solid #ddd;border-radius:6px;flex:1 1;padding:8px}.activity-item-row .small{width:auto}.activity-item-row .danger{border-radius:6px;padding:6px 8px}.block-field label{color:#333;font-size:12px;margin-bottom:4px}.block-field input{border:1px solid #ddd;border-radius:4px;padding:8px}.week-panel{background:#fff;border:1px solid #eee;border-radius:6px}.week-header{background:#fafafa;border-bottom:1px solid #eee;cursor:pointer;display:flex;justify-content:space-between;padding:8px 12px}.week-body{display:flex;flex-direction:column;gap:12px;padding:12px}.week-body img{border-radius:16px;display:block;object-fit:cover}.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.error{color:#b00020;font-size:13px;margin-top:6px}.btn-primary{background:#06f;padding:8px 12px}.btn-primary,.danger{border:0;border-radius:6px;color:#fff}.danger{background:#ff4d4f;padding:6px 10px}.multi-l-t-ad{box-sizing:border-box;height:4.8em;line-height:normal;overflow-y:auto;padding:8px;resize:none;width:100%}.success-text{color:#069335}.reject-text{color:#c51616}.aa-root{display:flex;gap:18px;padding:18px}.aa-sidebar{background:#fff;border-radius:10px;box-shadow:0 6px 18px #0000000f;padding:12px;width:220px}.aa-grade-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.aa-grade{background:#f7f9fc;border:none;border-radius:6px;cursor:pointer;padding:8px;text-align:left}.aa-grade.active{background:#e9f2ff}.aa-actions{display:flex;flex-direction:column;gap:8px;margin-top:12px}.aa-btn{background:#fff;border:1px solid #dfe7f2;border-radius:6px;cursor:pointer;padding:8px 10px}.aa-btn.aa-primary{background:#2b7cff;border-color:#2566d6;color:#fff}.aa-btn.aa-danger{background:#ffefef;border-color:#f3c2c2;color:#b81d1d}.aa-main{flex:1 1}.aa-header{margin-bottom:12px}.aa-content{background:#fff;border-radius:10px;box-shadow:0 6px 18px #0000000a;min-height:400px;padding:12px}.aa-list{display:flex;flex-direction:column;gap:12px}.aa-card{background:#fff;border:1px solid #eef3fb;border-radius:8px;padding:12px}.aa-card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}.aa-weeks{display:flex;flex-direction:column;gap:6px}.aa-week{background:#fbfdff;border:1px solid #f1f6ff;border-radius:6px;padding:8px}.aa-week-title{font-weight:600}.aa-week-items{color:#555;font-size:13px;margin-top:4px}.aa-modal-overlay{align-items:center;background:#0006;display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}.aa-modal{background:#fff;border-radius:10px;box-shadow:0 12px 40px #0003;max-width:95%;overflow:hidden;width:900px}.aa-modal-header{align-items:center;border-bottom:1px solid #f1f4fb;display:flex;justify-content:space-between;padding:12px 16px}.aa-close{background:#0000;border:none;cursor:pointer;font-size:22px}.aa-modal-body{max-height:70vh;overflow:auto;padding:16px}.aa-editor .aa-form-row{align-items:center;display:flex;gap:12px;margin-bottom:12px}.aa-editor label{min-width:80px}.aa-editor input[type=number],.aa-editor input[type=text],.aa-editor select{border:1px solid #e6eefb;border-radius:6px;min-width:200px;padding:8px}.aa-weeks-editor{margin-top:12px}.aa-week-edit{background:#fff;border:1px dashed #e6eefb;border-radius:8px;margin-bottom:10px;padding:10px}.aa-week-meta{align-items:center;display:flex;gap:12px;margin-bottom:8px}.aa-items{align-items:flex-start;display:flex;gap:12px}.aa-items-list{display:flex;flex-wrap:wrap;gap:8px}.aa-item{background:#f7fbff;border:1px solid #e6f0ff;border-radius:6px;padding:6px 8px}.aa-item-adder{align-items:center;display:flex;gap:8px}.aa-sm{font-size:12px;padding:4px 6px}.aa-editor-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.searchable-dropdown{max-width:420px;position:relative;width:100%}.sd-control{align-items:center;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;padding:8px}.sd-value{flex:1 1}.sd-arrow{color:#666;margin-left:8px}.sd-menu{background:#fff;border:1px solid #ddd;box-shadow:0 4px 10px #00000014;left:0;margin-top:6px;position:absolute;right:0;z-index:40}.sd-search{border:none;border-bottom:1px solid #eee;box-sizing:border-box;outline:none;padding:8px;width:100%}.sd-list{max-height:220px;overflow:auto}.sd-item{cursor:pointer;padding:8px}.sd-item.highlight{background:#f0f8ff}.sd-empty{color:#888;padding:8px}.toast-root{bottom:auto;display:flex;flex-direction:column;gap:8px;position:fixed;right:16px;top:16px;z-index:13000}.toast{border-radius:8px;box-shadow:0 8px 24px #0a14281f;color:#fff;min-width:180px;padding:10px 14px}.toast-center-root{align-items:center;display:flex;flex-direction:column;gap:8px;left:50%;pointer-events:none;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:16000}.toast.centered{border-radius:12px;max-width:calc(100vw - 48px);min-width:260px;pointer-events:auto;text-align:center}.toast.info{background:linear-gradient(90deg,#3b82f6,#5b7cff)}.toast.success{background:linear-gradient(90deg,#16a34a,#22c55e)}.toast.error{background:linear-gradient(90deg,#ef4444,#f97316)}.toast-message{font-size:14px}.scan-app-container{align-items:center;box-sizing:border-box;color:#1f2937;display:flex;flex-direction:column;font-family:Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;gap:16px;justify-content:flex-start;margin:20px auto;max-width:920px;padding:16px;width:100%}.camera-wrap{background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid #0f172a0a;border-radius:14px;box-shadow:0 6px 18px #080f1e0f;overflow:hidden;position:relative;width:100%}.camera-wrap canvas,.camera-wrap img,.camera-wrap video{aspect-ratio:4/3;background:#000;display:block;height:auto;object-fit:cover;width:100%}.camera-overlay{display:flex;flex-direction:column;gap:12px;inset:0;justify-content:flex-end;padding:14px;pointer-events:none;position:absolute}.controls{align-items:center;display:flex;gap:12px;justify-content:center;pointer-events:auto}.capture-btn{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;background:linear-gradient(180deg,#10b981,#059669);border:none;border-radius:12px;box-shadow:0 8px 22px #10b9812e;color:#fff;font-size:16px;min-width:140px;outline:none;padding:12px 18px;transition:transform .14s ease,box-shadow .14s ease,opacity .12s}.btn-secondary,.capture-btn{cursor:pointer;font-weight:600}.btn-secondary{background:#fff;border:1px solid #0f172a0f;border-radius:10px;box-shadow:0 4px 14px #02061708;color:#0f172a;padding:10px 14px;transition:transform .12s ease,box-shadow .12s ease}.btn-secondary:active,.capture-btn:active{box-shadow:0 5px 14px #0206170f;transform:translateY(2px) scale(.995)}.capture-btn[disabled]{box-shadow:none;cursor:not-allowed;opacity:.6;transform:none}.loader-row{align-items:center;background:#ffffffe6;border-radius:999px;box-shadow:0 6px 18px #0206170f;display:flex;font-size:14px;font-weight:600;gap:12px;padding:8px 12px}.spinner{animation:spin .9s linear infinite;border:3px solid #0206171f;border-radius:50%;border-top-color:#02061799;height:18px;width:18px}@keyframes spin{to{transform:rotate(1turn)}}.result-box{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #0f172a0a;box-shadow:0 8px 30px #0206170a;box-sizing:border-box;color:#0f172a;padding:14px;width:100%}.result-header{align-items:center;display:flex;gap:12px;margin-bottom:8px}.result-title{color:#064e3b;font-size:16px;font-weight:700}.result-sub{color:#475569;font-size:13px}.result-steps{display:flex;flex-direction:column;gap:10px;margin-top:8px}.step{align-items:flex-start;background:#f8fafc;border:1px solid #02061708;border-radius:10px;display:flex;gap:12px;padding:10px 12px}.step .step-index{align-items:center;background:linear-gradient(180deg,#e6fffa,#bbf7d0);border-radius:8px;color:#064e3b;display:flex;font-weight:700;height:30px;justify-content:center;min-width:30px}.step .step-text{color:#0f172a;font-size:14px;line-height:1.35}.meta-row{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.meta-pill{background:#eef2ff;border:1px solid #3b82f614;border-radius:999px;color:#3730a3;font-size:13px;font-weight:600;padding:6px 10px}.app-scan{background:#f9fafb;border-radius:16px;box-shadow:0 8px 24px #0000000d;color:#0f172a;font-family:Inter,sans-serif;margin:20px auto;max-width:900px;padding:16px}.app-scan h1{color:#047857;font-size:22px;font-weight:800;margin-bottom:16px;text-align:center}.camera-section{background:#000;border-radius:12px;overflow:hidden;position:relative}.camera-section video{height:auto;object-fit:cover;width:100%}.camera-controls{bottom:12px;display:flex;gap:10px;left:50%;position:absolute;transform:translateX(-50%)}.camera-btn{border:none;border-radius:10px;cursor:pointer;font-weight:600;padding:10px 14px;transition:.2s}.btn-capture{background:#10b981;color:#fff}.btn-capture:hover{background:#059669}.btn-switch{background:#ffffffe6;color:#0f172a}.btn-switch:hover{background:#e2e8f0}.loading{color:#64748b;margin-top:10px;text-align:center}.result-box{background:#fff;border-radius:14px;box-shadow:0 4px 16px #0000000d;margin-top:20px;padding:16px}.result-box h2{color:#065f46;font-size:18px;font-weight:700;margin-bottom:10px}.result-content{background:#f0fdf4;border-left:4px solid #10b981;font-size:15px;line-height:1.5}.result-content,.result-error{border-radius:10px;padding:12px}.result-error{background:#fef2f2;border-left:4px solid #dc2626;color:#b91c1c}.result-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.result-tag{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;color:#047857;font-size:13px;font-weight:600;padding:5px 10px}@media (max-width:600px){.app-scan{padding:12px}.camera-controls{flex-direction:column}.camera-btn{text-align:center;width:100%}.result-box{padding:12px}}@media (max-width:640px){.scan-app-container{margin:8px;max-width:100%;padding:10px}.camera-wrap canvas,.camera-wrap video{aspect-ratio:3/4}.camera-overlay{padding:12px}.capture-btn{border-radius:12px;font-size:15px;min-width:120px;padding:10px 14px}.result-box{border-radius:12px;padding:12px}.controls{gap:10px}}@media (min-width:1200px){.scan-app-container{max-width:1100px}.camera-wrap{border-radius:16px}}.btn-secondary:focus,.capture-btn:focus{outline:3px solid #10b9812e;outline-offset:3px}.text-muted{color:#64748b;font-size:13px}.center{align-items:center;display:flex;justify-content:center}.hidden{display:none!important}
/*# sourceMappingURL=main.09b10c26.css.map*/