/* PrimeNotepad Bundled CSS - Optimized for Performance */
/* Reset and Base Styles */
*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#f8f9fa;min-height:100vh;line-height:1.6;color:#333}

/* Layout Components - Responsive Grid System */
.container,.container-fluid{width:100%;padding:0 1rem;margin:0 auto}
.container{max-width:1200px}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:1140px}}

.row{display:flex;flex-wrap:wrap;margin:0 -0.5rem}
.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{padding:0 0.5rem;width:100%;flex:0 0 auto}

/* Grid columns */
.col-1{width:8.333333%}.col-2{width:16.666667%}.col-3{width:25%}.col-4{width:33.333333%}
.col-5{width:41.666667%}.col-6{width:50%}.col-7{width:58.333333%}.col-8{width:66.666667%}
.col-9{width:75%}.col-10{width:83.333333%}.col-11{width:91.666667%}.col-12{width:100%}

/* Responsive breakpoints */
@media(min-width:576px){
.col-sm-1{width:8.333333%}.col-sm-2{width:16.666667%}.col-sm-3{width:25%}.col-sm-4{width:33.333333%}
.col-sm-5{width:41.666667%}.col-sm-6{width:50%}.col-sm-7{width:58.333333%}.col-sm-8{width:66.666667%}
.col-sm-9{width:75%}.col-sm-10{width:83.333333%}.col-sm-11{width:91.666667%}.col-sm-12{width:100%}
}

@media(min-width:768px){
.col-md-1{width:8.333333%}.col-md-2{width:16.666667%}.col-md-3{width:25%}.col-md-4{width:33.333333%}
.col-md-5{width:41.666667%}.col-md-6{width:50%}.col-md-7{width:58.333333%}.col-md-8{width:66.666667%}
.col-md-9{width:75%}.col-md-10{width:83.333333%}.col-md-11{width:91.666667%}.col-md-12{width:100%}
}

@media(min-width:992px){
.col-lg-1{width:8.333333%}.col-lg-2{width:16.666667%}.col-lg-3{width:25%}.col-lg-4{width:33.333333%}
.col-lg-5{width:41.666667%}.col-lg-6{width:50%}.col-lg-7{width:58.333333%}.col-lg-8{width:66.666667%}
.col-lg-9{width:75%}.col-lg-10{width:83.333333%}.col-lg-11{width:91.666667%}.col-lg-12{width:100%}
}

@media(min-width:1200px){
.col-xl-1{width:8.333333%}.col-xl-2{width:16.666667%}.col-xl-3{width:25%}.col-xl-4{width:33.333333%}
.col-xl-5{width:41.666667%}.col-xl-6{width:50%}.col-xl-7{width:58.333333%}.col-xl-8{width:66.666667%}
.col-xl-9{width:75%}.col-xl-10{width:83.333333%}.col-xl-11{width:91.666667%}.col-xl-12{width:100%}
}

/* Navigation - Responsive */
.navbar{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid #e2e8f0;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);padding:0.5rem 1rem;position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.navbar-brand{font-weight:700;color:#6366f1;text-decoration:none;font-size:1.5rem;display:flex;align-items:center;gap:0.5rem}
.navbar-nav{display:flex;list-style:none;margin:0;padding:0;gap:0.5rem;flex-wrap:wrap}
.navbar-nav .nav-link{color:#495057;font-weight:500;text-decoration:none;padding:0.5rem 1rem;border-radius:0.375rem;transition:all 0.15s ease;white-space:nowrap}
.navbar-nav .nav-link:hover{color:#6366f1;background:rgba(99,102,241,0.1)}
.navbar-toggler{display:none;border:none;background:none;font-size:1.25rem;cursor:pointer}
.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}

/* Mobile Navigation */
@media(max-width:991px){
.navbar{padding:0.5rem}
.navbar-nav{flex-direction:column;width:100%;gap:0.25rem}
.navbar-nav .nav-link{padding:0.75rem 1rem;border-radius:0.25rem}
.navbar-toggler{display:block}
.navbar-collapse{display:none}
.navbar-collapse.show{display:block}
.container-fluid{padding:0 0.5rem}
}

@media(max-width:768px){
.navbar-brand{font-size:1.25rem}
.navbar-nav .nav-link{font-size:0.9rem;padding:0.5rem 0.75rem}
}

/* Buttons - Responsive */
.btn{display:inline-block;font-weight:500;text-align:center;border:none;padding:0.75rem 1.5rem;font-size:1rem;border-radius:0.5rem;cursor:pointer;text-decoration:none;transition:all 0.2s ease;line-height:1.5;min-width:auto}
.btn-primary{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);box-shadow:0 4px 15px rgba(102,126,234,0.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,0.6)}
.btn-secondary{color:#495057;background:#e9ecef;border:1px solid #ced4da}
.btn-secondary:hover{background:#dee2e6;border-color:#adb5bd}
.btn-sm{padding:0.5rem 1rem;font-size:0.875rem}
.btn-lg{padding:1rem 2rem;font-size:1.125rem}

/* Mobile button adjustments */
@media(max-width:768px){
.btn{padding:0.625rem 1.25rem;font-size:0.9rem;width:100%;margin-bottom:0.5rem}
.btn-sm{padding:0.5rem 1rem;font-size:0.8rem}
.btn-group .btn{width:auto;margin-bottom:0;margin-right:0.25rem}
}

/* Cards - Responsive */
.card{background:#fff;border:1px solid rgba(0,0,0,0.125);border-radius:0.5rem;box-shadow:0 2px 10px rgba(0,0,0,0.1);transition:all 0.3s ease;overflow:hidden;margin-bottom:1rem}
.card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
.card-body{padding:1.5rem}
.card-title{margin-bottom:1rem;font-weight:600;color:#2d3748}
.card-text{color:#4a5568;line-height:1.6}

/* Mobile card adjustments */
@media(max-width:768px){
.card{margin-bottom:0.75rem}
.card-body{padding:1rem}
.card-title{font-size:1.1rem;margin-bottom:0.75rem}
}

/* Forms - Responsive */
.form-control{display:block;width:100%;padding:0.75rem;font-size:1rem;border:1px solid #ced4da;border-radius:0.375rem;transition:border-color 0.15s ease;background:#fff;box-sizing:border-box}
.form-control:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.1)}
.form-group{margin-bottom:1rem}
.form-label{display:block;margin-bottom:0.5rem;font-weight:500;color:#374151}
.form-select{display:block;width:100%;padding:0.75rem;font-size:1rem;border:1px solid #ced4da;border-radius:0.375rem;background:#fff}

/* Mobile form adjustments */
@media(max-width:768px){
.form-control,.form-select{padding:0.625rem;font-size:0.9rem}
.form-group{margin-bottom:0.75rem}
.form-label{font-size:0.9rem}
}

/* Utilities - Responsive */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.d-none{display:none}
.d-block{display:block}
.d-flex{display:flex}
.d-inline{display:inline}
.d-inline-block{display:inline-block}
.justify-content-center{justify-content:center}
.justify-content-between{justify-content:space-between}
.justify-content-around{justify-content:space-around}
.align-items-center{align-items:center}
.align-items-start{align-items:flex-start}
.align-items-end{align-items:flex-end}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.flex-column{flex-direction:column}
.flex-row{flex-direction:row}

/* Spacing utilities */
.m-0{margin:0}.m-1{margin:0.25rem}.m-2{margin:0.5rem}.m-3{margin:1rem}.m-4{margin:1.5rem}.m-5{margin:3rem}
.mt-0{margin-top:0}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:0.25rem}.mb-2{margin-bottom:0.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.ml-0{margin-left:0}.ml-1{margin-left:0.25rem}.ml-2{margin-left:0.5rem}.ml-3{margin-left:1rem}.ml-4{margin-left:1.5rem}.ml-5{margin-left:3rem}
.mr-0{margin-right:0}.mr-1{margin-right:0.25rem}.mr-2{margin-right:0.5rem}.mr-3{margin-right:1rem}.mr-4{margin-right:1.5rem}.mr-5{margin-right:3rem}
.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:0.25rem;margin-right:0.25rem}.mx-2{margin-left:0.5rem;margin-right:0.5rem}
.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:0.25rem;margin-bottom:0.25rem}.my-2{margin-top:0.5rem;margin-bottom:0.5rem}

.p-0{padding:0}.p-1{padding:0.25rem}.p-2{padding:0.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}.p-5{padding:3rem}
.pt-0{padding-top:0}.pt-1{padding-top:0.25rem}.pt-2{padding-top:0.5rem}.pt-3{padding-top:1rem}.pt-4{padding-top:1.5rem}.pt-5{padding-top:3rem}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:0.25rem}.pb-2{padding-bottom:0.5rem}.pb-3{padding-bottom:1rem}.pb-4{padding-bottom:1.5rem}.pb-5{padding-bottom:3rem}
.pl-0{padding-left:0}.pl-1{padding-left:0.25rem}.pl-2{padding-left:0.5rem}.pl-3{padding-left:1rem}.pl-4{padding-left:1.5rem}.pl-5{padding-left:3rem}
.pr-0{padding-right:0}.pr-1{padding-right:0.25rem}.pr-2{padding-right:0.5rem}.pr-3{padding-right:1rem}.pr-4{padding-right:1.5rem}.pr-5{padding-right:3rem}
.px-0{padding-left:0;padding-right:0}.px-1{padding-left:0.25rem;padding-right:0.25rem}.px-2{padding-left:0.5rem;padding-right:0.5rem}
.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}

/* Responsive display utilities */
@media(max-width:575px){.d-sm-none{display:none}.d-sm-block{display:block}.d-sm-flex{display:flex}}
@media(max-width:767px){.d-md-none{display:none}.d-md-block{display:block}.d-md-flex{display:flex}}
@media(max-width:991px){.d-lg-none{display:none}.d-lg-block{display:block}.d-lg-flex{display:flex}}

/* Mobile-first responsive text */
@media(max-width:768px){
.text-sm-center{text-align:center}
.text-sm-left{text-align:left}
.text-sm-right{text-align:right}
}
.mb-1{margin-bottom:0.25rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:1rem}
.mb-4{margin-bottom:1.5rem}
.mb-5{margin-bottom:3rem}
.p-0{padding:0}
.p-1{padding:0.25rem}
.p-2{padding:0.5rem}
.p-3{padding:1rem}
.p-4{padding:1.5rem}
.p-5{padding:3rem}

/* Hero Section */
.hero-section{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:4rem 0;text-align:center}
.hero-title{font-size:3rem;font-weight:700;margin-bottom:1rem}
.hero-subtitle{font-size:1.25rem;margin-bottom:2rem;opacity:0.9}

/* Feature Cards */
.feature-card{background:#fff;border-radius:0.5rem;padding:2rem;margin:1rem 0;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:transform 0.3s ease;text-align:center}
.feature-card:hover{transform:translateY(-5px)}
.feature-icon{width:4rem;height:4rem;margin:0 auto 1rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem}

/* Footer */
.footer{background:#2d3748;color:#fff;padding:2rem 0;margin-top:4rem}
.footer a{color:#a0aec0;text-decoration:none;transition:color 0.15s ease}
.footer a:hover{color:#fff}

/* Tool-specific styles */
.tool-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}
.tool-header{text-align:center;margin-bottom:3rem}
.tool-panels{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0}
.tool-panel{background:#fff;border:1px solid #e2e8f0;border-radius:0.5rem;overflow:hidden}
.tool-panel-header{background:#f7fafc;padding:1rem;border-bottom:1px solid #e2e8f0;font-weight:600}
.tool-panel-body{padding:0}
.tool-textarea{width:100%;min-height:400px;border:none;padding:1rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:14px;resize:vertical}
.tool-actions{padding:1rem;background:#f7fafc;border-top:1px solid #e2e8f0;display:flex;gap:0.5rem;flex-wrap:wrap}

/* Statistics */
.stats-container{display:flex;gap:1rem;margin:1rem 0;flex-wrap:wrap}
.stat-item{background:#f7fafc;padding:0.75rem 1rem;border-radius:0.375rem;text-align:center;flex:1;min-width:120px}
.stat-value{font-size:1.25rem;font-weight:600;color:#2d3748}
.stat-label{font-size:0.875rem;color:#4a5568}

/* Responsive Design */
@media(max-width:768px){
.hero-title{font-size:2rem}
.tool-panels{grid-template-columns:1fr;gap:1rem}
.navbar-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;flex-direction:column;padding:1rem}
.navbar-nav.show{display:flex}
.navbar-toggler{display:block}
.stats-container{flex-direction:column}
.tool-actions{flex-direction:column}
.tool-actions .btn{width:100%}
}

/* Loading States */
.loading{opacity:0.6;pointer-events:none}
.loading::after{content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #f3f3f3;border-top:2px solid #6366f1;border-radius:50%;animation:spin 1s linear infinite}

@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Error States */
.error{border-color:#ef4444!important;background-color:#fef2f2!important}
.error-message{color:#dc2626;font-size:0.875rem;margin-top:0.25rem}

/* Success States */
.success{border-color:#10b981!important;background-color:#f0fdf4!important}
.success-message{color:#059669;font-size:0.875rem;margin-top:0.25rem}