:root{--color-bg-default:#fff;--color-bg-dark:#111;--color-bg-muted:#f8f9fa;--color-text-primary:#4d4d4d;--color-text-secondary:#333;--color-text-muted:gray;--color-text-light:#888;--color-text-contrast:#fff;--color-theme-primary:#0066ad;--color-theme-secondary:#33a3ff;--color-theme-accent:#ff4d4d;--color-theme-border:#dee2e6;--color-success:#28a745;--color-warning:#ffc107;--color-danger:#dc3545;--font-sans:"BIZ UDPGothic", "BIZ UDPゴシック", "Helvetica Neue", Arial, sans-serif;--font-mono:Consolas, "Courier New", monospace;--gap-xs:4px;--gap-sm:8px;--gap-md:16px;--gap-lg:24px;--gap-xl:32px;--gap-2xl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 3px #00000014;--shadow-md:0 2px 8px #0000001a;--shadow-lg:0 4px 16px #0000001f;--header-height:56px;--sidebar-width:240px;--transition-fast:.15s ease;--transition-normal:.25s ease}[data-theme=dark]{--color-bg-default:#111;--color-bg-muted:#1a1a1a;--color-text-primary:#fff;--color-text-secondary:#f0f0f0;--color-text-muted:#aaa;--color-theme-border:#333}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-sans);color:var(--color-text-primary);background-color:var(--color-bg-muted);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}body{min-height:100vh;margin:0}a{color:var(--color-theme-primary);text-decoration:none}a:hover{text-decoration:underline}.app-layout{flex-direction:column;min-height:100vh;display:flex}.app-header{z-index:100;height:var(--header-height);background-color:var(--color-theme-primary);color:var(--color-text-contrast);padding:0 var(--gap-lg);box-shadow:var(--shadow-md);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.header-left,.header-right{align-items:center;gap:var(--gap-md);display:flex}.app-title{color:var(--color-text-contrast);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:18px;font-weight:700}.menu-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:4px;padding:4px;display:none}.menu-toggle span{background:var(--color-text-contrast);border-radius:1px;width:20px;height:2px;display:block}.app-body{flex:1;display:flex}.sidebar{width:var(--sidebar-width);background:var(--color-bg-default);border-right:1px solid var(--color-theme-border);padding:var(--gap-md) 0;height:calc(100vh - var(--header-height));top:var(--header-height);flex-shrink:0;position:sticky;overflow-y:auto}.nav-list{list-style:none}.nav-link{padding:var(--gap-sm) var(--gap-lg);color:var(--color-text-primary);transition:all var(--transition-fast);border-left:3px solid #0000;font-size:14px;font-weight:500;display:block}.nav-link:hover{background:var(--color-bg-muted);color:var(--color-theme-primary);border-left-color:var(--color-theme-secondary);text-decoration:none}.nav-link.active{background:var(--color-bg-muted);color:var(--color-theme-primary);border-left-color:var(--color-theme-primary);font-weight:700}.main-content{padding:var(--gap-xl);flex:1;width:100%;max-width:1200px}.auth-page{background:linear-gradient(135deg, var(--color-theme-primary) 0%, var(--color-theme-secondary) 100%);justify-content:center;align-items:center;min-height:100vh;display:flex}.auth-card{background:var(--color-bg-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--gap-2xl);width:100%;max-width:420px;margin:var(--gap-lg)}.auth-title{color:var(--color-theme-primary);text-align:center;margin-bottom:var(--gap-xs);font-size:24px;font-weight:700}.auth-subtitle{color:var(--color-text-muted);text-align:center;margin-bottom:var(--gap-xl);font-size:14px}.btn{justify-content:center;align-items:center;gap:var(--gap-sm);font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:1px solid #0000;padding:10px 20px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover{text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-theme-primary);color:var(--color-text-contrast)}.btn-primary:hover:not(:disabled){background:#005a9a}.btn-secondary{background:var(--color-bg-muted);color:var(--color-text-primary);border-color:var(--color-theme-border)}.btn-secondary:hover:not(:disabled){background:#e9ecef}.btn-danger{background:var(--color-danger);color:var(--color-text-contrast)}.btn-danger:hover:not(:disabled){background:#c82333}.btn-ghost{color:currentColor;background:0 0}.btn-ghost:hover:not(:disabled){background:#ffffff26}.btn-sm{padding:6px 12px;font-size:13px}.btn-lg{padding:12px 28px;font-size:16px}.btn-block{width:100%}.form-group{margin-bottom:var(--gap-md)}.form-label{color:var(--color-text-secondary);margin-bottom:var(--gap-xs);font-size:13px;font-weight:600;display:block}.form-input,.form-select,.form-textarea{width:100%;font-family:var(--font-sans);color:var(--color-text-primary);background:var(--color-bg-default);border:1px solid var(--color-theme-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast);outline:none;padding:10px 12px;font-size:14px}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-theme-primary);box-shadow:0 0 0 3px #0066ad26}.form-textarea{resize:vertical;min-height:100px}.form-error{color:var(--color-danger);margin-top:var(--gap-xs);font-size:13px}.form-hint{color:var(--color-text-muted);margin-top:var(--gap-xs);font-size:12px}.card{background:var(--color-bg-default);border:1px solid var(--color-theme-border);border-radius:var(--radius-md);padding:var(--gap-lg);box-shadow:var(--shadow-sm)}.card-header{margin-bottom:var(--gap-md);justify-content:space-between;align-items:center;display:flex}.card-title{color:var(--color-text-secondary);font-size:16px;font-weight:700}.page-header{margin-bottom:var(--gap-xl);justify-content:space-between;align-items:center;gap:var(--gap-md);flex-wrap:wrap;display:flex}.page-title{color:var(--color-text-secondary);border-left:4px solid var(--color-theme-primary);padding-left:var(--gap-md);font-size:22px;font-weight:700}.table-wrap{overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:14px}.data-table th{text-align:left;padding:var(--gap-sm) var(--gap-md);background:var(--color-bg-muted);color:var(--color-text-secondary);border-bottom:2px solid var(--color-theme-border);white-space:nowrap;font-size:13px;font-weight:600}.data-table td{padding:var(--gap-sm) var(--gap-md);border-bottom:1px solid var(--color-theme-border);vertical-align:middle}.data-table tr:hover td{background:var(--color-bg-muted)}.badge{white-space:nowrap;border-radius:999px;align-items:center;padding:2px 10px;font-size:12px;font-weight:600;display:inline-flex}.user-role-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}.role-admin{background:var(--color-theme-accent);color:#fff}.role-teacher{background:var(--color-theme-secondary);color:#fff}.role-student{color:var(--color-text-primary);background:#e9ecef}.badge-comment{color:#1565c0;background:#e3f2fd}.badge-vote{color:#e65100;background:#fff3e0}.badge-file{color:#2e7d32;background:#e8f5e9}.user-name{font-size:14px;font-weight:500}.grid{gap:var(--gap-lg);display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-auto{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.stat-card{background:var(--color-bg-default);border:1px solid var(--color-theme-border);border-radius:var(--radius-md);padding:var(--gap-lg);box-shadow:var(--shadow-sm);text-align:center}.stat-value{color:var(--color-theme-primary);font-size:32px;font-weight:700}.stat-label{color:var(--color-text-muted);margin-top:var(--gap-xs);font-size:13px}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--color-text-muted)}.text-danger{color:var(--color-danger)}.text-success{color:var(--color-success)}.text-sm{font-size:13px}.mt-sm{margin-top:var(--gap-sm)}.mt-md{margin-top:var(--gap-md)}.mt-lg{margin-top:var(--gap-lg)}.mb-md{margin-bottom:var(--gap-md)}.mb-lg{margin-bottom:var(--gap-lg)}.flex{display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.flex-gap-sm{gap:var(--gap-sm)}.flex-gap-md{gap:var(--gap-md)}.flex-wrap{flex-wrap:wrap}.hidden{display:none!important}.empty-state{text-align:center;padding:var(--gap-2xl);color:var(--color-text-muted)}.empty-state-icon{margin-bottom:var(--gap-md);opacity:.4;font-size:48px}.empty-state-text{margin-bottom:var(--gap-md);font-size:16px}.alert{padding:var(--gap-md);border-radius:var(--radius-md);margin-bottom:var(--gap-md);font-size:14px}.alert-error{color:var(--color-danger);background:#fde8e8;border:1px solid #f5c6cb}.alert-success{color:#155724;background:#d4edda;border:1px solid #c3e6cb}.alert-info{color:#1565c0;background:#e3f2fd;border:1px solid #bbdefb}.loading{padding:var(--gap-2xl);color:var(--color-text-muted);justify-content:center;align-items:center;display:flex}.modal-overlay{z-index:200;padding:var(--gap-lg);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--color-bg-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:560px;max-height:90vh;padding:var(--gap-xl);overflow-y:auto}.modal-title{color:var(--color-text-secondary);margin-bottom:var(--gap-lg);font-size:18px;font-weight:700}.modal-actions{justify-content:flex-end;gap:var(--gap-sm);margin-top:var(--gap-lg);display:flex}.tabs{border-bottom:2px solid var(--color-theme-border);margin-bottom:var(--gap-lg);gap:0;display:flex}.tab-btn{padding:var(--gap-sm) var(--gap-lg);font-family:var(--font-sans);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;font-size:14px;font-weight:500}.tab-btn:hover{color:var(--color-theme-primary)}.tab-btn.active{color:var(--color-theme-primary);border-bottom-color:var(--color-theme-primary);font-weight:700}.invite-code{font-family:var(--font-mono);letter-spacing:2px;color:var(--color-theme-primary);background:var(--color-bg-muted);padding:var(--gap-sm) var(--gap-lg);border-radius:var(--radius-md);border:2px dashed var(--color-theme-border);font-size:20px;font-weight:700;display:inline-block}.bar-chart{gap:var(--gap-sm);flex-direction:column;display:flex}.bar-row{align-items:center;gap:var(--gap-md);display:flex}.bar-label{text-align:right;flex-shrink:0;width:120px;font-size:13px}.bar-track{background:var(--color-bg-muted);border-radius:var(--radius-sm);flex:1;height:28px;overflow:hidden}.bar-fill{background:var(--color-theme-primary);border-radius:var(--radius-sm);height:100%;transition:width var(--transition-normal);min-width:2px}.bar-count{width:40px;color:var(--color-text-muted);font-size:13px}.portfolio-editor{border:1px solid var(--color-theme-border);border-radius:var(--radius-md);overflow:hidden}.editor-toolbar{gap:var(--gap-xs);padding:var(--gap-sm);background:var(--color-bg-muted);border-bottom:1px solid var(--color-theme-border);flex-wrap:wrap;display:flex}.toolbar-btn{border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-primary);background:0 0;border:1px solid #0000;padding:4px 8px;font-size:14px}.toolbar-btn:hover{background:var(--color-bg-default);border-color:var(--color-theme-border)}.editor-content{min-height:200px;padding:var(--gap-md);font-family:var(--font-sans);outline:none;font-size:15px;line-height:1.7}.editor-content:focus{box-shadow:inset 0 0 0 2px #0066ad26}@media (width<=768px){.menu-toggle{display:flex}.sidebar{left:-100%;top:var(--header-height);width:260px;height:calc(100vh - var(--header-height));z-index:90;transition:left var(--transition-normal);box-shadow:var(--shadow-lg);position:fixed}.sidebar.open{left:0}.main-content{padding:var(--gap-md)}.page-header{flex-direction:column;align-items:flex-start}.grid-2,.grid-3,.grid-auto{grid-template-columns:1fr}.data-table{font-size:13px}.data-table th,.data-table td{padding:var(--gap-xs) var(--gap-sm)}.header-right .user-name{display:none}.modal{margin:var(--gap-sm);padding:var(--gap-lg)}.auth-card{padding:var(--gap-lg)}}@media (width<=480px){.header-right .user-role-badge{display:none}.stat-value{font-size:24px}}