.planner{display:flex;flex-direction:column;gap:2rem;font-family:var(--font-main, "Figtree", system-ui, sans-serif);color:var(--text-color, #ffffff);margin-bottom:4rem}.planner-header{text-align:center;margin-bottom:.5rem}.planner-header h1{font-size:2rem;font-weight:600;margin-bottom:.5rem;letter-spacing:-.02em}.planner-header p{color:var(--text-muted, #cccccc);font-size:1rem}.planner-settings{background:var(--glass-bg, rgba(255, 255, 255, .03));border:1px solid var(--glass-border, rgba(255, 255, 255, .1));border-radius:12px;padding:1.5rem}.settings-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}@media(max-width:768px){.settings-row{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.settings-row{grid-template-columns:1fr}}.setting{display:flex;flex-direction:column;gap:.5rem}.setting label{font-size:.8rem;color:var(--text-muted, #cccccc);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.setting input{background:var(--surface-1);border:1px solid var(--glass-border, rgba(255, 255, 255, .1));border-radius:8px;padding:.75rem 1rem;color:var(--text-color, #ffffff);font-family:inherit;font-size:.95rem;outline:none;transition:border-color .2s,background .2s}.setting input:focus{border-color:var(--accent-color, #4285f4);background:#4285f40d}.planner-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}@media(max-width:600px){.planner-metrics{grid-template-columns:1fr}}.metric{background:var(--glass-bg, rgba(255, 255, 255, .03));border:1px solid var(--glass-border, rgba(255, 255, 255, .1));border-radius:12px;padding:1.25rem;text-align:center;transition:border-color .2s,background .2s}.metric.ok{border-color:#34d3994d;background:#34d3990d}.metric.over{border-color:#f871714d;background:#f871710d}.metric-value{display:block;font-size:2rem;font-weight:600;margin-bottom:.25rem}.metric.over .metric-value{color:#f87171}.metric.ok .metric-value{color:#34d399}.metric-label{font-size:.8rem;color:var(--text-muted, #cccccc)}.planner-timeline{background:var(--surface-1);border:1px solid var(--glass-border, rgba(255, 255, 255, .1));border-radius:12px;overflow:hidden}.timeline-container{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--glass-border) transparent}.timeline-container::-webkit-scrollbar{height:8px}.timeline-container::-webkit-scrollbar-track{background:transparent}.timeline-container::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:4px}.timeline-header{position:relative;height:40px;border-bottom:1px solid var(--glass-border, rgba(255, 255, 255, .1));background:var(--surface-2)}.week-col{position:absolute;top:0;bottom:0;border-right:1px solid var(--glass-border, rgba(255, 255, 255, .05));display:flex;align-items:center;padding-left:.75rem}.week-col span{font-size:.75rem;color:var(--text-muted, #cccccc);font-weight:500}.timeline-body{position:relative;min-height:120px}.grid-col{position:absolute;top:0;bottom:0;width:48px;border-right:1px solid rgba(255,255,255,.03);pointer-events:none}.package-bar{position:absolute;height:36px;background:linear-gradient(135deg,#4285f4,#3370d6);border:1px solid rgba(66,133,244,.5);border-radius:8px;cursor:grab;display:flex;flex-direction:column;justify-content:center;padding:0 .75rem;user-select:none;box-shadow:0 2px 8px #0000004d;transition:filter .15s,box-shadow .15s;overflow:hidden}.package-bar:hover{filter:brightness(1.1);box-shadow:0 4px 12px #4285f44d}.package-bar:active{cursor:grabbing;filter:brightness(.95)}.bar-name{font-size:.8rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-info{font-size:.65rem;color:#fffc}.resize-handle{position:absolute;right:0;top:0;bottom:0;width:12px;cursor:col-resize;opacity:0;transition:opacity .2s;display:flex;align-items:center;justify-content:center}.package-bar:hover .resize-handle{opacity:1}.resize-handle:after{content:"";width:3px;height:16px;background:#ffffff80;border-radius:2px}.planner-list{background:var(--glass-bg, rgba(255, 255, 255, .03));border:1px solid var(--glass-border, rgba(255, 255, 255, .1));border-radius:12px;padding:1.5rem}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:1rem}@media(max-width:480px){.list-header{flex-direction:column;align-items:stretch}.list-header h2{text-align:center}.add-btn{justify-content:center}}.list-header h2{font-size:1.1rem;font-weight:600}.add-btn{display:flex;align-items:center;gap:.5rem;background:var(--accent-color, #4285f4);color:#fff;border:none;padding:.6rem 1rem;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;font-family:inherit;transition:background .2s,transform .15s}.add-btn:hover{background:#3370d6;transform:translateY(-1px)}.list-items{display:flex;flex-direction:column;gap:.75rem}.list-item{display:grid;grid-template-columns:1fr 80px 80px 40px;gap:1rem;align-items:center;padding:.75rem;background:var(--surface-1);border-radius:8px;transition:background .2s}.list-item:hover{background:var(--surface-2)}@media(max-width:600px){.list-item{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.list-item .item-name{flex:1 1 calc(100% - 50px);order:1}.list-item .delete-btn{order:2;flex-shrink:0}.list-item .item-field{flex:1 1 45%;flex-direction:row;align-items:center;gap:.5rem;order:3}.item-field label{font-size:.7rem;min-width:45px}.item-field input{flex:1;min-width:50px;padding:.5rem;font-size:.9rem}}.item-name{background:transparent;border:1px solid transparent;color:var(--text-color, #ffffff);font-size:.95rem;padding:.5rem;border-radius:6px;font-family:inherit;outline:none;transition:border-color .2s,background .2s}.item-name:hover{background:var(--glass-bg);border-color:var(--glass-border)}.item-name:focus{background:var(--surface-1);border-color:var(--accent-color, #4285f4)}.item-field{display:flex;flex-direction:column;gap:.25rem}.item-field label{font-size:.65rem;color:var(--text-muted, #cccccc);text-transform:uppercase;letter-spacing:.05em}.item-field input{background:var(--surface-1);border:1px solid var(--glass-border, rgba(255, 255, 255, .1));color:var(--text-color, #ffffff);font-size:.9rem;padding:.4rem .5rem;border-radius:6px;text-align:center;font-family:inherit;outline:none;width:100%;transition:border-color .2s}.item-field input:focus{border-color:var(--accent-color, #4285f4)}.delete-btn{background:transparent;border:none;color:var(--text-muted, #cccccc);padding:.5rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s}.delete-btn:hover{color:#f87171;background:#f871711a}.planner-cta{background:linear-gradient(135deg,#4285f41a,#4285f405);border:1px solid rgba(66,133,244,.2);border-radius:16px;padding:2rem;text-align:center}.planner-cta .cta-content h3{font-size:1.25rem;font-weight:600;margin-bottom:.75rem;color:var(--text-color, #ffffff)}.planner-cta .cta-content p{font-size:.95rem;color:var(--text-muted, #cccccc);line-height:1.6;margin-bottom:1.5rem;max-width:450px;margin-left:auto;margin-right:auto}.planner-cta .cta-button{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-color, #4285f4);color:#fff;padding:.75rem 1.5rem;border-radius:8px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s}.planner-cta .cta-button svg{width:18px;height:18px;transition:transform .2s}.planner-cta .cta-button:hover{background:#3370d6;transform:translateY(-2px);box-shadow:0 4px 12px #4285f44d}.planner-cta .cta-button:hover svg{transform:translate(4px)}
