.file-upload{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:500px;margin:0 auto;background-color:var(--color-bg-primary);text-align:center}.upload-button{padding:var(--spacing-xl) calc(var(--spacing-xl) * 2);font-size:15px;font-weight:var(--font-weight-medium);background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);margin-bottom:var(--spacing-xl)}.upload-button:hover{background-color:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px var(--color-primary-shadow)}.upload-button:active{transform:translateY(0);box-shadow:var(--shadow-light)}.upload-button:disabled{background-color:#444;cursor:not-allowed;transform:none;box-shadow:none}.upload-hint{color:var(--color-text-tertiary);font-size:14px;margin:0;line-height:1.5}@media (max-width: 768px){.upload-button{padding:14px 28px;font-size:14px}}@media (max-width: 480px){.upload-button{padding:12px 24px;font-size:14px;width:100%;max-width:240px}.upload-hint{font-size:13px}}.character-display{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);color:var(--color-text-primary);padding:var(--spacing-xl);max-width:1200px;margin:0 auto;line-height:1.4;border-radius:16px;box-shadow:0 8px 32px #0000004d;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.character-header{text-align:center;margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid rgba(255,255,255,.1);background:#ffffff08;border-radius:12px;padding:var(--spacing-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:all .3s ease}.character-header:hover{background:#ffffff0d;border-color:#ffffff26}.header-main{display:flex;justify-content:space-between;align-items:center;padding:0 var(--spacing-md)}.character-header h1{margin:0;color:var(--color-text-accent);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bolder);text-shadow:0 2px 4px rgba(0,0,0,.5);transition:all .3s ease}.character-header:hover h1{color:var(--color-text-highlight)}.collapse-icon{transition:all .3s ease;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#ffffff0d}.collapse-icon:hover{background:#ffffff1a;color:var(--color-text-accent)}.collapse-icon.collapsed{transform:rotate(-90deg)}.character-identity{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid rgba(255,255,255,.1);transition:all .3s ease;overflow:hidden}.character-identity.collapsed{max-height:0;margin-top:0;padding-top:0;border-top:none;opacity:0}.identity-row{display:flex;justify-content:center;gap:var(--spacing-xl);margin-bottom:var(--spacing-xs);flex-wrap:wrap;transition:all .3s ease}.character-identity.collapsed .identity-row{margin-bottom:0}.highlight-text{color:var(--color-text-highlight);font-weight:var(--font-weight-bold);background:#4ec9b01a;padding:4px 12px;border-radius:20px;border:1px solid rgba(78,201,176,.3);transition:all .3s ease}.character-identity:not(.collapsed) .highlight-text:hover{background:#4ec9b033;border-color:#4ec9b080;transform:translateY(-1px)}@keyframes slideDown{0%{max-height:0;opacity:0}to{max-height:200px;opacity:1}}@keyframes slideUp{0%{max-height:200px;opacity:1}to{max-height:0;opacity:0}}.character-identity:not(.collapsed){animation:slideDown .3s ease-out}.character-identity.collapsed{animation:slideUp .3s ease-in}.abilities-with-skills-section{margin-bottom:var(--spacing-2xl)}.abilities-with-skills-section h2{margin:0 0 var(--spacing-lg) 0;font-size:var(--font-size-xl);color:var(--color-text-accent);text-align:center;background:#bb86fc1a;border-radius:12px;border:1px solid rgba(187,134,252,.2)}.abilities-with-skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg)}.ability-with-skills-card{background:linear-gradient(145deg,#2d2d2d,#252525);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:var(--spacing-lg);transition:all .3s ease;box-shadow:0 4px 16px #0003}.ability-with-skills-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d;border-color:#bb86fc4d}.ability-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid rgba(255,255,255,.1)}.ability-name{margin:0;font-size:1.1em;color:var(--color-text-accent);text-transform:uppercase;letter-spacing:1px;font-weight:700}.ability-base-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bolder);color:#fff;background:#ffffff0d;border-radius:8px;padding:8px 12px;min-width:60px;text-align:center}.ability-checks{display:flex;justify-content:space-between;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.ability-check{display:flex;flex-direction:row;align-items:center;gap:4px;flex:1;margin:0 .5rem;justify-content:space-between}.check-label{color:var(--color-text-secondary);font-size:var(--font-size-xs);text-align:center}.check-value{background:#bb86fc33;border:2px solid rgba(187,134,252,.4);border-radius:8px;padding:6px 10px;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-modifier);cursor:pointer;transition:all .2s ease;min-width:60px;text-align:center}.check-value:hover{background:#bb86fc4d;border-color:#bb86fc99;transform:scale(1.05)}.check-value:active{transform:scale(.95)}.save-proficient{position:relative;padding-right:20px}.save-proficient:after{content:"✓";position:absolute;right:0;top:50%;transform:translateY(-50%);width:16px;height:16px;background-color:var(--color-proficient);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff}.related-skills{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--spacing-md);margin-top:var(--spacing-md)}.skills-list{margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.skill-item-compact{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:#ffffff0d;border-radius:6px;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.skill-item-compact:hover{background:#ffffff1a;border-color:#fff3}.skill-info{display:flex;align-items:center;gap:var(--spacing-sm);flex:1}.skill-name{color:var(--color-text-primary);font-size:var(--font-size-sm)}.skill-proficiency{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:1px solid transparent}.skill-proficiency-full{background-color:var(--color-proficient);box-shadow:0 0 6px #4caf5080}.skill-proficiency-half{background-color:var(--color-proficient-half);box-shadow:0 0 6px #2196f380}.skill-proficiency-none{border:1px solid #666;background-color:transparent}.skill-value{background:#bb86fc33;border:2px solid rgba(187,134,252,.4);border-radius:6px;padding:4px 8px;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-modifier);cursor:pointer;transition:all .2s ease;min-width:50px;text-align:center}.skill-value:hover{background:#bb86fc4d;border-color:#bb86fc99;transform:scale(1.05)}.skill-value:active{transform:scale(.95)}.proficiency-section{margin-bottom:var(--spacing-2xl);display:flex;justify-content:center}.proficiency-card{background:linear-gradient(145deg,#2d2d2d,#252525);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:var(--spacing-lg);text-align:center;max-width:200px;margin:0;box-shadow:0 4px 16px #0003;transition:all .3s ease}.proficiency-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d;border-color:#bb86fc4d}.proficiency-card h3{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-base);color:var(--color-text-accent);text-transform:uppercase;letter-spacing:1px}.proficiency-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bolder);color:var(--color-text-modifier)}.spell-casting-section{margin-bottom:var(--spacing-2xl);display:flex;justify-content:center}.spell-casting-card{background:linear-gradient(145deg,#2d2d2d,#252525);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:var(--spacing-2xl);text-align:center;margin:0;box-shadow:0 4px 16px #0003;transition:all .3s ease;width:100%}.spell-casting-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d;border-color:#bb86fc4d}.spell-casting-card h3{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-base);color:var(--color-text-accent);text-transform:uppercase;letter-spacing:1px;font-weight:var(--font-weight-bold)}.spell-casting-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:#ffffff0d;border-radius:8px;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.spell-casting-item:hover{background:#ffffff14;border-color:#ffffff26}.spell-casting-item:last-child{margin-bottom:0}.spell-casting-item .label{font-size:var(--font-size-sm);color:var(--color-text-primary);font-weight:var(--font-weight-medium);text-align:left;flex:1}.spell-casting-item .value{font-weight:var(--font-weight-bolder);font-size:var(--font-size-lg);color:var(--color-text-highlight);background:#4ec9b01a;border-radius:6px;padding:4px 12px;min-width:60px;text-align:center;border:1px solid rgba(78,201,176,.3)}.spell-attack-value{background:#bb86fc33;border:2px solid rgba(187,134,252,.4);border-radius:8px;padding:6px 12px;font-size:var(--font-size-lg);font-weight:var(--font-weight-bolder);color:var(--color-text-modifier);cursor:pointer;transition:all .2s ease;min-width:60px;text-align:center;font-family:inherit}.spell-attack-value:hover{background:#bb86fc4d;border-color:#bb86fc99;transform:scale(1.05);box-shadow:0 4px 12px #bb86fc4d}.spell-attack-value:active{transform:scale(.95)}@media (max-width: 768px){.spell-casting-section{margin-bottom:var(--spacing-xl)}.spell-casting-card{max-width:100%;padding:var(--spacing-md)}.spell-casting-item{padding:var(--spacing-sm)}.spell-casting-item .label{font-size:var(--font-size-xs)}.spell-casting-item .value{font-size:var(--font-size-base);padding:3px 10px}.spell-attack-value{font-size:var(--font-size-base);padding:5px 10px;min-width:50px}}@media (max-width: 480px){.spell-casting-card{padding:var(--spacing-lg)}.spell-casting-card h3{font-size:var(--font-size-sm);margin-bottom:var(--spacing-sm)}.spell-casting-item{flex-direction:column;gap:var(--spacing-xs);text-align:center;padding:var(--spacing-sm)}.spell-casting-item .label{text-align:center;font-size:var(--font-size-xs)}.spell-casting-item .value,.spell-attack-value{width:100%;max-width:120px}}.back-section{text-align:center;margin-top:var(--spacing-2xl);padding-top:var(--spacing-lg);border-top:1px solid rgba(255,255,255,.1)}.back-button{background:linear-gradient(145deg,#2d2d2d,#252525);color:var(--color-text-primary);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 24px;cursor:pointer;font-size:var(--font-size-base);transition:all .3s ease;font-weight:var(--font-weight-medium);box-shadow:0 4px 16px #0003}.back-button:hover{background:linear-gradient(145deg,#3a3a3a,#2d2d2d);border-color:#bb86fc66;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.character-display-empty{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-secondary);font-style:italic;background:#ffffff0d;border-radius:12px;margin:var(--spacing-2xl)}@media (max-width: 768px){.character-display{padding:var(--spacing-lg);margin:var(--spacing-md);border-radius:12px}.abilities-with-skills-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.identity-row{gap:var(--spacing-md)}.ability-checks{flex-direction:row-reverse;gap:var(--spacing-sm)}.ability-check{flex-direction:row;justify-content:space-between;align-items:center}.check-label{text-align:left;font-size:var(--font-size-sm)}.check-value{min-width:50px}.header-main{padding:0}}@media (max-width: 480px){.character-display{width:100%;padding:var(--spacing-md);margin:var(--spacing-sm)}.character-header h1{font-size:var(--font-size-xl)}.identity-row{flex-direction:column;gap:var(--spacing-sm)}.ability-header{flex-direction:row;gap:var(--spacing-sm);text-align:center}.ability-base-value{font-size:var(--font-size-xl);min-width:50px}.collapse-icon{width:28px;height:28px}}