:root{--primary: #f472b6;--primary-light: #fbcfe8;--primary-dark: #be185d;--secondary: #e879f9;--accent: #fbbf24;--bg-gradient: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 100%);--text-main: #4c1d95;--text-muted: #831843;--glass-bg: rgba(255, 255, 255, .6);--glass-border: rgba(255, 255, 255, .8);--glass-shadow: 0 8px 32px 0 rgba(244, 114, 182, .15);--radius: 20px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;background:var(--bg-gradient);color:var(--text-main);min-height:100vh;overflow-x:hidden;position:relative}body:before,body:after{content:"";position:fixed;border-radius:50%;filter:blur(80px);z-index:-1;animation:float 10s infinite alternate ease-in-out}body:before{width:400px;height:400px;background:#f472b64d;top:-100px;left:-100px}body:after{width:500px;height:500px;background:#e879f933;bottom:-150px;right:-100px;animation-delay:-5s}@keyframes float{0%{transform:translate(0) scale(1)}to{transform:translate(30px,-50px) scale(1.1)}}h1,h2,h3,h4{font-family:Playfair Display,serif;color:var(--primary-dark)}.app-container{display:flex;min-height:100vh}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius)}.main-content{flex:1;padding:2rem;margin-left:280px;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar{width:280px;position:fixed;left:0;top:0;bottom:0;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:2rem;z-index:10}.brand{display:flex;align-items:center;gap:1rem;font-size:1.5rem;font-weight:700;color:var(--primary-dark);text-decoration:none}.brand svg{color:var(--primary);filter:drop-shadow(0 2px 4px rgba(244,114,182,.3))}.sidebar-nav{display:flex;flex-direction:column;gap:.5rem;width:100%}.nav-link{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;text-decoration:none;color:var(--text-main);font-weight:500;border-radius:12px;transition:var(--transition);position:relative;overflow:hidden}.nav-link:hover,.nav-link.active{background:#fffc;color:var(--primary-dark);transform:translate(5px);box-shadow:0 4px 12px #f472b61a}.nav-link.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary);border-radius:4px}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.stat-card{padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:var(--transition)}.stat-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px #f472b640}.stat-header{display:flex;justify-content:space-between;align-items:center;color:var(--text-muted);font-weight:500}.stat-icon{padding:.75rem;background:var(--primary-light);border-radius:12px;color:var(--primary-dark)}.stat-value{font-size:2rem;font-weight:700;color:var(--text-main)}.form-container{max-width:800px;padding:2rem;margin:0 auto}.form-panel{padding:2rem}.form-header{margin-bottom:2rem;text-align:center}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--text-muted)}.form-control{width:100%;padding:.75rem 1rem;border:2px solid rgba(255,255,255,.5);background:#fff6;border-radius:10px;font-family:inherit;font-size:1rem;color:var(--text-main);transition:var(--transition)}.form-control:focus{outline:none;border-color:var(--primary);background:#fffc;box-shadow:0 0 0 4px #f472b61a}select.form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f472b6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.2em;padding-right:3rem;cursor:pointer}.radio-group{display:flex;flex-wrap:wrap;gap:.75rem}.radio-chip{position:relative;display:inline-block}.radio-chip input[type=radio]{position:absolute;opacity:0;width:0;height:0}.radio-chip label{display:block;padding:.6rem 1.2rem;border-radius:999px;border:2px solid rgba(255,255,255,.6);background:#fff6;font-weight:600;color:var(--text-main);cursor:pointer;transition:var(--transition);margin-bottom:0!important}.radio-chip input[type=radio]:checked+label{background:var(--primary);border-color:var(--primary-dark);color:#fff;box-shadow:0 4px 12px #f472b666;transform:translateY(-2px)}.radio-chip label:hover{background:#fffc}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:10px;font-family:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 4px 15px #f472b666}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f472b699}.btn-primary:active{transform:translateY(0)}.table-container{overflow-x:auto;border-radius:var(--radius)}table{width:100%;border-collapse:collapse;text-align:left}th,td{padding:1rem;border-bottom:1px solid rgba(244,114,182,.2)}th{font-weight:600;color:var(--primary-dark);background:#ffffff80}tbody tr{transition:var(--transition)}tbody tr:hover{background:#fff6}.badge{padding:.25rem .75rem;border-radius:999px;font-size:.875rem;font-weight:500}.badge-blue{background:#dbeafe;color:#1e40af}.badge-green{background:#dcfce7;color:#166534}.badge-pink{background:#fce7f3;color:#9d174d}.badge-purple{background:#f3e8ff;color:#6b21a8}.badge-amber{background:#fef3c7;color:#92400e}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media (max-width: 768px){.app-container{flex-direction:column}.sidebar{width:100%;position:static;height:auto;padding:0;flex-direction:column;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:none!important;box-shadow:none!important;pointer-events:auto;z-index:10}.brand{width:100%;padding:1.5rem 1rem .5rem;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;justify-content:center;font-size:1.5rem;box-shadow:none}.brand img{width:45px!important;height:45px!important}.nav-links{position:fixed;bottom:0;left:0;pointer-events:auto;width:100%;background:#fffffffa;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--glass-border);display:flex;flex-direction:row;justify-content:space-between;padding:.5rem .5rem 1rem;box-shadow:0 -4px 20px #f472b626;border-radius:20px 20px 0 0}.nav-link{flex-direction:column;padding:.5rem;gap:.3rem;border-radius:12px;flex:1;text-align:center;justify-content:center}.nav-link span{display:block!important;font-size:.65rem;font-weight:600}.nav-link.active{background:transparent;color:var(--primary-dark);transform:none;box-shadow:none}.nav-link.active svg{color:var(--primary);fill:#f472b633}.nav-link.active:before{display:none}.main-content{margin-left:0;padding:0 1rem 1rem;margin-top:0;margin-bottom:90px}.form-row{grid-template-columns:1fr;gap:1rem}.form-header{flex-direction:column!important;align-items:stretch!important;text-align:left;gap:1rem;margin-bottom:1.5rem}.form-header>div{display:flex;flex-direction:column!important;align-items:stretch!important;gap:.5rem!important;width:100%}.form-header input[type=month],.form-header select{width:100%!important;margin:0!important}.dashboard-grid{gap:.75rem!important}.stat-card{padding:1rem!important;gap:.5rem!important;flex-direction:row!important;align-items:center;justify-content:space-between}.stat-header{flex-direction:column-reverse;align-items:flex-start!important;gap:.25rem;font-size:.8rem!important}.stat-icon{padding:.5rem!important}.stat-icon svg{width:20px!important;height:20px!important}.stat-value{font-size:1.25rem!important;margin-top:0}h1,h2{font-size:1.4rem!important}h3{font-size:1.1rem!important}.form-header h2{font-size:1.4rem!important}.form-header p{font-size:.85rem}th,td{padding:.5rem .4rem!important;font-size:.75rem!important}th{font-size:.7rem!important}.badge{padding:.15rem .4rem!important;font-size:.65rem!important}.glass-panel{padding:1rem!important}.form-container{padding:0!important}.form-panel{padding:1rem!important}.form-group{margin-bottom:.75rem!important}.form-group label{font-size:.85rem!important;margin-bottom:.25rem!important}.form-control{padding:.5rem .75rem!important;font-size:.9rem!important}.status-select{width:100%;margin-top:.5rem}.report-container>div[style*="display: flex"]{flex-direction:column;align-items:stretch!important;gap:1rem!important}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.status-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--primary-light);border-radius:999px;padding:.4rem 2rem .4rem 1rem;font-size:.85rem;font-weight:700;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234c1d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:1.2em;transition:var(--transition)}.status-select:focus{outline:none;box-shadow:0 0 0 3px #f472b64d}.status-select.proses{background-color:#f3e8ff;border-color:#d8b4fe;color:#6b21a8}.status-select.selesai{background-color:#dcfce7;border-color:#86efac;color:#166534}.status-select.batal{background-color:#fee2e2;border-color:#fca5a5;color:#991b1b}