:root{--primary: #4CAF50;--on-primary: #003910;--primary-container: #1F5A2A;--on-primary-container: #A5D6A7;--primary-fixed: #A5D6A7;--primary-fixed-dim: #81C784;--on-primary-fixed: #003910;--on-primary-fixed-variant: #1F5A2A;--secondary: #9575CD;--on-secondary: #2A1A4A;--secondary-container: #4A3D6A;--on-secondary-container: #D1C4E9;--secondary-fixed: #D1C4E9;--secondary-fixed-dim: #B39DDB;--on-secondary-fixed: #2A1A4A;--on-secondary-fixed-variant: #4A3D6A;--tertiary: #E91E63;--on-tertiary: #5A0030;--tertiary-container: #8A2D54;--on-tertiary-container: #F8BBD0;--tertiary-fixed: #F8BBD0;--tertiary-fixed-dim: #F48FB1;--on-tertiary-fixed: #5A0030;--on-tertiary-fixed-variant: #8A2D54;--error: #F44336;--on-error: #5F1410;--error-container: #8C2D28;--on-error-container: #FFCDD2;--surface-dim: #1A1C1E;--surface: #212427;--surface-bright: #3A3D40;--surface-container-lowest: #0F1113;--surface-container-low: #1E2022;--surface-container: #25282A;--surface-container-high: #2F3235;--surface-container-highest: #3A3D40;--inverse-surface: #E3E2E6;--inverse-on-surface: #2F3135;--inverse-primary: #2E7D32;--on-surface: #E3E2E6;--on-surface-variant: #C7C5CA;--outline: #919094;--outline-variant: #444746;--scrim: rgba(0, 0, 0, .7);--shadow: rgba(0, 0, 0, .8);--filter-primary: brightness(0) saturate(100%) invert(48%) sepia(96%) saturate(506%) hue-rotate(76deg) brightness(104%) contrast(93%);--filter-on-primary: brightness(0) saturate(100%) invert(11%) sepia(28%) saturate(2964%) hue-rotate(103deg) brightness(95%) contrast(101%);--filter-primary-container: brightness(0) saturate(100%) invert(21%) sepia(26%) saturate(1392%) hue-rotate(83deg) brightness(94%) contrast(91%);--filter-on-primary-container: brightness(0) saturate(100%) invert(87%) sepia(8%) saturate(1273%) hue-rotate(68deg) brightness(92%) contrast(87%);--filter-primary-fixed: brightness(0) saturate(100%) invert(87%) sepia(8%) saturate(1273%) hue-rotate(68deg) brightness(92%) contrast(87%);--filter-primary-fixed-dim: brightness(0) saturate(100%) invert(72%) sepia(19%) saturate(471%) hue-rotate(73deg) brightness(91%) contrast(85%);--filter-on-primary-fixed: brightness(0) saturate(100%) invert(11%) sepia(28%) saturate(2964%) hue-rotate(103deg) brightness(95%) contrast(101%);--filter-on-primary-fixed-variant: brightness(0) saturate(100%) invert(21%) sepia(26%) saturate(1392%) hue-rotate(83deg) brightness(94%) contrast(91%);--filter-secondary: brightness(0) saturate(100%) invert(45%) sepia(48%) saturate(789%) hue-rotate(230deg) brightness(91%) contrast(87%);--filter-on-secondary: brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(2845%) hue-rotate(232deg) brightness(91%) contrast(95%);--filter-secondary-container: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(1234%) hue-rotate(221deg) brightness(91%) contrast(84%);--filter-on-secondary-container: brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(678%) hue-rotate(217deg) brightness(94%) contrast(88%);--filter-secondary-fixed: brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(678%) hue-rotate(217deg) brightness(94%) contrast(88%);--filter-secondary-fixed-dim: brightness(0) saturate(100%) invert(72%) sepia(24%) saturate(543%) hue-rotate(220deg) brightness(93%) contrast(86%);--filter-on-secondary-fixed: brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(2845%) hue-rotate(232deg) brightness(91%) contrast(95%);--filter-on-secondary-fixed-variant: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(1234%) hue-rotate(221deg) brightness(91%) contrast(84%);--filter-tertiary: brightness(0) saturate(100%) invert(26%) sepia(88%) saturate(3698%) hue-rotate(327deg) brightness(95%) contrast(87%);--filter-on-tertiary: brightness(0) saturate(100%) invert(9%) sepia(82%) saturate(4518%) hue-rotate(319deg) brightness(88%) contrast(108%);--filter-tertiary-container: brightness(0) saturate(100%) invert(23%) sepia(28%) saturate(1789%) hue-rotate(302deg) brightness(91%) contrast(88%);--filter-on-tertiary-container: brightness(0) saturate(100%) invert(90%) sepia(13%) saturate(543%) hue-rotate(298deg) brightness(102%) contrast(96%);--filter-tertiary-fixed: brightness(0) saturate(100%) invert(90%) sepia(13%) saturate(543%) hue-rotate(298deg) brightness(102%) contrast(96%);--filter-tertiary-fixed-dim: brightness(0) saturate(100%) invert(76%) sepia(16%) saturate(789%) hue-rotate(301deg) brightness(99%) contrast(94%);--filter-on-tertiary-fixed: brightness(0) saturate(100%) invert(9%) sepia(82%) saturate(4518%) hue-rotate(319deg) brightness(88%) contrast(108%);--filter-on-tertiary-fixed-variant: brightness(0) saturate(100%) invert(23%) sepia(28%) saturate(1789%) hue-rotate(302deg) brightness(91%) contrast(88%);--filter-error: brightness(0) saturate(100%) invert(41%) sepia(93%) saturate(3245%) hue-rotate(346deg) brightness(97%) contrast(93%);--filter-on-error: brightness(0) saturate(100%) invert(15%) sepia(44%) saturate(2234%) hue-rotate(348deg) brightness(90%) contrast(94%);--filter-error-container: brightness(0) saturate(100%) invert(26%) sepia(42%) saturate(1456%) hue-rotate(342deg) brightness(88%) contrast(89%);--filter-on-error-container: brightness(0) saturate(100%) invert(91%) sepia(16%) saturate(432%) hue-rotate(313deg) brightness(103%) contrast(100%);--filter-surface-dim: brightness(0) saturate(100%) invert(8%) sepia(6%) saturate(567%) hue-rotate(169deg) brightness(95%) contrast(93%);--filter-surface: brightness(0) saturate(100%) invert(13%) sepia(5%) saturate(543%) hue-rotate(169deg) brightness(94%) contrast(87%);--filter-surface-bright: brightness(0) saturate(100%) invert(22%) sepia(4%) saturate(234%) hue-rotate(169deg) brightness(93%) contrast(90%);--filter-surface-container-lowest: brightness(0) saturate(100%) invert(4%) sepia(8%) saturate(789%) hue-rotate(169deg) brightness(97%) contrast(96%);--filter-surface-container-low: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(456%) hue-rotate(169deg) brightness(95%) contrast(92%);--filter-surface-container: brightness(0) saturate(100%) invert(14%) sepia(5%) saturate(345%) hue-rotate(169deg) brightness(94%) contrast(88%);--filter-surface-container-high: brightness(0) saturate(100%) invert(18%) sepia(4%) saturate(289%) hue-rotate(169deg) brightness(93%) contrast(90%);--filter-surface-container-highest: brightness(0) saturate(100%) invert(22%) sepia(4%) saturate(234%) hue-rotate(169deg) brightness(93%) contrast(90%);--filter-inverse-surface: brightness(0) saturate(100%) invert(93%) sepia(2%) saturate(234%) hue-rotate(205deg) brightness(98%) contrast(90%);--filter-inverse-on-surface: brightness(0) saturate(100%) invert(18%) sepia(4%) saturate(234%) hue-rotate(187deg) brightness(92%) contrast(88%);--filter-inverse-primary: brightness(0) saturate(100%) invert(35%) sepia(46%) saturate(987%) hue-rotate(88deg) brightness(93%) contrast(88%);--filter-on-surface: brightness(0) saturate(100%) invert(93%) sepia(2%) saturate(234%) hue-rotate(205deg) brightness(98%) contrast(90%);--filter-on-surface-variant: brightness(0) saturate(100%) invert(83%) sepia(3%) saturate(234%) hue-rotate(205deg) brightness(96%) contrast(88%);--filter-outline: brightness(0) saturate(100%) invert(60%) sepia(2%) saturate(234%) hue-rotate(205deg) brightness(92%) contrast(86%);--filter-outline-variant: brightness(0) saturate(100%) invert(27%) sepia(4%) saturate(234%) hue-rotate(75deg) brightness(91%) contrast(87%);--filter-white: brightness(0) saturate(100%) invert(100%);--max-width: 680px}.hover-inset-primary{box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s ease,background .2s ease}.hover-inset-primary:hover{box-shadow:inset 0 0 0 2px var(--primary);background:transparent}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;background:var(--surface);color:var(--on-surface);min-height:100vh;margin:0;padding:0}#app{padding:24px;max-width:1200px;margin:0 auto}.editor-container{background:var(--surface-container-low);border-radius:12px;padding:24px}.loading{color:var(--on-surface-variant);padding:40px;text-align:center}.hidden{display:none!important}.editor-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;margin-bottom:24px}.user-info{display:flex;align-items:center;gap:12px}.user-avatar{display:flex;align-items:center;justify-content:center}.user-avatar avatar-component{display:block}.user-details{display:flex;flex-direction:column;gap:2px}.user-name{font-size:18px;font-weight:600;color:var(--on-surface)}.custom-games-label{font-size:12px;color:var(--on-surface-variant)}.games-limit{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.games-count-display{display:flex;align-items:baseline;gap:4px;font-size:24px;font-weight:600}#games-count{color:var(--primary)}#games-count.at-limit{color:var(--error)}.limit-separator{color:var(--on-surface-variant)}#games-limit{color:var(--on-container)}.games-section{margin-bottom:32px}.games-section:last-child{margin-bottom:0}.games-section h2{font-size:16px;font-weight:600;color:var(--on-surface-variant);margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}.games-list{display:grid;grid-template-columns:1fr;gap:12px}@media(min-width:768px){.games-list{grid-template-columns:repeat(2,1fr)}}.game-card{background:var(--surface-container);border-radius:8px;padding:16px;display:flex;align-items:flex-start;gap:16px;min-width:0}.game-icon{width:120px;height:120px;border-radius:8px;background:var(--surface-container-highest);flex-shrink:0;overflow:hidden}.game-icon img{width:100%;height:100%;object-fit:cover}.game-info{flex:1;min-width:0}.game-name{font-size:16px;font-weight:600;color:var(--on-surface);margin-bottom:4px}.game-description{font-size:13px;color:var(--on-surface-variant);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.game-custom-count{font-size:13px;color:var(--on-primary-container);margin-top:4px}.game-info md-button{margin-top:1rem}.game-actions{display:flex;gap:8px;flex-shrink:0}.game-btn{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s}.game-btn-primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.game-btn-primary:hover{background:var(--primary-container);border-color:var(--primary-container)}.game-btn-primary:disabled{background:var(--surface-container-highest);border-color:var(--outline);color:var(--on-surface-variant);cursor:not-allowed}.game-btn-secondary{background:transparent;color:var(--on-surface);border-color:var(--outline)}.game-btn-secondary:hover{background:var(--surface-container-highest);border-color:var(--outline-variant)}.game-btn-danger{background:transparent;color:var(--error);border-color:var(--outline)}.game-btn-danger:hover{background:var(--error-container);border-color:var(--error)}.not-supported{font-size:12px;color:var(--on-surface-variant);background:var(--surface-container-highest);padding:6px 12px;border-radius:4px}.not-logged-in-content{text-align:center;padding:60px 24px}.not-logged-in-content h2{font-size:20px;font-weight:600;margin-bottom:12px}.not-logged-in-content p{color:var(--on-surface-variant)}.not-logged-in-content a{color:var(--tertiary);text-decoration:none}.not-logged-in-content a:hover{text-decoration:underline}.manage-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}.manage-back-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;border:1px solid var(--outline);border-radius:6px;color:var(--on-surface);font-size:14px;cursor:pointer;transition:background .15s,border-color .15s}.manage-back-btn:hover{background:var(--surface-container-highest);border-color:var(--outline-variant)}.manage-header h2{font-size:18px;font-weight:600;color:var(--on-surface);margin:0}.pack-list{display:flex;flex-direction:column;gap:12px}.pack-list-empty{color:var(--on-surface-variant);text-align:center;padding:32px}.pack-item{background:var(--surface-container-high);border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:16px}.pack-item-icon{width:120px;height:120px;border-radius:8px;background:var(--surface-container-highest);flex-shrink:0;overflow:hidden}.pack-item-icon img{width:100%;height:100%;object-fit:cover}.pack-item-info{flex:1;min-width:0}.pack-item-name{font-size:15px;font-weight:500;color:var(--on-surface);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pack-item-meta{display:flex;gap:12px;align-items:center}.pack-item-lang{font-size:12px;color:var(--tertiary);font-weight:500}.pack-item-date{font-size:12px;color:var(--on-surface-variant)}.pack-item-actions{display:flex;gap:6px;flex-shrink:0}.pack-btn{padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s}.pack-btn-edit{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.pack-btn-edit:hover{background:var(--primary-container)}.pack-btn-rename{background:transparent;color:var(--on-surface);border-color:var(--outline)}.pack-btn-rename:hover{background:var(--surface-container-highest);border-color:var(--outline-variant)}.pack-btn-delete{background:transparent;color:var(--error);border-color:var(--outline)}.pack-btn-delete:hover{background:var(--error-container);border-color:var(--error)}.pack-item-name-input{background:var(--surface-container-high);border:1px solid var(--tertiary);border-radius:4px;color:var(--on-surface);font-size:15px;font-weight:500;padding:4px 8px;width:100%;outline:none}.pack-item-name-input:focus{box-shadow:0 0 0 2px var(--tertiary-container)}.editor-actions{margin-top:24px;display:flex;gap:12px;align-items:center}#btn-save-bottom{margin-left:auto}.pack-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;padding-bottom:20px}.pack-left{display:flex;align-items:flex-start;gap:16px}.pack-image-upload{flex-shrink:0}.pack-image-upload image-uploader{width:120px;height:120px}.pack-image-box{width:120px;height:120px;border:2px dashed var(--outline);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--surface-container-high);overflow:hidden}.pack-image-box:hover{border-color:var(--tertiary);background:var(--surface-container)}.pack-image-box img{width:100%;height:100%;object-fit:cover}.upload-hint{font-size:32px;color:var(--on-surface-variant);font-weight:300}.pack-info{display:flex;flex-direction:column;gap:8px;flex:1}.pack-info-row{display:flex;align-items:center;gap:12px}.menu-wrapper{margin-left:8px}.pack-name-input{background:transparent;border:none;color:var(--on-surface);font-size:24px;font-weight:600;outline:none;padding:0;flex:1;min-width:150px}.pack-name-input::placeholder{color:var(--on-surface-variant)}.word-count{color:var(--on-surface-variant);font-size:14px}.pack-language{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--on-surface-variant)}.pack-language select{background:var(--surface-container-highest);border:1px solid var(--outline);color:var(--on-surface);padding:4px 8px;border-radius:6px;font-size:14px;cursor:pointer}.pack-language select:focus{outline:none;border-color:var(--primary)}.pack-actions{display:flex;gap:12px;flex-shrink:0}