:root{--primary-color: #FFB74D;--primary-light: #FFE0B2;--primary-dark: #F57C00;--secondary-color: #4FC3F7;--secondary-light: #E1F5FE;--secondary-dark: #0288D1;--accent-color: #FF8A65;--background-color: #FFFBF0;--surface-color: #FFFFFF;--text-color: #5D4037;--text-secondary: #8D6E63;--error-color: #E57373;--success-color: #81C784;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--border-radius: 16px;--shadow-sm: 0 2px 8px rgba(255, 183, 77, .15);--shadow-md: 0 4px 12px rgba(255, 183, 77, .25)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:"M PLUS Rounded 1c",Hiragino Maru Gothic ProN,Quicksand,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background-color);color:var(--text-color);line-height:1.6}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden}button:active{transform:scale(.98)}.primary-btn{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;padding:12px 28px;border-radius:50px;font-weight:700;font-size:1rem;box-shadow:0 4px 15px #ffa5004d;letter-spacing:.5px}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ffa50066;filter:brightness(1.05)}.secondary-btn{background:#fff;color:var(--text-color);border:2px solid #f0f0f0;padding:10px 24px;border-radius:50px;font-weight:600;box-shadow:0 2px 8px #0000000d}.secondary-btn:hover{border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 4px 12px #0000001a;transform:translateY(-1px)}.delete-btn{background:linear-gradient(135deg,#ffcdd2,#ef9a9a);color:#c62828;padding:8px 20px;border-radius:50px;font-weight:600;box-shadow:0 2px 8px #d32f2f1a}.delete-btn:hover{background:linear-gradient(135deg,#ef5350,#d32f2f);color:#fff;box-shadow:0 4px 12px #d32f2f4d;transform:translateY(-1px)}.add-btn{background:linear-gradient(135deg,var(--secondary-color) 0%,#4fc3f7 100%);color:#fff;padding:8px 20px;border-radius:50px;font-size:.9rem;font-weight:700;display:flex;justify-content:center;align-items:center;gap:6px;box-shadow:0 4px 10px #29b6f64d}.add-btn:hover{transform:translateY(-2px);box-shadow:0 6px 15px #29b6f666;filter:brightness(1.05)}.confirm-btn{background:linear-gradient(135deg,#2196f3,#1565c0);color:#fff;padding:16px 40px;border-radius:50px;font-weight:900;font-size:1.3rem;box-shadow:0 6px 20px #2196f399;letter-spacing:1.5px;display:flex;justify-content:center;align-items:center;gap:10px;border:2px solid rgba(255,255,255,.2)}.confirm-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px #2196f380;filter:brightness(1.1)}.actions{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}@media(max-width:480px){.actions{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px!important;width:100%;justify-content:center}.confirm-btn{padding:10px 20px;font-size:1rem;white-space:nowrap;width:auto;min-width:auto}.secondary-btn{padding:10px 16px;font-size:.9rem;white-space:nowrap;width:auto;min-width:auto}}input,select,textarea{font-family:inherit;border:2px solid #FFE0B2;border-radius:8px;padding:8px 12px;outline:none;transition:border-color .2s}input:focus,select:focus{border-color:var(--primary-color)}h1,h2,h3,h4,h5,h6{color:var(--text-color);margin-bottom:var(--spacing-sm)}h1{background:linear-gradient(45deg,#ffb74d,#ff8a65);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}.container{max-width:600px;margin:0 auto;padding:var(--spacing-md);min-height:100vh}.tables-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg)}.table-card{background:#fff;padding:var(--spacing-md);border-radius:var(--border-radius);box-shadow:var(--shadow-md);border-top:6px solid var(--primary-color);min-height:200px;transition:all .2s ease}.table-card.clickable-table{cursor:pointer;border-top-color:var(--secondary-color);box-shadow:0 0 0 2px var(--secondary-color);background:#fdfdfd}.table-card.clickable-table:hover{background:#f0f8ff;transform:translateY(-2px)}.table-card h4{margin-top:0;text-align:center;color:var(--text-color);border-bottom:2px solid #f0f0f0;padding-bottom:8px}.table-students{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.student-item{padding:6px 12px;border-radius:20px;font-size:.9rem;font-weight:500;cursor:pointer;transition:transform .1s;border:2px solid transparent}.student-item:hover{transform:scale(1.05)}.student-item.boy{background:#e3f2fd;color:#1565c0}.student-item.girl{background:#fce4ec;color:#c2185b}.student-item.selected{border-color:var(--primary-color);box-shadow:0 0 8px #ffa50080;transform:scale(1.1);z-index:10}.class-manager{padding:var(--spacing-md);padding-bottom:80px}.class-list{display:grid;gap:var(--spacing-md);margin-top:var(--spacing-md)}.inline-create-form{display:flex;gap:var(--spacing-sm);align-items:center}.inline-create-form input{flex:1;padding:12px;border:2px solid #ddd;border-radius:8px;font-size:1rem}.inline-create-form button{white-space:nowrap}@media(max-width:480px){.inline-create-form{flex-direction:column;align-items:stretch}.inline-create-form button{width:100%}}.class-card{background:#fff;padding:var(--spacing-md);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:transform .2s,box-shadow .2s}.class-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.class-info h3{margin:0;color:var(--primary-dark)}.class-info p{margin:0;color:var(--text-secondary);font-size:.9rem}.delete-btn{background:transparent;color:var(--error-color);border:1px solid var(--error-color);padding:6px 12px;border-radius:8px;font-size:.8rem}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.modal-content{background:#fff;padding:var(--spacing-lg);border-radius:var(--border-radius);width:90%;max-width:400px;box-shadow:var(--shadow-md);text-align:center;animation:scaleIn .2s ease}.modal-content h3{margin-top:0;color:var(--text-color)}.modal-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg);justify-content:center}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.modal-content{background:#fff;padding:24px;border-radius:16px;width:90%;max-width:400px;box-shadow:0 10px 25px #0003;animation:slideUp .3s ease-out;text-align:center}.modal-title{margin-top:0;margin-bottom:12px;color:var(--text-color);font-size:1.25rem}.modal-message{color:var(--text-secondary);margin-bottom:24px;line-height:1.5}.modal-actions{display:flex;justify-content:center;gap:12px}.modal-actions button{min-width:100px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.student-list-container{padding:var(--spacing-sm)}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.add-btn{background:var(--secondary-color);color:#fff;border:none;padding:6px 12px;border-radius:4px}.add-student-form{background:#f0f0f0;padding:var(--spacing-sm);border-radius:4px;display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.add-student-form input{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:1rem}.gender-toggle{display:flex;gap:4px;background:#e0e0e0;padding:2px;border-radius:4px}.gender-btn{flex:1;border:none;padding:8px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s;background:transparent;color:#666}.gender-btn.active{background:#fff;box-shadow:0 1px 3px #0000001a;font-weight:700}.gender-btn.boy.active{color:var(--secondary-color);border-bottom:2px solid var(--secondary-color)}.gender-btn.girl.active{color:#e91e63;border-bottom:2px solid #E91E63}.save-btn{background:var(--primary-color);color:#fff;border:none;padding:10px 16px;border-radius:4px;font-weight:700;margin-top:4px}.cancel-btn{background:#999;color:#fff;border:none;padding:8px 12px;border-radius:4px;margin-top:4px}.students-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacing-sm)}.student-card{background:#fff;border:1px solid #ddd;border-radius:4px;padding:var(--spacing-sm);display:flex;justify-content:space-between;align-items:center}.student-card.boy{border-left:4px solid var(--secondary-color)}.student-card.girl{border-left:4px solid #E91E63}.student-info{display:flex;align-items:center;gap:8px}.student-gender{cursor:pointer}.icon-btn{background:none;border:none;font-size:1.2rem;padding:0}.seating-config{background:#fff;padding:var(--spacing-md);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-lg)}.config-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.config-header h3{margin-bottom:0}.toggle-mode-btn{background:transparent;border:2px solid var(--primary-color);color:var(--primary-color);padding:6px 16px;border-radius:20px;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .2s}.toggle-mode-btn:hover{background:var(--primary-light)}.toggle-mode-btn.active{background:var(--primary-color);color:#fff}.config-row{display:flex;gap:var(--spacing-lg);flex-wrap:wrap}.config-row label{display:flex;align-items:center;gap:8px;font-weight:700}.config-row input{width:80px}.detailed-config{display:flex;flex-direction:column;gap:var(--spacing-md)}.validation-status{display:flex;gap:var(--spacing-md);padding:12px;background:#f9f9f9;border-radius:8px;margin-bottom:8px;flex-wrap:wrap}.status-item{font-weight:700;padding:4px 12px;border-radius:12px;background:#eee;color:#666}.status-item.success{background:#e8f5e9;color:#2e7d32}.status-item.error{background:#ffebee;color:#c62828;border:1px solid #FFCDD2}.table-type-row{display:flex;align-items:center;gap:var(--spacing-md);padding:12px;border:1px solid #eee;border-radius:12px;background:#fff;flex-wrap:wrap}.type-inputs{display:flex;align-items:center;gap:12px;flex:1;flex-wrap:wrap}.type-inputs label{display:flex;align-items:center;gap:6px;font-size:.9rem}.type-inputs input{width:60px}.separator{color:#999;font-weight:700}.remove-type-btn{background:#ffebee;color:#c62828;border:none;padding:6px 12px;border-radius:8px;font-size:.85rem;cursor:pointer;font-weight:700}.remove-type-btn:hover{background:#ffcdd2}.add-type-btn{align-self:flex-start;background:var(--secondary-light);color:var(--secondary-dark);border:2px dashed var(--secondary-color);padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s}.add-type-btn:hover{background:var(--secondary-color);color:#fff;border-style:solid}.constraints-manager{padding:var(--spacing-md)}.constraint-form{margin-bottom:var(--spacing-lg)}.student-selector{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#fff;border:2px solid #eee;border-radius:var(--border-radius);max-height:200px;overflow-y:auto}.student-selector.small-selector{max-height:150px;flex:1}.student-constraints{background:#fff;padding:var(--spacing-md);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-lg);border:2px solid var(--primary-light)}.constraint-section{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid #eee}.constraint-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.row{display:flex;gap:var(--spacing-sm);align-items:center;margin-bottom:var(--spacing-sm);flex-wrap:wrap}.add-constraint-btn{height:fit-content;align-self:flex-start;margin-top:4px;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;padding:10px 24px;border-radius:50px;font-weight:700;font-size:1rem;box-shadow:0 4px 15px #ffa5004d;border:none;cursor:pointer;transition:all .2s ease}.add-constraint-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ffa50066;filter:brightness(1.05)}.add-constraint-btn:disabled{background:#ccc;box-shadow:none;cursor:not-allowed;transform:none}.do-not-pair-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}.do-not-pair-list li{padding:4px 12px;border-radius:20px;font-size:.9rem;display:flex;align-items:center;gap:6px}.do-not-pair-list li.boy{background:#e3f2fd;color:#1565c0;border:1px solid #BBDEFB}.do-not-pair-list li.girl{background:#fce4ec;color:#c2185b;border:1px solid #F8BBD0}.small-btn{padding:2px 8px;font-size:.8rem;border-radius:12px;background:#0000001a;color:inherit;border:none;cursor:pointer}.constraint-card{background:#fff;padding:12px;border-radius:12px;box-shadow:var(--shadow-sm);border-left:4px solid #ddd}.constraint-card.boy-border{border-left-color:#42a5f5}.constraint-card.girl-border{border-left-color:#ec407a}.constraint-card strong.boy{color:#1565c0}.constraint-card strong.girl{color:#c2185b}.partner-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:.85rem;margin-top:4px;border:1px solid transparent}.partner-tag.boy{background:#e3f2fd;color:#1565c0;border-color:#bbdefb}.partner-tag.girl{background:#fce4ec;color:#c2185b;border-color:#f8bbd0}.remove-tag-btn{background:none;border:none;color:#999;font-weight:700;cursor:pointer;padding:0 4px}.remove-tag-btn:hover{color:var(--error-color)}.constraints-overview{margin-top:40px}.overview-section{margin-bottom:48px}.hint-text{font-size:.9rem;color:var(--text-secondary);margin-bottom:8px}.seating-chart{padding:var(--spacing-md)}.chart-controls{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);justify-content:center;align-items:center;flex-wrap:wrap}.chart-controls button{white-space:nowrap}.actions{display:flex;gap:var(--spacing-md);justify-content:center;margin-bottom:var(--spacing-md)}@media(max-width:480px){.actions{flex-direction:column}.actions button{width:100%}.chart-controls{gap:var(--spacing-sm)}}.history-view{display:flex;gap:var(--spacing-md);height:calc(100vh - 200px)}.history-sidebar{width:150px;border-right:1px solid #eee;padding-right:var(--spacing-sm);overflow-y:auto}.history-sidebar ul{list-style:none;padding:0}.history-sidebar li{padding:8px;cursor:pointer;border-radius:8px;margin-bottom:4px;transition:background .2s}.history-sidebar li:hover{background-color:var(--secondary-light)}.history-sidebar li.active{background-color:var(--primary-color);color:#fff;font-weight:700}.history-content{flex:1;overflow-y:auto;padding:var(--spacing-sm)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.delete-btn{background-color:var(--error-color);color:#fff;border:none;padding:8px 16px;border-radius:8px;margin-left:8px}.placeholder{text-align:center;color:var(--text-secondary);margin-top:var(--spacing-xl)}@media(max-width:1024px){.history-view{flex-direction:column;height:auto}.history-sidebar{width:100%;border-right:none;border-bottom:1px solid #eee;padding-right:0;padding-bottom:var(--spacing-sm);overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.history-sidebar ul{display:flex;gap:var(--spacing-sm);padding-bottom:4px}.history-sidebar li{white-space:nowrap;margin-bottom:0;flex-shrink:0;padding:6px 16px;background:#f5f5f5;border:1px solid #e0e0e0}.history-sidebar li.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.history-content{overflow-y:visible;padding:0;margin-top:var(--spacing-md)}.history-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.history-header .actions{width:100%;display:flex;gap:8px;flex-wrap:wrap}.history-header .primary-btn,.history-header .secondary-btn,.history-header .delete-btn{padding:8px 16px;font-size:.9rem;flex:0 0 auto;width:auto;text-align:center;white-space:nowrap;display:flex;justify-content:center;align-items:center}}.dashboard-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.back-btn{background:none;border:none;font-size:1rem;color:var(--primary-dark);padding:0}.tabs{display:flex;overflow-x:auto;border-bottom:1px solid #ddd;margin-bottom:var(--spacing-md);gap:var(--spacing-sm)}.tabs button{background:none;border:none;padding:8px 16px;font-weight:500;color:var(--text-secondary);white-space:nowrap;border-bottom:2px solid transparent}.tabs button.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.tab-content{min-height:300px}