:root {
    --primary: #2ECC71;
    --blue: #3498DB;
    --purple: #9B59B6;
    --glass-bg: rgba(255,255,255,0.12);
    --glass-border: rgba(255,255,255,0.25);
    --glass-blur: 18px;
    --radius: 20px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    min-height:100vh; min-width:320px; font-family:'Segoe UI',system-ui,sans-serif;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(44,83,100,0.6) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(15,32,39,0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(32,58,67,0.5) 0%, transparent 60%),
        linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    color:#fff; display:flex; flex-direction:column; align-items:center;
}
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
}
a { text-decoration:none; color:inherit; }
h1 { font-size:2rem; margin-bottom:.5rem; }
.text-blue { color: var(--blue); }
.text-purple { color: var(--purple); }
.text-primary { color: var(--primary); }
.hidden { display: none !important; }

/* HEALTH */
.health-box { flex:1 1 100%; max-width:700px; padding:2rem; }
.health-status { text-align:center; font-size:1.3rem; margin-bottom:1.5rem; padding:.8rem; border-radius:12px; }
.status-ok { background:rgba(46,204,113,.15); }
.status-fail { background:rgba(231,76,60,.15); }
.health-table { width:100%; border-collapse:collapse; }
.health-table th, .health-table td { padding:.6rem .8rem; text-align:left; border-bottom:1px solid var(--glass-border); font-size:.9rem; }
.health-table th { opacity:.7; font-size:.8rem; text-transform:uppercase; }
.check-ok { color:#2ecc71; }
.check-fail { color:#e74c3c; }
.health-time { text-align:center; opacity:.5; font-size:.8rem; margin-top:1rem; }

/* INDEX */
.hero { text-align:center; margin-top:10vh; }
.hero h1 { font-size:2.8rem; }
.hero p { opacity:.7; margin-bottom:3rem; }
.cards { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; padding:0 1rem; }
.card {
    width:280px; height:320px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1rem;
    transition: transform .3s, box-shadow .3s; cursor:pointer;
}
.card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.3); }
.card .icon { font-size:4rem; }
.card h2 { font-size:1.5rem; letter-spacing:2px; }
.card-maker { border-color: var(--blue); }
.card-maker h2 { color: var(--blue); }
.card-reader { border-color: var(--purple); }
.card-reader h2 { color: var(--purple); }

/* SHARED PAGE LAYOUT */
.page-header {
    width:100%; padding:.5rem 2rem; display:flex; align-items:center; gap:1rem;
}
.page-header a { opacity:.7; font-size:1.4rem; }
.page-header a:hover { opacity:1; }
.container {
    width:100%; max-width:1100px; padding:1rem; display:flex; gap:1.5rem;
    flex-wrap:wrap; justify-content:center; margin:auto;
}

/* MAKER LAYOUT */
.maker-layout {
    flex-wrap:nowrap; height:calc(100vh - 108px); align-items:stretch;
}
.maker-layout .preview-area {
    flex:1 1 50%; min-height:0;
}
.maker-layout .sidebar-col {
    flex:0 1 380px; display:flex; flex-direction:column; gap:1rem;
    max-height:100%; min-width:0;
}
.maker-layout .sidebar-col > .sidebar:last-child {
    overflow-y:auto; overflow-x:hidden; flex:1 1 0;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
}
.maker-layout .sidebar-col > .sidebar:last-child::-webkit-scrollbar { width:5px; }
.maker-layout .sidebar-col > .sidebar:last-child::-webkit-scrollbar-track { background:transparent; }
.maker-layout .sidebar-col > .sidebar:last-child::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:4px; }
.maker-layout .sidebar {
    flex:none; overflow:visible; max-height:none;
}

/* MAKER */
.sidebar { flex:1 1 300px; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; min-width:0; }
.sidebar label { font-size:.85rem; opacity:.8; }
.sidebar input, .sidebar select, .sidebar textarea {
    width:100%; padding:.6rem; border-radius:10px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,.08); color:#fff; font-size:.95rem; outline:none;
    box-sizing:border-box; max-width:100%;
}
.sidebar input.toggle { width:46px; }
.sidebar input:focus, .sidebar select:focus, .sidebar textarea:focus {
    border-color: var(--blue);
}
.sidebar textarea { min-height:4.5rem; resize:none; }
.sidebar select option { background:#1a1a2e; }
.preview-area {
    flex:1 1 400px; display:flex; align-items:center; justify-content:center;
    padding:2rem; min-height:400px; flex-direction:column; gap:1rem;
    position:relative;
}
.preview-area img { max-width:100%; border-radius:12px; background:#fff; padding:8px; object-fit:contain; aspect-ratio:1/1; }
#qr-wrap.transparent-preview img { background:transparent; padding:8px; }
.preview-area #qr-img.logo-mode { background:none; padding:0; }
#qr-wrap { position:relative; margin:auto; display:flex; align-items:center; justify-content:center; }
#qr-wrap.transparent-preview {
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    border-radius: 8px;
}
#qr-wrap.loading img { opacity:.3; transition:opacity .2s; }
.preview-area .btn { margin-top:auto; }
/* Desktop: cap image height so it never overflows the glass card.
   Formula: maker-layout height (100vh-108px) minus container padding (2rem),
   preview padding (4rem), gap (1rem), and button row (~80px) = 100vh-300px;
   extra 10px breathing room keeps the card border clear. */
@media (min-width: 769px) {
    .maker-layout .preview-area img { max-height: calc(100vh - 310px); }
}

/* READER */
.reader-layout { display:flex; flex-direction:column; gap:1.5rem; width:100%; max-width:600px; margin:auto; }
.reader-input { padding:2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.reader-result { padding:2rem; }
.reader-result h3 { margin-bottom:1rem; opacity:.8; }
.reader-input input[type=file], .reader-input input[type=url] {
    width:100%; padding:.7rem; border-radius:10px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,.08); color:#fff; margin:0;
}
.reader-input input::placeholder { color:rgba(255,255,255,.7); opacity:1; }
.reader-input input:focus { border-color: var(--purple); }
.reader-heading { opacity:.7; font-size:.9rem; margin-bottom:1rem; }
.reader-divider { text-align:center; opacity:.5; font-size:.85rem; margin:0; }
.reader-input input::placeholder { color:rgba(255,255,255,.4); font-style:italic; }
.result-box.placeholder { color:rgba(255,255,255,.4); font-style:italic; }
#qr-drop-area {
    border:2px dashed rgba(255,255,255,.3); border-radius:16px;
    padding:2rem 1rem; text-align:center; cursor:pointer;
    color:rgba(255,255,255,.7); background:rgba(255,255,255,.08);
    transition:background .2s, border-color .2s;
    position:relative;
}
#qr-drop-area .decode-overlay {
    position:absolute; inset:0; border-radius:16px;
    background:rgba(255,255,255,.15); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center;
    z-index:2;
}
#qr-drop-area .decode-overlay .decode-spinner {
    width:36px; height:36px; border:3px solid rgba(255,255,255,.3);
    border-top-color:#fff; border-radius:50%; animation:decodeSpin .7s linear infinite;
}
@keyframes decodeSpin { to { transform:rotate(360deg); } }
#qr-drop-area.highlight { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5); }
#qr-drop-area p { pointer-events:none; margin:0; }
#qr-drop-area input[type=file] { display:none; }
#qr-preview-img { max-width:100%; max-height:150px; border-radius:8px; pointer-events:none; }
#qr-drop-area, .reader-input .btn, .reader-input input[type=url] { width:100%; }
.reader-input .btn { display:flex; flex-direction:column; align-items:center; gap:.3rem; height:60px; justify-content:center; flex:1; }
.reader-input .btn span { font-size:.65rem; line-height:1; white-space:nowrap; }
.reader-input .btn-red { margin:0; }
.btn-square { flex:none !important; width:60px !important; height:60px !important; padding:0 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; }
.btn-square span { font-size:.55rem; line-height:1; }
.btn {
    padding:.7rem 2rem; border:none; border-radius:12px; font-size:1rem;
    cursor:pointer; color:#fff; transition: opacity .2s;
}
.btn:hover { opacity:.85; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-row { display:flex; gap:.5rem; justify-content:center; align-items:stretch; }
.btn-row .btn { padding:1rem 2.8rem; display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.btn-row .btn span { font-size:.65rem; line-height:1; white-space:nowrap; }.btn-blue { background: var(--blue); }
.btn-purple { background: var(--purple); }
.btn-green { background: var(--primary); }
.btn-red { background: #c0392b; }
.btn-orange { background: #e67e22; }

/* VIEW PAGE */
.view-page { display:flex; justify-content:center; align-items:center; min-height:80vh; padding:2rem; }
.view-card { padding:2rem; text-align:center; max-width:500px; width:100%; }
.view-qr img { max-width:100%; border-radius:12px; background:#fff; padding:8px; }
.view-card .btn-row { margin-top:1.5rem; }
.view-footer { margin-top:1.5rem; opacity:.5; font-size:.8rem; }
.view-footer a { color:#fff; text-decoration:none; }
.result-row { display:flex; gap:.5rem; align-items:stretch; margin-top:1.5rem; }
.result-row .result-box {
    flex:1; padding:1rem; border-radius:12px;
    background:rgba(255,255,255,.06); word-break:break-all; min-height:60px;
    border:1px dashed var(--glass-border); margin-top:0;
    transition: box-shadow .3s;
}
.result-box.glow {
    animation: resultGlow 1.5s ease-out;
}
@keyframes resultGlow {
    0% { box-shadow: 0 0 15px rgba(46,204,113,.8), 0 0 30px rgba(46,204,113,.4); }
    100% { box-shadow: none; }
}
.btn-copy-result {
    flex:none; width:60px; height:60px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:.15rem;
    border-radius:12px; padding:0; background:var(--primary);
}
.btn-copy-result span { font-size:.55rem; line-height:1; }
.tabs { display:flex; gap:.5rem; margin-bottom:1rem; }
.tab {
    padding:.5rem 1.2rem; border-radius:10px; cursor:pointer;
    background:rgba(255,255,255,.08); border:1px solid var(--glass-border); color:#fff;
}
.tab.active { background: var(--purple); border-color: var(--purple); }

/* RADIO GROUP */
.radio-group {
    display:flex; gap:.5rem; flex-wrap:wrap; max-width:100%;
}
.radio-btn {
    flex:1; cursor:pointer;
}
.radio-btn input { display:none; }
.radio-btn span {
    display:block; text-align:center; padding:.5rem; border-radius:10px;
    border:1px solid var(--glass-border); background:rgba(255,255,255,.08);
    font-size:.9rem; transition: background .2s, border-color .2s;
}
.radio-btn input:checked + span {
    background: var(--blue); border-color: var(--blue);
}
.radio-btn:hover span {
    border-color: var(--blue);
}


/* COLOR PICKERS */
.pill-group { display:flex; flex-wrap:wrap; gap:.35rem; }
.pill-break { flex-basis:100%; height:0; }
.pill-group .radio-btn span {
    padding:.3rem .7rem; font-size:.75rem; border-radius:20px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    min-height:28px; display:flex; align-items:center; justify-content:center;
}
.pill-group .radio-btn input:checked + span {
    background:var(--blue); border-color:var(--blue); color:#fff;
}
.type-fields { display:flex; flex-direction:column; gap:.5rem; }
.type-fields input { width:100%; }

.settings-frame { display:flex; flex-direction:column; gap:.75rem; padding:1rem; border:1px solid var(--glass-border); border-radius:12px; background:rgba(255,255,255,.04); }
.color-subgrid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; padding:.75rem; border:1px solid var(--glass-border); border-radius:8px; background:rgba(255,255,255,.04); }
.color-subgrid > div { display:flex; flex-direction:column; gap:.4rem; }
.pickr-row { display:flex; align-items:center; gap:.5rem; }
.pickr-hex { font-size:.8rem; opacity:.6; font-family:monospace; }
.pickr .pcr-button { width:32px; height:32px; border-radius:8px; }
/* TOGGLE & RANGE */

/* COLOR SWATCHES */
.color-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.swatch {
    width:28px; height:28px; border-radius:8px; cursor:pointer;
    border:2px solid transparent; transition:border-color .2s, transform .15s;
}
.swatch:hover { transform:scale(1.15); }
.swatch.active { border-color:var(--blue); }
.swatch-transparent {
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    background-color: #fff;
}
.swatch-custom {
    background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red);
    display:flex; align-items:center; justify-content:center;
    font-size:.7rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6);
    position:relative; overflow:hidden;
}
.swatch-custom input[type=color] {
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; cursor:pointer; border:none; padding:0;
}

/* TOGGLE & RANGE */
.toggle-row {
    display:flex; align-items:center; gap:.5rem; width:220px;
    justify-content:space-between;
}
.toggle {
    width:46px; height:24px; appearance:none; -webkit-appearance:none;
    background:rgba(255,255,255,.15); border-radius:12px; position:relative;
    cursor:pointer; transition: background .2s; outline:none; flex-shrink:0;
}
.toggle::after {
    content:''; position:absolute; top:2px; left:2px; width:20px; height:20px;
    border-radius:50%; background:#fff; transition: transform .2s;
}
.toggle:checked { background: var(--blue); }
.toggle:checked::after { transform:translateX(22px); }
input[type=range] {
    flex:1; accent-color: var(--blue); background:transparent;
    -webkit-appearance:none; appearance:none; height:8px;
    border-radius:4px; background:rgba(255,255,255,.15); outline:none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none; width:28px; height:28px; border-radius:50%;
    background:var(--blue); cursor:pointer;
}
input[type=range]::-moz-range-thumb {
    width:28px; height:28px; border-radius:50%; border:none;
    background:var(--blue); cursor:pointer;
}
input[type=range]::-moz-range-track {
    height:8px; border-radius:4px; background:rgba(255,255,255,.15);
}
#radius-row {
    display:flex; align-items:center; gap:.5rem;
}
#radius-row.hidden { display:none; }
#radius-val { font-size:.85rem; opacity:.7; min-width:2.5em; text-align:center; }
.slider-row {
    display:flex; align-items:center; gap:.75rem;
}
.slider-row input[type=range] { flex:1; margin:0; padding:0; }
.slider-val {
    width:55px !important; flex:none; padding:.3rem .4rem; border-radius:8px;
    border:1px solid var(--glass-border); background:rgba(255,255,255,.08);
    color:#fff; font-size:.8rem; text-align:center;
    -moz-appearance:textfield;
}
.slider-val::-webkit-inner-spin-button,
.slider-val::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

/* TOOLTIP */
.tooltip {
    cursor:help; font-size:.8rem; opacity:.6;
    margin-left:4px;
}
.tooltip:hover { opacity:1; }
#tip-box {
    position:fixed; display:none;
    background:rgba(0,0,0,.92); color:#fff; font-size:.75rem;
    padding:.5rem .75rem; border-radius:8px; white-space:normal;
    width:220px; text-align:left; z-index:99999;
    pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* Prevent sidebar from clipping tooltips */

/* SPINNER */
.spinner {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:36px; height:36px;
    border:3px solid rgba(255,255,255,.15); border-top-color:var(--blue);
    border-radius:50%; animation:spin .7s linear infinite; z-index:10;
}
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* TOAST */
#toast {
    position:fixed; top:1rem; left:50%; transform:translateX(100vw);
    background:rgba(0,0,0,.88); color:#fff; padding:.7rem 1.5rem;
    border-radius:12px; font-size:.9rem; z-index:99999;
    transition: transform .4s ease; pointer-events:none;
    box-shadow:0 4px 16px rgba(0,0,0,.4);
}
#toast.show { transform:translateX(-50%); }
#toast.error { background:rgba(192,57,43,.95); }

/* MODAL */
#modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center; z-index:99999;
}
#modal-box {
    background:#1a2a35; border:1px solid var(--glass-border); border-radius:16px;
    padding:2rem; max-width:380px; width:90%; position:relative; text-align:center;
}
#modal-close {
    position:absolute; top:.5rem; right:.75rem; background:none; border:none;
    color:#fff; font-size:1.2rem; cursor:pointer; opacity:.6;
}
#modal-close:hover { opacity:1; }
#modal-msg { margin-bottom:1.5rem; font-size:.95rem; line-height:1.5; }
.modal-actions { display:flex; gap:.75rem; justify-content:center; }

/* DROP ZONE */
.drop-zone {
    border:2px dashed var(--glass-border); border-radius:12px;
    padding:1rem; text-align:center; cursor:pointer;
    transition: border-color .2s, background .2s;
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.drop-zone:hover, .drop-zone.dragover {
    border-color:var(--blue); background:rgba(52,152,219,.1);
}
.drop-zone span { font-size:.85rem; opacity:.6; }
.drop-zone img { max-width:80px; max-height:80px; border-radius:8px; }

/* RESPONSIVE */
@media(max-width:600px) {
    .hero h1 { font-size:2rem; }
    .card { width:90%; height:auto; padding:2rem; }
    .sidebar, .preview-area { flex:1 1 100%; }
    .maker-layout { flex-wrap:wrap; height:auto; }
    .maker-layout .sidebar-col { flex:1 1 100%; max-height:none; }
    .maker-layout .sidebar-col > .sidebar:last-child { overflow-y:visible; flex:none; }
    .maker-layout .sidebar { flex:1 1 100%; max-height:none; overflow-y:visible; }
}
@media(max-width:768px) and (min-width:601px) {
    .maker-layout { flex-wrap:wrap; height:auto; }
    .maker-layout .sidebar-col { flex:1 1 100%; max-height:none; }
    .maker-layout .sidebar-col > .sidebar:last-child { overflow-y:visible; flex:none; }
}

/* ACCESSIBILITY */
.btn:focus-visible, .toggle:focus-visible, .radio-btn input:focus-visible + span,
.drop-zone:focus-visible, [tabindex="0"]:focus-visible {
    outline:2px solid var(--blue); outline-offset:2px;
}
.skip-link { position:absolute; top:-100%; left:1rem; background:var(--blue); color:#fff; padding:.5rem 1rem; border-radius:8px; z-index:100000; }
.skip-link:focus { top:1rem; }
@media(prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
.placeholder { opacity:.55; }
input::placeholder, textarea::placeholder { color:rgba(255,255,255,.6); }

/* SITE FOOTER */
.site-footer {
    width:100%; text-align:center; padding:.75rem; font-size:.75rem;
    opacity:.5; margin-top:auto;
}
.site-footer a { color:#fff; text-decoration:none; }
.site-footer a:hover { opacity:.8; }

/* ADMIN LAYOUT */
.admin-layout { display:block; max-width:80vw; margin:0 auto; }
.admin-panel { padding:1.5rem; border-radius:16px; margin-bottom:1.5rem; }
.admin-stats { display:flex; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.admin-stat { padding:1rem 1.5rem; border-radius:12px; text-align:center; flex:1; min-width:120px; }
.admin-stat-value { font-size:2rem; font-weight:bold; }
.admin-stat-label { opacity:.7; }
.admin-tabs { display:flex; border-bottom:2px solid rgba(255,255,255,.1); margin-bottom:1.5rem; }
.admin-tab { flex:1; padding:.7rem; border:none; background:none; color:rgba(255,255,255,.5); font-weight:bold; font-size:.95rem; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; }
.admin-tab.active { border-bottom-color:currentColor; }
.admin-tab[data-tab="analytics"].active { color:#3498DB; }
.admin-tab[data-tab="maker"].active { color:#2ECC71; }
.admin-tab[data-tab="reader"].active { color:#9B59B6; }
.admin-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.admin-table th { text-align:left; padding:.4rem .6rem; }
.admin-table td { padding:.4rem .6rem; border-bottom:1px solid rgba(255,255,255,.06); }
.admin-table thead tr { border-bottom:1px solid rgba(255,255,255,.15); }
.admin-table .col-num { opacity:.5; }
.admin-table .col-content { word-break:break-all; max-width:400px; }
.admin-table .col-count { text-align:right; }
.admin-table .col-date { white-space:nowrap; }
.admin-table .col-ip { white-space:nowrap; opacity:.6; }
.admin-table .col-ver { opacity:.5; }
.admin-table .col-action a { text-decoration:none; }
.admin-table-sm { font-size:.8rem; }
.admin-table-sm th, .admin-table-sm td { padding:.4rem .5rem; }
.admin-table-sm .col-content { max-width:300px; }
.admin-empty { padding:1rem; text-align:center; opacity:.5; }
.admin-search { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.admin-search input[type=text] { flex:1; min-width:150px; padding:.4rem .6rem; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; }
.admin-pagination { display:flex; justify-content:center; gap:.3rem; margin-top:1rem; flex-wrap:wrap; }
.admin-pagination a { padding:.3rem .7rem; border-radius:8px; text-decoration:none; color:#fff; background:rgba(255,255,255,.1); }
.admin-pagination a.active { background:#3498DB; }
.admin-pagination .ellipsis { padding:.3rem; opacity:.4; }
.admin-link { text-decoration:none; }
.admin-link-maker { color:#2ECC71; }
.admin-link-reader { color:#9B59B6; }
.admin-logout { margin-left:auto; color:rgba(255,255,255,.7); text-decoration:none; }