@import"https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#111;color:#e5e7eb}#root{min-height:100%;display:flex;flex-direction:column}::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-track{background-color:#1a1a1a}::-webkit-scrollbar-thumb{background-color:#404040;border-radius:.25rem}::-webkit-scrollbar-thumb:hover{background-color:#525252}.urdu-text{font-family:Noto Nastaliq Urdu,serif;text-align:right;direction:rtl}.dropzone{border:2px dashed #404040;border-radius:.5rem;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;background-color:#1a1a1a}.dropzone:hover,.dropzone.active{border-color:#ffc107;background-color:#1e293b}.drawing-canvas{border:2px solid #404040;border-radius:.5rem;cursor:crosshair;touch-action:none;background-color:#1a1a1a}.prediction-card{background-color:#1a1a1a;border-radius:.75rem;box-shadow:0 10px 15px -3px #00000080;padding:1.5rem;transition:all .3s;border:1px solid #262626}.prediction-card:hover{box-shadow:0 20px 25px -5px #000000b3;border-color:#404040}.progress-bar{height:.5rem;background-color:#262626;border-radius:9999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(to right,#ffc107,#ffb300);transition:all .5s}.spinner{animation:spin 1s linear infinite;border-radius:9999px;border:4px solid #262626;border-top-color:#ffc107}.btn-primary{background-color:#ffc107;color:#111;padding:.625rem 1.5rem;border-radius:.5rem;font-weight:500;transition:all .2s;border:none;cursor:pointer}.btn-primary:hover{background-color:#ffb300}.btn-primary:focus{outline:none;box-shadow:0 0 0 3px #ffc10780}.btn-primary:active{transform:scale(.95)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background-color:#262626;color:#e5e7eb;padding:.625rem 1.5rem;border-radius:.5rem;font-weight:500;transition:all .2s;border:1px solid #404040;cursor:pointer}.btn-secondary:hover{background-color:#404040;border-color:#525252}.btn-secondary:focus{outline:none;box-shadow:0 0 0 3px #40404080}.btn-secondary:active{transform:scale(.95)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-outline{border:2px solid #FFC107;color:#ffc107;background-color:transparent;padding:.625rem 1.5rem;border-radius:.5rem;font-weight:500;transition:all .2s;cursor:pointer}.btn-outline:hover{background-color:#ffc107;color:#111}.btn-outline:focus{outline:none;box-shadow:0 0 0 3px #ffc10780}.btn-outline:active{transform:scale(.95)}.card{background-color:#1a1a1a;border-radius:.5rem;box-shadow:0 4px 6px -1px #00000080;padding:1.5rem;border:1px solid #262626}.card-hover{transition:transform .2s,box-shadow .2s}.card-hover:hover{transform:scale(1.05);box-shadow:0 10px 15px -3px #000000b3;border-color:#404040}.input-field{width:100%;padding:.625rem 1rem;border:1px solid #404040;border-radius:.5rem;transition:all .2s;background-color:#1a1a1a;color:#e5e7eb}.input-field:focus{outline:none;box-shadow:0 0 0 3px #ffc10780;border-color:#ffc107}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:.875rem;font-weight:500}.badge-success{background-color:#10b98133;color:#34d399;border:1px solid rgba(16,185,129,.3)}.badge-warning{background-color:#fbbf2433;color:#fbbf24;border:1px solid rgba(251,191,36,.3)}.badge-error{background-color:#ef444433;color:#f87171;border:1px solid rgba(239,68,68,.3)}.badge-info{background-color:#ffc10733;color:#ffc107;border:1px solid rgba(255,193,7,.3)}.text-shadow{text-shadow:2px 2px 4px rgba(0,0,0,.1)}.text-shadow-lg{text-shadow:3px 3px 6px rgba(0,0,0,.2)}.gradient-primary{background:linear-gradient(to right,#ffc107,#ffb300)}.gradient-secondary{background:linear-gradient(to right,#a855f7,#ec4899)}.gradient-success{background:linear-gradient(to right,#34d399,#10b981)}.fade-in{animation:fadeIn .3s ease-in}.slide-up{animation:slideUp .3s ease-out}.scale-in{animation:scaleIn .2s ease-out}.skeleton{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background-color:#262626;border-radius:.25rem}.glass{background-color:#1a1a1ab3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(64,64,64,.3)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@media print{.no-print{display:none}}.header{background:linear-gradient(to right,#1a1a1a,#0a0a0a);color:#fff;box-shadow:0 4px 6px -1px #00000080;border-bottom:1px solid #262626}.header-container{max-width:1280px;margin:0 auto;padding:1rem}.header-content{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem}@media (min-width: 768px){.header-content{flex-direction:row}}.header-logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#fff}.header-logo-icon{width:2.5rem;height:2.5rem;background:linear-gradient(135deg,#ffc107,#ffb300);border-radius:.5rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #ffc1074d}.header-logo-icon span{font-size:1.5rem;color:#fff;font-weight:700}.header-title{font-size:1.25rem;font-weight:700;margin:0;background:linear-gradient(to right,#ffc107,#ffb300);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-subtitle{font-size:.75rem;color:#9ca3af;margin:0}.header-nav{display:flex;gap:1rem;align-items:center}.header-nav-link{background:none;border:none;color:#9ca3af;font-size:.875rem;font-weight:500;cursor:pointer;padding:.5rem 1rem;border-radius:.25rem;transition:all .2s}.header-nav-link:hover{color:#ffc107;background-color:#ffc1071a}.footer{background-color:#0a0a0a;color:#9ca3af;margin-top:auto;border-top:1px solid #262626}.footer-container{max-width:1280px;margin:0 auto;padding:2rem 1rem}.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem}@media (min-width: 768px){.footer-grid{grid-template-columns:repeat(3,1fr)}}.footer-section h3{color:#f9fafb;font-weight:600;margin-bottom:.75rem}.footer-section p{font-size:.875rem}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:.5rem}.footer-links a{font-size:.875rem;color:#9ca3af;text-decoration:none;transition:color .2s}.footer-links a:hover{color:#ffc107}.footer-tech-badges{display:flex;flex-wrap:wrap;gap:.5rem}.footer-tech-badge{padding:.25rem .5rem;background-color:#1a1a1a;border:1px solid #262626;border-radius:.25rem;font-size:.75rem;color:#9ca3af}.footer-copyright{border-top:1px solid #262626;margin-top:2rem;padding-top:1.5rem;text-align:center;font-size:.875rem}.image-uploader{width:100%}.image-uploader-dropzone{border:2px dashed #404040;border-radius:.5rem;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;background-color:#0a0a0a}.image-uploader-dropzone:hover,.image-uploader-dropzone.active{border-color:#ffc107;background-color:#1a1a1a}.image-uploader-dropzone.disabled{opacity:.5;cursor:not-allowed}.image-uploader-preview{display:flex;flex-direction:column;align-items:center}.image-uploader-preview-image{max-height:12rem;max-width:100%;border-radius:.5rem;margin-bottom:1rem;box-shadow:0 4px 6px -1px #00000080;border:1px solid #262626}.image-uploader-filename{font-size:.875rem;color:#e5e7eb}.image-uploader-filesize{font-size:.75rem;color:#9ca3af}.image-uploader-placeholder{display:flex;flex-direction:column;align-items:center}.image-uploader-icon{width:4rem;height:4rem;color:#6b7280;margin-bottom:1rem}.image-uploader-text{font-size:1.125rem;color:#e5e7eb;margin-bottom:.5rem}.image-uploader-subtext{font-size:.875rem;color:#9ca3af}.image-uploader-formats{font-size:.75rem;color:#6b7280;margin-top:.5rem}.image-uploader-error{margin-top:.75rem;padding:.75rem;background-color:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:.5rem}.image-uploader-error p{color:#f87171;font-size:.875rem;margin:0}.image-uploader-actions{margin-top:1rem;display:flex;justify-content:center;gap:1rem}.drawing-canvas-container{width:100%}.drawing-canvas-wrapper{position:relative}.drawing-canvas{border:2px solid #404040;border-radius:.5rem;cursor:crosshair;touch-action:none;background-color:#0a0a0a;width:100%;max-width:28rem;margin:0 auto;display:block}.drawing-canvas.disabled{opacity:.5;cursor:not-allowed}.drawing-canvas-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.drawing-canvas-overlay p{color:#6b7280;font-size:1.125rem}.drawing-canvas-controls{margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:1rem}.drawing-canvas-controls label{font-size:.875rem;color:#9ca3af}.drawing-canvas-controls input[type=range]{width:8rem}.drawing-canvas-controls span{font-size:.875rem;color:#9ca3af;width:2rem}.drawing-canvas-actions{margin-top:1rem;display:flex;justify-content:center;gap:1rem}.loading-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem}.loading-spinner{animation:spin 1s linear infinite;border-radius:9999px;border:4px solid #262626;border-top-color:#60a5fa}.loading-spinner.sm{width:1.5rem;height:1.5rem}.loading-spinner.md{width:2.5rem;height:2.5rem}.loading-spinner.lg{width:4rem;height:4rem}.loading-spinner-message{color:#9ca3af;font-size:.875rem;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.prediction-result{background-color:#1a1a1a;border-radius:.75rem;box-shadow:0 10px 15px -3px #00000080;padding:1.5rem;transition:all .3s;border:1px solid #262626}.prediction-result:hover{box-shadow:0 20px 25px -5px #000000b3;border-color:#404040}.prediction-result-loading{text-align:center}.prediction-result-error{background-color:#ef44441a;border:1px solid rgba(239,68,68,.3)}.prediction-result-error-content{text-align:center}.prediction-result-error-icon{width:3rem;height:3rem;color:#f87171;margin:0 auto .75rem}.prediction-result-error-title{font-size:1.125rem;font-weight:600;color:#f87171;margin-bottom:.5rem}.prediction-result-error-message{color:#fca5a5;margin-bottom:1rem}.prediction-result-placeholder{background-color:#1a1a1a;border:1px solid #262626}.prediction-result-placeholder-content{text-align:center;color:#6b7280}.prediction-result-placeholder-icon{width:4rem;height:4rem;margin:0 auto 1rem;color:#404040}.prediction-result-placeholder-text{font-size:1.125rem;margin:0;color:#6b7280}.prediction-result-main{text-align:center;margin-bottom:1.5rem}.prediction-result-label{font-size:.875rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.prediction-result-character{font-size:6rem;font-weight:700;color:#ffc107;margin-bottom:1rem}.prediction-result-confidence{max-width:16rem;margin:0 auto}.prediction-result-confidence-header{display:flex;justify-content:space-between;font-size:.875rem;color:#9ca3af;margin-bottom:.25rem}.prediction-result-confidence-value{font-weight:500;color:#ffc107}.prediction-result-confidence-bar{height:.5rem;background-color:#262626;border-radius:9999px;overflow:hidden}.prediction-result-confidence-fill{height:100%;background:linear-gradient(to right,#ffc107,#ffb300);transition:width .5s}.prediction-result-time{text-align:center;margin-bottom:1.5rem}.prediction-result-time span{font-size:.75rem;color:#6b7280}.prediction-result-top5{border-top:1px solid #262626;padding-top:1.5rem}.prediction-result-top5-title{font-size:.875rem;font-weight:600;color:#e5e7eb;margin-bottom:.75rem}.prediction-result-top5-list{display:flex;flex-direction:column;gap:.5rem}.prediction-result-top5-item{display:flex;align-items:center;justify-content:space-between;background-color:#0a0a0a;border:1px solid #262626;border-radius:.5rem;padding:.5rem 1rem;transition:all .2s}.prediction-result-top5-item:hover{border-color:#404040;background-color:#1a1a1a}.prediction-result-top5-item-left{display:flex;align-items:center;gap:.75rem}.prediction-result-top5-item-rank{font-size:.75rem;color:#6b7280;width:1rem}.prediction-result-top5-item-character{font-size:1.5rem;color:#e5e7eb}.prediction-result-top5-item-right{display:flex;align-items:center;gap:.5rem}.prediction-result-top5-item-bar{width:6rem;height:.5rem;background-color:#262626;border-radius:9999px;overflow:hidden}.prediction-result-top5-item-bar-fill{height:100%;background-color:#ffc107}.prediction-result-top5-item-percent{font-size:.875rem;color:#9ca3af;width:3rem;text-align:right}.prediction-result-actions{margin-top:1.5rem;text-align:center}.home-page{max-width:1280px;margin:0 auto;padding:2rem 1rem}.home-hero{text-align:center;margin-bottom:2.5rem}.home-hero-title{font-size:2.25rem;font-weight:700;color:#f9fafb;margin-bottom:1rem}.home-hero-text{font-size:1.125rem;color:#9ca3af;max-width:42rem;margin:0 auto}.home-model-selector{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:1.5rem}.home-model-label{font-size:.875rem;font-weight:500;color:#9ca3af;margin-bottom:.5rem}.home-model-buttons{background-color:#1a1a1a;border-radius:.5rem;padding:.25rem;display:inline-flex;border:1px solid #262626}.home-model-button{padding:.5rem 1.25rem;border-radius:.5rem;transition:all .2s;border:none;cursor:pointer;background-color:transparent;color:#9ca3af;font-size:.875rem}.home-model-button:hover{color:#e5e7eb}.home-model-button.active{background-color:#ffc107;box-shadow:0 1px 3px #00000080;color:#111;font-weight:500}.home-mode-selector{display:flex;justify-content:center;margin-bottom:2rem}.home-mode-buttons{background-color:#1a1a1a;border-radius:.5rem;padding:.25rem;display:inline-flex;border:1px solid #262626}.home-mode-button{padding:.5rem 1.5rem;border-radius:.5rem;transition:all .2s;border:none;cursor:pointer;background-color:transparent;color:#9ca3af}.home-mode-button:hover{color:#e5e7eb}.home-mode-button.active{background-color:#262626;box-shadow:0 1px 3px #00000080;color:#ffc107;font-weight:500}.home-main-content{display:grid;grid-template-columns:1fr;gap:2rem;max-width:72rem;margin:0 auto}@media (min-width: 1024px){.home-main-content{grid-template-columns:repeat(2,1fr)}}.home-input-section{background-color:#1a1a1a;border-radius:.75rem;box-shadow:0 10px 15px -3px #00000080;padding:1.5rem;border:1px solid #262626}.home-section-title{font-size:1.25rem;font-weight:600;color:#f9fafb;margin-bottom:1rem}.home-feature-cards{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:4rem;max-width:64rem;margin-left:auto;margin-right:auto}@media (min-width: 768px){.home-feature-cards{grid-template-columns:repeat(3,1fr)}}.home-feature-card{background-color:#1a1a1a;border-radius:.5rem;box-shadow:0 4px 6px -1px #00000080;padding:1.5rem;text-align:center;transition:transform .2s,box-shadow .2s;border:1px solid #262626}.home-feature-card:hover{transform:scale(1.05);box-shadow:0 10px 15px -3px #000000b3;border-color:#404040}.home-feature-icon{width:3rem;height:3rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}.home-feature-icon.blue{background-color:#ffc10726;border:1px solid rgba(255,193,7,.3)}.home-feature-icon.green{background-color:#10b98126;border:1px solid rgba(16,185,129,.3)}.home-feature-icon.purple{background-color:#a855f726;border:1px solid rgba(168,85,247,.3)}.home-feature-icon svg{width:1.5rem;height:1.5rem}.home-feature-icon.blue svg{color:#ffc107}.home-feature-icon.green svg{color:#34d399}.home-feature-icon.purple svg{color:#a855f7}.home-feature-title{font-weight:600;color:#f9fafb;margin-bottom:.5rem}.home-feature-text{font-size:.875rem;color:#9ca3af;margin:0}.home-characters-section{margin-top:4rem;max-width:72rem;margin-left:auto;margin-right:auto}.home-characters-subsection{margin-top:2rem}.home-characters-subtitle{font-size:1.125rem;font-weight:600;color:#f9fafb;margin-bottom:1rem;text-align:center}.home-characters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-top:1rem}.home-character-card{background-color:#1a1a1a;border:1px solid #262626;border-radius:.5rem;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:all .2s}.home-character-card:hover{border-color:#ffc107;transform:translateY(-2px);box-shadow:0 4px 6px -1px #ffc1074d}.home-character-urdu{font-size:2rem;color:#ffc107;font-weight:600}.home-character-name{font-size:.75rem;color:#9ca3af;text-align:center}.app-container{min-height:100vh;display:flex;flex-direction:column;background-color:#111}.app-main{flex-grow:1}