@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";:root{--primary:#0b8199;--secondary:#8b3399;--error:#f71735}*{-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif}*:focus-visible{outline-offset:1px;outline:2px solid #57bbf4}body{color:#333;background:#f2f2f2;margin:0}nav{z-index:999;background:var(--primary);text-align:center;flex-direction:column;align-items:center;gap:12px;padding:18px 24px;display:flex;position:fixed;top:0;left:0;right:0}nav h1{color:#fff;margin:0;font-size:28px}nav .links{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}nav .links a{color:color-mix(in srgb, var(--primary), #000 25%);background:color-mix(in srgb, var(--primary), #fff 75%);border-radius:4px;align-items:center;padding:6px 12px;text-decoration:none;display:inline-flex}.page{max-width:1200px;margin:var(--nav-height) auto 24px;padding:24px}.loader{justify-content:center;margin-top:32px;display:flex}.loader .loader-inner{border:4px solid var(--primary);box-sizing:border-box;border-bottom-color:#0000;border-radius:50%;width:36px;height:36px;animation:1s linear infinite rotate;display:inline-block}.message{margin-block:32px 0}.error{color:var(--error)}.order-by{flex-direction:column;gap:8px;display:flex}.order-by p{margin:0}.order-by .buttons{flex-wrap:wrap;gap:8px;display:flex}.order-by .buttons button{color:var(--primary);border:1px solid var(--primary);font-size:inherit;cursor:pointer;background:0 0;border-radius:4px;align-items:center;gap:4px;padding:4px 6px 4px 8px;display:flex}.order-by .buttons button.active{background:var(--primary);color:#fff}.order-by .buttons button i{font-size:inherit}.smoothie-grid{grid-template-columns:repeat(1,1fr);grid-auto-rows:1fr;gap:32px;margin-top:48px;display:grid}@media (width>=640px){.smoothie-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=992px){.smoothie-grid{grid-template-columns:repeat(3,1fr)}}.smoothie-grid .smoothie-card{box-sizing:border-box;background:#fff;border-radius:8px;flex-direction:column;gap:18px;width:100%;padding:24px;display:flex;position:relative}.smoothie-grid .smoothie-card.deleting{opacity:.5;pointer-events:none}.smoothie-grid h3,.smoothie-grid p{margin:0}.smoothie-grid .footer{justify-content:space-between;align-items:center;gap:16px;margin-top:auto;display:flex}.smoothie-grid .footer .created-at{color:#bababa;font-size:14px}.smoothie-grid .footer .buttons{gap:8px;display:flex}.smoothie-grid .footer .buttons a,.smoothie-grid .footer .buttons button{border-radius:4px}.smoothie-grid .footer .buttons button{cursor:pointer;font-size:inherit;background:0 0;border:0;padding:0}.smoothie-grid .footer .buttons i{font-size:inherit;border-radius:4px;padding:8px}.smoothie-grid .footer .buttons i.edit{color:var(--primary);background:hsl(from var(--primary) h s l / .125)}.smoothie-grid .footer .buttons i.delete{color:var(--error);background:hsl(from var(--error) h s l / .125)}.smoothie-grid .rating{background:var(--secondary);color:#fff;border-radius:6px;place-items:center;width:36px;height:36px;display:grid;position:absolute;top:0;right:24px;transform:translateY(-50%)}form{background:#fff;border-radius:8px;flex-direction:column;align-items:flex-start;gap:16px;max-width:480px;margin:0 auto;padding:24px;display:flex}form .form-control{flex-direction:column;gap:4px;width:100%;display:flex}form .form-control input,form .form-control textarea{box-sizing:border-box;width:100%;font-size:inherit;border:1px solid #ccc;border-radius:4px;padding:8px}form .form-control textarea{resize:none;height:100px}form .form-control span{color:#bababa;font-variant-numeric:tabular-nums;font-size:14px}form button{background:var(--primary);color:#fff;font-size:inherit;cursor:pointer;border:0;border-radius:6px;margin-top:8px;padding:8px 12px}form button:disabled{opacity:.5;cursor:not-allowed}form .error{margin-block:8px 0}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}