:root{--bg-primary: #222222;--bg-secondary: #303236;--bg-tertiary: #3a3a3f;--bg-active: #131313;--bg-overlay: rgba(0, 0, 0, .6);--text-primary: white;--text-secondary: rgba(255, 255, 255, .65);--text-muted: rgba(255, 255, 255, .35);--text-disabled: rgba(255, 255, 255, .3);--border-subtle: rgba(255, 255, 255, .08);--border-default: rgba(255, 255, 255, .15);--border-hover: rgba(255, 255, 255, .35);--border-color-primary: #f6f6f6;--border-color-secondary: rgb(47, 104, 190);--accent-blue: #4a9eff;--accent-nav: #6366f1;--accent-nav-subtle: rgba(99, 102, 241, .12);--accent-nav-subtle-hover: rgba(99, 102, 241, .22);--accent-nav-border: rgba(99, 102, 241, .25);--accent-nav-border-hover: rgba(99, 102, 241, .5);--accent-nav-text: #c7d2fe;--accent-nav-text-hover: #e0e7ff;--bg-hover: rgba(255, 255, 255, .05);--text-label: #718096;--card-border-default: #4a4b50;--card-accent-welcome: #6366f1;--card-accent-progress: #10b981;--card-accent-activity: #3b82f6;--card-accent-mastery: #f59e0b;--card-accent-actions: #ec4899;--color-danger: #c0392b;--color-danger-hover: #e74c3c;--color-success: #27ae60;--color-warning-hard: #f39c12;--color-warning-medium: #f1c40f;--button-size: 50px;--icon-size: 16px;--border-radius: 20px;--spacing-sm: 2px;--spacing-md: 10px;--spacing-lg: 80px;--font-size-sm: 16px;--font-size-md: 18px;--font-size-lg: 36px;--card-iframe-bg: #0f1b35}.page-title-row{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}.page-title-row .deck-selector{background-color:transparent;border:1.5px solid var(--border-default);transition:border-color .15s,background-color .15s}.page-title-row .deck-selector:hover{border-color:var(--border-hover);background-color:var(--bg-hover)}.page-title-row .deck-selector:focus{border-color:var(--border-color-secondary);background-color:transparent}.page-title{margin:0;padding:0;font-size:var(--font-size-lg);font-weight:700}@media (max-width: 768px){.page-title-row{flex-direction:column;align-items:center;text-align:center;gap:10px}}*{scrollbar-width:thin;scrollbar-color:var(--bg-secondary) var(--bg-primary)}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-secondary);border-radius:var(--border-radius);border:3px solid var(--bg-primary);background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--border-color-secondary);background-clip:padding-box}@keyframes spin{to{transform:rotate(360deg)}}.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border-default);border-top-color:var(--text-secondary);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes shimmer{0%{background-position:-600px 0}to{background-position:600px 0}}.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:1200px 100%;animation:shimmer 1.6s infinite linear;border-radius:4px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5;font-weight:400;color:var(--text-primary);margin:0;background-color:var(--bg-primary)}.card-builder-page{display:flex;flex-direction:column;height:100%;gap:16px;overflow:hidden}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0}.title-row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.save-template-button{height:var(--button-size);padding:0 16px;background-color:var(--accent-indigo);color:var(--text-primary);border:none;border-radius:var(--border-radius);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity .15s}.save-template-button:hover:not(:disabled){opacity:.85}.save-template-button:disabled{opacity:.5;cursor:not-allowed}.save-status{font-size:var(--font-size-sm);font-weight:500}.editor-controls{display:flex;align-items:center;gap:10px}.deck-selector{width:fit-content;height:var(--button-size);padding:0 36px 0 12px;background-color:var(--bg-secondary);color:var(--text-primary);border:none;border-radius:var(--border-radius);font-size:var(--font-size-sm);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;max-width:240px}.tab-group{display:flex;gap:0}.tab-button{background-color:var(--bg-secondary);border:none;color:var(--text-primary);width:var(--button-size);height:var(--button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);font-weight:500;transition:none}.tab-button:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.tab-button:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}.tab-button:hover{background-color:var(--bg-active)}.tab-button.active{background-color:var(--bg-active);color:var(--text-primary)}@media (max-width: 768px){.card-builder-page{height:auto;overflow:visible}.editor-controls{flex-direction:column;align-items:flex-start}.workspace{grid-template-columns:1fr;grid-template-rows:360px 360px;flex:none}}.navbar{display:flex;flex-direction:column}.navbar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;width:100%;flex:1}.navbar li{width:100%;border-left:3px solid transparent;transition:background .15s ease,border-color .15s ease}.navbar li a{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;color:var(--text-secondary);font-size:.875rem;transition:color .15s ease;white-space:nowrap;overflow:hidden}.navbar li.active{border-left-color:var(--accent-nav);background-color:var(--accent-nav-subtle)}.navbar li.active a{color:var(--text-primary)}.navbar li:hover:not(.active){background-color:var(--bg-hover)}.navbar li:hover a{color:var(--text-primary)}.material-symbols-outlined{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;font-size:24px;color:inherit;flex-shrink:0;transition:color .15s ease}.navbar-footer{display:flex;align-items:center;justify-content:flex-end;padding:12px;flex-shrink:0;border-top:1px solid var(--border-subtle)}.navbar-logout{background:none;border:none;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:.875rem;flex:1;transition:background .15s ease,color .15s ease}.navbar--collapsed .navbar-logout{flex:0}.navbar-logout:hover{background:var(--border-subtle);color:var(--color-danger)}.navbar-toggle{background:none;border:none;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;padding:6px;border-radius:6px;transition:background .15s ease,color .15s ease}.navbar-toggle:hover{background:var(--border-subtle);color:var(--text-primary)}.navbar--collapsed .nav-label{display:none}.navbar--collapsed .navbar li a{justify-content:center;padding:12px 0}.navbar--collapsed .navbar-footer{justify-content:center;gap:4px;padding:8px}@media (max-width: 1024px){.navbar-footer{display:none}.navbar--collapsed .nav-label{display:inline}.navbar ul{flex:1;flex-direction:row;justify-content:space-around;align-items:stretch}.navbar li{border-left:none;border-bottom:3px solid transparent;flex:1;display:flex;align-items:stretch}.navbar li.active{border-bottom-color:var(--accent-nav);background-color:var(--accent-nav-subtle)}.navbar li a{flex-direction:column;justify-content:center;gap:4px;padding:6px 4px;width:100%;font-size:.7rem}.material-symbols-outlined{font-size:22px}}.app-container{display:flex;height:100vh}.navbar{position:fixed;left:0;top:0;height:100vh;width:200px;background-color:#1a1a1a;z-index:100;box-shadow:#1a1a1a 0 0 10px;transition:width .2s ease;overflow:hidden}.navbar.navbar--collapsed{width:64px}.main-content{margin-left:200px;padding:20px 80px 80px;flex:1;overflow-y:auto;transition:margin-left .2s ease;height:100%;box-sizing:border-box}.navbar.navbar--collapsed~.main-content{margin-left:64px}.subtitle{font-size:24px;font-weight:700;margin-bottom:20px;color:#aaa}@media (max-width: 1024px){.app-container{flex-direction:column}.navbar,.navbar.navbar--collapsed{position:fixed;top:0;left:0;width:100%;height:80px;z-index:100;box-shadow:#1a1a1a 0 0 10px}.main-content,.navbar.navbar--collapsed~.main-content{margin-left:0;margin-top:80px;padding:20px 16px;height:auto;overflow-y:visible}}.editor-format-controls{display:flex;align-content:center;gap:10px;flex-wrap:wrap}.editor-format-controls button{background-color:var(--bg-secondary);border:none;color:var(--text-primary);width:var(--button-size);height:var(--button-size);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-sm);border-width:0px;transition:none}.editor-format-controls button:hover{background-color:var(--bg-active)}.editor-format-controls button:focus{border-color:var(--border-color-secondary);border-width:2px}.editor-format-controls button .material-symbols-outlined{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;color:var(--text-primary);font-size:var(--icon-size);pointer-events:none}.button-left{border-radius:var(--border-radius) 0px 0px var(--border-radius);border-right-width:0px}.button-right{border-radius:0px var(--border-radius) var(--border-radius) 0px;border-left-width:0px}.button-middle{border-radius:0}.button-group{display:flex;gap:0px}@media (max-width: 1024px){.editor-format-controls button{width:40px;height:40px}}.code-editor{display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s;background:var(--bg-primary);border:1px solid var(--border-subtle);border-radius:12px;min-height:0;height:100%}.code-editor:focus-within{border-color:var(--border-color-secondary)}.code-editor-header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border-subtle);background:var(--bg-secondary);flex-shrink:0;border-radius:12px 12px 0 0}.code-editor-dot{width:10px;height:10px;border-radius:50%;background:var(--border-color-secondary);opacity:.8}.code-editor-filename{font-size:13px;color:var(--text-secondary);letter-spacing:.04em}.code-editor-hint{margin-left:auto;font-size:11px;color:var(--text-muted);opacity:.6}.code-editor-body{flex:1;position:relative;overflow:hidden}.code-editor-line-numbers{position:absolute;top:0;left:0;bottom:0;width:38px;display:flex;flex-direction:column;padding:16px 0;border-right:1px solid var(--border-subtle);background:#00000026;pointer-events:none;overflow:hidden}.line-num{font-size:11px;color:var(--text-muted);opacity:.6;text-align:right;padding-right:8px;line-height:21px;flex-shrink:0}.code-editor-textarea{position:absolute;inset:0 0 0 38px;background:transparent;border:none;color:var(--text-primary);font-size:13px;line-height:21px;padding:16px 14px;resize:none;outline:none;caret-color:var(--text-primary);tab-size:2}.code-editor-textarea::placeholder{color:var(--text-muted);opacity:.5}html{margin:0;padding:0}.card-iframe{font-size:36px;display:block;margin:0 auto;width:100%;height:100%}iframe{background-color:var(--card-iframe-bg);border-width:0;border-radius:10px;overflow:hidden;width:100%;height:100%;pointer-events:none}@media (max-width: 1024px){.card-iframe{font-size:32px}iframe{height:100%;max-width:100%}}.preview-pane{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:0 16px 16px;gap:0;box-sizing:border-box}@media (max-width: 1024px){.preview-pane{height:auto;overflow:visible}.preview-pane-body{flex:none;min-height:unset}.preview-card-wrapper{max-height:none}}.preview-pane-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;flex-shrink:0}.preview-label{font-weight:600;font-size:14px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.preview-side-badge{font-size:12px;font-weight:600;text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--border-default);color:var(--text-primary);letter-spacing:.08em}.preview-pane-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0}.preview-card-wrapper{width:100%;aspect-ratio:3 / 2;max-height:100%;border-radius:12px;overflow:hidden}.preview-flip-hint{background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0;transition:color .2s}.preview-flip-hint:hover{color:var(--text-secondary)}.preview-flip-icon{font-size:15px}.preview-insert-bar{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0 0;border-top:1px solid var(--border-subtle);margin-top:12px}.preview-insert-label{font-size:12px;color:var(--text-muted);white-space:nowrap}.preview-insert-chip{background:var(--bg-hover);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:12px;font-family:monospace;padding:4px 10px;border-radius:6px;cursor:pointer;transition:background .15s,border-color .15s}.preview-insert-chip:hover{background:var(--border-default);border-color:var(--border-default);color:var(--text-primary)}.add-card-page{display:flex;flex-direction:column;height:100%;gap:16px;overflow:hidden}.deck-selector{width:fit-content;height:var(--button-size);padding:0 36px 0 12px;background-color:var(--bg-secondary);color:var(--text-primary);border:none;border-radius:var(--border-radius);font-size:var(--font-size-sm);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23aaa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;min-width:0;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-selector:focus{outline:none;background-color:var(--bg-active)}.deck-selector-row{display:flex;align-items:center;gap:8px}.new-deck-btn{height:var(--button-size);padding:0 12px;background-color:var(--bg-secondary);color:var(--text-muted);border:none;border-radius:var(--border-radius);font-size:var(--font-size-sm);cursor:pointer;white-space:nowrap;transition:color .15s,background-color .15s}.new-deck-btn:hover{background-color:var(--bg-active);color:var(--text-primary)}.inline-deck-form{display:flex;align-items:center;gap:8px}.inline-deck-input{height:var(--button-size);padding:0 12px;background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--border-radius);font-size:var(--font-size-sm);outline:none;min-width:160px}.inline-deck-input:focus{border-color:var(--border-hover)}.inline-deck-form button{height:var(--button-size);padding:0 12px;background-color:var(--bg-secondary);color:var(--text-muted);border:none;border-radius:var(--border-radius);font-size:var(--font-size-sm);cursor:pointer;transition:color .15s,background-color .15s}.inline-deck-form button:hover{background-color:var(--bg-active);color:var(--text-primary)}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:24px;flex:1;min-height:0;overflow:hidden}.input-column{display:flex;flex-direction:column;min-height:0;overflow:hidden;gap:12px}.input-section{display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1;min-height:0;padding-right:8px}@keyframes field-pop-out{0%{transform:scale(1);opacity:1}20%{transform:scale(1.02);opacity:1}to{transform:scale(.88);opacity:0}}.field-wrapper--removing{animation:field-pop-out .2s ease-in forwards;pointer-events:none;transform-origin:center top}.template-loading{display:flex;justify-content:center;padding:10px 0}.add-field-button{width:100%;padding:10px;font-size:var(--font-size-sm);background:transparent;color:var(--text-muted);border:1.5px dashed var(--border-default);border-radius:var(--border-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:color .15s,border-color .15s}.add-field-button:hover{color:var(--text-secondary);border-color:var(--border-hover)}.add-field-button .material-symbols-outlined{font-size:18px}.save-card-button{width:100%;margin-top:4px;padding:12px;font-size:var(--font-size-sm);background-color:var(--bg-secondary);color:var(--text-primary);border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s}.save-card-button:hover,.save-card-button:active{background-color:var(--bg-active)}.disabled{opacity:.5;pointer-events:none}.template-status{color:var(--text-muted);font-size:var(--font-size-sm);padding:12px 0}.template-status--empty{color:var(--text-secondary)}.save-card-row{display:flex;align-items:center;gap:12px;margin-top:4px}.save-card-row .save-card-button{flex:1;margin-top:0}.save-status{font-size:var(--font-size-sm);font-weight:500;white-space:nowrap}.save-status--saved{color:var(--color-success)}.save-status--error{color:var(--color-danger-hover)}.save-card-button:disabled{opacity:.5;cursor:not-allowed}.delete-field-overlay{position:fixed;inset:0;background-color:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100}.delete-field-modal{background-color:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--border-radius);padding:24px;max-width:380px;width:90%;display:flex;flex-direction:column;gap:20px}.delete-field-modal__message{color:var(--text-primary);font-size:var(--font-size-sm);line-height:1.5;margin:0}.delete-field-modal__actions{display:flex;gap:10px;justify-content:flex-end}.delete-field-modal__confirm,.delete-field-modal__cancel{height:var(--button-size);padding:0 16px;border:none;border-radius:var(--border-radius);font-size:var(--font-size-sm);cursor:pointer;transition:background-color .15s}.delete-field-modal__confirm{background-color:var(--color-danger, #e05252);color:#fff}.delete-field-modal__confirm:hover{background-color:var(--color-danger-hover, #c0392b)}.delete-field-modal__cancel{background-color:var(--bg-active);color:var(--text-primary)}.delete-field-modal__cancel:hover{background-color:var(--border-default)}@media (max-width: 770px){.add-card-page{overflow-y:auto;height:auto}.workspace{display:flex;flex-direction:column;overflow:visible;min-height:unset;flex:none}.input-column{overflow:visible;min-height:unset;flex:none;height:auto}.input-section{overflow-y:visible;flex:none;min-height:unset}.deck-selector{max-width:100%}}.field-container{display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--border-subtle);border-radius:var(--border-radius);padding:10px 14px 12px;transition:border-color .15s;background-color:var(--bg-secondary)}.field-container--focused{border-color:var(--border-color-secondary)}.field-header{display:flex;align-items:center;justify-content:space-between}.field-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);transition:color .15s}.field-name--focused{color:var(--border-color-secondary)}.field-header-right{display:flex;align-items:center;gap:8px}.field-char-count{font-size:11px;color:var(--text-disabled);font-variant-numeric:tabular-nums;transition:color .15s}.field-char-count--limit{color:var(--color-danger-hover)}.field-name--editable{cursor:pointer;display:flex;align-items:center;gap:4px}.field-name--editable:hover{color:var(--text-secondary)}.field-name-edit-icon{font-size:11px;opacity:0;transition:opacity .15s}.field-name--editable:hover .field-name-edit-icon{opacity:1}.field-name-input{background:transparent;border:none;border-bottom:1px solid var(--border-color-secondary);color:var(--border-color-secondary);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;outline:none;width:120px;padding:0}.field-delete-btn{background:none;border:none;color:var(--text-disabled);cursor:pointer;padding:0;display:flex;align-items:center;transition:color .15s;line-height:1}.field-delete-btn:hover{color:var(--color-danger-hover)}.field-delete-btn .material-symbols-outlined{font-size:15px}.field-input{resize:none;background:transparent;color:var(--text-primary);border:none;outline:none;width:100%;box-sizing:border-box;font-size:var(--font-size-sm);font-family:inherit;line-height:1.5;padding:0}.decks-page{background-color:var(--bg-primary);color:var(--text-primary)}.decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.deck-tile-skeleton{width:100%;height:320px;background-color:var(--bg-secondary);border-left:10px solid var(--bg-tertiary);border-radius:5px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px}.deck-tile-skeleton__title{height:20px;width:60%}.deck-tile-skeleton__sub{height:13px;width:40%}.add-deck-tile{width:100%;height:320px;background:transparent;color:var(--text-muted);border:1.5px dashed var(--border-default);border-radius:5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:var(--font-size-sm);transition:color .15s,border-color .15s}.add-deck-tile:hover{color:var(--text-secondary);border-color:var(--border-hover)}.add-deck-tile .material-symbols-outlined{font-size:32px}.add-deck-form-tile{width:100%;height:320px;background:transparent;border:1.5px dashed var(--border-default);border-radius:5px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;padding:16px;box-sizing:border-box}.add-deck-input{background:var(--border-subtle);border:1px solid var(--border-default);border-radius:4px;color:var(--text-primary);font-size:var(--font-size-sm);padding:6px 8px;outline:none}.add-deck-input:focus{border-color:var(--border-hover)}.add-deck-input::placeholder{color:var(--text-disabled)}.add-deck-submit,.add-deck-cancel{border-radius:4px;font-size:var(--font-size-sm);padding:6px 8px;cursor:pointer;border:none}.add-deck-submit{background:var(--border-default);color:var(--text-primary)}.add-deck-submit:hover{background:var(--border-hover)}.add-deck-cancel{background:transparent;color:var(--text-muted)}.add-deck-cancel:hover{color:var(--text-secondary)}@media (max-width: 770px){.decks{grid-template-columns:repeat(2,1fr);gap:16px}.deck-tile,.deck-tile-skeleton,.add-deck-tile,.add-deck-form-tile{height:200px}}.deck-tile{width:100%;height:320px;background-color:var(--bg-secondary);display:flex;flex-direction:column;justify-content:center;align-items:center;border-left-width:10px;border-left-color:var(--text-label);border-left-style:solid;border-radius:5px;position:relative;transition:transform .2s ease-in-out}.deck-tile:hover{cursor:pointer;transform:scale(.95);transition:transform .05s ease-in-out}.deck-menu{position:absolute;right:5px;top:0;font-size:36px;background-color:transparent;border-width:0px;font-weight:700;color:var(--text-primary)}.deck-menu:hover{cursor:pointer;color:var(--text-primary);background-color:transparent}.deck-menu:active{transform:scale(.9)}.deck-content{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;margin:10px}.created-by{color:var(--text-label);position:absolute;bottom:0}.deck-menu-backdrop{position:fixed;inset:0;z-index:10}.deck-menu-dropdown{position:absolute;top:36px;right:5px;z-index:11;background:var(--bg-tertiary);border:1px solid var(--border-subtle);border-radius:6px;min-width:120px;overflow:hidden;display:flex;flex-direction:column}.deck-menu-item{background:transparent;border:none;color:var(--text-primary);padding:10px 14px;text-align:left;cursor:pointer;font-size:var(--font-size-sm)}.deck-menu-item:hover:not(:disabled){background:var(--border-subtle)}.deck-menu-item:disabled{color:var(--text-disabled);cursor:default}.deck-menu-item--danger:hover{color:var(--color-danger-hover)}.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);z-index:100}.modal-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:10px;padding:28px;width:340px;display:flex;flex-direction:column;gap:12px}.modal-title{margin:0;font-size:1.1rem;color:var(--text-primary)}.modal-body{margin:0;font-size:var(--font-size-sm);color:var(--text-secondary);line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.modal-btn{padding:8px 16px;border-radius:6px;border:none;font-size:var(--font-size-sm);cursor:pointer}.modal-btn--cancel{background:var(--border-subtle);color:var(--text-secondary)}.modal-btn--cancel:hover{background:var(--border-default)}.modal-btn--danger{background:var(--color-danger);color:var(--text-primary)}.modal-btn--danger:hover{background:var(--color-danger-hover)}.deck-detail-page{display:flex;flex-direction:column;min-height:100%}.deck-detail-loading{display:flex;align-items:center;justify-content:center;height:200px}.deck-detail-not-found{padding:40px;color:var(--text-secondary);text-align:center}.deck-detail-header{padding-bottom:24px;flex-shrink:0}.deck-detail-back{background:none;border:none;color:var(--text-muted);font-size:13px;cursor:pointer;padding:0;margin-bottom:14px;display:inline-flex;align-items:center;gap:4px;transition:color .15s}.deck-detail-back:hover{color:var(--text-primary)}.deck-detail-title-block{padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--border-subtle)}.deck-detail-description{margin:6px 0 0;color:var(--text-secondary);font-size:14px}.dd-stats{display:flex;flex-direction:row;gap:10px;margin-bottom:18px}.stat-tile{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-top:3px solid var(--card-border-default);border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;align-items:center;min-width:76px;gap:3px}.stat-tile--due{border-top-color:#e74c3c}.stat-tile--new{border-top-color:var(--accent-blue)}.stat-tile--mastered{border-top-color:var(--color-success)}.stat-number{font-size:24px;font-weight:700;line-height:1;color:var(--text-primary)}.stat-tile--due .stat-number{color:#e74c3c}.stat-tile--new .stat-number{color:var(--accent-blue)}.stat-tile--mastered .stat-number{color:var(--color-success)}.stat-label{font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--text-muted);text-transform:uppercase}.study-now-btn{width:100%;padding:15px 24px;border:none;border-radius:var(--border-radius);background:var(--accent-nav);color:#fff;font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background-color .15s,transform .1s,box-shadow .15s;box-shadow:0 4px 16px #6366f159}.study-now-btn:hover:not(:disabled){background:#4f46e5;transform:translateY(-1px);box-shadow:0 6px 20px #6366f180}.study-now-btn:disabled{background:var(--bg-secondary);color:var(--text-muted);cursor:default;box-shadow:none}.study-now-icon{font-size:13px;opacity:.9}.deck-detail-body{display:grid;grid-template-columns:1fr 400px;align-items:start;flex:1;border-top:1px solid var(--border-subtle)}.deck-card-list{border-right:1px solid var(--border-subtle);min-width:0;overflow:hidden}.deck-card-list-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--bg-primary);z-index:2}.deck-card-list-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.deck-card-list-actions{display:flex;align-items:center;gap:14px}.deck-card-list-count{font-size:13px;color:var(--text-muted)}.add-card-inline-btn{padding:5px 12px;background:var(--accent-nav-subtle);border:1px solid var(--accent-nav-border);border-radius:6px;color:var(--accent-nav-text);font-size:12px;font-weight:500;cursor:pointer;transition:background-color .15s,border-color .15s}.add-card-inline-btn:hover{background:var(--accent-nav-subtle-hover);border-color:var(--accent-nav-border-hover)}.deck-cards-empty{padding:48px 24px;text-align:center;color:var(--text-secondary);font-size:14px}.deck-add-card-btn{margin-top:14px;padding:9px 18px;background:var(--accent-nav-subtle);border:1px solid var(--accent-nav-border);border-radius:8px;color:var(--accent-nav-text);font-size:14px;cursor:pointer;transition:background-color .15s}.deck-add-card-btn:hover{background:var(--accent-nav-subtle-hover)}.card-rows{display:flex;flex-direction:column;padding:12px 16px;gap:10px}.card-row{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 0;cursor:pointer;border-radius:var(--border-radius);border:1.5px solid var(--border-subtle);background:var(--bg-secondary);box-shadow:0 2px 10px #0000004d;transition:all .2s ease;overflow:hidden}.card-row:hover{background:var(--bg-tertiary);border-color:var(--accent-blue);transform:translate(5px);box-shadow:0 6px 20px #00000073}.card-row.selected{border-color:var(--accent-nav);background:var(--accent-nav-subtle);box-shadow:0 4px 16px #6366f133}.card-row-bar{width:4px;align-self:stretch;border-radius:0;flex-shrink:0}.card-row.status-new .card-row-bar{background:var(--accent-blue)}.card-row.status-due .card-row-bar{background:#e74c3c}.card-row.status-learning .card-row-bar{background:#f59e0b}.card-row.status-mastered .card-row-bar{background:var(--color-success)}.card-row-content{flex:1;min-width:0}.card-row-front{display:block;font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-row.selected .card-row-front{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}.card-row-badge{font-size:10px;font-weight:700;letter-spacing:.07em;padding:3px 7px;border-radius:4px;flex-shrink:0;text-transform:uppercase}.badge-new{background:#4a9eff26;color:var(--accent-blue)}.badge-due{background:#e74c3c26;color:#e74c3c}.badge-learning{background:#f59e0b26;color:#f59e0b}.badge-mastered{background:#27ae6026;color:var(--color-success)}.card-row-chevron{color:var(--text-muted);font-size:20px;flex-shrink:0;padding-right:10px;transition:color .15s}.card-row:hover .card-row-chevron{color:var(--text-secondary)}.deck-card-panel{padding:24px;position:sticky;top:0;max-height:100vh;overflow-y:auto}.panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 16px;gap:10px;color:var(--text-muted);text-align:center}.panel-empty-icon{font-size:42px;opacity:.25;line-height:1}.panel-empty p{margin:0;font-size:14px}.card-detail{display:flex;flex-direction:column;gap:18px}.card-detail-top-row{display:flex;align-items:center;justify-content:space-between}.card-detail-heading{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.card-flip-tabs{display:flex;gap:3px;background:var(--bg-secondary);border-radius:8px;padding:3px}.flip-tab{flex:1;padding:7px 14px;border:none;border-radius:6px;background:none;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}.flip-tab.active{background:var(--bg-tertiary);color:var(--text-primary)}.flip-tab:not(.active):hover{color:var(--text-primary)}.card-preview{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:12px;padding:24px 20px;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.card-preview-text{margin:0;font-size:16px;line-height:1.5;color:var(--text-primary)}.card-preview-hint{margin:0;font-size:12px;color:var(--text-muted);font-style:italic}.card-detail-section{display:flex;flex-direction:column}.card-section-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}.card-fields{display:flex;flex-direction:column;gap:8px}.card-field-row{display:grid;grid-template-columns:96px 1fr;gap:8px;font-size:13px;align-items:baseline}.card-field-name{color:var(--text-muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-field-value{color:var(--text-primary);word-break:break-word;line-height:1.4}.card-field-empty{color:var(--text-muted);font-style:italic}.card-delete-btn{width:100%;padding:10px 16px;background:#c0392b14;border:1px solid rgba(192,57,43,.25);border-radius:8px;color:var(--color-danger-hover);font-size:13px;font-weight:500;cursor:pointer;transition:background-color .15s,border-color .15s}.card-delete-btn:hover{background:#c0392b2e;border-color:#c0392b73}.deck-detail-page .modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);z-index:100}.deck-detail-page .modal-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--border-radius);padding:28px;width:340px;display:flex;flex-direction:column;gap:12px}@media (max-width: 1100px){.deck-detail-body{grid-template-columns:1fr}.deck-card-list{border-right:none;border-bottom:1px solid var(--border-subtle)}.deck-card-panel{position:static;max-height:none}}@media (max-width: 768px){.deck-detail-header{padding:20px}.dd-stats{gap:8px}.stat-tile{flex:1;min-width:0;padding:10px 8px}}.home-page{background-color:var(--bg-primary);color:var(--text-primary);height:100%;display:flex;flex-direction:column}.home-page-container{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"welcome study-progress quick-actions" "weekly-activity mastery-distribution quick-actions";gap:16px;padding-top:20px;flex:1;min-height:0}.welcome{grid-area:welcome}.study-progress{grid-area:study-progress}.weekly-activity{grid-area:weekly-activity}.mastery-distribution{grid-area:mastery-distribution}.quick-actions{grid-area:quick-actions}.dashboard-card.welcome{border-top-color:var(--card-accent-welcome)}.dashboard-card.study-progress{border-top-color:var(--card-accent-progress)}.dashboard-card.weekly-activity{border-top-color:var(--card-accent-activity)}.dashboard-card.mastery-distribution{border-top-color:var(--card-accent-mastery)}.dashboard-card.quick-actions{border-top-color:var(--card-accent-actions)}@media (max-width: 768px){.home-page-container{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"welcome" "study-progress" "quick-actions" "weekly-activity" "mastery-distribution"}}.dashboard-card{background-color:var(--bg-secondary);padding:24px;border-radius:12px;border:1px solid var(--border-subtle);border-top:4px solid var(--card-border-default);box-shadow:0 2px 8px #0000004d}.dashboard-card h2{margin:0 0 16px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-label)}.greeting-text{margin:0 0 20px;color:var(--text-secondary);font-size:.95rem}.greeting-stats{display:flex;gap:32px}.stat-number{display:block;font-size:2rem;font-weight:700;color:var(--text-primary);line-height:1}.stat-label{display:block;font-size:.75rem;color:var(--text-label);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}.progress-value{font-size:2.5rem;font-weight:700;color:var(--card-accent-progress);line-height:1;margin-bottom:12px}.progress-bar-track{height:6px;background:var(--border-subtle);border-radius:3px;overflow:hidden;margin-bottom:10px}.progress-bar-fill{height:100%;background:var(--card-accent-progress);border-radius:3px;transition:width .5s ease}.progress-label{margin:0;color:var(--text-label);font-size:.85rem}.card-placeholder{margin:0;color:var(--text-muted);font-size:.875rem;font-style:italic}.quick-action-buttons{display:flex;flex-direction:column;gap:10px}.quick-action-btn{background-color:var(--accent-nav-subtle);color:var(--accent-nav-text);border:1px solid var(--accent-nav-border);padding:10px 16px;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;width:100%;text-align:left;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.quick-action-btn:hover{background-color:var(--accent-nav-subtle-hover);border-color:var(--accent-nav-border-hover);color:var(--accent-nav-text-hover)}.study-page{background-color:var(--bg-primary);color:var(--text-primary);padding:40px 20px}.study-page-container{display:flex;flex-direction:column;align-items:center;width:100%;min-height:calc(100vh - 80px)}.study-header{display:flex;justify-content:space-between;align-items:center;height:100px}.study-header.study-progress{font-size:1rem;color:var(--text-muted);display:flex;align-items:flex-end;justify-content:center}.deck-selection{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:100%;gap:20px}.subtitle{font-size:1.2rem;margin-bottom:30px;color:var(--text-muted);font-weight:400}.deck-option{background:var(--bg-secondary);padding:20px 24px;border-radius:var(--border-radius);cursor:pointer;transition:all .2s ease;border:1.5px solid var(--border-subtle);box-shadow:0 2px 10px #0000004d;display:flex;justify-content:space-between;align-items:center}.deck-option:hover{background:var(--bg-tertiary);border-color:var(--accent-blue);transform:translate(5px);box-shadow:0 6px 20px #00000073}.deck-info{flex:1}.deck-info h3{font-size:1.3rem;margin-bottom:8px;font-weight:600;color:var(--text-primary)}.deck-info p{color:var(--text-muted);font-size:.95rem}.deck-stats{text-align:right;margin-left:30px;display:flex;flex-direction:column;align-items:flex-end}.due-count{font-size:2.5rem;font-weight:700;color:var(--accent-blue);line-height:1;margin-bottom:5px}.due-label{font-size:.85rem;color:var(--text-label)}.flashcard-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:100%;gap:30px}.difficulty-section{display:flex;flex-direction:column;gap:20px;margin-top:20px;justify-content:center;align-items:center}.difficulty-buttons{display:flex;justify-content:center;align-items:center;gap:15px}.flashcard{display:flex;justify-content:center;align-items:center;position:relative;width:650px;height:450px;transition:transform .5s;transform-style:preserve-3d}.flashcard-container{perspective:1000px}.flashcard.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;justify-content:center;align-items:center;flex-direction:column}.card-back{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg)}.card-content{font-size:1.5rem;text-align:center}.card-label{font-size:.9rem;color:var(--text-label);margin-bottom:10px;position:absolute;top:20px;left:20px}.card-hint{position:absolute;bottom:20px;margin-top:15px;font-size:.9rem;color:var(--text-label);backface-visibility:hidden}.difficulty-buttons{width:100%;max-width:600px}.difficulty-button{padding:15px 20px;border:none;border-radius:40px;font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003;width:100%}.difficulty-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000004d}.difficulty-button:active{transform:translateY(-1px)}.difficulty-button[disabled]{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.button-easy{background:var(--color-success);color:var(--text-primary)}.button-medium{background:var(--color-warning-medium);color:#333}.button-hard{background:var(--color-warning-hard);color:var(--text-primary)}.button-retry{background:var(--color-danger-hover);color:var(--text-primary)}.study-session-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:40px}.end-session-button{background:transparent;color:var(--text-primary);padding:15px 30px;border-width:2px;border-color:var(--text-label);border-radius:5px;font-size:1rem;cursor:pointer;transition:all .5s ease}.end-session-button:hover{border-color:var(--color-danger-hover);background-color:var(--bg-tertiary)}.skip-card-button{background:transparent;color:var(--text-primary);padding:15px 30px;border-width:2px;border-color:var(--text-label);border-radius:5px;font-size:1rem;cursor:pointer;transition:all .5s ease}.skip-card-button:hover{border-color:var(--accent-blue);background-color:var(--bg-tertiary)}.study-progress strong{color:var(--accent-blue)}.study-progress span{margin:0 10px}@media (max-width: 768px){.flashcard{width:100%;max-width:650px;height:auto;aspect-ratio:650 / 450}.difficulty-buttons{flex-wrap:wrap;gap:10px}.difficulty-button{flex:1 1 calc(50% - 5px);width:auto;min-width:0;padding:12px 8px;font-size:.85rem}.study-session-controls{margin-top:20px;gap:12px}.end-session-button,.skip-card-button{padding:12px 20px;font-size:.9rem}}.login-bg{font-family:DM Sans,sans-serif;background:var(--bg, #1e2025);min-height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden}.login-card{background:var(--panel, #252830);border:1px solid var(--border, rgba(255,255,255,.08));border-radius:20px;box-shadow:0 40px 100px #00000080;padding:52px 48px 44px;width:100%;max-width:400px;display:flex;flex-direction:column;animation:loginFadeUp 1s cubic-bezier(.22,1,.36,1) both}@keyframes loginFadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.login-title{font-size:1.5rem;font-weight:500;color:var(--text, #e8eaf0);letter-spacing:-.4px;margin-bottom:6px;text-align:center}.login-subtitle{font-size:.82rem;color:var(--muted, #6b7080);text-align:center;margin-bottom:36px;line-height:1.5}.login-button{width:100%;padding:14px 20px;border-radius:11px;font-family:inherit;font-size:.88rem;font-weight:500;cursor:pointer;transition:all .18s ease;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:10px}.login-button:active{transform:scale(.985)}.login-button--primary{background:linear-gradient(135deg,#3a4a6b,#4a5a8a);border:1px solid rgba(91,140,245,.28);color:var(--text, #e8eaf0)}.login-button--primary:hover{background:linear-gradient(135deg,#4a5a80,#5a6a9a);border-color:#5b8cf573}.login-button--ghost{background:transparent;border:1px solid var(--border, rgba(255,255,255,.08));color:var(--muted, #6b7080)}.login-button--ghost:hover{background:var(--surface, #2d3038);color:var(--text, #e8eaf0);border-color:#ffffff24}.login-divider{width:100%;display:flex;align-items:center;padding:10px 0}.login-divider-line{flex:1;height:1px;background:var(--border, rgba(255,255,255,.08));margin:0 10px}.login-divider-text{color:var(--muted, #6b7080);letter-spacing:.04em}.login-note{margin-top:28px;font-size:.72rem;color:var(--muted, #6b7080);text-align:center;line-height:1.6;opacity:.7}.login-note span{color:#5b8cf5b3}