:root{--primary-color:#876992;--secondary-color:#d5c6e0;--text-color:#0e182e;--text-color2:#0e182ece;--background-color:#f3eaeb;--card-background:#f5e6e8;--border-color:#e0d1d3;--error-color:#bb6b6b;--warning-color:#ffcb69;--success-color:#a1b3c8;--hero-background:linear-gradient(255deg,#d5c6e0,#f5e6e8);--hero-text:#0e182e;--highlight-color:#967aa1;--input-color:#ffffff;--header-color:#f5e6e8b8}*{transition:background-color .2s ease,border-color .2s ease}.darkmode{--primary-color:#2e1d44;--secondary-color:#3c2855;--text-color:#fbfbfc;--text-color2:#fbfbfca2;--background-color:#0a0f18;--card-background:#0e1420;--border-color:#1c2638;--error-color:#953d3d;--warning-color:#ffcb69;--success-color:#2b5485;--hero-background:linear-gradient(255deg,#2e1d44,#0a0f18);--hero-text:#e8dff3;--highlight-color:#aaa1c8;--input-color:#0a0f18;--header-color:#0e1420b2}h1,h2,h3,h4,h5,h6{margin-bottom:1rem;font-weight:600;line-height:1.2}h1{font-size:1.75rem}h2{font-size:1.5rem;margin-bottom:1rem;color:var(--primary-color)}h3{font-size:1.25rem;margin-bottom:.5rem}p{margin-bottom:1rem;line-height:1.5}.admin-link,a:hover{color:var(--primary-color)}.admin-link{text-decoration:underline}.container{width:90%;padding:1rem;margin:0 auto}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}.section{margin-bottom:2rem}.collection-section h2{color:var(--text-color2)}.collection-section .collection-header{gap:1rem}.feature-card h3{color:var(--text-color2)!important}.yarns-grid{display:flex;flex-direction:column;gap:1rem;padding:1rem}@media(min-width:640px){.yarns-grid{flex-direction:row;flex-wrap:wrap}}.admin-section{border-radius:.5rem;padding:1.5rem;margin-bottom:2rem;box-shadow:0 1px 3px rgba(0,0,0,.1)}.admin-section h2{margin-bottom:1rem}.filter-group label{font-weight:500}.filter-group select{padding:.5rem;border:1px solid var(--border-color);border-radius:.25rem}.admin-links{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem}.filter-controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;padding:1rem;border-radius:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1)}@media(min-width:768px){.filter-controls{flex-direction:row;justify-content:space-between}}.filter-group{display:flex;flex-direction:column;gap:.5rem}@media(min-width:768px){.filter-group{width:48%}}.button,button{cursor:pointer;padding:.5rem 1rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:.25rem;font-size:1rem;display:inline-block;text-align:center;white-space:nowrap;transition:all .2s ease;text-decoration:none}.button:hover,button:hover{opacity:.9;background-color:var(--secondary-color);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1);color:var(--text-color);text-decoration:underline}.button:disabled,button:disabled{opacity:.5;cursor:not-allowed}@media(min-width:1024px){.button,button{padding:.5rem 1.5rem}}.logout-button:hover{color:var(--primary-color);background-color:var(--hero-text)}.darkmode-toggle{display:flex;padding:.4rem;border-radius:25px;font-size:1.5rem}.darkmode-toggle:hover{color:var(--primary-color);background-color:var(--hero-text)}.button-group{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}@media(min-width:640px){.button-group{flex-direction:row;justify-content:space-between}}.admin-button{font-size:.85rem;padding:.25rem .5rem;border-radius:.25rem;cursor:pointer;border:none}.edit-button{background-color:var(--primary-color);color:#fff}.delete-button{background-color:var(--error-color);color:#fff}.purchase-button{background-color:var(--success-color)}.purchase-button:hover{opacity:.9}.toggle-button{background:none;border:none;font-size:1.5rem;font-weight:700;color:var(--text-color);cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;padding:0}form{display:flex;flex-direction:column;gap:1rem;width:100%;margin:0 auto}@media(min-width:640px){form{max-width:500px}}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:500}.form-group input,.form-group select,.form-group textarea{padding:.5rem;border:1px solid var(--border-color);border-radius:.25rem;font-size:1rem}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(107,70,193,.1)}.auth-form-container{max-width:100%;margin:2rem auto;padding:1.5rem;background-color:var(--card-background);border-radius:.5rem;box-shadow:0 4px 6px rgba(0,0,0,.1)}.auth-form-container h1{margin-bottom:1.5rem;text-align:center;color:var(--highlight-color)}.auth-form-container form .form-group input{padding:.75rem}.auth-form-container form button{margin-top:.5rem;padding:.75rem;font-weight:500}.auth-form-container .auth-links{margin-top:1.5rem;text-align:center;font-size:.875rem}.auth-form-container .auth-links a{color:var(--hero-text);text-decoration:none;font-weight:500}.auth-form-container .auth-links a:hover{text-decoration:underline}@media(min-width:640px){.auth-form-container{max-width:400px}}.error-message{background-color:#fff5f5;color:var(--error-color);border-radius:.25rem;border:1px solid #fed7d7}.error-message,.warning-message{padding:.75rem;margin-bottom:1rem}.warning-message{background-color:#fffbeb;color:#d97706;border-radius:.25rem;border:1px solid #fef3c7}.image-uploader{width:100%;margin-bottom:1rem}.image-uploader .dropzone{border:2px dashed var(--border-color);border-radius:.5rem;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;background-color:var(--background-color);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center}.image-uploader .dropzone.dragging{border-color:var(--primary-color);background-color:rgba(107,70,193,.05)}.image-uploader .dropzone .preview-container{position:relative;width:100%;height:200px}.image-uploader .dropzone .preview-container .image-preview{width:100%;height:100%;object-fit:cover;border-radius:.25rem}.image-uploader .dropzone .preview-container .overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;border-radius:.25rem;color:#fff}.image-uploader .dropzone .preview-container .overlay:hover{opacity:1}.image-uploader .dropzone .paste-hint{font-size:.875rem;color:var(--text-secondary);margin-top:.5rem}.image-uploader .status{text-align:center;color:var(--text-secondary);margin-top:.5rem}.image-uploader .error{color:var(--error-color);text-align:center;margin-top:.5rem}.site-header{background-color:var(--header-color);border-bottom:1px solid var(--border-color);padding:2rem 0 1.5rem;box-shadow:0 2px 4px rgba(0,0,0,.05);margin-bottom:5vh}.header-content{display:flex;flex-direction:column;gap:1.5rem;width:25rem;margin:0 auto;max-width:100%}@media(min-width:1024px){.header-content{width:80%;flex-direction:row;justify-content:space-between}}@media(min-width:1280px){.header-content{width:70%}}.logo{font-size:1.25rem;font-weight:700;color:var(--hero-text);width:100%;margin:0 auto}.logo a{display:flex;align-items:center;justify-content:center;gap:.5rem}.logo .logo-icon{font-size:2rem}@media(min-width:1024px){.logo{text-align:left;width:30%}}nav{width:100%;margin:0 auto;display:flex;justify-content:center;align-items:center}@media(min-width:1024px){nav{justify-content:flex-end!important}}@media(min-width:1280px){nav{width:80%;justify-content:space-between}}.nav-links{flex-wrap:wrap;list-style:none;gap:1rem;justify-content:center;width:80%}.nav-links,.nav-links li{display:flex;align-items:center}.nav-links li{margin-bottom:.6rem}.nav-links .nav-spacer{display:none}@media(min-width:1280px){.nav-links .nav-spacer{display:block;flex:0 0 1rem;margin:0;height:1px}}.nav-links a{text-decoration:none;color:var(--text-color);font-size:1.2rem}.nav-links a:hover{color:var(--highlight-color)}@media(min-width:1024px){.nav-links{justify-content:flex-end}}@media(min-width:1280px){.nav-links{flex-wrap:nowrap;gap:1.35rem;justify-content:flex-end}.nav-links li:not(.nav-spacer){white-space:nowrap}}.user-info{display:none;font-size:.875rem;color:var(--text-color2)}@media(min-width:1024px){.user-info{display:block}}.yarn-card{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:.5rem;padding:1rem;width:100%;box-shadow:0 1px 3px rgba(0,0,0,.1);height:100%;min-height:400px}.yarn-card,.yarn-card .actions{display:flex;flex-direction:column}.yarn-card .actions{gap:.5rem;margin-top:auto;padding-top:1rem}.yarn-card .actions .button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;min-height:40px;min-width:30%;max-width:100%}.yarn-card .actions .button svg{font-size:1.1em}.yarn-card .actions .button:hover{color:#f5f5f5}@media(min-width:640px){.yarn-card .actions{flex-direction:row!important;justify-content:space-evenly}}.yarn-card .yarn-image-container{width:100%;height:200px;margin-bottom:.5rem;border-radius:.25rem;overflow:hidden;background-color:var(--secondary-color);position:relative;flex-shrink:0}.yarn-card .yarn-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.yarn-card:hover .yarn-image{transform:scale(1.05)}.yarn-card .yarn-details{flex:1 1;display:flex;flex-direction:column;min-height:150px}.yarn-card .yarn-details h3{margin-bottom:.5rem;font-size:1.1rem;line-height:1.4;text-align:center}.yarn-card .yarn-details p{margin-bottom:.1rem;padding:.5rem 0;font-size:.9rem;line-height:1.4}.yarn-card .yarn-details .owner-badge{margin-top:auto}.yarn-card .yarn-details .stock-control{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0}.yarn-card .yarn-details .stock-control .stock-row{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:.5rem}.yarn-card .yarn-details .stock-control p{margin:0;padding:0;flex-shrink:0}.yarn-card .yarn-details .stock-control .stock-buttons{display:flex;gap:.5rem;align-items:center}.yarn-card .yarn-details .stock-control .stock-buttons .button{padding:.25rem;min-height:30px;min-width:30px;display:flex;align-items:center;justify-content:center}.yarn-card .yarn-details .stock-control .stock-buttons .button.stock-button{background-color:var(--primary-color)}.yarn-card .yarn-details .stock-control .stock-buttons .button.stock-button:disabled{background-color:var(--border-color);cursor:not-allowed;opacity:.7}.yarn-card .yarn-details .stock-control .stock-buttons .button.save-button{background-color:var(--success-color)}.yarn-card .yarn-details .stock-control .stock-buttons .button svg{font-size:.9em}.yarn-card .owner-badge{display:inline-block;font-size:.75rem;padding:.25rem .5rem;border-radius:2rem;margin-top:.5rem;align-self:flex-start}.yarn-card .owner-badge.admin{background-color:var(--secondary-color);color:var(--text-color)}.yarn-card .owner-badge.own{background-color:#c6f6d5;color:#2f855a}@media(min-width:640px){.yarn-card{width:calc(50% - .5rem)}}@media(min-width:1024px){.yarn-card{width:calc(33.333% - .667rem)}.yarn-card .stock-row{flex-direction:row!important}}@media(min-width:1280px){.yarn-card{width:calc(25% - .75rem)}}.users-table-container,.yarns-table-container{overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;margin-top:1rem}.admin-table td,.admin-table th{padding:.75rem;text-align:left;border-bottom:1px solid var(--border-color)}.admin-table th{background-color:var(--secondary-color);font-weight:600}.action-buttons{display:flex;gap:.5rem}.category-section{margin-bottom:1.5rem;border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden}.category-section p{padding:1rem}.category-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:var(--secondary-color);cursor:pointer;transition:background-color .2s ease}.category-header:hover{background-color:var(--primary-color)}.category-header:hover .toggle-button,.category-header:hover h2{color:var(--text-color2)}.category-header h2{margin:0;font-size:1.25rem;color:var(--text-color)}.hero{background:var(--hero-background);padding:4rem 2rem;border-radius:1rem;margin-bottom:3rem;text-align:center}.hero-content{max-width:800px;margin:0 auto}.hero h1{font-size:2.5rem;margin-bottom:1.5rem;color:var(--hero-text)}.hero-description{font-size:1.2rem;color:var(--text-color);margin-bottom:2rem;line-height:1.6}.hero-buttons{display:flex;gap:1rem;justify-content:center}.button.primary{background-color:var(--hero-text);color:var(--background-color)}.button.primary.secondary{background-color:var(--primary-color);color:var(--hero-text)}.features{margin-bottom:4rem}.features h2{text-align:center;margin-bottom:2rem;color:var(--text-color)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:2rem;gap:2rem;margin-bottom:3rem}.feature-card{background:var(--card-background);padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 4px rgba(0,0,0,.1)}.feature-card h3{color:var(--text-color);margin-bottom:.5rem}.feature-card p{color:var(--text-color);line-height:1.5}.collection-section{background:var(--card-background);padding:2rem;border-radius:1rem}.collection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.collection-header p{color:var(--text-color);margin:0}*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background-color:var(--background-color);color:var(--text-color)}body[data-page=home]{background-image:url(/bkg.png);background-size:cover;background-position:50%;background-repeat:no-repeat;background-attachment:fixed}body[data-page=home].darkmode{background-blend-mode:soft-light;background-color:var(--background-color)}main{min-height:100vh}a{color:inherit;text-decoration:none}input{background-color:var(--input-color)!important;color:var(--text-color);transition:all .3s ease}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{-webkit-text-fill-color:var(--text-color)!important;-webkit-box-shadow:0 0 0 30px var(--input-color) inset!important;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}footer{min-height:200px;background-color:var(--card-background);padding:5rem 0;text-align:center}