body{
margin:0;
font-family:Arial, sans-serif;
background:#f4f6f9;
}

body[data-design="horses"]{
background-color:#eef3f8;
background-image:
radial-gradient(circle at 16% 18%, rgba(151, 169, 196, 0.2) 0 44px, transparent 45px),
radial-gradient(circle at 88% 70%, rgba(117, 151, 138, 0.18) 0 58px, transparent 59px);
}

body[data-design="planets"]{
background-color:#eef3fa;
background-image:
radial-gradient(circle at 20% 20%, rgba(110, 140, 195, 0.2) 0 46px, transparent 47px),
radial-gradient(circle at 82% 28%, rgba(232, 190, 102, 0.18) 0 34px, transparent 35px),
radial-gradient(circle at 72% 82%, rgba(130, 178, 184, 0.18) 0 62px, transparent 63px);
}

body[data-design="flowers"]{
background-color:#f7f3f8;
background-image:
radial-gradient(circle at 14% 22%, rgba(231, 157, 182, 0.2) 0 40px, transparent 41px),
radial-gradient(circle at 84% 72%, rgba(149, 195, 142, 0.18) 0 56px, transparent 57px);
}

body[data-design="numbers"]{
background-color:#f6f8fb;
background-image:
linear-gradient(135deg, rgba(94, 121, 151, 0.08) 25%, transparent 25%),
linear-gradient(315deg, rgba(94, 121, 151, 0.06) 25%, transparent 25%);
background-size:76px 76px;
}

.hidden{
display:none !important;
}

/* APP LAYOUT */

.app{
display:flex;
height:100vh;
}

/* SIDEBAR */

.sidebar{
width:230px;
background:#2c3e50;
color:white;
padding:20px;
display:flex;
flex-direction:column;
overflow-y:auto;
box-shadow:inset -1px 0 0 rgba(255,255,255,0.05);
}

.sidebar h2{
margin:0;
line-height:1;
}

.sidebar-slogan{
margin:0;
font-size:8px;
line-height:1.05;
color:rgba(255,255,255,0.42);
}
/* WELCOME SPLASH */

.welcome-splash{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:white;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.robot-wrap{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
animation:floatRobot 1.8s ease-in-out infinite;
}

.speech-bubble{
background:#eef6ff;
color:#2c3e50;
padding:14px 18px;
border-radius:18px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
font-size:18px;
position:relative;
}

.speech-bubble::after{
content:"";
position:absolute;
bottom:-10px;
left:40px;
border-width:10px 10px 0 10px;
border-style:solid;
border-color:#eef6ff transparent transparent transparent;
}

.robot{
position:relative;
width:120px;
display:flex;
flex-direction:column;
align-items:center;
}

.robot-head{
width:90px;
height:70px;
background:#d9e8f7;
border-radius:18px;
position:relative;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
border:3px solid #b9d0e8;
}

.eye{
width:10px;
height:10px;
background:#2c3e50;
border-radius:50%;
position:absolute;
top:24px;
animation:blinkEyes 3s infinite;
}

.left-eye{ left:22px; }
.right-eye{ right:22px; }

.mouth{
width:24px;
height:4px;
background:#2c3e50;
border-radius:10px;
position:absolute;
bottom:16px;
left:50%;
transform:translateX(-50%);
}

.robot-body{
width:70px;
height:75px;
background:#c6ddf2;
border-radius:16px;
margin-top:10px;
border:3px solid #b9d0e8;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.robot-arms .arm{
width:16px;
height:52px;
background:#b9d0e8;
position:absolute;
top:90px;
border-radius:10px;
transform-origin:top center;
}

.left-arm{
left:10px;
animation:waveArm 1.2s ease-in-out infinite;
}

.right-arm{ right:10px; }

.robot-legs{
display:flex;
gap:16px;
margin-top:6px;
}

.robot-legs .leg{
width:14px;
height:42px;
background:#b9d0e8;
border-radius:10px;
}

@keyframes floatRobot{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

@keyframes waveArm{
0%{transform:rotate(12deg);}
50%{transform:rotate(-28deg);}
100%{transform:rotate(12deg);}
}

@keyframes blinkEyes{
0%,46%,50%,100%{transform:scaleY(1);}
48%{transform:scaleY(0.1);}
}
.robot-mini-content{
margin-top:10px;
width:320px;
max-width:90vw;
}

.skip-splash-btn{
margin-top:12px;
background:#2ecc71;
border:none;
color:white;
padding:10px 14px;
border-radius:10px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.xo-board{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:10px;
margin-top:10px;
}

.xo-cell{
height:72px;
border:none;
border-radius:14px;
background:white;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
font-size:28px;
cursor:pointer;
}

.xo-cell:disabled{
cursor:default;
}

.mini-card{
background:white;
padding:16px;
border-radius:14px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
text-align:left;
}

.mini-card p{
margin:0 0 12px 0;
}

.mini-card button{
background:#2ecc71;
border:none;
color:white;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
}

.quiz-options{
display:flex;
flex-direction:column;
gap:8px;
margin-top:10px;
}

.quiz-options button{
background:#ffffff;
border:none;
padding:10px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
cursor:pointer;
text-align:left;
}
.sidebar ul{
list-style:none;
padding:0;
margin-top:20px;
display:flex;
flex-direction:column;
gap:8px;
}

.sidebar li{
background:#34495e;
padding:10px 12px;
border-radius:8px;
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
font-size:15px;
}

.sidebar li:hover{
background:#3d566e;
}

.sidebar li span{
font-size:14px;
}

.menu-title{
background:none;
opacity:0.7;
cursor:default;
font-size:13px;
padding:5px 2px;
margin-top:15px;
}

.add{
margin-top:10px;
font-weight:bold;
}

.class-heading{
background:#eef3f9 !important;
color:#2c3e50;
font-weight:bold;
cursor:pointer;
}

.class-action{
background:#50657b !important;
font-weight:bold;
}

.archive-entry{
background:#5b6f84 !important;
}

.trash-entry{
background:#6b7785 !important;
}

.class-item{
background:linear-gradient(180deg, #41576d 0%, #384d61 100%) !important;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.active-class{
outline:2px solid #2ecc71;
}

.class-main{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}

.trash-wrap{
list-style:none;
margin:6px 0 0;
padding:0;
}

.trash-card{
margin-left:10px;
margin-top:8px;
padding:10px 12px;
border-radius:14px;
background:linear-gradient(180deg, #eef2f7 0%, #dde4ed 100%);
border:1px solid #c7d1dc;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:#34495e;
}

.trash-name{
font-size:13px;
font-weight:bold;
}

.app-context-menu{
position:fixed;
z-index:9999;
min-width:160px;
padding:6px;
border-radius:14px;
background:linear-gradient(180deg, #ffffff 0%, #e7eef8 100%);
border:1px solid #c7d1dc;
box-shadow:0 16px 30px rgba(40,58,82,0.22);
}

.context-menu-item{
display:block;
width:100%;
border:none;
background:transparent;
padding:9px 10px;
border-radius:10px;
text-align:left;
font-size:12px;
font-weight:bold;
color:#34495e;
cursor:pointer;
}

.context-menu-item:hover{
background:rgba(82,106,129,0.12);
}

.context-menu-item.danger{
color:#c0392b;
}

.trash-empty{
margin-left:10px;
margin-top:8px;
padding:10px 12px;
border-radius:14px;
background:#eef2f7;
border:1px solid #c7d1dc;
color:#5d6d7e;
font-size:13px;
}

.subject-child{
margin-left:18px;
background:linear-gradient(180deg, #526a81 0%, #455b70 100%) !important;
font-size:14px;
padding:9px 12px !important;
}

.archive-class-item{
margin-left:12px;
}

.subject-child:hover{
background:#5b738b !important;
}

.add-subject{
margin-left:18px;
font-weight:normal;
}

.welcome-box{
background:white;
padding:20px;
border-radius:10px;
margin-top:20px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.main{
flex:1;
padding:28px 32px;
overflow-y:auto;
position:relative;
isolation:isolate;
background:transparent;
}

.main::before{
content:"";
position:absolute;
inset:78px 24px 24px 24px;
z-index:0;
pointer-events:none;
opacity:0;
background-repeat:no-repeat;
background-size:210px auto, 160px auto, 120px auto;
}

.main > *{
position:relative;
z-index:1;
}

body[data-design="horses"] .main::before,
.main[data-design="horses"]::before{
content:"♞   ♘";
opacity:0.18;
font-size:118px;
line-height:1;
color:#5d6f88;
letter-spacing:24px;
display:flex;
justify-content:flex-end;
align-items:flex-end;
padding:0 18px 18px 0;
}

body[data-design="planets"] .main::before,
.main[data-design="planets"]::before{
content:"◐  ○  ◌";
opacity:0.2;
font-size:104px;
line-height:1;
color:#647fa9;
letter-spacing:18px;
display:flex;
justify-content:flex-end;
align-items:flex-start;
padding:32px 12px 0 0;
}

body[data-design="flowers"] .main::before,
.main[data-design="flowers"]::before{
content:"✿  ❀  ✾";
opacity:0.2;
font-size:96px;
line-height:1;
color:#8a7ca5;
letter-spacing:16px;
display:flex;
justify-content:flex-end;
align-items:flex-end;
padding:0 12px 30px 0;
}

body[data-design="numbers"] .main::before,
.main[data-design="numbers"]::before{
content:"1 2 3 4";
opacity:0.14;
font-size:108px;
font-weight:bold;
line-height:1;
color:#526b82;
letter-spacing:12px;
display:flex;
justify-content:flex-end;
align-items:flex-end;
padding:0 14px 24px 0;
}

.dashboard-topbar{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:18px;
}

.dashboard-topbar h1{
margin:0;
}

.dashboard-subtitle{
margin:8px 0 0 0;
color:#5f6c7a;
}

.topbar-tools{
display:flex;
align-items:center;
gap:10px;
}

.design-picker{
display:flex;
align-items:center;
gap:6px;
padding:6px;
border-radius:16px;
background:rgba(255,255,255,0.72);
border:1px solid rgba(194,205,219,0.75);
box-shadow:0 4px 10px rgba(44,62,80,0.05);
}

.design-choice{
width:32px;
height:32px;
border:none;
border-radius:10px;
background:#eef3f9;
color:#42566d;
font-size:16px;
font-weight:bold;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.design-choice:hover{
background:#e2ebf6;
}

.design-choice.active{
background:#dff7d7;
outline:2px solid rgba(46,204,113,0.5);
}

.profile-btn{
background:#34495e;
border:none;
color:white;
width:46px;
height:46px;
padding:0;
border-radius:14px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
display:flex;
align-items:center;
justify-content:center;
}

.profile-btn-icon{
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
}

.profile-btn svg{
width:24px;
height:24px;
stroke:currentColor;
fill:none;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}

.profile-page{
max-width:760px;
margin:28px auto;
padding:0 18px 32px;
}

.profile-card{
background:white;
border-radius:20px;
padding:24px;
box-shadow:0 10px 24px rgba(44,62,80,0.08);
}

.profile-topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}

.back-home-btn{
background:#34495e;
border:none;
color:white;
padding:10px 14px;
border-radius:10px;
cursor:pointer;
font-weight:bold;
}

.profile-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.profile-grid .full{
grid-column:1 / -1;
}

.profile-card label{
display:block;
margin-bottom:6px;
font-weight:bold;
color:#2c3e50;
}

.profile-card input,
.profile-card select{
width:100%;
padding:11px 12px;
border:1px solid #cfd9e3;
border-radius:10px;
background:#f9fbfd;
}

.profile-actions{
margin-top:20px;
display:flex;
justify-content:flex-end;
gap:10px;
}

.profile-save-btn{
background:#2ecc71;
border:none;
color:white;
padding:12px 18px;
border-radius:10px;
cursor:pointer;
font-weight:bold;
}

.profile-logout-btn{
background:#e9eef5;
border:none;
color:#34495e;
padding:12px 18px;
border-radius:10px;
cursor:pointer;
font-weight:bold;
}

.profile-note{
margin:0;
color:#6c7a89;
font-size:13px;
}

@media (max-width: 720px){
.profile-grid{
grid-template-columns:1fr;
}

.dashboard-panels{
grid-template-columns:1fr;
}

.dashboard-coach{
min-height:420px;
}
}


.calendar{
margin-top:30px;
width:100%;
max-width:640px;
justify-self:center;
}

.overall-study-plan-card{
background:linear-gradient(180deg,#ffffff 0%,#f7fbf8 100%);
border:1px solid #d7e7dc;
border-radius:12px;
box-shadow:0 8px 18px rgba(40,92,66,0.1);
padding:10px;
margin:12px 0 8px;
width:100%;
}

.overall-study-plan-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
}

.overall-study-plan-head h2{
margin:0;
font-size:20px;
color:#263f32;
}

.overall-study-plan-head p{
margin:4px 0 0;
font-size:13px;
color:#67806e;
}

#refreshStudyPlanBtn{
width:34px;
height:34px;
border:none;
border-radius:9px;
background:#e7f4eb;
color:#2f6d45;
font-weight:800;
cursor:pointer;
}

.overall-study-plan{
display:flex;
flex-direction:column;
gap:12px;
}

.overall-study-plan-tests{
display:flex;
flex-wrap:wrap;
gap:7px;
}

.overall-study-next{
display:flex;
gap:8px;
align-items:flex-start;
padding:7px 9px;
border-radius:8px;
background:#eaf6ee;
color:#2d5b3c;
font-size:12px;
line-height:1.35;
}

.overall-study-next span{
font-weight:700;
}

.overall-study-actions{
display:flex;
flex-wrap:wrap;
gap:7px;
align-items:center;
}

.overall-study-toggle,
.overall-study-export{
border:1px solid #cfe0d4;
border-radius:9px;
background:#f6fbf7;
color:#315441;
font-size:12px;
font-weight:800;
padding:7px 10px;
cursor:pointer;
box-shadow:0 4px 10px rgba(40,92,66,0.08);
}

.overall-study-toggle{
background:#2f6d45;
border-color:#2f6d45;
color:#fff;
}

.study-plan-delete-item{
border:1px solid #f0c9c9;
border-radius:8px;
background:#fff7f7;
color:#8c2f2f;
font-size:11px;
font-weight:800;
padding:5px 8px;
cursor:pointer;
}

.study-plan-delete-item:hover{
background:#ffecec;
}

.overall-study-toggle:hover,
.overall-study-export:hover{
transform:translateY(-1px);
}

.overall-study-details.hidden{
display:none;
}

.overall-test-chip{
font-size:12px;
font-weight:700;
border-radius:999px;
padding:4px 7px;
background:#eef5f1;
color:#315441;
border:1px solid #d8e6dc;
}

.overall-test-chip.akut{
background:#fff0f0;
border-color:#f2c4c4;
color:#8c2f2f;
}

.overall-test-chip.hoch{
background:#fff7df;
border-color:#ecd394;
color:#7b5a12;
}

.overall-test-chip.parallel{
background:#eef6ff;
border-color:#cfe2f5;
color:#285b85;
}

.overall-study-plan-days{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:10px;
}

.overall-study-table-wrap,
.study-plan-table-wrap{
width:100%;
overflow-x:auto;
border:1px solid #e1eadf;
border-radius:12px;
background:#fff;
}

.overall-study-table,
.study-plan-table{
width:100%;
border-collapse:collapse;
min-width:760px;
font-size:12px;
}

.study-plan-table{
min-width:560px;
}

.overall-study-table th,
.overall-study-table td,
.study-plan-table th,
.study-plan-table td{
padding:6px 8px;
border-bottom:1px solid #edf3ef;
text-align:left;
vertical-align:top;
}

.overall-study-table th,
.study-plan-table th{
background:#f1f7f3;
color:#365743;
font-size:11px;
font-weight:800;
white-space:nowrap;
}

.overall-study-table td small,
.study-plan-table td small{
display:block;
margin-top:1px;
color:#758679;
font-size:10px;
}

.overall-study-table td b,
.study-plan-table td b{
display:block;
color:#314b3c;
font-size:11px;
}

.overall-study-table td span,
.study-plan-table td span{
display:block;
color:#405a49;
line-height:1.35;
}

.overall-study-row.done,
.study-plan-item.done{
background:#f4faf5;
color:#647768;
}

.overall-study-row.skipped,
.study-plan-item.skipped{
background:#fff8f0;
color:#8a6847;
}

.overall-study-row.today{
background:#eef8f1;
box-shadow:inset 4px 0 0 #3f9b63;
}

.overall-study-row.today.done{
background:#e7f5eb;
}

.study-status-actions{
display:flex;
gap:5px;
align-items:center;
white-space:nowrap;
}

.study-status-actions button{
width:23px;
height:23px;
border:1px solid #d4e1d9;
border-radius:6px;
background:#fff;
color:#4b6655;
font-weight:800;
cursor:pointer;
line-height:1;
}

.study-status-actions button.active{
background:#2f7d4d;
border-color:#2f7d4d;
color:#fff;
}

.study-status-actions button:disabled{
opacity:.55;
cursor:wait;
}

.overall-study-day{
border:1px solid #e1eadf;
border-radius:12px;
background:#ffffff;
overflow:hidden;
}

.overall-study-day header{
display:flex;
justify-content:space-between;
gap:10px;
padding:9px 11px;
background:#f1f7f3;
font-size:13px;
color:#365743;
}

.overall-study-items{
display:flex;
flex-direction:column;
gap:0;
}

.overall-study-item{
display:grid;
grid-template-columns:auto 1fr;
gap:9px;
padding:10px 11px;
border-top:1px solid #eef3ef;
font-size:13px;
line-height:1.35;
}

.overall-study-item.done{
opacity:.66;
background:#f4faf5;
}

.overall-study-item span{
display:flex;
flex-direction:column;
gap:2px;
}

.overall-study-item em{
font-style:normal;
color:#405a49;
}

.overall-study-item small{
color:#728477;
}

.dashboard-panels{
display:grid;
grid-template-columns:minmax(0, 640px) minmax(420px, 500px);
gap:24px;
align-items:start;
width:100%;
justify-content:space-between;
}

.dashboard-sidepanel{
display:flex;
flex-direction:column;
gap:14px;
margin-top:30px;
min-height:0;
width:100%;
max-width:500px;
justify-self:end;
}

.dashboard-coach{
background:linear-gradient(180deg,#ffffff 0%,#f6fbff 100%);
border-radius:22px;
box-shadow:0 16px 34px rgba(20,47,73,0.14);
border:1px solid #d8e5f2;
padding:20px;
display:flex;
flex-direction:column;
height:520px;
max-height:520px;
overflow:hidden;
}

.timetable-card{
background:linear-gradient(180deg,#fffdf6 0%,#fff7e9 100%);
border:1px solid #efdcb5;
border-radius:18px;
padding:10px;
box-shadow:0 6px 14px rgba(95,72,18,0.08);
}

.todo-card{
background:linear-gradient(180deg,#ffffff 0%,#eef6ff 100%);
border:1px solid #d4e2f2;
border-radius:18px;
padding:10px;
box-shadow:0 6px 14px rgba(44,62,80,0.07);
}

#todoListBtn{
width:100%;
background:#34495e;
color:white;
border:none;
border-radius:10px;
padding:10px 12px;
font-weight:bold;
cursor:pointer;
}

.daily-balance-btn{
background:#ffffff;
border:1px solid #d6dde5;
color:#34495e;
border-radius:10px;
padding:9px 12px;
font-weight:bold;
cursor:pointer;
white-space:nowrap;
}

.spiral-feed-btn{
width:42px;
height:42px;
border:none;
border-radius:50%;
background:#223248;
color:white;
font-size:21px;
font-weight:bold;
cursor:pointer;
box-shadow:0 8px 18px rgba(34,50,72,0.22);
}

.todo-modal{
position:fixed;
inset:0;
z-index:10001;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(35,49,68,0.32);
}

.todo-dialog{
width:min(480px, 100%);
max-height:min(640px, 90vh);
overflow:auto;
background:#ffffff;
border:1px solid #d5dfeb;
border-radius:18px;
box-shadow:0 18px 36px rgba(31,45,64,0.24);
padding:16px;
}

.todo-dialog-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}

.todo-dialog-head h2{
margin:0;
font-size:18px;
}

#todoCloseBtn{
width:32px;
height:32px;
border:none;
border-radius:9px;
background:#e9eef5;
color:#34495e;
font-size:20px;
font-weight:bold;
cursor:pointer;
}

#dailyBalanceCloseBtn{
width:32px;
height:32px;
border:none;
border-radius:9px;
background:#e9eef5;
color:#34495e;
font-size:20px;
font-weight:bold;
cursor:pointer;
}

.daily-balance-dialog{
width:min(760px, 100%);
}

.daily-balance-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:0 0 12px 0;
}

.daily-balance-actions button{
background:#34495e;
border:none;
color:white;
padding:8px 11px;
border-radius:10px;
font-weight:bold;
cursor:pointer;
}

.daily-balance-table-wrap{
overflow:auto;
border:1px solid #d7e2ef;
border-radius:12px;
}

.daily-balance-table{
width:100%;
border-collapse:collapse;
font-size:14px;
}

.daily-balance-table th,
.daily-balance-table td{
padding:10px 12px;
border-bottom:1px solid #e5edf5;
text-align:left;
vertical-align:top;
}

.daily-balance-table th{
background:#f3f7fb;
color:#34495e;
font-size:12px;
text-transform:uppercase;
letter-spacing:0;
}

.daily-balance-table tr:last-child td{
border-bottom:none;
}

.learning-feed-overlay{
position:fixed;
inset:0;
z-index:10005;
background:#0f1720;
color:white;
display:block;
overflow:hidden;
}

.learning-feed-overlay.hidden{
display:none;
}

.learning-feed-topbar{
position:absolute;
top:0;
left:0;
right:0;
z-index:2;
height:68px;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:12px;
padding:12px 16px;
background:rgba(15,23,32,0.94);
border-bottom:1px solid rgba(255,255,255,0.12);
}

.learning-feed-topbar h2{
margin:0;
font-size:18px;
}

.learning-feed-topbar p{
margin:2px 0 0 0;
color:#b8c3cf;
font-size:12px;
}

#learningFeedCloseBtn,
#learningFeedRefreshBtn{
width:38px;
height:38px;
border:1px solid rgba(255,255,255,0.18);
border-radius:12px;
background:rgba(255,255,255,0.08);
color:white;
font-size:22px;
cursor:pointer;
}

.learning-feed-scroller{
height:100vh;
overflow-y:auto;
scroll-snap-type:y mandatory;
scroll-behavior:smooth;
overscroll-behavior-y:contain;
}

.learning-feed-card{
height:100vh;
scroll-snap-align:start;
scroll-snap-stop:always;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:22px;
padding:92px 28px 86px;
background:
linear-gradient(160deg, rgba(46,204,113,0.18), transparent 34%),
linear-gradient(20deg, rgba(52,152,219,0.18), transparent 36%),
#111c27;
border-bottom:1px solid rgba(255,255,255,0.1);
}

.learning-feed-meta{
display:flex;
gap:8px;
flex-wrap:wrap;
font-size:12px;
color:#d8e2ea;
}

.learning-feed-meta span{
padding:6px 9px;
border-radius:999px;
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.12);
}

.learning-feed-text{
font-size:clamp(28px, 6vw, 58px);
line-height:1.08;
font-weight:800;
letter-spacing:0;
max-width:920px;
text-align:center;
}

.learning-feed-answer-btn{
align-self:center;
border:none;
border-radius:12px;
padding:11px 14px;
background:#ffffff;
color:#223248;
font-weight:bold;
cursor:pointer;
}

.learning-feed-answer{
display:none;
font-size:clamp(20px, 3vw, 34px);
line-height:1.2;
color:#dff7d7;
font-weight:700;
}

.learning-feed-answer.visible{
display:block;
}

.learning-feed-next-btn{
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
z-index:3;
width:46px;
height:46px;
border:none;
border-radius:50%;
background:rgba(255,255,255,0.94);
color:#223248;
font-size:24px;
font-weight:bold;
cursor:pointer;
box-shadow:0 10px 24px rgba(0,0,0,0.28);
}

.todo-list{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:12px;
}

.todo-item{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:8px;
padding:9px 10px;
border:1px solid #d7e2ef;
border-radius:12px;
background:#f8fafc;
}

.todo-item.done .todo-text{
text-decoration:line-through;
color:#7f8c8d;
}

.todo-text{
font-size:14px;
line-height:1.35;
color:#2c3e50;
}

.todo-delete-btn{
border:none;
border-radius:8px;
background:#f08a7e;
color:white;
font-weight:bold;
cursor:pointer;
padding:5px 8px;
}

.todo-add-row{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
}

#todoInput{
border:1px solid #cfd9e3;
border-radius:10px;
padding:10px 12px;
font:inherit;
}

#todoAddBtn{
border:none;
border-radius:10px;
background:#2ecc71;
color:white;
font-weight:bold;
cursor:pointer;
padding:10px 12px;
}

.timetable-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:6px;
}

.timetable-head h3{
margin:0;
font-size:13px;
}

#saveTimetableBtn{
background:#355c4c;
color:white;
border:none;
border-radius:8px;
padding:5px 8px;
cursor:pointer;
font-weight:700;
font-size:11px;
}

.timetable-grid{
display:grid;
grid-template-columns:64px repeat(5, minmax(0, 1fr));
gap:4px;
align-items:center;
}

.timetable-corner,
.timetable-col-head,
.timetable-row-head{
background:#fffaf0;
border:1px solid #e6d3aa;
border-radius:8px;
padding:4px 6px;
}

.timetable-col-head{
text-align:center;
font-size:10px;
font-weight:700;
color:#5b5141;
}

.timetable-row-head{
font-size:10px;
font-weight:700;
color:#5b5141;
}

.timetable-cell{
width:100%;
border:1px solid #dcc79a;
background:white;
border-radius:8px;
padding:5px 6px;
font-size:10px;
line-height:1.15;
}

.timetable-cell-wrap{
position:relative;
display:flex;
align-items:center;
}

.timetable-cell-wrap .timetable-cell{
padding-right:20px;
}

.timetable-clear-btn{
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);
width:12px;
height:12px;
border:none;
border-radius:999px;
background:#d8c5a0;
color:#5b5141;
font-size:9px;
line-height:1;
padding:0;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

.dashboard-coach-head h2{
margin:0;
font-size:20px;
}

.dashboard-coach-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}

.dashboard-coach-head p{
margin:8px 0 0 0;
font-size:13px;
color:#667482;
line-height:1.45;
}

.dashboard-coach-messages{
margin-top:16px;
flex:1;
min-height:0;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:10px;
padding-right:4px;
}

.dashboard-coach-msg{
padding:10px 12px;
border-radius:14px;
font-size:14px;
line-height:1.45;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.dashboard-coach-msg.assistant{
background:#f2f6fb;
color:#223248;
align-self:flex-start;
}

.dashboard-coach-msg.user{
background:#dff7d7;
color:#23402d;
align-self:flex-end;
}

.chat-date-separator{
align-self:center;
padding:4px 10px;
border-radius:999px;
background:#eef4f8;
border:1px solid #d8e4ec;
color:#607282;
font-size:11px;
font-weight:800;
letter-spacing:0;
box-shadow:none;
}

.dashboard-coach-composer{
margin-top:14px;
display:grid;
grid-template-columns:1fr auto auto;
gap:10px;
align-items:end;
}

.dashboard-coach-composer textarea{
grid-column:1 / -1;
width:100%;
min-height:92px;
resize:vertical;
padding:12px 14px;
border:1px solid #d6dde5;
border-radius:12px;
font:inherit;
}

#dashboardCoachSendBtn{
background:#34495e;
border:none;
color:white;
padding:10px 16px;
border-radius:10px;
cursor:pointer;
font-weight:bold;
}

.dashboard-coach-msg-content{
white-space:pre-wrap;
}

.dashboard-coach-msg-toolbar{
display:flex;
justify-content:flex-end;
margin-top:8px;
}

.dashboard-speak-btn{
background:#ffffff;
border:1px solid #d6dde5;
color:#34495e;
padding:6px 9px;
border-radius:10px;
cursor:pointer;
font-size:12px;
font-weight:bold;
}

.dashboard-speak-btn.is-active{
background:#e4f2e6;
border-color:#8bb691;
color:#1f4d2f;
}

.voice-input-btn{
background:#ffffff;
border:1px solid #d6dde5;
color:#34495e;
width:44px;
height:40px;
border-radius:10px;
cursor:pointer;
font-size:18px;
display:inline-flex;
align-items:center;
justify-content:center;
}

.voice-input-btn.recording{
background:#ffe5e5;
border-color:#ff6b6b;
color:#b71c1c;
animation:voicePulse 1s infinite;
}

.voice-input-btn.processing{
background:#fff4d9;
border-color:#f0b429;
color:#8a5a00;
}

@keyframes voicePulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.06);}
}

#dashboardCoachClearBtn{
background:#e9eef5;
border:none;
color:#34495e;
padding:9px 12px;
border-radius:10px;
cursor:pointer;
font-weight:bold;
flex-shrink:0;
}

.calendar-header{
display:flex;
align-items:center;
gap:15px;
margin-bottom:0;
}

.calendar-header button{
background:#7f8c8d !important;
border:none;
color:white;
padding:10px 14px;
border-radius:6px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:10px;
width:100%;
}

.calendar-weekday{
text-align:center;
font-weight:bold;
font-size:12px;
color:#5f6c7a;
padding:4px 0 2px;
}

.calendar-day{
background:white;
padding:10px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
cursor:pointer;
position:relative;
height:82px;
display:flex;
flex-direction:column;
justify-content:space-between;
border:none;
text-align:left;
}

.calendar-day:hover{
transform:translateY(-3px);
}

.calendar-day.active{
outline:2px solid #2ecc71;
}

.calendar-day span{
font-size:14px;
font-weight:bold;
}

.calendar-day.empty{
background:transparent;
box-shadow:none;
cursor:default;
}

.day-preview{
font-size:12px;
line-height:1.35;
color:#5f6c7a;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
min-height:32px;
}

.calendar-day.today{
background:#e8f3ff;
}

.calendar-day.has-holiday{
background:#e8f6e8;
}

.calendar-day.has-test{
background:#fff7cf;
}

.calendar-test-popover{
display:none;
position:absolute;
left:calc(100% + 8px);
top:8px;
z-index:20;
min-width:170px;
max-width:220px;
background:#ffffff;
border:1px solid #d9e2ec;
border-radius:8px;
box-shadow:0 12px 26px rgba(31,45,61,0.18);
padding:10px;
color:#2c3e50;
font-size:12px;
line-height:1.35;
pointer-events:none;
}

.calendar-day:nth-child(7n) .calendar-test-popover,
.calendar-day:nth-child(7n - 1) .calendar-test-popover{
left:auto;
right:calc(100% + 8px);
}

.calendar-test-popover strong{
display:block;
margin-bottom:6px;
font-size:12px;
}

.calendar-test-popover span{
display:block;
padding:4px 0;
border-top:1px solid #eef2f7;
}

.calendar-day.has-test:hover .calendar-test-popover{
display:block;
}

.calendar-learning-book{
position:absolute;
right:8px;
top:8px;
border:none;
background:#ffffffcc;
border-radius:7px;
font-size:15px;
line-height:1;
padding:3px;
cursor:pointer;
box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

.calendar-study-plan-box{
margin:14px 0;
padding:12px;
border:1px solid #d9e2ec;
border-radius:8px;
background:#f8fbff;
}

.calendar-study-plan-create,
.calendar-study-plan-toggle{
width:100%;
border:none;
border-radius:8px;
background:#2f7dd3;
color:white;
font-weight:700;
padding:10px 12px;
cursor:pointer;
}

.calendar-study-plan-toggle{
background:#47637a;
}

.calendar-study-plan-create:disabled{
opacity:.65;
cursor:wait;
}

.calendar-study-plan-panel{
margin-top:12px;
display:flex;
flex-direction:column;
gap:8px;
}

.calendar-study-plan-panel.hidden{
display:none;
}

.calendar-study-plan-actions{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
align-items:center;
}

.calendar-study-plan-delete{
border:none;
border-radius:8px;
background:#fff0f0;
color:#9a3434;
font-weight:800;
padding:10px 12px;
cursor:pointer;
}

.calendar-study-plan-delete:disabled{
opacity:.65;
cursor:wait;
}

.calendar-study-plan-create span{
display:inline-flex;
align-items:center;
justify-content:center;
width:20px;
height:20px;
margin-right:6px;
border-radius:999px;
background:#ffffff33;
font-size:18px;
line-height:1;
vertical-align:middle;
}

.study-plan-title{
font-weight:800;
color:#25364a;
margin-bottom:2px;
}

.study-plan-item-list{
display:flex;
flex-direction:column;
gap:8px;
}

.study-plan-item{
display:grid;
grid-template-columns:auto 1fr;
gap:9px;
align-items:flex-start;
padding:9px;
border:1px solid #e2e8f0;
border-radius:8px;
background:white;
font-size:13px;
line-height:1.35;
}

.study-plan-item.done{
opacity:.72;
background:#f3fbf3;
}

.study-plan-item span{
display:flex;
flex-direction:column;
gap:2px;
}

.study-plan-item em{
font-style:normal;
color:#40556f;
}

.study-plan-item small{
color:#6d7d90;
}

.study-plan-empty{
font-size:13px;
color:#66788f;
}

.study-plan-table .study-plan-item{
display:table-row;
padding:0;
border:none;
border-radius:0;
background:transparent;
font-size:13px;
}

.study-plan-table .study-plan-item.done{
opacity:1;
background:#f4faf5;
}

.study-plan-table .study-plan-item.skipped{
background:#fff8f0;
}

.study-plan-table .study-plan-item span{
display:block;
}

.manual-study-plan-modal{
position:fixed;
inset:0;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(19,32,25,.42);
}

.manual-study-plan-dialog{
width:min(420px,100%);
display:flex;
flex-direction:column;
gap:11px;
padding:16px;
border-radius:12px;
background:#fff;
box-shadow:0 20px 48px rgba(19,32,25,.25);
}

.manual-study-plan-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
color:#25364a;
}

.manual-study-plan-head button{
width:30px;
height:30px;
border:none;
border-radius:8px;
background:#edf3ef;
color:#405a49;
font-size:20px;
line-height:1;
cursor:pointer;
}

.manual-study-plan-dialog label{
display:flex;
flex-direction:column;
gap:4px;
font-size:12px;
font-weight:800;
color:#365743;
}

.manual-study-plan-dialog input,
.manual-study-plan-dialog select,
.manual-study-plan-dialog textarea{
width:100%;
border:1px solid #d8e5dd;
border-radius:9px;
padding:8px 10px;
font:inherit;
font-weight:600;
color:#2f3f35;
background:#fbfdfb;
}

.manual-study-plan-actions{
display:flex;
justify-content:flex-end;
gap:8px;
}

.manual-study-plan-actions button{
border:1px solid #cfe0d4;
border-radius:9px;
background:#f6fbf7;
color:#315441;
font-size:12px;
font-weight:800;
padding:8px 12px;
cursor:pointer;
}

.manual-study-plan-actions button:last-child{
background:#2f6d45;
border-color:#2f6d45;
color:#fff;
}

.calendar-confirm-modal{
position:fixed;
inset:0;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(35,49,68,0.32);
}

.calendar-confirm-dialog{
width:min(420px, 100%);
padding:18px;
border-radius:16px;
background:#ffffff;
border:1px solid #d5dfeb;
box-shadow:0 18px 36px rgba(31,45,64,0.24);
}

.calendar-confirm-dialog p{
margin:0;
color:#2c3e50;
line-height:1.45;
font-weight:bold;
}

.calendar-confirm-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:16px;
}

.calendar-confirm-cancel,
.calendar-confirm-yes{
border:none;
border-radius:10px;
padding:10px 14px;
font-weight:bold;
cursor:pointer;
}

.calendar-confirm-cancel{
background:#e9eef5;
color:#34495e;
}

.calendar-confirm-yes{
background:#2ecc71;
color:white;
}

.dot{
width:7px;
height:7px;
background:#3498db;
border-radius:50%;
align-self:center;
opacity:0;
}

.warn{
width:0;
height:0;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-bottom:10px solid #e74c3c;
position:absolute;
right:8px;
bottom:8px;
opacity:0;
}

.calendar-day.has-event .dot{
opacity:1;
}

.calendar-day.has-warning .warn{
opacity:1
}

.event{
background:#f4f6f9;
padding:10px;
margin-top:10px;
border-radius:6px;
}

.day-details{
margin-top:18px;
min-height:0;
padding-bottom:20px;
}

.day-details-card{
background:white;
padding:16px;
border-radius:18px;
box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

.day-details-head h3{
margin:0;
font-size:18px;
}

.day-details-head p{
margin:6px 0 0 0;
color:#667482;
font-size:12px;
}

.day-label{
display:block;
margin-top:10px;
margin-bottom:5px;
font-weight:bold;
color:#2c3e50;
font-size:12px;
}

.day-input{
width:100%;
padding:9px 11px;
border:1px solid #d6dde5;
border-radius:12px;
font-size:13px;
box-sizing:border-box;
}

.day-check{
display:flex;
align-items:center;
gap:8px;
margin-top:10px;
color:#2c3e50;
font-size:12px;
}

.test-topic-picker{
margin-top:10px;
}

.test-items-editor{
margin-top:10px;
display:flex;
flex-direction:column;
gap:10px;
}

.learning-link-panel{
margin-top:12px;
border:1px solid #dbe3ec;
background:#fffdf2;
border-radius:8px;
padding:10px;
}

.add-learning-link-btn{
width:100%;
border:none;
border-radius:8px;
background:#f1c40f;
color:#2c3e50;
font-size:12px;
font-weight:bold;
padding:9px 10px;
cursor:pointer;
margin-top:8px;
}

.learning-notes{
min-height:70px;
resize:vertical;
font-family:inherit;
}

.test-topic-panel{
border:1px solid #dbe3ec;
background:#f8fafc;
border-radius:8px;
padding:10px;
}

.test-topic-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:12px;
color:#2c3e50;
margin-bottom:8px;
}

.test-topic-head span{
color:#667482;
font-size:11px;
}

.test-remove-btn{
border:none;
background:#eef2f7;
color:#9b2c2c;
border-radius:7px;
font-size:11px;
font-weight:bold;
padding:5px 8px;
cursor:pointer;
}

.test-topic-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:7px;
}

.test-topic-option{
display:flex;
align-items:center;
gap:7px;
background:white;
border:1px solid #e1e8f0;
border-radius:8px;
padding:7px 8px;
font-size:12px;
color:#2c3e50;
}

.test-topic-option input{
margin:0;
}

.test-topic-empty,
.test-topic-loading{
font-size:12px;
color:#667482;
}

.test-topic-add{
display:flex;
gap:8px;
margin-top:10px;
}

.test-topic-add input{
margin:0;
}

.test-topic-add button{
border:none;
border-radius:8px;
background:#50657b;
color:white;
font-size:12px;
font-weight:bold;
padding:0 10px;
cursor:pointer;
}

.add-test-item-btn{
border:1px dashed #8aa0b5;
background:white;
color:#2c3e50;
border-radius:8px;
padding:9px 10px;
font-size:12px;
font-weight:bold;
cursor:pointer;
}

.day-actions{
display:flex;
gap:12px;
margin-top:14px;
}

.day-save-btn,
.day-delete-btn{
border:none;
border-radius:10px;
padding:9px 12px;
cursor:pointer;
font-weight:bold;
font-size:12px;
}

.day-save-btn{
background:#2ecc71;
color:white;
}

.day-delete-btn{
background:#eef2f7;
color:#2c3e50;
}

.character{
position:absolute;
bottom:20px;
right:30px;
font-size:40px;
}

.chat{
margin-top:20px;
max-width:500px;
}

#chatMessages{
background:white;
padding:15px;
border-radius:10px;
height:200px;
overflow-y:auto;
margin-bottom:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
#chatMessages{
max-width:700px;
margin-top:15px;
}

#fileList{
max-width:700px;
margin-top:15px;
}

textarea{
padding:12px;
border-radius:10px;
border:1px solid #ddd;
font-family:Arial, sans-serif;
}
#userInput{
width:70%;
padding:10px;
}

.chat button{
padding:10px;
margin-left:5px;
background:#2ecc71;
border:none;
color:white;
border-radius:6px;
cursor:pointer;
}

/* SUBJECT BUTTONS */

.cards{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
margin-top:30px;
max-width:700px;
}

.card{
background:white;
border:none;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.chat-input {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 10px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #ddd;
}

.chat-input textarea {
  flex: 1;
  resize: none;
}