:root { --ink:#163128; --green:#1e6047; --lime:#c9e265; --cream:#f5f3ec; --paper:#fffefa; --line:#d9dfd6; --soft:#e9f0e5; --muted:#66746c; --danger:#9c3030; --amber:#8a6d1a; --amber-bg:#f7efd8; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--cream); font:16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; } a { color:inherit; } .app { max-width:800px; min-height:100vh; margin:auto; background:var(--paper); padding:0 20px 24px; padding-top:env(safe-area-inset-top); padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); } .topbar { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:10px; text-decoration:none; } .brand b,.brand small { display:block; } .brand small,.profile,.muted,small { color:var(--muted); } .club-mark { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:white; font-weight:800; letter-spacing:-.1em; box-shadow:0 4px 0 var(--lime); } .profile { display:flex; gap:10px; align-items:center; font-size:.86rem; } .profile a { text-underline-offset:3px; } main { padding-top:20px; }
.hero { position:relative; overflow:hidden; padding:28px; min-height:178px; border-radius:24px; background:linear-gradient(145deg,var(--green),var(--green-deep)); color:white; box-shadow:0 14px 30px var(--shadow); } .hero::after { content:""; position:absolute; width:210px; height:210px; right:-65px; bottom:-125px; border:34px solid var(--lime); border-radius:50%; opacity:.75; animation:hero-ring 9s ease-in-out infinite; } .hero.compact { min-height:auto; } .hero h1 { margin:2px 0 6px; font-size:clamp(2rem,6vw,3rem); letter-spacing:-.05em; line-height:1; } .hero p { max-width:460px; margin:0; position:relative; z-index:1; } .eyebrow { margin:0; text-transform:uppercase; font-size:.72rem; font-weight:800; letter-spacing:.12em; color:var(--accent-text); }
/* Hero-motief: schuine strepen à la RiNK-logo, heel traag schuivend */
.hero-motif { position:absolute; z-index:0; top:-20px; right:36px; width:120px; bottom:-20px; background-image:repeating-linear-gradient(66deg, var(--lime) 0, var(--lime) 7px, transparent 7px, transparent 22px); opacity:.16; background-size:200px 100%; animation:hero-motif 14s linear infinite; pointer-events:none; }
@keyframes hero-motif { from { background-position:0 0; } to { background-position:66px 0; } }
@keyframes hero-ring { 0%,100% { transform:scale(1); opacity:.72; } 50% { transform:scale(1.06); opacity:.82; } }
@media (prefers-reduced-motion: reduce) { .hero-motif, .hero::after { animation:none; } }
.section { margin-top:32px; } .section-title { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:12px; } h2,h3 { margin:0; letter-spacing:-.025em; } .section-title a { color:var(--green); font-weight:700; }
.news-item { padding:18px 0; border-top:1px solid var(--line); } .news-item p { margin:5px 0; } .news-item small { display:block; margin-top:8px; }
.event-card { display:flex; gap:14px; align-items:center; padding:18px 14px; margin:12px 0; border:1px solid var(--line); border-radius:18px; background:var(--paper); text-decoration:none; transition:box-shadow .15s, transform .15s; } .event-card:hover { box-shadow:0 8px 22px var(--shadow-soft); transform:translateY(-1px); } .event-date { width:52px; flex:0 0 auto; padding:6px 2px; border-radius:12px; text-align:center; background:var(--soft); box-shadow:inset 0 -3px var(--lime); } .event-date span,.event-date strong { display:block; } .event-date span { font-size:.66rem; font-weight:800; } .event-date strong { font-size:1.4rem; line-height:1.1; } .event-body { flex:1; min-width:0; } .event-body h3 { margin:3px 0 2px; } .event-body small { display:block; margin-top:2px; } .event-image { width:64px; height:64px; flex:0 0 auto; border-radius:14px; object-fit:cover; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; } .badge { display:inline-block; padding:3px 9px; border-radius:99px; font-size:.7rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; background:var(--soft); color:var(--green); } .badge.soft { text-transform:none; letter-spacing:0; font-weight:700; } .badge.cat-wedstrijd { background:var(--green); color:white; } .badge.cat-clubdag { background:var(--lime); color:var(--ink); } .badge.closed { background:#ffe6e6; color:var(--danger); text-transform:none; }
.pill { flex:0 0 auto; padding:8px 13px; border-radius:99px; font-size:.8rem; font-weight:800; background:var(--soft); color:var(--green); white-space:nowrap; } .pill.ok { background:var(--green); color:white; } .pill.wait { background:var(--amber-bg); color:var(--amber); } .pill.full { background:#eee; color:var(--muted); }
button,.primary,.secondary { border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font:700 .9rem inherit; text-decoration:none; white-space:nowrap; } .primary { background:var(--green); color:white; } .secondary { background:var(--soft); color:var(--ink); } .primary:hover { background:#174c39; } .full { width:100%; } .danger-link { background:none; padding:6px 0; color:var(--danger); text-decoration:underline; text-underline-offset:3px; font-weight:700; font-size:.85rem; cursor:pointer; border:0; }
nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(4,1fr); width:min(800px,100%); padding:9px 18px; background:#fffefaed; border-top:1px solid var(--line); backdrop-filter:blur(12px); z-index:10; } nav a { display:grid; place-items:center; gap:2px; padding:5px; color:var(--muted); text-decoration:none; } nav a.active { color:var(--green); font-weight:800; } nav span { font-size:.72rem; }
.search { display:block; margin:22px 0 10px; font-weight:700; } input,textarea,select { width:100%; margin-top:5px; padding:11px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--paper); font:inherit; }
.member { display:flex; align-items:flex-start; gap:12px; padding:16px 0; border-top:1px solid var(--line); } .member b,.member small { display:block; } .member a { color:var(--green); font-size:.88rem; } .member.inactive { opacity:.55; } .member-info { flex:1; min-width:0; } .member .secondary { align-self:center; }
.avatar { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--soft); font-weight:800; } .avatar.photo { object-fit:cover; } .avatar.small { width:26px; height:26px; font-size:.65rem; }
.alert { padding:12px 14px; border-radius:10px; margin-bottom:14px; } .success { background:var(--soft); color:var(--green); } .error { background:#ffe6e6; color:var(--danger); } .notice { background:var(--amber-bg); color:var(--amber); }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; align-items:start; } .panel-stack { display:grid; gap:16px; } .panel { padding:20px; background:var(--soft); border-radius:18px; } .panel label { display:block; margin:14px 0; font-weight:700; } .panel label.check,.signup-form label.check { display:flex; align-items:center; gap:8px; font-weight:600; margin:10px 0; } .panel label.check input,.signup-form label.check input { width:auto; margin:0; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 75% 15%,var(--lime),transparent 20%),var(--cream); } .login-card { width:min(100%,420px); padding:40px; text-align:center; background:var(--paper); border-radius:28px; box-shadow:0 20px 55px var(--shadow); } .login-card .club-mark { margin:auto; } .login-card form { text-align:left; margin-top:24px; } .login-card label { display:block; margin:14px 0; font-weight:700; }
.featured-image { display:block; width:100%; max-height:260px; margin:0 0 14px; border-radius:14px; object-fit:cover; } .profile-form { max-width:560px; margin-top:22px; } .profile-photo { width:96px; height:96px; display:block; margin-bottom:16px; border-radius:50%; object-fit:cover; }
.search-row { display:flex; gap:8px; align-items:end; } .search-row input { flex:1; }
.edit-list { margin:24px 0; } .edit-list ul { list-style:none; margin:8px 0 0; padding:0; } .edit-list li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); } .edit-list b,.edit-list small { display:block; } .row-actions { display:flex; gap:12px; align-items:center; flex:0 0 auto; }
.current-image { display:block; width:160px; height:100px; margin:10px 0; border-radius:12px; object-fit:cover; }
/* Evenement-detail */
.back { display:inline-block; margin:4px 0 14px; color:var(--green); font-weight:700; text-decoration:none; } .detail-image { display:block; width:100%; max-height:300px; border-radius:20px; object-fit:cover; margin-bottom:14px; } .detail-title { margin:4px 0 14px; letter-spacing:-.04em; font-size:clamp(1.7rem,5vw,2.4rem); line-height:1.1; } .detail-description { white-space:normal; margin:0; }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .fact { padding:13px 15px; border:1px solid var(--line); border-radius:14px; background:var(--paper); } .fact small { display:block; text-transform:uppercase; font-size:.66rem; font-weight:800; letter-spacing:.08em; } .fact b { display:block; margin-top:2px; font-size:.95rem; }
.meter { display:block; height:6px; margin-top:8px; border-radius:99px; background:var(--soft); overflow:hidden; } .meter i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--lime)); }
.signup-panel { padding:20px; background:var(--soft); border-radius:18px; } .signup-form label { display:block; margin:14px 0; font-weight:700; } .signup-form fieldset.choice { margin:14px 0; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper); } .signup-form legend { font-weight:700; padding:0 6px; } .button-row { margin-top:16px; } .cancel-form { margin-top:10px; }
.participants { display:flex; flex-wrap:wrap; gap:8px; } .participant { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border:1px solid var(--line); border-radius:99px; font-size:.86rem; font-weight:600; background:var(--paper); } .participant em { font-style:normal; color:var(--green); font-weight:800; } .participant.wait { padding:5px 12px; background:var(--amber-bg); color:var(--amber); border-color:transparent; } .waitlist-title { margin:16px 0 8px; font-size:1rem; }
.admin-panel { padding:20px; border:2px dashed var(--line); border-radius:18px; } .admin-summary { margin:4px 0 12px; } .table-wrap { overflow-x:auto; } .admin-table { width:100%; border-collapse:collapse; font-size:.88rem; } .admin-table th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--line); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); } .admin-table td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; } .admin-table .comment-cell { max-width:220px; } .admin-table tr.row-wait { background:var(--amber-bg); }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:20px; } .stat { padding:15px; text-align:center; border:1px solid var(--line); border-radius:14px; } .stat b { display:block; font-size:1.6rem; letter-spacing:-.03em; } .admin-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.my-events { list-style:none; margin:0; padding:0; } .my-events li { border-top:1px solid var(--line); } .my-events a { display:block; padding:12px 0; text-decoration:none; } .my-events b,.my-events small { display:block; }
@media (max-width:560px) { .app { padding-inline:15px; } .profile span { display:none; } .hero { padding:24px; } .event-card { flex-wrap:wrap; } .event-card .pill { margin-left:auto; } .admin-grid,.facts { grid-template-columns:1fr; } .stats { grid-template-columns:repeat(3,1fr); } }
/* Zijmenu (drawer) */
.menu-button { display:grid; gap:4px; padding:10px; background:none; border:0; cursor:pointer; } .menu-button span { display:block; width:22px; height:2.5px; border-radius:2px; background:var(--ink); }
.drawer-overlay { position:fixed; inset:0; z-index:40; background:var(--shadow); backdrop-filter:blur(2px); }
.drawer { position:fixed; z-index:50; top:0; bottom:0; left:0; width:min(300px,84vw); padding:22px 18px; padding-top:max(22px,env(safe-area-inset-top)); display:flex; flex-direction:column; gap:4px; background:linear-gradient(170deg,var(--green),var(--green-deep)); color:white; box-shadow:8px 0 30px var(--shadow); transform:translateX(-102%); transition:transform .22s ease; overflow-y:auto; } .drawer.open { transform:none; }
.drawer-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; } .drawer-head b,.drawer-head small { display:block; } .drawer-head small { color:var(--accent-text); } .drawer-head .club-mark { background:var(--paper); color:var(--green); }
.drawer-link { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:12px; color:white; text-decoration:none; font-weight:600; } .drawer-link:hover { background:#ffffff14; } .drawer-link.active { background:var(--lime); color:var(--ink); font-weight:800; } .drawer-link .mi { flex:0 0 auto; opacity:.92; } .drawer-link.active .mi { opacity:1; }
.drawer-label { display:block; margin:14px 14px 4px; text-transform:uppercase; font-size:.66rem; font-weight:800; letter-spacing:.1em; color:var(--accent-text); }
.drawer-logout { margin-top:auto; color:#ffffffbb; }
/* Lid-detail */
.member.linked { text-decoration:none; align-items:center; } .member.linked:hover { background:var(--soft); margin-inline:-10px; padding-inline:10px; border-radius:12px; } .chevron { margin-left:auto; font-size:1.4rem; color:var(--muted); }
.member-hero { text-align:center; margin-top:6px; } .member-hero-photo { width:120px; height:120px; margin:0 auto 12px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 6px 0 var(--lime); } .member-hero-photo.initials { display:grid; place-items:center; background:var(--soft); font-size:2rem; font-weight:800; } .member-hero .detail-title { margin-bottom:8px; } .badges.centered { justify-content:center; margin-bottom:16px; }
.fact a { text-decoration:none; color:var(--green); } .contact-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; } .contact-actions a { flex:1; text-align:center; }
.member.is-hidden { display:none; }
/* Evenement-fototegel (Bundeling-stijl) */
.event-tile { display:block; margin:14px 0; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--paper); text-decoration:none; transition:box-shadow .15s, transform .15s; } .event-tile:hover { box-shadow:0 10px 26px var(--shadow-soft); transform:translateY(-2px); }
.event-media { position:relative; aspect-ratio:16/9; background-size:cover; background-position:center; } .event-media.no-image { background:linear-gradient(145deg,var(--green),var(--green-deep)); } .event-media.no-image::after { content:""; position:absolute; right:-40px; bottom:-70px; width:150px; height:150px; border:24px solid var(--lime); border-radius:50%; opacity:.55; }
.event-date-label { position:absolute; top:14px; left:14px; display:grid; place-items:center; width:56px; padding:8px 2px; border-radius:14px; text-align:center; background:#fffefaf2; box-shadow:0 4px 12px var(--shadow); backdrop-filter:blur(4px); } .event-date-label span { font-size:.66rem; font-weight:800; color:var(--muted); letter-spacing:.04em; } .event-date-label strong { font-size:1.5rem; line-height:1; color:var(--ink); }
.event-media .pill { position:absolute; top:16px; right:14px; box-shadow:0 4px 12px var(--shadow); }
.event-tile .event-body { padding:14px 16px 16px; } .event-tile .event-body h3 { margin:3px 0 2px; } .event-tile .event-body small { display:block; margin-top:2px; }
/* Clubschakelaar in het menu */
.club-switcher { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #ffffff22; } .club-option { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; color:#ffffffdd; text-decoration:none; font-weight:600; } .club-option:hover { background:#ffffff14; } .club-option.active { background:#ffffff1a; color:white; } .club-option .check { margin-left:auto; color:var(--lime); font-weight:800; } .club-mark.small { width:30px; height:30px; font-size:.8rem; box-shadow:0 2px 0 var(--lime); }
.form-hint { margin:2px 0 12px; font-size:.85rem; } .form-section { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
/* Verenigingen-beheer met kleurkiezers */
.club-row { padding:16px 0; border-top:1px solid var(--line); } .club-row-head { display:flex; align-items:center; gap:12px; } .color-form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-top:12px; padding-left:54px; } .color-row { display:flex; gap:12px; margin:14px 0; }
.color-pick { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:.85rem; } .color-pick .swatch { display:inline-block; } .color-pick input[type=color] { width:56px; height:40px; margin:0; padding:2px; border:1px solid var(--line); border-radius:10px; background:var(--paper); cursor:pointer; }
@media (max-width:560px){ .color-form { padding-left:0; } }
/* Chat: gesprekkenlijst */
.chat-list { margin-top:8px; } .chat-row { display:flex; align-items:center; gap:12px; padding:14px 4px; border-top:1px solid var(--line); text-decoration:none; } .chat-row:hover { background:var(--soft); margin-inline:-8px; padding-inline:12px; border-radius:12px; } .chat-row-body { flex:1; min-width:0; } .chat-row-body b { display:block; } .chat-preview { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); } .chat-row.has-unread .chat-preview { color:var(--ink); font-weight:600; } .chat-row-meta { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:0 0 auto; }
.unread-dot { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--green); color:white; font-size:.72rem; font-weight:800; } .unread-dot.inline { margin-left:6px; } .unread-dot.nav { position:absolute; top:2px; right:50%; transform:translateX(18px); }
.empty-chat { text-align:center; padding:40px 20px; }
/* Chat: gesprek */
.chat-header { display:flex; align-items:center; margin:6px 0 12px; padding-bottom:12px; border-bottom:1px solid var(--line); } .chat-partner { display:flex; align-items:center; gap:12px; text-decoration:none; } .chat-partner b { display:block; } .chat-partner small { color:var(--muted); }
.chat-thread { display:flex; flex-direction:column; gap:8px; padding:6px 0 80px; } .chat-daysep { text-align:center; margin:14px 0 6px; } .chat-daysep span { display:inline-block; padding:3px 12px; border-radius:99px; background:var(--soft); color:var(--muted); font-size:.72rem; font-weight:700; }
.bubble-row { display:flex; } .bubble-row.mine { justify-content:flex-end; } .bubble { max-width:78%; padding:9px 13px; border-radius:16px; line-height:1.4; word-wrap:break-word; } .bubble-row.theirs .bubble { background:var(--soft); border-bottom-left-radius:5px; } .bubble-row.mine .bubble { background:var(--green); color:white; border-bottom-right-radius:5px; }
.bubble-meta { display:block; margin-top:3px; font-size:.68rem; opacity:.75; text-align:right; } .bubble-row.theirs .bubble-meta { color:var(--muted); } .ticks { letter-spacing:-2px; } .ticks.read { color:#8fd0ff; }
/* Chat: invoerbalk (vast onderaan boven de bottom-nav) */
.chat-compose { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(800px,100%); display:flex; align-items:flex-end; gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)) 16px; background:var(--paper); border-top:1px solid var(--line); z-index:9; } .chat-compose textarea { flex:1; margin:0; resize:none; max-height:120px; border-radius:20px; padding:10px 14px; } .chat-compose button { flex:0 0 auto; width:44px; height:44px; border-radius:50%; padding:0; font-size:1.1rem; }
/* Inklapbaar "nieuw lid"-paneel in ledenbeheer */
.add-panel { margin:16px 0; border:1px solid var(--line); border-radius:16px; overflow:hidden; } .add-panel summary { padding:14px 16px; font-weight:800; cursor:pointer; background:var(--soft); color:var(--green); list-style:none; } .add-panel summary::-webkit-details-marker { display:none; } .add-panel summary:hover { filter:brightness(.97); } .add-panel[open] summary { border-bottom:1px solid var(--line); } .add-panel .panel { margin:0; border-radius:0; background:var(--paper); }
/* RiNK-merk: inlogscherm (los van clubkleuren) */
.login-page.rink { background:radial-gradient(circle at 50% 18%, #1a1420, #0a0a0c 60%); }
.login-page.rink .login-card { background:#141418; border:1px solid #26262c; box-shadow:0 24px 60px #00000066; }
.login-logo { display:block; width:min(220px,70%); margin:0 auto 10px; }
.login-tagline { text-align:center; margin:0 0 22px; color:#9a9aa2; font-size:.9rem; letter-spacing:.02em; }
.login-page.rink label { color:#e6e6ea; }
.login-page.rink input { background:#0f0f13; border-color:#2c2c34; color:#f4f4f6; }
.login-page.rink input:focus { outline:2px solid #eb692d; border-color:#eb692d; }
.login-page.rink .primary { background:#eb692d; color:#fff; }
.login-page.rink .primary:hover { background:#d55c24; }
.login-page.rink .alert.error { background:#3a1a1a; color:#ffb4b4; }
/* RiNK-merk onderaan het zijmenu */
.drawer-brand { margin-top:14px; padding-top:14px; border-top:1px solid #ffffff22; display:flex; align-items:center; gap:8px; color:#ffffffcc; font-size:.8rem; } .drawer-brand img { width:22px; height:22px; border-radius:6px; }
/* Onthoud-mij vinkje op inlogscherm */
.login-page.rink .remember { display:flex; align-items:center; gap:8px; margin:14px 0 4px; color:#c8c8ce; font-size:.88rem; font-weight:500; } .login-page.rink .remember input { width:auto; margin:0; accent-color:#eb692d; }
/* Clublogo (vervangt de gekleurde cirkel) */
.club-mark.photo { object-fit:cover; background:#fff; padding:0; }
.logo-pick { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:.85rem; }
.logo-remove-form { margin-top:6px; } .linklike { background:none; border:none; color:var(--danger); font-size:.82rem; cursor:pointer; padding:2px 0; text-decoration:underline; }
/* Bedrijf & netwerk in profiel/lid */
.form-section { margin:22px 0 4px; font-size:1.05rem; } .company-facts { margin-top:14px; } .facts-title { grid-column:1/-1; margin-bottom:2px; } .facts-title small { text-transform:uppercase; font-size:.68rem; font-weight:800; letter-spacing:.1em; color:var(--muted); }
/* Kleine profielfoto-cirkel rechtsboven (ipv naam) */
.avatar.tiny { width:38px; height:38px; font-size:.85rem; border:2px solid var(--line); }
.profile a { display:inline-flex; }
img.avatar.tiny.photo { object-fit:cover; }
/* Foto-cropper overlay */
.cropper-overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:#000000cc; padding:16px; } .cropper-overlay.open { display:flex; }
.cropper-box { background:var(--paper); border-radius:20px; padding:20px; max-width:380px; width:100%; text-align:center; } .cropper-title { margin:0 0 14px; font-weight:800; font-size:1.05rem; color:var(--ink); }
.cropper-stage { position:relative; margin:0 auto; border-radius:12px; overflow:hidden; background:#111; touch-action:none; cursor:grab; } .cropper-stage:active { cursor:grabbing; } .cropper-stage canvas { display:block; }
.cropper-ring { position:absolute; inset:0; box-shadow:0 0 0 9999px #00000088; border-radius:50%; pointer-events:none; border:2px solid #ffffffcc; }
.cropper-zoom { width:100%; margin:16px 0; accent-color:var(--green); }
.cropper-actions { display:flex; gap:10px; } .cropper-actions button { flex:1; }
.crop-preview { display:block; width:84px; height:84px; border-radius:50%; object-fit:cover; margin:10px 0 0; border:2px solid var(--line); }
.cropper-hint { margin:10px 2px 4px; font-size:.8rem; color:var(--muted); line-height:1.35; }
.crop-preview.on-checker { background-image:linear-gradient(45deg,#e6e6ea 25%,transparent 25%),linear-gradient(-45deg,#e6e6ea 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e6ea 75%),linear-gradient(-45deg,transparent 75%,#e6e6ea 75%); background-size:12px 12px; background-position:0 0,0 6px,6px -6px,-6px 0; border-radius:12px; }